{
  "name": "combobox-custom-filter-demo",
  "type": "registry:example",
  "registryDependencies": [
    "combobox"
  ],
  "files": [
    {
      "path": "examples/combobox-custom-filter-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport { matchSorter } from \"match-sorter\";\nimport * as React from \"react\";\n\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxTrigger,\n} from \"@/registry/bases/radix/ui/combobox\";\n\nconst tricks = [\n  { label: \"Kickflip\", value: \"kickflip\" },\n  { label: \"Heelflip\", value: \"heelflip\" },\n  { label: \"Tre Flip\", value: \"tre-flip\" },\n  { label: \"FS 540\", value: \"fs-540\" },\n  { label: \"Casper flip 360 flip\", value: \"casper-flip-360-flip\" },\n  { label: \"Kickflip Backflip\", value: \"kickflip-backflip\" },\n  { label: \"360 Varial McTwist\", value: \"360-varial-mc-twist\" },\n  { label: \"The 900\", value: \"the-900\" },\n];\n\nexport default function ComboboxCustomFilterDemo() {\n  const [value, setValue] = React.useState(\"\");\n\n  function onFilter(options: string[], inputValue: string) {\n    const trickOptions = tricks.filter((trick) =>\n      options.includes(trick.value),\n    );\n    return matchSorter(trickOptions, inputValue, {\n      keys: [\"label\", \"value\"],\n      threshold: matchSorter.rankings.MATCHES,\n    }).map((trick) => trick.value);\n  }\n\n  return (\n    <Combobox value={value} onValueChange={setValue} onFilter={onFilter}>\n      <ComboboxLabel>Trick</ComboboxLabel>\n      <ComboboxAnchor>\n        <ComboboxInput placeholder=\"Select trick...\" />\n        <ComboboxTrigger>\n          <ChevronDown className=\"h-4 w-4\" />\n        </ComboboxTrigger>\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No tricks found.</ComboboxEmpty>\n        {tricks.map((trick) => (\n          <ComboboxItem key={trick.value} value={trick.value}>\n            {trick.label}\n          </ComboboxItem>\n        ))}\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n",
      "target": ""
    }
  ]
}