{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "type": "registry:ui", "title": "Combobox", "description": "A filterable input bound to a listbox popup, built on Base UI Combobox with seam depth motion.", "dependencies": [ "@base-ui/react", "motion", "lucide-react" ], "registryDependencies": [ "https://seamui.dev/r/utils.json", "https://seamui.dev/r/motion.json", "https://seamui.dev/r/button.json" ], "files": [ { "path": "registry/seam/ui/combobox.tsx", "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\"\nimport { Check, ChevronsUpDown, Search, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { condense } from \"@/lib/motion\"\nimport { buttonVariants } from \"./button\"\n\n/**\n * Combobox — a filterable input bound to a listbox popup. Built on Base UI's\n * Combobox (which owns filtering, keyboard nav, and selection); seamui styles\n * it as a debossed entry field opening an overlay-depth popup of embossed\n * items. See the seamui design language: type *into* the well, pick a raised key.\n *\n * Aliased directly so the generic `` signature (and the\n * `items` / `value` / `multiple` inference it drives) passes through intact.\n */\nconst Combobox = BaseCombobox.Root\n\n/**\n * The debossed text field. Shows a leading search icon, a trailing chevron,\n * and a Clear button once there's a value to clear.\n */\nfunction ComboboxInput({\n className,\n placeholder,\n showClear = true,\n ...props\n}: React.ComponentProps & {\n showClear?: boolean\n}) {\n return (\n
\n \n \n
\n {showClear && (\n \n \n \n )}\n \n \n \n
\n
\n )\n}\n\n/** Portal + Positioner + Popup — the floating list, with overlay-depth motion. */\nfunction ComboboxContent({\n className,\n children,\n sideOffset = 6,\n ...props\n}: React.ComponentProps & { sideOffset?: number }) {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\n/**\n * The list. Pass a render function as the child to map over filtered items:\n * `{(item) => {item.label}}`\n */\nfunction ComboboxList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\n/** Shown only when the filter yields no matches. */\nfunction ComboboxEmpty({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ComboboxGroup(props: React.ComponentProps) {\n return \n}\n\n/** Renders the filtered items within a group. See the Groups example. */\nconst ComboboxCollection = BaseCombobox.Collection\n\nfunction ComboboxGroupLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\n// Base UI's Combobox has no Separator part, so this is a plain divider.\nfunction ComboboxSeparator({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\n/* ── Multi-select (chips) ────────────────────────────────────────────────\n For `multiple` comboboxes: a debossed well that wraps selected values as\n embossed chips alongside the input. Compose as\n \n {(items) => items.map((i) => )}\n \n \n*/\n\n/**\n * The debossed well that holds chips + the input in multi-select mode.\n * Wrapped in Base UI's InputGroup so the popup anchors to (and matches the\n * width of) the whole well — not the bare input, which would otherwise pin\n * the dropdown to the caret and squeeze it to the input's width.\n */\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\n/** Reads the selected value(s); pass a render function to map them to chips. */\nconst ComboboxValue = BaseCombobox.Value\n\n/** An embossed pill representing one selected value. */\nfunction ComboboxChip({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n )\n}\n\nfunction ComboboxChipRemove({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\n/** A bare input sized to sit inside the chips well (no icons/affordances). */\nfunction ComboboxChipsInput({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Combobox,\n ComboboxInput,\n ComboboxContent,\n ComboboxList,\n ComboboxItem,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n ComboboxCollection,\n ComboboxSeparator,\n ComboboxChips,\n ComboboxChip,\n ComboboxChipRemove,\n ComboboxChipsInput,\n ComboboxValue,\n}\n", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ] }