@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/theme-switch/theme-switch.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Moon, Sun } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { Button } from "../button/button.js";
+import styles from "./theme-switch.module.css";
+/** Rotation and scale ride the spring; opacity and blur tween so the blur never overshoots below zero. */
+const iconSpring = { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] }, filter: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } };
+const iconExit = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const blur = `blur(${motionTokens.blur.subtle}px)`;
+/** A stored preference usually reaches the theme prop just after hydration. That correction swaps the icon in place;
+ *  only changes after the first painted frames animate, so a page that loads in dark mode never spins its switches. */
+function useSettled() {
+    const [settled, setSettled] = useState(false);
+    useEffect(() => {
+        let second = 0;
+        const first = requestAnimationFrame(() => { second = requestAnimationFrame(() => setSettled(true)); });
+        return () => { cancelAnimationFrame(first); cancelAnimationFrame(second); };
+    }, []);
+    return settled;
+}
+/** Both icons turn the same way (clockwise into dark, back out of it), so the swap reads as one rotation rather than two fades. */
+function ThemeIcon({ theme, reduced, settled }) {
+    const Icon = theme === "light" ? Sun : Moon;
+    const angle = theme === "light" ? 30 : -30;
+    return (_jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.icon, initial: !settled ? false : reduced ? { opacity: 0 } : { opacity: 0, scale: .7, rotate: angle, filter: blur }, animate: { opacity: 1, scale: 1, rotate: 0, filter: "blur(0px)" }, exit: !settled ? { opacity: 0, transition: { duration: 0 } } : reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .7, rotate: angle, filter: blur, transition: iconExit }, transition: reduced ? { duration: motionTokens.duration.instant } : iconSpring, "aria-hidden": "true", children: _jsx(Icon, { size: 16, strokeWidth: 1.75 }) }, theme) }));
+}
+export function ThemeSwitch({ theme, variant = "reveal", onThemeChange, label, iconOnly = false }) {
+    const reduced = useReducedMotion() ?? false;
+    const settled = useSettled();
+    const next = theme === "light" ? "dark" : "light";
+    const classes = [styles.themeSwitch, styles[variant], iconOnly ? styles.iconOnly : "", settled ? styles.settled : ""].join(" ");
+    return (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", className: classes, "data-theme": theme, "aria-label": label ?? `Switch to ${next} mode`, "aria-pressed": theme === "dark", onClick: event => onThemeChange(next, variant, event.currentTarget), children: [_jsx("span", { className: styles.iconWrap, children: _jsx(ThemeIcon, { theme: theme, reduced: reduced, settled: settled }) }), !iconOnly && _jsx("span", { className: styles.label, children: "Switch theme" })] }));
+}
+export default ThemeSwitch;

package/components/theme-switch/theme-switch.module.css

@@ -0,0 +1,31 @@
+/* Each transition uses the same library Button, which owns the press scale; this file only animates the icon in place. */
+.themeSwitch {
+  position: relative;
+  width: auto;
+  padding-inline: var(--space-group);
+}
+.iconOnly { width: 38px; min-width: 38px; height: 38px; min-height: 38px; border-radius: var(--radius-control); padding: 0; }
+@media (hover: hover) and (pointer: fine) {
+  .themeSwitch:hover:not(:disabled) { border-color: var(--border-strong); }
+  .iconOnly:hover:not(:disabled) { background: var(--surface-muted); box-shadow: none; }
+}
+.iconWrap {
+  position: relative;
+  display: inline-grid;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  place-items: center;
+}
+/* The nudge only eases once the switch has settled, so a theme that arrives during hydration lands without motion. */
+.settled .iconWrap { transition: transform var(--duration-spring) var(--ease-spring); }
+.icon { position: absolute; display: grid; width: 18px; height: 18px; place-items: center; }
+.label { white-space: nowrap; }
+/* Each variant nudges the icon the way its page transition travels, and eases back when the theme returns. */
+.themeSwitch.reveal[data-theme="dark"] .iconWrap { transform: scale(1.08); }
+.themeSwitch.eclipse[data-theme="dark"] .iconWrap { transform: translateX(-2px); }
+.themeSwitch.split[data-theme="dark"] .iconWrap { transform: translateX(1px); }
+.themeSwitch.rise[data-theme="dark"] .iconWrap { transform: translateY(-2px); }
+@media (prefers-reduced-motion: reduce) {
+  .settled .iconWrap { transition: none; }
+}

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

@@ -0,0 +1,13 @@
+export interface TimePickerProps {
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    description?: string;
+    placeholder?: string;
+    minuteStep?: 1 | 5 | 10 | 15 | 30;
+    format?: "12h" | "24h";
+    disabled?: boolean;
+    className?: string;
+}
+export declare function TimePicker({ label, value, defaultValue, onChange, description, placeholder, minuteStep, format, disabled, className }: TimePickerProps): import("react").JSX.Element;

package/components/time-picker/time-picker.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown, Clock3 } from "lucide-react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./time-picker.module.css";
+const pad = (value) => String(value).padStart(2, "0");
+const toMinutes = (value) => { const [h = NaN, m = NaN] = value.split(":").map(Number); return Number.isFinite(h) && Number.isFinite(m) ? h * 60 + m : 0; };
+const enter = motionTokens.ease.enter;
+const standard = motionTokens.ease.standard;
+/** The shown time rolls like a clock face: a later time rises from below, an earlier one drops from above. */
+const valueRoll = {
+    enter: (direction) => ({ opacity: 0, y: `${direction * 0.35}em`, filter: `blur(${motionTokens.blur.soft}px)` }),
+    center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: enter } },
+    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: standard } }),
+};
+/** Reduced motion keeps a short crossfade; the resting state matches valueRoll so server and client markup agree. */
+const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
+export function TimePicker({ label, value, defaultValue = "09:00", onChange, description, placeholder = "Select a time", minuteStep = 15, format = "12h", disabled = false, className }) {
+    const id = useId();
+    const labelId = `${id}-label`;
+    const valueId = `${id}-value`;
+    const rootRef = useRef(null);
+    const optionRefs = useRef([]);
+    const centerOnOpen = useRef(false);
+    const [internal, setInternal] = useState(defaultValue);
+    const [open, setOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const selected = value ?? internal;
+    const reduce = useReducedMotion();
+    const [previous, setPrevious] = useState(selected);
+    const [direction, setDirection] = useState(1);
+    if (previous !== selected) {
+        setPrevious(selected);
+        setDirection(toMinutes(selected) >= toMinutes(previous) ? 1 : -1);
+    }
+    const options = Array.from({ length: Math.ceil(1440 / minuteStep) }, (_, index) => { const minutes = index * minuteStep; const hour = Math.floor(minutes / 60); const minute = minutes % 60; return `${pad(hour)}:${pad(minute)}`; });
+    const display = (raw) => { const minutes = toMinutes(raw); const hour = Math.floor(minutes / 60); const minute = minutes % 60; return format === "24h" ? `${pad(hour)}:${pad(minute)}` : `${hour % 12 || 12}:${pad(minute)} ${hour < 12 ? "AM" : "PM"}`; };
+    useEffect(() => { const close = (event) => { if (!rootRef.current?.contains(event.target))
+        setOpen(false); }; document.addEventListener("pointerdown", close); return () => document.removeEventListener("pointerdown", close); }, []);
+    // Runs before paint so the menu's first frame is already centered on the selected time.
+    useLayoutEffect(() => {
+        if (!open || activeIndex < 0)
+            return;
+        // Scroll only the menu, never the page: the selected time opens centered, arrow keys then keep the highlight in view.
+        const option = optionRefs.current[activeIndex];
+        const menu = option?.parentElement;
+        if (!option || !menu)
+            return;
+        const top = option.offsetTop;
+        const bottom = top + option.offsetHeight;
+        if (centerOnOpen.current) {
+            centerOnOpen.current = false;
+            menu.scrollTop = top - (menu.clientHeight - option.offsetHeight) / 2;
+        }
+        else if (top < menu.scrollTop)
+            menu.scrollTop = top;
+        else if (bottom > menu.scrollTop + menu.clientHeight)
+            menu.scrollTop = bottom - menu.clientHeight;
+    }, [activeIndex, open]);
+    const choose = (next) => { if (value === undefined)
+        setInternal(next); onChange?.(next); setOpen(false); };
+    const openMenu = () => {
+        const selectedIndex = options.indexOf(selected);
+        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+        centerOnOpen.current = true;
+        setOpen(true);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setOpen(false);
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (open && activeIndex >= 0)
+                choose(options[activeIndex]);
+            else
+                openMenu();
+            return;
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            if (!open) {
+                openMenu();
+                return;
+            }
+            setActiveIndex(index => (index + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length);
+        }
+    };
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { type: "button", className: styles.trigger, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => open ? setOpen(false) : openMenu(), onKeyDown: onKeyDown, children: [_jsx(Clock3, { size: 16, "aria-hidden": "true" }), _jsx("span", { id: valueId, className: styles.srOnly, children: selected ? display(selected) : placeholder }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(motion.span, { className: selected ? styles.value : styles.placeholder, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: selected ? display(selected) : placeholder }, selected || "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": `${label} options`, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { ref: node => { optionRefs.current[index] = node; }, id: `${id}-option-${index}`, type: "button", role: "option", "aria-selected": option === selected, "data-active": activeIndex === index || undefined, className: styles.option, onPointerMove: () => { if (activeIndex !== index)
+                                    setActiveIndex(index); }, onClick: () => choose(option), children: [display(option), option === selected && _jsx("span", { className: styles.dot, "aria-hidden": "true" })] }, option)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
+}

package/components/time-picker/time-picker.module.css

@@ -0,0 +1,23 @@
+.field { display: grid; gap: var(--space-related); min-width: 0; }
+.label { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.anchor { position: relative; min-width: 0; }
+/* The trigger anchors the menu, so press feedback stays in color; it never scales. */
+.trigger { position: relative; display: flex; width: 100%; min-height: var(--control-height-md); align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 0 12px; background: var(--surface); color: var(--foreground); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .trigger:hover:not(:disabled) { border-color: var(--border-strong); background: var(--surface-muted); } }
+.trigger:active:not(:disabled), .trigger[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-muted); }
+.trigger:disabled { opacity: .5; cursor: not-allowed; }
+.trigger > svg:first-child { flex: 0 0 auto; color: var(--text-muted); }
+.valueText { display: grid; flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr); }
+.valueText > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.value { font-variant-numeric: tabular-nums; }
+.placeholder, .description { color: var(--text-muted); }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.chevron { flex: 0 0 auto; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring); }
+.trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
+.description { font-size: var(--text-xs); }
+.menu { position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; left: 0; max-height: 250px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); padding: 5px; background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: top center; will-change: transform, opacity; }
+/* Arrow keys move the highlight often, so it changes almost instantly. The dot marks the chosen time, so only one row is ever highlighted. */
+.option { display: flex; width: 100%; min-height: 36px; align-items: center; justify-content: space-between; border: 0; border-radius: calc(var(--radius-container) - 5px); corner-shape: var(--corner-shape); padding: 0 12px; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: left; cursor: pointer; transition: background-color 80ms var(--ease-standard); }
+.option[data-active="true"] { background: var(--surface-muted); }
+.dot { width: 6px; height: 6px; border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); }
+@media (prefers-reduced-motion: reduce) { .trigger, .chevron, .option { transition: none; } }

