60: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"] 61: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"] 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"],"ScrollArea"] 63: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"] 64: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"] 65:T2a9c,"use client"; import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import { animate } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type Time = { hour: number; minute: number; period: "AM" | "PM" }; const ROW = 40; // Five and a half rows: two full rows either side of the selection plus the // foreshortened edge of a third, which is what sells the curve. const HEIGHT = 220; const PAD = (HEIGHT - ROW) / 2; // Each row sits this far around the drum, so the fifth row away reaches 90deg // and turns edge-on right as it leaves the column. const STEP = 18; // The drum radius whose arc between neighbours is exactly one row, so rows // near the centre keep their spacing and only the far ones bunch up. const RADIUS = ROW / ((STEP * Math.PI) / 180); // Apple's projection constant, a touch below scroll's 0.998 so a flick // travels a handful of rows rather than the whole column. const DECELERATION = 0.995; // Critically damped: a wheel that overshoots would flash the wrong value. const GLIDE = { type: "spring", visualDuration: 0.35, bounce: 0 } as const; // Past this many px a mouse press becomes a drag rather than a click. const DRAG_SLOP = 4; const HOURS = Array.from({ length: 12 }, (_, i) => String(i + 1)); const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0")); const PERIODS = ["AM", "PM"]; const clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), hi); export function WheelPicker({ value, onChange, className, }: { value: Time; onChange: (value: Time) => void; className?: string; }) { const minute = String(value.minute).padStart(2, "0"); return (

{/* Behind the columns, which are transparent, so the middle row reads as sitting on the band. */}

onChange({ ...value, hour: i + 1 })} /> onChange({ ...value, minute: i })} /> onChange({ ...value, period: PERIODS[i] as Time["period"] }) } />

