@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/activity-heatmap/activity-heatmap.js

@@ -0,0 +1,303 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./activity-heatmap.module.css";
+const DAY = 86400000;
+const LEVELS = [0, 1, 2, 3, 4];
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** Total wave travel in ms, kept under the system's stagger budget however many weeks the range spans. */
+const WAVE = 420;
+const toUtc = (iso) => Date.parse(`${iso}T00:00:00Z`);
+const toIso = (time) => new Date(time).toISOString().slice(0, 10);
+function buildModel(days, weekStartsOn, thresholds, locale) {
+    const dates = days.map(day => toUtc(day.date)).filter(Number.isFinite);
+    const start = dates.length ? Math.min(...dates) : toUtc("2025-01-01");
+    const length = dates.length ? Math.round((Math.max(...dates) - start) / DAY) + 1 : 0;
+    const counts = new Array(length).fill(0);
+    days.forEach(day => { const index = Math.round((toUtc(day.date) - start) / DAY); if (index >= 0 && index < length)
+        counts[index] += Math.max(0, day.count); });
+    const max = counts.reduce((a, b) => Math.max(a, b), 0);
+    const bounds = thresholds ?? [Math.max(1, Math.ceil(max * .25)), Math.max(2, Math.ceil(max * .5)), Math.max(3, Math.ceil(max * .75))];
+    const levels = counts.map(count => count <= 0 ? 0 : count <= bounds[0] ? 1 : count <= bounds[1] ? 2 : count <= bounds[2] ? 3 : 4);
+    const lead = (new Date(start).getUTCDay() - weekStartsOn + 7) % 7;
+    const weeks = Math.ceil((lead + length) / 7);
+    const monthName = new Intl.DateTimeFormat(locale, { month: "short", timeZone: "UTC" });
+    const months = [];
+    for (let index = 0; index < length; index++) {
+        const date = new Date(start + index * DAY);
+        if (index === 0 || date.getUTCDate() === 1)
+            months.push({ month: date.getUTCFullYear() * 12 + date.getUTCMonth(), col: Math.floor((lead + index) / 7), label: monthName.format(date) });
+    }
+    // A partial first month keeps its label only when there is room before the next one.
+    if (months.length > 1 && months[1].col - months[0].col < 3)
+        months.shift();
+    const perLevel = [0, 0, 0, 0, 0];
+    levels.forEach(level => perLevel[level]++);
+    return { start, length, lead, weeks, total: counts.reduce((a, b) => a + b, 0), counts, levels, thresholds: bounds, months, perLevel };
+}
+const CONTRIBUTIONS = { one: "contribution", other: "contributions" };
+const noun = (count, unit) => count === 1 ? unit.one : unit.other;
+const noopSubscribe = () => () => { };
+/** Reduced motion only after hydration, so the server and the first client render agree. */
+function useReducedMotionSafe() {
+    const hydrated = useSyncExternalStore(noopSubscribe, () => true, () => false);
+    const reduced = useReducedMotion();
+    return hydrated && !!reduced;
+}
+const tipText = (reduced) => ({
+    from: (change) => change === "instant" ? { opacity: 1, y: "0em", filter: "blur(0px)" } : reduced ? { opacity: 0 } : { opacity: 0, y: `${.3 * (change || 1)}em`, filter: `blur(${change ? motionTokens.blur.soft : motionTokens.blur.subtle}px)` },
+    to: { opacity: 1, y: "0em", filter: "blur(0px)" },
+    gone: (change) => change === "instant" || reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: `${-.3 * (change || 1)}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } },
+});
+/** A total that rolls digit by digit in the direction it moved. Places keep their identity, so only changed digits turn,
+ *  and when the number gains or loses a digit the width follows on a spring instead of shifting the sentence in one frame. */
+function RollingNumber({ value, locale, reduced }) {
+    const [state, setState] = useState({ value, direction: 1 });
+    if (state.value !== value)
+        setState({ value, direction: value > state.value ? 1 : -1 });
+    const inner = useRef(null);
+    const width = useMotionValue("auto");
+    const armedUntil = useRef(0), lastValue = useRef(value);
+    useLayoutEffect(() => {
+        if (lastValue.current === value)
+            return;
+        lastValue.current = value;
+        armedUntil.current = performance.now() + 600;
+    }, [value]);
+    useEffect(() => {
+        const node = inner.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const next = node.getBoundingClientRect().width;
+            if (reduced || width.get() === "auto" || performance.now() > armedUntil.current)
+                width.jump(next);
+            else
+                animate(width, next, motionTokens.spring.morph);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [reduced, width]);
+    const chars = [...new Intl.NumberFormat(locale).format(value)];
+    const variants = {
+        from: (direction) => reduced ? { opacity: 0 } : { opacity: 0, y: `${.3 * direction}em`, filter: `blur(${motionTokens.blur.soft}px)` },
+        to: { opacity: 1, y: "0em", filter: "blur(0px)" },
+        gone: (direction) => reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: `${-.3 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } },
+    };
+    return _jsx(motion.span, { className: styles.rollingFrame, style: { width }, "aria-hidden": "true", children: _jsx("span", { ref: inner, className: styles.rolling, children: chars.map((char, index) => {
+                const place = chars.length - index;
+                return _jsx("span", { className: styles.place, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: state.direction, children: _jsx(motion.span, { className: styles.placeChar, custom: state.direction, variants: variants, initial: "from", animate: "to", exit: "gone", transition: reduced ? { duration: motionTokens.duration.fast } : { duration: motionTokens.duration.standard, ease: enter, delay: Math.min(place * .018, .09) }, children: char }, char) }) }, place);
+            }) }) });
+}
+/** A short word that changes rises in from a soft blur while the old one lifts away a little faster. */
+function RiseText({ text, reduced, children }) {
+    return _jsx("span", { className: styles.rise, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.riseLine, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: "0em", filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? motionTokens.duration.fast : motionTokens.duration.standard, ease: enter }, children: children ?? text }, text) }) });
+}
+export function ActivityHeatmap({ days, label, period, unit: unitProp = CONTRIBUTIONS, thresholds, weekStartsOn = 0, selectedDate = null, onSelectDate, actions, locale = "en-US", className }) {
+    const reduced = useReducedMotionSafe();
+    const id = useId();
+    // Keyed by its words, so an inline unit object does not rebuild every cell on each render.
+    const unit = useMemo(() => ({ one: unitProp.one, other: unitProp.other }), [unitProp.one, unitProp.other]);
+    const rootRef = useRef(null);
+    const plotRef = useRef(null);
+    const gridRef = useRef(null);
+    const scrollerRef = useRef(null);
+    const ringRef = useRef(null);
+    const measureRef = useRef(null);
+    const inView = useInView(plotRef, { once: true, amount: .35 });
+    const model = useMemo(() => buildModel(days, weekStartsOn, thresholds, locale), [days, weekStartsOn, thresholds, locale]);
+    const formats = useMemo(() => ({
+        long: new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }),
+        short: new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }),
+        weekday: new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" }),
+        number: new Intl.NumberFormat(locale),
+    }), [locale]);
+    // A new range sweeps forward when it is later than the last one and back when it is earlier.
+    const [range, setRange] = useState({ start: model.start, direction: 1 });
+    if (range.start !== model.start)
+        setRange({ start: model.start, direction: model.start > range.start ? 1 : -1 });
+    const [reveal, setReveal] = useState("hidden");
+    useEffect(() => {
+        if (reveal !== "hidden" || !(inView || reduced))
+            return;
+        const frame = requestAnimationFrame(() => setReveal(reduced ? "done" : "revealing"));
+        return () => cancelAnimationFrame(frame);
+    }, [inView, reduced, reveal]);
+    useEffect(() => {
+        if (reveal !== "revealing")
+            return;
+        const timer = window.setTimeout(() => setReveal("done"), WAVE + 700);
+        return () => window.clearTimeout(timer);
+    }, [reveal]);
+    const selectedIndex = selectedDate ? Math.round((toUtc(selectedDate) - model.start) / DAY) : -1;
+    const hasSelection = selectedIndex >= 0 && selectedIndex < model.length;
+    const [focusIndex, setFocusIndex] = useState(null);
+    const tabIndexDay = focusIndex !== null && focusIndex < model.length ? focusIndex : hasSelection ? selectedIndex : model.length - 1;
+    // Legend: hovering or focusing a level previews it on the grid, clicking pins it. The caption says how many days sit at that level.
+    const [preview, setPreview] = useState(null);
+    const [pinned, setPinned] = useState(null);
+    const [legendFocus, setLegendFocus] = useState(0);
+    const previewTimer = useRef(0);
+    const highlight = preview ?? pinned;
+    const previewLevel = (level) => { window.clearTimeout(previewTimer.current); if (level !== null)
+        setPreview(level);
+    else
+        previewTimer.current = window.setTimeout(() => setPreview(null), 90); };
+    useEffect(() => () => window.clearTimeout(previewTimer.current), []);
+    // Tooltip: one bubble for the whole grid. It jumps into place when it opens and glides on a spring between cells after that.
+    const [tip, setTip] = useState(null);
+    const [open, setOpen] = useState(false);
+    const [change, setChange] = useState("instant");
+    const openRef = useRef(false);
+    const hideTimer = useRef(0);
+    const tipX = useMotionValue(0), tipY = useMotionValue(0), tipWidth = useMotionValue("auto");
+    function contentFor(index, anchor) {
+        const count = model.counts[index];
+        const date = new Date(model.start + index * DAY);
+        return { key: `day-${toIso(date.getTime())}`, primary: count ? `${formats.number.format(count)} ${noun(count, unit)}` : `No ${unit.other}`, secondary: formats.short.format(date), value: count, anchor };
+    }
+    const [a, b, c] = model.thresholds;
+    const ranges = [`no ${unit.other}`, a === 1 ? `1 ${unit.one}` : `1 to ${a} ${unit.other}`, `${a + 1} to ${b} ${unit.other}`, `${b + 1} to ${c} ${unit.other}`, `${c + 1} or more ${unit.other}`];
+    const shortRanges = [`no ${unit.other}`, a === 1 ? `1 ${unit.one}` : `1–${a} ${unit.other}`, `${a + 1}–${b} ${unit.other}`, `${b + 1}–${c} ${unit.other}`, `${c + 1}+ ${unit.other}`];
+    const dayCount = highlight === null ? "" : `${formats.number.format(model.perLevel[highlight])} ${model.perLevel[highlight] === 1 ? "day" : "days"}`;
+    const caption = highlight === null ? "" : `${dayCount} with ${shortRanges[highlight]}`;
+    function show(next) {
+        window.clearTimeout(hideTimer.current);
+        setChange(tip && openRef.current ? Math.sign(next.value - tip.value) : "instant");
+        setTip(next);
+        setOpen(true);
+    }
+    function hideSoon(delay = 110) {
+        window.clearTimeout(hideTimer.current);
+        hideTimer.current = window.setTimeout(() => setOpen(false), delay);
+    }
+    useEffect(() => () => window.clearTimeout(hideTimer.current), []);
+    useLayoutEffect(() => {
+        const root = rootRef.current, measure = measureRef.current;
+        if (!tip || !root || !measure)
+            return;
+        const place = (glide) => {
+            const box = root.getBoundingClientRect(), cell = tip.anchor.getBoundingClientRect();
+            const width = Math.ceil(measure.getBoundingClientRect().width);
+            const half = width / 2 + 13;
+            const x = Math.min(Math.max(cell.left - box.left + cell.width / 2, half + 2), box.width - half - 2);
+            const y = cell.top - box.top;
+            if (glide) {
+                animate(tipX, x, motionTokens.spring.snappy);
+                animate(tipY, y, motionTokens.spring.snappy);
+                animate(tipWidth, width, motionTokens.spring.morph);
+            }
+            else {
+                tipX.jump(x);
+                tipY.jump(y);
+                tipWidth.jump(width);
+            }
+        };
+        place(open && openRef.current && !reduced);
+        openRef.current = open;
+        if (!open)
+            return;
+        // The grid scrolls sideways on narrow screens; the bubble stays pinned to its cell while it does.
+        const scroller = scrollerRef.current;
+        const follow = () => place(false);
+        scroller?.addEventListener("scroll", follow, { passive: true });
+        return () => scroller?.removeEventListener("scroll", follow);
+    }, [tip, open, reduced, tipX, tipY, tipWidth]);
+    const indexOf = (element) => {
+        const cell = element?.closest("[data-index]");
+        return cell && gridRef.current?.contains(cell) ? { cell, index: Number(cell.dataset.index) } : null;
+    };
+    const focusDay = (index) => gridRef.current?.querySelector(`[data-index="${index}"]`)?.focus();
+    function onGridPointerOver(event) {
+        const hit = indexOf(event.target);
+        if (hit)
+            show(contentFor(hit.index, hit.cell));
+    }
+    function onGridPointerLeave(event) {
+        // A keyboard user keeps their bubble on the focused day. A tap focuses its day too, so the bubble stays until focus moves on;
+        // where a tap does not focus, it lingers long enough to read.
+        const focused = indexOf(document.activeElement);
+        if (focused?.cell.matches(":focus-visible"))
+            show(contentFor(focused.index, focused.cell));
+        else
+            hideSoon(event.pointerType === "touch" ? 2400 : 110);
+    }
+    function onGridFocus(event) {
+        const hit = indexOf(event.target);
+        if (!hit)
+            return;
+        setFocusIndex(hit.index);
+        show(contentFor(hit.index, hit.cell));
+    }
+    function onGridBlur(event) {
+        if (!gridRef.current?.contains(event.relatedTarget))
+            hideSoon(0);
+    }
+    function onGridKeyDown(event) {
+        const hit = indexOf(event.target);
+        if (!hit)
+            return;
+        const moves = { ArrowUp: hit.index - 1, ArrowDown: hit.index + 1, ArrowLeft: hit.index - 7, ArrowRight: hit.index + 7, Home: 0, End: model.length - 1 };
+        if (event.key in moves) {
+            event.preventDefault();
+            focusDay(Math.min(Math.max(moves[event.key], 0), model.length - 1));
+        }
+        else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            onSelectDate?.(toIso(model.start + hit.index * DAY));
+        }
+        else if (event.key === "Escape" && open) {
+            event.preventDefault();
+            setOpen(false);
+        }
+    }
+    function onLegendKeyDown(event) {
+        const moves = { ArrowLeft: legendFocus - 1, ArrowRight: legendFocus + 1, Home: 0, End: 4 };
+        if (event.key === "Escape") {
+            previewLevel(null);
+            return;
+        }
+        if (!(event.key in moves))
+            return;
+        event.preventDefault();
+        const next = Math.min(Math.max(moves[event.key], 0), 4);
+        rootRef.current?.querySelector(`[data-level-key="${next}"]`)?.focus();
+    }
+    // The selection ring glides between cells on CSS. When it first appears it should fade in where it lands, not fly in from its last spot.
+    const ringShown = hasSelection && reveal !== "hidden";
+    const ringWasShown = useRef(ringShown);
+    useLayoutEffect(() => {
+        const ring = ringRef.current;
+        if (ring && ringShown && !ringWasShown.current) {
+            ring.style.transitionProperty = "opacity";
+            void ring.offsetWidth;
+            ring.style.transitionProperty = "";
+        }
+        ringWasShown.current = ringShown;
+    }, [ringShown]);
+    const maxDiagonal = Math.max(1, model.weeks - 1 + 6);
+    const step = Math.min(12, WAVE / maxDiagonal);
+    const cells = useMemo(() => Array.from({ length: 7 }, (_, row) => _jsx("div", { role: "row", className: styles.row, children: Array.from({ length: model.weeks }, (_, col) => {
+            const index = col * 7 + row - model.lead;
+            const inRange = index >= 0 && index < model.length;
+            const wave = { "--wave": `${Math.round((col + row) * step)}ms`, "--wave-back": `${Math.round((maxDiagonal - col - row) * step)}ms` };
+            if (!inRange)
+                return _jsx("span", { className: styles.cell, "data-empty": "", style: wave, "aria-hidden": "true" }, col);
+            const count = model.counts[index];
+            const date = new Date(model.start + index * DAY);
+            return _jsx("span", { role: "gridcell", className: styles.cell, style: wave, "data-index": index, "data-level": model.levels[index], tabIndex: index === tabIndexDay ? 0 : -1, "aria-selected": onSelectDate ? index === selectedIndex : undefined, "aria-label": `${count ? formats.number.format(count) : "No"} ${noun(count, unit)}, ${formats.long.format(date)}`, onClick: () => onSelectDate?.(toIso(date.getTime())) }, col);
+        }) }, row)), [model, step, maxDiagonal, tabIndexDay, selectedIndex, formats, unit, onSelectDate]);
+    const weekdayLabels = useMemo(() => Array.from({ length: 7 }, (_, row) => {
+        const weekday = (row + weekStartsOn) % 7;
+        // January 4, 1970 was a Sunday.
+        return weekday % 2 === 1 ? formats.weekday.format(new Date((3 + weekday) * DAY)) : "";
+    }), [formats, weekStartsOn]);
+    const selectedCol = hasSelection ? Math.floor((selectedIndex + model.lead) / 7) : 0;
+    const selectedRow = hasSelection ? (selectedIndex + model.lead) % 7 : 0;
+    const summary = `${formats.number.format(model.total)} ${noun(model.total, unit)} in ${period}`;
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), children: [_jsxs("div", { className: styles.header, children: [_jsxs("p", { className: styles.summary, children: [_jsxs("span", { className: styles.total, children: [_jsx(RollingNumber, { value: model.total, locale: locale, reduced: reduced }), " ", noun(model.total, unit)] }), " ", _jsxs("span", { className: styles.period, children: ["in ", _jsx(RiseText, { text: period, reduced: reduced })] }), _jsx("span", { className: styles.srOnly, role: "status", children: summary })] }), actions && _jsx("div", { className: styles.actions, children: actions })] }), _jsx("div", { ref: scrollerRef, className: styles.scroller, children: _jsxs("div", { className: styles.canvas, style: { "--weeks": model.weeks }, children: [_jsx("div", { className: styles.months, "aria-hidden": "true", children: model.months.map((month, order) => _jsx("span", { className: styles.month, style: { "--col": month.col }, children: month.label }, `${month.month % 12}-${model.months.findIndex(item => item.month % 12 === month.month % 12) === order ? 0 : 1}`)) }), _jsx("div", { className: styles.weekdays, "aria-hidden": "true", children: weekdayLabels.map((text, row) => _jsx("span", { className: styles.weekday, children: text }, row)) }), _jsxs("div", { ref: plotRef, className: styles.plot, children: [_jsx("div", { ref: gridRef, role: "grid", "aria-label": label, "aria-readonly": "true", "aria-describedby": `${id}-legend`, className: styles.grid, "data-reveal": reveal, "data-direction": range.direction < 0 ? "back" : undefined, "data-highlight": highlight ?? undefined, onPointerOver: onGridPointerOver, onPointerLeave: onGridPointerLeave, onFocus: onGridFocus, onBlur: onGridBlur, onKeyDown: onGridKeyDown, children: cells }), _jsx("span", { ref: ringRef, className: styles.ring, "data-shown": ringShown || undefined, style: { "--col": selectedCol, "--row": selectedRow }, "aria-hidden": "true" })] })] }) }), _jsxs("div", { className: styles.legend, children: [_jsxs("span", { id: `${id}-legend`, className: styles.srOnly, children: ["Darker squares mean more ", unit.other, ". Levels: ", ranges.join(", "), "."] }), _jsxs("span", { className: styles.caption, "aria-live": "polite", children: [_jsx(RiseText, { text: caption, reduced: reduced, children: caption && _jsxs(_Fragment, { children: [_jsx("span", { className: styles.captionLong, children: caption }), _jsx("span", { className: styles.captionShort, children: dayCount })] }) }), _jsx("span", { className: styles.srOnly, children: caption })] }), _jsxs("span", { className: styles.scale, children: [_jsx("span", { className: styles.legendText, "aria-hidden": "true", children: "Less" }), _jsx("div", { className: styles.swatches, role: "group", "aria-label": "Highlight days by level", onKeyDown: onLegendKeyDown, children: LEVELS.map(level => _jsx("button", { type: "button", className: styles.swatch, "data-level-key": level, "data-level": level, tabIndex: level === legendFocus ? 0 : -1, "aria-pressed": pinned === level, "aria-label": `Highlight days with ${ranges[level]}`, onClick: () => setPinned(current => current === level ? null : level), onPointerEnter: () => previewLevel(level), onPointerLeave: () => previewLevel(null), onFocus: () => { setLegendFocus(level); previewLevel(level); }, onBlur: () => previewLevel(null) }, level)) }), _jsx("span", { className: styles.legendText, "aria-hidden": "true", children: "More" })] })] }), _jsx(motion.div, { className: styles.tip, style: { x: tipX, y: tipY }, "aria-hidden": "true", children: _jsx(motion.div, { className: styles.bubble, style: { x: "-50%" }, initial: false, animate: open && tip ? { opacity: 1, scale: 1 } : { opacity: 0, scale: reduced ? 1 : .96 }, transition: reduced ? { duration: open ? motionTokens.duration.fast : motionTokens.duration.instant } : open ? { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } : { duration: motionTokens.duration.instant, ease: standard }, children: _jsxs(motion.span, { className: styles.tipBody, style: { width: tipWidth }, children: [_jsxs("span", { ref: measureRef, className: styles.tipMeasure, children: [_jsx("span", { className: styles.tipPrimary, children: tip?.primary }), _jsx("span", { className: styles.tipSecondary, children: tip?.secondary })] }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: change, children: tip && _jsxs(motion.span, { className: styles.tipLines, custom: change, variants: tipText(reduced), initial: "from", animate: "to", exit: "gone", transition: { duration: reduced ? motionTokens.duration.fast : motionTokens.duration.standard, ease: enter }, children: [_jsx("span", { className: styles.tipPrimary, children: tip.primary }), _jsx("span", { className: styles.tipSecondary, children: tip.secondary })] }, tip.key) })] }) }) })] });
+}
+export default ActivityHeatmap;

