{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "description": "Autocomplete input with a list of suggestions.",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "@ondo-ui/button",
    "@ondo-ui/input-group",
    "@ondo-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/combobox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { IconChevronDown, IconX, IconCheck } from \"@tabler/icons-react\"\n\ntype ComboboxSize = \"xs\" | \"sm\" | \"default\" | \"lg\" | \"xl\" | \"2xl\"\n\nconst ComboboxSizeContext = React.createContext<ComboboxSize>(\"default\")\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>({\n  size = \"default\",\n  ...props\n}: ComboboxPrimitive.Root.Props<Value, Multiple> & { size?: ComboboxSize }) {\n  return (\n    <ComboboxSizeContext.Provider value={size}>\n      <ComboboxPrimitive.Root {...props} />\n    </ComboboxSizeContext.Provider>\n  )\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconChevronDown className=\"pointer-events-none size-4 text-muted-foreground\" />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={\n        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n      }\n      className={cn(className)}\n      {...props}\n    >\n      <IconX className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  const size = React.useContext(ComboboxSizeContext)\n\n  return (\n    <InputGroup size={size} 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            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  const size = React.useContext(ComboboxSizeContext)\n\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          data-size={size}\n          className={cn(\"group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground data-[size=xs]:rounded-[min(var(--radius-md),8px)] data-[size=xl]:rounded-lg data-[size=2xl]:rounded-xl shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 data-[size=xs]:*:data-[slot=input-group]:m-0.5 data-[size=xs]:*:data-[slot=input-group]:mb-0 data-[size=xs]:*:data-[slot=input-group]:h-6 data-[size=sm]:*:data-[slot=input-group]:h-7 data-[size=lg]:*:data-[slot=input-group]:h-9 data-[size=xl]:*:data-[slot=input-group]:m-1.5 data-[size=xl]:*:data-[slot=input-group]:mb-0 data-[size=xl]:*:data-[slot=input-group]:h-10 data-[size=2xl]:*:data-[slot=input-group]:m-2 data-[size=2xl]:*:data-[slot=input-group]:mb-0 data-[size=2xl]:*:data-[slot=input-group]:h-11 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", className )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-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 group-data-[size=xs]/combobox-content:p-0.5 group-data-[size=xl]/combobox-content:p-1.5 group-data-[size=2xl]/combobox-content:p-2 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 group-data-[size=xs]/combobox-content:gap-1.5 group-data-[size=xs]/combobox-content:py-1 group-data-[size=xs]/combobox-content:pr-7 group-data-[size=xs]/combobox-content:pl-1.5 group-data-[size=xs]/combobox-content:text-xs group-data-[size=xl]/combobox-content:gap-2.5 group-data-[size=xl]/combobox-content:rounded-md group-data-[size=xl]/combobox-content:py-2 group-data-[size=xl]/combobox-content:pr-9 group-data-[size=xl]/combobox-content:pl-2.5 group-data-[size=xl]/combobox-content:text-base group-data-[size=2xl]/combobox-content:gap-3 group-data-[size=2xl]/combobox-content:rounded-lg group-data-[size=2xl]/combobox-content:py-2.5 group-data-[size=2xl]/combobox-content:pr-10 group-data-[size=2xl]/combobox-content:pl-3 group-data-[size=2xl]/combobox-content:text-lg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 group-data-[size=xs]/combobox-content:[&_svg:not([class*='size-'])]:size-3.5 group-data-[size=xl]/combobox-content:[&_svg:not([class*='size-'])]:size-5 group-data-[size=2xl]/combobox-content:[&_svg:not([class*='size-'])]:size-6\",\n        className\n      )}\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 group-data-[size=xs]/combobox-content:right-1.5 group-data-[size=xs]/combobox-content:size-3.5 group-data-[size=xl]/combobox-content:right-2.5 group-data-[size=xl]/combobox-content:size-5 group-data-[size=2xl]/combobox-content:right-3 group-data-[size=2xl]/combobox-content:size-6\" />\n        }\n      >\n        <IconCheck className=\"pointer-events-none\" />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-2 py-1.5 text-xs text-muted-foreground group-data-[size=xs]/combobox-content:px-1.5 group-data-[size=xs]/combobox-content:py-1 group-data-[size=xl]/combobox-content:px-2.5 group-data-[size=xl]/combobox-content:text-sm group-data-[size=2xl]/combobox-content:px-3 group-data-[size=2xl]/combobox-content:text-base\",\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\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-[size=xs]/combobox-content:py-1.5 group-data-[size=xs]/combobox-content:text-xs group-data-[size=xl]/combobox-content:py-2.5 group-data-[size=xl]/combobox-content:text-base group-data-[size=2xl]/combobox-content:py-3 group-data-[size=2xl]/combobox-content:text-lg group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\n        \"-mx-1 my-1 h-px bg-border group-data-[size=xs]/combobox-content:-mx-0.5 group-data-[size=xl]/combobox-content:-mx-1.5 group-data-[size=2xl]/combobox-content:-mx-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  const size = React.useContext(ComboboxSizeContext)\n\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      data-size={size}\n      className={cn(\n        \"group/combobox-chips flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] data-[size=xl]:gap-2 data-[size=xl]:px-3 data-[size=xl]:py-2 data-[size=2xl]:gap-2 data-[size=2xl]:px-3.5 data-[size=2xl]:py-2.5 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 data-[size=xs]:min-h-6 data-[size=xs]:gap-1 data-[size=xs]:px-1.5 data-[size=xs]:py-1 data-[size=xs]:text-xs data-[size=xs]:has-data-[slot=combobox-chip]:px-1 data-[size=xl]:has-data-[slot=combobox-chip]:px-2 data-[size=2xl]:has-data-[slot=combobox-chip]:px-2.5 data-[size=lg]:min-h-10 data-[size=sm]:min-h-8 data-[size=xl]:min-h-11 data-[size=xl]:rounded-lg data-[size=xl]:text-base data-[size=2xl]:min-h-13 data-[size=2xl]:rounded-xl data-[size=2xl]:text-lg dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 group-data-[size=xs]/combobox-chips:h-4 group-data-[size=xs]/combobox-chips:px-1 group-data-[size=xs]/combobox-chips:text-[0.625rem] group-data-[size=xl]/combobox-chips:h-7 group-data-[size=xl]/combobox-chips:rounded-md group-data-[size=xl]/combobox-chips:px-2 group-data-[size=xl]/combobox-chips:text-sm group-data-[size=2xl]/combobox-chips:h-8 group-data-[size=2xl]/combobox-chips:rounded-lg group-data-[size=2xl]/combobox-chips:px-2.5 group-data-[size=2xl]/combobox-chips:text-base has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 group-data-[size=xs]/combobox-chips:size-4 group-data-[size=xl]/combobox-chips:size-7 group-data-[size=2xl]/combobox-chips:size-8 hover:opacity-100 group-data-[size=xs]/combobox-chips:[&_svg]:size-2.5 group-data-[size=xl]/combobox-chips:[&_svg]:size-3.5 group-data-[size=2xl]/combobox-chips:[&_svg]:size-4\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconX className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}