@teamofsilicons/silicon-ui 0.0.0-stage → 0.1.0

package/components/calendar/calendar.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { animate, AnimatePresence, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import { useToday } from "../../lib/use-today.js";
+import styles from "./calendar.module.css";
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const monthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+const sameDay = (a, b) => Boolean(a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate());
+const sameMonth = (a, b) => Boolean(a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth());
+const addDays = (date, amount) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+const addMonths = (date, amount) => new Date(date.getFullYear(), date.getMonth() + amount, 1);
+/** Moves by whole months and keeps the day, clamped to the shorter month: January 31 plus one month is February 28. */
+const shiftMonths = (date, amount) => new Date(date.getFullYear(), date.getMonth() + amount, Math.min(date.getDate(), new Date(date.getFullYear(), date.getMonth() + amount + 1, 0).getDate()));
+const isBefore = (a, b) => Boolean(b && startOfDay(a).getTime() < startOfDay(b).getTime());
+const isAfter = (a, b) => Boolean(b && startOfDay(a).getTime() > startOfDay(b).getTime());
+const dateKey = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+/** Every month shows six weeks, so the grid keeps one height and never jumps while months change. */
+const makeWeeks = (month) => {
+    const start = addDays(month, -month.getDay());
+    return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
+};
+const subscribeNothing = () => () => { };
+const clientSnapshot = () => true;
+const serverSnapshot = () => false;
+/** The viewer's local date (lib/use-today.ts, shared with date-range-picker). Re-exported so existing imports from calendar keep working. */
+export { useToday } from "../../lib/use-today.js";
+const { spring, duration, ease } = motionTokens;
+/** Months sit side by side on one strip. Rapid clicks retarget the same spring, so the strip never queues or stacks panes. */
+const stripSpring = { type: "spring", visualDuration: 0.36, bounce: 0, restDelta: 0.002 };
+const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
+const fromIndex = (index) => new Date(Math.floor(index / 12), ((index % 12) + 12) % 12, 1);
+/** The title crossfades in place: the old month leaves toward the side the strip travels to while the new one arrives from the other. */
+const titleSlide = {
+    enter: (direction) => ({ opacity: 0, x: direction * 12 }),
+    center: { opacity: 1, x: 0, transition: { duration: duration.standard, ease: ease.enter } },
+    exit: (direction) => ({ opacity: 0, x: direction * -12, transition: { duration: 0.14, ease: ease.standard } }),
+};
+/** Reduced motion swaps the title in place, with no travel and no blank frame. */
+const titleFade = { enter: { opacity: 1, x: 0 }, center: { opacity: 1, x: 0, transition: { duration: 0 } }, exit: { opacity: 0, transition: { duration: 0 } } };
+/**
+ * The selected disc of one month. It is positioned by week and weekday rather than measured, so it glides on a straight
+ * line between any two days, keeps gliding while the strip slides, and retargets mid-flight on a new pick.
+ * It only grows in or fades out when the selection enters or leaves this month.
+ */
+function SelectionDisc({ cell, reduced }) {
+    const visible = cell >= 0;
+    const col = useMotionValue(visible ? cell % 7 : 0);
+    const row = useMotionValue(visible ? Math.floor(cell / 7) : 0);
+    const opacity = useMotionValue(visible ? 1 : 0);
+    const scale = useMotionValue(visible ? 1 : 0.6);
+    // Each step is one cell plus the 4px gap; percentages resolve against the disc's own size, which matches a cell.
+    const transform = useTransform(() => `translate(calc(${col.get()} * (100% + 4px)), calc(${row.get()} * (100% + 4px))) scale(${scale.get()})`);
+    const hidden = useRef(!visible);
+    useLayoutEffect(() => {
+        if (!visible) {
+            hidden.current = true;
+            const fade = reduced ? { duration: 0 } : { duration: 0.14, ease: ease.standard };
+            const controls = [animate(opacity, 0, fade), animate(scale, 0.6, fade)];
+            return () => controls.forEach((control) => control.stop());
+        }
+        const nextCol = cell % 7, nextRow = Math.floor(cell / 7);
+        const controls = [];
+        if (hidden.current || reduced) {
+            col.jump(nextCol);
+            row.jump(nextRow);
+        }
+        else
+            controls.push(animate(col, nextCol, spring.morph), animate(row, nextRow, spring.morph));
+        hidden.current = false;
+        controls.push(animate(opacity, 1, reduced ? { duration: 0 } : { duration: duration.fast, ease: ease.enter }), animate(scale, 1, reduced ? { duration: 0 } : spring.snappy));
+        return () => controls.forEach((control) => control.stop());
+    }, [cell, visible, reduced, col, row, opacity, scale]);
+    return _jsx(motion.span, { className: styles.highlight, style: { transform, opacity }, "aria-hidden": "true", children: _jsx("span", { className: styles.highlightFill }) });
+}
+/** One month on the strip. Only the month being navigated to is focusable and exposed; the one sliding past is inert. */
+function MonthPane({ index, position, present, children }) {
+    const x = useTransform(position, (value) => `calc(${(index - value) * 100}% + ${(index - value) * 16}px)`);
+    const opacity = useTransform(position, (value) => 1 - Math.min(1, Math.abs(index - value)) * 0.6);
+    return _jsx(motion.div, { className: styles.monthBody, style: { x, opacity }, "data-present": present || undefined, "aria-hidden": present ? undefined : true, inert: !present, children: children });
+}
+export function Calendar({ value, onChange, month: controlledMonth, onMonthChange, minDate, maxDate, disabledDates, locale = "en-US", className, showToday = false, }) {
+    const titleId = useId();
+    const today = useToday();
+    // Motion preference only counts after hydration, so server and client markup agree.
+    const hydrated = useSyncExternalStore(subscribeNothing, clientSnapshot, serverSnapshot);
+    const reducedMotion = (useReducedMotion() ?? false) && hydrated;
+    const [internalMonth, setInternalMonth] = useState(() => (value ? monthStart(value) : undefined));
+    const [focusedDate, setFocusedDate] = useState(value);
+    const viewportRef = useRef(null);
+    const focusRequest = useRef(null);
+    // Without a value or month the calendar waits for the client's today, then settles on that month once.
+    const fallback = value ?? today;
+    const month = controlledMonth ? monthStart(controlledMonth) : internalMonth ?? (fallback && monthStart(fallback));
+    if (!controlledMonth && !internalMonth && month)
+        setInternalMonth(month);
+    const monthTime = month?.getTime();
+    const monthKey = month ? dateKey(month) : "pending";
+    // Direction is read from the month itself, so arrows, keys, Today, and a controlled month all travel the same way.
+    const [shownMonth, setShownMonth] = useState(monthTime);
+    const [direction, setDirection] = useState(0);
+    if (shownMonth !== monthTime) {
+        setShownMonth(monthTime);
+        setDirection(shownMonth === undefined || monthTime === undefined ? 0 : monthTime > shownMonth ? 1 : -1);
+    }
+    const weeks = useMemo(() => (monthTime === undefined ? [] : makeWeeks(new Date(monthTime))), [monthTime]);
+    // The strip position is measured in months. The panes on either side of it render, plus the month being navigated to.
+    const target = month ? monthIndex(month) : 0;
+    const position = useMotionValue(target);
+    const [span, setSpan] = useState([target, target]);
+    useMotionValueEvent(position, "change", (value) => {
+        const next = [Math.floor(value + 1e-3), Math.ceil(value - 1e-3)];
+        setSpan((current) => (current[0] === next[0] && current[1] === next[1] ? current : next));
+    });
+    const ready = month !== undefined;
+    const placed = useRef(ready);
+    useLayoutEffect(() => {
+        if (!ready)
+            return;
+        const from = position.get();
+        if (from === target)
+            return;
+        // The first month and reduced motion land in place; everything else slides on the strip.
+        if (!placed.current || reducedMotion) {
+            placed.current = true;
+            position.jump(target);
+            return;
+        }
+        // Long jumps (Today, a year with Shift) start one month away, so the strip never scrolls through the months between.
+        if (Math.abs(target - from) > 2)
+            position.jump(target - Math.sign(target - from));
+        const controls = animate(position, target, stripSpring);
+        return () => controls.stop();
+    }, [ready, target, reducedMotion, position]);
+    const paneIndexes = Array.from(new Set([span[0], span[1], target])).sort((a, b) => a - b);
+    const formatter = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
+    const weekdayFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: "short" }), [locale]);
+    const weekdays = useMemo(() => Array.from({ length: 7 }, (_, index) => weekdayFormatter.format(new Date(2024, 0, 7 + index))), [weekdayFormatter]);
+    const monthLabel = month ? formatter.format(month) : "";
+    // The selected disc glides between days, so each number flips color as the disc actually passes it:
+    // the day it leaves waits longer on short hops, the day it lands on waits longer on long ones.
+    const valueKey = value ? dateKey(value) : "";
+    const [last, setLast] = useState({ key: valueKey, date: value });
+    const [handoff, setHandoff] = useState({ from: "", to: "", distance: 0 });
+    if (last.key !== valueKey) {
+        const days = last.date && value ? Math.round((startOfDay(value).getTime() - startOfDay(last.date).getTime()) / 864e5) : 0;
+        const columns = last.date && value ? value.getDay() - last.date.getDay() : 0;
+        setLast({ key: valueKey, date: value });
+        setHandoff({ from: last.key, to: valueKey, distance: Math.hypot(columns, (days - columns) / 7) });
+    }
+    const numberDelay = (key) => {
+        if (!handoff.distance || reducedMotion || (key !== handoff.to && key !== handoff.from))
+            return undefined;
+        const delay = key === handoff.to ? Math.min(260, 95 + 85 * Math.log(handoff.distance)) : Math.max(20, 130 / handoff.distance);
+        return { "--number-delay": `${Math.round(delay)}ms` };
+    };
+    const isDisabled = (date) => isBefore(date, minDate) || isAfter(date, maxDate) || Boolean(disabledDates?.(date));
+    const previousMonth = month && addMonths(month, -1);
+    const nextMonth = month && addMonths(month, 1);
+    // While the month is still unknown the controls keep their resting look, so hydration does not flash them dim.
+    const previousDisabled = Boolean(previousMonth && minDate && previousMonth.getTime() < monthStart(minDate).getTime());
+    const nextDisabled = Boolean(nextMonth && maxDate && nextMonth.getTime() > monthStart(maxDate).getTime());
+    const todaySelectable = Boolean(today && !isDisabled(today) && onChange);
+    const todayIdle = Boolean(today && sameMonth(month, today) && (!todaySelectable || sameDay(value, today)));
+    // Roving tab stop: the day last focused, else the selection, else today, else the first open day of the month.
+    const tabbableKey = (() => {
+        const open = (date) => (date && sameMonth(date, month) && !isDisabled(date) ? dateKey(date) : "");
+        return open(focusedDate) || open(value) || open(today) || dateKey(weeks.flat().find((date) => sameMonth(date, month) && !isDisabled(date)) ?? new Date(0));
+    })();
+    const changeMonth = (target) => {
+        const normalized = monthStart(target);
+        if (!controlledMonth)
+            setInternalMonth(normalized);
+        onMonthChange?.(normalized);
+    };
+    /** Keyboard focus lands on the new day in the same frame the month starts to slide. */
+    useLayoutEffect(() => {
+        const key = focusRequest.current;
+        if (!key)
+            return;
+        const button = viewportRef.current?.querySelector(`[data-present] [data-date="${key}"]`);
+        if (button) {
+            focusRequest.current = null;
+            button.focus({ preventScroll: true });
+        }
+    });
+    /** Clamps a keyboard move to the allowed range and steps past blocked days in the direction of travel. */
+    const moveFocus = (from, target, step) => {
+        let next = isBefore(target, minDate) && minDate ? startOfDay(minDate) : isAfter(target, maxDate) && maxDate ? startOfDay(maxDate) : target;
+        for (let tries = 0; tries < 42 && isDisabled(next); tries += 1)
+            next = addDays(next, step);
+        if (isDisabled(next) || sameDay(next, from))
+            return;
+        setFocusedDate(next);
+        focusRequest.current = dateKey(next);
+        if (!sameMonth(next, month))
+            changeMonth(next);
+    };
+    const onDayKeyDown = (event, date) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!isDisabled(date))
+                onChange?.(date);
+            return;
+        }
+        const moves = {
+            ArrowLeft: [addDays(date, -1), -1],
+            ArrowRight: [addDays(date, 1), 1],
+            ArrowUp: [addDays(date, -7), -1],
+            ArrowDown: [addDays(date, 7), 1],
+            Home: [addDays(date, -date.getDay()), 1],
+            End: [addDays(date, 6 - date.getDay()), -1],
+            PageUp: [shiftMonths(date, event.shiftKey ? -12 : -1), -1],
+            PageDown: [shiftMonths(date, event.shiftKey ? 12 : 1), 1],
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        moveFocus(date, move[0], move[1]);
+    };
+    const goToToday = () => {
+        if (!today || !month || todayIdle)
+            return;
+        setFocusedDate(today);
+        if (!sameMonth(today, month))
+            changeMonth(today);
+        if (todaySelectable && !sameDay(value, today))
+            onChange?.(today);
+    };
+    const cx = (...names) => names.filter(Boolean).join(" ");
+    // Six fixed weeks per month, so a day's cell is its distance from the first day on the grid.
+    const cellOf = (paneMonth) => {
+        if (!value)
+            return -1;
+        const first = addDays(paneMonth, -paneMonth.getDay());
+        const index = Math.round((startOfDay(value).getTime() - first.getTime()) / 864e5);
+        return index >= 0 && index < 42 ? index : -1;
+    };
+    const renderMonth = (paneMonth, present) => _jsxs(_Fragment, { children: [_jsx(SelectionDisc, { cell: cellOf(paneMonth), reduced: reducedMotion }), _jsx("div", { className: styles.grid, role: "grid", "aria-label": formatter.format(paneMonth), children: makeWeeks(paneMonth).map((week) => _jsx("div", { className: styles.week, role: "row", children: week.map((date) => {
+                        const key = dateKey(date);
+                        const selected = sameDay(date, value);
+                        const isToday = sameDay(date, today);
+                        return _jsx("button", { type: "button", role: "gridcell", "data-date": key, "aria-label": date.toLocaleDateString(locale, { dateStyle: "full" }), "aria-selected": selected, "aria-current": isToday ? "date" : undefined, tabIndex: present && key === tabbableKey ? 0 : -1, disabled: isDisabled(date), style: present ? numberDelay(key) : undefined, className: cx(styles.day, !sameMonth(date, paneMonth) && styles.outside, selected && styles.selected, isToday && styles.today), onFocus: () => setFocusedDate(date), onKeyDown: (event) => onDayKeyDown(event, date), onClick: () => onChange?.(date), children: _jsx("span", { className: styles.dayNumber, children: date.getDate() }) }, key);
+                    }) }, dateKey(week[0]))) })] });
+    return _jsxs("section", { className: cx(styles.calendar, className), "aria-labelledby": titleId, children: [_jsxs("div", { className: styles.header, children: [_jsxs("h2", { id: titleId, className: styles.heading, children: [_jsx("span", { className: styles.srOnly, children: monthLabel }), _jsx("span", { className: styles.title, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: month && _jsx(motion.span, { className: styles.titleRow, custom: direction, variants: reducedMotion || !direction ? titleFade : titleSlide, initial: "enter", animate: "center", exit: "exit", children: monthLabel }, monthKey) }) })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: direction ? monthLabel : "" }), _jsxs("div", { className: styles.navigation, children: [showToday && _jsx("button", { type: "button", className: styles.todayButton, "aria-disabled": todayIdle || undefined, "aria-label": today ? `Today, ${today.toLocaleDateString(locale, { dateStyle: "full" })}` : "Today", onClick: goToToday, children: "Today" }), _jsx("button", { type: "button", className: styles.navButton, "aria-label": "Previous month", "aria-disabled": previousDisabled || undefined, onClick: () => { if (!previousDisabled && previousMonth)
+                                    changeMonth(previousMonth); }, children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: styles.navButton, "aria-label": "Next month", "aria-disabled": nextDisabled || undefined, onClick: () => { if (!nextDisabled && nextMonth)
+                                    changeMonth(nextMonth); }, children: _jsx(ChevronRight, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: styles.weekdays, "aria-hidden": "true", children: weekdays.map((day, index) => _jsx("span", { children: day.slice(0, 2) }, `${day}-${index}`)) }), _jsx("div", { className: styles.monthViewport, ref: viewportRef, children: month ? paneIndexes.map((index) => _jsx(MonthPane, { index: index, position: position, present: index === target, children: renderMonth(fromIndex(index), index === target) }, index))
+                    : _jsx("div", { className: styles.monthBody, "aria-hidden": "true", children: _jsx("div", { className: styles.grid, children: Array.from({ length: 6 }, (_, week) => _jsx("div", { className: styles.week, children: Array.from({ length: 7 }, (_, day) => _jsx("span", { className: styles.placeholderDay }, day)) }, week)) }) }) })] });
+}
+export { addDays, addMonths, sameDay, startOfDay };

package/components/calendar/calendar.module.css

@@ -0,0 +1,51 @@
+.calendar { width: min(100%, 328px); min-width: 0; color: var(--foreground); }
+/* The header is its own size container: below 260px the title takes a full row and the controls sit under it, decided by width alone so a long month name never reflows it. */
+.header { container-type: inline-size; display: grid; min-height: 34px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-bottom: 14px; }
+@container (max-width: 259px) { .heading, .navigation { grid-column: 1 / -1; } .navigation { justify-self: end; } }
+.heading { min-width: 0; margin: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
+/* The global heading rule forces a tight line-height on h2, so the title row sets its own to center with the controls. */
+.title { display: grid; line-height: var(--leading-body); }
+/* Old and new titles share one cell while they cross, so the heading never changes height or jumps. */
+.title > .titleRow { grid-area: 1 / 1; justify-self: start; }
+.titleRow { display: inline-block; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.navigation { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 2px; margin-right: -6px; }
+/* Quiet header controls: a fill on hover, a short press, and a spring release. */
+.navButton, .todayButton { display: grid; height: 32px; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
+.navButton { width: 32px; }
+.todayButton { padding: 0 11px; font-size: var(--text-sm); font-weight: 500; line-height: 1; }
+@media (hover: hover) and (pointer: fine) { .navButton:hover:not([aria-disabled]), .todayButton:hover:not([aria-disabled]) { background: var(--surface-muted); color: var(--foreground); } }
+.navButton:active:not([aria-disabled]), .todayButton:active:not([aria-disabled]) { scale: .96; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.navButton[aria-disabled], .todayButton[aria-disabled] { cursor: default; opacity: .36; }
+.weekdays, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 4px; }
+.weekdays { margin-bottom: 6px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 24px; text-align: center; }
+.weekdays span { min-width: 0; overflow: hidden; }
+/* Months sit on one strip inside a clipped window. Every pane shares one grid cell and has six weeks, so the height never changes. */
+.monthViewport { position: relative; display: grid; overflow: hidden; contain: paint; }
+.monthBody { position: relative; grid-area: 1 / 1; min-width: 0; will-change: transform; }
+.monthBody[inert] { pointer-events: none; }
+.grid { display: grid; row-gap: 4px; }
+.placeholderDay { aspect-ratio: 1; }
+.day { position: relative; display: grid; width: 100%; aspect-ratio: 1; min-width: 0; place-items: center; border: 0; border-radius: 50%; corner-shape: round; padding: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard) var(--number-delay, 0ms); }
+/* The inner circle carries hover and press; the grid cell itself never moves, so the hit area stays put. */
+.day::before { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: transparent; transition: background-color var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
+.dayNumber { position: relative; transition: opacity var(--duration-fast) var(--ease-standard) var(--number-delay, 0ms), scale var(--duration-spring) var(--ease-spring); }
+/* The selected disc is one element per month, one cell in size, placed by week and weekday under the day buttons. It glides on a transform, so the strip sliding around it never bends its path. Press scales the inner fill so it never fights the glide. */
+.highlight { position: absolute; top: 0; left: 0; width: calc((100% - 24px) / 7); aspect-ratio: 1; pointer-events: none; will-change: transform; }
+.highlightFill { position: absolute; inset: 0; border-radius: 50%; corner-shape: round; background: var(--accent); transition: background-color var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .day:hover:not(:disabled):not(.selected)::before { background: var(--surface-muted); } .monthBody:has(.day.selected:hover) .highlightFill { background: var(--accent-strong); } }
+.day:active:not(:disabled)::before, .day:active:not(:disabled) .dayNumber, .monthBody:has(.day.selected:active:not(:disabled)) .highlightFill { scale: .94; transition-duration: var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+/* Outside days dim their number, not the button, so a disc gliding onto one keeps its full strength. */
+.day.outside { color: var(--text-muted); }
+.day.outside:not(.selected) .dayNumber { opacity: .8; }
+/* Today is a small dot under the number. It takes the number's color, so it flips with it when the disc arrives. */
+.day.today .dayNumber::after { content: ""; position: absolute; top: calc(100% + 4px); left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; corner-shape: round; background: currentColor; }
+.day.selected, .day.today { font-weight: 500; }
+.day.selected { color: var(--accent-foreground); }
+.day:disabled { cursor: default; color: var(--text-muted); }
+.day:disabled .dayNumber { opacity: .42; }
+.day.outside:disabled .dayNumber { opacity: .3; }
+@media (prefers-reduced-motion: reduce) {
+  .navButton, .todayButton, .day, .day::before, .dayNumber, .highlightFill { transition: none; }
+  .navButton:active, .todayButton:active, .day:active::before, .monthBody:has(.day.selected:active) .highlightFill, .day:active .dayNumber { scale: none; }
+}

package/components/card/card.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+    title: string;
+    description?: string;
+    media?: ReactNode;
+    action?: ReactNode;
+    /** A small leading visual for the footer, such as the owner's avatar. */
+    avatar?: ReactNode;
+    /** Who the card belongs to, such as the owner's name. */
+    meta?: ReactNode;
+    /** A short status under the meta, such as "Updated 2 hours ago". Changed words rise in and are announced politely. */
+    status?: string;
+    /** Content for a quick look. When set, the whole card opens and grows into a larger view; Escape or the close control morphs it back. */
+    details?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare function Card({ title, description, media, action, avatar, meta, status, details, open: openProp, defaultOpen, onOpenChange, children, className, style, ...props }: CardProps): import("react").JSX.Element;

package/components/card/card.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "motion/react";
+import { X } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./card.module.css";
+const { blur, duration, ease, spring, stagger } = motionTokens;
+/** One critically damped spring carries the surface both ways, so it never overshoots and can reverse mid-flight. Closing is a touch quicker. */
+const grow = { ...spring.smooth, visualDuration: .3 };
+const settle = { ...spring.smooth, visualDuration: .26 };
+const RETURN_MS = 300;
+const fade = { duration: duration.instant };
+/** The photo drifts in slowly while the card is pointed at, and eases back a little faster. */
+const ZOOM = 1.04;
+const zoomIn = { duration: duration.considered * 2, ease: [...ease.standard] };
+const zoomOut = { duration: duration.considered, ease: [...ease.standard] };
+/** Quick look extras arrive once the surface has mostly grown, so they never ride the stretch. */
+const reveal = { delay: duration.instant, duration: duration.standard, ease: [...ease.enter] };
+const closeIn = { delay: duration.instant, duration: duration.fast, ease: [...ease.enter] };
+/** A new status replaces the whole line: the old one lifts away quickly while the new words rise in one after another. */
+const lineMotion = {
+    enter: {},
+    center: {},
+    exit: { opacity: 0, y: "-.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: duration.fast, ease: [...ease.standard] } },
+};
+const wordMotion = {
+    enter: { opacity: 0, y: ".3em", filter: `blur(${blur.soft}px)` },
+    center: (order) => ({ opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: [...ease.enter], delay: order * stagger.word } }),
+};
+function Status({ text, reduced }) {
+    return _jsxs("span", { className: styles.status, role: "status", children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { className: styles.roll, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.line, variants: lineMotion, initial: reduced ? false : "enter", animate: "center", exit: reduced ? undefined : "exit", children: text.split(/(\s+)/).map((part, index) => _jsx(motion.span, { className: styles.word, custom: index / 2, variants: wordMotion, children: part }, index)) }, text) }) })] });
+}
+/** Motion only scale-corrects pixel radii, so token radii are read back in pixels for the morph. */
+function px(node, value) {
+    const amount = parseFloat(value);
+    if (!Number.isFinite(amount))
+        return undefined;
+    return value.trim().endsWith("rem") ? amount * parseFloat(getComputedStyle(node.ownerDocument.documentElement).fontSize) : amount;
+}
+export function Card({ title, description, media, action, avatar, meta, status, details, open: openProp, defaultOpen = false, onOpenChange, children, className, style, ...props }) {
+    const reduced = useReducedMotion() ?? false;
+    const group = useId();
+    const cardRef = useRef(null);
+    const descriptionRef = useRef(null);
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const [hovered, setHovered] = useState(false);
+    const [geometry, setGeometry] = useState({});
+    /** Where the quick look lands when it closes: the card's box on screen. The panel travels there above the page, then hands back to the card. */
+    const [landing, setLanding] = useState(null);
+    const open = details ? openProp ?? uncontrolled : false;
+    const morph = Boolean(details) && !reduced;
+    const returning = !open && landing !== null;
+    const hasDescription = Boolean(description);
+    const setOpen = useCallback((next) => { if (openProp === undefined)
+        setUncontrolled(next); onOpenChange?.(next); }, [openProp, onOpenChange]);
+    // The quick look keeps the card's line length, so the description never rewraps while it travels.
+    useEffect(() => {
+        const node = cardRef.current, text = descriptionRef.current;
+        if (!morph || !node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const computed = getComputedStyle(node);
+            const radius = px(node, computed.borderTopLeftRadius), surface = px(node, computed.getPropertyValue("--radius-overlay")), measure = text?.offsetWidth || undefined;
+            setGeometry(current => current.card !== undefined && current.measure === measure ? current : { card: current.card ?? radius, panel: current.panel ?? surface, measure });
+        });
+        observer.observe(node);
+        if (text)
+            observer.observe(text);
+        return () => observer.disconnect();
+    }, [morph, hasDescription]);
+    // Closing keeps the quick look mounted and sends it back to the card's box, so the surface never drops behind the page or a clipped preview.
+    const wasOpen = useRef(open);
+    useLayoutEffect(() => {
+        const closed = wasOpen.current && !open;
+        wasOpen.current = open;
+        const node = cardRef.current;
+        if (open)
+            setLanding(null); // eslint-disable-line react-hooks/set-state-in-effect -- reopening mid-return cancels the landing
+        else if (closed && morph && node) {
+            const box = node.getBoundingClientRect();
+            setLanding({ top: box.top, left: box.left, width: box.width, height: box.height });
+        }
+    }, [open, morph]);
+    // Once the surface has visually landed, the card takes over. Any last sub-pixel of travel carries on in the card itself, so the handoff has no seam.
+    useEffect(() => {
+        if (!returning)
+            return;
+        const timer = window.setTimeout(() => setLanding(null), RETURN_MS);
+        return () => window.clearTimeout(timer);
+    }, [returning]);
+    /** The same pieces live in the card and in the quick look; a shared id lets each one travel between them.
+        Crossfade is off: the arriving piece takes over at full opacity and the other hides, so one solid surface moves instead of two translucent copies. */
+    const shared = (id, side, layout = true) => morph ? { layoutId: id, layout, layoutCrossfade: false, layoutDependency: side === "card" ? open : returning ? "return" : "panel", transition: { layout: side === "card" ? settle : grow } } : {};
+    const footer = (side) => avatar || meta || status || action ? _jsxs("div", { className: styles.footer, children: [avatar || meta || status ? _jsxs(motion.div, { className: styles.byline, ...shared("byline", side, "position"), children: [avatar ? _jsx("span", { className: styles.avatar, children: avatar }) : null, _jsxs("span", { className: styles.bylineText, children: [meta ? _jsx("span", { className: styles.meta, children: meta }) : null, status ? _jsx(Status, { text: status, reduced: reduced }) : null] })] }) : null, action ? _jsx(motion.div, { className: styles.action, ...shared("action", side, "position"), children: action }) : null] }) : null;
+    const card = _jsxs(motion.article, { ...props, ref: cardRef, className: [styles.card, className].filter(Boolean).join(" "), style: { ...style, borderRadius: geometry.card ?? style?.borderRadius }, "data-hover": hovered || undefined, whileHover: reduced ? undefined : { y: -2 }, onHoverStart: () => setHovered(true), onHoverEnd: () => setHovered(false), ...shared("card", "card"), transition: { default: spring.snappy, layout: settle }, children: [media ? _jsx(motion.div, { className: styles.media, ...shared("media", "card"), children: _jsx(motion.div, { className: styles.zoom, initial: false, animate: { scale: hovered && !reduced ? ZOOM : 1 }, transition: hovered ? zoomIn : zoomOut, children: media }) }) : null, _jsxs("div", { className: styles.content, children: [_jsx(motion.h3, { className: styles.title, ...shared("title", "card"), children: details ? _jsx(Dialog.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: styles.trigger, children: title }) }) : title }), description ? _jsx(motion.p, { ref: descriptionRef, className: styles.description, ...shared("description", "card", "position"), children: description }) : null, children, footer("card")] })] });
+    if (!details)
+        return card;
+    // The quick look grows out of the card: the surface, photo, and copy travel on one spring while the details settle in beneath them.
+    return _jsx(Dialog.Root, { open: open, onOpenChange: setOpen, children: _jsxs(LayoutGroup, { id: group, children: [card, _jsx(AnimatePresence, { children: (open || returning) && _jsxs(Dialog.Portal, { forceMount: true, children: [_jsx(AnimatePresence, { children: open && _jsx(Dialog.Overlay, { asChild: true, forceMount: true, children: _jsx(motion.div, { className: styles.overlay, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: reduced ? fade : { duration: duration.exit, ease: [...ease.standard] } }, transition: reduced ? fade : { duration: duration.standard, ease: [...ease.enter] } }) }, "overlay") }), _jsx(Dialog.Content, { asChild: true, forceMount: true, ...(description ? {} : { "aria-describedby": undefined }), children: _jsxs(motion.div, { className: styles.panel, "data-framer-portal-id": group, "data-returning": returning || undefined, layoutScroll: true, style: { borderRadius: geometry.panel, "--card-measure": geometry.measure ? `${geometry.measure}px` : undefined, ...(landing && returning ? { "--landing-top": `${landing.top}px`, "--landing-left": `${landing.left}px`, "--landing-width": `${landing.width}px`, "--landing-height": `${landing.height}px` } : {}) }, ...(morph ? {
+                                        ...shared("card", "panel"),
+                                        initial: false,
+                                        animate: geometry.card !== undefined && geometry.panel !== undefined ? { borderRadius: returning ? geometry.card : geometry.panel } : undefined,
+                                        transition: { layout: returning ? settle : grow, borderRadius: returning ? settle : grow },
+                                        exit: { opacity: 0, transition: { duration: 0 } },
+                                    } : { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: fade }, transition: fade }), children: [media ? _jsx(motion.div, { className: styles.media, ...shared("media", "panel"), children: _jsx(motion.div, { className: styles.zoom, initial: { scale: hovered && !reduced ? ZOOM : 1 }, animate: { scale: 1 }, transition: grow, children: media }) }) : null, _jsx(motion.span, { className: styles.closeSlot, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .9 }, animate: returning ? { opacity: 0, scale: .9 } : { opacity: 1, scale: 1 }, transition: returning ? fade : reduced ? fade : closeIn, children: _jsx(Dialog.Close, { asChild: true, children: _jsx(motion.button, { type: "button", className: styles.close, "aria-label": "Close quick look", whileTap: reduced ? undefined : { scale: .94 }, transition: spring.snappy, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) }) }), _jsxs("div", { className: styles.content, children: [_jsx(Dialog.Title, { asChild: true, children: _jsx(motion.h2, { className: styles.title, ...shared("title", "panel"), children: title }) }), description ? _jsx(Dialog.Description, { asChild: true, children: _jsx(motion.p, { className: styles.description, ...shared("description", "panel", "position"), children: description }) }) : null, children, footer("panel"), _jsx(motion.div, { className: styles.details, initial: reduced ? false : { opacity: 0, y: 6 }, animate: returning ? { opacity: 0, y: 0 } : { opacity: 1, y: 0 }, exit: { opacity: 0, transition: fade }, transition: returning || reduced ? fade : reveal, children: details })] })] }) })] }, "quick-look") })] }) });
+}

