{
  "name": "combobox-demo",
  "type": "registry:example",
  "registryDependencies": [
    "combobox"
  ],
  "files": [
    {
      "path": "examples/combobox-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as Combobox from \"@diceui/combobox\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport * as React from \"react\";\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 ComboboxDemo() {\n  return (\n    <Combobox.ComboboxRoot>\n      <Combobox.ComboboxLabel className=\"text-sm leading-none font-medium text-zinc-950 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-zinc-50\">\n        Trick\n      </Combobox.ComboboxLabel>\n      <Combobox.ComboboxAnchor className=\"flex h-9 w-full items-center justify-between rounded-md border border-zinc-200 bg-white px-3 py-2 shadow-xs transition-colors data-focused:ring-1 data-focused:ring-zinc-800 dark:border-zinc-800 dark:bg-zinc-950 dark:data-focused:ring-zinc-300\">\n        <Combobox.ComboboxInput\n          placeholder=\"Search trick...\"\n          className=\"flex h-9 w-full rounded-md bg-transparent text-base text-zinc-900 placeholder:text-zinc-500 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:text-zinc-50 dark:placeholder:text-zinc-400\"\n        />\n        <Combobox.ComboboxTrigger className=\"flex shrink-0 items-center justify-center rounded-r-md border-zinc-200 bg-transparent text-zinc-500 transition-colors hover:text-zinc-900 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-50\">\n          <ChevronDown className=\"h-4 w-4\" />\n        </Combobox.ComboboxTrigger>\n      </Combobox.ComboboxAnchor>\n      <Combobox.ComboboxPortal>\n        <Combobox.ComboboxContent className=\"relative z-50 min-w-[var(--dice-anchor-width)] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50\">\n          <Combobox.ComboboxEmpty className=\"py-6 text-center text-sm text-zinc-500 dark:text-zinc-400\">\n            No tricks found.\n          </Combobox.ComboboxEmpty>\n          {tricks.map((trick) => (\n            <Combobox.ComboboxItem\n              key={trick.value}\n              value={trick.value}\n              className=\"relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-zinc-100 data-highlighted:text-zinc-900 dark:data-highlighted:bg-zinc-800 dark:data-highlighted:text-zinc-50\"\n            >\n              <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n                <Combobox.ComboboxItemIndicator>\n                  <Check className=\"h-4 w-4\" />\n                </Combobox.ComboboxItemIndicator>\n              </span>\n              <Combobox.ComboboxItemText>\n                {trick.label}\n              </Combobox.ComboboxItemText>\n            </Combobox.ComboboxItem>\n          ))}\n        </Combobox.ComboboxContent>\n      </Combobox.ComboboxPortal>\n    </Combobox.ComboboxRoot>\n  );\n}\n",
      "target": ""
    }
  ]
}