50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2e10,"use client"; import { cn } from "@/lib/utils"; import { Command as CommandPrimitive } from "cmdk"; import { CheckIcon, ChevronsUpDownIcon, LoaderIcon, SearchIcon, } from "lucide-react"; import { useReducedMotion } from "motion/react"; import { Popover as PopoverPrimitive } from "radix-ui"; import { type ComponentProps, useCallback, useEffect, useRef, useState, } from "react"; import SmoothButton from "../smooth-button"; export interface ComboboxOption { /** Whether the option is disabled */ disabled?: boolean; /** The display label for the option */ label: string; /** The value of the option */ value: string; } export interface ComboboxProps { /** Accessible label for the combobox */ "aria-label"?: string; /** ID of element that labels this combobox */ "aria-labelledby"?: string; /** Additional CSS class names for the trigger button */ className?: string; /** Additional CSS class names for the popover content */ contentClassName?: string; /** Initially selected value when uncontrolled */ defaultValue?: string; /** Whether the combobox is disabled */ disabled?: boolean; /** Text shown when no results match */ emptyText?: string; /** Async search callback — receives the query string, returns filtered options */ onSearch?: (query: string) => Promise; /** Callback when the selected value changes */ onValueChange?: (value: string) => void; /** Static list of options (used when onSearch is not provided) */ options?: ComboboxOption[]; /** Placeholder text for the trigger button */ placeholder?: string; /** Debounce delay in ms for the onSearch callback */ searchDebounce?: number; /** Placeholder text for the search input */ searchPlaceholder?: string; /** The controlled selected value. Omit for uncontrolled use. */ value?: string; } /* ------------------------------------------------------------------ */ /* Thin cmdk + radix wrappers (no @repo/shadcn-ui) */ /* ------------------------------------------------------------------ */ const Popover = ({ ...props }: ComponentProps) => ( ); const PopoverTrigger = ({ ...props }: ComponentProps) => ( ); const PopoverContent = ({ className, align = "center", sideOffset = 4, ...props }: ComponentProps) => ( ); const Command = ({ className, ...props }: ComponentProps) => ( ); const CommandInput = ({ className, ...props }: ComponentProps) => (

); const CommandList = ({ className, ...props }: ComponentProps) => ( ); const CommandEmpty = ({ ...props }: ComponentProps) => ( ); const CommandGroup = ({ className, ...props }: ComponentProps) => ( ); const CommandItem = ({ className, ...props }: ComponentProps) => ( ); export default function Combobox({ value: valueProp, defaultValue = "", onValueChange, options: staticOptions, onSearch, searchDebounce = 300, placeholder = "Select an option…", searchPlaceholder = "Search…", emptyText = "No results found.", disabled = false, className, contentClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: ComboboxProps) { const shouldReduceMotion = useReducedMotion(); const [open, setOpen] = useState(false); const [internalValue, setInternalValue] = useState(defaultValue); const value = valueProp ?? internalValue; const [query, setQuery] = useState(""); const [asyncOptions, setAsyncOptions] = useState([]); const [loading, setLoading] = useState(false); const debounceRef = useRef | null>(null); /** Prevents empty search results from re-triggering the initial `onSearch("")`. */ const hasLoadedInitialRef = useRef(false); const displayOptions = onSearch ? asyncOptions : (staticOptions ?? []); /** Prefer full option lists so a filtered/async view cannot blank the trigger. */ const selectedLabel = (() => { const pools = [staticOptions, asyncOptions, displayOptions].filter( (list): list is ComboboxOption[] => Boolean(list?.length) ); for (const pool of pools) { const match = pool.find((opt) => opt.value === value); if (match) { return match.label; } } })(); const handleSearch = useCallback( (searchQuery: string) => { setQuery(searchQuery); if (!onSearch) { return; } if (debounceRef.current) { clearTimeout(debounceRef.current); } debounceRef.current = setTimeout(async () => { setLoading(true); try { const results = await onSearch(searchQuery); setAsyncOptions(results); } finally { setLoading(false); } }, searchDebounce); }, [onSearch, searchDebounce] ); // Load initial async options once when the popover first opens useEffect(() => { if (!(open && onSearch) || hasLoadedInitialRef.current || loading) { return; } hasLoadedInitialRef.current = true; setLoading(true); onSearch("") .then((results) => { setAsyncOptions(results); }) .finally(() => { setLoading(false); }); }, [open, onSearch, loading]); // Clean up debounce on unmount useEffect( () => () => { if (debounceRef.current) { clearTimeout(debounceRef.current); } }, [] ); const handleSelect = (selectedValue: string) => { const newValue = selectedValue === value ? "" : selectedValue; setInternalValue(newValue); onValueChange?.(newValue); setQuery(""); setOpen(false); }; const handleOpenChange = (nextOpen: boolean) => { setOpen(nextOpen); if (!nextOpen) { setQuery(""); } }; return ( {loading ? (

Loading…

) : null} {!loading && {emptyText}} {!loading && displayOptions.length > 0 ? ( {displayOptions.map((option) => ( handleSelect(option.value)} value={`${option.label} ${option.value}`} > {option.label} ))} ) : null} ); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","cmdk",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cmdk","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"cmdk"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L50",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/smooth-button.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"index.tsx","content":"$52","type":"registry:ui","target":"components/smoothui/combobox/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]