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:T49b7,"use client"; import { spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react"; import { LayoutGroup, motion, useReducedMotion } from "motion/react"; import { Select as SelectPrimitive } from "radix-ui"; import { type ComponentProps, createContext, isValidElement, type KeyboardEvent, type ReactNode, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; /* * Select, built on Radix Select (a select-only combobox: arrow keys, Home/End, typeahead, Escape). * - Opening and closing are CSS keyframes from the trigger's side. * - The highlight is a pill that glides between options. Radix moves focus on hover and on arrow keys, so * the pill follows both. * - Long lists scroll natively, capped at 18rem. Soft fades at the ends show there's more; they replace * Radix's scroll arrows (owner, 2026-10-14). * - `searchable` adds a search field above the list (owner, 2026-10-14): * - Typing filters the options. Hidden options stay mounted, so the trigger keeps showing the selected value. * - The keyboard stays in the field: arrow keys move the pill through the matches, and Enter picks the * highlighted one. * - Typing after hovering an option goes back to the field. * - The popup becomes a dialog holding the field and a listbox, with aria-activedescendant on the field. */ /** The plain text of an option's content, for matching the search */ function textOf(node: ReactNode): string { if (node == null || typeof node === "boolean") return ""; if (typeof node === "string" || typeof node === "number") return String(node); if (Array.isArray(node)) return node.map(textOf).join(""); if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children); return ""; } function Select(props: ComponentProps) { return ; } function SelectGroup({ className, ...props }: ComponentProps) { return ( ); } function SelectValue(props: ComponentProps) { return ; } const triggerSizes = { sm: "h-(--size-control-sm) rounded-md px-2.5", md: "h-(--size-control-md) px-3", } as const; function SelectTrigger({ className, size = "md", children, ...props }: ComponentProps & { size?: keyof typeof triggerSizes }) { return ( {children} ); } /** Shared by the options of one opening: where the pill sits, and the search. It lives inside the content, * so every opening starts fresh. */ const ListContext = createContext<{ active: string | null; setActive: (value: string | null | ((current: string | null) => string | null)) => void; reduceMotion: boolean; searchable: boolean; /** The search, trimmed and lower-cased; empty without a search field or before typing */ query: string; } | null>(null); /** The soft edge shown where the list can scroll further (it replaces Radix's scroll arrows) */ const fade = "pointer-events-none absolute inset-x-0 z-10 h-6 from-popover to-transparent transition-opacity duration-(--duration-fast)"; type SearchOptions = { searchable: boolean; searchPlaceholder: string; emptyMessage: ReactNode | ((search: string) => ReactNode); }; function SelectList({ children, searchable, searchPlaceholder, emptyMessage, }: SearchOptions & { children: ReactNode }) { const [active, setActive] = useState(null); const [activeId, setActiveId] = useState(); const [search, setSearch] = useState(""); const [empty, setEmpty] = useState(false); const [edges, setEdges] = useState({ top: false, bottom: false }); const viewport = useRef(null); const field = useRef(null); const groupId = useId(); const listId = useId(); const reduceMotion = useReducedMotion() ?? false; const query = searchable ? search.trim().toLowerCase() : ""; /** The options that can be picked right now: shown and enabled, in order */ const options = useCallback( () => Array.from(viewport.current?.querySelectorAll("[data-slot=select-item]") ?? []).filter( (option) => !option.hidden && !option.hasAttribute("data-disabled"), ), [], ); // The fades at the ends show there's more to scroll to. The list's end is its last shown child: // scrollHeight would also count the highlight while it glides, and leave a fade on after it stops. const updateEdges = useCallback(() => { const node = viewport.current; if (!node) return; const shown = Array.from(node.children).filter( (child): child is HTMLElement => child instanceof HTMLElement && child.offsetParent !== null, ); const last = shown[shown.length - 1]; const end = last ? last.offsetTop + last.offsetHeight : 0; const top = node.scrollTop > 1; const bottom = node.scrollTop + node.clientHeight < end - 1; setEdges((current) => (current.top === top && current.bottom === bottom ? current : { top, bottom })); }, []); useLayoutEffect(() => { const node = viewport.current; if (!node) return; updateEdges(); const observer = new ResizeObserver(updateEdges); observer.observe(node); return () => observer.disconnect(); }, [updateEdges]); // Opening, the selected option sits in the middle of the list rather than at its edge under a fade. // Radix scrolls it just into view when it first takes focus; centre it on the next frame. useEffect(() => { const node = viewport.current; const content = node?.closest("[data-slot=select-content]"); if (!node || !content) return; const centre = () => requestAnimationFrame(() => { const selected = node.querySelector("[data-slot=select-item][data-state=checked]"); if (selected && !selected.hidden) node.scrollTop = selected.offsetTop - (node.clientHeight - selected.offsetHeight) / 2; updateEdges(); }); content.addEventListener("focusin", centre, { once: true }); return () => content.removeEventListener("focusin", centre); }, [updateEdges]); // Each search starts at the top, with the first match highlighted for Enter useLayoutEffect(() => { if (!searchable) return; const matches = options(); setEmpty(matches.length === 0); if (query) { if (viewport.current) viewport.current.scrollTop = 0; setActive(matches[0]?.dataset.value ?? null); } updateEdges(); }, [query, searchable, options, updateEdges]); // The field points screen readers at the highlighted option useLayoutEffect(() => { setActiveId(options().find((option) => option.dataset.value === active)?.id); }, [active, options]); // Keep the keyboard in the field. Radix first focuses the selected option (or the list), and focuses the // list again when the pointer leaves an option. Typing while an option has focus (after hovering) goes to // the field too, instead of Radix's typeahead. useEffect(() => { const input = field.current; const content = input?.closest("[data-slot=select-content]"); if (!searchable || !input || !content) return; let first = true; const onFocusIn = (event: FocusEvent) => { if (event.target === input) return; if (first || event.target === content) { first = false; input.focus({ preventScroll: true }); } }; const onKeyDown = (event: globalThis.KeyboardEvent) => { if (event.target === input || event.ctrlKey || event.metaKey || event.altKey) return; if (event.key.length === 1 || event.key === "Backspace") { event.stopPropagation(); input.focus({ preventScroll: true }); } }; content.addEventListener("focusin", onFocusIn); content.addEventListener("keydown", onKeyDown, true); return () => { content.removeEventListener("focusin", onFocusIn); content.removeEventListener("keydown", onKeyDown, true); }; }, [searchable]); function onFieldKeyDown(event: KeyboardEvent) { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); event.stopPropagation(); const matches = options(); if (matches.length === 0) return; const index = matches.findIndex((option) => option.dataset.value === active); const next = index < 0 ? 0 : event.key === "ArrowDown" ? Math.min(index + 1, matches.length - 1) : Math.max(index - 1, 0); const option = matches[next]; setActive(option?.dataset.value ?? null); option?.scrollIntoView({ block: "nearest" }); } else if (event.key === "Enter") { event.preventDefault(); event.stopPropagation(); const matches = options(); const option = matches.find((match) => match.dataset.value === active) ?? matches[0]; // Radix picks an option when the option itself receives Enter option?.dispatchEvent(new globalThis.KeyboardEvent("keydown", { key: "Enter", bubbles: true })); } else if (event.key !== "Escape" && event.key !== "Tab") { // Typing, Space, Home and End stay in the field rather than driving Radix's typeahead and list keys event.stopPropagation(); } } return ( {searchable ? (

setSearch(event.target.value)} onKeyDown={onFieldKeyDown} onFocus={() => { // Highlight something Enter can pick: what's already highlighted, else the selected option or the first const matches = options(); setActive((current) => current && matches.some((option) => option.dataset.value === current) ? current : ((matches.find((option) => option.dataset.state === "checked") ?? matches[0])?.dataset .value ?? null), ); }} autoComplete="off" spellCheck={false} className="h-(--size-control-md) w-full min-w-0 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground" /> {/* The top fade hangs just below the field, over the list */}

) : (

)} {/* layoutScroll keeps the pill in place while the list scrolls */} {children} {/* The bottom fade lies over the popup's bottom edge, outside the list, so it never adds scroll height */}

