{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "baseui-combobox",
	"description": "A Base UI combobox component",
	"dependencies": ["@base-ui/react", "lucide-react"],
	"registryDependencies": ["@craftdotui/utils", "@craftdotui/baseui-input"],
	"files": [
		{
			"path": "packages/baseui/components/combobox/index.tsx",
			"content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check, ChevronsUpDown, X } from \"lucide-react\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Input, inputVariants } from \"@/components/baseui/components/input\";\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Context                                                           */\n/* -------------------------------------------------------------------------- */\n\ninterface ComboboxContextInterface {\n\tisSearchPending?: boolean;\n}\n\nconst ComboboxContext = React.createContext<ComboboxContextInterface>({\n\tisSearchPending: false,\n});\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Root                                                              */\n/* -------------------------------------------------------------------------- */\n\ntype ComboboxRootInterface<\n\tValue = unknown,\n\tMultiple extends boolean | undefined = false,\n> = ComboboxPrimitive.Root.Props<Value, Multiple> & {\n\tisSearchPending?: boolean;\n};\n\nfunction ComboboxRoot<Value, Multiple extends boolean | undefined = false>({\n\tisSearchPending,\n\t...props\n}: ComboboxRootInterface<Value, Multiple>) {\n\treturn (\n\t\t<ComboboxContext.Provider value={{ isSearchPending }}>\n\t\t\t<ComboboxPrimitive.Root data-slot=\"combobox-root\" {...props} />\n\t\t</ComboboxContext.Provider>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Input                                                             */\n/* -------------------------------------------------------------------------- */\n\ntype ComboboxInputInterface = Omit<ComboboxPrimitive.Input.Props, \"size\"> & {\n\tsize?: VariantProps<typeof inputVariants>[\"size\"];\n\tshowClear?: boolean;\n\tshowTrigger?: boolean;\n\tstartAddon?: React.ReactNode;\n};\n\nfunction ComboboxInput({\n\tclassName,\n\tsize = \"md\",\n\tshowClear = false,\n\tshowTrigger = false,\n\tstartAddon,\n\t...props\n}: ComboboxInputInterface) {\n\treturn (\n\t\t<div className=\"relative w-full not-has-[>*.w-full]:w-fit\">\n\t\t\t{startAddon && (\n\t\t\t\t<div className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\">\n\t\t\t\t\t{startAddon}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t<ComboboxPrimitive.Input\n\t\t\t\tdata-slot=\"combobox-input\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\tstartAddon && \"pl-10\",\n\t\t\t\t\tshowClear && showTrigger\n\t\t\t\t\t\t? \"pr-16\"\n\t\t\t\t\t\t: showClear || showTrigger\n\t\t\t\t\t\t\t? \"pr-10\"\n\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\trender={<Input size={size} />}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t\t<div className=\"absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5\">\n\t\t\t\t{showClear && (\n\t\t\t\t\t<ComboboxClear>\n\t\t\t\t\t\t<X className=\"size-4\" />\n\t\t\t\t\t</ComboboxClear>\n\t\t\t\t)}\n\t\t\t\t{showTrigger && (\n\t\t\t\t\t<ComboboxTrigger>\n\t\t\t\t\t\t<ComboboxIcon />\n\t\t\t\t\t</ComboboxTrigger>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Trigger                                                           */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxTrigger({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof ComboboxPrimitive.Trigger>) {\n\treturn (\n\t\t<ComboboxPrimitive.Trigger data-slot=\"combobox-trigger\" {...props} />\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Icon                                                              */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxIcon({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<SVGSVGElement>) {\n\treturn (\n\t\t<ChevronsUpDown\n\t\t\tdata-slot=\"combobox-icon\"\n\t\t\tclassName={cn(\"size-4 opacity-70\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Clear                                                             */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Clear\n\t\t\tdata-slot=\"combobox-clear\"\n\t\t\tclassName={cn(\n\t\t\t\t\"p-1 opacity-70 hover:opacity-100 cursor-pointer\",\n\t\t\t\t\"data-disabled:pointer-events-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\taria-label=\"Clear selection\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Value (for single-select display inside input)                    */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n\treturn <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />;\n}\n\n/* --------------------------------------s------------------------------------ */\n/* Combobox Portal                                                            */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxPortal(props: ComboboxPrimitive.Portal.Props) {\n\treturn <ComboboxPrimitive.Portal data-slot=\"combobox-portal\" {...props} />;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Backdrop                                                          */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxBackdrop({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.Backdrop.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Backdrop\n\t\t\tdata-slot=\"combobox-backdrop\"\n\t\t\tclassName={cn(\"fixed inset-0 z-50 bg-black/30\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Positioner                                                        */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxPositioner({\n\tclassName,\n\tsideOffset = 8,\n\t...props\n}: ComboboxPrimitive.Positioner.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Positioner\n\t\t\tdata-slot=\"combobox-positioner\"\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\"z-50 select-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Popup                                                             */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxPopup({ className, ...props }: ComboboxPrimitive.Popup.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Popup\n\t\t\tdata-slot=\"combobox-popup\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative\",\n\t\t\t\t\"max-h-full min-w-(--anchor-width) max-w-(--available-width)\",\n\t\t\t\t\"origin-(--transform-origin) overflow-hidden outline-none rounded-md border border-border bg-popover text-popover-foreground shadow-lg shadow-black/5\",\n\t\t\t\t\"data-open:animate-in data-open:fade-in data-open:zoom-in-95\",\n\t\t\t\t\"data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95\",\n\t\t\t\t\"data-starting-style:opacity-0 data-starting-style:scale-95\",\n\t\t\t\t\"data-ending-style:opacity-0 data-ending-style:scale-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Arrow                                                             */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxArrow({ className, ...props }: ComboboxPrimitive.Arrow.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Arrow\n\t\t\tdata-slot=\"combobox-arrow\"\n\t\t\tclassName={cn(\n\t\t\t\t\"size-3\",\n\t\t\t\t\"data-[side=bottom]:-top-px\",\n\t\t\t\t\"data-[side=top]:-bottom-px data-[side=top]:rotate-180\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<svg width=\"10\" height=\"6\" viewBox=\"0 0 10 6\" fill=\"none\">\n\t\t\t\t<title>Combobox Arrow</title>\n\t\t\t\t<path d=\"M0 6L5 0L10 6Z\" className=\"fill-popover\" />\n\t\t\t\t<path d=\"M0 6L5 0L10 6Z\" className=\"stroke-border\" />\n\t\t\t</svg>\n\t\t</ComboboxPrimitive.Arrow>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox List                                                              */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.List\n\t\t\tdata-slot=\"combobox-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"max-h-[min(var(--available-height),400px)] p-1 space-y-0.5\",\n\t\t\t\t\"outline-0 overflow-y-auto overscroll-contain\",\n\t\t\t\t\"data-empty:p-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Empty                                                             */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Empty\n\t\t\tdata-slot=\"combobox-empty\"\n\t\t\tclassName={cn(\n\t\t\t\t\"py-4 text-center text-sm text-muted-foreground empty:hidden\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Item                                                              */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxItem({ className, ...props }: ComboboxPrimitive.Item.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Item\n\t\t\tdata-slot=\"combobox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors\",\n\t\t\t\t\"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n\t\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\t\"data-inset:pl-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{props.children}\n\t\t\t<ComboboxItemIndicator />\n\t\t</ComboboxPrimitive.Item>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Item Indicator                                                    */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxItemIndicator({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.ItemIndicator.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.ItemIndicator\n\t\t\tdata-slot=\"combobox-item-indicator\"\n\t\t\tclassName={cn(\"text-muted-foreground ml-auto\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Check className=\"size-4\" />\n\t\t</ComboboxPrimitive.ItemIndicator>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Group                                                             */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n\treturn <ComboboxPrimitive.Group data-slot=\"combobox-group\" {...props} />;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Group Label                                                       */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxGroupLabel({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.GroupLabel\n\t\t\tdata-slot=\"combobox-group-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-2 py-2 text-xs font-semibold text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Separator                                                         */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxSeparator({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.Separator.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Separator\n\t\t\tdata-slot=\"combobox-separator\"\n\t\t\tclassName={cn(\"my-1 h-px bg-border\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Chips                                                             */\n/* -------------------------------------------------------------------------- */\n\ninterface ComboboxChipsProps extends ComboboxPrimitive.Chips.Props {\n\tsize?: VariantProps<typeof inputVariants>[\"size\"];\n\tvariant?: VariantProps<typeof inputVariants>[\"variant\"];\n\tref?: React.Ref<HTMLDivElement>;\n}\n\nfunction ComboboxChips({\n\tclassName,\n\tsize = \"md\",\n\tvariant = \"default\",\n\tref,\n\t...props\n}: ComboboxChipsProps) {\n\treturn (\n\t\t<ComboboxPrimitive.Chips\n\t\t\tdata-slot=\"combobox-chips\"\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\tinputVariants({ size, variant }),\n\t\t\t\t\"w-full h-auto flex flex-wrap items-center gap-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Chip                                                              */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxChip({ className, ...props }: ComboboxPrimitive.Chip.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Chip\n\t\t\tdata-slot=\"combobox-chip\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm\",\n\t\t\t\t\"bg-secondary text-secondary-foreground text-xs font-medium\",\n\t\t\t\t\"has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Chip Remove                                                       */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxChipRemove({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.ChipRemove.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.ChipRemove\n\t\t\tdata-slot=\"combobox-chip-remove\"\n\t\t\tclassName={cn(\n\t\t\t\t\"h-full shrink-0 cursor-pointer opacity-70 hover:opacity-100 transition-opacity\",\n\t\t\t\t\"[&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5\",\n\t\t\t\t\"[&_svg]:pointer-events-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Status                                                            */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxStatus({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.Status.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Status\n\t\t\tdata-slot=\"combobox-status\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-3 py-2 text-sm text-muted-foreground border-b\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Collection                                                        */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Collection\n\t\t\tdata-slot=\"combobox-collection\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Combobox Row                                                               */\n/* -------------------------------------------------------------------------- */\n\nfunction ComboboxRow(props: ComboboxPrimitive.Row.Props) {\n\treturn <ComboboxPrimitive.Row data-slot=\"combobox-row\" {...props} />;\n}\n\nfunction ComboboxChipsInput({\n\tclassName,\n\t...props\n}: ComboboxPrimitive.Input.Props) {\n\treturn (\n\t\t<ComboboxPrimitive.Input\n\t\t\tdata-slot=\"combobox-chip-input\"\n\t\t\tclassName={cn(\"min-w-16 flex-1 outline-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Exports                                                                    */\n/* -------------------------------------------------------------------------- */\n\nexport {\n\tComboboxRoot,\n\tComboboxInput,\n\tComboboxTrigger,\n\tComboboxIcon,\n\tComboboxClear,\n\tComboboxValue,\n\tComboboxPortal,\n\tComboboxBackdrop,\n\tComboboxPositioner,\n\tComboboxPopup,\n\tComboboxArrow,\n\tComboboxList,\n\tComboboxItem,\n\tComboboxItemIndicator,\n\tComboboxEmpty,\n\tComboboxGroup,\n\tComboboxGroupLabel,\n\tComboboxSeparator,\n\tComboboxStatus,\n\tComboboxCollection,\n\tComboboxRow,\n\tComboboxChips,\n\tComboboxChip,\n\tComboboxChipRemove,\n\tComboboxChipsInput,\n\tComboboxPrimitive,\n};\n",
			"type": "registry:component",
			"target": "components/baseui/components/combobox.tsx"
		}
	],
	"type": "registry:component"
}