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[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"] 61:T2757,"use client"; import { useEffect, useRef, useState } from "react"; import { animate, motion, useInView, useMotionValue, useSpring, useTransform, type MotionValue, } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type DonutSlice = { label: string; value: number; color: string }; const SIZE = 200; const STROKE = 28; // Leaves room inside the box for a pulled-out segment: 100 - 14 - 7. const R = SIZE / 2 - STROKE / 2 - 7; const C = 2 * Math.PI * R; // A 2px surface gap separates segments; no stroke is drawn around them. const GAP = 2; // Far enough to read as lifted, close enough to still sit in the ring. const PULL = 6; const EASE_OUT = [0.23, 1, 0.32, 1] as const; // No bounce: a total that overshoots briefly claims a number that isn't true. const COUNT = { visualDuration: 0.4, bounce: 0 }; const number = new Intl.NumberFormat("en-US"); const percent = new Intl.NumberFormat("en-US", { style: "percent" }); export function DonutChart({ data, label, totalLabel = "Total", className, }: { data: DonutSlice[]; /** Names the chart for screen readers, e.g. "Visits by source". */ label: string; totalLabel?: string; className?: string; }) { const reduceMotion = useReducedMotion(); const ringRef = useRef(null); const inView = useInView(ringRef, { once: true, amount: 0.5 }); const [hovered, setHovered] = useState(null); const [pinned, setPinned] = useState(null); const active = hovered ?? pinned; const total = data.reduce((sum, d) => sum + d.value, 0); const arcs = data.map((d, i) => { const start = (data.slice(0, i).reduce((sum, p) => sum + p.value, 0) / total) * C; const length = (d.value / total) * C; // Mid-angle in screen space (0 is 3 o'clock), since the ring starts at 12. return { start, length, mid: ((start + length / 2) / C) * Math.PI * 2 - Math.PI / 2 }; }); const progress = useMotionValue(0); const count = useSpring(0, COUNT); const shown = useTransform(count, (v) => number.format(Math.round(v))); useEffect(() => { if (!inView) return; if (reduceMotion) { progress.jump(1); return; } // A one-time entrance that traces the whole ring. It runs longer than // the 300ms UI budget because the sweep itself explains the parts // adding up to a whole; nothing waits on it. const controls = animate(progress, 1, { duration: 0.8, ease: EASE_OUT }); return () => controls.stop(); }, [inView, reduceMotion, progress]); const target = active === null ? total : data[active].value; useEffect(() => { if (!inView) return; if (reduceMotion) count.jump(target); else count.set(target); }, [inView, target, reduceMotion, count]); const toggle = (i: number) => setPinned((p) => (p === i ? null : i)); const centreLabel = active === null ? totalLabel : data[active].label; return (

{shown} {/* Remounts on change, so each new name fades in from a soft blur instead of snapping. */} {centreLabel}

{data.map((d) => ( ))}

{label}
Category	Value	Share
{d.label}	{number.format(d.value)}	{percent.format(d.value / total)}

); } function Segment({ color, start, length, mid, progress, active, dimmed, reduceMotion, onPointerEnter, onClick, }: { color: string; start: number; length: number; mid: number; progress: MotionValue; active: boolean; dimmed: boolean; reduceMotion: boolean; onPointerEnter: (e: React.PointerEvent) => void; onClick: () => void; }) { // Each segment draws its own share of one sweep, so the ring fills as a // single stroke going round rather than every piece growing at once. const dash = useTransform(progress, (p) => { const drawn = Math.min(Math.max(p * C - start, 0), Math.max(length - GAP, 0)); return `${drawn} ${C}`; }); const pull = active && !reduceMotion ? PULL : 0; const centre = SIZE / 2; return ( {/* A circle's stroke starts at 3 o'clock; turning it starts the ring at 12, where people read a pie from. */} ); } // Validated categorical slots 1 to 4 (adjacent CVD separation >= 8.4 in // both themes), each stepped for its theme. The tail folds into a neutral // "Other" rather than a fifth hue. const SOURCES: DonutSlice[] = [ { label: "Organic search", value: 4820, color: "light-dark(#2a78d6, #3987e5)" }, { label: "Direct", value: 3140, color: "light-dark(#eb6834, #d95926)" }, { label: "Referral", value: 1760, color: "light-dark(#1baf7a, #199e70)" }, { label: "Social", value: 1190, color: "light-dark(#eda100, #c98500)" }, { label: "Other", value: 640, color: "color-mix(in oklab, var(--foreground) 22%, transparent)" }, ]; export default function DonutChartDemo() { return (

Visits by source

Last 30 days

); } 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"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/donut-chart.tsx","content":"$61","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"}]]}]