{searchable && empty ? (

{typeof emptyMessage === "function" ? emptyMessage(search.trim()) : emptyMessage}

) : null} ); } export type SelectContentProps = ComponentProps & { /** Adds a search field above the options, for long lists */ searchable?: boolean; /** The search field's placeholder and accessible name */ searchPlaceholder?: string; /** Shown when nothing matches; a function receives the search */ emptyMessage?: ReactNode | ((search: string) => ReactNode); }; function SelectContent({ className, children, position = "popper", sideOffset = 4, searchable = false, searchPlaceholder = "Search…", emptyMessage = (search: string) => `No results for “${search}”`, ...props }: SelectContentProps) { return ( {children} ); } function SelectLabel({ className, ...props }: ComponentProps) { return ( ); } function SelectItem({ className, children, value, textValue, id, onFocus, onBlur, ...props }: ComponentProps) { const list = useContext(ListContext); const fallbackId = useId(); const active = list?.active === value; // Hidden rather than removed when it doesn't match, so the trigger keeps the selected option's text const hidden = !!list?.query && !(textValue ?? textOf(children)).toLowerCase().includes(list.query); return ( ); } function SelectSeparator({ className, ...props }: ComponentProps) { const list = useContext(ListContext); return ( ); } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, }; 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","lucide-react@^1.52.0",{"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@^1.52.0"}]]}]}],["$","li","motion@^14.0.0",{"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@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"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@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/select.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]