@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/announcement-bar/announcement-bar.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+export interface AnnouncementAction {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface Announcement {
+    /** Stable id, reported to callbacks. */
+    id: string;
+    message: ReactNode;
+    action?: AnnouncementAction;
+    /** Counts down to a moment, for example the end of a sale. */
+    countdown?: {
+        to: Date | string | number;
+        label?: string;
+    };
+}
+/**
+ * A slim bar for the top of a page. It can rotate several messages, each rising in from below while the bar springs to
+ * the new height; rotation pauses on hover, focus, or a hidden tab, and `controls` adds previous, next, and a pause ring. Messages can carry a
+ * call to action and a live countdown. Dismissing collapses the height smoothly so the page below eases up, and with an
+ * `id` the dismissal is remembered in `localStorage`.
+ */
+export interface AnnouncementBarProps {
+    messages: Announcement[];
+    /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */
+    id?: string;
+    /** Whether the bar is shown. Leave it out to let the component manage it. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Index of the visible message. */
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Milliseconds each message stays before the next one. Defaults to 6000. */
+    interval?: number;
+    /** Rotate automatically. Pauses on hover, focus, or a hidden tab, and is turned off when the visitor prefers reduced motion. Defaults to true. */
+    autoPlay?: boolean;
+    /** Show previous, next, and pause controls when there are several messages. Defaults to false: only the close button shows. */
+    controls?: boolean;
+    dismissible?: boolean;
+    tone?: "neutral" | "inverted";
+    onAction?: (announcement: Announcement) => void;
+    onCountdownEnd?: (announcement: Announcement) => void;
+    /** Accessible name of the region. */
+    label?: string;
+    className?: string;
+}
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+export declare function clearAnnouncementDismissal(id: string): void;
+export declare const AnnouncementBar: import("react").ForwardRefExoticComponent<AnnouncementBarProps & import("react").RefAttributes<HTMLElement>>;
+export default AnnouncementBar;

package/components/announcement-bar/announcement-bar.js

@@ -0,0 +1,187 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { ArrowRight, ChevronDown, ChevronUp, Pause, Play, X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./announcement-bar.module.css";
+const storageKey = (id) => `silicon-announcement:${id}`;
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+export function clearAnnouncementDismissal(id) {
+    try {
+        window.localStorage.removeItem(storageKey(id));
+    }
+    catch { /* Storage can be blocked. */ }
+}
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const RISE = physical(.46, .1), HEIGHT = physical(.42, 0), COLLAPSE = physical(.44, 0);
+/** Next rises from below and leaves upward; previous runs the other way. */
+const faceVariants = {
+    hidden: (direction) => ({ opacity: 0, y: `${direction * 70}%`, filter: `blur(${motionTokens.blur.soft}px)` }),
+    shown: { opacity: 1, y: "0%", filter: "blur(0px)", transition: { y: RISE, opacity: { duration: motionTokens.duration.standard, ease: enter }, filter: { duration: motionTokens.duration.standard, ease: enter } } },
+    gone: (direction) => ({ opacity: 0, y: `${direction * -60}%`, filter: `blur(${motionTokens.blur.soft}px)`, transition: { y: RISE, opacity: { duration: motionTokens.duration.fast, ease: standard }, filter: { duration: motionTokens.duration.fast, ease: standard } } }),
+};
+const fadeVariants = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.standard, ease: standard } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } } };
+function parts(ms) {
+    const total = Math.max(0, Math.floor(ms / 1000));
+    return { d: Math.floor(total / 86400), h: Math.floor(total % 86400 / 3600), m: Math.floor(total % 3600 / 60), s: total % 60 };
+}
+const pad = (value) => String(value).padStart(2, "0");
+/**
+ * One character cell. A changed digit drops in from above while the old one falls away, like a counter winding down.
+ * The invisible sizer keeps the cell in the text flow, so it shares the baseline of the words around it.
+ */
+function Digit({ char, reduced }) {
+    return _jsxs("span", { className: styles.digit, children: [_jsx("span", { className: styles.digitSizer, "aria-hidden": "true", children: "0" }), _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.digitFace, initial: reduced ? { opacity: 0 } : { y: "-70%", opacity: 0 }, animate: { y: "0%", opacity: 1 }, exit: reduced ? { opacity: 0 } : { y: "70%", opacity: 0 }, transition: reduced ? { duration: motionTokens.duration.instant } : { y: physical(.32, .08), opacity: { duration: motionTokens.duration.fast, ease: standard } }, children: char }, char) })] });
+}
+function Countdown({ to, label, reduced, onEnd }) {
+    const target = new Date(to).getTime();
+    const [now, setNow] = useState(null);
+    const ended = useRef(false);
+    const endRef = useRef(onEnd);
+    useEffect(() => { endRef.current = onEnd; }, [onEnd]);
+    useEffect(() => {
+        let timer = 0;
+        const tick = () => {
+            const current = Date.now();
+            setNow(current);
+            if (current >= target) {
+                if (!ended.current) {
+                    ended.current = true;
+                    endRef.current?.();
+                }
+                return;
+            }
+            // Wake just after each whole second so digits change on the beat.
+            timer = window.setTimeout(tick, 1000 - (current % 1000) + 8);
+        };
+        timer = window.setTimeout(tick, 0);
+        return () => window.clearTimeout(timer);
+    }, [target]);
+    const { d, h, m, s } = parts(now === null ? 0 : target - now);
+    const pending = now === null;
+    const spoken = pending ? "" : `${d ? `${d} days ` : ""}${h} hours ${m} minutes`;
+    const digits = (value, key) => value.split("").map((char, index) => _jsx(Digit, { char: pending ? "0" : char, reduced: reduced }, `${key}${value.length - index}`));
+    return _jsxs("span", { className: styles.countdown, children: [label ? _jsx("span", { className: styles.countdownLabel, children: label }) : null, _jsxs("span", { role: "timer", "aria-live": "off", "aria-label": spoken, className: styles.time, "data-pending": pending || undefined, children: [d ? _jsxs(_Fragment, { children: [_jsxs("span", { className: styles.unit, children: [digits(String(d), "d"), _jsx("span", { className: styles.unitMark, "aria-hidden": "true", children: "d" })] }), _jsx("span", { className: styles.gap, "aria-hidden": "true" })] }) : null, digits(pad(h), "h"), _jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }), digits(pad(m), "m"), _jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }), digits(pad(s), "s")] })] });
+}
+function Face({ announcement, direction, reduced, position, total, onSize, onAction, onCountdownEnd }) {
+    const ref = useRef(null);
+    const present = useIsPresent();
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !present)
+            return;
+        const report = () => onSize(node.offsetHeight);
+        report();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(report);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [onSize, present]);
+    const { action, countdown } = announcement;
+    const cta = action ? action.href
+        ? _jsxs("a", { className: styles.cta, href: action.href, onClick: () => { action.onClick?.(); onAction?.(announcement); }, children: [action.label, _jsx(ArrowRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] })
+        : _jsxs("button", { type: "button", className: styles.cta, onClick: () => { action.onClick?.(); onAction?.(announcement); }, children: [action.label, _jsx(ArrowRight, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }) : null;
+    return _jsx(motion.div, { ref: ref, className: styles.face, custom: direction, variants: reduced ? fadeVariants : faceVariants, initial: "hidden", animate: "shown", exit: "gone", role: total > 1 ? "group" : undefined, "aria-roledescription": total > 1 ? "slide" : undefined, "aria-label": total > 1 ? `${position} of ${total}` : undefined, inert: !present || undefined, children: _jsxs("p", { className: styles.message, children: [_jsx("span", { className: styles.text, children: announcement.message }), countdown ? _jsx(Countdown, { to: countdown.to, label: countdown.label, reduced: reduced, onEnd: () => onCountdownEnd?.(announcement) }) : null, cta] }) });
+}
+const RING = 2 * Math.PI * 8;
+export const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open: openProp, defaultOpen = true, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, interval = 6000, autoPlay = true, controls = false, dismissible = true, tone = "neutral", onAction, onCountdownEnd, label = "Announcements", className, }, ref) {
+    const reduced = !!useReducedMotion();
+    const uid = useId();
+    const total = messages.length;
+    /* Open state: controlled, or internal and hidden at once when this id was dismissed before. */
+    const [openInternal, setOpenInternal] = useState(defaultOpen);
+    const [remembered, setRemembered] = useState(false);
+    useLayoutEffect(() => {
+        if (!id || openProp !== undefined)
+            return;
+        let stored = false;
+        try {
+            stored = window.localStorage.getItem(storageKey(id)) === "dismissed";
+        }
+        catch { /* Storage can be blocked. */ }
+        // Storage is only readable on the client; hide before paint so a dismissed bar never flashes.
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        if (stored)
+            setRemembered(true);
+    }, [id, openProp]);
+    const open = openProp ?? (openInternal && !remembered);
+    const dismiss = () => {
+        if (id) {
+            try {
+                window.localStorage.setItem(storageKey(id), "dismissed");
+            }
+            catch { /* Storage can be blocked. */ }
+        }
+        if (openProp === undefined)
+            setOpenInternal(false);
+        onOpenChange?.(false);
+    };
+    /* Rotation. */
+    const [indexInternal, setIndexInternal] = useState(defaultIndex);
+    const current = total ? ((indexProp ?? indexInternal) % total + total) % total : 0;
+    const [direction, setDirection] = useState(1);
+    const go = useCallback((step) => {
+        if (total < 2)
+            return;
+        const next = ((current + step) % total + total) % total;
+        setDirection(step > 0 ? 1 : -1);
+        if (indexProp === undefined)
+            setIndexInternal(next);
+        onIndexChange?.(next);
+    }, [current, indexProp, onIndexChange, total]);
+    const [userPaused, setUserPaused] = useState(false);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    useEffect(() => {
+        const read = () => setHidden(document.visibilityState === "hidden");
+        document.addEventListener("visibilitychange", read);
+        return () => document.removeEventListener("visibilitychange", read);
+    }, []);
+    const rotating = autoPlay && !reduced && total > 1;
+    const running = rotating && open && !userPaused && !hovered && !focused && !hidden;
+    /* The ring is the clock: its progress runs to one, then advances. Pausing stops it where it is; resuming finishes the rest. */
+    const progress = useMotionValue(0);
+    const dash = useTransform(progress, value => RING * (1 - value));
+    const goRef = useRef(go);
+    useEffect(() => { goRef.current = go; }, [go]);
+    useEffect(() => { progress.jump(0); }, [current, progress]);
+    useEffect(() => {
+        if (!running)
+            return;
+        let controls = animate(progress, 1, {
+            duration: interval / 1000 * (1 - progress.get()), ease: "linear",
+            onComplete: () => { controls = null; goRef.current(1); },
+        });
+        return () => controls?.stop();
+    }, [running, current, interval, progress]);
+    /* The viewport springs to the height of the current message, which can wrap on narrow screens. */
+    const height = useMotionValue("auto");
+    const measured = useRef(0);
+    const onSize = useCallback((next) => {
+        if (Math.abs(next - measured.current) < .5)
+            return;
+        const first = measured.current === 0;
+        measured.current = next;
+        if (first || reduced)
+            height.jump(next);
+        else
+            animate(height, next, HEIGHT);
+    }, [height, reduced]);
+    const announcement = messages[current];
+    if (!announcement)
+        return null;
+    const navigable = controls && total > 1;
+    const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);
+    return _jsx(AnimatePresence, { initial: false, children: open ? _jsx(motion.section, { ref: ref, className: [styles.collapse, className].filter(Boolean).join(" "), "aria-label": label, "aria-roledescription": total > 1 ? "carousel" : undefined, initial: reduced ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.fast } } : { height: 0, opacity: 0, transition: { height: COLLAPSE, opacity: { duration: motionTokens.duration.exit, ease: standard } } }, transition: reduced ? { duration: motionTokens.duration.fast } : { height: COLLAPSE, opacity: { duration: motionTokens.duration.standard, ease: enter } }, onPointerEnter: event => { if (event.pointerType === "mouse")
+                setHovered(true); }, onPointerLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                setFocused(false); }, children: _jsxs("div", { className: styles.bar, "data-tone": tone, style: { "--controls": controlCount }, children: [_jsx("div", { className: styles.side, "aria-hidden": "true" }), _jsx(motion.div, { className: styles.viewport, style: { height }, id: `${uid}-slides`, "aria-live": running ? "off" : "polite", "aria-atomic": "false", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(Face, { announcement: announcement, direction: direction, reduced: reduced, position: current + 1, total: total, onSize: onSize, onAction: onAction, onCountdownEnd: onCountdownEnd }, announcement.id) }) }), _jsxs("div", { className: styles.controls, children: [navigable ? _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.icon, "aria-label": "Previous announcement", "aria-controls": `${uid}-slides`, onClick: () => go(-1), children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), rotating ? _jsxs("button", { type: "button", className: styles.ring, "aria-label": userPaused ? "Resume announcements" : "Pause announcements", "aria-pressed": userPaused, onClick: () => setUserPaused(paused => !paused), children: [_jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "8", className: styles.ringTrack }), _jsx(motion.circle, { cx: "10", cy: "10", r: "8", className: styles.ringFill, strokeDasharray: RING, style: { strokeDashoffset: dash } })] }), _jsx("span", { className: styles.ringIcon, children: userPaused ? _jsx(Play, { size: 9, strokeWidth: 2.4, "aria-hidden": "true" }) : _jsx(Pause, { size: 9, strokeWidth: 2.4, "aria-hidden": "true" }) })] }) : null, _jsx("button", { type: "button", className: styles.icon, "aria-label": "Next announcement", "aria-controls": `${uid}-slides`, onClick: () => go(1), children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }) : null, dismissible ? _jsx("button", { type: "button", className: styles.icon, "aria-label": "Dismiss", onClick: dismiss, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) : null] })] }) }, "bar") : null });
+});
+export default AnnouncementBar;

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

