{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "combobox",
	"dependencies": [],
	"registryDependencies": [],
	"files": [
		{
			"path": "ui/combobox.tsx",
			"content": "import { Combobox as BaseCombobox } from \"@base-ui/react/combobox\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Combobox({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Root>) {\n\treturn <BaseCombobox.Root data-slot=\"combobox\" {...props} />\n}\n\nfunction ComboboxValue({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Value>) {\n\treturn <BaseCombobox.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxIcon({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Icon>) {\n\treturn <BaseCombobox.Icon data-slot=\"combobox-icon\" {...props} />\n}\n\nfunction ComboboxClear({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Clear>) {\n\treturn <BaseCombobox.Clear data-slot=\"combobox-clear\" {...props} />\n}\n\nfunction ComboboxList({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.List>) {\n\treturn <BaseCombobox.List data-slot=\"combobox-list\" {...props} />\n}\n\nfunction ComboboxGroup({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Group>) {\n\treturn <BaseCombobox.Group data-slot=\"combobox-group\" {...props} />\n}\n\nfunction ComboboxPortal({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Portal>) {\n\treturn <BaseCombobox.Portal data-slot=\"combobox-portal\" {...props} />\n}\n\nfunction ComboboxPositioner({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Positioner>) {\n\treturn <BaseCombobox.Positioner data-slot=\"combobox-positioner\" {...props} />\n}\n\nfunction ComboboxTrigger({\n\tclassName,\n\tsize = \"default\",\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Trigger> & {\n\tsize?: \"sm\" | \"default\"\n}) {\n\treturn (\n\t\t<BaseCombobox.Trigger\n\t\t\tdata-slot=\"combobox-trigger\"\n\t\t\tdata-size={size}\n\t\t\tclassName={cn(\n\t\t\t\t\"group [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive bg-input hover:border-ring/70 flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow,border-color] outline-none select-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=combobox-value]:line-clamp-1 *:data-[slot=combobox-value]:flex *:data-[slot=combobox-value]:items-center *:data-[slot=combobox-value]:gap-2 data-popup-open:[&_*[data-slot=combobox-icon]]:rotate-180 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<BaseCombobox.Icon>\n\t\t\t\t<ChevronDownIcon\n\t\t\t\t\tdata-slot=\"combobox-icon\"\n\t\t\t\t\tclassName=\"size-4 opacity-50 transition-transform duration-200\"\n\t\t\t\t/>\n\t\t\t</BaseCombobox.Icon>\n\t\t</BaseCombobox.Trigger>\n\t)\n}\n\nfunction ComboboxInput({\n\tclassName,\n\tinputContainerClassName,\n\tshowClear = true,\n\tmultiple,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Input> & {\n\tinputContainerClassName?: string\n\tshowClear?: boolean\n\tmultiple?: boolean\n}) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"group relative w-full has-[[data-slot=combobox-input][data-disabled]]:pointer-events-none has-[[data-slot=combobox-input][data-disabled]]:opacity-50\",\n\t\t\t\tinputContainerClassName\n\t\t\t)}\n\t\t\tdata-slot=\"combobox-input-container\"\n\t\t>\n\t\t\t<BaseCombobox.Input\n\t\t\t\tdata-slot=\"combobox-input\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"placeholder:text-muted-foreground selection:bg-primary group-hover:border-ring/70 selection:text-primary-foreground bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/50 aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] md:text-sm\",\n\t\t\t\t\tshowClear && \"pr-8\",\n\t\t\t\t\tmultiple && \"border-none bg-transparent focus-visible:ring-0\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t\t{showClear && (\n\t\t\t\t<ComboboxClear\n\t\t\t\t\tdata-slot=\"combobox-clear\"\n\t\t\t\t\tclassName=\"text-muted-foreground absolute top-1/2 right-3 shrink-0 -translate-y-1/2 [&_svg]:shrink-0\"\n\t\t\t\t>\n\t\t\t\t\t<XIcon className=\"size-4\" />\n\t\t\t\t</ComboboxClear>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction ComboboxContent({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\tanchor = null,\n\talign = \"start\",\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Popup> & {\n\tsideOffset?: BaseCombobox.Positioner.Props[\"sideOffset\"]\n\tanchor?: BaseCombobox.Positioner.Props[\"anchor\"]\n\talign?: BaseCombobox.Positioner.Props[\"align\"]\n}) {\n\treturn (\n\t\t<ComboboxPortal>\n\t\t\t<ComboboxPositioner\n\t\t\t\tclassName=\"outline-none\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tanchor={anchor}\n\t\t\t\talign={align}\n\t\t\t>\n\t\t\t\t<BaseCombobox.Popup\n\t\t\t\t\tdata-slot=\"combobox-content\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"bg-popover text-popover-foreground relative z-50 max-h-[min(var(--available-height),20rem)] min-w-[var(--anchor-width)] origin-[var(--transform-origin)] overflow-x-hidden overflow-y-auto overscroll-contain rounded-md border p-1 shadow-md transition-all data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0 [&_*[data-slot=combobox-input]]:rounded-sm\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</BaseCombobox.Popup>\n\t\t\t</ComboboxPositioner>\n\t\t</ComboboxPortal>\n\t)\n}\n\nfunction ComboboxItem({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Item>) {\n\treturn (\n\t\t<BaseCombobox.Item\n\t\t\tdata-slot=\"combobox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n\t\t\t\t<BaseCombobox.ItemIndicator>\n\t\t\t\t\t<CheckIcon className=\"size-4\" />\n\t\t\t\t</BaseCombobox.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</BaseCombobox.Item>\n\t)\n}\n\nfunction ComboboxEmpty({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Empty>) {\n\treturn (\n\t\t<BaseCombobox.Empty\n\t\t\tdata-slot=\"combobox-empty\"\n\t\t\tclassName={cn(\"py-6 text-center text-sm empty:m-0 empty:p-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxStatus({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Status>) {\n\treturn (\n\t\t<BaseCombobox.Status\n\t\t\tdata-slot=\"combobox-status\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground flex items-center gap-2 px-2 py-1.5 text-sm\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxChips({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Chips>) {\n\treturn (\n\t\t<BaseCombobox.Chips\n\t\t\tdata-slot=\"combobox-chips\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-input focus-within:border-ring focus-within:ring-ring/50 flex h-auto flex-wrap items-center rounded-md border focus-within:ring-[3px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ComboboxChip({\n\tclassName,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.Chip>) {\n\treturn (\n\t\t<BaseCombobox.Chip\n\t\t\tdata-slot=\"combobox-chip\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-card text-card-foreground flex h-8 cursor-default items-center gap-1 rounded-md border px-1.5 py-0.5 text-sm outline-none\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ComboboxChipRemove\n\t\t\t\tclassName=\"text-muted-foreground p-1 opacity-50 transition-opacity hover:opacity-100\"\n\t\t\t\taria-label=\"Remove\"\n\t\t\t>\n\t\t\t\t<XIcon className=\"size-4\" />\n\t\t\t</ComboboxChipRemove>\n\t\t</BaseCombobox.Chip>\n\t)\n}\n\nfunction ComboboxChipRemove({\n\t...props\n}: React.ComponentProps<typeof BaseCombobox.ChipRemove>) {\n\treturn <BaseCombobox.ChipRemove data-slot=\"combobox-chip-remove\" {...props} />\n}\n\nexport {\n\tCombobox,\n\tComboboxClear,\n\tComboboxEmpty,\n\tComboboxItem,\n\tComboboxIcon,\n\tComboboxInput,\n\tComboboxContent,\n\tComboboxList,\n\tComboboxGroup,\n\tComboboxPortal,\n\tComboboxPositioner,\n\tComboboxStatus,\n\tComboboxTrigger,\n\tComboboxValue,\n\tComboboxChips,\n\tComboboxChip,\n\tComboboxChipRemove,\n}\n",
			"type": "registry:ui",
			"target": ""
		}
	],
	"type": "registry:ui"
}