{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-tailwind",
  "type": "registry:item",
  "title": "Combobox (Tailwind)",
  "description": "A searchable select component.",
  "registryDependencies": [
    "https://roiui.com/r/input-tailwind.json"
  ],
  "files": [
    {
      "path": "registry/brook/tailwind/ui/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox } from \"@base-ui/react/combobox\";\nimport { Check, ChevronsUpDown, X } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Input } from \"@/registry/brook/tailwind/ui/input\";\n\nfunction ComboboxRoot<ItemValue, Multiple extends boolean | undefined = undefined>(\n  props: React.ComponentProps<typeof Combobox.Root<ItemValue, Multiple>>\n) {\n  return <Combobox.Root<ItemValue, Multiple> {...props} />;\n}\n\nfunction ComboboxTrigger({ className, children, ...props }: Combobox.Trigger.Props) {\n  return (\n    <Combobox.Trigger\n      className={cn(\n        \"-translate-y-1/2 absolute top-1/2 right-2\",\n        \"flex cursor-pointer items-center justify-center border-none bg-transparent p-1\",\n        \"focus-visible:outline-none\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"combobox-trigger\"\n      {...props}\n    >\n      {children}\n      <ChevronsUpDown className=\"h-4 w-4 flex-shrink-0 text-muted-foreground transition-none\" size={16} />\n    </Combobox.Trigger>\n  );\n}\n\nfunction ComboboxInput({ className, ...props }: Combobox.Input.Props) {\n  return (\n    <Combobox.Input\n      className={cn(\"max-sm:text-[0.9375rem] max-sm:placeholder:text-[0.9375rem]\", className)}\n      data-slot=\"combobox-input\"\n      render={<Input />}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxClear({ className, children, ...props }: Combobox.Clear.Props) {\n  return (\n    <Combobox.Clear\n      className={cn(\n        \"-translate-y-1/2 absolute top-1/2 right-2\",\n        \"flex cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2px)] p-1\",\n        \"text-muted-foreground transition-all duration-150\",\n        \"hover:bg-accent hover:text-foreground\",\n        className\n      )}\n      data-slot=\"combobox-clear\"\n      {...props}\n    >\n      {children || <X size={16} />}\n    </Combobox.Clear>\n  );\n}\n\nconst ComboboxPortal = Combobox.Portal;\n\nfunction ComboboxPositioner({ className, ...props }: Combobox.Positioner.Props) {\n  return (\n    <Combobox.Positioner\n      className={cn(\"absolute top-full left-0 z-[150] w-[var(--anchor-width)]\", className)}\n      data-slot=\"combobox-positioner\"\n      sideOffset={4}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxPopup({ className, children, ...props }: Combobox.Popup.Props) {\n  return (\n    <Combobox.Popup\n      className={cn(\n        \"box-border flex flex-col rounded-[var(--radius)]\",\n        \"bg-[var(--popover)] text-popover-foreground\",\n        \"max-h-[min(var(--available-height),20rem)] w-[var(--anchor-width)] max-w-[var(--available-width)]\",\n        \"overflow-y-auto overscroll-contain [scroll-padding-block:0.5rem]\",\n        \"shadow-[0_0_0_0.5px_oklch(from_var(--border)_l_c_h_/_0.8),var(--shadow-border-stack)]\",\n        \"origin-[var(--transform-origin)] transition-[transform,opacity] duration-250 ease-[var(--ease-out-expo)]\",\n        \"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n        \"data-[ending-style]:transition-none\",\n        \"max-sm:max-w-[calc(100vw-2rem)]\",\n        className\n      )}\n      data-slot=\"combobox-popup\"\n      {...props}\n    >\n      <ComboboxSpacer />\n      {children}\n      <ComboboxSpacer />\n    </Combobox.Popup>\n  );\n}\n\nfunction ComboboxSpacer() {\n  return <div style={{ height: \"4px\", width: \"100%\", flexShrink: 0 }} />;\n}\n\nfunction ComboboxList({ className, ...props }: Combobox.List.Props) {\n  return (\n    <Combobox.List\n      className={cn(\"flex flex-col gap-px outline-none\", className)}\n      data-slot=\"combobox-list\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxEmpty({ className, children, ...props }: Combobox.Empty.Props) {\n  return (\n    <Combobox.Empty\n      className={cn(\n        \"empty:m-0 empty:p-0\",\n        \"px-4 py-8 text-center text-muted-foreground text-sm\",\n        \"max-sm:px-4 max-sm:py-6 max-sm:text-[0.9375rem]\",\n        className\n      )}\n      {...props}\n    >\n      {children || \"No items found\"}\n    </Combobox.Empty>\n  );\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  indicatorPosition = \"left\",\n  ...props\n}: Combobox.Item.Props & {\n  indicatorPosition?: \"left\" | \"right\";\n}) {\n  return (\n    <Combobox.Item\n      className={cn(\n        \"relative isolate mx-1 flex min-h-8 cursor-pointer items-center justify-start gap-3\",\n        \"px-2 pr-1.5 font-normal text-foreground text-sm leading-[1.2]\",\n        \"before:-z-10 before:absolute before:inset-0 before:rounded-[calc(var(--radius)-4px)] before:bg-transparent before:content-['']\",\n        \"hover:before:bg-[var(--accent)] focus:outline-none focus:before:bg-[var(--accent)] focus-visible:outline-none\",\n        \"data-[highlighted]:before:bg-[var(--accent)]\",\n        \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:hover:before:bg-transparent\",\n        \"max-sm:min-h-[2.75rem] max-sm:gap-3 max-sm:px-3 max-sm:py-2.5 max-sm:text-[0.9375rem]\",\n        className\n      )}\n      data-slot=\"combobox-item\"\n      {...props}\n    >\n      {indicatorPosition === \"left\" && (\n        <Combobox.ItemIndicator\n          className={cn(\n            \"flex h-4 w-4 items-center justify-center opacity-0 transition-opacity duration-150\",\n            \"[[data-selected]_&]:m-1 [[data-selected]_&]:opacity-100\"\n          )}\n          data-slot=\"combobox-itemindicator\"\n        >\n          <Check size={16} />\n        </Combobox.ItemIndicator>\n      )}\n      {children}\n      {indicatorPosition === \"right\" && (\n        <Combobox.ItemIndicator\n          className={cn(\n            \"flex h-4 w-4 items-center justify-center opacity-0 transition-opacity duration-150\",\n            \"[[data-selected]_&]:m-1 [[data-selected]_&]:opacity-100\"\n          )}\n          data-slot=\"combobox-itemindicator\"\n        >\n          <Check size={16} />\n        </Combobox.ItemIndicator>\n      )}\n    </Combobox.Item>\n  );\n}\n\nfunction ComboboxItemIndicator({ className, children, ...props }: Combobox.ItemIndicator.Props) {\n  return (\n    <Combobox.ItemIndicator\n      className={cn(\n        \"flex h-4 w-4 items-center justify-center opacity-0 transition-opacity duration-150\",\n        \"[[data-selected]_&]:m-1 [[data-selected]_&]:opacity-100\",\n        className\n      )}\n      data-slot=\"combobox-itemindicator\"\n      {...props}\n    >\n      {children || <Check size={16} />}\n    </Combobox.ItemIndicator>\n  );\n}\n\nfunction ComboboxGroup({ className, ...props }: Combobox.Group.Props) {\n  return <Combobox.Group className={cn(\"py-1\", className)} {...props} />;\n}\n\nfunction ComboboxGroupLabel({ className, ...props }: Combobox.GroupLabel.Props) {\n  return (\n    <Combobox.GroupLabel\n      className={cn(\"px-3 py-2 font-medium text-muted-foreground text-xs\", className)}\n      data-slot=\"combobox-grouplabel\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxArrow({ className, ...props }: Combobox.Arrow.Props) {\n  return (\n    <Combobox.Arrow\n      className={cn(\"-top-1 absolute left-4 h-2 w-2 rotate-45 border-border border-t border-l bg-card\", className)}\n      data-slot=\"combobox-arrow\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxNoItems({ className, children, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"px-4 py-8 text-center text-muted-foreground text-sm\",\n        \"max-sm:px-4 max-sm:py-6 max-sm:text-[0.9375rem]\",\n        className\n      )}\n      {...props}\n    >\n      {children || \"No items found\"}\n    </div>\n  );\n}\n\nfunction ComboboxChips({ className, ref, ...props }: Combobox.Chips.Props & { ref?: React.Ref<HTMLDivElement> }) {\n  return (\n    <Combobox.Chips\n      className={cn(\n        \"box-border flex w-full flex-wrap items-center gap-1\",\n        \"rounded-[var(--radius)] border-none bg-[var(--mix-card-50-bg)] p-1 px-1.5\",\n        \"shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5)]\",\n        \"focus-within:shadow-[0_0_0_1px_var(--ring),0_0_0_3px_oklch(from_var(--ring)_l_c_h_/_0.2)]\",\n        className\n      )}\n      data-slot=\"combobox-chips\"\n      ref={ref}\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChip({ className, ...props }: Combobox.Chip.Props) {\n  return (\n    <Combobox.Chip\n      className={cn(\n        \"flex cursor-default items-center gap-1 overflow-hidden rounded-[calc(var(--radius)-2px)]\",\n        \"bg-secondary text-foreground text-sm\",\n        \"py-0.5 pr-0.5 pl-2 outline-0\",\n        \"focus-within:bg-primary focus-within:text-primary-foreground\",\n        \"data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground\",\n        \"max-sm:text-[0.9375rem]\",\n        className\n      )}\n      data-slot=\"combobox-chip\"\n      {...props}\n    />\n  );\n}\n\nfunction ComboboxChipRemove({ className, children, ...props }: Combobox.ChipRemove.Props) {\n  return (\n    <Combobox.ChipRemove\n      className={cn(\n        \"flex cursor-pointer items-center justify-center rounded-[calc(var(--radius)-4px)] border-none bg-none p-1\",\n        \"text-inherit hover:bg-[oklch(from_var(--foreground)_l_c_h_/_0.1)]\",\n        className\n      )}\n      data-slot=\"combobox-chipremove\"\n      {...props}\n    >\n      {children || <X size={14} />}\n    </Combobox.ChipRemove>\n  );\n}\n\nfunction ComboboxChipsInput({ className, ...props }: Combobox.Input.Props) {\n  return (\n    <Combobox.Input\n      className={cn(\n        \"box-border h-8 min-w-12 flex-1 rounded-[var(--radius)] border-none bg-transparent\",\n        \"m-0 pl-2 font-[inherit] text-foreground text-sm\",\n        \"placeholder:text-muted-foreground focus:outline-none\",\n        \"max-sm:text-[0.9375rem]\",\n        className\n      )}\n      data-slot=\"combobox-chipsinput\"\n      {...props}\n    />\n  );\n}\n\nconst ComboboxValue = Combobox.Value;\n\nexport {\n  ComboboxRoot as Combobox,\n  ComboboxArrow,\n  ComboboxChip,\n  ComboboxChipRemove,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxClear,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxGroupLabel,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n  ComboboxList,\n  ComboboxNoItems,\n  ComboboxPopup,\n  ComboboxPortal,\n  ComboboxPositioner,\n  ComboboxSpacer,\n  ComboboxTrigger,\n  ComboboxValue,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/combobox/combobox.tsx"
    }
  ]
}