package/components/activity-heatmap/activity-heatmap.module.css

@@ -0,0 +1,83 @@
+/* Levels are tints of the accent over a neutral empty square, so the grid follows the selected accent and both themes. */
+.root { --level-0: color-mix(in oklab, var(--foreground) 6.5%, var(--surface)); --level-1: color-mix(in oklab, var(--accent) 26%, var(--level-0)); --level-2: color-mix(in oklab, var(--accent) 50%, var(--level-0)); --level-3: color-mix(in oklab, var(--accent) 76%, var(--level-0)); --level-4: var(--accent); container-type: inline-size; position: relative; display: grid; min-width: 0; gap: var(--space-inset); color: var(--foreground); }
+.header { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-group) var(--space-inset); }
+.summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; column-gap: .3em; margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
+.total { color: var(--foreground); font-weight: 500; white-space: nowrap; }
+.period { white-space: nowrap; }
+.actions { display: flex; flex: none; align-items: center; }
+.rollingFrame { display: inline-flex; justify-content: flex-end; overflow: clip; overflow-clip-margin: .2em; }
+.rolling { display: inline-flex; flex: none; }
+/* Each place is its own window, so a turning digit clips at the line instead of brushing the next line of text. */
+.place { position: relative; display: inline-flex; overflow: clip; overflow-clip-margin: .15em; }
+.placeChar, .riseLine { display: inline-block; }
+.rise { position: relative; display: inline-flex; }
+
+/* The scroller starts at its right edge on narrow screens (the most recent weeks) without script, through its writing direction. */
+.scroller { direction: rtl; overflow-x: auto; overflow-y: hidden; margin: -6px; padding: 6px; overscroll-behavior-x: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
+.canvas { --gap: 3px; --label: 30px; --cell: clamp(9px, calc((100cqi - var(--label) - var(--gap) * 53) / 53), 15px); --step: calc(var(--cell) + var(--gap)); direction: ltr; display: grid; width: max-content; grid-template-columns: var(--label) auto; grid-template-rows: auto auto; column-gap: var(--gap); row-gap: var(--space-related); }
+.months { position: relative; grid-row: 1; grid-column: 2; height: 1rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1rem; }
+/* Month labels glide to their new week when a range starts on a different weekday. */
+.month { position: absolute; top: 0; left: 0; white-space: nowrap; transform: translateX(calc(var(--col) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring); }
+/* Weekday labels stay pinned while a narrow grid scrolls under them. Set --heatmap-surface when the heatmap sits on another surface. */
+.weekdays { position: sticky; z-index: 1; left: -6px; display: grid; grid-row: 1 / 3; grid-column: 1; grid-template-rows: repeat(7, var(--cell)); align-content: end; row-gap: var(--gap); margin: 0 calc(var(--gap) * -1) 0 -6px; padding: 0 var(--gap) 0 6px; background: var(--heatmap-surface, var(--surface)); color: var(--text-muted); font-size: var(--text-xs); }
+.weekday { display: flex; height: var(--cell); align-items: center; white-space: nowrap; line-height: 1; }
+.plot { position: relative; grid-row: 2; grid-column: 2; }
+.grid { display: grid; gap: var(--gap); outline: none; }
+.row { display: flex; gap: var(--gap); }
+
+/* One square per day. The wave delay rides a custom property so a reveal and a recolor sweep the same diagonal. */
+.cell { --delay: var(--wave); display: block; width: var(--cell); height: var(--cell); flex: none; border-radius: calc(var(--cell) * .28); background: var(--level-0); outline: 1.5px solid transparent; outline-offset: 1px; cursor: default; -webkit-tap-highlight-color: transparent; transition: background-color 320ms var(--ease-standard) var(--delay), transform var(--duration-spring) var(--ease-spring) var(--delay), opacity var(--duration-fast) var(--ease-standard); }
+.grid[data-direction="back"] .cell { --delay: var(--wave-back); }
+.cell[data-level="1"] { background: var(--level-1); }
+.cell[data-level="2"] { background: var(--level-2); }
+.cell[data-level="3"] { background: var(--level-3); }
+.cell[data-level="4"] { background: var(--level-4); }
+/* Days outside the range shrink away in the sweep and grow back when a range needs them. */
+.cell[data-empty] { transform: scale(0); background: var(--level-0); }
+.grid[data-reveal="hidden"] .cell { opacity: 0; transform: scale(.5); transition: none; }
+.grid[data-reveal="hidden"] .cell[data-empty] { transform: scale(0); }
+.grid[data-reveal="revealing"] .cell { transition: background-color 320ms var(--ease-standard) var(--delay), transform var(--duration-spring) var(--ease-spring) var(--delay), opacity 360ms var(--ease-enter) var(--delay); }
+.grid[data-highlight] .cell:not([data-empty]) { opacity: .2; }
+.grid[data-highlight="0"] .cell[data-level="0"], .grid[data-highlight="1"] .cell[data-level="1"], .grid[data-highlight="2"] .cell[data-level="2"], .grid[data-highlight="3"] .cell[data-level="3"], .grid[data-highlight="4"] .cell[data-level="4"] { opacity: 1; }
+@media (hover: hover) and (pointer: fine) { .cell:not([data-empty]):hover { outline-color: color-mix(in oklab, var(--foreground) 45%, transparent); } }
+
+/* The selection ring glides between days, and follows its day when the range changes. */
+.ring { position: absolute; top: -3px; left: -3px; width: calc(var(--cell) + 6px); height: calc(var(--cell) + 6px); border: 1.5px solid var(--foreground); border-radius: calc(var(--cell) * .28 + 3px); opacity: 0; pointer-events: none; transform: translate(calc(var(--col) * var(--step)), calc(var(--row) * var(--step))); transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.ring[data-shown] { opacity: 1; }
+
+.legend { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-group); color: var(--text-muted); font-size: var(--text-xs); }
+/* The caption names the previewed level; it sits apart from the scale so its changing width never nudges the swatches. */
+.caption { position: relative; min-width: 0; overflow: hidden; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
+.scale { display: flex; flex: none; align-items: center; gap: var(--space-related); }
+.captionShort { display: none; }
+/* Narrow cards keep the day count and let the highlighted squares say which level it is. */
+@container (max-width: 440px) { .captionLong { display: none; } .captionShort { display: inline; } }
+.legendText { line-height: 1; }
+.swatches { display: flex; }
+/* The visible square stays the size of a day while the button keeps a comfortable target around it. */
+.swatch { position: relative; display: grid; width: 15px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-detail); background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.swatch::before { content: ""; width: 11px; height: 11px; border-radius: var(--radius-detail); background: var(--level-0); }
+.swatch[data-level="1"]::before { background: var(--level-1); }
+.swatch[data-level="2"]::before { background: var(--level-2); }
+.swatch[data-level="3"]::before { background: var(--level-3); }
+.swatch[data-level="4"]::before { background: var(--level-4); }
+.swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--foreground); }
+
+/* One bubble for the whole grid. The outer layer glides between cells; the bubble fades and scales from its tail. */
+.tip { position: absolute; z-index: 5; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
+.bubble { position: absolute; bottom: 8px; left: 0; display: block; padding: 7px 12px 8px; border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); transform-origin: 50% 100%; will-change: transform, opacity; }
+.tipBody { position: relative; display: block; overflow: clip; overflow-clip-margin: 8px; }
+.tipMeasure { position: absolute; top: 0; left: 0; display: grid; width: max-content; visibility: hidden; }
+.tipLines { display: grid; width: max-content; }
+.tipMeasure > span, .tipLines > span { white-space: nowrap; }
+.tipPrimary { font-size: var(--text-sm); font-weight: 500; line-height: 1.3; font-variant-numeric: tabular-nums; }
+.tipSecondary { color: color-mix(in oklab, var(--background) 68%, var(--foreground)); font-size: var(--text-xs); line-height: 1.35; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cell, .grid[data-reveal="revealing"] .cell { transition: background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
+  .grid[data-reveal="hidden"] .cell { transform: none; }
+  .cell[data-empty], .grid[data-reveal="hidden"] .cell[data-empty] { opacity: 0; transform: none; }
+  .month, .ring { transition: opacity var(--duration-fast) var(--ease-standard); }
+}

package/components/alert/alert.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type AlertTone = "info" | "success" | "warning" | "danger";
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: AlertTone;
+    title: string;
+    children?: ReactNode;
+    /** Controls presence. Hiding the alert collapses its height and fades it out. */
+    open?: boolean;
+    /** Shows a dismiss button. An uncontrolled alert collapses first, then calls this. */
+    onDismiss?: () => void;
+}
+export declare function Alert({ open, onDismiss, ...props }: AlertProps): import("react").JSX.Element;
+export default Alert;

package/components/alert/alert.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { Check, Info as InfoCircle, TriangleAlert as WarningTriangle, CircleX as XmarkCircle, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./alert.module.css";
+const icons = { info: InfoCircle, success: Check, warning: WarningTriangle, danger: XmarkCircle };
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade, so the live region reads only the current text. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** Follows its content height. After `morphKey` changes, the height springs from the old size to the new one and then returns to auto, so passive reflows (a resize, a font swap) follow instantly. It clips only while moving, so focus rings stay visible at rest. */
+function HeightFrame({ className, reduce, morphKey, children }) {
+    const frame = useRef(null);
+    const content = useRef(null);
+    const height = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [morphKey]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { height.jump("auto"); if (frame.current)
+            Object.assign(frame.current.style, { overflow: "", height: "auto" }); };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight;
+            const current = height.get();
+            const from = typeof current === "number" ? current : last;
+            last = next;
+            controls?.stop();
+            if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120)
+                return settle();
+            // Pin the old height before this frame paints, then spring to the new one.
+            if (frame.current)
+                Object.assign(frame.current.style, { overflow: "hidden", height: `${from}px` });
+            controls = animate(height, [from, next], { ...motionTokens.spring.smooth, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [height, reduce]);
+    return _jsx(motion.div, { ref: frame, className: className, style: { height }, children: _jsx("div", { ref: content, className: styles.content, children: children }) });
+}
+function AlertBox({ tone = "info", title, children, className, reduce, onDismiss, animateIcon = false, ...props }) {
+    const Icon = icons[tone];
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
+    const hasDetails = children !== undefined && children !== null && children !== false && children !== "";
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: enter };
+    return _jsxs("div", { ...props, className: [styles.alert, styles[tone], className].filter(Boolean).join(" "), role: tone === "danger" ? "alert" : "status", children: [_jsx(motion.span, { className: styles.icon, initial: animateIcon && !reduce ? iconIn : false, animate: shown, transition: motionTokens.spring.snappy, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.glyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? enter : motionTokens.spring.snappy, children: _jsx(Icon, { width: 18, height: 18, "aria-hidden": "true" }) }, tone) }) }), _jsxs(HeightFrame, { className: styles.copy, reduce: reduce, morphKey: `${title}\n${hasDetails}\n${text ?? ""}`, children: [_jsx("strong", { className: styles.title, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: title }, title) }) }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: hasDetails && _jsx(motion.p, { className: styles.description, ...swap, children: text === null ? children : _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, ...swap, children: text }, text) }) }, "details") })] }), onDismiss && _jsx("button", { type: "button", className: styles.dismiss, "aria-label": `Dismiss: ${title}`, onClick: onDismiss, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] });
+}
+export function Alert({ open, onDismiss, ...props }) {
+    const reduce = useReducedMotion();
+    const [dismissed, setDismissed] = useState(false);
+    const shell = useRef(null);
+    const setClip = (value) => { if (shell.current)
+        shell.current.style.overflow = value; };
+    if (open === undefined && !onDismiss)
+        return _jsx(AlertBox, { ...props, reduce: reduce });
+    const isOpen = open ?? !dismissed;
+    const dismiss = onDismiss && (() => open === undefined ? setDismissed(true) : onDismiss());
+    const presence = reduce ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } };
+    const exit = { height: 0, opacity: 0, transition: reduce ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: exitFast } };
+    // Presence collapses the height with the fade, so the content below closes the gap instead of jumping.
+    return _jsx(AnimatePresence, { initial: false, onExitComplete: () => { if (open === undefined)
+            onDismiss?.(); }, children: isOpen && _jsx(motion.div, { className: styles.presence, initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: exit, transition: presence, ref: shell, onAnimationStart: () => setClip("hidden"), onAnimationComplete: () => setClip(""), children: _jsx(AlertBox, { ...props, reduce: reduce, onDismiss: dismiss, animateIcon: true }) }, "alert") });
+}
+export default Alert;

