@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/context-menu/context-menu.js

@@ -0,0 +1,148 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Check, Copy, MoreHorizontal, Trash2 } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./context-menu.module.css";
+const MENU_WIDTH = 208;
+// Keeps the menu 8px inside the viewport. Rows are 34px with 5px padding and a 1px border; the real size is measured before paint.
+function clampTo(x, y, width, height) {
+    const left = Math.max(8, Math.min(x, window.innerWidth - width - 8));
+    const top = Math.max(8, Math.min(y, window.innerHeight - height - 8));
+    // The menu grows from the pointer, even when it is clamped away from a viewport edge.
+    return { x: left, y: top, originX: Math.max(0, Math.min(width, x - left)), originY: Math.max(0, Math.min(height, y - top)) };
+}
+export function ContextMenu({ children, items, label = "Context menu" }) {
+    const reduced = useReducedMotion();
+    const [open, setOpen] = useState(false);
+    // The portal mounts on first open (client only) and stays so the menu can animate out.
+    const [portal, setPortal] = useState(false);
+    // Each open gets its own key, so reopening at a new point fades the old menu out in place
+    // and grows a fresh one from the pointer instead of teleporting the visible menu.
+    const [point, setPoint] = useState({ x: 0, y: 0, originX: 0, originY: 0, key: 0 });
+    const [highlight, setHighlight] = useState(null);
+    const menuRef = useRef(null);
+    const targetRef = useRef(null);
+    const pointer = useRef(false);
+    const clearTimer = useRef(0);
+    // A primary press on the target while the menu is open closes it; the click that follows must not reopen it.
+    const pressedWhileOpen = useRef(false);
+    // An exiting menu keeps its last props, so its handlers check this before moving focus or selecting.
+    const live = useRef(false);
+    const anchor = useRef({ x: 0, y: 0 });
+    useEffect(() => { live.current = open; }, [open]);
+    // Re-clamp against the menu's real size before the first frame, so long labels or many rows never overflow the viewport.
+    useLayoutEffect(() => {
+        const node = menuRef.current;
+        if (!open || !node)
+            return;
+        const next = clampTo(anchor.current.x, anchor.current.y, node.offsetWidth, node.offsetHeight);
+        setPoint(current => (current.x === next.x && current.y === next.y && current.originX === next.originX && current.originY === next.originY ? current : { ...next, key: current.key }));
+    }, [open, point.key]);
+    useEffect(() => () => window.clearTimeout(clearTimer.current), []);
+    useEffect(() => {
+        if (!open)
+            return;
+        menuRef.current?.querySelector('[role="menuitem"]:not(:disabled)')?.focus({ preventScroll: true });
+        const closeOnPointerDown = (event) => {
+            if (!menuRef.current?.contains(event.target))
+                setOpen(false);
+        };
+        const closeOnViewportChange = (event) => {
+            if (event.target instanceof Node && menuRef.current?.contains(event.target))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", closeOnPointerDown);
+        window.addEventListener("scroll", closeOnViewportChange, true);
+        window.addEventListener("resize", closeOnViewportChange);
+        return () => {
+            document.removeEventListener("pointerdown", closeOnPointerDown);
+            window.removeEventListener("scroll", closeOnViewportChange, true);
+            window.removeEventListener("resize", closeOnViewportChange);
+        };
+    }, [open, point.key]);
+    function showMenu(x, y) {
+        anchor.current = { x, y };
+        const estimate = clampTo(x, y, MENU_WIDTH, Math.min(300, items.length * 34 + 12));
+        setPoint(current => ({ ...estimate, key: current.key + 1 }));
+        window.clearTimeout(clearTimer.current);
+        pointer.current = false;
+        setHighlight(null);
+        setPortal(true);
+        setOpen(true);
+    }
+    function onTargetKeyDown(event) {
+        if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
+            event.preventDefault();
+            const rect = targetRef.current?.getBoundingClientRect();
+            if (rect)
+                showMenu(rect.left + 12, rect.bottom + 8);
+        }
+    }
+    function onTargetClick() {
+        if (pressedWhileOpen.current) {
+            pressedWhileOpen.current = false;
+            return;
+        }
+        const rect = targetRef.current?.getBoundingClientRect();
+        if (rect)
+            showMenu(rect.left + 12, rect.bottom + 8);
+    }
+    function onMenuKeyDown(event) {
+        const enabled = items.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+        const current = document.activeElement?.getAttribute("data-index");
+        const currentPosition = enabled.findIndex(({ index }) => String(index) === current);
+        let nextPosition;
+        if (event.key === "ArrowDown")
+            nextPosition = (currentPosition + 1) % enabled.length;
+        if (event.key === "ArrowUp")
+            nextPosition = currentPosition < 0 ? enabled.length - 1 : (currentPosition - 1 + enabled.length) % enabled.length;
+        if (event.key === "Home")
+            nextPosition = 0;
+        if (event.key === "End")
+            nextPosition = enabled.length - 1;
+        if (nextPosition !== undefined && enabled.length) {
+            event.preventDefault();
+            event.currentTarget.querySelector(`[data-index="${enabled[nextPosition].index}"]`)?.focus();
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            targetRef.current?.focus();
+        }
+    }
+    function place(item, glide) {
+        window.clearTimeout(clearTimer.current);
+        const next = { index: Number(item.dataset.index), top: item.offsetTop, height: item.offsetHeight, danger: item.dataset.tone === "danger" };
+        setHighlight(current => ({ ...next, glide: glide && current !== null }));
+    }
+    // Keyboard focus places the highlight instantly; the pointer makes it glide between rows.
+    function onMenuFocus(event) {
+        const item = event.target instanceof HTMLElement ? event.target.closest('[role="menuitem"]') : null;
+        if (item) {
+            // A pointer-opened menu focuses its first row without showing a highlight, like a native menu.
+            if (!pointer.current && item.matches(":focus-visible"))
+                place(item, false);
+            return;
+        }
+        // A short grace period keeps the highlight gliding across the gap between rows.
+        window.clearTimeout(clearTimer.current);
+        clearTimer.current = window.setTimeout(() => setHighlight(null), pointer.current ? 70 : 0);
+    }
+    return _jsxs(_Fragment, { children: [_jsx("div", { ref: targetRef, className: styles.target, tabIndex: 0, onPointerDown: event => { pressedWhileOpen.current = open && event.button === 0; }, onClick: onTargetClick, onContextMenu: event => { event.preventDefault(); showMenu(event.clientX, event.clientY); }, onKeyDown: onTargetKeyDown, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, children: children }), portal ? createPortal(_jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: node => { if (node)
+                        menuRef.current = node; }, className: styles.menu, role: "menu", "aria-label": label, tabIndex: -1, style: { left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }, onKeyDown: onMenuKeyDown, onFocus: onMenuFocus, onPointerMoveCapture: () => { pointer.current = true; }, onKeyDownCapture: () => { pointer.current = false; }, onPointerLeave: event => { if (live.current)
+                        event.currentTarget.focus({ preventScroll: true }); }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.danger ? "danger" : undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: highlight?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 }, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.map((item, index) => _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, "data-index": index, "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), onPointerMove: event => { if (!live.current)
+                                return; window.clearTimeout(clearTimer.current); if (document.activeElement !== event.currentTarget)
+                                event.currentTarget.focus({ preventScroll: true }); if (highlight?.index !== index)
+                                place(event.currentTarget, true); }, onPointerLeave: () => { if (live.current)
+                                menuRef.current?.focus({ preventScroll: true }); }, onClick: () => { if (!live.current)
+                                return; live.current = false; item.onSelect?.(); setOpen(false); targetRef.current?.focus(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon ?? (item.checked ? _jsx(Check, { size: 15 }) : _jsx(MoreHorizontal, { size: 15 })) }), _jsx("span", { children: item.label })] }, item.id))] }, point.key) }), document.body) : null] });
+}
+export const contextMenuExampleItems = [
+    { id: "copy", label: "Copy link", icon: _jsx(Copy, { size: 15 }) },
+    { id: "delete", label: "Delete project", icon: _jsx(Trash2, { size: 15 }), destructive: true },
+];
+export default ContextMenu;

