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:T2b06,"use client"; import { useEffect, useRef, useState } from "react"; import { animate, motion, useInView, useMotionValue, useTransform, type AnimationPlaybackControls, type MotionValue, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; type Datum = { label: string; value: number }; const PLOT_H = 190; // The 6px rounded cap rides on top of a square body. Scaling one rounded // rect would squash its corners, so only the body scales. const CAP = 6; // Mount: a quick cascade reads as one gesture across the week. const STAGGER = 0.04; // No bounce: an overshooting bar briefly claims a value that isn't true. const GROW = { type: "spring", visualDuration: 0.45, bounce: 0 } as const; const EASE = "ease-[cubic-bezier(0.23,1,0.32,1)]"; export function BarChart({ data, max, ticks, unit, suffix, label, className, }: { data: Datum[]; max: number; ticks: number[]; /** Spoken after each value, e.g. "hours". */ unit: string; /** Shown after each value in the tooltip, e.g. "h". */ suffix: string; label: string; className?: string; }) { const plotRef = useRef(null); const barRefs = useRef<(HTMLDivElement | null)[]>([]); const inView = useInView(plotRef, { once: true }); const [active, setActive] = useState(null); // Roving tabindex: one stop for the whole chart, arrows move within it. const [focusIndex, setFocusIndex] = useState(0); const move = (i: number) => { const next = Math.min(Math.max(i, 0), data.length - 1); setFocusIndex(next); barRefs.current[next]?.focus(); }; return (

{/* Tick labels sit in their own gutter so gridlines can span the plot. */}

{ticks.map((t) => ( {t} ))}

{ if (e.pointerType !== "touch") setActive(null); }} > {ticks.map((t) => (

))} {data.map((d, i) => ( { barRefs.current[i] = el; }} datum={d} fraction={d.value / max} index={i} started={inView} unit={unit} suffix={suffix} active={active === i} dimmed={active !== null && active !== i} tabIndex={i === focusIndex ? 0 : -1} onActivate={() => setActive(i)} onFocus={() => { setFocusIndex(i); setActive(i); }} onBlur={(e) => { if (!plotRef.current?.contains(e.relatedTarget as Node)) setActive(null); }} onKeyDown={(e) => { const next = { ArrowLeft: i - 1, ArrowRight: i + 1, Home: 0, End: data.length - 1, }[e.key]; if (next === undefined) return; e.preventDefault(); move(next); }} /> ))}

{data.map((d, i) => ( {d.label} ))}

); } function Bar({ ref, datum, fraction, index, started, unit, suffix, active, dimmed, tabIndex, onActivate, onFocus, onBlur, onKeyDown, }: { ref: (el: HTMLDivElement | null) => void; datum: Datum; fraction: number; index: number; started: boolean; unit: string; suffix: string; active: boolean; dimmed: boolean; tabIndex: number; onActivate: () => void; onFocus: () => void; onBlur: (e: React.FocusEvent) => void; onKeyDown: (e: React.KeyboardEvent) => void; }) { const reduceMotion = useReducedMotion(); const height = useMotionValue(0); const grown = useRef(false); const controls = useRef(undefined); useEffect(() => { if (!started) return; const target = fraction * PLOT_H; if (reduceMotion) { height.jump(target); } else { // Only the first growth staggers; a dataset switch moves every bar // at once so the comparison lands together. animate() retargets from // the current value and velocity, so rapid toggles stay smooth. controls.current = animate(height, target, { ...GROW, delay: grown.current ? 0 : index * STAGGER, }); } grown.current = true; }, [started, fraction, index, reduceMotion, height]); useEffect(() => () => controls.current?.stop(), []); return (

{ if (e.pointerType !== "touch") onActivate(); }} onPointerDown={(e) => { if (e.pointerType === "touch") onActivate(); }} onFocus={onFocus} onBlur={onBlur} onKeyDown={onKeyDown} > {datum.value} {suffix}

); } function BarShape({ height, dimmed }: { height: MotionValue; dimmed: boolean }) { const body = useTransform(height, (h) => `scaleY(${Math.max(h - CAP, 0) / (PLOT_H - CAP)})`); // Overlaps the body by 1px so no hairline seam shows at fractional heights. const cap = useTransform(height, (h) => `translateY(${-Math.max(h - CAP - 1, 0)}px)`); // Keeps an empty bar from showing a stub before it grows. const capOpacity = useTransform(height, (h) => (h < 0.5 ? 0 : 1)); return (

); } function Tooltip({ height, visible, children, }: { height: MotionValue; visible: boolean; children: React.ReactNode; }) { // Rides 8px above the bar's top, following it while the bar animates. const transform = useTransform(height, (h) => `translate(-50%, ${-h - 8}px)`); return (

{children}

); } const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const DATASETS = { "This week": [6.5, 7.2, 5.1, 8.4, 6, 2.3, 1.2], "Last week": [5.2, 6.1, 7.4, 4.8, 5.5, 3.1, 0.8], }; type Week = keyof typeof DATASETS; const WEEKS = Object.keys(DATASETS) as Week[]; export default function BarChartDemo() { const [week, setWeek] = useState("This week"); const values = DATASETS[week]; const data = DAYS.map((label, i) => ({ label, value: values[i] })); const total = values.reduce((a, b) => a + b, 0); return (

Focus hours

{total.toFixed(1)} h

{/* One indicator slides between the options instead of two backgrounds fading, so the switch reads as a single motion. */} {WEEKS.map((w) => ( ))}

); } 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/bar-chart.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"}]]}]