@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/button/button.module.css

@@ -0,0 +1,39 @@
+/* Press scale is driven by Motion (whileTap) alone, so transform never gets a CSS transition here. */
+.button { position: relative; display: inline-flex; min-height: var(--control-height-md); align-items: center; justify-content: center; gap: var(--space-related); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 0 var(--space-inset); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
+.button:disabled { cursor: not-allowed; opacity: .52; }
+.button[aria-busy="true"] { cursor: progress; }
+/* Anchors of floating layers never scale: Radix opens on pointerdown and would measure a shrunken trigger. */
+.button:is([aria-haspopup]:not([aria-haspopup="false"]), [data-state], [role="combobox"]) { transform: none !important; }
+/* The slot's width follows the incoming label on a spring. The label stays centered and may overflow evenly while the slot catches up;
+   the outgoing label pops out of flow against the slot itself, so it keeps its place instead of following the new content box. */
+.labelSlot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; transition: opacity var(--duration-fast) var(--ease-standard); }
+.labelSlot[data-morphing] { clip-path: inset(-50% calc(var(--space-group) * -1)); }
+.labelContent { display: inline-flex; flex: none; align-items: center; }
+.labelPhase { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-related); white-space: nowrap; }
+.labelPhase svg { flex: none; }
+.primary { color: var(--primary-foreground); background: var(--primary); border-color: var(--primary); }
+.secondary { color: var(--foreground); background: var(--surface); border-color: var(--border); }
+.ghost { color: var(--text-secondary); background: transparent; border-color: transparent; }
+.danger { color: var(--danger); background: var(--surface); border-color: var(--border); }
+/* A disabled outlined button keeps its shape and fades only its label, so it still reads as a button that is off, not as plain text. */
+.secondary:disabled, .danger:disabled { opacity: 1; color: var(--text-muted); background: var(--surface-muted); border-color: var(--border); }
+.danger:disabled { color: color-mix(in oklab, var(--danger) 55%, var(--surface-muted)); }
+.ghost:disabled { opacity: 1; color: var(--text-muted); }
+@media (hover: hover) and (pointer: fine) {
+  .primary:hover:not(:disabled) { opacity: .91; box-shadow: var(--shadow-resting); }
+  .secondary:hover:not(:disabled) { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
+  .ghost:hover:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
+  .danger:hover:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
+}
+/* Color feedback on press, so touch and menu triggers (which never scale) still answer the finger. */
+.primary:active:not(:disabled) { opacity: .84; }
+.secondary:active:not(:disabled), .ghost:active:not(:disabled) { color: var(--foreground); background: var(--surface-muted); }
+.danger:active:not(:disabled) { border-color: var(--danger); background: var(--surface-muted); }
+.sm { min-height: var(--control-height-sm); padding-inline: var(--space-group); font-size: var(--text-sm); }
+.md { min-height: var(--control-height-md); }
+.lg { min-height: var(--control-height-lg); padding-inline: var(--space-comfort); font-size: var(--text-sm); }
+.loader { position: absolute; left: 50%; top: 50%; display: grid; width: var(--space-inset); height: var(--space-inset); margin: calc(var(--space-inset) / -2); }
+.spinner { border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; corner-shape: round; animation: spin .7s linear infinite; }
+.loadingLabel { opacity: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .button { transition: none; } .labelSlot { transition: opacity var(--duration-instant) linear; } .spinner { animation-duration: .01ms; animation-iteration-count: 1; } }

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

@@ -0,0 +1,59 @@
+import type { CSSProperties, ReactNode } from "react";
+export type ButtonGroupVariant = "outline" | "solid";
+export type ButtonGroupSize = "sm" | "md";
+export type ButtonGroupOrientation = "horizontal" | "vertical";
+export interface ButtonGroupItem {
+    /** Stable key for the segment. */
+    id: string;
+    /** Visible text and the accessible name. Changing it crossfades in place, so "Share" can answer "Copied". */
+    label: string;
+    /** Every other label this segment can show, such as ["Copied"]. The segment sizes to the widest, so a label change never resizes it. */
+    reserve?: string[];
+    icon?: ReactNode;
+    /** Shows only the icon; the label becomes the accessible name and the tooltip. */
+    iconOnly?: boolean;
+    /** Visible content in place of the label, such as a live value. The label stays the accessible name. */
+    content?: ReactNode;
+    onSelect?: () => void;
+    /** Renders the segment as a link. */
+    href?: string;
+    disabled?: boolean;
+}
+export interface ButtonGroupMenuItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    href?: string;
+    disabled?: boolean;
+    /** Colors the item as a destructive action. */
+    destructive?: boolean;
+}
+export interface ButtonGroupMenu {
+    /** Accessible name and tooltip of the chevron segment, such as "More actions". */
+    label: string;
+    items: ButtonGroupMenuItem[];
+}
+export interface ButtonGroupProps {
+    items: ButtonGroupItem[];
+    /** Adds a trailing chevron segment that opens these actions in a menu aligned to the group's edge. */
+    menu?: ButtonGroupMenu;
+    /** Accessible name of the group, such as "Document actions". */
+    label: string;
+    variant?: ButtonGroupVariant;
+    size?: ButtonGroupSize;
+    orientation?: ButtonGroupOrientation;
+    /** When the row does not fit its container, segments with an icon drop their label and keep the icon. Horizontal only. */
+    collapseLabels?: boolean;
+    /** Disables every segment and the menu. */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Related actions joined into one surface: a shared border and radius, hairline dividers, no gaps. One soft highlight glides
+ * between segments under the pointer or keyboard focus, the pressed segment answers in place, and an optional chevron
+ * segment opens more actions in a menu aligned to the group's edge.
+ */
+export declare function ButtonGroup({ items, menu, label, variant, size, orientation, collapseLabels, disabled, className, style }: ButtonGroupProps): import("react").JSX.Element;
+export default ButtonGroup;

package/components/button-group/button-group.js

@@ -0,0 +1,280 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { isValidElement, useEffect, useLayoutEffect, useRef, useState } from "react";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { ChevronDown } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./button-group.module.css";
+/** Key of the chevron segment. Plain text, because the HTML parser rewrites control characters in server-rendered attributes. */
+const MENU = "button-group-menu";
+const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
+const textIn = { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: -3, filter: `blur(${motionTokens.blur.soft}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } };
+const fadeIn = { ...rest, opacity: 0 };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Names the icon element, so swapping Link for Check morphs while a re-render of the same icon stays still. */
+function iconKey(node) {
+    if (!isValidElement(node))
+        return node == null || typeof node === "boolean" ? "" : String(node);
+    const type = node.type;
+    return typeof type === "string" ? type : type?.displayName ?? type?.name ?? "icon";
+}
+/** Springs the slot to the natural width of its content when the label changes; other resizes (a late web font, collapsing labels) jump. */
+function useMorphWidth(content, key, reduced) {
+    const width = useMotionValue("auto");
+    const lastKey = useRef(key), armedUntil = useRef(0);
+    useLayoutEffect(() => {
+        if (lastKey.current === key)
+            return;
+        lastKey.current = key;
+        armedUntil.current = performance.now() + 700;
+    }, [key]);
+    useEffect(() => {
+        const node = content.current, slot = node?.parentElement;
+        if (!node || !slot || typeof ResizeObserver === "undefined")
+            return;
+        let measured = false;
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.contentRect.width;
+            if (!next || !measured || reduced || performance.now() > armedUntil.current) {
+                measured = next > 0;
+                width.jump(next || "auto");
+                delete slot.dataset.morphing;
+                return;
+            }
+            slot.dataset.morphing = "";
+            animate(width, next, { ...motionTokens.spring.morph, onComplete: () => { delete slot.dataset.morphing; } });
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [content, reduced, width]);
+    return width;
+}
+/**
+ * Icon and label of one segment. Every reserved label sits invisibly in the same grid cell, so the segment is as wide as its widest
+ * state and a new label crossfades inside a fixed box: it rises in from a soft blur while the old one lifts away. A label nobody
+ * reserved still never snaps: the slot springs to its width.
+ */
+function SegmentContent({ item, reduced }) {
+    const contentRef = useRef(null);
+    const key = `${iconKey(item.icon)}|${item.content !== undefined ? "\u0000content" : item.iconOnly ? "" : item.label}`;
+    const width = useMorphWidth(contentRef, key, reduced);
+    const sizers = item.iconOnly || item.content !== undefined ? [] : [...new Set([item.label, ...(item.reserve ?? [])])];
+    return _jsx(motion.span, { className: styles.slot, style: { width }, "aria-hidden": "true", children: _jsxs("span", { ref: contentRef, className: styles.slotContent, children: [sizers.map(text => _jsxs("span", { className: `${styles.phase} ${styles.sizer}`, children: [item.icon ? _jsx("span", { className: styles.iconBox }) : null, _jsx("span", { className: styles.label, "data-collapsible": item.icon ? "" : undefined, children: text })] }, text)), _jsx(AnimatePresence, { initial: false, children: _jsxs(motion.span, { className: styles.phase, initial: reduced ? fadeIn : textIn, animate: rest, exit: reduced ? fadeOut : textOut, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: [item.icon ? _jsx("span", { className: styles.icon, children: item.icon }) : null, item.content !== undefined ? _jsx("span", { className: styles.value, children: item.content }) : item.iconOnly ? null : _jsx("span", { className: styles.label, "data-collapsible": item.icon ? "" : undefined, children: item.label })] }, key) })] }) });
+}
+const inside = (node, x, y) => {
+    const rect = node.getBoundingClientRect();
+    return x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+};
+/** Segments are found by their data-key, so the group needs no ref per segment. */
+const segmentsIn = (root) => Array.from(root?.querySelectorAll(":scope > [data-key]") ?? []);
+const segmentIn = (root, key) => key === null ? undefined : segmentsIn(root).find(node => node.dataset.key === key);
+/** The segment's box inside the group at sub-pixel precision, undoing any scale an ancestor applies. */
+function boxOf(group, node) {
+    const outer = group.getBoundingClientRect(), inner = node.getBoundingClientRect();
+    // offsetWidth is rounded to whole pixels, so only a real transform (more than a pixel apart) counts as scale.
+    const scale = group.offsetWidth && Math.abs(outer.width - group.offsetWidth) > 1 ? outer.width / group.offsetWidth : 1;
+    return [(inner.left - outer.left) / scale - group.clientLeft + group.scrollLeft, (inner.top - outer.top) / scale - group.clientTop + group.scrollTop, inner.width / scale, inner.height / scale];
+}
+const inert = (node) => node.disabled || node.getAttribute("aria-disabled") === "true";
+/**
+ * Related actions joined into one surface: a shared border and radius, hairline dividers, no gaps. One soft highlight glides
+ * between segments under the pointer or keyboard focus, the pressed segment answers in place, and an optional chevron
+ * segment opens more actions in a menu aligned to the group's edge.
+ */
+export function ButtonGroup({ items, menu, label, variant = "outline", size = "md", orientation = "horizontal", collapseLabels = true, disabled = false, className, style }) {
+    const reduced = useReducedMotion() ?? false;
+    const root = useRef(null);
+    const vertical = orientation === "vertical";
+    // The highlight sits on the pointer's segment, else the pressed one (touch), else the open menu's chevron, else keyboard focus.
+    const [hover, setHover] = useState(null);
+    const [pressed, setPressed] = useState(null);
+    const [focused, setFocused] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    const active = hover ?? pressed ?? (menuOpen ? MENU : null) ?? focused;
+    const keys = [...items.map(item => item.id), ...(menu ? [MENU] : [])];
+    const activeIndex = active ? keys.indexOf(active) : -1;
+    const inertKey = `${disabled}${items.map(item => item.disabled ? 1 : 0).join("")}`;
+    const x = useMotionValue(0), y = useMotionValue(0), width = useMotionValue(0), height = useMotionValue(0), opacity = useMotionValue(0);
+    const shown = useRef(null);
+    useLayoutEffect(() => {
+        const node = segmentIn(root.current, active);
+        // Hovering a disabled segment shows nothing; focus on one still shows where the keyboard is.
+        if (!node || (inert(node) && active !== focused)) {
+            if (shown.current)
+                animate(opacity, 0, { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.fast, ease: [...motionTokens.ease.standard] });
+            shown.current = null;
+            return;
+        }
+        const target = boxOf(root.current, node);
+        const values = [x, y, width, height];
+        if (!shown.current || reduced) {
+            // Arriving from nowhere, it appears in place; only moves between segments travel.
+            values.forEach((value, index) => value.jump(target[index]));
+            animate(opacity, 1, { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.fast, ease: [...motionTokens.ease.standard] });
+        }
+        else {
+            values.forEach((value, index) => animate(value, target[index], motionTokens.spring.snappy));
+            animate(opacity, 1, { duration: motionTokens.duration.fast });
+        }
+        shown.current = active;
+        // inertKey re-checks a segment that turns disabled under a still pointer.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [active, inertKey, reduced, x, y, width, height, opacity]);
+    // Segments resize when a label morphs or labels collapse; the highlight stays locked to its segment.
+    const keyList = keys.join("\u0000");
+    useEffect(() => {
+        const group = root.current;
+        if (!group || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const node = segmentIn(group, shown.current);
+            if (!node)
+                return;
+            const target = boxOf(group, node);
+            [x, y, width, height].forEach((value, index) => {
+                if (Math.abs(value.get() - target[index]) < .01)
+                    return;
+                if (value.isAnimating() && !reduced)
+                    animate(value, target[index], motionTokens.spring.snappy);
+                else
+                    value.jump(target[index]);
+            });
+        });
+        observer.observe(group);
+        segmentsIn(group).forEach(node => observer.observe(node));
+        return () => observer.disconnect();
+    }, [keyList, reduced, x, y, width, height]);
+    // Labels collapse to icons when the row overflows, and come back once the container is wide enough for the full row again.
+    const [overflowing, setCompact] = useState(false);
+    const fullWidth = useRef(0), blockedAt = useRef(0);
+    const collapsible = collapseLabels && !vertical && items.some(item => item.icon && !item.iconOnly && item.content === undefined);
+    const compact = collapsible && overflowing;
+    useEffect(() => {
+        const group = root.current, parent = group?.parentElement;
+        if (!group || !parent || !collapsible || typeof ResizeObserver === "undefined")
+            return;
+        const check = () => {
+            const box = getComputedStyle(parent);
+            const available = parent.clientWidth - parseFloat(box.paddingLeft) - parseFloat(box.paddingRight);
+            if (group.dataset.compact === undefined) {
+                if (group.scrollWidth > group.clientWidth + 1) {
+                    fullWidth.current = group.scrollWidth + 2;
+                    blockedAt.current = available;
+                    setCompact(true);
+                }
+            }
+            else if (available > blockedAt.current && available >= fullWidth.current)
+                setCompact(false);
+        };
+        const observer = new ResizeObserver(check);
+        observer.observe(group);
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, [collapsible, keyList]);
+    // Pressing tracks the segment under the finger, so touch gets the same highlight a pointer gets on hover.
+    useEffect(() => {
+        if (!pressed)
+            return;
+        const release = () => setPressed(null);
+        window.addEventListener("pointerup", release);
+        window.addEventListener("pointercancel", release);
+        return () => { window.removeEventListener("pointerup", release); window.removeEventListener("pointercancel", release); };
+    }, [pressed]);
+    const hit = (event) => {
+        for (const node of segmentsIn(root.current))
+            if (inside(node, event.clientX, event.clientY))
+                return inert(node) ? null : node.dataset.key ?? null;
+        return null;
+    };
+    const onPointerMove = (event) => { if (event.pointerType !== "touch")
+        setHover(hit(event)); };
+    const onPointerLeave = () => setHover(null);
+    const onPointerDown = (event) => { if (event.button === 0)
+        setPressed(hit(event)); };
+    // Keyboard focus shows the highlight; a mouse click focuses without it, so nothing stays lit after the pointer leaves.
+    const onFocus = (event) => {
+        const target = event.target;
+        const key = target.dataset.key;
+        if (key === undefined)
+            return;
+        let visible = true;
+        try {
+            visible = target.matches(":focus-visible");
+        }
+        catch { /* older engines */ }
+        setFocused(visible ? key : null);
+    };
+    const onBlur = (event) => { if (!root.current?.contains(event.relatedTarget))
+        setFocused(null); };
+    // Tab visits every segment in order; arrow keys along the orientation, Home and End also move between them.
+    const onKeyDown = (event) => {
+        if (event.defaultPrevented)
+            return;
+        // Disabled segments stay focusable (aria-disabled), so the keyboard can find them and hear why nothing happens.
+        const list = segmentsIn(root.current).filter(node => !node.disabled);
+        const index = list.findIndex(node => node === document.activeElement);
+        if (index < 0)
+            return;
+        const rtl = !vertical && getComputedStyle(root.current).direction === "rtl";
+        const forward = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+        const backward = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+        const last = list.length - 1;
+        const target = event.key === forward ? (index === last ? 0 : index + 1) : event.key === backward ? (index === 0 ? last : index - 1) : event.key === "Home" ? 0 : event.key === "End" ? last : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        list[target].focus();
+    };
+    // A label that changes right after its segment is pressed, such as "Copied", is announced once; the quiet revert is not.
+    const [announcement, setAnnouncement] = useState("");
+    const labels = useRef(null);
+    const activated = useRef({ key: "", at: 0 });
+    const labelList = items.map(item => `${item.id}\u0000${item.label}`).join("\u0001");
+    useEffect(() => {
+        const previous = labels.current;
+        labels.current = new Map(items.map(item => [item.id, item.label]));
+        if (!previous)
+            return;
+        const recent = performance.now() - activated.current.at < 1000;
+        const changed = items.filter(item => recent && item.id === activated.current.key && previous.has(item.id) && previous.get(item.id) !== item.label && item.content === undefined);
+        if (changed.length)
+            setAnnouncement(changed.map(item => item.label).join(", "));
+        // labelList carries the only part of items this effect reads.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [labelList]);
+    const select = (item) => { activated.current = { key: item.id, at: performance.now() }; item.onSelect?.(); };
+    const quiet = (index) => activeIndex >= 0 && (index === activeIndex || index === activeIndex + 1) ? "" : undefined;
+    const segments = items.map((item, index) => {
+        const off = item.disabled && !disabled;
+        const named = item.iconOnly || item.content !== undefined || (compact && !!item.icon);
+        const common = {
+            className: [styles.segment, item.iconOnly ? styles.iconOnly : ""].filter(Boolean).join(" "),
+            "data-key": item.id,
+            "data-quiet": quiet(index),
+            "data-collapsible": item.icon && !item.iconOnly && item.content === undefined ? "" : undefined,
+            "aria-label": named ? item.label : undefined,
+            title: item.iconOnly || (compact && item.icon) ? item.label : undefined,
+        };
+        const body = _jsx("span", { className: styles.content, children: _jsx(SegmentContent, { item: item, reduced: reduced }) });
+        if (item.href && !off && !disabled)
+            return _jsxs("a", { ...common, href: item.href, onClick: () => select(item), children: [body, named ? null : _jsx("span", { className: styles.srOnly, children: item.label })] }, item.id);
+        return _jsxs("button", { ...common, type: "button", disabled: disabled, "aria-disabled": off || undefined, onClick: off ? undefined : () => select(item), children: [body, named ? null : _jsx("span", { className: styles.srOnly, children: item.label })] }, item.id);
+    });
+    const classes = [styles.group, styles[variant], styles[size], vertical ? styles.vertical : "", compact ? styles.compact : "", className].filter(Boolean).join(" ");
+    const group = _jsxs("div", { ref: root, className: classes, style: style, role: "group", "aria-label": label, "aria-disabled": disabled || undefined, "data-orientation": orientation, "data-compact": compact ? "" : undefined, onPointerMove: onPointerMove, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, children: [_jsx(motion.span, { className: styles.highlight, style: { x, y, width, height, opacity }, "data-pressed": pressed && pressed === active ? "" : undefined, "aria-hidden": "true" }), segments, menu ? _jsx(DropdownPrimitive.Trigger, { className: [styles.segment, styles.trigger].join(" "), "data-key": MENU, "data-quiet": quiet(items.length), "aria-label": menu.label, title: menu.label, disabled: disabled, children: _jsx("span", { className: styles.content, children: _jsx(ChevronDown, { className: styles.chevron, "aria-hidden": "true" }) }) }) : null, _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: announcement })] });
+    if (!menu)
+        return group;
+    // Non-modal: no scroll lock, so opening the menu never shifts the page by a scrollbar's width.
+    return _jsxs(DropdownPrimitive.Root, { open: menuOpen, onOpenChange: setMenuOpen, modal: false, children: [group, _jsx(DropdownPrimitive.Portal, { children: _jsx(DropdownPrimitive.Content, { className: styles.menu, side: "bottom", align: vertical ? "start" : "end", alignOffset: -1, sideOffset: 6, collisionPadding: 12, loop: true, children: menu.items.map((action, index) => {
+                        const classes = [styles.item, action.destructive ? styles.destructive : ""].filter(Boolean).join(" ");
+                        const body = _jsxs(_Fragment, { children: [action.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: action.icon }) : null, _jsx("span", { className: styles.itemLabel, children: action.label })] });
+                        return action.href
+                            ? _jsx(DropdownPrimitive.Item, { className: classes, style: { "--i": index }, disabled: action.disabled, onSelect: action.onSelect, asChild: true, children: _jsx("a", { href: action.href, children: body }) }, action.id)
+                            : _jsx(DropdownPrimitive.Item, { className: classes, style: { "--i": index }, disabled: action.disabled, onSelect: action.onSelect, children: body }, action.id);
+                    }) }) })] });
+}
+export default ButtonGroup;

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

@@ -0,0 +1,87 @@
+/* One surface, several actions: a shared border and radius, hairline dividers, no gaps. A single soft highlight travels under the
+   segments instead of each one lighting up; the dividers beside it step aside so it reads as one shape. */
+.group { --bg-h: var(--control-height-md); --bg-pad-x: 14px; --bg-inset: 3px; --bg-radius: var(--radius-control); --bg-divider: var(--border); --bg-divider-inset: 11px; --bg-highlight: var(--surface-muted); --bg-highlight-pressed: color-mix(in oklab, var(--surface-muted), var(--border-strong) 30%); --bg-muted-ink: var(--text-secondary);
+  position: relative; isolation: isolate; display: inline-flex; max-width: 100%; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border: 1px solid var(--border); border-radius: var(--bg-radius); background: var(--surface); color: var(--foreground); vertical-align: middle; }
+.group::-webkit-scrollbar { display: none; }
+.sm { --bg-h: var(--control-height-sm); --bg-pad-x: 12px; --bg-divider-inset: 9px; }
+.md { --bg-h: var(--control-height-md); }
+/* Solid is the primary group: the foreground fill of a primary button, with the highlight and dividers mixed from the page color. */
+.solid { --bg-divider: color-mix(in oklab, var(--background) 20%, var(--foreground)); --bg-highlight: color-mix(in oklab, var(--background) 13%, var(--foreground)); --bg-highlight-pressed: color-mix(in oklab, var(--background) 22%, var(--foreground)); --bg-muted-ink: color-mix(in oklab, var(--background) 72%, var(--foreground)); border-color: var(--foreground); background: var(--foreground); color: var(--background); }
+.vertical { flex-direction: column; overflow: visible; --bg-divider-inset: 10px; }
+.group[aria-disabled="true"] { opacity: .52; }
+
+/* The travelling highlight. Motion sets its box to the active segment; the visible shape sits inset so the border stays crisp. */
+.highlight { position: absolute; z-index: 0; top: 0; left: 0; pointer-events: none; }
+.highlight::before { position: absolute; inset: var(--bg-inset); border-radius: calc(var(--bg-radius) - var(--bg-inset) - 1px); corner-shape: var(--corner-shape); background: var(--bg-highlight); content: ""; transition: background-color var(--duration-fast) var(--ease-standard); }
+.highlight[data-pressed]::before { background: var(--bg-highlight-pressed); transition-duration: var(--duration-instant); }
+
+.segment { position: relative; z-index: 1; display: inline-flex; flex: none; min-width: calc(var(--bg-h) - 2px); height: calc(var(--bg-h) - 2px); align-items: center; justify-content: center; margin: 0; padding: 0 var(--bg-pad-x); border: 0; border-radius: 0; corner-shape: round; background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+.vertical .segment { width: 100%; justify-content: flex-start; }
+.vertical .iconOnly, .vertical .trigger { justify-content: center; padding: 0; }
+.iconOnly { width: calc(var(--bg-h) - 2px); padding: 0; }
+.trigger { width: calc(var(--bg-h) - 6px); min-width: 0; padding: 0; color: var(--bg-muted-ink); transition: color var(--duration-fast) var(--ease-standard); }
+.trigger[data-state="open"] { color: inherit; }
+.segment[aria-disabled="true"] { cursor: not-allowed; }
+.segment[aria-disabled="true"] .content { opacity: .4; }
+.group[aria-disabled="true"] .segment { cursor: not-allowed; }
+/* Collapsed rows keep the icon and drop the label; the label moves to aria-label and the tooltip. */
+.compact .segment[data-collapsible] { width: calc(var(--bg-h) - 2px); padding: 0; }
+.compact .label[data-collapsible] { display: none; }
+
+/* Hairline dividers sit between segments and fade where the highlight arrives, so it never sits beside a line. */
+.segment + .segment::before { position: absolute; top: var(--bg-divider-inset); bottom: var(--bg-divider-inset); left: -.5px; width: 1px; background: var(--bg-divider); content: ""; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
+.vertical .segment + .segment::before { top: -.5px; right: var(--bg-divider-inset); bottom: auto; left: var(--bg-divider-inset); width: auto; height: 1px; }
+.segment[data-quiet]::before { opacity: 0; }
+
+/* The press answers inside the segment: content dips and springs back, the group and its neighbours stay still. */
+.content { position: relative; display: inline-flex; align-items: center; transition: transform var(--duration-spring) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.segment:active:not([aria-disabled="true"]) .content { transform: scale(.97); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
+.iconOnly:active:not([aria-disabled="true"]) .content { transform: scale(.9); }
+/* The chevron anchors the menu, so it answers with the deeper highlight only. */
+.trigger:active .content { transform: none; }
+.chevron { width: 16px; height: 16px; stroke-width: 1.75; transition: transform var(--duration-spring) var(--ease-spring); }
+.trigger[data-state="open"] .chevron { transform: rotate(180deg); }
+
+/* Reserved labels and the visible one share one grid cell, so the widest state sets the width and a change crossfades in place.
+   A label nobody reserved springs the slot to its width instead; content is clipped only while that happens. */
+.slot { position: relative; display: inline-flex; min-width: 0; align-items: center; justify-content: center; }
+.slot[data-morphing] { clip-path: inset(-50% calc(var(--space-group) * -1)); }
+.slotContent { display: inline-grid; flex: none; align-items: center; justify-items: center; }
+.slotContent > * { grid-area: 1 / 1; }
+.phase { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
+.sizer { visibility: hidden; pointer-events: none; }
+.iconBox { display: inline-block; width: 16px; height: 16px; flex: none; }
+.sm .phase { gap: 6px; }
+.icon { display: inline-flex; flex: none; }
+.icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
+.value { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
+.label { display: inline-block; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* The menu grows from the group's edge: offset toward it, scale from the Radix origin, and leave faster than it arrives.
+   Transitions instead of keyframes, so a close that interrupts the open reverses from where the menu is. */
+.menu { --menu-x: 0px; --menu-y: -5px; z-index: 60; min-width: min(13rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu[data-side="top"] { --menu-y: 5px; }
+.menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
+.menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
+@starting-style {
+  .menu[data-state="open"] { opacity: 0; transform: translate(var(--menu-x), var(--menu-y)) scale(.97); }
+  .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
+}
+/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
+.item { display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
+.item[data-highlighted] { background: var(--surface-muted); }
+.item[data-disabled] { cursor: default; opacity: .45; }
+.itemIcon { display: inline-flex; flex: none; color: var(--text-secondary); }
+.itemIcon svg { width: 16px; height: 16px; stroke-width: 1.75; }
+.itemLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.destructive, .destructive .itemIcon { color: var(--danger); }
+.destructive[data-highlighted] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
+@keyframes menu-exit { to { --menu-exit: 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .content, .chevron, .segment::before, .highlight::before, .item { transition: none; }
+  .segment:active .content, .iconOnly:active .content { transform: none; }
+  .menu, .menu[data-state="closed"] { transform: none; transition: opacity var(--duration-instant) linear; }
+}

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

@@ -0,0 +1,24 @@
+/**
+ * A link that looks exactly like a Button. Navigation is a link, never a button that pushes a route, so it opens in a new
+ * tab, shows its address and works without JavaScript. No client code: it renders on the server as a plain <a>.
+ *
+ *   <ButtonLink href="/sign-in">Sign in</ButtonLink>
+ *   <ButtonLink href="/docs" variant="secondary" as={Link}>Read the docs</ButtonLink>
+ *
+ * Pass `as` to render your router's link (next/link, a wrapped React Router Link); it receives `href`, `className`,
+ * `data-variant` and the other anchor props.
+ */
+import type { AnchorHTMLAttributes, ComponentType, ReactNode } from "react";
+import type { ButtonSize, ButtonVariant } from "../button/button.js";
+export interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** The element to render instead of <a>, such as next/link. */
+    as?: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement> & {
+        href: string;
+    }>;
+    children: ReactNode;
+}
+export declare function ButtonLink({ href, variant, size, as: Anchor, className, children, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export default ButtonLink;

package/components/button-link/button-link.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import buttonStyles from "../button/button.module.css";
+import styles from "./button-link.module.css";
+export function ButtonLink({ href, variant = "primary", size = "md", as: Anchor, className, children, ...props }) {
+    const classes = [buttonStyles.button, buttonStyles[variant], buttonStyles[size], styles.link, className].filter(Boolean).join(" ");
+    const content = _jsx("span", { className: styles.content, children: children });
+    if (Anchor)
+        return _jsx(Anchor, { ...props, href: href, "data-variant": variant, className: classes, children: content });
+    return _jsx("a", { ...props, href: href, "data-variant": variant, className: classes, children: content });
+}
+export default ButtonLink;

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

@@ -0,0 +1,7 @@
+/* Button's look on a link: no underline in any state, and a CSS press in place of Button's Motion press. */
+.link { text-decoration: none; transition-property: color, background, border-color, opacity, box-shadow, transform; }
+.link:hover { text-decoration: none; }
+.link:active { transform: scale(.97); transition-duration: var(--duration-instant); }
+.content { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-related); white-space: nowrap; }
+.content svg { flex: none; }
+@media (prefers-reduced-motion: reduce) { .link:active { transform: none; } }

package/components/calendar/calendar.d.ts

@@ -0,0 +1,22 @@
+export type CalendarDateMatcher = (date: Date) => boolean;
+export interface CalendarProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    month?: Date;
+    onMonthChange?: (month: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: CalendarDateMatcher;
+    locale?: string;
+    className?: string;
+    /** Adds a Today button that slides back to the current month and selects today when it is available. */
+    showToday?: boolean;
+}
+declare const startOfDay: (date: Date) => Date;
+declare const sameDay: (a?: Date, b?: Date) => boolean;
+declare const addDays: (date: Date, amount: number) => Date;
+declare const addMonths: (date: Date, amount: number) => Date;
+/** 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";
+export declare function Calendar({ value, onChange, month: controlledMonth, onMonthChange, minDate, maxDate, disabledDates, locale, className, showToday, }: CalendarProps): import("react").JSX.Element;
+export { addDays, addMonths, sameDay, startOfDay };