package/components/card/card.module.css

@@ -0,0 +1,51 @@
+/* Isolation keeps the rounded clip on the media while the card lifts on its own layer (Safari drops it otherwise).
+   Motion drives the lift and the quick look morph, so transform never gets a CSS transition here. */
+.card { position: relative; min-width: 0; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); color: var(--foreground); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
+/* A pointed-at card floats a little, so the shadow arrives with the lift. Touch and pen never lift. */
+.card[data-hover] { border-color: var(--border-strong); box-shadow: var(--shadow-raised); }
+.card:has(.trigger:focus-visible) { border-color: var(--border-strong); }
+.media { position: relative; overflow: hidden; background: var(--surface-muted); }
+.zoom { display: grid; min-height: 112px; place-items: center; }
+.content { padding: var(--space-comfort); }
+/* Fit-content width keeps the title's box the shape of its text, so it scales evenly when it grows into the quick look. */
+.title { width: fit-content; max-width: 100%; margin: 0; font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.3; text-wrap: balance; }
+.trigger { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* The title's hit area stretches over the whole card, so pointing anywhere opens the quick look while the action stays on top. */
+.trigger::after { content: ""; position: absolute; inset: 0; }
+.trigger:focus-visible { outline: none; }
+.description { max-width: 34ch; margin: var(--space-related) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); text-wrap: pretty; }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-top: var(--space-comfort); }
+.byline { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-group); min-width: 0; }
+.avatar { display: grid; flex: none; width: var(--space-block); height: var(--space-block); overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); }
+.avatar > * { width: 100%; height: 100%; object-fit: cover; }
+/* A shrinkable column, so a narrow footer truncates the byline instead of sliding it under the action. */
+.bylineText { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; font-size: var(--text-xs); line-height: var(--leading-body); }
+.meta { overflow: hidden; color: var(--foreground); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.status { position: relative; overflow: clip visible; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+/* The line clips sideways only, so a status too long for its column ends in an ellipsis while its words still rise in unclipped. */
+.roll { position: relative; display: block; }
+.line { display: block; overflow: clip visible; text-overflow: ellipsis; }
+.word { display: inline-block; white-space: pre; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.action { position: relative; z-index: 1; display: flex; flex: none; flex-wrap: wrap; gap: var(--space-group); }
+
+.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(10% 0 0 / .46); backdrop-filter: blur(7px); }
+/* Centered with auto margins, so transform stays free for the morph. */
+.panel { position: fixed; inset: 0; z-index: 51; width: min(calc(100vw - var(--space-block)), 30rem); height: fit-content; max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: hidden auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }
+.panel:focus { outline: none; }
+/* Closing: the panel takes the card's box and look, so it lands exactly where the card sits and hands back without a seam. */
+.panel[data-returning] { inset: auto; top: var(--landing-top); left: var(--landing-left); width: var(--landing-width); height: var(--landing-height); max-height: none; margin: 0; overflow: hidden; border-color: var(--border); background: var(--surface); box-shadow: none; pointer-events: none; }
+.panel[data-returning] .content { padding: var(--space-comfort); }
+.panel[data-returning] .title { font-size: var(--text-lg); }
+.panel .content { padding: var(--space-section); }
+.panel .title { font-size: var(--text-xl); }
+.panel .description { max-width: var(--card-measure, 34ch); }
+/* The slot carries the entrance, so the button's own press answers instantly. */
+.closeSlot { position: absolute; top: var(--space-inset); right: var(--space-inset); z-index: 2; display: grid; }
+.close { display: grid; width: var(--space-block); height: var(--space-block); place-items: center; padding: 0; border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--surface-raised) 74%, transparent); backdrop-filter: blur(12px); color: var(--foreground); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .close:hover { background: var(--surface-raised); } }
+.details { margin-top: var(--space-section); padding-top: var(--space-comfort); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+
+@media (prefers-reduced-motion: reduce) {
+  .card, .close { transition-duration: var(--duration-instant); }
+}

package/components/card-stack/card-stack.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+export type CardDecision = "left" | "right";
+/**
+ * A deck of cards reviewed one at a time: drag or flick the top card left or right, or use the buttons and arrow keys.
+ * Use it for quick, one-by-one triage where each item deserves a moment of attention: shortlisting destinations, candidates, or design options.
+ * Use a list or table when people need to compare items side by side.
+ */
+export interface CardStackProps<T> {
+    items: T[];
+    getKey: (item: T) => string;
+    /** A short name for the card, used in its accessible label and announcements, such as "Lisbon". */
+    getLabel: (item: T) => string;
+    renderCard: (item: T) => ReactNode;
+    onDecide?: (item: T, decision: CardDecision) => void;
+    onUndo?: (item: T, decision: CardDecision) => void;
+    onReset?: () => void;
+    /** Action names for each side, used on the buttons and the stamps that appear while dragging. */
+    labels?: {
+        left: string;
+        right: string;
+    };
+    /** Past tense of each action for announcements, such as "skipped" and "shortlisted". */
+    outcomes?: {
+        left: string;
+        right: string;
+    };
+    /** Accessible name for the stack. */
+    label?: string;
+    /** Shown once every card has been decided. Receives a function that brings all cards back. */
+    renderEmpty?: (reset: () => void) => ReactNode;
+    className?: string;
+}
+export declare function CardStack<T>({ items, getKey, getLabel, renderCard, onDecide, onUndo, onReset, labels, outcomes, label, renderEmpty, className }: CardStackProps<T>): import("react").JSX.Element;
+export default CardStack;