{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "title": "Combobox", "description": "Filterable select on Base UI with Mira soft-rect, popup settle, and list stagger ≤40ms.", "dependencies": [ "@base-ui/react", "lucide-react", "motion" ], "registryDependencies": [ "@atroui/utils", "@atroui/motion" ], "files": [ { "path": "registry/default/ui/combobox.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\"\nimport { Check, ChevronDown, X } from \"lucide-react\"\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n useReducedMotion,\n} from \"motion/react\"\n\nimport {\n easeOutExpo,\n layoutTween,\n menuItemVariants,\n menuPopupMotion,\n} from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\n/** Layered pop elevation — ring-as-border + cast stack + top light. */\nconst overlayElevation = \"ds-elev-pop\"\n\ntype ComboboxOpenContextValue = {\n open: boolean\n}\n\nconst ComboboxOpenContext =\n React.createContext(null)\n\ntype ComboboxHighlightContextValue = {\n layoutId: string\n activeId: string | null\n setActiveId: (id: string | null) => void\n reduce: boolean | null\n}\n\nconst ComboboxHighlightContext =\n React.createContext(null)\n\nfunction useComboboxOpen() {\n const ctx = React.useContext(ComboboxOpenContext)\n if (!ctx) {\n throw new Error(\"Combobox parts must be used within \")\n }\n return ctx.open\n}\n\nfunction Combobox({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n ...props\n}: React.ComponentProps) {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n const isControlled = openProp !== undefined\n const open = isControlled ? openProp : uncontrolledOpen\n\n const handleOpenChange = React.useCallback(\n (next: boolean, eventDetails: Parameters<\n NonNullable<\n React.ComponentProps[\"onOpenChange\"]\n >\n >[1]) => {\n if (!isControlled) setUncontrolledOpen(next)\n onOpenChange?.(next, eventDetails)\n },\n [isControlled, onOpenChange]\n )\n\n return (\n \n \n \n )\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxInputGroup({\n className,\n ...props\n}: ComboboxPrimitive.InputGroup.Props) {\n return (\n \n )\n}\n\nfunction ComboboxInput({\n className,\n ...props\n}: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n const open = useComboboxOpen()\n const reduce = useReducedMotion()\n\n return (\n \n {children ?? (\n \n \n \n )}\n \n )\n}\n\nfunction ComboboxClear({\n className,\n ...props\n}: ComboboxPrimitive.Clear.Props) {\n return (\n \n \n Clear\n \n )\n}\n\nfunction ComboboxIcon({ className, ...props }: ComboboxPrimitive.Icon.Props) {\n return (\n \n \n \n )\n}\n\nfunction ComboboxContent({\n className,\n align = \"start\",\n alignOffset = 0,\n side = \"bottom\",\n sideOffset = 6,\n render,\n onMouseLeave,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n >) {\n const open = useComboboxOpen()\n const reduce = useReducedMotion()\n const groupId = React.useId()\n const [activeId, setActiveId] = React.useState(null)\n\n const highlight = React.useMemo(\n () => ({\n layoutId: `${groupId}-ink`,\n activeId,\n setActiveId,\n reduce: reduce ?? false,\n }),\n [activeId, groupId, reduce]\n )\n\n return (\n \n {open ? (\n \n \n \n \n }\n onMouseLeave={(event) => {\n setActiveId(null)\n onMouseLeave?.(event)\n }}\n {...props}\n />\n \n \n \n \n ) : null}\n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n const reduce = useReducedMotion()\n\n return (\n \n )\n }\n {...props}\n />\n )\n}\n\nfunction ComboboxHighlight({ itemId }: { itemId: string }) {\n const highlight = React.useContext(ComboboxHighlightContext)\n if (!highlight || highlight.reduce || highlight.activeId !== itemId) {\n return null\n }\n return (\n \n )\n}\n\nconst itemBase =\n \"relative flex cursor-default items-center gap-2 rounded-[calc(var(--radius)-2px)] px-2 py-1.5 text-[0.8125rem] outline-none select-none\"\n\nfunction ComboboxItem({\n className,\n children,\n onMouseEnter,\n onFocus,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n const itemId = React.useId()\n const highlight = React.useContext(ComboboxHighlightContext)\n const reduce = highlight?.reduce ?? false\n\n return (\n \n }\n onMouseEnter={(event) => {\n highlight?.setActiveId(itemId)\n onMouseEnter?.(event)\n }}\n onFocus={(event) => {\n highlight?.setActiveId(itemId)\n onFocus?.(event)\n }}\n {...props}\n >\n \n \n {children}\n \n \n )\n}\n\nfunction ComboboxItemIndicator({\n className,\n ...props\n}: ComboboxPrimitive.ItemIndicator.Props) {\n return (\n \n \n \n )\n}\n\nfunction ComboboxEmpty({\n className,\n ...props\n}: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxGroup({ ...props }: ComboboxPrimitive.Group.Props) {\n return \n}\n\nfunction ComboboxGroupLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.Label.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({\n ...props\n}: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nexport {\n Combobox,\n ComboboxClear,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxGroupLabel,\n ComboboxIcon,\n ComboboxInput,\n ComboboxInputGroup,\n ComboboxItem,\n ComboboxItemIndicator,\n ComboboxLabel,\n ComboboxList,\n ComboboxTrigger,\n ComboboxValue,\n}\n", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ], "type": "registry:ui" }