50: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"] 51: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"] 52:T41f5,// Hairline UI · steps-chart · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * STEPS CHART: a week of steps against a daily goal * * arrive the first time it's on screen the days grow up out * of the baseline one after another and the total * rolls up from zero * week ‹ and › step through the weeks: the label morphs, * each day eases to its new height in a wave that * runs the way you went, days that made the goal * turn your primary colour, the totals roll * goal a line at the goal in your primary colour; days at or over it are * filled, a day still in progress is drawn as an * outline with its fill so far * hover a hairline column follows the pointer and the * readout at its top slides along, the day morphing * and the steps rolling * * The plot is one tab stop: arrow keys move between days and the * readout is announced. Every day is also in a table for screen * readers. * ───────────────────────────────────────────────────────── */ export interface StepsDay { /** The same in every week (e.g. "mon"), so a day keeps its bar from week to week. */ key: string; /** Under the bar, e.g. "Mon". */ label: string; value: number; /** In the readout, e.g. "Thursday 2 October". Defaults to label. */ title?: string; /** A day still under way: drawn as an outline with its fill so far. */ today?: boolean; } export interface StepsWeek { id: string; /** Between the arrows, e.g. "This week" or "22 to 28 Sept". */ label: string; days: StepsDay[]; } export interface StepsChartProps extends Omit, "onChange"> { /** Oldest first; it opens on the last. */ weeks: StepsWeek[]; /** Steps a day. */ goal?: number; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; title?: string; locales?: string | string[]; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const PLOT = 176; const HEADROOM = 30; const LABELS = 26; const GUTTER = 40; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const COMPACT: Intl.NumberFormatOptions = { notation: "compact", maximumFractionDigits: 1 }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore( subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false, ); function niceMax(value: number) { if (value <= 0) return 1; const step = 10 ** Math.floor(Math.log10(value)); for (const m of [1, 1.2, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10]) if (m * step >= value) return m * step; return 10 * step; } function Arrow({ dir, disabled, onClick }: { dir: -1 | 1; disabled: boolean; onClick: () => void }) { return ( ); } export function StepsChart({ weeks, goal = 10_000, value, defaultValue, onValueChange, title = "Steps", locales, className = "", ...props }: StepsChartProps) { const reduced = useReducedMotion(); const id = React.useId(); const [own, setOwn] = React.useState(defaultValue ?? weeks[weeks.length - 1]?.id); const weekId = value ?? own; const index = Math.max( 0, weeks.findIndex((w) => w.id === weekId), ); const week = weeks[index]; const days = week?.days ?? []; // The scale holds still across weeks (the busiest week sets it), so heights compare from week to week. const max = niceMax(Math.max(goal * 1.2, ...weeks.flatMap((w) => w.days.map((d) => d.value)))); const total = days.reduce((sum, d) => sum + d.value, 0); // The average leaves out days still to come and a day still under way. const counted = days.filter((d) => d.value > 0 && (!d.today || d.value >= goal)); const average = counted.length ? Math.round(counted.reduce((sum, d) => sum + d.value, 0) / counted.length) : 0; const met = days.filter((d) => d.value >= goal).length; const slot = days.length ? 100 / days.length : 100; const scale = (n: number) => (n / max) * (plotH - HEADROOM); const [visible, setVisible] = React.useState(false); const [plotH, setPlotH] = React.useState(PLOT); const [active, setActive] = React.useState(null); const [keyboard, setKeyboard] = React.useState(false); const [dir, setDir] = React.useState(1); const [shownIndex, setShownIndex] = React.useState(index); const rootRef = React.useRef(null); const barsRef = React.useRef(null); const plotRef = React.useRef(null); // The wave runs the way you went: back in time from the right, forward from the left. if (shownIndex !== index) { setDir(index > shownIndex ? 1 : -1); setShownIndex(index); } // The plot's height is set by the card's width in CSS; read it so the drawing fits. React.useLayoutEffect(() => { const el = plotRef.current; if (!el) return; const measure = () => setPlotH((h) => { const next = el.offsetHeight - LABELS; return next > 0 && next !== h ? next : h; }); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, []); React.useEffect(() => { const el = rootRef.current; if (!el) return; const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } }, { rootMargin: "0px 0px -10% 0px" }, ); observer.observe(el); return () => observer.disconnect(); }, []); const go = (d: -1 | 1) => { const next = weeks[index + d]; if (!next) return; if (value === undefined) setOwn(next.id); onValueChange?.(next.id); }; // Days still to come can't be read: the readout stops at today. const lastDay = Math.max(0, days.reduce((last, d, i) => (d.value > 0 || d.today ? i : last), -1)); const pointAt = (clientX: number) => { const r = barsRef.current?.getBoundingClientRect(); if (!r || !days.length) return null; return Math.min(lastDay, Math.max(0, Math.floor(((clientX - r.left) / r.width) * days.length))); }; const onKeyDown = (e: React.KeyboardEvent) => { if (!days.length) return; const from = active ?? Math.max(0, days.findIndex((d) => d.today) === -1 ? days.length - 1 : days.findIndex((d) => d.today)); const moves: Record = { ArrowLeft: from - 1, ArrowRight: from + 1, Home: 0, End: lastDay }; if (e.key === "Escape") return setActive(null); if (!(e.key in moves)) return; e.preventDefault(); setKeyboard(true); setActive(Math.min(lastDay, Math.max(0, active === null ? from : moves[e.key]))); }; const fmt = (n: number) => new Intl.NumberFormat(locales).format(n); const shown = active !== null ? days[active] : null; const goalTop = HEADROOM + (plotH - HEADROOM) - scale(goal); return (

