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:T7bf3,"use client"; import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"; import { Check, ChevronDown } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import { type CSSProperties, type Dispatch, type KeyboardEvent, type MutableRefObject, type ReactNode, type SetStateAction, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } 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 MAX_MENU_HEIGHT = 320; const selectListScrollbarClassName = "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 selectListThumbClassName = "relative rounded-full bg-muted-foreground/50 bg-[color:color-mix(in_oklch,var(--ic-muted-foreground),transparent_35%)]"; const MENU_OFFSET = 8; const TYPEAHEAD_RESET_MS = 500; const VIEWPORT_MARGIN = 12; const SOFT_EASE = [0.22, 1, 0.36, 1] as const; const EXIT_EASE = [0.55, 0.06, 0.68, 0.19] as const; const ACTIVE_SPRING = { type: "spring", stiffness: 460, damping: 34, mass: 0.58, } as const; const CHECK_SPRING = { type: "spring", stiffness: 520, damping: 28, mass: 0.55, } as const; const PRESS_SPRING = { type: "spring", stiffness: 560, damping: 32, mass: 0.48, } as const; export interface SelectOption { value: string; label: string; icon?: ReactNode; group?: string; } export interface SelectProps { options: SelectOption[]; value?: string; onChange?: (value: string) => void; placeholder?: string; className?: string; } type SelectSection = { items: Array<{ index: number; option: SelectOption; }>; key: string; label?: string; }; type MenuPosition = { left: number; maxHeight: number; top: number; transformOrigin: string; width: number; }; type SelectOptionRowProps = { activeHighlightId: string; index: number; isActive: boolean; isSelected: boolean; itemVariants: ReturnType; listboxId: string; onSelect: (index: number) => void; option: SelectOption; setActiveIndex: Dispatch>; setOptionRef: (index: number, node: HTMLDivElement | null) => void; setShowActiveHighlight: Dispatch>; showActiveHighlight: boolean; }; type SelectMenuSectionProps = { activeHighlightId: string; activeIndex: number; itemVariants: ReturnType; listboxId: string; optionRefs: MutableRefObject>; section: SelectSection; sectionIndex: number; selectOption: (index: number, restoreFocus?: boolean) => void; setActiveIndex: Dispatch>; setShowActiveHighlight: Dispatch>; showActiveHighlight: boolean; value?: string; }; type SelectMenuContentProps = { activeIndex: number; closeMenu: (restoreFocus?: boolean) => void; itemVariants: ReturnType; listboxId: string; listboxRef: MutableRefObject; menuPanelRef: MutableRefObject; menuPosition: MenuPosition | null; options: SelectOption[]; optionRefs: MutableRefObject>; panelTransition: { duration: number; ease: "easeOut" | typeof SOFT_EASE; }; runTypeahead: (key: string) => void; sections: SelectSection[]; selectOption: (index: number, restoreFocus?: boolean) => void; setActiveIndex: Dispatch>; setShowActiveHighlight: Dispatch>; showActiveHighlight: boolean; triggerId: string; value?: string; }; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function isPrintableKey( event: Pick< KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "key" > ) { return ( !(event.altKey || event.ctrlKey || event.metaKey) && event.key.length === 1 ); } function getSelectSections(options: SelectOption[]) { const nextSections: SelectSection[] = []; options.forEach((option, index) => { const groupLabel = option.group?.trim(); const previousSection = nextSections.at(-1); if (groupLabel) { if (previousSection?.label === groupLabel) { previousSection.items.push({ index, option }); return; } nextSections.push({ items: [{ index, option }], key: `${groupLabel}-${nextSections.length}`, label: groupLabel, }); return; } nextSections.push({ items: [{ index, option }], key: `ungrouped-${index}`, }); }); return nextSections; } function normalizeTypeaheadValue(value: string) { return value .normalize("NFKD") .replace(/[\u0300-\u036f]/g, "") .toLowerCase() .replace(/\s+/g, " ") .trim(); } function findTypeaheadMatch( options: SelectOption[], query: string, startIndex: number ) { const normalizedQuery = normalizeTypeaheadValue(query); if (!normalizedQuery) { return -1; } for (let offset = 1; offset <= options.length; offset += 1) { const index = (startIndex + offset) % options.length; const candidate = normalizeTypeaheadValue(options[index]?.label ?? ""); if (candidate.startsWith(normalizedQuery)) { return index; } } return -1; } function getNextIndex( currentIndex: number, optionCount: number, direction: 1 | -1 ) { if (optionCount === 0) { return 0; } return (currentIndex + direction + optionCount) % optionCount; } function scrollOptionIntoView( container: HTMLDivElement | null, option: HTMLDivElement | null ) { if (!(container && option)) { return; } const containerRect = container.getBoundingClientRect(); const optionRect = option.getBoundingClientRect(); if (optionRect.top < containerRect.top) { container.scrollTop -= containerRect.top - optionRect.top; return; } if (optionRect.bottom > containerRect.bottom) { container.scrollTop += optionRect.bottom - containerRect.bottom; } } function getItemVariants() { return { exit: (index: number) => ({ opacity: 0, y: -2, transition: { delay: Math.min(index, 4) * 0.01, duration: 0.12, ease: EXIT_EASE, }, }), hidden: { opacity: 0, y: -4, }, visible: (index: number) => ({ opacity: 1, y: 0, transition: { delay: Math.min(index, 4) * 0.02, duration: 0.18, ease: SOFT_EASE, }, }), }; } function getMenuPosition({ optionCount, panel, triggerRect, viewportHeight, viewportWidth, }: { optionCount: number; panel: HTMLDivElement | null; triggerRect: DOMRect; viewportHeight: number; viewportWidth: number; }) { const width = triggerRect.width; const availableBelow = Math.max( viewportHeight - triggerRect.bottom - MENU_OFFSET - VIEWPORT_MARGIN, 0 ); const availableAbove = Math.max( triggerRect.top - MENU_OFFSET - VIEWPORT_MARGIN, 0 ); const measuredHeight = Math.max( panel?.scrollHeight ?? 0, panel?.getBoundingClientRect().height ?? 0, Math.min(optionCount * 52, MAX_MENU_HEIGHT) ); const preferredHeight = Math.min( measuredHeight || MAX_MENU_HEIGHT, MAX_MENU_HEIGHT ); const shouldPlaceAbove = availableBelow < preferredHeight && availableAbove > availableBelow; const maxHeight = Math.max( Math.min( MAX_MENU_HEIGHT, shouldPlaceAbove ? availableAbove : availableBelow ), 0 ); const left = clamp( triggerRect.left, VIEWPORT_MARGIN, Math.max(VIEWPORT_MARGIN, viewportWidth - width - VIEWPORT_MARGIN) ); const resolvedHeight = Math.min( preferredHeight, maxHeight || preferredHeight ); const top = shouldPlaceAbove ? Math.max(VIEWPORT_MARGIN, triggerRect.top - MENU_OFFSET - resolvedHeight) : triggerRect.bottom + MENU_OFFSET; const horizontalOrigin = left <= VIEWPORT_MARGIN + 0.5 ? "left" : left >= viewportWidth - width - VIEWPORT_MARGIN - 0.5 ? "right" : "left"; return { left, maxHeight, top, transformOrigin: `${horizontalOrigin} ${ shouldPlaceAbove ? "bottom" : "top" }`, width, }; } function handleSelectTriggerKeyDown({ closeMenu, event, open, openMenu, optionsLength, pendingTypeaheadRef, selectedIndex, }: { closeMenu: (restoreFocus?: boolean) => void; event: KeyboardEvent; open: boolean; openMenu: (nextActiveIndex?: number) => void; optionsLength: number; pendingTypeaheadRef: MutableRefObject; selectedIndex: number; }) { switch (event.key) { case "ArrowDown": event.preventDefault(); openMenu(selectedIndex >= 0 ? selectedIndex : 0); return; case "ArrowUp": event.preventDefault(); openMenu(selectedIndex >= 0 ? selectedIndex : optionsLength - 1); return; case "Home": event.preventDefault(); openMenu(0); return; case "End": event.preventDefault(); openMenu(optionsLength - 1); return; case "Enter": case " ": event.preventDefault(); if (open) { closeMenu(false); return; } openMenu(selectedIndex >= 0 ? selectedIndex : 0); return; default: if (!isPrintableKey(event)) { return; } event.preventDefault(); pendingTypeaheadRef.current = event.key; openMenu(selectedIndex >= 0 ? selectedIndex : 0); } } function handleSelectListboxKeyDown({ activeIndex, closeMenu, event, optionCount, runTypeahead, selectOption, setActiveIndex, }: { activeIndex: number; closeMenu: (restoreFocus?: boolean) => void; event: KeyboardEvent; optionCount: number; runTypeahead: (key: string) => void; selectOption: (index: number, restoreFocus?: boolean) => void; setActiveIndex: Dispatch>; }) { switch (event.key) { case "ArrowDown": event.preventDefault(); setActiveIndex((current) => getNextIndex(current, optionCount, 1)); return; case "ArrowUp": event.preventDefault(); setActiveIndex((current) => getNextIndex(current, optionCount, -1)); return; case "Home": event.preventDefault(); setActiveIndex(0); return; case "End": event.preventDefault(); setActiveIndex(Math.max(optionCount - 1, 0)); return; case "Enter": case " ": event.preventDefault(); selectOption(activeIndex); return; case "Escape": event.preventDefault(); closeMenu(true); return; case "Tab": closeMenu(false); return; default: if (!isPrintableKey(event)) { return; } event.preventDefault(); runTypeahead(event.key); } } function SelectOptionRow({ activeHighlightId, index, isActive, isSelected, itemVariants, listboxId, onSelect, option, setActiveIndex, setOptionRef, setShowActiveHighlight, showActiveHighlight, }: SelectOptionRowProps) { return ( onSelect(index)} onMouseDown={(event) => { event.preventDefault(); }} onMouseEnter={() => { setActiveIndex(index); setShowActiveHighlight(true); }} ref={(node) => { setOptionRef(index, node); }} role="option" title={option.label} transition={PRESS_SPRING} variants={itemVariants} whileTap={{ scale: 0.96 }} > {showActiveHighlight && isActive ? ( ) : null} {option.icon ? ( {option.icon} ) : null} {option.label} {isSelected ? ( ) : null} ); } function SelectMenuSection({ activeHighlightId, activeIndex, itemVariants, listboxId, optionRefs, section, sectionIndex, selectOption, setActiveIndex, setShowActiveHighlight, showActiveHighlight, value, }: SelectMenuSectionProps) { const groupLabelId = `${listboxId}-group-${sectionIndex}`; const sectionItems = section.items.map(({ index, option }) => ( { optionRefs.current[nextIndex] = node; }} setShowActiveHighlight={setShowActiveHighlight} showActiveHighlight={showActiveHighlight} /> )); if (!section.label) { return

{sectionItems}

; } return (

{section.label}

{sectionItems}

); } function SelectMenuContent({ activeIndex, closeMenu, itemVariants, listboxId, listboxRef, menuPanelRef, menuPosition, options, optionRefs, panelTransition, runTypeahead, sections, selectOption, setActiveIndex, setShowActiveHighlight, showActiveHighlight, triggerId, value, }: SelectMenuContentProps) { const panelStyle: CSSProperties | undefined = menuPosition ? { left: menuPosition.left, position: "fixed", top: menuPosition.top, transformOrigin: menuPosition.transformOrigin, width: menuPosition.width, } : undefined; return (

{ setShowActiveHighlight(true); handleSelectListboxKeyDown({ activeIndex, closeMenu, event, optionCount: options.length, runTypeahead, selectOption, setActiveIndex, }); }} ref={listboxRef} role="listbox" tabIndex={-1} > {options.length === 0 ? (

No options available.

) : ( sections.map((section, sectionIndex) => ( )) )}

); } export function Select({ options, value, onChange, placeholder = "Select an option…", className, }: SelectProps) { const generatedId = useId(); const [activeIndex, setActiveIndex] = useState(0); const [mounted, setMounted] = useState(false); const [menuPosition, setMenuPosition] = useState(null); const [open, setOpen] = useState(false); const [showActiveHighlight, setShowActiveHighlight] = useState(false); const triggerRef = useRef(null); const menuPanelRef = useRef(null); const listboxRef = useRef(null); const openInteractionRef = useRef<"keyboard" | "pointer">("pointer"); const optionRefs = useRef>([]); const pendingTypeaheadRef = useRef(null); const typeaheadRef = useRef(""); const typeaheadTimeoutRef = useRef(null); const listboxId = `${generatedId}-listbox`; const triggerId = `${generatedId}-trigger`; const selectedIndex = options.findIndex((option) => option.value === value); const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined; const itemVariants = useMemo(() => getItemVariants(), []); const buttonTransition = PRESS_SPRING; const panelTransition = { duration: 0.22, ease: SOFT_EASE }; const chevronTransition = { duration: 0.2, ease: SOFT_EASE }; const sections = useMemo(() => getSelectSections(options), [options]); const clearTypeahead = useCallback(() => { if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); typeaheadTimeoutRef.current = null; } typeaheadRef.current = ""; }, []); const focusTrigger = useCallback(() => { window.requestAnimationFrame(() => { triggerRef.current?.focus({ preventScroll: true }); }); }, []); const updateMenuPosition = useCallback(() => { const trigger = triggerRef.current; if (!(trigger && typeof window !== "undefined")) { return; } const nextPosition = getMenuPosition({ optionCount: options.length, panel: menuPanelRef.current, triggerRect: trigger.getBoundingClientRect(), viewportHeight: window.innerHeight, viewportWidth: window.innerWidth, }); setMenuPosition((previous) => { if ( previous && previous.left === nextPosition.left && previous.maxHeight === nextPosition.maxHeight && previous.top === nextPosition.top && previous.transformOrigin === nextPosition.transformOrigin && previous.width === nextPosition.width ) { return previous; } return nextPosition; }); }, [options.length]); const openMenu = useCallback( (nextActiveIndex = selectedIndex >= 0 ? selectedIndex : 0) => { setActiveIndex( clamp(nextActiveIndex, 0, Math.max(options.length - 1, 0)) ); setShowActiveHighlight(openInteractionRef.current === "keyboard"); setOpen(true); }, [options.length, selectedIndex] ); const closeMenu = useCallback( (restoreFocus = false) => { setOpen(false); setShowActiveHighlight(false); clearTypeahead(); pendingTypeaheadRef.current = null; if (restoreFocus) { focusTrigger(); } }, [clearTypeahead, focusTrigger] ); const selectOption = useCallback( (index: number, restoreFocus = true) => { const option = options[index]; if (!option) { return; } onChange?.(option.value); setActiveIndex(index); closeMenu(restoreFocus); }, [closeMenu, onChange, options] ); const runTypeahead = useCallback( (key: string) => { if (options.length === 0) { return; } const normalizedKey = normalizeTypeaheadValue(key); if (!normalizedKey) { return; } const bufferedQuery = `${typeaheadRef.current}${normalizedKey}`; const bufferedMatch = findTypeaheadMatch( options, bufferedQuery, activeIndex ); const singleKeyMatch = bufferedMatch === -1 ? findTypeaheadMatch(options, normalizedKey, activeIndex) : bufferedMatch; const nextIndex = bufferedMatch !== -1 ? bufferedMatch : singleKeyMatch; typeaheadRef.current = bufferedMatch !== -1 ? bufferedQuery : normalizedKey; if (typeaheadTimeoutRef.current !== null) { window.clearTimeout(typeaheadTimeoutRef.current); } typeaheadTimeoutRef.current = window.setTimeout(() => { typeaheadRef.current = ""; typeaheadTimeoutRef.current = null; }, TYPEAHEAD_RESET_MS); if (nextIndex >= 0) { setActiveIndex(nextIndex); setShowActiveHighlight(true); } }, [activeIndex, options] ); useEffect(() => { setMounted(true); }, []); useEffect(() => { return () => clearTypeahead(); }, [clearTypeahead]); useLayoutEffect(() => { if (!open) { return; } updateMenuPosition(); }, [open, updateMenuPosition]); useEffect(() => { if (!open) { return; } setActiveIndex((current) => { if (selectedIndex >= 0) { return selectedIndex; } return clamp(current, 0, Math.max(options.length - 1, 0)); }); }, [open, options.length, selectedIndex]); useEffect(() => { if (!open) { return; } const handleLayoutChange = () => updateMenuPosition(); window.addEventListener("resize", handleLayoutChange); window.addEventListener("scroll", handleLayoutChange, true); if (typeof ResizeObserver === "undefined") { return () => { window.removeEventListener("resize", handleLayoutChange); window.removeEventListener("scroll", handleLayoutChange, true); }; } const observer = new ResizeObserver(handleLayoutChange); const observedNodes = [triggerRef.current, menuPanelRef.current].filter( Boolean ); observedNodes.forEach((node) => { observer.observe(node as Element); }); return () => { observer.disconnect(); window.removeEventListener("resize", handleLayoutChange); window.removeEventListener("scroll", handleLayoutChange, true); }; }, [open, updateMenuPosition]); useEffect(() => { if (!open) { return; } if (openInteractionRef.current !== "keyboard") { return; } const focusFrame = window.requestAnimationFrame(() => { listboxRef.current?.focus({ preventScroll: true }); if (pendingTypeaheadRef.current) { runTypeahead(pendingTypeaheadRef.current); pendingTypeaheadRef.current = null; } }); return () => window.cancelAnimationFrame(focusFrame); }, [open, runTypeahead]); useEffect(() => { if (!open) { return; } scrollOptionIntoView( listboxRef.current, optionRefs.current[activeIndex] ?? null ); }, [activeIndex, open]); useEffect(() => { if (!open) { return; } function handlePointerDown(event: PointerEvent) { const target = event.target as Node; if (triggerRef.current?.contains(target)) { return; } if (menuPanelRef.current?.contains(target)) { return; } closeMenu(false); } document.addEventListener("pointerdown", handlePointerDown, true); return () => document.removeEventListener("pointerdown", handlePointerDown, true); }, [closeMenu, open]); return (

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

); } export { Select as select }; 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":"select.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]