{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox12",
  "title": "Combobox",
  "description": "Combobox built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/combobox/12/index.tsx",
      "content": "\"use client\";\n\nimport { useId, useState } from \"react\";\n\nimport { CheckIcon, ChevronsUpDownIcon, PlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator\n} from \"@/components/ui/command\";\nimport { Label } from \"@/components/ui/label\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\"\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\"\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\"\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\"\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\"\n  }\n];\n\nexport default function ComboboxComponent() {\n  const id = useId();\n  const [open, setOpen] = useState<boolean>(false);\n  const [value, setValue] = useState<string>();\n\n  return (\n    <div className=\"w-full max-w-xs\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"bg-background hover:bg-background border-input w-full justify-between px-3 font-normal outline-offset-0 outline-none focus-visible:outline-[3px]\">\n            <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n              {value\n                ? frameworks.find((framework) => framework.value === value)?.label\n                : \"Select framework...\"}\n            </span>\n            <ChevronsUpDownIcon className=\"text-muted-foreground/80 shrink-0\" aria-hidden=\"true\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"border-input w-[var(--radix-popper-anchor-width)] p-0\"\n          align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Find framework\" />\n            <CommandList>\n              <CommandEmpty>No framework found.</CommandEmpty>\n              <CommandGroup>\n                {frameworks.map((framework) => (\n                  <CommandItem\n                    key={framework.value}\n                    value={framework.value}\n                    onSelect={(currentValue) => {\n                      setValue(currentValue === value ? \"\" : currentValue);\n                      setOpen(false);\n                    }}>\n                    {framework.label}\n                    {value === framework.value && <CheckIcon size={16} className=\"ml-auto\" />}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup>\n                <Button variant=\"ghost\" className=\"w-full justify-start font-normal\">\n                  <PlusIcon className=\"-ms-2 opacity-60\" aria-hidden=\"true\" />\n                  New framework\n                </Button>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/combobox12.tsx"
    }
  ],
  "type": "registry:component"
}