{/* The title and the week share a row; the figures sit under both. */}

{title}

go(-1)} /> 0 ? "up" : "down"}>{week?.label ?? ""} go(1)} />

steps

a day Goal met on of {days.length} days

keyboard && (setActive(null), setKeyboard(false))} onPointerMove={(e) => { setKeyboard(false); setActive(pointAt(e.clientX)); }} onPointerDown={(e) => setActive(pointAt(e.clientX))} onPointerLeave={(e) => e.pointerType === "mouse" && setActive(null)} className={`relative mt-4 touch-pan-y @md:mt-5 select-none rounded-lg ${FOCUS}`} style={{ height: `calc(var(--plot) + ${LABELS}px)` }} > {/* The scale: the top and the baseline, and the goal as a line in your primary colour. */} {[1, 0].map((f) => (

))}

{/* The hovered day: a hairline lane from the readout down to the baseline. */}

{days.map((d, i) => { const made = d.value >= goal; const hovered = active === i; const order = dir > 0 ? i : days.length - 1 - i; const tone = d.today ? made ? "bg-primary" : "bg-primary/15 shadow-[inset_0_0_0_1px_color-mix(in_oklab,var(--primary)_55%,transparent)]" : made ? hovered || active === null ? "bg-primary" : "bg-primary/70" : hovered ? "bg-foreground/25" : active !== null ? "bg-foreground/[0.07]" : "bg-foreground/[0.11]"; return (

0 ? Math.max(2, scale(d.value)) : 0, transition: reduced ? "none" : `height 620ms ${EASE} ${order * 34}ms, background-color 320ms ${EASE}, box-shadow 320ms ${EASE}`, }} /> {d.label}

); })} {/* The readout rides the top of the lane: the day morphs, the steps roll. */}

{keyboard && shown ? `${shown.title ?? shown.label}: ${fmt(shown.value)} steps${shown.value >= goal ? ", goal met" : ""}` : ""}

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

{title}, {week?.label}: {fmt(total)} steps, goal {fmt(goal)} a day, met on {met} of {days.length} days
{d.title ?? d.label}	{fmt(d.value)} {d.today ? " so far" : ""}

); } 4f:["$","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":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/steps-chart.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]