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:T4c49,"use client"; import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; import { Check, ChevronsUpDown, X } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const controlCornerInheritClassName = "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; const comboboxListScrollbarClassName = "z-10 my-1.5 mr-0.5 w-1 shrink-0 touch-none select-none opacity-0 transition-opacity duration-150 before:absolute before:left-1/2 before:h-full before:w-5 before:-translate-x-1/2 before:content-[''] data-hovering:pointer-events-auto data-hovering:opacity-100 data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"; const comboboxListThumbClassName = "relative rounded-full bg-muted-foreground/50 bg-[color:color-mix(in_oklch,var(--ic-muted-foreground),transparent_35%)]"; export type ComboboxOption = { value: string; label: string; description?: string; }; export interface ComboboxProps { options: ComboboxOption[]; value?: string; onChange?: (value: string) => void; placeholder?: string; emptyMessage?: string; className?: string; disabled?: boolean; clearable?: boolean; openOnFocus?: boolean; } type SearchParts = { normalized: string; compact: string; tokens: string[]; }; function getSearchParts(value: string): SearchParts { const normalized = value .normalize("NFKD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/[_-]+/g, " ") .replace(/\s+/g, " ") .trim(); return { normalized, compact: normalized.replace(/\s+/g, ""), tokens: normalized.split(" ").filter(Boolean), }; } function matchesSearch( candidate: string | undefined, { normalized, compact, tokens }: SearchParts ) { if (!candidate) return false; const candidateParts = getSearchParts(candidate); if (candidateParts.normalized.includes(normalized)) return true; if (compact && candidateParts.compact.includes(compact)) return true; return ( tokens.length > 0 && tokens.every( (token) => candidateParts.normalized.includes(token) || candidateParts.compact.includes(token) ) ); } export function Combobox({ options, value, onChange, placeholder = "Select an option...", emptyMessage = "No results found.", className, disabled = false, clearable = true, openOnFocus = false, }: ComboboxProps) { const [mounted, setMounted] = React.useState(false); const [open, setOpen] = React.useState(false); const [query, setQuery] = React.useState(""); const [isEditingQuery, setIsEditingQuery] = React.useState(false); const [activeIndex, setActiveIndex] = React.useState(0); const [isSmallScreen, setIsSmallScreen] = React.useState(false); const [menuStyle, setMenuStyle] = React.useState({ top: 0, left: 0, width: 0, }); const containerRef = React.useRef(null); const inputRef = React.useRef(null); const listRef = React.useRef(null); const menuRef = React.useRef(null); const listboxId = React.useId(); const selected = options.find((o) => o.value === value); const filtered = React.useMemo(() => { const search = getSearchParts(query); if (!search.normalized) return options; return options.filter( (o) => matchesSearch(o.label, search) || matchesSearch(o.value, search) || matchesSearch(o.description, search) ); }, [options, query]); // Close on outside click React.useEffect(() => { if (!open) return; const handler = (e: MouseEvent) => { const target = e.target as Node; if (containerRef.current?.contains(target)) return; if (menuRef.current?.contains(target)) return; setOpen(false); }; document.addEventListener("mousedown", handler); return () => document.removeEventListener("mousedown", handler); }, [open]); // Reset query when closing React.useEffect(() => { if (open) { const idx = filtered.findIndex((o) => o.value === value); setActiveIndex(idx >= 0 ? idx : 0); } else { setQuery(""); setIsEditingQuery(false); } }, [open, filtered, value]); React.useEffect(() => { if (activeIndex >= filtered.length) setActiveIndex(0); }, [filtered.length, activeIndex]); React.useEffect(() => { setMounted(true); }, []); React.useEffect(() => { if (typeof window === "undefined") return; const mediaQuery = window.matchMedia("(max-width: 640px)"); const updateViewportMode = () => setIsSmallScreen(mediaQuery.matches); updateViewportMode(); mediaQuery.addEventListener("change", updateViewportMode); return () => mediaQuery.removeEventListener("change", updateViewportMode); }, []); const updateMenuPosition = React.useCallback(() => { const container = containerRef.current; if (!container) return; const rect = container.getBoundingClientRect(); setMenuStyle({ top: rect.bottom + 4, left: rect.left, width: rect.width, }); }, []); React.useEffect(() => { if (!open) return; if (isSmallScreen) return; updateMenuPosition(); const onScrollOrResize = () => updateMenuPosition(); window.addEventListener("resize", onScrollOrResize); window.addEventListener("scroll", onScrollOrResize, true); return () => { window.removeEventListener("resize", onScrollOrResize); window.removeEventListener("scroll", onScrollOrResize, true); }; }, [open, updateMenuPosition, isSmallScreen]); React.useEffect(() => { if (!open) return; const el = listRef.current?.querySelector( `[data-index="${activeIndex}"]` ); el?.scrollIntoView({ block: "nearest" }); }, [activeIndex, open]); const selectDisplayedValue = React.useCallback(() => { if (!selected?.label || query || isEditingQuery) return; requestAnimationFrame(() => { const input = inputRef.current; if (input && document.activeElement === input) { input.select(); } }); }, [selected?.label, query, isEditingQuery]); const select = (opt: ComboboxOption) => { onChange?.(opt.value); setOpen(false); inputRef.current?.blur(); }; const handleArrowKey = (key: "ArrowDown" | "ArrowUp") => { if (!open) { setOpen(true); selectDisplayedValue(); return; } setActiveIndex((i) => { if (!filtered.length) return 0; if (key === "ArrowDown") return (i + 1) % filtered.length; return (i - 1 + filtered.length) % filtered.length; }); }; const handleOpenListKey = (e: React.KeyboardEvent) => { if (!open) return; if (e.key === "Home") { e.preventDefault(); setActiveIndex(0); return; } if (e.key === "End") { e.preventDefault(); setActiveIndex(Math.max(0, filtered.length - 1)); return; } if (e.key === "Enter" && filtered[activeIndex]) { e.preventDefault(); select(filtered[activeIndex]); } }; const onInputKeyDown = (e: React.KeyboardEvent) => { if (disabled) return; switch (e.key) { case "Tab": setOpen(false); break; case "Escape": if (open) { e.preventDefault(); setOpen(false); } break; case "ArrowDown": case "ArrowUp": e.preventDefault(); handleArrowKey(e.key); break; case "Home": case "End": case "Enter": handleOpenListKey(e); break; default: break; } }; const displayValue = open ? isEditingQuery ? query : (selected?.label ?? query) : (selected?.label ?? ""); const menuContent = ( {open && ( )} ); return (

{ if (!disabled) { setOpen(true); inputRef.current?.focus(); selectDisplayedValue(); } }} onKeyDown={(e) => { if (disabled || e.target !== e.currentTarget) return; if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setOpen(true); inputRef.current?.focus(); selectDisplayedValue(); } }} > { if (!open) setOpen(true); setIsEditingQuery(true); setQuery(e.target.value); setActiveIndex(0); }} onFocus={() => { selectDisplayedValue(); if (openOnFocus) setOpen(true); }} onKeyDown={onInputKeyDown} placeholder={placeholder} ref={inputRef} role="combobox" type="text" value={displayValue} /> {clearable && selected && !disabled && ( )}

{isSmallScreen ? (

{menuContent}

) : mounted ? ( createPortal(menuContent, document.body) ) : null}

); } export { Combobox as combobox }; 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"combobox.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]