{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Searchable select with fuzzy filtering and a gliding highlight.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/command.json",
    "https://ui.cuelark.com/r/popover.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/registry/cuelark/ui/command\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/registry/cuelark/ui/popover\";\nimport { cn } from \"@/lib/utils\";\n\ntype ComboboxOption = { value: string; label: string; keywords?: string[]; disabled?: boolean };\n\ntype ComboboxProps = {\n  options: ComboboxOption[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n};\n\n/** A searchable select: a popover trigger plus a filtered command list with a gliding highlight. */\nfunction Combobox({\n  options,\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  placeholder = \"Select…\",\n  searchPlaceholder = \"Search…\",\n  emptyText = \"No results.\",\n  disabled,\n  className,\n  ...props\n}: ComboboxProps) {\n  const [open, setOpen] = React.useState(false);\n  const [internal, setInternal] = React.useState(defaultValue);\n  const current = value ?? internal;\n  const selected = options.find((o) => o.value === current);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-label={props[\"aria-label\"]}\n          disabled={disabled}\n          data-slot=\"combobox-trigger\"\n          className={cn(\n            \"flex h-ctl-md w-56 items-center justify-between gap-2 rounded-md border border-input bg-card px-3 text-sm shadow-control outline-none transition-[border-color,box-shadow] duration-150 ease-cue hover:border-ring/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50\",\n            !selected && \"text-muted-foreground\",\n            className,\n          )}\n        >\n          <span className=\"truncate\">{selected?.label ?? placeholder}</span>\n          <ChevronsUpDownIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-(--radix-popover-trigger-width) min-w-56 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            <CommandGroup>\n              {options.map((o) => (\n                <CommandItem\n                  key={o.value}\n                  value={o.value}\n                  keywords={[o.label, ...(o.keywords ?? [])]}\n                  disabled={o.disabled}\n                  onSelect={(v) => {\n                    const next = v === current ? \"\" : v;\n                    setInternal(next);\n                    onValueChange?.(next);\n                    setOpen(false);\n                  }}\n                >\n                  {o.label}\n                  <CheckIcon className={cn(\"ms-auto size-4 !text-primary\", o.value === current ? \"opacity-100\" : \"opacity-0\")} />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport { Combobox };\nexport type { ComboboxOption, ComboboxProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/combobox",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}