package/components/alert/alert.module.css

@@ -0,0 +1,15 @@
+.presence { min-width: 0; }
+.alert { display: flex; align-items: start; gap: var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-inset); background: var(--surface); box-shadow: var(--shadow-resting); }
+.icon, .glyph { position: relative; display: grid; flex: 0 0 auto; place-items: center; }
+.icon { width: 18px; height: 18px; margin-top: 1px; }
+.icon svg { display: block; }
+.copy { flex: 1; min-width: 0; }
+.content { position: relative; }
+.title { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; }
+.line { display: block; }
+.description { position: relative; margin: var(--space-tight) 0 0; color: var(--text-secondary); font-size: var(--text-xs); }
+.info .icon { color: var(--accent); } .success .icon { color: var(--success); } .warning .icon { color: var(--warning); } .danger .icon { color: var(--danger); }
+.dismiss { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; margin: -5px -6px -5px 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.dismiss:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .dismiss:hover { background: var(--surface-muted); color: var(--foreground); } }
+@media (prefers-reduced-motion: reduce) { .dismiss { transition: none; } .dismiss:active { transform: none; } }

package/components/animated-counter/animated-counter.d.ts

@@ -0,0 +1,13 @@
+export interface AnimatedCounterProps {
+    value: number;
+    label?: string;
+    prefix?: string;
+    suffix?: string;
+    decimals?: number;
+    /** Roll every digit up from zero the first time the counter scrolls into view. */
+    animateOnView?: boolean;
+    /** Formatting locale. Fixed by default so server and client render the same digits. */
+    locale?: string;
+}
+export declare function AnimatedCounter({ value, label, prefix, suffix, decimals, animateOnView, locale }: AnimatedCounterProps): import("react").JSX.Element;
+export default AnimatedCounter;

