{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "type": "registry:ui",
  "title": "Combobox",
  "description": "An input combined with a list of predefined items to select.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@basecn/input",
    "@basecn/button",
    "@basecn/separator"
  ],
  "files": [
    {
      "path": "src/registry/components/ui/combobox.tsx",
      "content": "import { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { CheckIcon, XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/registry/components/ui/button\";\nimport { Input } from \"@/registry/components/ui/input\";\nimport { Separator } from \"@/registry/components/ui/separator\";\nimport { RefObject } from \"react\";\n\nconst Combobox = ComboboxPrimitive.Root;\n\nfunction ComboboxInput(\n  props: ComboboxPrimitive.Input.Props & {\n    ref?: RefObject<HTMLInputElement | null>;\n  }\n) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-input\"\n      render={<Input />}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxTrigger(props: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      render={<Button variant=\"outline\" />}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxIcon(props: ComboboxPrimitive.Icon.Props) {\n  return <ComboboxPrimitive.Icon data-slot=\"combobox-icon\" {...props} />;\n}\n\nfunction ComboboxClear({\n  children,\n  className,\n  ...props\n}: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      className={cn(\n        \"flex h-9 w-6 items-center justify-center rounded bg-transparent p-0\",\n        className\n      )}\n      aria-label=\"Clear selection\"\n      data-slot=\"combobox-clear\"\n      {...props}\n    >\n      {children ?? <XIcon className=\"size-4\" />}\n    </ComboboxPrimitive.Clear>\n  );\n}\n\nfunction ComboboxValue(props: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: ComboboxPrimitive.Chips.Props & { ref?: RefObject<HTMLDivElement | null> }) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"min-h-9 flex flex-wrap items-start gap-1 rounded-md border px-1.5 py-1.5 transition-[color,box-shadow]\",\n        \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({ className, ...props }: ComboboxPrimitive.Chip.Props) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex items-center gap-1 rounded-md bg-muted px-1 ps-2 pe-0 text-xs outline-none cursor-default focus-within:bg-primary focus-within:text-primary-foreground\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChipRemove({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.ChipRemove.Props) {\n  return (\n    <ComboboxPrimitive.ChipRemove\n      data-slot=\"combobox-chip-remove\"\n      className={cn(\n        \"rounded-md p-1 text-inherit hover:bg-accent-foreground/10\",\n        className\n      )}\n      aria-label=\"Remove\"\n      {...props}\n    >\n      {children ?? <XIcon className=\"size-3.5\" />}\n    </ComboboxPrimitive.ChipRemove>\n  );\n}\n\nfunction ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {\n  return (\n    <ComboboxPrimitive.Popup\n      data-slot=\"combobox-popup\"\n      className={cn(\n        \"w-(--anchor-width) max-h-[min(var(--available-height),23rem)] max-w-(--available-width) origin-(--transform-origin) overflow-y-auto scroll-pt-2 scroll-pb-2 overscroll-contain rounded-md bg-popover py-2 shadow-md outline-1 outline-border transition-[transform,scale,opacity] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[side=none]:data-[ending-style]:transition-none data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[side=none]:data-[starting-style]:scale-100 data-[side=none]:data-[starting-style]:opacity-100 data-[side=none]:data-[starting-style]:transition-none dark:shadow-none\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxPositioner({\n  className,\n  ...props\n}: ComboboxPrimitive.Positioner.Props) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        data-slot=\"combobox-positioner\"\n        className={cn(\"z-50 outline-none\", className)}\n        {...props}\n      />\n    </ComboboxPrimitive.Portal>\n  );\n}\n\nfunction ComboboxArrow(props: ComboboxPrimitive.Arrow.Props) {\n  return <ComboboxPrimitive.Arrow data-slot=\"combobox-arrow\" {...props} />;\n}\n\nfunction ComboboxStatus({\n  className,\n  ...props\n}: ComboboxPrimitive.Status.Props) {\n  return (\n    <ComboboxPrimitive.Status\n      data-slot=\"combobox-status\"\n      className={cn(\n        \"px-4.5 py-2 text-sm text-muted-foreground empty:m-0 empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"flex items-center justify-center text-muted-foreground text-sm not-empty:py-1\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxList(props: ComboboxPrimitive.List.Props) {\n  return <ComboboxPrimitive.List data-slot=\"combobox-list\" {...props} />;\n}\n\nfunction ComboboxRow(props: ComboboxPrimitive.Row.Props) {\n  return <ComboboxPrimitive.Row data-slot=\"combobox-row\" {...props} />;\n}\n\nfunction ComboboxItem({ className, ...props }: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[0.95rem_1fr] items-center gap-2 py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-accent-foreground data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-2 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:-z-1 data-[highlighted]:before:rounded-sm data-[highlighted]:before:bg-accent\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItemIndicator({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.ItemIndicator.Props) {\n  return (\n    <ComboboxPrimitive.ItemIndicator\n      data-slot=\"combobox-item-indicator\"\n      className={cn(\"col-start-1\", className)}\n      {...props}\n    >\n      {children ?? <CheckIcon className=\"size-4\" />}\n    </ComboboxPrimitive.ItemIndicator>\n  );\n}\n\nfunction ComboboxSeparator(props: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      render={<Separator />}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(\"mb-3 last:mb-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroupLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-group-label\"\n      className={cn(\n        \"z-1 sticky top-0 bg-background pl-4 text-sm text-muted-foreground py-2\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\nexport {\n  Combobox,\n  ComboboxArrow,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxChips,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxPositioner,\n  ComboboxRow,\n  ComboboxSeparator,\n  ComboboxStatus,\n  ComboboxTrigger,\n  ComboboxValue,\n};\n",
      "type": "registry:ui"
    }
  ]
}