{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox",
  "title": "Combobox",
  "description": "A glass field with a list that buds off it and reshapes as you type.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/field.json",
    "https://liquikit.dev/r/glass.json",
    "https://liquikit.dev/r/popup.json"
  ],
  "files": [
    {
      "path": "src/combobox.tsx",
      "content": "\"use client\";\n\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\nimport {\n\ttype CSSProperties,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { useFocusGlass } from \"./field\";\nimport { GlassPane, type GlassRefraction, type GlassTheme } from \"./glass\";\nimport { MorphPane, PopupState, usePopupState } from \"./popup\";\nimport { cx, type GlassOptions, mergeRefs } from \"./types\";\nimport \"./liquikit.css\";\n\ntype Classed<P> = Omit<P, \"className\"> & { className?: string };\n\nexport type ComboboxRootProps<\n\tValue,\n\tMultiple extends boolean | undefined,\n> = Omit<BaseCombobox.Root.Props<Value, Multiple>, \"open\"> & {\n\topen?: boolean;\n};\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n\topen: openProp,\n\tdefaultOpen = false,\n\tonOpenChange,\n\t...rootProps\n}: ComboboxRootProps<Value, Multiple>) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultOpen);\n\tconst open = openProp ?? uncontrolled;\n\tconst trigger = useRef<HTMLElement | null>(null);\n\tconst state = useMemo(() => ({ open, trigger }), [open]);\n\treturn (\n\t\t<PopupState.Provider value={state}>\n\t\t\t<BaseCombobox.Root\n\t\t\t\t{...(rootProps as BaseCombobox.Root.Props<Value, Multiple>)}\n\t\t\t\topen={open}\n\t\t\t\tonOpenChange={(next, eventDetails) => {\n\t\t\t\t\tif (openProp === undefined) setUncontrolled(next);\n\t\t\t\t\tonOpenChange?.(next, eventDetails);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</PopupState.Provider>\n\t);\n}\n\nexport type ComboboxInputProps = Omit<\n\tBaseCombobox.Input.Props,\n\t\"className\" | \"style\" | \"render\"\n> &\n\tGlassOptions & {\n\t\trefraction?: GlassRefraction;\n\t\tclassName?: string;\n\t\tstyle?: CSSProperties;\n\t};\n\nfunction Input({\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\tstyle,\n\tonFocus,\n\tonBlur,\n\t...inputProps\n}: ComboboxInputProps) {\n\tconst { trigger } = usePopupState();\n\tconst focus = useFocusGlass();\n\treturn (\n\t\t<BaseCombobox.InputGroup\n\t\t\tclassName={cx(\"glass-ui-combo\", className)}\n\t\t\tstyle={style}\n\t\t\trender={(props) => (\n\t\t\t\t<GlassPane\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={mergeRefs(props.ref, (element: HTMLElement | null) => {\n\t\t\t\t\t\ttrigger.current = element;\n\t\t\t\t\t})}\n\t\t\t\t\tradius=\"capsule\"\n\t\t\t\t\tpress={focus.press}\n\t\t\t\t\ttheme={theme}\n\t\t\t\t\tlens={lens}\n\t\t\t\t\tliquid={liquid}\n\t\t\t\t\trefraction={refraction}\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"glass-ui-combo__row\">\n\t\t\t\t<BaseCombobox.Input\n\t\t\t\t\t{...inputProps}\n\t\t\t\t\tclassName=\"glass-ui-combo__input\"\n\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\tonFocus?.(event);\n\t\t\t\t\t\tfocus.onFocus();\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\tonBlur?.(event);\n\t\t\t\t\t\tfocus.onBlur();\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<BaseCombobox.Clear\n\t\t\t\t\tclassName=\"glass-ui-search__clear glass-ui-combo__clear\"\n\t\t\t\t\taria-label=\"Clear\"\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"m5.5 5.5 5 5m0-5-5 5\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</BaseCombobox.Clear>\n\t\t\t\t<BaseCombobox.Trigger\n\t\t\t\t\tclassName=\"glass-ui-combo__trigger\"\n\t\t\t\t\taria-label=\"Show choices\"\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</BaseCombobox.Trigger>\n\t\t\t</span>\n\t\t</BaseCombobox.InputGroup>\n\t);\n}\n\nexport type ComboboxChipsProps = GlassOptions & {\n\tplaceholder?: string;\n\tchipLabel?: (item: unknown) => ReactNode;\n\trefraction?: GlassRefraction;\n\tclassName?: string;\n\tstyle?: CSSProperties;\n\t\"aria-label\"?: string;\n};\n\nfunction labelOf(item: unknown) {\n\tif (item && typeof item === \"object\") {\n\t\tconst record = item as { label?: unknown; value?: unknown };\n\t\treturn String(record.label ?? record.value ?? \"\");\n\t}\n\treturn String(item);\n}\n\nfunction Chips({\n\tplaceholder,\n\tchipLabel = labelOf,\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tclassName,\n\tstyle,\n\t\"aria-label\": ariaLabel,\n}: ComboboxChipsProps) {\n\tconst { trigger } = usePopupState();\n\tconst focus = useFocusGlass();\n\treturn (\n\t\t<BaseCombobox.InputGroup\n\t\t\tclassName={cx(\"glass-ui-combo glass-ui-combo--chips\", className)}\n\t\t\tstyle={style}\n\t\t\trender={(props) => (\n\t\t\t\t<GlassPane\n\t\t\t\t\t{...props}\n\t\t\t\t\tref={mergeRefs(props.ref, (element: HTMLElement | null) => {\n\t\t\t\t\t\ttrigger.current = element;\n\t\t\t\t\t})}\n\t\t\t\t\tradius={22}\n\t\t\t\t\tpress={focus.press}\n\t\t\t\t\ttheme={theme}\n\t\t\t\t\tlens={lens}\n\t\t\t\t\tliquid={liquid}\n\t\t\t\t\trefraction={refraction}\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<span className=\"glass-ui-combo__row glass-ui-combo__row--chips\">\n\t\t\t\t<BaseCombobox.Value>\n\t\t\t\t\t{(value: unknown[]) => (\n\t\t\t\t\t\t<BaseCombobox.Chips\n\t\t\t\t\t\t\tclassName=\"glass-ui-combo__chips\"\n\t\t\t\t\t\t\taria-label={value.length > 0 ? \"Selected\" : undefined}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{value.map((item) => {\n\t\t\t\t\t\t\t\tconst text = labelOf(item);\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<BaseCombobox.Chip\n\t\t\t\t\t\t\t\t\t\tkey={text}\n\t\t\t\t\t\t\t\t\t\tclassName=\"glass-ui-combo__chip\"\n\t\t\t\t\t\t\t\t\t\taria-label={text}\n\t\t\t\t\t\t\t\t\t\taria-description=\"Press Backspace or Delete to remove\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{chipLabel(item)}\n\t\t\t\t\t\t\t\t\t\t<BaseCombobox.ChipRemove\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"glass-ui-combo__chip-remove\"\n\t\t\t\t\t\t\t\t\t\t\taria-label={`Remove ${text}`}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t\t<path d=\"m5 5 6 6m0-6-6 6\" />\n\t\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t\t</BaseCombobox.ChipRemove>\n\t\t\t\t\t\t\t\t\t</BaseCombobox.Chip>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t<BaseCombobox.Input\n\t\t\t\t\t\t\t\tclassName=\"glass-ui-combo__input\"\n\t\t\t\t\t\t\t\tplaceholder={value.length > 0 ? undefined : placeholder}\n\t\t\t\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\t\t\t\tonFocus={focus.onFocus}\n\t\t\t\t\t\t\t\tonBlur={focus.onBlur}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</BaseCombobox.Chips>\n\t\t\t\t\t)}\n\t\t\t\t</BaseCombobox.Value>\n\t\t\t\t<BaseCombobox.Trigger\n\t\t\t\t\tclassName=\"glass-ui-combo__trigger\"\n\t\t\t\t\taria-label=\"Show choices\"\n\t\t\t\t>\n\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M5 6.5 8 3.5l3 3M5 9.5l3 3 3-3\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</BaseCombobox.Trigger>\n\t\t\t</span>\n\t\t</BaseCombobox.InputGroup>\n\t);\n}\n\nexport type ComboboxPopupProps = Omit<\n\tBaseCombobox.Popup.Props,\n\t\"className\" | \"render\"\n> & {\n\tempty?: ReactNode;\n\ttheme?: GlassTheme;\n\trefraction?: GlassRefraction;\n\tclassName?: string;\n\tchildren?: ReactNode;\n};\n\nfunction Popup({\n\tempty,\n\ttheme,\n\trefraction,\n\tclassName,\n\tchildren,\n\t...popupProps\n}: ComboboxPopupProps) {\n\treturn (\n\t\t<BaseCombobox.Portal>\n\t\t\t<BaseCombobox.Positioner\n\t\t\t\tclassName=\"glass-ui-positioner glass-ui-combo__positioner\"\n\t\t\t\tsideOffset={8}\n\t\t\t\talign=\"start\"\n\t\t\t>\n\t\t\t\t<BaseCombobox.Popup\n\t\t\t\t\t{...popupProps}\n\t\t\t\t\tclassName={cx(\"glass-ui-popup glass-ui-menu\", className)}\n\t\t\t\t\trender={(props) => (\n\t\t\t\t\t\t<MorphPane {...props} theme={theme} refraction={refraction} />\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{empty ? (\n\t\t\t\t\t\t<BaseCombobox.Empty className=\"glass-ui-combo__empty\">\n\t\t\t\t\t\t\t{empty}\n\t\t\t\t\t\t</BaseCombobox.Empty>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{children}\n\t\t\t\t</BaseCombobox.Popup>\n\t\t\t</BaseCombobox.Positioner>\n\t\t</BaseCombobox.Portal>\n\t);\n}\n\nfunction List({ className, ...props }: Classed<BaseCombobox.List.Props>) {\n\treturn (\n\t\t<BaseCombobox.List\n\t\t\t{...props}\n\t\t\tclassName={cx(\"glass-ui-menu__list glass-ui-combo__list\", className)}\n\t\t/>\n\t);\n}\n\nfunction Item({\n\tclassName,\n\tchildren,\n\t...itemProps\n}: Classed<BaseCombobox.Item.Props> & { children?: ReactNode }) {\n\treturn (\n\t\t<BaseCombobox.Item\n\t\t\t{...itemProps}\n\t\t\tclassName={cx(\"glass-ui-menu__item glass-ui-menu__check\", className)}\n\t\t>\n\t\t\t<span className=\"glass-ui-select__slot\" aria-hidden=\"true\">\n\t\t\t\t<BaseCombobox.ItemIndicator className=\"glass-ui-select__indicator\">\n\t\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t\t<path d=\"M3.5 8.5l3 3 6-7\" />\n\t\t\t\t\t</svg>\n\t\t\t\t</BaseCombobox.ItemIndicator>\n\t\t\t</span>\n\t\t\t<span className=\"glass-ui-menu__text\">{children}</span>\n\t\t</BaseCombobox.Item>\n\t);\n}\n\nexport const Combobox = { Root, Input, Chips, Popup, List, Item };\n\nexport const ComboboxRoot = Combobox.Root;\nexport const ComboboxInput = Combobox.Input;\nexport const ComboboxChips = Combobox.Chips;\nexport const ComboboxPopup = Combobox.Popup;\nexport const ComboboxList = Combobox.List;\nexport const ComboboxItem = Combobox.Item;\n",
      "type": "registry:ui",
      "target": "@components/liquikit/combobox.tsx"
    }
  ],
  "type": "registry:ui"
}