{value.hour}:{minute} {value.period}

); } type Glide = ReturnType; const Column = memo(function Column({ label, options, index, onIndexChange, }: { label: string; options: string[]; index: number; onIndexChange: (index: number) => void; }) { const reduceMotion = useReducedMotion(); const ref = useRef(null); // The row under the band right now, written per frame without rendering. const current = useRef(index); // Where a glide in flight will land, so repeated key presses stack up. const goal = useRef(index); const glide = useRef(null); const report = useRef(onIndexChange); const drag = useRef<{ y: number; top: number; active: boolean; samples: { y: number; t: number }[]; } | null>(null); const suppressClick = useRef(false); const last = options.length - 1; useEffect(() => { report.current = onIndexChange; }); // Rows are painted straight to the DOM from scroll position, so wheel, // trackpad and touch momentum stay fully native and React never renders // per frame. Only rows near the band are touched each frame. useLayoutEffect(() => { const el = ref.current; if (!el) return; const rows = el.children as HTMLCollectionOf; el.scrollTop = current.current * ROW; let lo = 0; let hi = rows.length - 1; let frame = 0; const paint = () => { frame = 0; const pos = el.scrollTop / ROW; const nextLo = Math.max(0, Math.floor(pos) - 6); const nextHi = Math.min(rows.length - 1, Math.ceil(pos) + 6); for (let i = Math.min(lo, nextLo); i <= Math.max(hi, nextHi); i++) { const style = rows[i].style; const offset = i - pos; const angle = offset * STEP; if (Math.abs(angle) >= 90) { style.opacity = "0"; style.transform = ""; continue; } const rad = (angle * Math.PI) / 180; // Moves each row from its flat scroll position onto the cylinder. const dy = RADIUS * Math.sin(rad) - offset * ROW; const dz = RADIUS * (Math.cos(rad) - 1); style.transform = `translate3d(0, ${dy}px, ${dz}px) rotateX(${-angle}deg)`; style.opacity = String(Math.max(1 - Math.abs(offset) * 0.2, 0)); } lo = nextLo; hi = nextHi; const centred = clamp(Math.round(pos), 0, rows.length - 1); if (centred !== current.current) { current.current = centred; report.current(centred); } }; paint(); const onScroll = () => { if (!frame) frame = requestAnimationFrame(paint); }; el.addEventListener("scroll", onScroll, { passive: true }); return () => { el.removeEventListener("scroll", onScroll); cancelAnimationFrame(frame); glide.current?.stop(); }; }, [options]); const restoreSnap = () => { if (ref.current) ref.current.style.scrollSnapType = ""; }; const interrupt = () => { if (!glide.current) return; glide.current.stop(); glide.current = null; restoreSnap(); }; // Snapping is switched off while we drive scrollTop ourselves, otherwise // the browser would re-snap every frame of the spring. const glideTo = (target: number, velocity = 0) => { const el = ref.current; if (!el) return; glide.current?.stop(); const row = clamp(target, 0, last); goal.current = row; if (reduceMotion) { glide.current = null; restoreSnap(); el.scrollTop = row * ROW; return; } el.style.scrollSnapType = "none"; glide.current = animate(el.scrollTop, row * ROW, { ...GLIDE, velocity, onUpdate: (v) => { el.scrollTop = v; }, onComplete: () => { glide.current = null; restoreSnap(); }, }); }; // A parent changing the value from outside glides there too. useEffect(() => { if (index !== current.current && index !== goal.current) glideTo(index); }); const rows = useMemo( () => options.map((option, i) => (

{option}

)), [options], ); return (

{ // Touch and pen already scroll natively; only a mouse needs help. if (e.pointerType !== "mouse" || e.button !== 0) return; interrupt(); suppressClick.current = false; drag.current = { y: e.clientY, top: e.currentTarget.scrollTop, active: false, samples: [{ y: e.clientY, t: e.timeStamp }], }; }} onPointerMove={(e) => { const d = drag.current; if (!d) return; const dy = e.clientY - d.y; if (!d.active) { if (Math.abs(dy) < DRAG_SLOP) return; d.active = true; suppressClick.current = true; e.currentTarget.setPointerCapture(e.pointerId); e.currentTarget.style.scrollSnapType = "none"; } e.currentTarget.scrollTop = d.top - dy; d.samples.push({ y: e.clientY, t: e.timeStamp }); // Only the last 100ms say how fast the hand is moving now. while (d.samples.length > 2 && e.timeStamp - d.samples[0].t > 100) d.samples.shift(); }} onPointerUp={(e) => { const d = drag.current; drag.current = null; if (!d?.active) return; const first = d.samples[0]; const end = d.samples[d.samples.length - 1]; const dt = (end.t - first.t) / 1000; // Dragging down scrolls up, so the scroll velocity is inverted. const velocity = dt > 0 ? -(end.y - first.y) / dt : 0; const projected = e.currentTarget.scrollTop + ((velocity / 1000) * DECELERATION) / (1 - DECELERATION); glideTo(Math.round(projected / ROW), velocity); }} onPointerCancel={() => { drag.current = null; restoreSnap(); }} onClick={(e) => { if (suppressClick.current) { suppressClick.current = false; return; } const row = (e.target as HTMLElement).closest("[data-index]"); if (row) glideTo(Number(row.dataset.index)); }} onKeyDown={(e) => { const from = glide.current ? goal.current : current.current; const next = { ArrowUp: from - 1, ArrowDown: from + 1, PageUp: from - 5, PageDown: from + 5, Home: 0, End: last, }[e.key]; if (next === undefined) return; e.preventDefault(); glideTo(next); }} > {rows}

); }); export default function WheelPickerDemo() { const [time, setTime] = useState({ hour: 7, minute: 30, period: "AM" }); return ; } 5f:["$","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L61",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":["$","$L62",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)"}]]}]]}],["$","$L63",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":["$","$L62",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)"}]]}]]}],["$","$L63",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":["$","$L62",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)"}]]}]]}],["$","$L63",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L64",null,{"files":[{"path":"components/wheel-picker.tsx","content":"$65","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"}]]}]