package/components/context-menu/context-menu.module.css

@@ -0,0 +1,17 @@
+.target { display: block; outline: none; }
+/* Motion scales the menu from the pointer (transform-origin is set inline) and fades it out faster than it arrives. */
+.menu { position: fixed; z-index: 100; min-width: min(13rem, calc(100vw - 16px)); max-width: calc(100vw - 16px); max-height: min(300px, calc(100vh - 16px)); overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); outline: none; }
+.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
+.item { position: relative; display: flex; width: 100%; min-height: 34px; align-items: center; gap: 9px; padding: 0 11px; border: 0; border-radius: calc(var(--radius-container) - 6px); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: left; cursor: pointer; outline: none; transition: background-color var(--duration-instant) var(--ease-standard), color var(--duration-fast) var(--ease-standard); animation: context-item-in var(--duration-standard) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }
+/* The gliding highlight is the focus indicator, as in the dropdown menu. */
+.item:focus-visible { outline: none; }
+/* Rows press with a tint, not a scale. */
+.item:active:not(:disabled) { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
+.item:disabled { opacity: .45; cursor: default; }
+.item.destructive { color: var(--danger); }
+.icon { display: inline-flex; flex: none; width: 16px; align-items: center; justify-content: center; color: var(--text-secondary); }
+.item > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.destructive .icon { color: currentColor; }
+@keyframes context-item-in { from { opacity: 0; transform: translateY(-2px); } }
+@media (prefers-reduced-motion: reduce) { .item, .highlight { animation: none; transition: none; } }

package/components/copy-button/copy-button.d.ts

@@ -0,0 +1,10 @@
+export interface CopyButtonProps {
+    value: string;
+    label?: string;
+    className?: string;
+    iconOnly?: boolean;
+    variant?: "outline" | "plain";
+    disabled?: boolean;
+    onCopied?: () => void;
+}
+export declare function CopyButton({ value, label, className, iconOnly, variant, disabled, onCopied }: CopyButtonProps): import("react").JSX.Element;

package/components/copy-button/copy-button.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { CircleAlert, Copy } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { useCopyFeedback } from "../../lib/use-copy-feedback.js";
+import styles from "./copy-button.module.css";
+/** Copy feedback is deliberately unhurried: a slow, almost critically damped spring and long, soft crossfades read as calm, never busy.
+ *  The same motion plays in reverse when the confirmation hands back to idle, so nothing ever snaps. */
+const settle = { type: "spring", visualDuration: .5, bounce: .06 };
+const enter = { duration: .36, ease: [...motionTokens.ease.enter] };
+const leave = { duration: .2, ease: [...motionTokens.ease.standard] };
+const instant = { duration: motionTokens.duration.instant };
+const soft = `blur(${motionTokens.blur.soft}px)`;
+const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
+const fadeIn = { ...rest, opacity: 0 };
+const fadeOut = { opacity: 0, transition: instant };
+/** Icons trade places in one soft breath: the old glyph shrinks into a blur while the new one grows out of it on the slow spring. */
+const iconIn = { opacity: 0, scale: .6, filter: soft };
+const iconOut = { opacity: 0, scale: .6, filter: soft, transition: { duration: .24, ease: [...motionTokens.ease.standard] } };
+const iconEnter = { scale: settle, opacity: { ...enter, delay: .03 }, filter: { ...enter, delay: .03 } };
+/** Letters rise about .3em out of a soft blur; the outgoing ones lift away a little faster. */
+const glyphIn = { opacity: 0, y: 4, filter: soft };
+const glyphOut = { opacity: 0, y: -3, filter: soft, transition: leave };
+/** The success tick draws itself from its short stroke, the way a hand would write it: quick to start, then easing into place while the icon settles. */
+function DrawnCheck({ reduced }) {
+    return _jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(motion.path, { d: "M4 12l5 5L20 6", initial: reduced ? false : { pathLength: 0, opacity: 0 }, animate: { pathLength: 1, opacity: 1 }, transition: { pathLength: { duration: .5, ease: [...motionTokens.ease.standard], delay: .05 }, opacity: { duration: .01, delay: .05 } } }) });
+}
+const toGlyphs = (chars, seq) => chars.map((char, order) => ({ id: `${seq}:${order}`, char, order }));
+/** Shared leading and trailing characters keep their identity, so "Copy" to "Copied" only replaces the changed letters. */
+function useGlyphs(text) {
+    const [state, setState] = useState(() => ({ text, seq: 0, glyphs: toGlyphs([...text], 0) }));
+    if (state.text === text)
+        return state.glyphs;
+    const prev = [...state.text], next = [...text];
+    let start = 0, end = 0;
+    while (start < prev.length && start < next.length && prev[start] === next[start])
+        start++;
+    while (end < prev.length - start && end < next.length - start && prev[prev.length - 1 - end] === next[next.length - 1 - end])
+        end++;
+    if (start < 2)
+        start = 0;
+    if (end < 2)
+        end = 0;
+    const seq = state.seq + 1;
+    const glyphs = [...state.glyphs.slice(0, start), ...toGlyphs(next.slice(start, next.length - end), seq), ...state.glyphs.slice(state.glyphs.length - end)];
+    setState({ text, seq, glyphs });
+    return glyphs;
+}
+/**
+ * The label cell already reserves its widest state, so the row stays put and only the letters move. It is a layout root:
+ * the letters measure their glide inside the label only, so when the button itself moves (a page entering, a panel
+ * sliding, a list reflowing) they ride along instead of flying in from where the button used to be.
+ */
+function MorphText({ text, reduced }) {
+    const glyphs = useGlyphs(text);
+    return _jsx(motion.span, { className: styles.glyphs, layoutRoot: true, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: glyphs.map(glyph => _jsx(motion.span, { className: styles.glyph, layout: reduced ? false : "position", layoutDependency: text, initial: reduced ? fadeIn : glyphIn, animate: rest, exit: reduced ? fadeOut : glyphOut, transition: reduced ? instant : { ...enter, delay: Math.min(glyph.order * .02, .12), layout: settle }, children: glyph.char }, glyph.id)) }) });
+}
+export function CopyButton({ value, label = "Copy", className, iconOnly = false, variant = "outline", disabled, onCopied }) {
+    const { state, copy } = useCopyFeedback();
+    const reduced = useReducedMotion() ?? false;
+    const text = state === "copied" ? "Copied" : state === "error" ? "Failed" : label;
+    async function handleCopy() {
+        if (await copy(value))
+            onCopied?.();
+    }
+    return _jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: [styles.button, iconOnly && styles.iconOnly, variant === "plain" && styles.plain, className].filter(Boolean).join(" "), onClick: () => void handleCopy(), "aria-label": label, "data-copy-state": state, disabled: disabled, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { className: styles.iconInner, "data-state": state, initial: reduced ? fadeIn : iconIn, animate: rest, exit: reduced ? fadeOut : iconOut, transition: reduced ? instant : iconEnter, children: state === "copied" ? _jsx(DrawnCheck, { reduced: reduced }) : state === "error" ? _jsx(CircleAlert, { size: 16, strokeWidth: 1.75 }) : _jsx(Copy, { size: 16, strokeWidth: 1.75 }) }, state) }) }), !iconOnly && _jsxs("span", { className: styles.label, "aria-hidden": "true", children: [_jsx("span", { className: styles.measure, children: label }), _jsx("span", { className: styles.measure, children: "Copied" }), _jsx("span", { className: styles.measure, children: "Failed" }), _jsx(MorphText, { text: text, reduced: reduced })] })] }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: state === "idle" ? "" : state === "error" ? `${label}: Could not copy` : `${label}: Copied` })] });
+}

