@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/swipe-actions/swipe-actions.js

@@ -0,0 +1,330 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useEffectEvent, useId, useMemo, useRef, useState } from "react";
+import * as Menu from "@radix-ui/react-dropdown-menu";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { MoreHorizontal } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./swipe-actions.module.css";
+/** Width of one action while a row rests open. */
+const ACTION = 76;
+/** Movement before a press is read as a swipe or handed to the page as a scroll. */
+const SLOP = 8;
+/** Seconds of travel projected from the release velocity, roughly a 0.99 deceleration rate. */
+const PROJECTION = .1;
+/** Release speed in px/s that counts as a flick. */
+const FLICK = 900;
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/** Past its last stop the row still follows, but every pixel costs more, like pulling against elastic. */
+const rubberBand = (overshoot, dimension) => (1 - 1 / (overshoot * .55 / dimension + 1)) * dimension;
+const sideOf = (value) => value > 0 ? "leading" : value < 0 ? "trailing" : null;
+const GroupContext = createContext({ openId: null, setOpenId: () => { }, rows: new Map() });
+export function SwipeActions({ label, children, className }) {
+    const [openId, setOpenId] = useState(null);
+    const [rows] = useState(() => new Map());
+    useEffect(() => {
+        if (!openId)
+            return;
+        const onPointerDown = (event) => { const row = rows.get(openId); if (row && event.target instanceof Node && row.contains(event.target))
+            return; setOpenId(null); };
+        const onKeyDown = (event) => { if (event.key === "Escape")
+            setOpenId(null); };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        document.addEventListener("keydown", onKeyDown);
+        return () => { document.removeEventListener("pointerdown", onPointerDown, true); document.removeEventListener("keydown", onKeyDown); };
+    }, [openId, rows]);
+    const group = useMemo(() => ({ openId, setOpenId, rows }), [openId, rows]);
+    return _jsx(GroupContext.Provider, { value: group, children: _jsx("div", { className: [styles.surface, className].filter(Boolean).join(" "), children: _jsx("ul", { role: "list", "aria-label": label, tabIndex: -1, className: styles.list, children: _jsx(AnimatePresence, { initial: false, children: children }) }) }) });
+}
+function velocityOf(samples) {
+    const last = samples[samples.length - 1];
+    if (!last)
+        return 0;
+    const first = samples.find(sample => last[0] - sample[0] <= 80) ?? last;
+    const elapsed = (last[0] - first[0]) / 1000;
+    return elapsed > 0 ? (last[1] - first[1]) / elapsed : 0;
+}
+export function SwipeActionsRow({ label, leading = [], trailing = [], fullSwipe = true, children, className }) {
+    const { openId, setOpenId, rows } = useContext(GroupContext);
+    const id = useId();
+    const reduced = useReducedMotion() ?? false;
+    const present = useIsPresent();
+    const rowRef = useRef(null);
+    const x = useMotionValue(0);
+    const cover = useMotionValue(0);
+    const [covering, setCovering] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const width = useRef(0);
+    const drag = useRef(null);
+    const travel = useRef(null);
+    const stretch = useRef(null);
+    const armed = useRef(false);
+    const leaving = useRef(false);
+    const swallowClick = useRef(false);
+    const focusNeighbour = useRef(false);
+    const restoreTimer = useRef(0);
+    const actionsOf = (side) => side === "leading" ? leading : trailing;
+    const openWidth = (side) => actionsOf(side).length * ACTION;
+    const outermost = (side) => side === "leading" ? 0 : trailing.length - 1;
+    const canCommit = (side) => fullSwipe && actionsOf(side).length > 0;
+    const threshold = (side) => Math.max(openWidth(side) + 48, width.current * .56);
+    function stretchTo(value) {
+        stretch.current?.stop();
+        if (reduced) {
+            cover.jump(value);
+            return;
+        }
+        stretch.current = animate(cover, value, motionTokens.spring.morph);
+    }
+    /** Springs the row to a stop, carrying the release velocity. Travel snaps instantly with reduced motion. */
+    function settle(target, velocity = 0) {
+        if (armed.current || (target !== 0 && cover.get() !== 0))
+            stretchTo(0);
+        armed.current = false;
+        const from = x.get();
+        const home = () => { if (target === 0) {
+            stretch.current?.stop();
+            cover.jump(0);
+        } };
+        if (reduced) {
+            x.jump(target);
+            home();
+        }
+        else {
+            // Heading home, the spring may not carry the row past zero, or the opposite actions would flash.
+            const toward = target === 0 && Math.sign(velocity) === -Math.sign(from);
+            const launch = toward ? Math.sign(velocity) * Math.min(Math.abs(velocity), Math.abs(from) * 12) : velocity;
+            travel.current = animate(x, target, { ...(target === 0 ? motionTokens.spring.smooth : motionTokens.spring.snappy), velocity: launch, onComplete: home });
+        }
+        if (target === 0)
+            setOpenId(current => current === id ? null : current);
+        else
+            setOpenId(id);
+    }
+    /** The chosen action stretches over the whole row while the row leaves in its direction; the list then closes the gap. */
+    function commit(side, index, velocity = 0) {
+        const action = actionsOf(side)[index];
+        if (!action || leaving.current)
+            return;
+        const direction = side === "leading" ? 1 : -1;
+        armed.current = false;
+        setCovering({ side, index });
+        stretchTo(1);
+        if (action.keepRow) {
+            action.onSelect();
+            settle(0, velocity);
+            return;
+        }
+        leaving.current = true;
+        const row = rowRef.current;
+        if (row)
+            row.dataset.removing = "";
+        travel.current?.stop();
+        const end = direction * (width.current + 2);
+        if (reduced)
+            x.jump(end);
+        else
+            travel.current = animate(x, end, { ...motionTokens.spring.smooth, velocity: Math.sign(velocity) === direction ? velocity : 0 });
+        setOpenId(current => current === id ? null : current);
+        action.onSelect();
+        // A list that keeps the item gets its row back instead of an empty band of colour.
+        window.clearTimeout(restoreTimer.current);
+        restoreTimer.current = window.setTimeout(() => { if (!leaving.current)
+            return; leaving.current = false; if (row)
+            delete row.dataset.removing; settle(0); }, 1400);
+    }
+    function arm(value, pointerType) {
+        const side = sideOf(value);
+        const limit = side ? threshold(side) : Infinity;
+        const next = !!side && canCommit(side) && Math.abs(value) > (armed.current ? limit - 20 : limit);
+        if (next === armed.current || !side) {
+            if (!side && armed.current) {
+                armed.current = false;
+                stretchTo(0);
+            }
+            return;
+        }
+        armed.current = next;
+        if (next) {
+            setCovering({ side, index: outermost(side) });
+            if (pointerType === "touch")
+                navigator.vibrate?.(8);
+        }
+        stretchTo(next ? 1 : 0);
+    }
+    function constrain(raw) {
+        const side = sideOf(raw);
+        if (!side)
+            return 0;
+        const dimension = width.current || 320;
+        const limit = actionsOf(side).length === 0 ? 0 : canCommit(side) ? dimension : openWidth(side);
+        const distance = Math.abs(raw);
+        return Math.sign(raw) * (distance <= limit ? distance : limit + rubberBand(distance - limit, dimension));
+    }
+    function release(velocity) {
+        const value = x.get(), side = sideOf(value);
+        if (!side || actionsOf(side).length === 0) {
+            settle(0, velocity);
+            return;
+        }
+        const direction = side === "leading" ? 1 : -1;
+        const distance = Math.abs(value), outward = velocity * direction, open = openWidth(side);
+        const projected = distance + outward * PROJECTION;
+        const flung = distance > open && outward > FLICK && projected > threshold(side);
+        // A flick back toward home cancels an armed full swipe.
+        if (canCommit(side) && ((armed.current && outward > -FLICK) || flung)) {
+            commit(side, outermost(side), velocity);
+            return;
+        }
+        settle(projected > open / 2 ? direction * open : 0, velocity);
+    }
+    function onPointerDown(event) {
+        swallowClick.current = false;
+        if (leaving.current || !event.isPrimary || (event.pointerType === "mouse" && event.button !== 0))
+            return;
+        // Catch the row mid-flight: the next move retargets from wherever it is now.
+        travel.current?.stop();
+        drag.current = { pointer: event.pointerId, type: event.pointerType, startX: event.clientX, startY: event.clientY, origin: x.get(), locked: null, samples: [[event.timeStamp, event.clientX]] };
+    }
+    function onPointerMove(event) {
+        const current = drag.current;
+        if (!current || current.pointer !== event.pointerId || current.locked === "y")
+            return;
+        if (!current.locked) {
+            const dx = event.clientX - current.startX, dy = event.clientY - current.startY;
+            if (Math.hypot(dx, dy) < SLOP)
+                return;
+            if (Math.abs(dy) > Math.abs(dx)) {
+                current.locked = "y";
+                return;
+            }
+            // Measure from here, so crossing the slop never jumps the row.
+            current.locked = "x";
+            current.startX = event.clientX;
+            event.currentTarget.setPointerCapture(event.pointerId);
+            if (rowRef.current)
+                rowRef.current.dataset.dragging = "";
+            setOpenId(id);
+        }
+        const value = constrain(current.origin + event.clientX - current.startX);
+        x.set(value);
+        current.samples.push([event.timeStamp, event.clientX]);
+        if (current.samples.length > 12)
+            current.samples.shift();
+        arm(value, current.type);
+    }
+    function onPointerEnd(event) {
+        const current = drag.current;
+        if (!current || current.pointer !== event.pointerId)
+            return;
+        drag.current = null;
+        if (current.locked === "x") {
+            swallowClick.current = true;
+            if (rowRef.current)
+                delete rowRef.current.dataset.dragging;
+            current.samples.push([event.timeStamp, event.clientX]);
+            release(event.type === "pointercancel" ? 0 : velocityOf(current.samples));
+            return;
+        }
+        // A tap on an open row closes it instead of acting on what is underneath.
+        if (current.locked === null && Math.abs(x.get()) > .5) {
+            swallowClick.current = true;
+            settle(0);
+        }
+    }
+    function onClickCapture(event) {
+        if (!swallowClick.current)
+            return;
+        swallowClick.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function moveFocusToNeighbour() {
+        const row = rowRef.current;
+        if (!row)
+            return;
+        const staying = (step) => {
+            let node = row[step];
+            while (node instanceof HTMLElement && "removing" in node.dataset)
+                node = node[step];
+            return node;
+        };
+        const neighbour = staying("nextElementSibling") ?? staying("previousElementSibling");
+        (neighbour?.querySelector("[data-swipe-more]") ?? row.parentElement)?.focus({ preventScroll: true });
+    }
+    useEffect(() => {
+        const row = rowRef.current;
+        if (!row)
+            return;
+        rows.set(id, row);
+        width.current = row.offsetWidth;
+        const observer = new ResizeObserver(([entry]) => { if (entry)
+            width.current = entry.contentRect.width; });
+        observer.observe(row);
+        return () => { observer.disconnect(); rows.delete(id); window.clearTimeout(restoreTimer.current); setOpenId(current => current === id ? null : current); };
+    }, [id, rows, setOpenId]);
+    // Another row opened, or someone touched outside: put this one away.
+    const closeForOthers = useEffectEvent(() => { if (openId !== id && !leaving.current && drag.current?.locked !== "x" && x.get() !== 0)
+        settle(0); });
+    useEffect(() => { closeForOthers(); }, [openId]);
+    // Undo brought the item back while it was still leaving: slide it home as the height reopens.
+    const returnHome = useEffectEvent(() => {
+        if (!leaving.current)
+            return;
+        leaving.current = false;
+        window.clearTimeout(restoreTimer.current);
+        if (rowRef.current)
+            delete rowRef.current.dataset.removing;
+        settle(0);
+    });
+    useEffect(() => { if (present)
+        returnHome(); }, [present]);
+    const menuItems = [...leading.map((action, index) => ({ action, side: "leading", index })), ...trailing.map((action, index) => ({ action, side: "trailing", index }))];
+    const collapse = reduced
+        ? { opacity: 0, transition: { duration: .15 } }
+        : { height: 0, opacity: 0, transition: { height: { ...motionTokens.spring.smooth, delay: .12 }, opacity: { duration: motionTokens.duration.instant, delay: .34 } } };
+    return _jsxs(motion.li, { ref: rowRef, className: [styles.row, className].filter(Boolean).join(" "), style: { "--swipe-action-width": `${ACTION}px` }, initial: reduced ? { opacity: 0 } : { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: collapse, transition: reduced ? { duration: .15 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, children: [["leading", "trailing"].map(side => actionsOf(side).map((action, index) => {
+                const count = actionsOf(side).length;
+                const rank = side === "leading" ? count - 1 - index : index;
+                const coverRank = covering?.side === side ? (side === "leading" ? count - 1 - covering.index : covering.index) : null;
+                return _jsx(ActionLayer, { action: action, side: side, rank: rank, count: count, coverRank: coverRank, x: x, cover: cover, onPress: () => commit(side, index) }, `${side}-${index}`);
+            })), _jsxs(motion.div, { className: styles.content, style: { x }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerEnd, onPointerCancel: onPointerEnd, onClickCapture: onClickCapture, children: [_jsx("div", { className: styles.body, children: children }), menuItems.length > 0 && _jsxs(Menu.Root, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(Menu.Trigger, { className: styles.more, "data-swipe-more": "", "aria-label": `More actions for ${label}`, onPointerDown: event => event.preventDefault(), onClick: event => { if (event.detail > 0)
+                                    setMenuOpen(open => !open); }, children: _jsx(MoreHorizontal, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx(Menu.Portal, { children: _jsx(Menu.Content, { className: styles.menu, align: "end", sideOffset: 6, collisionPadding: 12, loop: true, onCloseAutoFocus: event => { if (!focusNeighbour.current)
+                                        return; focusNeighbour.current = false; event.preventDefault(); moveFocusToNeighbour(); }, children: menuItems.map(({ action, side, index }, order) => _jsxs(Menu.Item, { className: styles.item, "data-tone": action.tone, style: { "--i": order }, onSelect: () => { focusNeighbour.current = !action.keepRow; commit(side, index); }, children: [_jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: action.icon }), action.label] }, `${side}-${index}`)) }) })] })] })] });
+}
+/**
+ * One revealed action. Rank 0 sits against the content and the highest rank at the row's outer edge. Every layer spans the full row and slides in by
+ * transform only, so the actions share the revealed space evenly, widen together past the resting width, and the covering action can stretch across the row.
+ */
+function ActionLayer({ action, side, rank, count, coverRank, x, cover, onPress }) {
+    const direction = side === "leading" ? 1 : -1;
+    const segment = useTransform(x, value => Math.max(0, value * direction) / count);
+    // Distance from the row's outer edge to this layer's inner edge.
+    const inset = useTransform([x, cover], ([value = 0, progress = 0]) => {
+        const revealed = Math.max(0, value * direction), base = (count - rank) * revealed / count;
+        if (coverRank === rank)
+            return base + progress * (revealed - base);
+        if (coverRank !== null && rank > coverRank)
+            return base * (1 - progress);
+        return base;
+    });
+    const shift = useTransform(inset, value => direction * value);
+    // The glyph rides the centre of its share, then hugs the content edge while this action covers the row.
+    const glyphX = useTransform([segment, cover], ([share = 0, progress = 0]) => -direction * (coverRank === rank ? share / 2 + progress * (ACTION / 2 - share / 2) : share / 2));
+    const iconReveal = useTransform([segment, cover], ([share = 0, progress = 0]) => {
+        const own = clamp01((share - ACTION * .25) / (ACTION * .55));
+        if (coverRank === rank)
+            return Math.max(own, progress);
+        return coverRank === null ? own : own * (1 - progress);
+    });
+    const labelReveal = useTransform([segment, cover], ([share = 0, progress = 0]) => {
+        const own = clamp01((share - ACTION * .72) / (ACTION * .24));
+        if (coverRank === rank)
+            return Math.max(own, progress);
+        return coverRank === null ? own : own * (1 - progress);
+    });
+    const iconScale = useTransform(iconReveal, value => .6 + .4 * value);
+    // The menu button is the accessible path, so the revealed copy stays out of the tab order and the accessibility tree.
+    return _jsx(motion.button, { type: "button", tabIndex: -1, "aria-hidden": "true", className: styles.layer, "data-side": side, "data-tone": action.tone ?? "neutral", style: { x: shift, zIndex: rank + 1 }, onClick: onPress, children: _jsx(motion.span, { className: styles.anchor, style: { x: glyphX }, children: _jsxs("span", { className: styles.glyph, children: [_jsx(motion.span, { className: styles.icon, style: { opacity: iconReveal, scale: iconScale }, children: action.icon }), _jsx(motion.span, { className: styles.label, style: { opacity: labelReveal }, children: action.label })] }) }) });
+}
+export default SwipeActions;

package/components/swipe-actions/swipe-actions.module.css

@@ -0,0 +1,64 @@
+/* The surface clips every row, so revealed actions never spill past its rounded corners. It hides once the last row has left. */
+.surface { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+/* When the last row is on its way out, the frame fades with it instead of leaving a hairline behind. */
+.surface:not(:has(> .list > .row:not([data-removing]))) { border-color: transparent; background-color: transparent; }
+.surface:has(> .list:empty) { display: none; }
+/* Pulled down one pixel so the last separator tucks under the frame, instead of toggling with :last-child while rows leave. */
+.list { margin: 0 0 -1px; padding: 0; list-style: none; }
+.list:focus-visible { outline: none; }
+.row { position: relative; isolation: isolate; overflow: hidden; }
+/* The content follows the finger by transform only; vertical pans stay with the page. */
+.content { position: relative; z-index: 10; display: flex; min-height: 64px; align-items: center; gap: var(--space-related); padding: var(--space-group) var(--space-related) var(--space-group) var(--space-inset); background: var(--surface); touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
+.content::after { position: absolute; right: 0; bottom: 0; left: var(--swipe-actions-inset, var(--space-inset)); height: 1px; background: var(--border); content: ""; pointer-events: none; }
+.content img { -webkit-user-drag: none; }
+.body { min-width: 0; flex: 1 1 auto; }
+.more { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 0; border-radius: calc(var(--radius-control) - 6px); background: transparent; color: var(--text-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+/* The button anchors a menu, so a press answers with colour, never scale. */
+.more:active, .more[data-state="open"] { background: var(--surface-muted); color: var(--foreground); }
+.more:focus-visible { outline: none; }
+@media (hover: hover) and (pointer: fine) {
+  .content { cursor: grab; }
+  .more:hover { background: var(--surface-muted); color: var(--foreground); }
+}
+.row[data-dragging] .content { cursor: grabbing; }
+.row[data-dragging] .more { background: transparent; color: var(--text-muted); }
+
+/* Each action spans the full row from the edge it hides behind and slides in by transform. Outer actions stack above inner ones. */
+.layer { position: absolute; top: 0; bottom: 0; width: 100%; padding: 0; border: 0; background: color-mix(in oklab, var(--foreground) 20%, var(--surface)); color: var(--foreground); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.layer[data-side="trailing"] { left: 100%; }
+.layer[data-side="leading"] { right: 100%; }
+.layer[data-tone="accent"] { background: var(--accent); color: var(--accent-foreground); }
+.layer[data-tone="danger"] { background: var(--danger); color: var(--background); }
+.layer:focus { outline: none; }
+.anchor { position: absolute; top: 0; bottom: 0; width: 0; }
+.layer[data-side="trailing"] .anchor { left: 0; }
+.layer[data-side="leading"] .anchor { right: 0; }
+.glyph { position: absolute; top: 0; bottom: 0; left: calc(var(--swipe-action-width) / -2); display: flex; width: var(--swipe-action-width); flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
+.icon { display: grid; place-items: center; }
+.icon svg { width: 20px; height: 20px; }
+.label { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); white-space: nowrap; }
+
+/* The menu grows from its trigger, matching the library dropdown. */
+.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: 60; min-width: 11rem; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); }
+.menu[data-side="top"] { --menu-y: 5px; }
+.menu[data-state="open"] { animation: menu-fade-in var(--duration-fast) var(--ease-enter) both, menu-rise-in var(--duration-spring) var(--ease-spring) both; }
+.menu[data-state="closed"] { animation: menu-out var(--duration-instant) var(--ease-standard) both; }
+.menu[data-state="open"] .item { animation: menu-item-in var(--duration-standard) var(--ease-enter) both; animation-delay: calc(min(var(--i, 0), 4) * 35ms); }
+.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; transition: background-color var(--duration-instant) var(--ease-standard); }
+.item[data-highlighted] { background: var(--surface-muted); }
+.item[data-tone="danger"] { color: var(--danger); }
+.item[data-tone="danger"][data-highlighted] { background: color-mix(in oklab, var(--danger) 8%, var(--surface-raised)); }
+.itemIcon { display: inline-flex; width: 17px; color: var(--text-secondary); }
+.itemIcon svg { width: 16px; height: 16px; }
+.item[data-tone="danger"] .itemIcon { color: var(--danger); }
+@keyframes menu-fade-in { from { opacity: 0; } }
+@keyframes menu-rise-in { from { transform: translate(var(--menu-x), var(--menu-y)) scale(.97); } }
+@keyframes menu-out { to { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); } }
+@keyframes menu-item-in { from { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); } }
+@keyframes menu-fade-out { to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .surface, .more, .item { transition: none; }
+  .menu[data-state="open"] { animation: menu-fade-in var(--duration-instant) linear both; }
+  .menu[data-state="closed"] { animation: menu-fade-out var(--duration-instant) linear both; }
+  .menu[data-state="open"] .item { animation: none; }
+}

package/components/switch/switch.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+export interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+    label?: string;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/components/switch/switch.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./switch.module.css";
+/** Track inner width (42 - 6 padding) minus the 18px thumb; keep in sync with switch.module.css. */
+const size = 18;
+const travel = 18;
+/** How far the thumb widens toward the other side while pressed. */
+const stretch = 5;
+/** Critically damped: the thumb lands on its end without overshooting the state it reports. */
+const glide = { type: "spring", visualDuration: 0.3, bounce: 0 };
+export const Switch = forwardRef(function Switch({ label, className, checked, defaultChecked, onCheckedChange, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, onKeyDown, onKeyUp, onBlur, ...props }, ref) {
+    const reduceMotion = useReducedMotion();
+    const [internal, setInternal] = useState(defaultChecked ?? false);
+    const [pressed, setPressed] = useState(false);
+    const on = checked ?? internal;
+    // A brief stretch along the travel, so the thumb reads as moving mass rather than a sliding dot.
+    const scaleX = useMotionValue(1);
+    const shown = useRef(on);
+    // A pointer or Space press already stretched the thumb, so its release should not add a second stretch on top.
+    const releasedAt = useRef(-Infinity);
+    useEffect(() => {
+        if (shown.current === on)
+            return;
+        shown.current = on;
+        const fromPress = performance.now() - releasedAt.current < 250;
+        if (reduceMotion || fromPress)
+            return;
+        const controls = animate(scaleX, [1, 1.16, 1], { duration: 0.34, times: [0, 0.4, 1], ease: ["easeOut", "easeInOut"] });
+        return () => controls.stop();
+    }, [on, reduceMotion, scaleX]);
+    const extra = pressed && !reduceMotion && !props.disabled ? stretch : 0;
+    const classes = [styles.switch, className].filter(Boolean).join(" ");
+    return (_jsxs(SwitchPrimitive.Root, { ...props, ref: ref, checked: on, onCheckedChange: next => { if (checked === undefined)
+            setInternal(next); onCheckedChange?.(next); }, onPointerDown: event => { onPointerDown?.(event); if (event.button === 0)
+            setPressed(true); }, onPointerUp: event => { onPointerUp?.(event); if (pressed && !props.disabled)
+            releasedAt.current = performance.now(); setPressed(false); }, onPointerLeave: event => { onPointerLeave?.(event); setPressed(false); }, onPointerCancel: event => { onPointerCancel?.(event); setPressed(false); }, onKeyDown: event => { onKeyDown?.(event); if (event.key === " ")
+            setPressed(true); }, onKeyUp: event => { onKeyUp?.(event); if (pressed && !props.disabled)
+            releasedAt.current = performance.now(); setPressed(false); }, onBlur: event => { onBlur?.(event); setPressed(false); }, className: classes, "aria-label": props["aria-label"] ?? label, children: [_jsx("span", { className: styles.track, children: _jsx(motion.span, { className: styles.thumb, style: { scaleX }, initial: false, animate: { x: on ? travel - extra : 0, width: size + extra }, transition: reduceMotion ? { duration: 0 } : { x: glide, width: motionTokens.spring.snappy } }) }), label ? _jsx("span", { className: styles.label, children: label }) : null] }));
+});
+Switch.displayName = "Switch";
+export default Switch;

package/components/switch/switch.module.css

@@ -0,0 +1,12 @@
+.switch { display: inline-flex; min-height: var(--control-height-md); align-items: center; gap: var(--space-group); padding: 0; border: 0; color: var(--foreground); background: transparent; font: inherit; font-size: var(--text-sm); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.switch:disabled { cursor: not-allowed; opacity: .5; }
+/* Fixed box: the thumb moves inside it with transforms, so nothing around the switch shifts. The track crossfades between the two fills. */
+.track { position: relative; box-sizing: border-box; display: flex; flex: 0 0 auto; width: 42px; height: 24px; align-items: center; padding: 3px; border-radius: var(--radius-full); corner-shape: round; background: var(--control-track); isolation: isolate; transition: background-color var(--duration-fast) var(--ease-standard); }
+.track::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; corner-shape: inherit; background: var(--control-on); opacity: 0; transition: opacity var(--duration-standard) var(--ease-standard); }
+.switch[data-state="checked"] .track::before { opacity: 1; }
+.thumb { flex: 0 0 auto; width: 18px; height: 18px; border-radius: var(--radius-full); corner-shape: round; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); will-change: transform; transition: background-color var(--duration-standard) var(--ease-standard); }
+.switch[data-state="checked"] .thumb { background: var(--control-thumb-on); }
+@media (hover: hover) and (pointer: fine) { .switch[data-state="unchecked"]:hover:not(:disabled) .track { background: var(--control-track-hover); } }
+.switch:focus-visible { outline: none; }
+.label { line-height: var(--leading-body); }
+@media (prefers-reduced-motion: reduce) { .track, .track::before, .thumb { transition: none; } }

package/components/tabs/tabs.d.ts

@@ -0,0 +1,8 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import type { ComponentPropsWithoutRef } from "react";
+type RootProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
+export declare function Tabs({ value, defaultValue, onValueChange, className, ...props }: RootProps): import("react").JSX.Element;
+export declare function TabsList({ className, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.List>): import("react").JSX.Element;
+export declare function TabsTrigger({ className, children, value, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>): import("react").JSX.Element;
+export declare function TabsContent({ className, value, forceMount, children, ...props }: ComponentPropsWithoutRef<typeof TabsPrimitive.Content>): import("react").JSX.Element;
+export {};

package/components/tabs/tabs.js

@@ -0,0 +1,138 @@
+"use client";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useRef, useState } from "react";
+import { ChevronLeft as NavArrowLeft, ChevronRight as NavArrowRight } from "lucide-react";
+import { AnimatePresence, LayoutGroup, animate, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./tabs.module.css";
+/** `direction` is +1 when the new tab sits after the old one; `panelHeightRef` holds the visible panel height so the next panel can morph from it; `leavingRectRef` pins the outgoing panel where it was on screen. */
+const TabsContext = createContext({ active: "", layoutId: "tabs", direction: 1, panelHeightRef: { current: null }, leavingRectRef: { current: null } });
+export function Tabs({ value, defaultValue, onValueChange, className, ...props }) {
+    const [internal, setInternal] = useState(defaultValue ?? "");
+    const [direction, setDirection] = useState(1);
+    const active = value ?? internal;
+    const layoutId = useId();
+    const root = useRef(null);
+    const panelHeightRef = useRef(null);
+    const leavingRectRef = useRef(null);
+    function handleChange(next) {
+        const frame = root.current;
+        leavingRectRef.current = frame?.querySelector(':scope > [role="tabpanel"][data-state="active"]')?.getBoundingClientRect() ?? null;
+        const order = frame ? Array.from(frame.querySelectorAll('[role="tab"][data-value]')).filter(tab => tab.closest(`.${styles.root}`) === frame).map(tab => tab.dataset.value) : [];
+        const from = order.indexOf(active), to = order.indexOf(next);
+        if (from >= 0 && to >= 0 && from !== to)
+            setDirection(to > from ? 1 : -1);
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    }
+    return _jsx(TabsContext.Provider, { value: { active, layoutId, direction, panelHeightRef, leavingRectRef }, children: _jsx(LayoutGroup, { id: layoutId, children: _jsx(TabsPrimitive.Root, { ...props, ref: root, className: [styles.root, className].filter(Boolean).join(" "), value: active, onValueChange: handleChange }) }) });
+}
+export function TabsList({ className, ...props }) {
+    const { active } = useContext(TabsContext);
+    const reduced = useReducedMotion();
+    const shell = useRef(null);
+    const viewport = useRef(null);
+    const list = useRef(null);
+    const [edges, setEdges] = useState({ overflow: false, left: false, right: false });
+    const update = useCallback(() => {
+        const frame = shell.current;
+        const scroll = viewport.current;
+        if (!frame || !scroll)
+            return;
+        const max = Math.max(0, scroll.scrollWidth - scroll.clientWidth);
+        const next = { overflow: scroll.scrollWidth > frame.clientWidth + 1, left: scroll.scrollLeft > 1, right: scroll.scrollLeft < max - 1 };
+        setEdges(previous => previous.overflow === next.overflow && previous.left === next.left && previous.right === next.right ? previous : next);
+    }, []);
+    const reveal = useCallback((tab) => {
+        const scroll = viewport.current;
+        if (!scroll || !tab)
+            return;
+        const frame = scroll.getBoundingClientRect();
+        const item = tab.getBoundingClientRect();
+        const max = Math.max(0, scroll.scrollWidth - scroll.clientWidth);
+        const left = frame.left + (scroll.scrollLeft > 1 ? 34 : 0);
+        const right = frame.right - (scroll.scrollLeft < max - 1 ? 34 : 0);
+        const delta = item.left < left ? item.left - left : item.right > right ? item.right - right : 0;
+        if (delta)
+            scroll.scrollBy({ left: delta, behavior: reduced ? "instant" : "smooth" });
+    }, [reduced]);
+    useLayoutEffect(() => {
+        const frame = shell.current;
+        const scroll = viewport.current;
+        const content = list.current;
+        if (!frame || !scroll || !content)
+            return;
+        const observer = new ResizeObserver(update);
+        observer.observe(frame);
+        observer.observe(scroll);
+        observer.observe(content);
+        scroll.addEventListener("scroll", update, { passive: true });
+        update();
+        return () => { observer.disconnect(); scroll.removeEventListener("scroll", update); };
+    }, [update]);
+    useLayoutEffect(() => { reveal(list.current?.querySelector('[role="tab"][data-state="active"]') ?? null); }, [active, reveal]);
+    const scrollTabs = (direction) => viewport.current?.scrollBy({ left: direction * (viewport.current?.clientWidth ?? 0) * .75, behavior: reduced ? "instant" : "smooth" });
+    return _jsxs("div", { ref: shell, className: styles.listShell, "data-overflow": edges.overflow, "data-left": edges.left, "data-right": edges.right, children: [edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollLeft}`, "aria-label": "Scroll tabs left", disabled: !edges.left, onClick: () => scrollTabs(-1), children: _jsx(NavArrowLeft, { width: 17, height: 17, "aria-hidden": "true" }) }), _jsx(motion.div, { ref: viewport, layoutScroll: true, className: styles.viewport, onFocusCapture: event => { if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab")
+                    reveal(event.target); }, children: _jsx(TabsPrimitive.List, { ...props, ref: list, className: [styles.list, className].filter(Boolean).join(" ") }) }), edges.overflow && _jsx("button", { type: "button", className: `${styles.scrollButton} ${styles.scrollRight}`, "aria-label": "Scroll tabs right", disabled: !edges.right, onClick: () => scrollTabs(1), children: _jsx(NavArrowRight, { width: 17, height: 17, "aria-hidden": "true" }) })] });
+}
+export function TabsTrigger({ className, children, value, ...props }) {
+    const { active } = useContext(TabsContext);
+    const reduced = useReducedMotion();
+    // The LayoutGroup in Tabs scopes the highlight to this instance, so it glides between triggers but never flies in from another tab set.
+    return _jsxs(TabsPrimitive.Trigger, { ...props, value: value, "data-value": value, className: [styles.trigger, className].filter(Boolean).join(" "), children: [active === value && _jsx(motion.span, { className: styles.selection, layoutId: "selection", layoutDependency: active, transition: reduced ? { duration: 0 } : motionTokens.spring.morph, "aria-hidden": "true" }), _jsx("span", { className: styles.triggerLabel, children: children })] });
+}
+const panelMotion = {
+    enter: (direction) => ({ opacity: 0, x: direction * 8 }),
+    center: { opacity: 1, x: 0, transition: { opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, x: motionTokens.spring.smooth } },
+    exit: (direction) => ({ opacity: 0, x: direction * -6, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }),
+};
+/** Reduced motion: a short crossfade in place. Keys match panelMotion so server and client render identical styles. */
+const panelFade = {
+    enter: { opacity: 0, x: 0 },
+    center: { opacity: 1, x: 0, transition: { duration: motionTokens.duration.instant } },
+    exit: { opacity: 0, x: 0, transition: { duration: .1 } },
+};
+export function TabsContent({ className, value, forceMount, children, ...props }) {
+    const { active, direction, panelHeightRef, leavingRectRef } = useContext(TabsContext);
+    const reduced = useReducedMotion();
+    const panel = useRef(null);
+    const selected = active === value;
+    const classes = [styles.content, className].filter(Boolean).join(" ");
+    // The incoming panel starts at the outgoing panel's height and settles at its own, so content below glides instead of jumping.
+    useLayoutEffect(() => {
+        const node = panel.current;
+        if (!node || forceMount)
+            return;
+        // Outgoing: the tab root may have changed size around it, so pin the panel to where it was while it fades.
+        if (!selected) {
+            const before = leavingRectRef.current;
+            const now = node.getBoundingClientRect();
+            if (before)
+                node.style.translate = `${before.left - now.left}px ${before.top - now.top}px`;
+            node.inert = true;
+            return;
+        }
+        node.style.translate = "";
+        node.inert = false;
+        const from = panelHeightRef.current;
+        const to = node.offsetHeight;
+        let controls;
+        const release = () => { node.style.height = ""; node.style.overflow = ""; };
+        if (from !== null && Math.abs(from - to) > 1 && !reduced) {
+            if (to > from)
+                node.style.overflow = "clip";
+            controls = animate(node, { height: [from, to] }, { ...motionTokens.spring.smooth, onComplete: release });
+        }
+        panelHeightRef.current = controls && from !== null ? from : to;
+        const observer = new ResizeObserver(() => { panelHeightRef.current = node.offsetHeight; });
+        observer.observe(node);
+        return () => { observer.disconnect(); controls?.stop(); release(); };
+    }, [selected, reduced, forceMount, panelHeightRef, leavingRectRef]);
+    if (forceMount)
+        return _jsx(TabsPrimitive.Content, { ...props, value: value, forceMount: true, className: classes, children: children });
+    return _jsx(AnimatePresence, { initial: false, mode: "popLayout", custom: direction, children: selected && _createElement(TabsPrimitive.Content, { ...props, key: value, value: value, forceMount: true, asChild: true },
+            _jsx(motion.div, { ref: panel, className: classes, custom: direction, variants: reduced ? panelFade : panelMotion, initial: "enter", animate: "center", exit: "exit", children: children })) });
+}