{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Searchable select pattern using Popover + Command.",
  "dependencies": ["lucide-react"],
  "registryDependencies": [
    "@glasswave/button",
    "@glasswave/command",
    "@glasswave/popover"
  ],
  "files": [
    {
      "path": "registry/glasswave/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport { Check, ChevronsUpDown } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/components/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nexport type ComboboxOption = {\n  value: string;\n  label: string;\n  keywords?: string[];\n};\n\nexport interface ComboboxProps {\n  options: ComboboxOption[];\n  value?: string | null;\n  onValueChange?: (value: string | null) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport function Combobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = \"Select…\",\n  searchPlaceholder = \"Search…\",\n  emptyText = \"No results found.\",\n  className,\n  disabled,\n}: ComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const selected = options.find((o) => o.value === value);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"glass\"\n          role=\"combobox\"\n          aria-expanded={open}\n          disabled={disabled}\n          className={cn(\"min-w-[220px] justify-between font-normal\", className)}\n        >\n          <span className=\"truncate\">{selected?.label ?? placeholder}</span>\n          <ChevronsUpDown className=\"size-4 shrink-0 opacity-50\" aria-hidden />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[var(--radix-popover-trigger-width)] min-w-[220px] p-0\"\n        align=\"start\"\n      >\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            <CommandGroup>\n              {options.map((opt) => (\n                <CommandItem\n                  key={opt.value}\n                  value={opt.label}\n                  keywords={opt.keywords ?? [opt.label, opt.value]}\n                  onSelect={() => {\n                    onValueChange?.(opt.value === value ? null : opt.value);\n                    setOpen(false);\n                  }}\n                >\n                  <Check\n                    className={cn(\n                      \"size-4 shrink-0\",\n                      value === opt.value ? \"opacity-100\" : \"opacity-0\",\n                    )}\n                    aria-hidden\n                  />\n                  {opt.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}