{
  "name": "listbox-group-demo",
  "type": "registry:example",
  "registryDependencies": [
    "listbox"
  ],
  "files": [
    {
      "path": "examples/listbox-group-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  Listbox,\n  ListboxGroup,\n  ListboxGroupLabel,\n  ListboxItem,\n  ListboxItemIndicator,\n} from \"@/registry/bases/radix/ui/listbox\";\n\nconst tricks = {\n  basic: [\n    {\n      label: \"Kickflip\",\n      description: \"Flip the board 360° along its long axis\",\n    },\n    {\n      label: \"Heelflip\",\n      description:\n        \"Flip the board 360° along its long axis in the opposite direction\",\n    },\n  ],\n  advanced: [\n    {\n      label: \"Varial McTwist\",\n      description: \"A 540° inverted aerial with a board rotation\",\n    },\n    {\n      label: \"The 900\",\n      description: \"Legendary 900° aerial rotation pioneered by Tony Hawk\",\n    },\n  ],\n};\n\nexport default function ListboxGroupDemo() {\n  const [selectedTricks, setSelectedTricks] = React.useState<string[]>([]);\n\n  return (\n    <Listbox multiple value={selectedTricks} onValueChange={setSelectedTricks}>\n      <ListboxGroup>\n        <ListboxGroupLabel>Basic Tricks</ListboxGroupLabel>\n        {tricks.basic.map((trick) => (\n          <ListboxItem key={trick.label} value={trick.label}>\n            <div className=\"flex flex-col items-start\">\n              <span>{trick.label}</span>\n              <span className=\"text-xs text-muted-foreground\">\n                {trick.description}\n              </span>\n            </div>\n            <ListboxItemIndicator />\n          </ListboxItem>\n        ))}\n      </ListboxGroup>\n      <ListboxGroup>\n        <ListboxGroupLabel>Advanced Tricks</ListboxGroupLabel>\n        {tricks.advanced.map((trick) => (\n          <ListboxItem key={trick.label} value={trick.label}>\n            <div className=\"flex flex-col items-start\">\n              <span>{trick.label}</span>\n              <span className=\"text-xs text-muted-foreground\">\n                {trick.description}\n              </span>\n            </div>\n            <ListboxItemIndicator />\n          </ListboxItem>\n        ))}\n      </ListboxGroup>\n    </Listbox>\n  );\n}\n",
      "target": ""
    }
  ]
}