52: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"] 53: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"] 54:T36d3,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const EASE = [0.23, 1, 0.32, 1] as const; const EXIT = [0.23, 1, 0.32, 1] as const; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const NUDGE = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const NONE = { duration: 0 } as const; const SLIDE = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const ROW_H = 32; const OPEN = { type: "spring", stiffness: 620, damping: 38, mass: 0.6 } as const; export type DropdownItem = { value: string; label: string; hint?: string; disabled?: boolean; }; export type UseDropdownOptions = { items: DropdownItem[]; value?: string; defaultValue?: string; onChange?: (value: string) => void; disabled?: boolean; typeaheadDelay?: number; }; export function useDropdown({ items, value, defaultValue, onChange, disabled = false, typeaheadDelay = 600, }: UseDropdownOptions) { const uid = useId(); const listId = `${uid}-list`; const itemId = useCallback((i: number) => `${uid}-opt-${i}`, [uid]); const [uncontrolled, setUncontrolled] = useState( defaultValue ?? null, ); const selectedValue = value !== undefined ? value : uncontrolled; const selectedIndex = items.findIndex((it) => it.value === selectedValue); const [open, setOpen] = useState(false); const [activeIndex, setActiveIndex] = useState(-1); const rootRef = useRef(null); const triggerRef = useRef(null); const listRef = useRef(null); const itemRefs = useRef<(HTMLLIElement | null)[]>([]); const viaKey = useRef(false); const buffer = useRef(""); const bufferTimer = useRef | null>(null); const emit = useRef(onChange); emit.current = onChange; const step = useCallback( (from: number, dir: 1 | -1) => { const n = items.length; if (n === 0) return -1; let i = from; for (let k = 0; k < n; k++) { i = (i + dir + n) % n; if (!items[i].disabled) return i; } return from; }, [items], ); const edge = useCallback( (dir: 1 | -1) => step(dir === 1 ? -1 : items.length, dir), [step, items.length], ); const openMenu = useCallback( (index?: number) => { if (disabled || items.length === 0) return; const usable = selectedIndex >= 0 && !items[selectedIndex].disabled; viaKey.current = true; setActiveIndex(index ?? (usable ? selectedIndex : edge(1))); setOpen(true); }, [disabled, items, selectedIndex, edge], ); const close = useCallback((restoreFocus = true) => { buffer.current = ""; setOpen(false); setActiveIndex(-1); if (restoreFocus) triggerRef.current?.focus(); }, []); const select = useCallback( (index: number) => { const item = items[index]; if (!item || item.disabled) return; if (value === undefined) setUncontrolled(item.value); emit.current?.(item.value); close(); }, [items, value, close], ); const typeahead = useCallback( (char: string) => { if (bufferTimer.current) clearTimeout(bufferTimer.current); buffer.current += char.toLowerCase(); bufferTimer.current = setTimeout(() => { buffer.current = ""; }, typeaheadDelay); const q = buffer.current; const n = items.length; const from = activeIndex < 0 ? 0 : activeIndex; const start = q.length > 1 ? from : from + 1; for (let k = 0; k < n; k++) { const i = (start + k) % n; const it = items[i]; if (!it.disabled && it.label.toLowerCase().startsWith(q)) { viaKey.current = true; setActiveIndex(i); return; } } }, [items, activeIndex, typeaheadDelay], ); useEffect(() => { if (open) listRef.current?.focus(); }, [open]); useEffect(() => { if (!open) return; const onDown = (e: PointerEvent) => { if (!rootRef.current?.contains(e.target as Node)) close(false); }; const onWindowBlur = () => close(false); document.addEventListener("pointerdown", onDown, true); window.addEventListener("blur", onWindowBlur); return () => { document.removeEventListener("pointerdown", onDown, true); window.removeEventListener("blur", onWindowBlur); }; }, [open, close]); useEffect(() => { if (!open || activeIndex < 0 || !viaKey.current) return; viaKey.current = false; itemRefs.current[activeIndex]?.scrollIntoView({ block: "nearest" }); }, [open, activeIndex]); useEffect( () => () => { if (bufferTimer.current) clearTimeout(bufferTimer.current); }, [], ); const triggerProps = { ref: triggerRef, type: "button" as const, disabled, "aria-haspopup": "listbox" as const, "aria-expanded": open, "aria-controls": open ? listId : undefined, onClick: () => (open ? close() : openMenu()), onKeyDown: (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") { e.preventDefault(); openMenu(); } else if (e.key === "ArrowUp") { e.preventDefault(); openMenu(edge(-1)); } }, }; const listProps = { ref: listRef, id: listId, role: "listbox" as const, tabIndex: -1, "aria-activedescendant": activeIndex >= 0 ? itemId(activeIndex) : undefined, onKeyDown: (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); const dir = e.key === "ArrowDown" ? 1 : -1; viaKey.current = true; setActiveIndex((i) => step(i, dir)); } else if (e.key === "Home" || e.key === "End") { e.preventDefault(); viaKey.current = true; setActiveIndex(edge(e.key === "Home" ? 1 : -1)); } else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); select(activeIndex); } else if (e.key === "Escape") { e.preventDefault(); close(); } else if (e.key === "Tab") { e.preventDefault(); close(); } else if ( e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey ) { e.preventDefault(); typeahead(e.key); } }, }; const getItemProps = useCallback( (index: number) => ({ id: itemId(index), role: "option" as const, "aria-selected": index === selectedIndex, "aria-disabled": items[index]?.disabled ? (true as const) : undefined, ref: (el: HTMLLIElement | null) => { itemRefs.current[index] = el; }, onPointerMove: () => { if (items[index]?.disabled) return; viaKey.current = false; setActiveIndex(index); }, onClick: () => select(index), }), [itemId, items, selectedIndex, select], ); return { open, openMenu, close, select, activeIndex, selectedIndex, selectedItem: selectedIndex >= 0 ? items[selectedIndex] : null, itemId, rootRef, triggerProps, listProps, getItemProps, }; } export type DropdownProps = { items: DropdownItem[]; value?: string; defaultValue?: string; onChange?: (value: string) => void; label?: string; placeholder?: string; disabled?: boolean; emptyLabel?: string; className?: string; }; export function Dropdown({ items, value, defaultValue, onChange, label = "Options", placeholder = "Select an option", disabled = false, emptyLabel = "Nothing to choose", className = "", }: DropdownProps) { const reduced = useReducedMotion(); const { open, activeIndex, selectedIndex, selectedItem, rootRef, triggerProps, listProps, getItemProps, } = useDropdown({ items, value, defaultValue, onChange, disabled }); const cell = reduced ? NONE : CELL; return (

{open && (

{items.map((item, i) => { const active = i === activeIndex && !item.disabled; const picked = i === selectedIndex; return (

{item.label} {item.hint ? ( {item.hint} ) : null}

); })} {items.length === 0 && (

{emptyLabel}

)}

); } 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/dropdown.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/dropdown.tsx"}],"className":"h-[70svh] min-h-80"}]]}]