package/components/copy-button/copy-button.module.css

@@ -0,0 +1,21 @@
+/* Width never changes: the label cell reserves its widest state while icon and letters crossfade inside it. Press releases on the spring curve. */
+.button { display: inline-flex; width: max-content; max-width: 100%; min-height: var(--control-height-sm); align-items: center; justify-content: center; gap: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-group); background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-instant); transition-timing-function: var(--ease-standard); }
+.iconOnly:active:not(:disabled) { transform: scale(.96); }
+@media (hover: hover) and (pointer: fine) { .button:hover:not(:disabled) { background: var(--surface-muted); border-color: var(--border-strong); } .plain:hover:not(:disabled) { border-color: transparent; background: var(--surface-muted); color: var(--foreground); } }
+.button:disabled { cursor: not-allowed; opacity: .5; }
+/* Each icon carries its own color, so the outgoing glyph never tints on its way out. */
+.icon { position: relative; display: grid; width: 16px; height: 16px; flex: none; }
+.iconInner { position: absolute; inset: 0; display: grid; place-items: center; }
+.iconInner[data-state="copied"] { color: var(--success); }
+.iconInner[data-state="error"] { color: var(--danger); }
+/* The inline padding gives blurred edge letters room before the horizontal clip; the negative margin keeps the box the same size. */
+.label { display: grid; min-width: 0; margin-inline: calc(var(--space-tight) * -1); padding-inline: var(--space-tight); overflow-x: clip; text-align: left; white-space: nowrap; }
+.measure, .glyphs { grid-area: 1 / 1; }
+.measure { visibility: hidden; }
+.glyphs { position: relative; display: inline-flex; justify-self: start; white-space: pre; }
+.glyph { display: inline-block; }
+.iconOnly { width: var(--control-height-sm); padding: 0; }
+.plain { border-color: transparent; background: transparent; color: var(--text-secondary); }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:active:not(:disabled) { transform: none; } }