@@ -0,0 +1,60 @@
+/* The outer section animates its height to zero on dismiss, so whatever sits below eases up with it. */
+.collapse { overflow: hidden; container-type: inline-size; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+
+/* The side column mirrors the controls, so the message stays centered on the page rather than in the leftover space. */
+.bar { --icon: 32px; --control-gap: 2px; --muted: var(--text-secondary); display: grid; grid-template-columns: calc(var(--controls, 0) * var(--icon) + max(var(--controls, 0) - 1, 0) * var(--control-gap)) minmax(0, 1fr) auto; align-items: center; gap: var(--space-group); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--border); background: var(--surface-muted); color: var(--foreground); }
+.bar[data-tone="inverted"] { --muted: color-mix(in oklab, var(--background) 66%, transparent); border-bottom-color: transparent; background: var(--foreground); color: var(--background); }
+
+.side { min-width: 0; }
+.viewport { position: relative; min-height: 32px; overflow: hidden; }
+
+/* Faces overlap in place; the entering one reports its height and the viewport springs to it. */
+.face { position: absolute; top: 0; right: 0; left: 0; display: flex; min-height: 32px; align-items: center; justify-content: center; }
+.message { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; margin: 0; padding: 6px 0; font-size: var(--text-sm); line-height: var(--leading-body); text-align: center; text-wrap: balance; }
+.text { min-width: 0; }
+
+/* The countdown is one run of text: every cell shares the line box, so digits, colons, and the day mark sit on the message baseline. */
+.countdown { display: inline-flex; align-items: baseline; gap: 6px; color: var(--muted); white-space: nowrap; }
+.countdownLabel { color: inherit; }
+.time { display: inline-flex; align-items: baseline; color: var(--foreground); font-variant-numeric: tabular-nums; font-weight: 500; line-height: inherit; }
+.time[data-pending] { opacity: 0; }
+.bar[data-tone="inverted"] .time { color: var(--background); }
+.digit { position: relative; display: inline-block; overflow: hidden; overflow: clip; text-align: center; }
+.digitSizer { visibility: hidden; }
+.digitFace { position: absolute; inset: 0; display: block; }
+.unit { display: inline-flex; align-items: baseline; }
+.unitMark { margin-left: 1px; color: var(--muted); font-weight: 400; }
+/* "case" lifts the colon to the middle of the figures, which it loses once the digits are split into cells. */
+.sep { display: inline-block; padding-inline: 1px; color: var(--muted); font-feature-settings: "case"; font-weight: 400; }
+.gap { display: inline-block; width: .4em; }
+
+.cta { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
+.cta svg { transition: transform var(--duration-fast) var(--ease-standard); }
+
+.controls { display: flex; align-items: center; gap: var(--control-gap); }
+.icon, .ring { position: relative; display: grid; width: var(--icon); height: var(--icon); flex: none; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.icon:active, .ring:active { background: color-mix(in oklab, currentColor 12%, transparent); color: inherit; }
+.ring svg { width: 20px; height: 20px; overflow: visible; transform: rotate(-90deg); }
+.ringTrack { fill: none; stroke: currentColor; stroke-opacity: .22; stroke-width: 1.75; }
+.ringFill { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.75; }
+.ringIcon { position: absolute; inset: 0; display: grid; place-items: center; }
+.ringIcon svg { width: 9px; height: 9px; transform: none; fill: currentColor; }
+.bar[data-tone="inverted"] .icon, .bar[data-tone="inverted"] .ring { color: var(--muted); }
+
+@media (hover: hover) and (pointer: fine) {
+  .icon:hover, .ring:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
+  .bar .icon:hover, .bar .ring:hover { color: var(--foreground); }
+  .bar[data-tone="inverted"] .icon:hover, .bar[data-tone="inverted"] .ring:hover { color: var(--background); }
+  .cta:hover svg { transform: translateX(2px); }
+}
+
+/* Narrow bars drop the mirror column and read from the start edge. */
+@container (max-width: 560px) {
+  .bar { grid-template-columns: 0 minmax(0, 1fr) auto; gap: 0 var(--space-related); padding-left: 14px; }
+  .face { justify-content: flex-start; }
+  .message { justify-content: flex-start; column-gap: 10px; text-align: left; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon, .ring, .cta svg { transition: none; }
+}

package/components/avatar/avatar.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from "react";
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    src?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    status?: "online" | "offline";
+}
+export declare function Avatar({ name, src, size, status, className, ...props }: AvatarProps): import("react").JSX.Element;

package/components/avatar/avatar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { SiliconImage } from "../../lib/silicon-provider.js";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./avatar.module.css";
+export function Avatar({ name, src, size = "md", status, className, ...props }) {
+    const initials = name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("");
+    const reduceMotion = !!useReducedMotion();
+    const image = useRef(null);
+    const [failedSrc, setFailedSrc] = useState();
+    // A photo that is already decoded shows at once. One that is still loading waits, then fades in from a soft blur.
+    useLayoutEffect(() => { const node = image.current; if (node && !node.complete)
+        node.dataset.loading = ""; }, [src]);
+    const showImage = src && failedSrc !== src;
+    return _jsxs("span", { ...props, className: [styles.avatar, styles[size], className].filter(Boolean).join(" "), role: "img", "aria-label": `${name}${status ? `, ${status}` : ""}`, children: [showImage ? _jsx(SiliconImage, { ref: image, src: src, alt: "", fill: true, sizes: size === "xl" ? "88px" : size === "lg" ? "48px" : size === "md" ? "36px" : "28px", onLoad: event => { delete event.currentTarget.dataset.loading; }, onError: () => setFailedSrc(src) }, src) : _jsx("span", { className: src ? styles.fallback : undefined, "aria-hidden": "true", children: initials }), _jsx(AnimatePresence, { initial: false, children: status && _jsx(motion.i, { className: [styles.status, styles[status]].join(" "), "aria-hidden": "true", initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: reduceMotion ? 0 : motionTokens.duration.fast } }, transition: reduceMotion ? { duration: 0 } : motionTokens.spring.snappy }, status) })] });
+}

