{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "baseui-autocomplete",
	"description": "A Base UI autocomplete component",
	"dependencies": ["lucide-react", "@base-ui/react"],
	"registryDependencies": ["@craftdotui/utils"],
	"files": [
		{
			"path": "packages/baseui/components/autocomplete/index.tsx",
			"content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { Search, X, ChevronsUpDown } from \"lucide-react\";\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\";\nimport { cn } from \"@/lib/utils\";\n\n/* -------------------------------------------------------------------------- */\n/* Autocomplete                                                               */\n/* -------------------------------------------------------------------------- */\n\nconst Autocomplete = AutocompletePrimitive.Root;\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteInput                                                          */\n/* -------------------------------------------------------------------------- */\n\ninterface AutocompleteInputProps extends AutocompletePrimitive.Input.Props {\n\tshowClear?: boolean;\n\tshowTrigger?: boolean;\n\tstartAddon?: React.ReactNode;\n}\n\nfunction AutocompleteInput({\n\tclassName,\n\tshowClear = false,\n\tshowTrigger = false,\n\tstartAddon = null,\n\t...props\n}: AutocompleteInputProps) {\n\treturn (\n\t\t<div className=\"relative\">\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<AutocompletePrimitive.Input\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"h-10 w-full px-3 py-2 flex border border-input rounded-md bg-background text-sm\",\n\t\t\t\t\tstartAddon && \"pl-10\",\n\t\t\t\t\t(showClear || showTrigger) && \"pr-10\",\n\t\t\t\t\t\"placeholder:text-muted-foreground\",\n\t\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-slot=\"autocomplete-input\"\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\">\n\t\t\t\t{showClear && (\n\t\t\t\t\t<AutocompleteClear>\n\t\t\t\t\t\t<X className=\"size-4\" />\n\t\t\t\t\t</AutocompleteClear>\n\t\t\t\t)}\n\n\t\t\t\t{showTrigger && (\n\t\t\t\t\t<AutocompleteTrigger>\n\t\t\t\t\t\t<ChevronsUpDown className=\"size-4\" />\n\t\t\t\t\t</AutocompleteTrigger>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteTrigger                                                        */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteTrigger({\n\tclassName,\n\t...props\n}: AutocompletePrimitive.Trigger.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Trigger\n\t\t\tclassName={cn(\n\t\t\t\t\"p-1 opacity-70 hover:opacity-100 cursor-pointer\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-trigger\"\n\t\t\taria-label=\"Toggle options\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteClear                                                          */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteClear({\n\tclassName,\n\t...props\n}: AutocompletePrimitive.Clear.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Clear\n\t\t\tclassName={cn(\n\t\t\t\t\"p-1 opacity-70 hover:opacity-100 cursor-pointer\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-clear\"\n\t\t\taria-label=\"Clear search\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteIcon                                                           */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteIcon({\n\tclassName,\n\t...props\n}: AutocompletePrimitive.Icon.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Icon\n\t\t\tclassName={cn(\n\t\t\t\t\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-icon\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<Search className=\"size-4\" />\n\t\t</AutocompletePrimitive.Icon>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompletePopup                                                          */\n/* -------------------------------------------------------------------------- */\n\ninterface AutocompletePopupProps extends AutocompletePrimitive.Popup.Props {\n\tsideOffset?: number;\n\thasBackdrop?: boolean;\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n}\n\nfunction AutocompletePopup({\n\tclassName,\n\tchildren,\n\tsideOffset = 4,\n\thasBackdrop = false,\n\t...props\n}: AutocompletePopupProps) {\n\treturn (\n\t\t<AutocompletePrimitive.Portal>\n\t\t\t{hasBackdrop && (\n\t\t\t\t<AutocompletePrimitive.Backdrop\n\t\t\t\t\tclassName=\"fixed inset-0 z-40 bg-background/80 backdrop-blur-sm\"\n\t\t\t\t\tdata-slot=\"autocomplete-backdrop\"\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<AutocompletePrimitive.Positioner\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName=\"z-50\"\n\t\t\t\tdata-slot=\"autocomplete-positioner\"\n\t\t\t>\n\t\t\t\t<AutocompletePrimitive.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"max-h-96 w-(--anchor-width) max-w-(--available-width)\",\n\t\t\t\t\t\t\"rounded-md border border-border bg-popover text-popover-foreground shadow\",\n\t\t\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\t\t\"origin-[--popover-transform-origin]\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"autocomplete-popup\"\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</AutocompletePrimitive.Popup>\n\t\t\t</AutocompletePrimitive.Positioner>\n\t\t</AutocompletePrimitive.Portal>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteList                                                           */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteList({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.List.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.List\n\t\t\tclassName={cn(\n\t\t\t\t\"max-h-[min(var(--available-height),300px)] p-1 overflow-y-auto overscroll-contain\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-list\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.List>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteItem                                                           */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteItem({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.Item.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Item\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full px-2 py-1.5 flex items-center cursor-default select-none rounded-sm text-sm outline-none\",\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\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-item\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.Item>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteEmpty                                                          */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteEmpty({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.Empty.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.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\tdata-slot=\"autocomplete-empty\"\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? \"No results found.\"}\n\t\t</AutocompletePrimitive.Empty>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteSeparator                                                      */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteSeparator({\n\tclassName,\n\t...props\n}: AutocompletePrimitive.Separator.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Separator\n\t\t\tclassName={cn(\"h-px bg-border my-1\", className)}\n\t\t\tdata-slot=\"autocomplete-separator\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteGroup                                                          */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteGroup({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.Group.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Group\n\t\t\tclassName={cn(\"\", className)}\n\t\t\tdata-slot=\"autocomplete-group\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.Group>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteGroupLabel                                                     */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteGroupLabel({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.GroupLabel.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.GroupLabel\n\t\t\tclassName={cn(\n\t\t\t\t\"px-2 py-1.5 text-xs font-semibold uppercase text-muted-foreground\",\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-group-label\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.GroupLabel>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteCollection                                                     */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteCollection({\n\t...props\n}: AutocompletePrimitive.Collection.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Collection\n\t\t\tdata-slot=\"autocomplete-collection\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* AutocompleteStatus                                                         */\n/* -------------------------------------------------------------------------- */\n\nfunction AutocompleteStatus({\n\tclassName,\n\tchildren,\n\t...props\n}: AutocompletePrimitive.Status.Props) {\n\treturn (\n\t\t<AutocompletePrimitive.Status\n\t\t\tclassName={cn(\n\t\t\t\t\"p-3 text-sm text-muted-foreground border-b\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-slot=\"autocomplete-status\"\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</AutocompletePrimitive.Status>\n\t);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Export                                                                     */\n/* -------------------------------------------------------------------------- */\n\nexport {\n\tAutocomplete,\n\tAutocompleteInput,\n\tAutocompleteTrigger,\n\tAutocompleteClear,\n\tAutocompleteIcon,\n\tAutocompletePopup,\n\tAutocompleteList,\n\tAutocompleteItem,\n\tAutocompleteEmpty,\n\tAutocompleteSeparator,\n\tAutocompleteGroup,\n\tAutocompleteGroupLabel,\n\tAutocompleteStatus,\n\tAutocompleteCollection,\n};\n",
			"type": "registry:component",
			"target": "components/baseui/components/autocomplete.tsx"
		}
	],
	"type": "registry:component"
}