package/components/countdown/countdown.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode, type Ref } from "react";
+export type CountdownUnit = "days" | "hours" | "minutes" | "seconds";
+/** Use a countdown for a fixed moment people wait for: a launch, a live event, or a deadline. */
+export interface CountdownProps {
+    /**
+     * The moment to count down to. A number is epoch milliseconds, a Date is used as is, and an ISO string with `Z` or an offset
+     * such as `2026-10-06T10:00:00-07:00` is exact. A string without an offset is wall time in `timeZone`, or UTC when no zone is given,
+     * so the result never depends on the visitor's own time zone.
+     */
+    target: Date | number | string;
+    /** IANA zone for a target string without an offset, such as "America/Los_Angeles". Daylight saving is resolved for the target date. */
+    timeZone?: string;
+    /** Units to show, largest first. The largest unit absorbs the rest, so hours can pass 24 when days are left out. */
+    units?: CountdownUnit[];
+    /** Large digits with unit labels, or one compact line for banners and table cells. */
+    variant?: "large" | "compact";
+    /** Shown once the target passes. The digits morph into it. */
+    completeLabel?: ReactNode;
+    /** Fires once, the moment the countdown reaches zero while mounted. It fires on time even when the tab is hidden. */
+    onComplete?: () => void;
+    /** Accessible name, such as "Keynote starts in". */
+    label?: string;
+    /** Clock source in epoch milliseconds. Pass a server-synced clock when the visitor's device time cannot be trusted. */
+    clock?: () => number;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+}
+/** Resolves a countdown target to epoch milliseconds without ever reading the device's own time zone. */
+export declare function toEpoch(target: Date | number | string, timeZone?: string): number;
+export declare function Countdown({ target, timeZone, units, variant, completeLabel, onComplete, label, clock, ref, className }: CountdownProps): import("react").JSX.Element;
+export default Countdown;

