5f: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 60:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 61:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 62:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T41d6,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"; import { motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type Person = { id: string; name: string; email: string; avatar?: string; }; const ICON_SWAP = { type: "spring", duration: 0.3, bounce: 0 } as const; // Every option row is h-12. const ROW = 48; const initials = (name: string) => name .split(" ") .map((part) => part[0]) .join("") .slice(0, 2); export function Combobox({ label, people, value, onChange, placeholder = "Search people", className, }: { label: string; people: Person[]; value: Person | null; onChange: (person: Person | null) => void; placeholder?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const id = useId(); const listId = `${id}-list`; const inputRef = useRef(null); // True once the highlight reflects intent (typing, arrows or the mouse), // so tabbing past a list opened by a click doesn't pick the first person. const engaged = useRef(false); const [query, setQuery] = useState(""); const [open, setOpen] = useState(false); const [active, setActive] = useState(0); // Only keyboard moves scroll the list; the mouse is already where it is. const scrollToActive = useRef(false); const needle = query.trim().toLowerCase(); const results = needle ? people.filter( (p) => p.name.toLowerCase().includes(needle) || p.email.toLowerCase().includes(needle), ) : people; const highlighted = open ? results[active] : undefined; // One highlight for the whole list, gliding from row to row, so arrowing // down reads as a single thing moving rather than rows blinking on and off. const pillRef = useRef(null); // Set whenever the list is rebuilt (opened or filtered): the highlight // lands in place instead of sliding in from wherever it last was. const pillJump = useRef(true); // Scroll smoothly only for moves within a list that is already showing. const scrollJump = useRef(true); const slotRef = useRef(null); // Where the chosen person's avatar was in the list, for the flight into // the field. const flight = useRef(null); const [flying, setFlying] = useState(false); useEffect(() => { if (!scrollToActive.current || !highlighted) return; const jump = scrollJump.current; scrollJump.current = false; scrollToActive.current = false; document .getElementById(`${id}-${highlighted.id}`) ?.scrollIntoView({ block: "nearest", behavior: jump || reduceMotion ? "instant" : "smooth", }); }, [highlighted, id, reduceMotion]); useLayoutEffect(() => { const pill = pillRef.current; if (!pill) return; const jump = pillJump.current || !!reduceMotion; pillJump.current = false; pill.style.transition = jump ? "none" : ""; // Rows are a fixed 48px, so the index is the offset. pill.style.transform = `translateY(${active * ROW}px)`; if (jump) { // Commits the jump before the transition comes back. void pill.offsetHeight; pill.style.transition = ""; } }, [active, open, query, reduceMotion]); // The avatar leaves its row and lands in the field's leading slot, scaling // from 32px down to 24px on the way: the pick is carried, not swapped. useLayoutEffect(() => { const from = flight.current; const el = slotRef.current; flight.current = null; if (!from || !el || !value) return; const to = el.getBoundingClientRect(); const animation = el.animate( [ { transform: `translate(${from.left - to.left}px, ${from.top - to.top}px) scale(${from.width / to.width})`, }, { transform: "none" }, ], // 280ms on the iOS drawer curve: long enough to follow a 100px trip, // settled before the next keystroke is likely. { duration: 280, easing: "cubic-bezier(0.32, 0.72, 0, 1)" }, ); animation.onfinish = animation.oncancel = () => setFlying(false); return () => animation.cancel(); }, [value]); const openList = (text = query) => { engaged.current = text.length > 0; // Starts on the chosen person when there is one and nothing typed. const start = text || !value ? 0 : Math.max(people.indexOf(value), 0); setActive(start); scrollToActive.current = true; scrollJump.current = true; pillJump.current = true; setOpen(true); }; const choose = (person: Person) => { if (!reduceMotion && person.id !== value?.id) { const from = document .getElementById(`${id}-${person.id}`) ?.querySelector("[data-avatar]") ?.getBoundingClientRect(); if (from) { flight.current = from; setFlying(true); } } onChange(person); setQuery(""); setOpen(false); }; const clear = () => { onChange(null); setQuery(""); inputRef.current?.focus(); }; const move = (delta: number) => { if (!open) return openList(); if (results.length === 0) return; engaged.current = true; scrollToActive.current = true; setActive((i) => (i + delta + results.length) % results.length); }; const onKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case "ArrowDown": e.preventDefault(); move(1); break; case "ArrowUp": e.preventDefault(); move(-1); break; case "Home": case "End": if (!open || results.length === 0) return; e.preventDefault(); scrollToActive.current = true; setActive(e.key === "Home" ? 0 : results.length - 1); break; case "Enter": if (!highlighted) return; e.preventDefault(); choose(highlighted); break; case "Tab": // Accepts and lets focus move on as usual. if (highlighted && engaged.current) choose(highlighted); else setOpen(false); break; case "Escape": e.preventDefault(); // First press closes, the next one clears. if (open) setOpen(false); else if (query || value) clear(); break; } }; const text = value && !query ? value.name : query; const hasText = text.length > 0; return (

