{
  "name": "combobox-groups-demo",
  "type": "registry:example",
  "registryDependencies": [
    "combobox"
  ],
  "files": [
    {
      "path": "examples/combobox-groups-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxSeparator,\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\nconst groupedTricks = {\n  \"Basic Tricks\": tricks.slice(0, 3),\n  \"Advanced Tricks\": tricks.slice(3, 5),\n  \"Pro Tricks\": tricks.slice(5),\n};\n\nexport default function ComboboxGroupsDemo() {\n  const [value, setValue] = React.useState(\"\");\n\n  return (\n    <Combobox value={value} onValueChange={setValue}>\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        {Object.entries(groupedTricks).map(([category, items], index) => (\n          <React.Fragment key={category}>\n            <ComboboxGroup>\n              <ComboboxGroupLabel>{category}</ComboboxGroupLabel>\n              {items.map((trick) => (\n                <ComboboxItem key={trick.value} value={trick.value} outset>\n                  {trick.label}\n                </ComboboxItem>\n              ))}\n            </ComboboxGroup>\n            {index < Object.entries(groupedTricks).length - 1 && (\n              <ComboboxSeparator />\n            )}\n          </React.Fragment>\n        ))}\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n",
      "target": ""
    }
  ]
}