{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "A select you can type into, for lists too long to scan.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/combobox.tsx",
      "content": "\"use client\"\n\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ComboboxProps = {\n  /** Names the input for screen readers. */\n  label: string\n  options: string[]\n  /** The selected option, when you control it. */\n  value?: string | null\n  /** The starting option, when it manages itself. */\n  defaultValue?: string | null\n  onValueChange?: (value: string | null) => void\n  placeholder?: string\n  /** Shown when nothing matches. */\n  emptyText?: string\n  className?: string\n}\n\nexport function Combobox({\n  label,\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder,\n  emptyText = \"No matches.\",\n  className,\n}: ComboboxProps) {\n  return (\n    <BaseCombobox.Root\n      items={options}\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={(next) => onValueChange?.(next as string | null)}\n    >\n      <BaseCombobox.InputGroup\n        className={cn(\"border-ink relative flex min-w-40 border-(length:--rule) font-(family-name:--f-body)\", className)}\n      >\n        <BaseCombobox.Input\n          aria-label={label}\n          placeholder={placeholder}\n          className=\"placeholder:text-mute min-w-0 grow bg-transparent px-3 py-2 text-sm outline-none\"\n        />\n        <BaseCombobox.Trigger\n          aria-label=\"Show options\"\n          className=\"spotcheck-focus border-ink cursor-pointer border-l-(length:--rule) px-2.5 font-(family-name:--f-mono) text-xs\"\n        >\n          ↓\n        </BaseCombobox.Trigger>\n      </BaseCombobox.InputGroup>\n      <BaseCombobox.Portal>\n        <BaseCombobox.Positioner sideOffset={4} className=\"z-50\">\n          <BaseCombobox.Popup className=\"border-ink bg-paper text-ink w-(--anchor-width) border-(length:--rule) font-(family-name:--f-body) shadow-[6px_6px_0_var(--ink)]\">\n            <BaseCombobox.Empty className=\"text-mute empty:hidden px-3 py-2 font-(family-name:--f-mono) text-xs\">\n              {emptyText}\n            </BaseCombobox.Empty>\n            <BaseCombobox.List className=\"max-h-[min(280px,var(--available-height))] overflow-auto empty:hidden\">\n              {(option: string) => (\n                <BaseCombobox.Item\n                  key={option}\n                  value={option}\n                  className=\"data-highlighted:bg-ink data-highlighted:text-paper flex cursor-pointer items-center justify-between gap-3 px-3 py-1.5 text-sm\"\n                >\n                  {option}\n                  <BaseCombobox.ItemIndicator aria-hidden>✓</BaseCombobox.ItemIndicator>\n                </BaseCombobox.Item>\n              )}\n            </BaseCombobox.List>\n          </BaseCombobox.Popup>\n        </BaseCombobox.Positioner>\n      </BaseCombobox.Portal>\n    </BaseCombobox.Root>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}