{label}

{/* Leading slot swaps the search icon for the chosen avatar. */} {/* A flying avatar is already visible, so it skips the pop in. z-30 carries it over the closing list (z-20) on the way up. */} {value && } { const next = e.target.value; // Editing the chosen name means searching again. if (value) onChange(null); setQuery(next); openList(next); }} onClick={() => { if (!open) openList(); }} onKeyDown={onKeyDown} onBlur={() => setOpen(false)} className="h-full min-w-0 flex-1 bg-transparent pr-11 text-[15px] text-foreground outline-hidden placeholder:text-muted-foreground" />

{/* Always mounted so it can fade out. Grows from its top edge, the side touching the input. Enters in 150ms, leaves in 100ms. */}

{results.length === 0 && (

No one matches “{query.trim()}”

)}

{open ? results.length === 0 ? "No results" : `${results.length} result${results.length === 1 ? "" : "s"}` : ""}

); } function Highlight({ text, needle }: { text: string; needle: string }) { const at = needle ? text.toLowerCase().indexOf(needle) : -1; if (at < 0) return {text}; // Dims the rest rather than bolding the match, so the name never // reflows as letters change weight. return ( {text.slice(0, at)} {text.slice(at, at + needle.length)} {text.slice(at + needle.length)} ); } function Avatar({ person, size = "md" }: { person: Person; size?: "sm" | "md" }) { const box = size === "sm" ? "size-6" : "size-8"; return person.avatar ? ( // eslint-disable-next-line @next/next/no-img-element -- tiny local SVGs gain nothing from next/image.

) : ( {initials(person.name)} ); } function SwapSlot({ visible, reduceMotion, instant = false, children, }: { visible: boolean; reduceMotion: boolean | null; instant?: boolean; children: React.ReactNode; }) { const hidden = reduceMotion ? { opacity: 0 } : { scale: 0.25, opacity: 0, filter: "blur(4px)" }; return ( {children} ); } const STROKE = { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", } as const; const PEOPLE: Person[] = [ { id: "ava", name: "Ava Moreno", email: "ava@acme.dev", avatar: "/avatars/ava.svg" }, { id: "ben", name: "Ben Okafor", email: "ben@acme.dev", avatar: "/avatars/ben.svg" }, { id: "cara", name: "Cara Lindqvist", email: "cara@acme.dev", avatar: "/avatars/cara.svg" }, { id: "dev", name: "Dev Raman", email: "dev@acme.dev", avatar: "/avatars/dev.svg" }, { id: "fay", name: "Fay Nakamura", email: "fay@acme.dev", avatar: "/avatars/fay.svg" }, { id: "hugo", name: "Hugo Brandt", email: "hugo@acme.dev" }, { id: "isla", name: "Isla Carvalho", email: "isla@acme.dev" }, { id: "jonah", name: "Jonah Weiss", email: "jonah@acme.dev" }, ]; export default function ComboboxDemo() { const [assignee, setAssignee] = useState(null); return ; } 5e:["$","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/combobox.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]