{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-search", "title": "Command Search", "description": "A command palette that types queries and live-filters grouped results, with keyboard navigation.", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "@spectrumui/use-typewriter" ], "files": [ { "path": "app/registry/command-search/command-search.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AnimatePresence, motion, useInView } from \"motion/react\";\nimport {\n ArrowDown,\n ArrowRight,\n ArrowUp,\n CornerDownLeft,\n Search,\n SearchX,\n} from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { useTypewriter } from \"@/components/spectrumui/use-typewriter\";\n\nexport interface CommandSearchItem {\n label: string;\n icon?: React.ReactNode;\n}\n\nexport interface CommandSearchGroup {\n label: string;\n items: CommandSearchItem[];\n}\n\nexport interface CommandSearchProps {\n /** Static text for the search field (used when `autoType` is false). */\n query?: string;\n /** Queries the palette types out and live-filters by. */\n queries?: string[];\n /** Type the queries automatically and filter results as they type. */\n autoType?: boolean;\n placeholder?: string;\n /** Grouped results rendered below the search field. */\n groups?: CommandSearchGroup[];\n /** Called with the item when a row is clicked. */\n onSelect?: (item: CommandSearchItem) => void;\n /** Fixed height of the palette. Content overflows are clipped like a real palette. */\n height?: number;\n className?: string;\n}\n\nconst DEFAULT_QUERIES = [\"anim\", \"chart\", \"dialog\", \"side\"];\n\nconst DEFAULT_GROUPS: CommandSearchGroup[] = [\n {\n label: \"Pages\",\n items: [\n { label: \"Animated Drawer\" },\n { label: \"Docs\" },\n { label: \"Components\" },\n { label: \"Blocks\" },\n { label: \"Charts\" },\n { label: \"Directory\" },\n { label: \"Create\" },\n ],\n },\n {\n label: \"Components\",\n items: [\n { label: \"Accordion\" },\n { label: \"Alert\" },\n { label: \"Alert Dialog\" },\n { label: \"Animated Beam\" },\n { label: \"Avatar\" },\n { label: \"Badge\" },\n { label: \"Breadcrumb\" },\n { label: \"Button\" },\n { label: \"Calendar\" },\n { label: \"Card\" },\n { label: \"Carousel\" },\n { label: \"Chart\" },\n { label: \"Checkbox\" },\n { label: \"Combobox\" },\n { label: \"Command\" },\n { label: \"Dialog\" },\n { label: \"Drawer\" },\n { label: \"Dropdown Menu\" },\n { label: \"Input\" },\n { label: \"Navigation Menu\" },\n { label: \"Popover\" },\n { label: \"Select\" },\n { label: \"Sidebar\" },\n { label: \"Table\" },\n { label: \"Tabs\" },\n { label: \"Tooltip\" },\n ],\n },\n];\n\nconst ROW_SPRING = { type: \"spring\", stiffness: 420, damping: 34 } as const;\n\nfunction Caret() {\n return (\n \n );\n}\n\nexport function CommandSearch({\n query = \"anim\",\n queries,\n autoType = true,\n placeholder = \"Search…\",\n groups = DEFAULT_GROUPS,\n onSelect,\n height = 408,\n className,\n}: CommandSearchProps) {\n const rootRef = React.useRef(null);\n const inView = useInView(rootRef, { margin: \"-10% 0px\" });\n\n const { text: typed } = useTypewriter(queries ?? DEFAULT_QUERIES, {\n typeMs: 170,\n deleteMs: 80,\n holdMs: 2800,\n gapMs: 1000,\n enabled: autoType && inView,\n });\n\n const displayQuery = autoType ? typed : query;\n const needle = displayQuery.trim().toLowerCase();\n\n const filteredGroups = React.useMemo(\n () =>\n groups\n .map((group) => ({\n ...group,\n items: needle\n ? group.items.filter((item) =>\n item.label.toLowerCase().includes(needle),\n )\n : group.items,\n }))\n .filter((group) => group.items.length > 0),\n [groups, needle],\n );\n\n // The highlight tracks item identity (label), never a numeric index, so it\n // stays correct while rows animate in and out. When the hovered row is\n // filtered away it falls back to the first visible row — no state resets.\n const [hoveredLabel, setHoveredLabel] = React.useState(null);\n const visibleLabels = React.useMemo(\n () => new Set(filteredGroups.flatMap((g) => g.items.map((i) => i.label))),\n [filteredGroups],\n );\n const activeLabel =\n hoveredLabel && visibleLabels.has(hoveredLabel)\n ? hoveredLabel\n : filteredGroups[0]?.items[0]?.label ?? null;\n\n // The highlight is ONE persistent element positioned in the list container,\n // re-measured from the DOM whenever the active row or the filter changes.\n // (A layoutId pill breaks here: the list reflows instantly under the\n // animation and the projected position goes stale between re-renders.)\n const rowRefs = React.useRef(new Map());\n const [pillY, setPillY] = React.useState(null);\n\n // Remeasure when the active row or filtered list changes so the pill stays\n // aligned while auto-typing reflows results. setState bails out when unchanged.\n React.useLayoutEffect(() => {\n const row = activeLabel ? rowRefs.current.get(activeLabel) : undefined;\n const next = row ? row.offsetTop : null;\n setPillY((prev) => (prev === next ? prev : next));\n }, [activeLabel, filteredGroups]);\n\n const flatItems = React.useMemo(\n () => filteredGroups.flatMap((group) => group.items),\n [filteredGroups],\n );\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (flatItems.length === 0) return;\n\n const currentIndex = Math.max(\n 0,\n flatItems.findIndex((item) => item.label === activeLabel),\n );\n\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n const next = flatItems[(currentIndex + 1) % flatItems.length];\n setHoveredLabel(next.label);\n rowRefs.current.get(next.label)?.scrollIntoView({ block: \"nearest\" });\n return;\n }\n\n if (event.key === \"ArrowUp\") {\n event.preventDefault();\n const prev =\n flatItems[(currentIndex - 1 + flatItems.length) % flatItems.length];\n setHoveredLabel(prev.label);\n rowRefs.current.get(prev.label)?.scrollIntoView({ block: \"nearest\" });\n return;\n }\n\n if (event.key === \"Enter\") {\n event.preventDefault();\n const selected = flatItems[currentIndex] ?? flatItems[0];\n if (selected) onSelect?.(selected);\n }\n },\n [activeLabel, flatItems, onSelect],\n );\n\n const activeOptionId = activeLabel\n ? `command-search-option-${activeLabel.replace(/\\s+/g, \"-\").toLowerCase()}`\n : undefined;\n\n return (\n \n {/* Search field */}\n
\n \n
\n {displayQuery}\n \n {!displayQuery ? (\n \n {placeholder}\n \n ) : null}\n
\n
\n\n {/* Results — filtering is instant, like a native palette; the animated\n piece is the highlight pill gliding between rows. */}\n setHoveredLabel(null)}\n >\n \n\n {filteredGroups.map((group) => (\n
\n

\n {group.label}\n

\n {group.items.map((item) => {\n const active = item.label === activeLabel;\n return (\n {\n if (el) rowRefs.current.set(item.label, el);\n else rowRefs.current.delete(item.label);\n }}\n type=\"button\"\n role=\"option\"\n aria-selected={active}\n tabIndex={-1}\n onClick={() => onSelect?.(item)}\n onMouseEnter={() => setHoveredLabel(item.label)}\n onFocus={() => setHoveredLabel(item.label)}\n whileTap={{ scale: 0.985 }}\n className=\"relative flex h-9 w-full items-center gap-3 rounded-lg px-3 text-left outline-hidden\"\n >\n \n \n {item.icon ?? }\n \n \n \n \n \n \n );\n })}\n
\n ))}\n\n \n {filteredGroups.length === 0 ? (\n \n \n

\n No results for \n \n “{displayQuery}”\n \n

\n \n ) : null}\n \n \n\n {/* Footer hints */}\n
\n \n \n \n \n \n \n \n Navigate\n \n \n \n \n \n Select\n \n
\n \n );\n}\n\nfunction Highlighted({ label, needle }: { label: string; needle: string }) {\n if (!needle) return <>{label};\n const start = label.toLowerCase().indexOf(needle);\n if (start === -1) return <>{label};\n const end = start + needle.length;\n return (\n <>\n {label.slice(0, start)}\n \n {label.slice(start, end)}\n \n {label.slice(end)}\n \n );\n}\n", "type": "registry:component", "target": "components/spectrumui/command-search.tsx" } ], "type": "registry:component" }