package/components/animated-counter/animated-counter.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./animated-counter.module.css";
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+const rise = { hidden: { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } } };
+const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered };
+/** Split a formatted number into columns keyed by place value, so 999 → 1,000 keeps the ones column the ones column. */
+function partsFor(value, decimals, locale) {
+    const parts = new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, numberingSystem: "latn" }).formatToParts(value);
+    let place = parts.reduce((count, part) => count + (part.type === "integer" ? part.value.length : 0), 0);
+    let fraction = 0;
+    let order = 0;
+    return parts.flatMap((part, index) => {
+        if (part.type === "integer")
+            return [...part.value].map(char => ({ key: `i${--place}`, digit: Number(char), order: order++ }));
+        if (part.type === "fraction")
+            return [...part.value].map(char => ({ key: `f${fraction++}`, digit: Number(char), order: order++ }));
+        return [{ key: part.type === "group" ? `g${place}` : part.type === "decimal" ? "d" : `${part.type}${index}`, text: part.value }];
+    });
+}
+/** One digit on the wheel. Its offset from the wheel position decides where it sits and how visible it is. */
+function Glyph({ position, digit }) {
+    const offset = useTransform(position, current => ((((digit - current) % 10) + 15) % 10) - 5);
+    const y = useTransform(offset, current => `${current}em`);
+    const opacity = useTransform(offset, current => Math.max(0, 1 - Math.abs(current)));
+    const visibility = useTransform(offset, current => Math.abs(current) >= 1 ? "hidden" : "visible");
+    const filter = useTransform(offset, current => Math.abs(current) < .02 || Math.abs(current) >= 1 ? "none" : `blur(${(Math.abs(current) * motionTokens.blur.subtle).toFixed(2)}px)`);
+    return _jsx(motion.span, { className: styles.glyph, style: { y, opacity, filter, visibility }, children: digit });
+}
+const presence = { initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 } };
+/** A digit wheel. It always turns in the direction the whole number moved, wrapping 9 → 0 like an odometer. */
+function Column({ digit, direction, armed, delay, reduceMotion }) {
+    const position = useMotionValue(armed ? 0 : digit);
+    const wheel = useRef({ digit: armed ? 0 : digit, target: armed ? 0 : digit, revealed: !armed });
+    useEffect(() => {
+        const state = wheel.current;
+        if (armed || state.digit === digit) {
+            if (!armed)
+                state.revealed = true;
+            return;
+        }
+        state.target += direction < 0 && state.revealed ? -((state.digit - digit + 10) % 10) : (digit - state.digit + 10) % 10;
+        state.digit = digit;
+        if (reduceMotion)
+            position.jump(state.target);
+        else
+            animate(position, state.target, state.revealed ? motionTokens.spring.smooth : { ...reveal, delay });
+        state.revealed = true;
+    }, [armed, delay, digit, direction, position, reduceMotion]);
+    return _jsxs(motion.span, { className: styles.column, ...presence, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.morph, children: [_jsx("span", { className: styles.sizer, children: "0" }), DIGITS.map(item => _jsx(Glyph, { position: position, digit: item }, item))] });
+}
+export function AnimatedCounter({ value, label, prefix = "", suffix = "", decimals = 0, animateOnView = false, locale = "en-US" }) {
+    const ref = useRef(null);
+    const inView = useInView(ref, { once: true, amount: .6 });
+    const reduceMotion = !!useReducedMotion();
+    const [previous, setPrevious] = useState(value);
+    const [direction, setDirection] = useState(1);
+    if (value !== previous) {
+        setPrevious(value);
+        setDirection(value > previous ? 1 : -1);
+    }
+    const parts = partsFor(value, decimals, locale);
+    const text = `${prefix}${parts.map(part => "text" in part ? part.text : part.digit).join("")}${suffix}`;
+    const armed = animateOnView && !inView;
+    return _jsxs("span", { ref: ref, className: styles.counter, children: [label && _jsx("span", { className: styles.label, children: _jsx("span", { className: styles.labelSwap, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.labelText, variants: reduceMotion ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", children: label }, label) }) }) }), _jsx("span", { className: styles.srOnly, children: text }), _jsxs("span", { className: styles.value, "aria-hidden": "true", children: [prefix && _jsx("span", { className: styles.symbol, children: prefix }), _jsx(AnimatePresence, { initial: false, children: parts.map(part => "digit" in part
+                            ? _jsx(Column, { digit: part.digit, direction: direction, armed: armed, delay: Math.min(part.order * motionTokens.stagger.item, .25), reduceMotion: reduceMotion }, part.key)
+                            : _jsx(motion.span, { className: styles.symbol, ...presence, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.morph, children: part.text }, part.key)) }), suffix && _jsx("span", { className: styles.symbol, children: suffix })] })] });
+}
+export default AnimatedCounter;

package/components/animated-counter/animated-counter.module.css

@@ -0,0 +1,12 @@
+.counter { position: relative; display: inline-flex; flex-direction: column; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
+.label { margin-bottom: var(--space-related); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+/* Each digit is a clipped wheel; separators clip sideways only so a comma keeps its tail. */
+.value { display: inline-flex; align-items: flex-start; white-space: nowrap; user-select: none; }
+/* The wheel's window reaches a little past the line box and feathers out, so a turning digit fades at the edge instead of being cut. */
+.column { --feather: .16em; position: relative; display: inline-block; overflow: hidden; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); }
+.sizer { visibility: hidden; }
+.glyph { position: absolute; inset: var(--feather) 0; text-align: center; }
+.labelText { display: inline-block; }
+.labelSwap { position: relative; display: block; }
+.symbol { display: inline-block; overflow-x: clip; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }