{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Searchable single-select picker.",
  "dependencies": [
    "lucide-react@^1.33.0"
  ],
  "registryDependencies": [
    "https://components.exe.xyz/r/button.json",
    "https://components.exe.xyz/r/command.json",
    "https://components.exe.xyz/r/popover.json",
    "https://components.exe.xyz/r/utils.json"
  ],
  "files": [
    {
      "path": "src/components/ui/combobox.tsx",
      "content": "import * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nexport type ComboboxOption = { value: string; label: string }\n\nfunction Combobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = \"Select an option\",\n  searchPlaceholder = \"Search…\",\n  emptyText = \"No results found.\",\n  className,\n}: {\n  options: ComboboxOption[]\n  value?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  searchPlaceholder?: string\n  emptyText?: string\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(false)\n  const selected = options.find((option) => option.value === value)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className={cn(\"w-60 justify-between font-normal\", className)}\n        >\n          <span\n            className={cn(\"truncate\", !selected && \"text-muted-foreground\")}\n          >\n            {selected?.label ?? placeholder}\n          </span>\n          <ChevronsUpDown aria-hidden=\"true\" className=\"size-4 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-(--radix-popover-trigger-width) p-0\">\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            {options.map((option) => (\n              <CommandItem\n                key={option.value}\n                value={option.label}\n                data-checked={option.value === value}\n                onSelect={() => {\n                  onValueChange?.(option.value)\n                  setOpen(false)\n                }}\n              >\n                <Check\n                  aria-hidden=\"true\"\n                  className={cn(\n                    \"size-4\",\n                    option.value === value ? \"opacity-100\" : \"opacity-0\"\n                  )}\n                />\n                {option.label}\n              </CommandItem>\n            ))}\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport { Combobox }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}