@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/bar-chart/bar-chart.js

@@ -0,0 +1,327 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, cancelFrame, frame, motion, useInView, useMotionValue, usePresence, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./bar-chart.module.css";
+const { spring, duration, ease, blur, stagger } = motionTokens;
+/** Motion drops inherited velocity on time-defined springs, so values that retarget mid-flight run the same springs written as stiffness and damping. */
+const physical = ({ visualDuration, bounce }, restDelta = .01) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta, restSpeed: restDelta * 2 }; };
+const settle = physical(spring.smooth);
+const grow = physical(spring.morph);
+const glide = physical(spring.snappy);
+/** The zoom runs in fractions of the plot, so it rests far below a pixel. */
+const zoom = physical(spring.smooth, .00001);
+const collapse = physical({ visualDuration: duration.standard, bounce: 0 });
+const fadeFast = { duration: duration.instant, ease: [...ease.standard] };
+/** Starts animations on the next frame, so the render that caused them never swallows a spring's first frames. Returns a cleanup. */
+function soon(start) {
+    let controls = null;
+    const run = () => { controls = start(); };
+    frame.update(run);
+    return () => { cancelFrame(run); controls?.stop(); };
+}
+/** Room above the top gridline, the share of each slot a bar fills, its widest size, and the radius of its data end. */
+const TOP = 12, FILL = .58, MAX_BAR = 28, RADIUS = 4;
+const grouped = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** Clean gridlines: the smallest step of 1, 2, 3, or 5 that covers the data in four rows or fewer, so shared steps survive a range change. */
+function scaleFor(max) {
+    const safe = Math.max(max, 1);
+    const magnitude = 10 ** Math.floor(Math.log10(safe / 4));
+    for (const factor of [1, 2, 3, 5, 10]) {
+        const step = factor * magnitude, rows = Math.ceil(safe / step);
+        if (rows <= 4)
+            return { top: rows * step, ticks: Array.from({ length: rows + 1 }, (_, row) => row * step) };
+    }
+    return { top: safe, ticks: [0, safe] };
+}
+/** A column that grows from a square baseline to a softly rounded data end. */
+function barPath(x, w, h, base) {
+    if (w <= 0 || h <= .01)
+        return `M${x.toFixed(2)} ${base}H${(x + Math.max(w, 0)).toFixed(2)}Z`;
+    const r = Math.min(RADIUS, w / 2, h), top = base - h, f = (value) => value.toFixed(2);
+    return `M${f(x)} ${base}V${f(top + r)}A${f(r)} ${f(r)} 0 0 1 ${f(x + r)} ${f(top)}H${f(x + w - r)}A${f(r)} ${f(r)} 0 0 1 ${f(x + w)} ${f(top + r)}V${base}Z`;
+}
+/** Slots count back from the latest bar, so the newest day stays pinned right while a longer range zooms out to the left. */
+function usePlace(place, reduced) {
+    const value = useMotionValue(place);
+    useEffect(() => {
+        if (value.get() === place)
+            return;
+        if (reduced) {
+            value.jump(place);
+            return;
+        }
+        return soon(() => animate(value, place, settle));
+    }, [place, reduced, value]);
+    return value;
+}
+const centerOf = ({ width, unit }, place) => width.get() - (place + .5) * width.get() * unit.get();
+function Bar({ id, place, value, delay, shown, active, frame, scale, height, reduced }) {
+    const [isPresent, safeToRemove] = usePresence();
+    const amount = useMotionValue(0);
+    const slot = usePlace(place, reduced);
+    const [firstDelay] = useState(delay);
+    const grown = useRef(false);
+    const remove = useRef(safeToRemove);
+    useEffect(() => { remove.current = safeToRemove; }, [safeToRemove]);
+    // A bar grows once it is seen, each a beat after its neighbour; later values settle without a delay.
+    useEffect(() => {
+        if (!isPresent)
+            return;
+        if (reduced) {
+            amount.jump(value);
+            grown.current = true;
+            return;
+        }
+        if (!shown)
+            return;
+        const first = !grown.current;
+        grown.current = true;
+        return soon(() => animate(amount, value, first ? { ...grow, delay: firstDelay } : settle));
+    }, [amount, firstDelay, isPresent, reduced, shown, value]);
+    // A leaving bar sinks into the baseline, faster than a bar grows, while the zoom carries it out of the plot.
+    useEffect(() => {
+        if (isPresent)
+            return;
+        if (reduced) {
+            remove.current?.();
+            return;
+        }
+        return soon(() => animate(amount, 0, { ...collapse, onComplete: () => remove.current?.() }));
+    }, [amount, isPresent, reduced]);
+    const d = useTransform(() => {
+        const w = frame.width.get() * frame.unit.get(), size = Math.min(w * FILL, MAX_BAR), center = centerOf(frame, slot.get());
+        return barPath(center - size / 2, size, (amount.get() / scale.get()) * (height - TOP), height);
+    });
+    return _jsx(motion.path, { className: styles.bar, "data-key": id, "data-active": active || undefined, d: d });
+}
+/** A value on the axis: its gridline and label ride the scale, so a taller range slides them down while new rows fade in above. */
+function useRowY(value, scale, height) {
+    return useTransform(() => Math.round(height - (value / scale.get()) * (height - TOP)) + .5);
+}
+function Gridline({ value, scale, height }) {
+    const y = useRowY(value, scale, height);
+    if (value === 0)
+        return null;
+    return _jsx(motion.line, { className: styles.grid, x1: 0, x2: "100%", y1: y, y2: y, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: fadeFast }, transition: { duration: duration.standard, ease: [...ease.standard] } });
+}
+function TickLabel({ value, scale, height, avoid, format }) {
+    const y = useRowY(value, scale, height);
+    // A tick label makes way where the average label sits beside it.
+    const opacity = useTransform(() => avoid ? clamp((Math.abs(y.get() - avoid.get()) - 10) / 6, 0, 1) : 1);
+    return _jsx(motion.span, { className: styles.tick, style: { y }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: fadeFast }, transition: { duration: duration.standard, ease: [...ease.standard] }, children: _jsx(motion.span, { className: styles.tickText, style: { opacity }, children: format(value) }) });
+}
+function AxisLabel({ text, size, shift, place, frame, reduced }) {
+    const slot = usePlace(place, reduced);
+    // Centred under its bar and carried by the zoom. A label at either end keeps the nudge that holds it inside the settled plot.
+    const x = useTransform(() => centerOf(frame, slot.get()) - size / 2 + shift);
+    return _jsx(motion.span, { className: styles.axisLabel, style: { x }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: fadeFast }, transition: { duration: duration.standard, ease: [...ease.standard] }, children: text });
+}
+/** Axis labels that fit once the range has settled: every label, else every second, third, and so on, counted back from the latest so the newest date always shows and spacing stays even. */
+function fittingLabels(data, width, sizes) {
+    const fitting = new Map();
+    if (!width)
+        return fitting;
+    const count = Math.max(1, data.length);
+    const labels = data.flatMap((item, index) => {
+        const size = item.axisLabel ? sizes[item.axisLabel] : undefined;
+        if (size === undefined)
+            return [];
+        const natural = width - (data.length - 1 - index + .5) * (width / count) - size / 2;
+        return [{ key: item.key, size, natural, left: clamp(natural, 0, Math.max(0, width - size)) }];
+    }).reverse();
+    for (let stride = 1; stride <= labels.length; stride++) {
+        const picked = labels.filter((_, rank) => rank % stride === 0);
+        if (stride === labels.length || picked.every((label, rank) => rank === 0 || label.left + label.size + 10 <= picked[rank - 1].left)) {
+            picked.forEach(label => fitting.set(label.key, label.left - label.natural));
+            break;
+        }
+    }
+    return fitting;
+}
+/** Changed text rises from a soft blur in the direction it moved, and leaves a little faster than it arrives. */
+const rise = {
+    hidden: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, filter: `blur(${blur.soft}px)` }),
+    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: [...ease.enter] } },
+    gone: (direction) => ({ opacity: 0, y: `${-.3 * direction}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: [...ease.standard] } }),
+};
+const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.fast } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: duration.instant } } };
+function Swap({ text, direction, reduced }) {
+    return _jsx("span", { className: styles.swap, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.swapText, custom: direction, variants: reduced ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", children: text }, text) }) });
+}
+/** A number rolls digit by digit, keyed by place from the right, so unchanged digits hold still. Its width springs to fit, so the unit beside it glides instead of jumping. */
+function Roll({ text, direction, reduced }) {
+    const sizer = useRef(null);
+    const width = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = sizer.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let measured = null;
+        // Only a new value springs; a late web font or a resize jumps straight to fit.
+        const observer = new ResizeObserver(() => {
+            const next = node.offsetWidth;
+            if (measured !== null && measured !== node.textContent && !reduced)
+                animate(width, next, grow);
+            else
+                width.jump(next);
+            measured = node.textContent;
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [reduced, width]);
+    const chars = [...text];
+    const variants = reduced ? fade : rise;
+    return _jsxs(motion.span, { className: styles.roll, style: { width }, children: [_jsx("span", { ref: sizer, className: styles.sizer, "aria-hidden": "true", children: text }), _jsx("span", { className: styles.digits, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, anchorX: "right", children: chars.map((char, index) => _jsx(motion.span, { className: styles.digit, custom: direction, variants: variants, initial: "hidden", animate: "shown", exit: "gone", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, anchorX: "right", children: _jsx(motion.span, { className: styles.digit, custom: direction, variants: variants, initial: "hidden", animate: "shown", exit: "gone", children: char }, char) }) }, `p${chars.length - index}`)) }) })] });
+}
+const subscribeNothing = () => () => { };
+/** Reduced motion is only known in the browser, so the first client render matches the server before it takes effect. */
+function useReducedMotionSafe() {
+    const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+export function BarChart({ data, label, period, unit = "", averageLabel = "Daily average", valueLabel = "Total", categoryLabel = "Day", showAverage = true, height = 176, formatValue = value => grouped.format(value) }) {
+    const reduced = useReducedMotionSafe();
+    const figure = useRef(null);
+    const plot = useRef(null);
+    const inView = useInView(figure, { once: true, amount: .35 });
+    const titleId = useId();
+    const count = Math.max(data.length, 1), last = data.length - 1;
+    const average = data.length ? data.reduce((sum, item) => sum + item.value, 0) / data.length : 0;
+    const peak = data.reduce((max, item) => Math.max(max, item.value), 0);
+    const { top, ticks } = useMemo(() => scaleFor(peak), [peak]);
+    const signature = data.map(item => item.key).join("|");
+    const suffix = unit ? ` ${unit}` : "";
+    // Bars that join an existing chart grow outward from the ones that stayed; the first reveal runs left to right.
+    const [known, setKnown] = useState(() => ({ signature, keys: new Set(data.map(item => item.key)), fresh: new Map(), changes: 0 }));
+    const [active, setActive] = useState(null);
+    if (known.signature !== signature) {
+        const incoming = data.map((item, index) => ({ key: item.key, place: last - index })).filter(item => !known.keys.has(item.key)).sort((a, b) => a.place - b.place);
+        const step = Math.min(stagger.item, .32 / Math.max(1, incoming.length));
+        setKnown({ signature, keys: new Set(data.map(item => item.key)), fresh: new Map(incoming.map((item, rank) => [item.key, rank * step])), changes: known.changes + 1 });
+        setActive(null);
+    }
+    const revealStep = Math.min(stagger.item, .36 / count);
+    const index = active === null ? null : Math.min(active, last);
+    const scrubbing = index !== null && last >= 0;
+    const shownValue = scrubbing ? data[index].value : average;
+    // Headline copy moves the way the data did: a larger value rises from below, a later day arrives from below too.
+    const [trend, setTrend] = useState({ value: shownValue, index, valueWay: 1, indexWay: 1 });
+    if (trend.value !== shownValue || trend.index !== index)
+        setTrend({ value: shownValue, index, valueWay: shownValue === trend.value ? trend.valueWay : shownValue > trend.value ? 1 : -1, indexWay: index === null || trend.index === null ? 1 : Math.sign(index - trend.index) || 1 });
+    const width = useMotionValue(0);
+    const unitShare = useMotionValue(1 / count);
+    const scale = useMotionValue(top);
+    const mean = useMotionValue(0);
+    const cursor = useMotionValue(0);
+    const frame = useMemo(() => ({ width, unit: unitShare }), [width, unitShare]);
+    // The chart draws in its own pixels; the width is read before paint and followed on resize. Axis labels wait for it, then thin out where they would collide.
+    const [plotWidth, setPlotWidth] = useState(0);
+    const [labelSizes, setLabelSizes] = useState({});
+    const measure = useRef(null);
+    const labelTexts = [...new Set(data.map(item => item.axisLabel).filter((text) => !!text))].join("\n");
+    useLayoutEffect(() => {
+        const node = plot.current, ruler = measure.current;
+        if (!node || !ruler)
+            return;
+        const read = () => {
+            width.set(node.clientWidth);
+            setPlotWidth(node.clientWidth);
+            const sizes = {};
+            ruler.querySelectorAll("[data-text]").forEach(item => { sizes[item.dataset.text ?? ""] = item.offsetWidth; });
+            setLabelSizes(current => Object.keys(sizes).every(text => current[text] === sizes[text]) ? current : sizes);
+        };
+        read();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(read);
+        observer.observe(node);
+        observer.observe(ruler);
+        return () => observer.disconnect();
+    }, [labelTexts, width]);
+    const shownLabels = useMemo(() => fittingLabels(data, plotWidth, labelSizes), [data, plotWidth, labelSizes]);
+    // A new range zooms the time axis around the latest bar, rescales the gridlines, and moves the average, all on springs that can be retargeted mid-flight.
+    useEffect(() => {
+        if (reduced) {
+            unitShare.jump(1 / count);
+            scale.jump(top);
+            return;
+        }
+        return soon(() => { const controls = [animate(unitShare, 1 / count, zoom), animate(scale, top, settle)]; return { stop: () => controls.forEach(control => control.stop()) }; });
+    }, [count, reduced, scale, top, unitShare]);
+    // The average rises with the first bars, then springs to each new range.
+    const meanStarted = useRef(false);
+    useEffect(() => {
+        if (reduced) {
+            mean.jump(average);
+            return;
+        }
+        if (!inView)
+            return;
+        const first = !meanStarted.current;
+        meanStarted.current = true;
+        return soon(() => animate(mean, average, first ? { ...settle, delay: .12 } : settle));
+    }, [average, inView, mean, reduced]);
+    // The cursor appears on the first scrubbed bar and glides between the ones after it.
+    const wasScrubbing = useRef(false);
+    useEffect(() => {
+        if (index === null) {
+            wasScrubbing.current = false;
+            return;
+        }
+        const place = last - index;
+        if (reduced || !wasScrubbing.current)
+            cursor.jump(place);
+        wasScrubbing.current = true;
+        if (reduced)
+            return;
+        const controls = animate(cursor, place, glide);
+        return () => controls.stop();
+    }, [cursor, index, last, reduced]);
+    const cursorX = useTransform(() => Math.round(centerOf(frame, cursor.get())) + .5);
+    const meanY = useTransform(() => Math.round(height - (mean.get() / scale.get()) * (height - TOP)) + .5);
+    const meanText = useTransform(() => `Avg ${formatValue(Math.round(mean.get()))}`);
+    const pointAt = (clientX) => {
+        const rect = plot.current?.getBoundingClientRect();
+        if (!rect?.width)
+            return last;
+        const place = Math.floor(((rect.right - clientX) / rect.width) * count);
+        return clamp(last - place, 0, last);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Escape" && scrubbing) {
+            event.preventDefault();
+            setActive(null);
+            return;
+        }
+        const from = index ?? last + 1, page = Math.min(7, count);
+        const next = { ArrowLeft: from - 1, ArrowDown: from - 1, ArrowRight: index === null ? last : from + 1, ArrowUp: index === null ? last : from + 1, PageDown: from - page, PageUp: from + page, Home: 0, End: last }[event.key];
+        if (next === undefined || last < 0)
+            return;
+        event.preventDefault();
+        setActive(clamp(next, 0, last));
+    };
+    const onPointerDown = (event) => {
+        if (event.pointerType !== "mouse")
+            event.currentTarget.setPointerCapture?.(event.pointerId);
+        setActive(pointAt(event.clientX));
+    };
+    const onPointerMove = (event) => { if (event.pointerType === "mouse" || event.buttons)
+        setActive(pointAt(event.clientX)); };
+    const release = (event) => { if (event.pointerType !== "mouse")
+        setActive(null); };
+    const scrubbed = scrubbing ? data[index] : null;
+    const reading = scrubbed ?? data[last];
+    const valueText = reading ? `${reading.label}: ${formatValue(reading.value)}${suffix}` : "No data";
+    const highest = data.reduce((best, item) => !best || item.value > best.value ? item : best, null);
+    const lowest = data.reduce((best, item) => !best || item.value < best.value ? item : best, null);
+    const summary = `${label}, ${period}. ${averageLabel} ${formatValue(Math.round(average))}${suffix}.${highest ? ` Highest ${highest.label}, ${formatValue(highest.value)}${suffix}.` : ""}${lowest && lowest !== highest ? ` Lowest ${lowest.label}, ${formatValue(lowest.value)}${suffix}.` : ""}`;
+    const shown = inView || reduced;
+    const avoid = showAverage ? meanY : null;
+    return _jsxs("figure", { ref: figure, className: styles.figure, "aria-labelledby": titleId, children: [_jsxs("figcaption", { id: titleId, className: styles.srOnly, children: [label, ", ", period] }), _jsxs("div", { className: styles.header, "aria-hidden": "true", children: [_jsx("span", { className: styles.kind, children: _jsx(Swap, { text: scrubbing ? valueLabel : averageLabel, direction: 1, reduced: reduced }) }), _jsxs("span", { className: styles.value, children: [_jsx(Roll, { text: formatValue(scrubbing ? data[index].value : Math.round(average)), direction: trend.valueWay, reduced: reduced }), unit && _jsx("span", { className: styles.unit, children: unit })] }), _jsx("span", { className: styles.when, children: _jsx(Swap, { text: scrubbed ? scrubbed.label : period, direction: scrubbing ? trend.indexWay : 1, reduced: reduced }) })] }), _jsxs("div", { className: styles.chart, "data-scrubbing": scrubbing || undefined, children: [_jsx("div", { ref: plot, className: styles.plot, style: { height }, children: _jsxs("svg", { className: styles.svg, width: "100%", height: height, role: "img", "aria-label": summary, children: [_jsx(AnimatePresence, { initial: false, children: ticks.map(value => _jsx(Gridline, { value: value, scale: scale, height: height }, value)) }), _jsx(motion.line, { className: styles.cursor, x1: cursorX, x2: cursorX, y1: TOP, y2: height, initial: false, animate: { opacity: scrubbing ? 1 : 0 }, transition: reduced ? { duration: 0 } : fadeFast }), _jsx(AnimatePresence, { initial: false, children: data.map((item, at) => _jsx(Bar, { id: item.key, place: last - at, value: item.value, delay: known.fresh.get(item.key) ?? at * revealStep, shown: shown, active: index === at, frame: frame, scale: scale, height: height, reduced: reduced }, item.key)) }), _jsx("line", { className: styles.baseline, x1: 0, x2: "100%", y1: height - .5, y2: height - .5 }), showAverage && _jsx(motion.line, { className: styles.mean, x1: 0, x2: "100%", y1: meanY, y2: meanY, initial: false, animate: { opacity: shown ? 1 : 0 }, transition: reduced ? { duration: 0 } : { duration: duration.standard, delay: .12 } })] }) }), _jsxs("div", { className: styles.gutter, "aria-hidden": "true", children: [_jsx(AnimatePresence, { initial: false, children: ticks.map(value => _jsx(TickLabel, { value: value, scale: scale, height: height, avoid: avoid, format: formatValue }, value)) }), showAverage && _jsx(motion.span, { className: styles.meanLabel, style: { y: meanY }, initial: false, animate: { opacity: shown ? 1 : 0 }, transition: reduced ? { duration: 0 } : { duration: duration.standard, delay: .12 }, children: _jsx(motion.span, { className: styles.tickText, children: meanText }) })] }), _jsxs("div", { className: styles.axis, "aria-hidden": "true", children: [_jsx(AnimatePresence, { initial: false, children: data.map((item, at) => item.axisLabel && shownLabels.has(item.key) ? _jsx(AxisLabel, { text: item.axisLabel, size: labelSizes[item.axisLabel] ?? 0, shift: shownLabels.get(item.key) ?? 0, place: last - at, frame: frame, reduced: reduced }, `${item.key}:${item.axisLabel}`) : null) }), _jsx("span", { ref: measure, className: styles.measure, children: labelTexts.split("\n").filter(Boolean).map(text => _jsx("span", { "data-text": text, children: text }, text)) })] }), _jsx("div", { className: styles.scrubber, role: "slider", tabIndex: 0, "aria-label": `${label}, explore by ${categoryLabel.toLowerCase()}`, "aria-orientation": "horizontal", "aria-valuemin": 1, "aria-valuemax": Math.max(1, data.length), "aria-valuenow": (index ?? last) + 1, "aria-valuetext": valueText, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: release, onPointerCancel: () => setActive(null), onPointerLeave: event => { if (event.pointerType === "mouse")
+                            setActive(null); }, onKeyDown: onKeyDown, onBlur: () => setActive(null), onFocus: event => { if (event.currentTarget.matches(":focus-visible") && last >= 0)
+                            setActive(current => current ?? last); } })] }), _jsxs("table", { className: styles.srOnly, children: [_jsxs("caption", { children: [label, ", ", period] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: categoryLabel }), _jsx("th", { scope: "col", children: label })] }) }), _jsx("tbody", { children: data.map(item => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.label }), _jsxs("td", { children: [formatValue(item.value), suffix] })] }, item.key)) })] }), _jsx("p", { className: styles.srOnly, "aria-live": "polite", "aria-atomic": "true", children: known.changes ? `${period}. ${averageLabel} ${formatValue(Math.round(average))}${suffix}.` : "" })] });
+}
+export default BarChart;

package/components/bar-chart/bar-chart.module.css

@@ -0,0 +1,49 @@
+.figure { display: grid; min-width: 0; gap: var(--space-comfort); margin: 0; color: var(--foreground); }
+
+/* The headline is the readout: the average at rest, the scrubbed bar while exploring. Each line keeps its height, so swaps never move the plot. */
+.header { display: grid; min-width: 0; gap: 2px; }
+.kind, .when { display: block; min-height: calc(1em * var(--leading-body)); font-size: var(--text-sm); line-height: var(--leading-body); }
+.kind { color: var(--text-secondary); }
+.when { color: var(--text-muted); }
+.value { display: flex; min-width: 0; align-items: baseline; gap: 6px; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: var(--leading-display); font-variant-numeric: tabular-nums; }
+.unit { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; letter-spacing: var(--tracking-body); }
+.swap { position: relative; display: block; min-width: 0; }
+.swapText { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* A rolling number: outgoing digits are popped out of flow and anchored right, and the clip hides a digit still rising into a new place. */
+.roll { position: relative; display: inline-flex; justify-content: flex-end; overflow-x: clip; overflow-y: visible; white-space: pre; }
+.digits { position: relative; display: inline-flex; flex: none; }
+.digit { position: relative; display: inline-block; white-space: pre; }
+.sizer { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }
+
+/* Plot, right-hand value axis, and the date axis beneath. */
+.chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: auto 26px; min-width: 0; }
+.plot { position: relative; grid-area: 1 / 1; min-width: 0; }
+.svg { display: block; overflow: hidden; }
+.grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
+.baseline { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
+.cursor { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
+.mean { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 3; shape-rendering: crispEdges; }
+/* The series is drawn in a soft step of the accent; the scrubbed bar takes the full accent while its neighbours step back. */
+.bar { fill: color-mix(in oklab, var(--accent) 62%, var(--surface)); transition: fill var(--duration-fast) var(--ease-standard); }
+.chart[data-scrubbing] .bar { fill: color-mix(in oklab, var(--accent) 24%, var(--surface)); }
+/* On a dark surface a lighter mix keeps the hue clear instead of turning muddy. */
+:global([data-theme="dark"]) .bar { fill: color-mix(in oklab, var(--accent) 76%, var(--surface)); }
+:global([data-theme="dark"]) .chart[data-scrubbing] .bar { fill: color-mix(in oklab, var(--accent) 34%, var(--surface)); }
+:global([data-theme="dark"]) .chart .bar[data-active] { fill: var(--accent); }
+.chart .bar[data-active] { fill: var(--accent); }
+
+.gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
+.tick, .meanLabel { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
+.tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
+.meanLabel .tickText { color: var(--foreground); font-weight: 500; }
+
+.axis { position: relative; grid-area: 2 / 1; min-width: 0; overflow: hidden; }
+.axisLabel { position: absolute; top: 8px; left: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
+
+/* The scrubber covers the plot and its axes. Horizontal drags scrub, vertical swipes still scroll the page. */
+.scrubber { position: absolute; inset: 0; border-radius: calc(var(--radius-control) / 2); outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }
+.measure { position: absolute; top: 0; left: 0; display: flex; visibility: hidden; pointer-events: none; }
+.measure > span { flex: none; font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }

package/components/billing-toggle/billing-toggle.d.ts

@@ -0,0 +1,35 @@
+export interface BillingToggleOption {
+    value: string;
+    label: string;
+    /** Short savings note, e.g. "Save 20%". */
+    badge?: string;
+    /** Badge text once this option is selected, e.g. "You save $48". Defaults to `badge`. */
+    activeBadge?: string;
+}
+export interface BillingToggleProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    options?: BillingToggleOption[];
+    /** Accessible name of the group. */
+    label?: string;
+    size?: "md" | "lg";
+    className?: string;
+}
+/**
+ * A billing period switch. One thumb glides between the options on a critically damped spring, and
+ * the savings note on the cheaper period tints and rewrites itself in place once it is chosen.
+ */
+export declare function BillingToggle({ value, onValueChange, options, label, size, className }: BillingToggleProps): import("react").JSX.Element;
+export interface BillingPriceProps {
+    amount: number;
+    currency?: string;
+    /** Period after the price, e.g. "per month". Swaps in place when it changes. */
+    period?: string;
+    /** Previous price, shown struck through when it is higher than `amount`. */
+    was?: number;
+    decimals?: number;
+    className?: string;
+}
+/** A price that rolls to its new amount. The old price and the period ease their width, so nothing beside them jumps. */
+export declare function BillingPrice({ amount, currency, period, was, decimals, className }: BillingPriceProps): import("react").JSX.Element;
+export default BillingToggle;

package/components/billing-toggle/billing-toggle.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { AnimatedCounter } from "../animated-counter/animated-counter.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./billing-toggle.module.css";
+const { duration, ease, blur } = motionTokens;
+/** Critically damped: the thumb glides and lands without overshoot. */
+const glide = { type: "spring", visualDuration: 0.34, bounce: 0 };
+const DEFAULT_OPTIONS = [
+    { value: "monthly", label: "Monthly" },
+    { value: "yearly", label: "Yearly", badge: "Save 20%" },
+];
+const swap = {
+    hidden: { opacity: 0, y: "0.45em", filter: `blur(${blur.subtle}px)` },
+    shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: [...ease.enter] } },
+    gone: { opacity: 0, y: "-0.45em", filter: `blur(${blur.subtle}px)`, transition: { duration: duration.fast, ease: [...ease.standard] } },
+};
+const still = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: duration.fast } }, gone: { opacity: 0, transition: { duration: 0 } } };
+/**
+ * Text that swaps in place. Every candidate sits in the same grid cell, so the box always has the
+ * width of the longest one and nothing around it moves when the text changes.
+ */
+function StableSwap({ text, candidates, reduced, className }) {
+    return (_jsxs("span", { className: [styles.swap, className].filter(Boolean).join(" "), children: [[...new Set(candidates)].map(candidate => _jsx("span", { className: styles.swapSizer, "aria-hidden": "true", children: candidate }, candidate)), _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.swapText, variants: reduced ? still : swap, initial: "hidden", animate: "shown", exit: "gone", children: text }, text) })] }));
+}
+/**
+ * A billing period switch. One thumb glides between the options on a critically damped spring, and
+ * the savings note on the cheaper period tints and rewrites itself in place once it is chosen.
+ */
+export function BillingToggle({ value, onValueChange, options = DEFAULT_OPTIONS, label = "Billing period", size = "md", className }) {
+    const reduced = !!useReducedMotion();
+    const rootRef = useRef(null);
+    const refs = useRef([]);
+    const [thumb, setThumb] = useState(null);
+    const selectedIndex = Math.max(0, options.findIndex(option => option.value === value));
+    const measure = useCallback(() => {
+        const node = refs.current[selectedIndex];
+        if (!node)
+            return;
+        setThumb(current => current && current.x === node.offsetLeft && current.width === node.offsetWidth ? current : { x: node.offsetLeft, width: node.offsetWidth });
+    }, [selectedIndex]);
+    useLayoutEffect(() => {
+        measure();
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [measure]);
+    const onKeyDown = (event, index) => {
+        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+        const target = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : step ? (index + step + options.length) % options.length : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        onValueChange(options[target].value);
+        refs.current[target]?.focus();
+    };
+    return (_jsxs("div", { ref: rootRef, role: "radiogroup", "aria-label": label, className: [styles.root, className].filter(Boolean).join(" "), "data-size": size, children: [thumb ? (_jsx(motion.span, { className: styles.thumb, "aria-hidden": "true", initial: false, animate: { x: thumb.x, width: thumb.width }, transition: reduced ? { duration: 0 } : glide })) : null, options.map((option, index) => {
+                const selected = index === selectedIndex;
+                const badgeText = selected ? option.activeBadge ?? option.badge : option.badge;
+                const candidates = [option.badge, option.activeBadge].filter((text) => !!text);
+                return (_jsxs("button", { ref: node => { refs.current[index] = node; }, type: "button", role: "radio", "aria-checked": selected, tabIndex: selected ? 0 : -1, className: styles.option, "data-selected": selected || undefined, onClick: () => onValueChange(option.value), onKeyDown: event => onKeyDown(event, index), children: [selected && !thumb ? _jsx("span", { className: styles.thumbStatic, "aria-hidden": "true" }) : null, _jsxs("span", { className: styles.content, children: [_jsx("span", { className: styles.label, children: option.label }), badgeText ? (_jsx("span", { className: styles.badge, "data-active": selected || undefined, children: _jsx(StableSwap, { text: badgeText, candidates: candidates, reduced: reduced }) })) : null] })] }, option.value));
+            })] }));
+}
+const clip = { type: "spring", visualDuration: 0.36, bounce: 0 };
+/** A price that rolls to its new amount. The old price and the period ease their width, so nothing beside them jumps. */
+export function BillingPrice({ amount, currency = "$", period, was, decimals = 0, className }) {
+    const reduced = !!useReducedMotion();
+    const showWas = was !== undefined && was > amount;
+    const periodRef = useRef(null);
+    const [periodWidth, setPeriodWidth] = useState(null);
+    useLayoutEffect(() => {
+        const sizer = periodRef.current;
+        if (sizer)
+            setPeriodWidth(sizer.offsetWidth);
+    }, [period]);
+    return (_jsxs("span", { className: [styles.price, className].filter(Boolean).join(" "), children: [_jsxs("span", { className: styles.amount, children: [_jsx("span", { className: styles.currency, children: currency }), _jsx("span", { className: styles.counter, children: _jsx(AnimatedCounter, { value: amount, decimals: decimals }) })] }), _jsxs("span", { className: styles.aside, children: [_jsx(AnimatePresence, { initial: false, children: showWas ? (_jsx(motion.span, { className: styles.wasSlot, initial: reduced ? { opacity: 0 } : { opacity: 0, width: 0 }, animate: { opacity: 1, width: "auto" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, width: 0, transition: { ...clip, opacity: { duration: duration.fast } } }, transition: reduced ? { duration: duration.fast } : { ...clip, opacity: { duration: duration.standard, ease: [...ease.enter] } }, children: _jsxs("del", { className: styles.was, children: [currency, was.toFixed(decimals)] }) }, "was")) : null }), period ? (_jsxs(motion.span, { className: styles.period, initial: false, animate: periodWidth === null ? undefined : { width: periodWidth }, transition: reduced ? { duration: 0 } : clip, children: [_jsx("span", { ref: periodRef, className: styles.periodSizer, "aria-hidden": "true", children: period }), _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.periodText, variants: reduced ? still : swap, initial: "hidden", animate: "shown", exit: "gone", children: period }, period) })] })) : null] })] }));
+}
+export default BillingToggle;

package/components/billing-toggle/billing-toggle.module.css

@@ -0,0 +1,139 @@
+/* Override --billing-accent on any ancestor to recolor the savings note. */
+.root {
+  --_accent: var(--billing-accent, var(--success));
+  --_h: 34px;
+  --_pad: 3px;
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  padding: var(--_pad);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full); corner-shape: round;
+  background: var(--surface-muted);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: 1;
+}
+.root[data-size="lg"] { --_h: 42px; --_pad: 4px; font-size: var(--text-base); }
+
+/* One thumb for the whole track. Its position and width are measured from the selected option. */
+.thumb,
+.thumbStatic {
+  position: absolute;
+  z-index: -1;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: var(--surface-raised);
+  box-shadow: 0 0 0 1px var(--border-subtle), 0 1px 2px oklch(0% 0 0 / .06), 0 2px 6px oklch(0% 0 0 / .04);
+  pointer-events: none;
+}
+.thumb { top: var(--_pad); bottom: var(--_pad); left: 0; will-change: transform, width; }
+.thumbStatic { inset: 0; }
+:global(:root[data-theme="dark"]) .thumb,
+:global(:root[data-theme="dark"]) .thumbStatic {
+  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 oklch(100% 0 0 / .05), 0 1px 2px oklch(0% 0 0 / .3);
+}
+
+.option {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  height: var(--_h);
+  align-items: center;
+  padding: 0 14px;
+  border: 0;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  letter-spacing: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--duration-fast) var(--ease-standard);
+  -webkit-tap-highlight-color: transparent;
+}
+.option[data-selected] { color: var(--foreground); cursor: default; }
+.option:has(.badge) { padding-right: 5px; }
+.root[data-size="lg"] .option { padding-inline: 18px; }
+.root[data-size="lg"] .option:has(.badge) { padding-right: 6px; }
+
+@media (hover: hover) and (pointer: fine) {
+  .option:not([data-selected]):hover { color: var(--text-secondary); }
+}
+
+.content {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.option:not([data-selected]):active .content { transform: scale(.97); }
+
+.label { font-weight: 500; }
+
+/* The savings note: quiet until its option is chosen, then it takes the accent tint. */
+.badge {
+  display: inline-flex;
+  height: calc(var(--_h) - 10px);
+  align-items: center;
+  padding: 0 8px;
+  border-radius: var(--radius-full); corner-shape: round;
+  background: color-mix(in oklab, var(--foreground) 6%, transparent);
+  color: var(--text-secondary);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard);
+}
+.badge[data-active] {
+  background: color-mix(in oklab, var(--_accent) 13%, transparent);
+  color: color-mix(in oklab, var(--_accent) 88%, var(--foreground));
+}
+:global(:root[data-theme="dark"]) .badge[data-active] {
+  background: color-mix(in oklab, var(--_accent) 18%, transparent);
+  color: var(--_accent);
+}
+
+/* Stacked swap: every candidate reserves the cell, the visible one crossfades on top. */
+.swap { position: relative; display: inline-grid; justify-items: center; overflow-y: clip; overflow-clip-margin: 2px; }
+.swapSizer { grid-area: 1 / 1; visibility: hidden; }
+.swapText { grid-area: 1 / 1; display: inline-block; }
+
+@media (prefers-reduced-motion: reduce) {
+  .content, .badge { transition: none; }
+}
+
+/* ------------------------------------------------------------------------ Price */
+
+.price { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px; }
+.amount {
+  display: inline-flex;
+  align-items: flex-start;
+  color: var(--foreground);
+  font-family: var(--font-display);
+  font-size: var(--text-3xl);
+  font-weight: 400;
+  letter-spacing: var(--tracking-display);
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.currency { margin-top: .12em; margin-right: .04em; color: var(--text-secondary); font-size: .55em; }
+.counter { display: inline-flex; }
+.counter > span { font: inherit !important; letter-spacing: inherit !important; }
+.aside {
+  display: inline-flex;
+  align-items: baseline;
+  padding-bottom: .3em;
+  color: var(--text-muted);
+  font-size: var(--text-sm);
+  line-height: var(--leading-body);
+  white-space: nowrap;
+}
+.wasSlot { display: inline-block; overflow-x: clip; }
+.was { display: inline-block; padding-right: 6px; color: var(--text-muted); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
+.period { position: relative; display: inline-block; overflow-x: clip; overflow-clip-margin: 2px; }
+.periodSizer { display: inline-block; visibility: hidden; }
+.periodText { position: absolute; top: 0; left: 0; display: inline-block; }