package/components/countdown/countdown.js

@@ -0,0 +1,177 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./countdown.module.css";
+const { spring, stagger } = motionTokens;
+const DEFAULT_UNITS = ["days", "hours", "minutes", "seconds"];
+const SECONDS = { days: 86400, hours: 3600, minutes: 60, seconds: 1 };
+/** How far each unit counts before carrying into the next, when a larger unit is shown. */
+const LIMIT = { days: Infinity, hours: 24, minutes: 60, seconds: 60 };
+const NAMES = { days: ["Days", "d", "day"], hours: ["Hours", "h", "hour"], minutes: ["Minutes", "m", "minute"], seconds: ["Seconds", "s", "second"] };
+const MAX_TIMEOUT = 2147483647;
+const systemClock = () => Date.now();
+/** Offset of a zone from UTC at an instant, in milliseconds. */
+function zoneOffset(epoch, timeZone) {
+    const parts = new Intl.DateTimeFormat("en-US", { timeZone, hourCycle: "h23", year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }).formatToParts(new Date(epoch));
+    const get = (type) => Number(parts.find(part => part.type === type)?.value ?? 0);
+    return Date.UTC(get("year"), get("month") - 1, get("day"), get("hour"), get("minute"), get("second")) - Math.floor(epoch / 1000) * 1000;
+}
+/** Resolves a countdown target to epoch milliseconds without ever reading the device's own time zone. */
+export function toEpoch(target, timeZone) {
+    if (typeof target === "number")
+        return target;
+    if (target instanceof Date)
+        return target.getTime();
+    const wall = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?)?$/.exec(target.trim());
+    if (!wall)
+        return Date.parse(target);
+    const utc = Date.UTC(+wall[1], +wall[2] - 1, +wall[3], +(wall[4] ?? 0), +(wall[5] ?? 0), +(wall[6] ?? 0));
+    if (!timeZone)
+        return utc;
+    // Two passes settle the offset across a daylight saving change.
+    const guess = utc - zoneOffset(utc, timeZone);
+    return utc - zoneOffset(guess, timeZone);
+}
+/** Whole seconds left, split across the units on show. */
+function partsFor(seconds, units) {
+    return units.map((unit, index) => ({ unit, value: index === 0 ? Math.floor(seconds / SECONDS[unit]) : Math.floor(seconds / SECONDS[unit]) % LIMIT[unit] }));
+}
+/** Wheel sizes per column: a tens column that only ever shows 0 to 5 turns on a six-digit wheel, so 00 → 59 is a single step. */
+function basesFor(unit, largest, length) {
+    return Array.from({ length }, (_, index) => {
+        const tens = index === length - 2 && length === 2 && !largest;
+        return tens ? (unit === "hours" ? 3 : 6) : 10;
+    });
+}
+const subscribeNothing = () => () => { };
+const subscribeVisibility = (notify) => { document.addEventListener("visibilitychange", notify); return () => document.removeEventListener("visibilitychange", notify); };
+/** One digit on a wheel. Its offset from the wheel position decides where it sits and how clearly it shows. */
+function Glyph({ position, digit, base }) {
+    const offset = useTransform(position, current => ((((digit - current) % base) + base * 1.5) % base) - base / 2);
+    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 });
+}
+/** A digit wheel that takes the short way round, so a countdown ticks downward and a wrap such as 00 → 59 is one step. */
+function Wheel({ digit, base, delay, reduced }) {
+    const position = useMotionValue(0);
+    const wheel = useRef({ digit: 0, target: 0, revealed: false });
+    useEffect(() => {
+        const state = wheel.current;
+        if (state.digit === digit) {
+            state.revealed = true;
+            return;
+        }
+        const up = (digit - state.digit + base) % base, down = base - up;
+        state.target += down <= up ? -down : up;
+        state.digit = digit;
+        const first = !state.revealed;
+        state.revealed = true;
+        // A new animation on the same value takes over from the one in flight, keeping its velocity; no cleanup, so a re-run never strands a wheel mid-turn.
+        if (reduced)
+            position.jump(state.target);
+        else
+            animate(position, state.target, first ? { ...spring.smooth, delay } : spring.snappy);
+    }, [base, delay, digit, position, reduced]);
+    return _jsxs(motion.span, { className: styles.wheel, initial: { width: 0, opacity: 0 }, animate: { width: "auto", opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: reduced ? { duration: 0 } : spring.morph, children: [_jsx("span", { className: styles.sizer, children: "0" }), Array.from({ length: base }, (_, value) => _jsx(Glyph, { position: position, digit: value, base: base }, value))] });
+}
+export function Countdown({ target, timeZone, units = DEFAULT_UNITS, variant = "large", completeLabel = "Live now", onComplete, label = "Time remaining", clock = systemClock, ref, className }) {
+    const root = useRef(null);
+    useImperativeHandle(ref, () => root.current);
+    const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+    const reduced = !!useReducedMotion() && hydrated;
+    const end = toEpoch(target, timeZone);
+    const valid = Number.isFinite(end);
+    const shownUnits = units.length ? [...units].sort((a, b) => SECONDS[b] - SECONDS[a]) : DEFAULT_UNITS;
+    // The clock only ticks while the countdown is on screen and the tab is visible; coming back reads the clock again, so nothing drifts.
+    const pageVisible = useSyncExternalStore(subscribeVisibility, () => document.visibilityState === "visible", () => true);
+    const inView = useInView(root, { amount: 0 });
+    const running = pageVisible && inView && valid;
+    const [now, setNow] = useState(null);
+    const clockRef = useRef(clock);
+    useLayoutEffect(() => { clockRef.current = clock; });
+    useEffect(() => {
+        if (!running)
+            return;
+        let timer;
+        const tick = () => {
+            const time = clockRef.current();
+            setNow(time);
+            const left = end - time;
+            // Wake just after the next whole second, aligned to the target rather than to when the page loaded.
+            if (left > 0)
+                timer = setTimeout(tick, (left % 1000 || 1000) + 8);
+        };
+        timer = setTimeout(tick, 0);
+        return () => clearTimeout(timer);
+    }, [end, running]);
+    // Completion is armed separately, so it lands on time even while ticking is paused.
+    useEffect(() => {
+        if (!valid)
+            return;
+        const left = end - clockRef.current();
+        if (left <= 0)
+            return;
+        const timer = setTimeout(() => setNow(clockRef.current()), Math.min(MAX_TIMEOUT, left + 8));
+        return () => clearTimeout(timer);
+    }, [end, valid]);
+    const left = now === null || !valid ? null : Math.max(0, end - now);
+    const complete = left === 0;
+    const onCompleteRef = useRef(onComplete);
+    useLayoutEffect(() => { onCompleteRef.current = onComplete; });
+    const wasRunning = useRef(null);
+    useEffect(() => {
+        if (left === null)
+            return;
+        if (left > 0) {
+            wasRunning.current = end;
+            return;
+        }
+        if (wasRunning.current === end) {
+            wasRunning.current = null;
+            onCompleteRef.current?.();
+        }
+    }, [end, left]);
+    const seconds = left === null ? 0 : Math.ceil(left / 1000);
+    const parts = partsFor(seconds, shownUnits);
+    const pending = left === null;
+    const compact = variant === "compact";
+    // The shell springs to the size of whatever it holds, so the digits can morph into the finished label without a jump.
+    const content = useRef(null);
+    const width = useMotionValue("auto"), height = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = content.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let first = true;
+        const observer = new ResizeObserver(() => {
+            const w = node.offsetWidth, h = node.offsetHeight;
+            if (first || reduced) {
+                width.jump(w);
+                height.jump(h);
+                first = false;
+                return;
+            }
+            animate(width, w, spring.morph);
+            animate(height, h, spring.smooth);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [height, reduced, width]);
+    const spoken = complete ? (typeof completeLabel === "string" ? completeLabel : "Complete") : pending ? "" : parts.filter((part, index) => part.value > 0 || index === parts.length - 1).filter(part => seconds < 60 || part.unit !== "seconds").map(part => `${part.value} ${part.value === 1 ? NAMES[part.unit][2] : `${NAMES[part.unit][2]}s`}`).join(", ");
+    const swap = reduced
+        ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: motionTokens.duration.fast } }
+        : { initial: { opacity: 0, scale: .92, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { opacity: 0, scale: .92, filter: `blur(${motionTokens.blur.soft}px)`, transition: { duration: motionTokens.duration.fast } }, transition: spring.morph };
+    return _jsxs("div", { ref: root, className: [styles.countdown, className].filter(Boolean).join(" "), "data-variant": variant, "data-complete": complete || undefined, "data-pending": pending || undefined, role: "timer", "aria-label": label, children: [_jsx(motion.div, { className: styles.shell, style: { width, height }, children: _jsx("div", { ref: content, className: styles.content, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: complete
+                            ? _jsxs(motion.span, { className: styles.done, ...swap, children: [_jsx("span", { className: styles.pulse }), completeLabel] }, "done")
+                            : _jsx(motion.span, { className: styles.units, ...swap, children: parts.map((part, group) => {
+                                    const text = String(part.value).padStart(2, "0");
+                                    const bases = basesFor(part.unit, group === 0, text.length);
+                                    return _jsxs("span", { className: styles.unit, children: [!compact && group > 0 && _jsx("span", { className: styles.colon, children: ":" }), _jsxs("span", { className: styles.group, children: [_jsx("span", { className: styles.number, children: _jsx(AnimatePresence, { initial: false, children: [...text].map((char, index) => _jsx(Wheel, { digit: Number(char), base: bases[index], delay: Math.min((group * 2 + index) * stagger.item, .3), reduced: reduced }, `${part.unit}${text.length - index}`)) }) }), _jsx("span", { className: styles.name, children: NAMES[part.unit][compact ? 1 : 0] })] })] }, part.unit);
+                                }) }, "running") }) }) }), _jsx("span", { className: styles.srOnly, children: spoken })] });
+}
+export default Countdown;

