{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "A searchable single/multi-select picker on Base UI's first-class Combobox primitive — the kit's equivalent of shadcn's Command+Popover recipe, without cmdk. Input-family 44px field with a leading search glyph, clear and open controls; the highlighted row wears the accent WASH; the popup is the raised surface; the focus ring is --text; aria-invalid on the input draws a 2px --danger edge round the whole field.",
  "dependencies": [
    "@base-ui/react@1.9.0",
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme",
    "@waimakers/separator"
  ],
  "files": [
    {
      "path": "src/components/ui/combobox.tsx",
      "content": "import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { CheckIcon, ChevronDownIcon, SearchIcon, XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn, focusRing, inputGroupFocusRing, inputGroupInvalidRing } from \"../../lib/utils\";\nimport { Separator } from \"./separator\";\n\nconst Combobox = ComboboxPrimitive.Root;\nconst ComboboxGroup = ComboboxPrimitive.Group;\nconst ComboboxValue = ComboboxPrimitive.Value;\n\nfunction ComboboxInput({\n  className,\n  placeholder,\n  showClear = true,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Input> & { showClear?: boolean }) {\n  return (\n    <ComboboxPrimitive.InputGroup\n      data-slot=\"combobox-input-group\"\n      className={cn(\n        \"relative flex h-11 w-full items-center rounded-md border border-input bg-background transition-colors ease-brand\",\n        inputGroupFocusRing,\n        inputGroupInvalidRing,\n        \"has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50\",\n        className,\n      )}\n    >\n      <SearchIcon\n        className=\"pointer-events-none absolute left-3 size-4 shrink-0 text-muted-foreground\"\n        aria-hidden\n      />\n      <ComboboxPrimitive.Input\n        data-slot=\"combobox-input\"\n        placeholder={placeholder}\n        className={cn(\n          \"h-full w-full rounded-md border-0 bg-transparent pr-16 pl-9 text-sm text-foreground outline-none placeholder:text-muted-foreground\",\n        )}\n        {...props}\n      />\n      <div className=\"absolute right-1 flex h-full items-center text-muted-foreground\">\n        {showClear ? (\n          <ComboboxPrimitive.Clear\n            aria-label=\"Clear selection\"\n            className={cn(\n              \"flex size-7 items-center justify-center rounded-sm transition-colors ease-brand hover:text-foreground\",\n              focusRing,\n            )}\n          >\n            <XIcon className=\"size-4\" aria-hidden />\n          </ComboboxPrimitive.Clear>\n        ) : null}\n        <ComboboxPrimitive.Trigger\n          aria-label=\"Show options\"\n          className={cn(\n            \"flex size-7 items-center justify-center rounded-sm transition-colors ease-brand hover:text-foreground\",\n            focusRing,\n          )}\n        >\n          <ChevronDownIcon className=\"size-4\" aria-hidden />\n        </ComboboxPrimitive.Trigger>\n      </div>\n    </ComboboxPrimitive.InputGroup>\n  );\n}\n\nfunction ComboboxContent({\n  className,\n  children,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Popup> & { sideOffset?: number }) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        className=\"z-(--z-modal,50) outline-none\"\n        sideOffset={sideOffset}\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          className={cn(\n            \"w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-brand-overlay\",\n            \"transition-[transform,opacity] duration-(--dur-fast,120ms) ease-brand motion-reduce:transition-none\",\n            \"data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxList({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.List>) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"max-h-[min(20rem,var(--available-height))] scroll-py-1 overflow-y-auto p-1 outline-none data-empty:p-0 [scrollbar-width:thin]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Empty>) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  indicatorPosition = \"start\",\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Item> & {\n  indicatorPosition?: \"start\" | \"end\";\n}) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"grid cursor-default items-center gap-1.5 rounded-sm px-2 py-2 text-sm text-foreground outline-none transition-colors select-none\",\n        indicatorPosition === \"end\"\n          ? \"grid-cols-[minmax(0,1fr)_1.25rem]\"\n          : \"grid-cols-[1.25rem_minmax(0,1fr)]\",\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <ComboboxPrimitive.ItemIndicator\n        className={cn(\n          \"row-start-1 flex items-center justify-center\",\n          indicatorPosition === \"end\" ? \"col-start-2\" : \"col-start-1\",\n        )}\n      >\n        <CheckIcon className=\"size-4\" aria-hidden />\n      </ComboboxPrimitive.ItemIndicator>\n      <span\n        className={cn(\n          \"row-start-1 truncate\",\n          indicatorPosition === \"end\" ? \"col-start-1\" : \"col-start-2\",\n        )}\n      >\n        {children}\n      </span>\n    </ComboboxPrimitive.Item>\n  );\n}\n\nfunction ComboboxGroupLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-group-label\"\n      className={cn(\n        \"px-2 py-1.5 text-brand-eyebrow font-semibold tracking-brand-eyebrow text-muted-foreground uppercase\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"mx-1 my-1 data-[orientation=horizontal]:w-auto\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxValue,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/combobox.tsx"
    }
  ],
  "type": "registry:ui"
}