{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "An input combined with a list of predefined items to select.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@lumi-ui/input",
    "@lumi-ui/button",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { Check, ChevronDown, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport { inputBaseVariants, inputVariants } from \"@/registry/ui/input\";\n\nfunction Combobox<Value, Multiple extends boolean | undefined = false>({\n  children,\n  ...props\n}: BaseCombobox.Root.Props<Value, Multiple>) {\n  return (\n    <BaseCombobox.Root data-slot=\"combobox\" {...props}>\n      {children}\n    </BaseCombobox.Root>\n  );\n}\n\nfunction ComboboxLabel({\n  children,\n  className,\n  ...props\n}: BaseCombobox.Label.Props & { className?: string }) {\n  return (\n    <BaseCombobox.Label\n      className={cn(\n        \"cursor-default text-sm leading-none font-medium\",\n        className,\n      )}\n      data-slot=\"combobox-label\"\n      {...props}\n    >\n      {children}\n    </BaseCombobox.Label>\n  );\n}\n\nfunction ComboboxValue({ children, ...props }: BaseCombobox.Value.Props) {\n  return (\n    <BaseCombobox.Value data-slot=\"combobox-value\" {...props}>\n      {children}\n    </BaseCombobox.Value>\n  );\n}\n\nfunction ComboboxIcon({ className, ...props }: BaseCombobox.Icon.Props) {\n  return (\n    <BaseCombobox.Icon\n      className={cn(\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"combobox-icon\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxInput({\n  className,\n  inputSize = \"default\",\n  variant = \"default\",\n  ...props\n}: BaseCombobox.Input.Props &\n  VariantProps<typeof inputVariants> &\n  VariantProps<typeof inputBaseVariants>) {\n  return (\n    <BaseCombobox.Input\n      className={cn(\n        inputVariants({ inputSize }),\n        inputBaseVariants({ variant }),\n        className,\n      )}\n      data-slot=\"combobox-input\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxClear({ className, ...props }: BaseCombobox.Clear.Props) {\n  return (\n    <BaseCombobox.Clear\n      aria-label=\"Clear selection\"\n      className={cn(\n        \"outline-none pointer-coarse:after:absolute pointer-coarse:after:min-h-10 pointer-coarse:after:min-w-10\",\n        className,\n      )}\n      data-slot=\"combobox-clear\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxTrigger({ className, ...props }: BaseCombobox.Trigger.Props) {\n  return (\n    <BaseCombobox.Trigger\n      className={cn(\n        \"select-none pointer-coarse:after:absolute pointer-coarse:after:min-h-10 pointer-coarse:after:min-w-10\",\n        className,\n      )}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChips({ className, ...props }: BaseCombobox.Chips.Props) {\n  return (\n    <BaseCombobox.Chips\n      className={cn(\"flex w-full flex-wrap items-center gap-1\", className)}\n      data-slot=\"combobox-chips\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  ...props\n}: BaseCombobox.Chip.Props) {\n  return (\n    <BaseCombobox.Chip\n      className={cn(\n        \"flex items-center gap-1 px-2 py-1 rounded-md shadow-xs text-sm bg-secondary text-secondary-foreground outline-none cursor-default\",\n        \"focus-within:bg-secondary/80 focus-within:text-secondary-foreground/80\",\n        \"[@media(hover:hover)]:data-highlighted:bg-secondary/80 [@media(hover:hover)]:data-highlighted:text-secondary-foreground/80\",\n        className,\n      )}\n      data-slot=\"combobox-chip\"\n      {...props}\n    >\n      {children}\n      <ComboboxChipRemove />\n    </BaseCombobox.Chip>\n  );\n}\n\nfunction ComboboxChipRemove({\n  className,\n  icon = <X />,\n  ...props\n}: BaseCombobox.ChipRemove.Props & {\n  icon?: React.ReactNode;\n}) {\n  return (\n    <BaseCombobox.ChipRemove\n      aria-label=\"Remove\"\n      className={cn(\n        \"p-1 inline-flex items-center justify-center bg-transparent hover:bg-accent text-inherit rounded-md transition-colors\",\n        \"[&_svg:not([class*='size-'])]:size-3.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground\",\n        className,\n      )}\n      data-slot=\"combobox-chip-remove\"\n      {...props}\n    >\n      {icon}\n    </BaseCombobox.ChipRemove>\n  );\n}\n\nfunction ComboboxList({ className, ...props }: BaseCombobox.List.Props) {\n  return (\n    <BaseCombobox.List\n      className={cn(\n        \"outline-none py-1 data-empty:p-0\",\n        \"min-h-0 overflow-y-auto scroll-py-2\",\n        className,\n      )}\n      data-slot=\"combobox-list\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxPortal({ ...props }: BaseCombobox.Portal.Props) {\n  return <BaseCombobox.Portal data-slot=\"combobox-portal\" {...props} />;\n}\n\nfunction ComboboxBackdrop({ ...props }: BaseCombobox.Backdrop.Props) {\n  return <BaseCombobox.Backdrop data-slot=\"combobox-backdrop\" {...props} />;\n}\n\nfunction ComboboxPositioner({\n  className,\n  ...props\n}: BaseCombobox.Positioner.Props) {\n  return (\n    <BaseCombobox.Positioner\n      className={cn(\"outline-none\", className)}\n      data-slot=\"combobox-positioner\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxPopup({ ...props }: BaseCombobox.Popup.Props) {\n  return <BaseCombobox.Popup data-slot=\"combobox-popup\" {...props} />;\n}\n\nfunction ComboboxArrow({ ...props }: BaseCombobox.Arrow.Props) {\n  return <BaseCombobox.Arrow data-slot=\"combobox-arrow\" {...props} />;\n}\n\nfunction ComboboxStatus({ className, ...props }: BaseCombobox.Status.Props) {\n  return (\n    <BaseCombobox.Status\n      className={cn(\n        \"p-3 text-sm text-center text-muted-foreground flex gap-2 items-center empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-status\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxEmpty({ className, ...props }: BaseCombobox.Empty.Props) {\n  return (\n    <BaseCombobox.Empty\n      className={cn(\n        \"p-3 text-sm text-center text-muted-foreground empty:m-0 empty:p-0\",\n        className,\n      )}\n      data-slot=\"combobox-empty\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxCollection({ ...props }: BaseCombobox.Collection.Props) {\n  return <BaseCombobox.Collection data-slot=\"combobox-collection\" {...props} />;\n}\n\nfunction ComboboxRow({ ...props }: BaseCombobox.Row.Props) {\n  return <BaseCombobox.Row data-slot=\"combobox-row\" {...props} />;\n}\n\nfunction ComboboxItem({ className, ...props }: BaseCombobox.Item.Props) {\n  return (\n    <BaseCombobox.Item\n      className={cn(\n        \"flex items-center gap-2 py-1.5 pl-3.5 pr-8 text-sm\",\n        \"select-none cursor-default outline-none\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        className,\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxItemIndicator({ ...props }: BaseCombobox.ItemIndicator.Props) {\n  return (\n    <BaseCombobox.ItemIndicator\n      data-slot=\"combobox-item-indicator\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: BaseCombobox.Group.Props) {\n  return (\n    <BaseCombobox.Group\n      className={className}\n      data-slot=\"combobox-group\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxGroupLabel({\n  className,\n  ...props\n}: BaseCombobox.GroupLabel.Props) {\n  return (\n    <BaseCombobox.GroupLabel\n      className={cn(\n        \"px-3.5 py-1.5 text-xs text-muted-foreground font-medium select-none\",\n        className,\n      )}\n      data-slot=\"combobox-group-label\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: BaseCombobox.Separator.Props) {\n  return (\n    <BaseCombobox.Separator\n      className={cn(\"bg-border pointer-events-none my-1 h-px\", className)}\n      data-slot=\"combobox-separator\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxInputGroup({\n  className,\n  variant = \"default\",\n  inputSize = \"default\",\n  ...props\n}: BaseCombobox.InputGroup.Props & {\n  variant?: VariantProps<typeof inputBaseVariants>[\"variant\"];\n  inputSize?: VariantProps<typeof inputBaseVariants>[\"inputSize\"];\n}) {\n  return (\n    <BaseCombobox.InputGroup\n      className={cn(\n        inputBaseVariants({ variant, inputSize }),\n        \"relative w-full inline-flex gap-1 items-center cursor-text\",\n        \"focus-within:outline focus-within:outline-ring focus-within:ring-4 focus-within:ring-ring/10\",\n        className,\n      )}\n      data-slot=\"combobox-input-control\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxInputGroupContent({\n  className,\n  showTrigger = false,\n  showClear = false,\n  variant = \"default\",\n  inputSize = \"default\",\n  addonIcon,\n  inputClassName,\n  \"aria-invalid\": ariaInvalid,\n  embedded = false,\n  ...props\n}: BaseCombobox.Input.Props & {\n  showTrigger?: boolean;\n  showClear?: boolean;\n  variant?: VariantProps<typeof inputBaseVariants>[\"variant\"];\n  inputSize?: VariantProps<typeof inputBaseVariants>[\"inputSize\"];\n  addonIcon?: React.ReactNode;\n  inputClassName?: string;\n  embedded?: boolean;\n}) {\n  return (\n    <BaseCombobox.InputGroup\n      aria-invalid={ariaInvalid}\n      className={cn(\n        \"relative w-full inline-flex gap-1 items-center cursor-text\",\n        !embedded && inputBaseVariants({ variant, inputSize }),\n        !embedded &&\n          \"focus-within:outline focus-within:outline-ring focus-within:ring-4 focus-within:ring-ring/10\",\n        \"has-[[data-slot=combobox-clear]]:[&_[data-slot=combobox-input]]:pr-8\",\n        \"has-[[data-slot=combobox-trigger]]:[&_[data-slot=combobox-input]]:pr-8\",\n        \"has-[[data-slot=combobox-clear]]:has-[[data-slot=combobox-trigger]]:[&_[data-slot=combobox-input]]:pr-14\",\n        className,\n      )}\n      data-slot=\"combobox-input-group\"\n    >\n      {addonIcon && (\n        <BaseCombobox.Icon\n          className=\"[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-muted-foreground absolute left-1 size-6 flex justify-center items-center\"\n          data-slot=\"combobox-icon\"\n        >\n          {addonIcon}\n        </BaseCombobox.Icon>\n      )}\n      <BaseCombobox.Input\n        className={cn(\n          inputVariants({ inputSize }),\n          addonIcon && \"pl-7.5\",\n          inputClassName,\n        )}\n        data-slot=\"combobox-input\"\n        {...props}\n      />\n      <div className=\"absolute right-1.5 top-0 h-full inline-flex items-center\">\n        {showClear && (\n          <BaseCombobox.Clear\n            aria-label=\"Clear selection\"\n            data-slot=\"combobox-clear\"\n            render={\n              <Button\n                className=\"[&_svg]:text-muted-foreground hover:[&_svg]:text-foreground\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <X />\n          </BaseCombobox.Clear>\n        )}\n        {showTrigger && (\n          <BaseCombobox.Trigger\n            data-slot=\"combobox-trigger\"\n            render={\n              <Button\n                className=\"[&_svg]:text-muted-foreground data-popup-open:[&_svg]:text-foreground hover:[&_svg]:text-foreground\"\n                size=\"icon-xs\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <BaseCombobox.Icon data-slot=\"combobox-icon\">\n              <ChevronDown className=\"size-4\" />\n            </BaseCombobox.Icon>\n          </BaseCombobox.Trigger>\n        )}\n      </div>\n    </BaseCombobox.InputGroup>\n  );\n}\n\nfunction ComboboxContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  matchAnchorWidth = true,\n  alignOffset = 0,\n  positionerAnchor,\n  ...props\n}: BaseCombobox.Popup.Props &\n  Pick<\n    BaseCombobox.Positioner.Props,\n    \"side\" | \"sideOffset\" | \"align\" | \"alignOffset\"\n  > & {\n    matchAnchorWidth?: boolean;\n    positionerAnchor?: React.RefObject<HTMLDivElement | null>;\n  }) {\n  return (\n    <BaseCombobox.Portal data-slot=\"combobox-portal\">\n      <BaseCombobox.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={positionerAnchor}\n        data-slot=\"combobox-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <BaseCombobox.Popup\n          className={cn(\n            \"bg-popover text-popover-foreground rounded-md shadow-md\",\n            \"flex flex-col overflow-hidden\",\n            \"max-w-(--available-width) max-h-[min(23rem,var(--available-height))]\",\n            \"animate-popup overlay-outline\",\n            matchAnchorWidth && \"w-(--anchor-width)\",\n            className,\n          )}\n          data-slot=\"combobox-content\"\n          {...props}\n        >\n          {children}\n        </BaseCombobox.Popup>\n      </BaseCombobox.Positioner>\n    </BaseCombobox.Portal>\n  );\n}\n\ninterface ComboboxItemContentProps extends BaseCombobox.Item.Props {\n  indicatorPlacement?: \"start\" | \"end\" | \"none\";\n  indicatorIcon?: React.ReactNode;\n}\n\nfunction ComboboxItemContent({\n  className,\n  children,\n  indicatorPlacement = \"start\",\n  indicatorIcon = <Check />,\n  ...props\n}: ComboboxItemContentProps) {\n  return (\n    <BaseCombobox.Item\n      className={cn(\n        \"grid items-center gap-2 py-1.5 pl-3.5 text-sm text-foreground\",\n        \"outline-none select-none cursor-default\",\n        \"highlight-on-active\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n        indicatorPlacement === \"start\" && \"grid-cols-[1rem_1fr] pr-8\",\n        indicatorPlacement === \"end\" && \"grid-cols-[1fr_1rem] pr-3\",\n        indicatorPlacement === \"none\" && \"grid-cols-1\",\n        className,\n      )}\n      data-slot=\"combobox-item-content\"\n      {...props}\n    >\n      {indicatorPlacement !== \"none\" && (\n        <BaseCombobox.ItemIndicator\n          className={cn(\n            \"flex items-center justify-center row-start-1\",\n            \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n            indicatorPlacement === \"start\" ? \"col-start-1\" : \"col-start-2\",\n          )}\n          data-slot=\"combobox-item-indicator\"\n        >\n          {indicatorIcon}\n        </BaseCombobox.ItemIndicator>\n      )}\n      <div\n        className={cn(\n          \"flex items-center gap-2 row-start-1\",\n          indicatorPlacement === \"start\" ? \"col-start-2\" : \"col-start-1\",\n        )}\n      >\n        {children}\n      </div>\n    </BaseCombobox.Item>\n  );\n}\n\nconst useComboboxFilter = BaseCombobox.useFilter;\n\nexport {\n  Combobox,\n  ComboboxLabel,\n  ComboboxValue,\n  ComboboxIcon,\n  ComboboxInput,\n  ComboboxInputGroup,\n  ComboboxClear,\n  ComboboxTrigger,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxList,\n  ComboboxPortal,\n  ComboboxBackdrop,\n  ComboboxPositioner,\n  ComboboxPopup,\n  ComboboxArrow,\n  ComboboxEmpty,\n  ComboboxGroupLabel,\n  ComboboxItem,\n  ComboboxSeparator,\n  ComboboxGroup,\n  ComboboxItemIndicator,\n  ComboboxRow,\n  ComboboxStatus,\n  ComboboxCollection,\n  useComboboxFilter,\n  // Composite components\n  ComboboxInputGroupContent,\n  ComboboxContent,\n  ComboboxItemContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}