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:T299e,"use client"; import { useCallback, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const MOVE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const EASE = [0.23, 1, 0.32, 1] as const; const LEAVE = { duration: 0.14, ease: [0.23, 1, 0.32, 1] } as const; const INSTANT = { duration: 0 } as const; export type FilterDefinition = { id: string; label: string; match: (item: T) => boolean; }; export type UseFilterGridOptions = { items: readonly T[]; filters: readonly FilterDefinition[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; }; export type UseFilterGridResult = { active: string; activeLabel: string; select: (id: string) => void; visible: T[]; counts: Record; total: number; }; export function useFilterGrid({ items, filters, value, defaultValue, onValueChange, }: UseFilterGridOptions): UseFilterGridResult { const fallback = filters[0]?.id ?? ""; const [internal, setInternal] = useState(() => defaultValue ?? fallback); const requested = value ?? internal; const current = filters.find((f) => f.id === requested) ?? filters[0]; const active = current?.id ?? fallback; const emit = useRef(onValueChange); emit.current = onValueChange; const counts = useMemo(() => { const next: Record = {}; for (const filter of filters) { let n = 0; for (const item of items) if (filter.match(item)) n += 1; next[filter.id] = n; } return next; }, [filters, items]); const visible = useMemo(() => { const filter = filters.find((f) => f.id === active); if (!filter) return [...items]; return items.filter((item) => filter.match(item)); }, [filters, items, active]); const select = useCallback( (id: string) => { if (value === undefined) setInternal(id); if (id !== active) emit.current?.(id); }, [value, active], ); return { active, activeLabel: current?.label ?? "", select, visible, counts, total: items.length, }; } export type FilterGridProps = { items: readonly T[]; filters: readonly FilterDefinition[]; getKey: (item: T) => string; renderItem: (item: T) => ReactNode; label: string; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; columns?: number; rowHeight?: number; maxRows?: number; gap?: number; emptyLabel?: string; formatFilterCount?: (label: string, count: number, total: number) => string; formatResultCount?: (label: string, count: number, total: number) => string; className?: string; }; export function FilterGrid({ items, filters, getKey, renderItem, label, value, defaultValue, onValueChange, columns = 3, rowHeight = 72, maxRows = 4, gap = 8, emptyLabel = "Nothing matches this filter", formatFilterCount = (name, count, itemCount) => `${name}, ${count} of ${itemCount}`, formatResultCount = (name, count, itemCount) => `${name}: ${count} of ${itemCount} shown`, className = "", }: FilterGridProps) { const uid = useId(); const gridId = `${uid}-grid`; const reduced = useReducedMotion(); const { active, activeLabel, select, visible, counts, total } = useFilterGrid({ items, filters, value, defaultValue, onValueChange, }); const gridRef = useRef(null); const chips = useRef<(HTMLButtonElement | null)[]>([]); const heldFocus = useRef(false); const cols = Math.max(1, Math.floor(columns)); const rows = Math.min(Math.max(1, Math.ceil(total / cols)), Math.max(1, maxRows)); const box = rows * rowHeight + (rows - 1) * gap; const index = Math.max( 0, filters.findIndex((f) => f.id === active), ); const choose = useCallback( (id: string) => { const grid = gridRef.current; heldFocus.current = !!grid && grid.contains(document.activeElement) && grid !== document.activeElement; select(id); }, [select], ); const settle = useCallback(() => { if (!heldFocus.current) return; heldFocus.current = false; const grid = gridRef.current; if (grid && !grid.contains(document.activeElement)) grid.focus(); }, []); const go = useCallback( (i: number) => { const next = filters[(i + filters.length) % filters.length]; if (!next) return; chips.current[(i + filters.length) % filters.length]?.focus(); choose(next.id); }, [filters, choose], ); const onKeyDown = (e: KeyboardEvent, i: number) => { if (e.key === "ArrowRight" || e.key === "ArrowDown") { e.preventDefault(); go(i + 1); } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") { e.preventDefault(); go(i - 1); } else if (e.key === "Home") { e.preventDefault(); go(0); } else if (e.key === "End") { e.preventDefault(); go(filters.length - 1); } }; const swap = reduced ? INSTANT : CELL; const step = reduced ? INSTANT : { layout: MOVE, duration: 0.2, ease: EASE }; const leave = reduced ? INSTANT : LEAVE; const capped = Math.ceil(total / cols) > Math.max(1, maxRows); return (

{filters.map((filter, i) => { const on = i === index; return ( ); })}

{visible.map((item) => ( {renderItem(item)} ))}

{visible.length === 0 && ( {emptyLabel} )}

{formatResultCount(activeLabel, visible.length, total)}

); } 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/filter-grid.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/filter-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]