package/components/countdown/countdown.module.css

@@ -0,0 +1,49 @@
+.countdown { position: relative; min-width: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+.countdown[data-variant="large"] { container-type: inline-size; display: flex; justify-content: center; }
+.countdown[data-variant="compact"] { display: inline-flex; vertical-align: middle; }
+
+/* The shell springs to whatever it holds; the compact pill shows that morph as its own outline. */
+.shell { position: relative; display: flex; justify-content: center; }
+.content { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; }
+.countdown[data-variant="compact"] .shell { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.countdown[data-variant="compact"] .content { min-height: 32px; padding: 0 var(--space-group); }
+.countdown[data-variant="compact"][data-complete] .shell { border-color: color-mix(in oklab, var(--success) 35%, var(--border)); background: color-mix(in oklab, var(--success) 9%, var(--surface)); }
+
+.units { display: inline-flex; align-items: flex-start; white-space: nowrap; }
+.unit { display: inline-flex; align-items: flex-start; }
+.group { display: inline-grid; justify-items: center; gap: 6px; }
+.number { display: inline-flex; font-variant-numeric: tabular-nums; transition: opacity var(--duration-considered) var(--ease-standard); }
+.countdown[data-pending] .number { opacity: .3; }
+.name { color: var(--text-muted); font-size: var(--text-xs); line-height: 1; }
+.colon { color: var(--text-muted); opacity: .6; }
+
+/* Large: display digits sized to the container, so four groups fit at 320px and breathe on a wide card. */
+.countdown[data-variant="large"] .units { gap: 0; font-family: var(--font-display); font-size: clamp(1.75rem, 12.5cqi, var(--text-5xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; }
+.countdown[data-variant="large"] .colon { padding-inline: .12em; line-height: 1; transform: translateY(-.06em); }
+/* On a narrow card the unit names outgrow the digits; an even column floor keeps the colons evenly spaced instead of following each name's width. */
+.countdown[data-variant="large"] .group { min-width: min(calc((100cqi - 1.6em) / 4), calc(var(--text-xs) * 4.2)); }
+.countdown[data-variant="large"] .name { font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+
+/* Compact: one line, digits then a quiet unit letter. */
+.countdown[data-variant="compact"] .units { gap: 6px; font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
+.countdown[data-variant="compact"] .group { display: inline-flex; align-items: baseline; gap: 1px; }
+.countdown[data-variant="compact"] .name { font-size: var(--text-sm); font-weight: 400; line-height: 1.3; }
+
+/* Each digit is a clipped wheel whose window feathers out, so a turning digit fades at the edge instead of being cut. */
+.wheel { --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; }
+
+/* Finished: the digits give way to the label and a live mark. */
+.done { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
+.countdown[data-variant="large"] .done { font-family: var(--font-display); font-size: clamp(1.75rem, 11cqi, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; }
+.countdown[data-variant="compact"] .done { color: var(--success); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; }
+.pulse { position: relative; width: .3em; height: .3em; min-width: 8px; min-height: 8px; flex: none; border-radius: 50%; corner-shape: round; background: var(--success); }
+.pulse::after { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--success); content: ""; animation: pulse 2s var(--ease-standard) infinite; }
+@keyframes pulse { from { opacity: .5; transform: scale(1); } 70%, to { opacity: 0; transform: scale(2.6); } }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) {
+  .pulse::after { animation: none; }
+  .number, .shell { transition: none; }
+}

package/components/date-picker/date-picker.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonHTMLAttributes } from "react";
+import { type CalendarDateMatcher } from "../calendar/calendar.js";
+export interface DatePickerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onChange"> {
+    label: string;
+    value?: Date;
+    onChange?: (date: Date | undefined) => void;
+    description?: string;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: CalendarDateMatcher;
+    locale?: string;
+    format?: Intl.DateTimeFormatOptions;
+    /** Adds a Today button to the calendar header. */
+    showToday?: boolean;
+}
+export declare function DatePicker({ label, value, onChange, description, placeholder, minDate, maxDate, disabledDates, locale, format, showToday, id, className, disabled, ...buttonProps }: DatePickerProps): import("react").JSX.Element;