package/components/avatar/avatar.module.css

@@ -0,0 +1,60 @@
+.avatar {
+  position: relative;
+  display: inline-grid;
+  flex: 0 0 auto;
+  place-items: center;
+  overflow: visible;
+  border: 1px solid var(--border);
+  border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape);
+  background: var(--surface-muted);
+  color: var(--foreground);
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.avatar img {
+  pointer-events: none;
+  border-radius: inherit; corner-shape: inherit;
+  object-fit: cover;
+  transition: opacity var(--duration-standard) var(--ease-enter), filter var(--duration-standard) var(--ease-enter);
+}
+
+/* Set only while a photo is still downloading after mount, so cached photos never fade. */
+.avatar img[data-loading] {
+  opacity: 0;
+  filter: blur(4px);
+  transition: none;
+}
+
+.fallback { animation: avatar-fallback-in var(--duration-standard) var(--ease-enter) both; }
+
+.sm { width: 28px; height: 28px; font-size: 10px; }
+.md { width: 36px; height: 36px; }
+.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
+.xl { width: 88px; height: 88px; font-size: var(--text-xl); }
+
+.status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 10px;
+  height: 10px;
+  border: 2px solid var(--surface);
+  border-radius: var(--radius-full); corner-shape: round;
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
+}
+
+.sm .status { width: 8px; height: 8px; border-width: 1.5px; }
+.lg .status { width: 12px; height: 12px; }
+.xl .status { width: 14px; height: 14px; right: 4px; bottom: 4px; }
+.online { background: var(--success); }
+.offline { background: var(--text-muted); }
+
+@keyframes avatar-fallback-in { from { opacity: 0; } to { opacity: 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .avatar img { transition: none; }
+  .avatar img[data-loading] { filter: none; }
+  .fallback { animation: none; }
+}

package/components/avatar-group/avatar-group.d.ts

@@ -0,0 +1,13 @@
+export interface AvatarGroupMember {
+    name: string;
+    src?: string;
+    status?: "online" | "offline";
+}
+export interface AvatarGroupProps {
+    members: AvatarGroupMember[];
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    label?: string;
+}
+export declare function AvatarGroup({ members, max, size, label }: AvatarGroupProps): import("react").JSX.Element;
+export default AvatarGroup;

package/components/avatar-group/avatar-group.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { Avatar } from "../avatar/avatar.js";
+import styles from "./avatar-group.module.css";
+/** The overflow count rolls the way it moved: more people rise in from below, fewer drop in from above. */
+const rise = { hidden: (direction) => ({ opacity: 0, y: `${.4 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)` }), shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: (direction) => ({ opacity: 0, y: `${-.4 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }) };
+// Same keys as `rise` so the settled style is identical whichever branch renders on the server.
+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 } } };
+// A person joining or leaving opens or closes their slot, so the rest of the stack slides instead of jumping.
+const slot = { initial: { width: 0, opacity: 0, scale: .9 }, animate: { width: "auto", opacity: 1, scale: 1 }, exit: { width: 0, opacity: 0, scale: .9 } };
+export function AvatarGroup({ members, max = 4, size = "md", label = "Team members" }) {
+    const reduceMotion = !!useReducedMotion();
+    const visible = members.slice(0, Math.max(0, max));
+    const overflow = Math.max(0, members.length - visible.length);
+    const transition = reduceMotion ? { duration: 0 } : motionTokens.spring.morph;
+    const [count, setCount] = useState({ overflow, direction: 1 });
+    if (count.overflow !== overflow)
+        setCount({ overflow, direction: overflow < count.overflow ? -1 : 1 });
+    return _jsx("div", { className: [styles.group, styles[size]].join(" "), role: "group", "aria-label": label, style: { "--count": visible.length + (overflow > 0 ? 1 : 0) }, children: _jsxs(AnimatePresence, { initial: false, children: [visible.map((member, index) => _jsx(motion.span, { className: styles.slot, style: { "--index": index }, ...slot, transition: transition, children: _jsxs("span", { className: styles.lift, children: [_jsx(Avatar, { className: styles.avatar, name: member.name, src: member.src, status: member.status, size: size }), _jsx("span", { className: styles.tip, "aria-hidden": "true", children: member.name })] }) }, member.name)), overflow > 0 ? _jsx(motion.span, { className: styles.slot, style: { "--index": visible.length }, ...slot, transition: transition, children: _jsx("span", { className: [styles.lift, styles.overflow, styles[size]].join(" "), role: "img", "aria-label": `${overflow} more ${label.toLowerCase()}`, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: count.direction, children: _jsxs(motion.span, { className: styles.count, custom: count.direction, variants: reduceMotion ? fade : rise, initial: "hidden", animate: "shown", exit: "gone", "aria-hidden": "true", children: ["+", overflow] }, overflow) }) }) }, "overflow") : null] }) });
+}
+export default AvatarGroup;

package/components/avatar-group/avatar-group.module.css

@@ -0,0 +1,27 @@
+.group { --avatar-size: 36px; display: inline-flex; height: var(--avatar-size); align-items: center; padding-left: 6px; }
+.group.sm { --avatar-size: 28px; }
+.group.lg { --avatar-size: 48px; }
+/* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. */
+.slot { position: relative; display: inline-flex; flex: 0 0 auto; height: var(--avatar-size); align-items: center; }
+/* One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
+.lift { --fan: 0px; --aside: 0px; --rise: 0px; position: relative; display: inline-flex; margin-left: -6px; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); transform: translate(calc(var(--fan) + var(--aside)), var(--rise)); transition: transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.avatar, .overflow { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: box-shadow var(--duration-fast) var(--ease-standard); }
+.overflow { position: relative; display: inline-grid; place-items: center; overflow: hidden; border-radius: var(--avatar-radius); corner-shape: var(--avatar-corner-shape); background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; }
+.count { display: inline-block; }
+.overflow.sm { width: 28px; height: 28px; font-size: 10px; }
+.overflow.md { width: 36px; height: 36px; }
+.overflow.lg { width: 48px; height: 48px; font-size: var(--text-sm); }
+/* The name floats above the stack, outside the layout, so showing it never moves anything. */
+.tip { position: absolute; z-index: 2; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
+/* Pointing at the stack loosens its overlap from the center; the person under the pointer lifts with a crisp ring and names themselves, and their neighbors ease aside. */
+@media (hover: hover) and (pointer: fine) {
+  .group:hover .lift { --fan: calc((var(--index) - (var(--count) - 1) / 2) * 4px); }
+  .slot:hover { z-index: 1; }
+  .slot:hover .lift { --rise: -2px; }
+  .slot:hover ~ .slot .lift { --aside: 3px; }
+  .slot:has(~ .slot:hover) .lift { --aside: -3px; }
+  .slot:hover .avatar, .slot:hover .overflow { box-shadow: 0 0 0 1px var(--border-strong); }
+  .slot:hover .tip { opacity: 1; transform: translate(-50%, 0); transition-delay: 60ms; }
+}
+/* Reduced motion keeps the stack still; the ring and name still answer the pointer. */
+@media (prefers-reduced-motion: reduce) { .lift { transform: none !important; transition: none; } .tip { transform: translate(-50%, 0); transition: none; } }

package/components/badge/badge.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger";
+export type BadgeSize = "sm" | "md";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    icon?: ReactNode;
+}
+export declare function Badge({ tone, size, icon, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+export default Badge;

package/components/badge/badge.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./badge.module.css";
+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 fadeOnly = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade, so only the current text is read. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+/** A new icon component crossfades in; re-rendering the same icon stays still. */
+function iconKey(icon) {
+    if (!isValidElement(icon))
+        return "icon";
+    const type = icon.type;
+    return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon";
+}
+export function Badge({ tone = "neutral", size = "md", icon, className, children, ...props }) {
+    const reduce = useReducedMotion();
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : null;
+    const glyphKey = icon ? iconKey(icon) : "";
+    const body = useRef(null);
+    const content = useRef(null);
+    // Width stays auto at rest. Only a new label or icon springs it from the old size to the new one; passive reflows (a font swap, a hidden parent) follow instantly.
+    const width = useMotionValue("auto");
+    const changedAt = useRef(0);
+    useLayoutEffect(() => { changedAt.current = performance.now(); }, [text, glyphKey]);
+    useEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last;
+        let controls;
+        const settle = () => { width.jump("auto"); if (body.current)
+            body.current.style.width = "auto"; };
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth;
+            const current = width.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 width before this frame paints, then spring to the new one.
+            if (body.current)
+                body.current.style.width = `${from}px`;
+            controls = animate(width, [from, next], { ...motionTokens.spring.morph, onComplete: settle });
+        });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); };
+    }, [width, reduce]);
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const classes = [styles.badge, styles[tone], styles[size], className].filter(Boolean).join(" ");
+    // The pill follows its content: text and icon swap in place while the width springs to the new size.
+    return _jsx("span", { ...props, className: classes, children: _jsx(motion.span, { ref: body, className: styles.body, style: { width }, children: _jsxs("span", { ref: content, className: styles.content, children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.glyph, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOnly : { ...iconIn, transition: exitFast }, transition: reduce ? enter : motionTokens.spring.snappy, children: icon }, glyphKey) }) }) : null, text === null ? children : _jsx("span", { className: styles.label, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.text, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOnly : textOut, transition: enter, children: text }, text) }) })] }) }) });
+}
+export default Badge;

package/components/badge/badge.module.css

@@ -0,0 +1,52 @@
+.badge {
+  display: inline-flex;
+  min-height: 26px;
+  align-items: center;
+  border: 1px solid var(--badge-border, var(--border));
+  border-radius: var(--radius-full); corner-shape: round;
+  padding: 0 10px;
+  color: var(--badge-foreground, var(--foreground));
+  background: var(--badge-background, var(--surface));
+  font-size: var(--text-xs);
+  font-weight: 500;
+  letter-spacing: -.01em;
+  line-height: 1;
+  white-space: nowrap;
+  /* Clip keeps the inline baseline while the pill morphs around swapped text. */
+  overflow: clip;
+  transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .badge:hover { border-color: color-mix(in oklab, var(--badge-color, var(--foreground)) 32%, var(--border)); background: color-mix(in oklab, var(--badge-color, var(--foreground)) 10%, var(--surface)); }
+}
+.sm { min-height: 22px; padding: 0 8px; font-size: 11px; }
+.md { font-size: var(--text-xs); }
+
+.body { display: block; }
+.content { position: relative; display: inline-flex; width: max-content; align-items: center; gap: 5px; }
+.sm .content { gap: 4px; }
+.label, .glyph { position: relative; display: inline-flex; align-items: center; }
+.text { display: block; }
+
+.icon {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+  height: auto;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  color: var(--badge-color, var(--foreground));
+  line-height: 1;
+}
+
+.neutral { --badge-color: var(--text-secondary); --badge-foreground: var(--text-secondary); --badge-background: var(--surface-muted); --badge-border: var(--border); }
+.success { --badge-color: var(--success); --badge-foreground: var(--success); --badge-background: color-mix(in oklab, var(--success) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--success) 25%, var(--border)); }
+.info { --badge-color: var(--accent); --badge-foreground: var(--accent-strong); --badge-background: var(--accent-subtle); --badge-border: color-mix(in oklab, var(--accent) 24%, var(--border)); }
+.warning { --badge-color: var(--warning); --badge-foreground: var(--warning); --badge-background: color-mix(in oklab, var(--warning) 11%, var(--surface)); --badge-border: color-mix(in oklab, var(--warning) 27%, var(--border)); }
+.danger { --badge-color: var(--danger); --badge-foreground: var(--danger); --badge-background: color-mix(in oklab, var(--danger) 10%, var(--surface)); --badge-border: color-mix(in oklab, var(--danger) 26%, var(--border)); }
+
+@media (prefers-reduced-motion: reduce) {
+  .badge { transition-duration: var(--duration-instant); }
+}

package/components/bar-chart/bar-chart.d.ts

@@ -0,0 +1,32 @@
+export interface BarChartDatum {
+    /** Stable identity, such as an ISO date. A bar whose key survives a data change keeps its place, so switching ranges morphs instead of redrawing. */
+    key: string;
+    /** Full label for the headline and screen readers, such as "Tue, Sep 15". */
+    label: string;
+    /** Short label under the bar, such as "T" or "Sep 14". Leave it out to keep the axis quiet. */
+    axisLabel?: string;
+    value: number;
+}
+/** Use a bar chart for one measure across a run of days, weeks, or months, when people compare each period against the rest and against the average. */
+export interface BarChartProps {
+    data: BarChartDatum[];
+    /** What is measured, such as "Active minutes". Names the chart for assistive technology. */
+    label: string;
+    /** The range on show, such as "Sep 15–21, 2026". It rests under the headline. */
+    period: string;
+    /** Unit after each value, such as "min". */
+    unit?: string;
+    /** Headline label at rest, above the average. */
+    averageLabel?: string;
+    /** Headline label while a bar is scrubbed. */
+    valueLabel?: string;
+    /** Header of the first column in the data table read by screen readers. */
+    categoryLabel?: string;
+    /** Draws the average as a reference line that springs to each new range. */
+    showAverage?: boolean;
+    /** Plot height in pixels. */
+    height?: number;
+    formatValue?: (value: number) => string;
+}
+export declare function BarChart({ data, label, period, unit, averageLabel, valueLabel, categoryLabel, showAverage, height, formatValue }: BarChartProps): import("react").JSX.Element;
+export default BarChart;