package/components/timeline/timeline.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+export interface TimelineEvent {
+    id: string;
+    /** When it happened, as an ISO string or epoch milliseconds. */
+    at: string | number;
+    /** Who did it, shown first in the foreground color. */
+    actor?: string;
+    /** What happened, completing the actor: "merged Checkout redesign into main". */
+    title: string;
+    /** Short context under the title, such as a pull request or a build. */
+    meta?: string;
+    /** Revealed in place when the row is expanded. Rows without detail are not interactive. */
+    detail?: ReactNode;
+    /** Portrait for an event by a person. */
+    avatar?: string;
+    /** Icon for a system event, used when there is no avatar. */
+    icon?: ReactNode;
+    /** Status of a system event. Always say the outcome in the title too, so it never rests on color. */
+    tone?: "neutral" | "success" | "danger";
+}
+/**
+ * A vertical activity feed grouped by day, for project history, audit logs, and deploy streams. Use it when order and
+ * recency matter; use a table when people need to sort or compare. Day labels stay pinned while their updates scroll,
+ * the connecting line draws itself as rows come into view, rows expand in place, and new updates slide in at the top
+ * while the rest glide down. Arrow keys move between rows, Enter or Space expands one.
+ */
+export interface TimelineProps {
+    /** Updates in any order; the newest shows first. */
+    events: TimelineEvent[];
+    /** Reference time for relative labels and day groups, in epoch milliseconds. Pass a ticking clock to keep labels fresh. */
+    now: number;
+    /** Accessible name for the feed. */
+    label: string;
+    /** Time zone for day groups and clock times. Fixed by default so server and client agree. */
+    timeZone?: string;
+    locale?: string;
+    /** Height of the scrolling area. Without it the feed grows with the page and reveals on page scroll. */
+    maxHeight?: number | string;
+    /** Scroll back to the top when a new update arrives while the feed is scrolled down. */
+    scrollToNew?: boolean;
+    defaultExpanded?: string[];
+    /** Heading level for the day labels. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    className?: string;
+}
+export declare function Timeline({ events, now, label, timeZone, locale, maxHeight, scrollToNew, defaultExpanded, headingLevel, className }: TimelineProps): import("react").JSX.Element;
+export default Timeline;

package/components/timeline/timeline.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./timeline.module.css";
+const HOUR = 3600000;
+const enter = [...motionTokens.ease.enter];
+const standard = [...motionTokens.ease.standard];
+/** Seconds between rows revealed together, so the line reads as drawing downward. */
+const STEP = .09;
+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 RevealClock = createContext(null);
+/** Text that changes in place: the new value rises in from a soft blur while the old one lifts away a little faster. */
+function RiseText({ text, reduced, direction = 1 }) {
+    return _jsx("span", { className: styles.rise, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.riseLine, custom: direction, variants: {
+                    from: (dir) => reduced ? { opacity: 0 } : { opacity: 0, y: `${.3 * dir}em`, filter: `blur(${motionTokens.blur.soft}px)` },
+                    to: { opacity: 1, y: "0em", filter: "blur(0px)" },
+                    gone: (dir) => reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: `${-.3 * dir}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: standard } },
+                }, initial: "from", animate: "to", exit: "gone", transition: { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.standard, ease: enter }, children: text }, text) }) });
+}
+/** The day's update count rolls digit by digit in the direction it moved. */
+function RollingCount({ value, reduced }) {
+    const [state, setState] = useState({ value, direction: 1 });
+    if (state.value !== value)
+        setState({ value, direction: value > state.value ? 1 : -1 });
+    const chars = [...String(value)];
+    return _jsx("span", { className: styles.rolling, "aria-hidden": "true", children: chars.map((char, index) => _jsx("span", { className: styles.place, children: _jsx(RiseText, { text: char, reduced: reduced, direction: state.direction }) }, chars.length - index)) });
+}
+function dayKey(time, timeZone) {
+    const parts = new Intl.DateTimeFormat("en-CA", { timeZone, year: "numeric", month: "2-digit", day: "2-digit" }).formatToParts(new Date(time));
+    const get = (type) => parts.find(part => part.type === type)?.value ?? "";
+    return `${get("year")}-${get("month")}-${get("day")}`;
+}
+function relative(time, now) {
+    const minutes = Math.max(0, Math.floor((now - time) / 60000));
+    if (minutes < 1)
+        return { short: "Now", long: "just now" };
+    if (minutes < 60)
+        return { short: `${minutes}m`, long: `${minutes} ${minutes === 1 ? "minute" : "minutes"} ago` };
+    const hours = Math.floor(minutes / 60);
+    return { short: `${hours}h`, long: `${hours} ${hours === 1 ? "hour" : "hours"} ago` };
+}
+/** A day's section. A new day opens from nothing and pushes the older days down; it clips only while it grows. */
+function DaySection({ id, fresh, reduced, children }) {
+    const [entering, setEntering] = useState(fresh);
+    return _jsx(motion.section, { className: styles.group, "aria-labelledby": id, "data-entering": entering || undefined, initial: fresh ? { height: 0, opacity: 0 } : false, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.exit, ease: standard } }, transition: reduced ? { duration: .15 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter } }, onAnimationComplete: () => setEntering(false), children: children });
+}
+function TimelineRow({ row, last, expanded, onToggle, timeLabel, timeFull }) {
+    const clock = useContext(RevealClock);
+    const { reduced } = clock;
+    const detailId = useId();
+    // The row reveals once, the first time it scrolls into view: its marker pops, then its line draws toward the next row.
+    const [revealDelay, setRevealDelay] = useState(null);
+    const fresh = clock.fresh.has(row.id);
+    const [entering, setEntering] = useState(fresh);
+    const shown = revealDelay !== null;
+    const delay = (revealDelay ?? 0) + (fresh ? .12 : 0);
+    const pop = reduced ? { duration: 0, opacity: { duration: .15 } } : { ...motionTokens.spring.morph, visualDuration: .36, bounce: .32, delay, opacity: { duration: motionTokens.duration.fast, ease: enter, delay } };
+    const draw = reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: .34, delay: delay + .1 };
+    const tone = row.avatar ? undefined : row.tone ?? "neutral";
+    const Trigger = row.detail ? "button" : "div";
+    return _jsxs(motion.li, { className: styles.item, "data-entering": entering || undefined, initial: fresh ? { height: 0 } : false, animate: { height: "auto" }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: .1 } : { height: { ...motionTokens.spring.smooth, visualDuration: .3 }, opacity: { duration: .12 } } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, onAnimationComplete: () => setEntering(false), onViewportEnter: () => setRevealDelay(current => current ?? clock.schedule()), viewport: { once: true, amount: .2 }, children: [_jsx(motion.span, { className: styles.marker, "data-tone": tone, "aria-hidden": "true", initial: { scale: .4, opacity: 0 }, animate: shown ? { scale: 1, opacity: 1 } : undefined, transition: pop, children: row.avatar ? _jsx("img", { src: row.avatar, alt: "", width: 28, height: 28, decoding: "async" }) : row.icon }), !last && _jsx(motion.span, { className: styles.segment, "aria-hidden": "true", initial: { scaleY: 0 }, animate: shown ? { scaleY: 1 } : undefined, transition: draw }), _jsxs(motion.div, { className: styles.content, initial: fresh ? (reduced ? { opacity: 0 } : { opacity: 0, y: -10, filter: `blur(${motionTokens.blur.soft}px)` }) : false, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: reduced ? { duration: .15 } : { y: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter, delay: .05 }, filter: { duration: motionTokens.duration.standard, ease: enter, delay: .05 } }, children: [_jsxs(Trigger, { className: styles.trigger, ...(row.detail ? { type: "button", "data-timeline-trigger": "", "aria-expanded": expanded, "aria-controls": expanded ? detailId : undefined, onClick: onToggle } : {}), children: [_jsxs("span", { className: styles.text, children: [_jsxs("span", { className: styles.title, children: [row.actor && _jsx("span", { className: styles.actor, children: row.actor }), row.actor ? " " : "", row.title] }), row.meta && _jsx("span", { className: styles.meta, children: row.meta })] }), _jsxs("time", { className: styles.time, dateTime: new Date(row.time).toISOString(), title: timeFull, children: [_jsx(RiseText, { text: timeLabel, reduced: reduced }), _jsx("span", { className: styles.srOnly, children: timeFull })] }), row.detail && _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: expanded ? 180 : 0 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { initial: false, children: expanded && row.detail && _jsx(motion.div, { id: detailId, className: styles.detail, initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: .28 } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsx(motion.div, { className: styles.detailInner, initial: reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: .15 } : { duration: motionTokens.duration.standard, ease: enter, delay: .06 }, children: row.detail }) }, "detail") })] })] });
+}
+/** An event's time in epoch milliseconds (an unreadable time sorts as the oldest). */
+function timeOf(at) {
+    const value = typeof at === "number" ? at : Date.parse(at);
+    return Number.isFinite(value) ? value : Number.NEGATIVE_INFINITY;
+}
+export function Timeline({ events, now, label, timeZone = "UTC", locale = "en-US", maxHeight, scrollToNew = true, defaultExpanded = [], headingLevel = 3, className }) {
+    const reduced = useReducedMotionSafe();
+    const id = useId();
+    const scrollerRef = useRef(null);
+    const [expanded, setExpanded] = useState(() => new Set(defaultExpanded));
+    // Rows newer than every row already shown are fresh: they slide in, the rest glide down, and their titles are
+    // announced. Older rows added below (a "Show older" page) join quietly: they are history being read, not news.
+    const ids = events.map(event => event.id).join("|");
+    const newestOf = (list) => list.reduce((newest, event) => Math.max(newest, timeOf(event.at)), Number.NEGATIVE_INFINITY);
+    const [known, setKnown] = useState(() => ({ ids, set: new Set(events.map(event => event.id)), newest: newestOf(events), fresh: new Set(), announcement: "" }));
+    if (known.ids !== ids) {
+        const added = events.filter(event => !known.set.has(event.id) && timeOf(event.at) > known.newest);
+        setKnown({
+            ids,
+            set: new Set(events.map(event => event.id)),
+            newest: Math.max(known.newest, newestOf(events)),
+            fresh: new Set([...known.fresh, ...added.map(event => event.id)]),
+            announcement: added.length ? `New update: ${added.map(event => [event.actor, event.title].filter(Boolean).join(" ")).join(". ")}` : known.announcement,
+        });
+    }
+    // The bottom edge feathers while more updates wait below, and clears once the end is in view.
+    const trackRef = useRef(null);
+    const scrolls = maxHeight !== undefined;
+    useEffect(() => {
+        const scroller = scrollerRef.current, track = trackRef.current;
+        if (!scrolls || !scroller || !track || typeof ResizeObserver === "undefined")
+            return;
+        const update = () => { if (scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop > 2)
+            scroller.dataset.more = "";
+        else
+            delete scroller.dataset.more; };
+        update();
+        scroller.addEventListener("scroll", update, { passive: true });
+        const observer = new ResizeObserver(update);
+        observer.observe(scroller);
+        observer.observe(track);
+        return () => { scroller.removeEventListener("scroll", update); observer.disconnect(); };
+    }, [scrolls]);
+    const newestId = events.reduce((latest, event) => !latest || new Date(event.at).getTime() > new Date(latest.at).getTime() ? event : latest, null)?.id;
+    useEffect(() => {
+        const scroller = scrollerRef.current;
+        if (!scrollToNew || !scroller || scroller.scrollTop < 1)
+            return;
+        scroller.scrollTo({ top: 0, behavior: reduced ? "auto" : "smooth" });
+    }, [newestId, scrollToNew, reduced]);
+    const [initialDays] = useState(() => new Set(events.map(event => dayKey(new Date(event.at).getTime(), timeZone))));
+    const groups = useMemo(() => {
+        const today = dayKey(now, timeZone), yesterday = dayKey(now - 24 * HOUR, timeZone);
+        const heading = new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", timeZone });
+        const byDay = new Map();
+        [...events].map(event => ({ ...event, time: new Date(event.at).getTime() })).sort((a, b) => b.time - a.time).forEach(event => {
+            const day = dayKey(event.time, timeZone);
+            byDay.set(day, [...(byDay.get(day) ?? []), { ...event, day }]);
+        });
+        return [...byDay].map(([day, rows]) => ({ day, rows, label: day === today ? "Today" : day === yesterday ? "Yesterday" : heading.format(new Date(rows[0].time)) }));
+    }, [events, now, timeZone, locale]);
+    const formats = useMemo(() => ({
+        clock: new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit", timeZone }),
+        full: new Intl.DateTimeFormat(locale, { weekday: "long", month: "long", day: "numeric", hour: "numeric", minute: "2-digit", timeZone }),
+    }), [locale, timeZone]);
+    // Rows that come into view together are spaced a beat apart, so the line reads as drawing down the feed.
+    const nextReveal = useRef(0);
+    const schedule = useCallback(() => {
+        if (reduced)
+            return 0;
+        const current = performance.now() / 1000;
+        const start = Math.min(Math.max(current, nextReveal.current), current + .45);
+        nextReveal.current = start + STEP;
+        return start - current;
+    }, [reduced]);
+    const clock = useMemo(() => ({ schedule, reduced, fresh: known.fresh }), [schedule, reduced, known.fresh]);
+    function toggle(id) {
+        setExpanded(current => { const next = new Set(current); if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id); return next; });
+    }
+    function onKeyDown(event) {
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+            return;
+        const triggers = [...(scrollerRef.current?.querySelectorAll("[data-timeline-trigger]") ?? [])];
+        const index = triggers.indexOf(document.activeElement);
+        if (index < 0)
+            return;
+        event.preventDefault();
+        const next = event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : Math.min(Math.max(index + (event.key === "ArrowDown" ? 1 : -1), 0), triggers.length - 1);
+        triggers[next]?.focus();
+    }
+    return _jsx(RevealClock.Provider, { value: clock, children: _jsxs("div", { className: [styles.root, className].filter(Boolean).join(" "), role: "region", "aria-label": label, children: [_jsx("div", { ref: scrollerRef, className: styles.scroller, "data-scrolls": scrolls || undefined, style: scrolls ? { "--timeline-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : undefined, onKeyDown: onKeyDown, children: _jsx("div", { ref: trackRef, children: _jsx(AnimatePresence, { children: groups.map(group => _jsxs(DaySection, { id: `${id}-${group.day}`, fresh: !initialDays.has(group.day), reduced: reduced, children: [_jsxs("div", { className: styles.day, role: "heading", "aria-level": headingLevel, id: `${id}-${group.day}`, children: [_jsx("span", { children: group.label }), _jsxs("span", { className: styles.count, "aria-hidden": "true", children: [_jsx(RollingCount, { value: group.rows.length, reduced: reduced }), " ", group.rows.length === 1 ? "update" : "updates"] }), _jsx("span", { className: styles.srOnly, children: `, ${group.rows.length} ${group.rows.length === 1 ? "update" : "updates"}` })] }), _jsx("ol", { className: styles.list, children: _jsx(AnimatePresence, { children: group.rows.map((row, index) => {
+                                                const today = group.label === "Today" && now - row.time < 12 * HOUR;
+                                                const time = today ? relative(row.time, now) : { short: formats.clock.format(new Date(row.time)), long: "" };
+                                                return _jsx(TimelineRow, { row: row, last: index === group.rows.length - 1, expanded: expanded.has(row.id), onToggle: () => toggle(row.id), timeLabel: time.short, timeFull: today ? `${time.long}, ${formats.full.format(new Date(row.time))}` : formats.full.format(new Date(row.time)) }, row.id);
+                                            }) }) })] }, group.day)) }) }) }), _jsx("span", { className: styles.srOnly, role: "status", children: known.announcement })] }) });
+}
+export default Timeline;

package/components/timeline/timeline.module.css

@@ -0,0 +1,51 @@
+/* Geometry: a 28px marker column, the line centred under it, and rows whose first text line centres on the marker. */
+.root { --marker: 28px; --marker-top: 8px; --line-gap: 4px; position: relative; display: grid; min-width: 0; color: var(--foreground); }
+/* Inserting at the top pushes the rows down instead of the browser holding the scroll position still. */
+.scroller { min-width: 0; overflow-anchor: none; }
+@property --timeline-feather { syntax: "<length>"; inherits: false; initial-value: 0px; }
+.scroller[data-scrolls] { max-height: var(--timeline-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; mask-image: linear-gradient(to bottom, #000 calc(100% - var(--timeline-feather)), transparent); transition: --timeline-feather var(--duration-standard) var(--ease-standard); }
+/* While more updates wait below, the last visible row fades into the edge instead of being cut. */
+.scroller[data-more] { --timeline-feather: 36px; }
+.group { position: relative; }
+.group[data-entering] { overflow: clip; }
+/* Day labels stay pinned while their updates scroll under them. Set --timeline-surface when the feed sits on another surface. */
+.day { position: sticky; z-index: 2; top: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-group); padding: var(--space-related) var(--space-group) var(--space-related) 0; background: var(--timeline-surface, var(--surface)); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.count { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
+.rolling { display: inline-flex; }
+.place { position: relative; display: inline-flex; overflow: clip; overflow-clip-margin: .15em; }
+.rise { position: relative; display: inline-flex; }
+.riseLine { display: inline-block; white-space: nowrap; }
+.list { margin: 0 0 var(--space-group); padding: 0; list-style: none; }
+
+.item { position: relative; padding-left: calc(var(--marker) + var(--space-related)); }
+.item[data-entering] { overflow: clip; }
+.marker { position: absolute; z-index: 1; top: var(--marker-top); left: 0; display: grid; width: var(--marker); height: var(--marker); place-items: center; border-radius: var(--radius-full); corner-shape: round; color: var(--text-secondary); }
+.marker img { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; object-fit: cover; }
+/* A person's portrait sits on a hairline ring; a system event is a quiet node with its icon. */
+.marker::after { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-radius: inherit; corner-shape: inherit; pointer-events: none; }
+.marker[data-tone] { background: var(--surface); }
+.marker[data-tone="success"] { background: color-mix(in oklab, var(--success) 12%, var(--surface)); color: var(--success); }
+.marker[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 12%, var(--surface)); color: var(--danger); }
+.marker svg { width: 14px; height: 14px; stroke-width: 2; }
+/* The line runs from just under this marker to just above the next one and draws downward from its top. */
+.segment { position: absolute; top: calc(var(--marker-top) + var(--marker) + var(--line-gap)); bottom: calc(var(--line-gap) - var(--marker-top)); left: calc(var(--marker) / 2 - .5px); width: 1px; background: var(--border-strong); transform-origin: 50% 0; }
+
+.content { min-width: 0; }
+.trigger { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-group); margin: 0; padding: 12px var(--space-group); border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+button.trigger { grid-template-columns: minmax(0, 1fr) auto 16px; cursor: pointer; }
+@media (hover: hover) and (pointer: fine) { button.trigger:hover { background: var(--surface-muted); } }
+button.trigger:active { background: var(--surface-muted); }
+.text { display: grid; min-width: 0; gap: 2px; }
+.title { color: var(--text-secondary); font-size: var(--text-sm); line-height: 20px; }
+.actor { color: var(--foreground); font-weight: 500; }
+.meta { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+/* Times keep a steady column, so "9m" becoming "10m" never rewraps the title beside it. */
+.time { display: flex; min-width: 2.75rem; justify-content: flex-end; color: var(--text-muted); font-size: var(--text-xs); line-height: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.chevron { display: grid; height: 20px; place-items: center; color: var(--text-muted); }
+.detail { overflow: clip; overflow-clip-margin: 4px; }
+.detailInner { padding: 0 var(--space-group) var(--space-inset); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (max-width: 420px) { .trigger { column-gap: var(--space-related); padding-inline: var(--space-related); } .detailInner { padding-inline: var(--space-related); } }
+@media (prefers-reduced-motion: reduce) { .trigger { transition: none; } .scroller[data-scrolls] { transition: --timeline-feather var(--duration-instant) var(--ease-standard); } }

package/components/toast/toast.d.ts

@@ -0,0 +1,8 @@
+export interface ToastProps {
+    title: string;
+    description?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+}
+export default function Toast({ title, description, open, onOpenChange, duration }: ToastProps): import("react").JSX.Element;

package/components/toast/toast.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./toast.module.css";
+const subscribeHydration = () => () => { };
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+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 textShown = { opacity: 1, y: "0em", filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** A swipe past this distance (px) or speed (px/s) dismisses the toast in the direction it was thrown. */
+const swipe = { distance: 80, velocity: 480 };
+/** 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({ 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: styles.frame, style: { height }, children: _jsx("div", { ref: content, className: styles.copy, children: children }) });
+}
+export default function Toast({ title, description, open = true, onOpenChange, duration = 4500 }) {
+    const reduce = useReducedMotion();
+    // Toasts that mount after hydration rise in from their edge; server-rendered ones start settled.
+    const hydrated = useSyncExternalStore(subscribeHydration, () => true, () => false);
+    const [enterOnMount] = useState(hydrated);
+    const [dismissed, setDismissed] = useState(false);
+    const [throwX, setThrowX] = useState(0);
+    const [lastOpen, setLastOpen] = useState(open);
+    if (open !== lastOpen) {
+        setLastOpen(open);
+        if (open) {
+            setDismissed(false);
+            setThrowX(0);
+        }
+    }
+    const visible = open && !dismissed;
+    const surface = useRef(null);
+    // The drag offset is owned here, so a release hands its velocity straight to the spring home or to the throw.
+    const x = useMotionValue(0);
+    const releaseVelocity = useRef(0);
+    /** Closing tells the parent at once, while the exit plays out here, so a new toast can be raised mid-exit and simply turns back. */
+    function dismiss(to) {
+        setThrowX(to);
+        setDismissed(true);
+        onOpenChange?.(false);
+    }
+    useEffect(() => {
+        if (!visible || !onOpenChange || duration <= 0)
+            return;
+        const timer = window.setTimeout(() => { setThrowX(0); setDismissed(true); onOpenChange(false); }, duration);
+        return () => window.clearTimeout(timer);
+    }, [visible, onOpenChange, duration]);
+    function handleDragEnd(_, info) {
+        const direction = Math.sign(info.offset.x || info.velocity.x);
+        // A short swipe springs back with its release velocity and a slight settle instead of drifting home.
+        if (Math.abs(info.offset.x) < swipe.distance && Math.abs(info.velocity.x) < swipe.velocity) {
+            animate(x, 0, { ...motionTokens.spring.snappy, velocity: info.velocity.x });
+            return;
+        }
+        releaseVelocity.current = info.velocity.x;
+        dismiss(direction * ((surface.current?.offsetWidth ?? 320) + 48));
+    }
+    const variants = reduce ? {
+        hidden: { opacity: 0 },
+        shown: { opacity: 1, transition: { duration: motionTokens.duration.instant } },
+        exit: fadeOut,
+    } : {
+        // x resets here because the drag value outlives a thrown toast; the next one must rise from the center.
+        hidden: { opacity: 0, x: 0, y: 16, scale: .96 },
+        // x returns to center too, in case the toast is raised again while a throw is still leaving.
+        shown: { opacity: 1, x: 0, y: 0, scale: 1, transition: { ...motionTokens.spring.morph, opacity: enter } },
+        // A thrown toast keeps its release velocity; a closed one sinks back toward the edge it came from.
+        // The throw settles loosely: it is invisible once the fade ends, so no long unseen tail keeps it mounted.
+        exit: (to) => to
+            ? { x: to, opacity: 0, transition: { x: { type: "spring", visualDuration: .3, bounce: 0, velocity: releaseVelocity.current, restDelta: 2, restSpeed: 40 }, opacity: { duration: motionTokens.duration.exit } } }
+            : { opacity: 0, y: 8, scale: .97, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] } },
+    };
+    const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: textShown, exit: reduce ? fadeOut : textOut, transition: reduce ? { duration: motionTokens.duration.instant } : enter };
+    return (_jsx(AnimatePresence, { initial: enterOnMount, custom: throwX, children: visible && _jsxs(motion.div, { ref: surface, className: styles.toast, role: "status", "aria-live": "polite", "aria-atomic": "true", custom: throwX, variants: variants, initial: "hidden", animate: "shown", exit: "exit", style: { x }, 
+            // Drag writes touch-action into the markup, so the reduced motion switch waits for hydration to keep server and client in step.
+            drag: reduce && hydrated ? false : "x", dragMomentum: false, onDragEnd: handleDragEnd, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx(motion.path, { d: "M4 12.5l5 5L20 6.5", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay: .12 } }) }) }), _jsxs(HeightFrame, { reduce: reduce, morphKey: `${title}\n${description ?? ""}`, 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: description ? _jsx(Swap, { className: styles.description, ...swap, children: description }, description) : null })] }), _jsx("button", { className: styles.close, type: "button", "aria-label": "Dismiss notification", onClick: () => dismiss(0), children: _jsx(X, { width: 16, height: 16, strokeWidth: 2, "aria-hidden": "true" }) })] }, "toast") }));
+}