{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "Searchable dropdown with autocomplete for filtering and selecting from a list of options.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input-group"
  ],
  "files": [
    {
      "path": "packages/ui/src/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport {\n  Check as CheckIcon,\n  ChevronDown as ChevronDownIcon,\n  X as XIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"./button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\nimport { cn, POPUP_ITEM_HEIGHT } from \"./utils\";\n\n// =============================================================================\n// Combobox (Root)\n// =============================================================================\nconst Combobox = ComboboxPrimitive.Root;\n\n// =============================================================================\n// ComboboxValue\n// =============================================================================\nexport interface ComboboxValueProps extends ComboboxPrimitive.Value.Props {}\n\nfunction ComboboxValue({ ...props }: ComboboxValueProps) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\n// =============================================================================\n// ComboboxTrigger\n// =============================================================================\nexport interface ComboboxTriggerProps extends ComboboxPrimitive.Trigger.Props {}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  return (\n    <ComboboxPrimitive.Trigger\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  );\n}\n\n// =============================================================================\n// ComboboxClear\n// =============================================================================\nexport interface ComboboxClearProps extends ComboboxPrimitive.Clear.Props {}\n\nfunction ComboboxClear({ className, ...props }: ComboboxClearProps) {\n  return (\n    <ComboboxPrimitive.Clear\n      className={cn(className)}\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton size=\"icon-xs\" variant=\"ghost\" />}\n      {...props}\n    >\n      <XIcon className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  );\n}\n\n// =============================================================================\n// ComboboxInput\n// =============================================================================\nexport interface ComboboxInputProps extends ComboboxPrimitive.Input.Props {\n  /**\n   * Children to render inside the input group (e.g., InputGroupAddon)\n   */\n  children?: React.ReactNode;\n  /**\n   * Show the clear button when a value is selected\n   * @default false\n   */\n  showClear?: boolean;\n  /**\n   * Show the dropdown trigger button\n   * @default true\n   */\n  showTrigger?: boolean;\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxInputProps) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            data-slot=\"combobox-trigger-button\"\n            disabled={disabled}\n            render={<ComboboxTrigger />}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  );\n}\n\n// =============================================================================\n// ComboboxContent\n// =============================================================================\nexport interface ComboboxContentProps extends ComboboxPrimitive.Popup.Props {\n  /**\n   * Alignment of the content\n   * @default \"start\"\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Offset along the alignment axis\n   * @default 0\n   */\n  alignOffset?: number;\n  /**\n   * Custom anchor element (used for chips mode)\n   */\n  anchor?: React.RefObject<HTMLElement | null>;\n  /**\n   * Side of the trigger to position the popup\n   * @default \"bottom\"\n   */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\" | \"inline-start\" | \"inline-end\";\n  /**\n   * Offset from the trigger\n   * @default 6\n   */\n  sideOffset?: number;\n  /**\n   * Size of the menu items\n   * @default \"default\"\n   */\n  size?: \"default\" | \"compact\";\n}\n\nfunction ComboboxContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  size = \"default\",\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ComboboxPrimitive.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground ring-popup-ring\",\n            \"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) min-w-[calc(var(--anchor-width)+--spacing(7))] max-w-(--available-width)\",\n            \"z-[var(--z-popover)] origin-(--transform-origin) overflow-hidden rounded-lg shadow-lg ring-1\",\n            \"data-[chips=true]:min-w-(--anchor-width)\",\n            \"*:data-[slot=input-group]:!border-0 *:data-[slot=input-group]:!shadow-none *:data-[slot=input-group]:!ring-0 *:data-[slot=input-group]:rounded-none *:data-[slot=input-group]:bg-transparent\",\n            className\n          )}\n          data-chips={!!anchor}\n          data-size={size}\n          data-slot=\"combobox-content\"\n          {...props}\n        >\n          {children}\n        </ComboboxPrimitive.Popup>\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  );\n}\n\n// =============================================================================\n// ComboboxList\n// =============================================================================\nexport interface ComboboxListProps extends ComboboxPrimitive.List.Props {}\n\nfunction ComboboxList({ className, ...props }: ComboboxListProps) {\n  return (\n    <ComboboxPrimitive.List\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0\",\n        className\n      )}\n      data-slot=\"combobox-list\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ComboboxItem\n// =============================================================================\nexport interface ComboboxItemProps extends ComboboxPrimitive.Item.Props {\n  children: React.ReactNode;\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxItemProps) {\n  return (\n    <ComboboxPrimitive.Item\n      className={cn(\n        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:*:text-accent-foreground\",\n        `relative flex ${POPUP_ITEM_HEIGHT} w-full cursor-pointer select-none items-center gap-1.5 rounded-md pr-8 pl-1.5 text-sm outline-hidden`,\n        \"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"pointer-events-none\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  );\n}\n\n// =============================================================================\n// ComboboxGroup\n// =============================================================================\nexport interface ComboboxGroupProps extends ComboboxPrimitive.Group.Props {}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxGroupProps) {\n  return (\n    <ComboboxPrimitive.Group\n      className={cn(className)}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ComboboxLabel\n// =============================================================================\nexport interface ComboboxLabelProps\n  extends ComboboxPrimitive.GroupLabel.Props {}\n\nfunction ComboboxLabel({ className, ...props }: ComboboxLabelProps) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      className={cn(\"px-1.5 py-1 text-muted-foreground text-xs\", className)}\n      data-slot=\"combobox-label\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ComboboxCollection\n// =============================================================================\nexport interface ComboboxCollectionProps\n  extends ComboboxPrimitive.Collection.Props {}\n\nfunction ComboboxCollection({ ...props }: ComboboxCollectionProps) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  );\n}\n\n// =============================================================================\n// ComboboxEmpty\n// =============================================================================\nexport interface ComboboxEmptyProps extends ComboboxPrimitive.Empty.Props {}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxEmptyProps) {\n  return (\n    <ComboboxPrimitive.Empty\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-muted-foreground text-sm group-data-empty/combobox-content:flex\",\n        className\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ComboboxSeparator\n// =============================================================================\nexport interface ComboboxSeparatorProps\n  extends ComboboxPrimitive.Separator.Props {}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps) {\n  return (\n    <ComboboxPrimitive.Separator\n      className={cn(\"-mx-1 my-1 h-px bg-border-muted\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ComboboxChips\n// =============================================================================\nexport interface ComboboxChipsProps\n  extends React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips>,\n    ComboboxPrimitive.Chips.Props {}\n\nconst ComboboxChips = ({\n  className,\n  ref,\n  ...props\n}: ComboboxChipsProps & React.RefAttributes<HTMLDivElement>) => (\n  <ComboboxPrimitive.Chips\n    className={cn(\n      \"flex min-h-10 flex-wrap items-center gap-1 rounded-md border border-input bg-input-bg bg-clip-padding px-2.5 py-1 text-sm shadow-xs transition-colors\",\n      \"focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50\",\n      \"has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n      \"has-data-[slot=combobox-chip]:px-1\",\n      className\n    )}\n    data-slot=\"combobox-chips\"\n    ref={ref}\n    {...props}\n  />\n);\nComboboxChips.displayName = \"ComboboxChips\";\n\n// =============================================================================\n// ComboboxChip\n// =============================================================================\nexport interface ComboboxChipProps extends ComboboxPrimitive.Chip.Props {\n  /**\n   * Show the remove button on the chip\n   * @default true\n   */\n  showRemove?: boolean;\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxChipProps) {\n  return (\n    <ComboboxPrimitive.Chip\n      className={cn(\n        \"flex h-5.5 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-sm bg-muted px-1.5 font-medium text-foreground text-xs\",\n        \"has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n        \"has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          className=\"-ml-1 size-5 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n          render={<Button size=\"icon\" variant=\"ghost\" />}\n        >\n          <XIcon className=\"pointer-events-none size-3\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  );\n}\n\n// =============================================================================\n// ComboboxChipsInput\n// =============================================================================\nexport interface ComboboxChipsInputProps\n  extends ComboboxPrimitive.Input.Props {}\n\nfunction ComboboxChipsInput({ className, ...props }: ComboboxChipsInputProps) {\n  return (\n    <ComboboxPrimitive.Input\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      data-slot=\"combobox-chips-input\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// useComboboxAnchor Hook\n// =============================================================================\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null);\n}\n\nexport type { ComboboxRootProps as ComboboxProps } from \"@base-ui/react/combobox\";\n// =============================================================================\n// Exports\n// =============================================================================\nexport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}