@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/phone-input/phone-input.module.css

@@ -0,0 +1,98 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+.field { --pi-h: var(--control-height-md); --pi-panel-w: 320px; position: relative; display: grid; min-width: 0; font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+.field[data-open] { z-index: 30; }
+.label { justify-self: start; margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+
+/* The shell matches the labeled input: one border, one radius, and a quiet border change on hover and focus. */
+.control { position: relative; display: flex; min-width: 0; height: var(--pi-h); box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .control:hover:not([data-invalid]) { border-color: var(--foreground); } }
+.control:has(.number:focus) { border-color: var(--foreground); }
+.control[data-invalid] { border-color: var(--danger); }
+.field[data-disabled] .control { opacity: .5; background: var(--surface-muted); }
+
+/* The anchor holds the closed button's place and springs to a new width when the calling code changes length. */
+.anchor { position: relative; flex: none; height: 100%; }
+.anchor::after { content: ""; position: absolute; top: 10px; right: 0; bottom: 10px; width: 1px; background: var(--border); transition: opacity var(--duration-fast) var(--ease-standard); }
+.field[data-open] .anchor::after { opacity: 0; }
+
+/* One material for both states. Open, it steps out over the shell's own border so the two edges never double up. */
+.shape { position: absolute; z-index: 2; top: 0; left: 0; overflow: clip; background: var(--surface); transition: box-shadow var(--duration-considered) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+.shape::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 1px solid var(--border); border-radius: inherit; corner-shape: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
+.field[data-open] .shape { translate: -1px -1px; background: var(--surface-raised); box-shadow: var(--shadow-floating); }
+.field[data-open] .shape::after { opacity: 1; }
+.field[data-disabled] .shape { background: transparent; }
+
+.lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: calc(var(--pi-h) - 2px); }
+
+.trigger { box-sizing: border-box; display: flex; height: calc(var(--pi-h) - 2px); align-items: center; padding: 0 36px 0 12px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
+.lid .trigger { position: absolute; inset: 3px auto 3px 3px; width: calc(100% - 6px); height: auto; margin: 0; padding: 0 33px 0 9px; border: 0; border-radius: calc(var(--radius-control) - 4px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .field:not([data-open], [data-disabled]) .lid .trigger:hover { background: var(--surface-muted); } }
+.lid .trigger:active:not(:disabled) { background: var(--surface-muted); }
+.lid .trigger:disabled { cursor: not-allowed; }
+/* No focus rings (product decision): keyboard focus reads as the same quiet fill as hover. */
+.lid .trigger:focus-visible { background: var(--surface-muted); }
+.clear:focus-visible, .closeHit:focus-visible { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
+/* An invisible copy that says how wide the closed button wants to be. */
+.measure { visibility: hidden; pointer-events: none; width: max-content; }
+
+.slot { position: relative; display: block; min-width: 0; height: 100%; flex: 1; }
+.slot[data-hidden] { opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
+.layer { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; }
+.flag { display: inline-grid; width: 20px; flex: none; place-items: center; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", var(--font-body); font-size: 17px; font-weight: 400; line-height: 1; }
+.dial { font-variant-numeric: tabular-nums; }
+
+.chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; }
+
+/* Search takes the lid's place while the list is open. */
+.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 2px 0 13px; }
+.searchRow[inert] { pointer-events: none; }
+.searchIcon { flex: none; color: var(--text-muted); }
+.search { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: none; }
+.search::placeholder { color: var(--text-muted); }
+.clear { display: grid; width: 24px; height: 24px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
+/* Sits over the shared chevron, so the chevron closes the list. */
+.closeHit { width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) {
+  .closeHit:hover, .clear:hover { background: color-mix(in oklab, var(--foreground) 8%, transparent); }
+  .clear:hover { color: var(--foreground); }
+}
+
+/* The list hangs under the lid at its final width, so rows never reflow while the surface springs open. */
+.listFace { position: absolute; top: calc(var(--pi-h) - 2px); left: 0; box-sizing: border-box; width: var(--pi-panel-w); padding: 0 6px 6px; }
+.listFace::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
+.listFace[inert] { pointer-events: none; }
+.scroll { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
+.options { position: relative; display: grid; gap: 2px; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
+.group { display: grid; gap: 2px; }
+.group + .group { margin-top: 4px; }
+.groupLabel { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); }
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
+.name { min-width: 0; flex: 1; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
+.meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.check[data-on] { opacity: 1; transform: none; }
+.empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }
+
+/* The number and its guide share one box. The guide paints the typed part invisibly, then the rest of the example faintly after it. */
+.numberWrap { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; }
+.number, .guide { box-sizing: border-box; padding: 0 36px 0 12px; font-family: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
+.number { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; margin: 0; border: 0; border-radius: 0 var(--radius-control) var(--radius-control) 0; corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); outline: none; }
+.number:disabled { cursor: not-allowed; }
+.guide { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; color: color-mix(in oklab, var(--text-muted) 72%, transparent); pointer-events: none; white-space: pre; }
+.guideTyped { visibility: hidden; }
+.valid { position: absolute; z-index: 1; top: 50%; right: 12px; display: grid; width: 18px; height: 18px; margin-top: -9px; place-items: center; color: var(--success); pointer-events: none; }
+
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { position: relative; display: block; overflow: hidden; }
+.hint, .error { display: block; padding-top: var(--space-related); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { color: var(--text-muted); }
+.error { color: var(--danger); }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .shape, .shape::after, .check, .slot, .control { transition-duration: 0ms; }
+}
+@media (prefers-contrast: more) { .shape::after { border-color: var(--border-strong); } }

package/components/popover/popover.d.ts

@@ -0,0 +1,6 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** The trigger anchors the panel, so it opts out of press-scale: a scaled rect measured on open would shift the panel as the trigger springs back. */
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/popover/popover.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { forwardRef } from "react";
+import { ESCAPE_LAYER_ATTRIBUTE, layerEscape } from "../../lib/escape.js";
+import styles from "./popover.module.css";
+export const Popover = PopoverPrimitive.Root;
+export const PopoverClose = PopoverPrimitive.Close;
+/** The trigger anchors the panel, so it opts out of press-scale: a scaled rect measured on open would shift the panel as the trigger springs back. */
+export const PopoverTrigger = forwardRef(function PopoverTrigger({ className, ...props }, ref) {
+    return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref, className: [styles.anchor, className].filter(Boolean).join(" ") });
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+export const PopoverContent = forwardRef(function PopoverContent({ className, align = "start", sideOffset = 6, collisionPadding = 10, onEscapeKeyDown, ...props }, ref) {
+    return _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ...props, [ESCAPE_LAYER_ATTRIBUTE]: "", 
+            // Escape inside belongs to an open list, calendar or question first (lib/escape.ts).
+            onEscapeKeyDown: layerEscape(onEscapeKeyDown), ref: ref, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: [styles.content, className].filter(Boolean).join(" ") }) });
+});
+PopoverContent.displayName = "PopoverContent";

package/components/popover/popover.module.css

@@ -0,0 +1,32 @@
+/* Press feedback on the anchor stays in color. Radix measures the trigger when the panel opens, so a scaled trigger would move the panel. */
+.anchor:active:not(:disabled) { transform: none; }
+.content {
+  --popover-x: 0px;
+  --popover-y: -5px;
+  z-index: 80;
+  min-width: 12rem;
+  max-width: min(22rem, calc(100vw - 20px));
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-container);
+  background: var(--surface-raised);
+  color: var(--foreground);
+  box-shadow: var(--shadow-floating);
+  transform-origin: var(--radix-popover-content-transform-origin);
+  transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring);
+}
+/* The panel starts a few pixels toward its trigger and settles on a spring; it leaves faster than it arrives.
+   Transitions instead of keyframes, so a close that interrupts the open, or a reopen during the close, reverses from where the panel is. */
+.content[data-side="top"] { --popover-y: 5px; }
+.content[data-side="left"] { --popover-x: 5px; --popover-y: 0px; }
+.content[data-side="right"] { --popover-x: -5px; --popover-y: 0px; }
+@starting-style {
+  .content[data-state="open"] { opacity: 0; transform: translate(var(--popover-x), var(--popover-y)) scale(.97); }
+}
+/* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
+.content[data-state="closed"] { opacity: 0; transform: translate(calc(var(--popover-x) * .5), calc(var(--popover-y) * .5)) scale(.98); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); animation: popover-exit var(--duration-fast) linear both; pointer-events: none; }
+.content:focus { outline: none; }
+@keyframes popover-exit { to { --popover-exit: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .content, .content[data-state="closed"] { transform: none; transition: opacity var(--duration-instant) var(--ease-standard); }
+}

package/components/progress/progress.d.ts

@@ -0,0 +1,8 @@
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    value?: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+}
+export declare function Progress({ value, max, label, showValue, className, ...props }: ProgressProps): import("react").JSX.Element;
+export default Progress;

package/components/progress/progress.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { Check } from "lucide-react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./progress.module.css";
+const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
+const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
+const iconIn = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` };
+const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
+const fadeOut = { opacity: 0, transition: { duration: motionTokens.duration.instant } };
+/** Outgoing copies are hidden from assistive tech while they fade. */
+function Swap(props) {
+    const present = useIsPresent();
+    return _jsx(motion.span, { ...props, "aria-hidden": present ? props["aria-hidden"] : true });
+}
+export function Progress({ value = 0, max = 100, label, showValue = false, className, ...props }) {
+    const reduce = useReducedMotion();
+    const safeMax = max > 0 ? max : 100;
+    const safeValue = Math.min(Math.max(value, 0), safeMax);
+    const percentage = Math.round((safeValue / safeMax) * 100);
+    const complete = percentage >= 100;
+    // One spring drives both the fill and the counted label, so the number always matches the bar.
+    const progress = useMotionValue(percentage);
+    // The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value.
+    const x = useTransform(progress, latest => `${Math.min(Math.max(latest, 0), 100) - 100}%`);
+    const counted = useTransform(progress, latest => `${Math.round(Math.min(Math.max(latest, 0), 100))}%`);
+    useEffect(() => {
+        if (reduce) {
+            progress.jump(percentage);
+            return;
+        }
+        const controls = animate(progress, percentage, motionTokens.spring.smooth);
+        return () => controls.stop();
+    }, [percentage, progress, reduce]);
+    const enter = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+    const classes = [styles.progress, className].filter(Boolean).join(" ");
+    return _jsxs("div", { ...props, className: classes, "data-complete": complete ? "" : undefined, role: "progressbar", "aria-label": label ?? "Progress", "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuenow": safeValue, "aria-valuetext": `${percentage}%`, children: [(label || showValue) ? _jsxs("div", { className: styles.meta, children: [label ? _jsx("span", { className: styles.label, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(Swap, { className: styles.line, initial: reduce ? { opacity: 0 } : textIn, animate: shown, exit: reduce ? fadeOut : textOut, transition: enter, children: label }, label) }) }) : _jsx("span", {}), showValue ? _jsxs("span", { className: styles.value, children: [_jsx(AnimatePresence, { initial: false, children: complete && _jsx(motion.span, { className: styles.done, initial: reduce ? { opacity: 0 } : iconIn, animate: shown, exit: reduce ? fadeOut : { ...iconIn, transition: exitFast }, transition: reduce ? enter : { ...motionTokens.spring.snappy, delay: .24 }, children: _jsx(Check, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "done") }), _jsx(motion.span, { className: styles.count, children: counted })] }) : null] }) : null, _jsx("div", { className: styles.track, children: _jsx(motion.span, { className: styles.fill, style: { x } }) })] });
+}
+export default Progress;

package/components/progress/progress.module.css

@@ -0,0 +1 @@
+.progress { width: 100%; color: var(--text-secondary); font-size: var(--text-sm); } .meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; line-height: var(--leading-body); } .label { position: relative; min-width: 0; } .line { display: block; } .value { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .count { display: inline-grid; justify-items: end; } /* A hidden "100%" row reserves the widest count, so the check never shifts as the number gains a digit. */ .count::before { content: "100%"; height: 0; overflow: hidden; visibility: hidden; } .done { display: grid; place-items: center; color: var(--success); } .track { height: 7px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); } .fill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); transition: background-color var(--duration-standard) var(--ease-standard); } .progress[data-complete] .fill { background: var(--success); transition-delay: 200ms; } @media (prefers-reduced-motion: reduce) { .fill, .progress[data-complete] .fill { transition: none; } }

package/components/radio-cards/radio-cards.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface RadioCardOption {
+    value: string;
+    label: ReactNode;
+    /** One or two short lines under the label. */
+    description?: ReactNode;
+    /** A price, estimate, or other value. Sits at the end of a list row, or under the text in a grid card. */
+    meta?: ReactNode;
+    /** Plain decorative icon beside the label. */
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Short reason shown in place of the description when the option is disabled. */
+    disabledReason?: ReactNode;
+}
+/**
+ * Selectable option cards for choices that need more than a label: plans, shipping speeds, regions. One selection ring
+ * glides from card to card on a spring, so the eye follows the change. Behaves as a native radio group: one tab stop,
+ * arrow keys move and select, and a hidden input carries the value in forms.
+ */
+export interface RadioCardsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    options: RadioCardOption[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    /** "grid" places cards in responsive columns; "list" stacks full width rows. */
+    layout?: "grid" | "list";
+    /** Narrowest a grid column may get before the grid drops a column, in px. */
+    minColumnWidth?: number;
+    /** Form field name. Renders a hidden input with the selected value. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioCards: import("react").ForwardRefExoticComponent<RadioCardsProps & import("react").RefAttributes<HTMLDivElement>>;
+export default RadioCards;

package/components/radio-cards/radio-cards.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./radio-cards.module.css";
+const standard = [...motionTokens.ease.standard];
+const physical = (visualDuration, bounce) => {
+    const root = 2 * Math.PI / (visualDuration * 1.2);
+    return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, mass: 1 };
+};
+const GLIDE = physical(.42, .14);
+const subscribe = () => () => { };
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+export const RadioCards = forwardRef(function RadioCards({ options, value, defaultValue = null, onValueChange, layout = "grid", minColumnWidth = 180, name, required, disabled = false, className, style, ...rest }, forwardedRef) {
+    const reduced = useReducedFlag();
+    const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const rootRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const [internal, setInternal] = useState(defaultValue);
+    const selected = value !== undefined ? value : internal;
+    const selectedIndex = options.findIndex(option => option.value === selected);
+    const usable = (option) => !disabled && !option.disabled;
+    const tabStop = selectedIndex >= 0 && usable(options[selectedIndex]) ? selectedIndex : options.findIndex(usable);
+    const select = (next) => {
+        if (next === selected)
+            return;
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    };
+    /* The ring: one element that springs to the selected card's box. At rest it follows layout changes exactly. */
+    const x = useMotionValue(0), y = useMotionValue(0), w = useMotionValue(0), h = useMotionValue(0), o = useMotionValue(0);
+    const placed = useRef(false);
+    const place = useCallback((spring) => {
+        const node = selectedIndex < 0 ? null : rootRef.current?.querySelector(`[data-card="${selectedIndex}"]`);
+        if (!node) {
+            o.set(0);
+            placed.current = false;
+            return;
+        }
+        const box = [node.offsetLeft, node.offsetTop, node.offsetWidth, node.offsetHeight];
+        if (!spring || !placed.current || reduced) {
+            x.jump(box[0]);
+            y.jump(box[1]);
+            w.jump(box[2]);
+            h.jump(box[3]);
+            if (!placed.current && !reduced && spring) {
+                o.jump(0);
+                animate(o, 1, { duration: motionTokens.duration.fast, ease: standard });
+            }
+            else
+                o.jump(1);
+            placed.current = true;
+            return;
+        }
+        animate(x, box[0], GLIDE);
+        animate(y, box[1], GLIDE);
+        animate(w, box[2], GLIDE);
+        animate(h, box[3], GLIDE);
+        o.set(1);
+    }, [h, o, reduced, selectedIndex, w, x, y]);
+    const placeRef = useRef(place);
+    useLayoutEffect(() => { placeRef.current = place; place(true); }, [place]);
+    // A resize only snaps the ring to the new layout; it never replays the glide.
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => placeRef.current(false));
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, []);
+    const cards = () => Array.from(rootRef.current?.querySelectorAll("[data-card]") ?? []);
+    const onKeyDown = (event, index) => {
+        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+        if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            if (usable(options[index]))
+                select(options[index].value);
+            return;
+        }
+        if (!step && event.key !== "Home" && event.key !== "End")
+            return;
+        event.preventDefault();
+        const count = options.length;
+        const rtl = step && (event.key === "ArrowLeft" || event.key === "ArrowRight") && getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+        let at = event.key === "Home" ? -1 : event.key === "End" ? count : index;
+        const dir = event.key === "Home" ? 1 : event.key === "End" ? -1 : step * rtl;
+        for (let tries = 0; tries < count; tries++) {
+            at = (at + dir + count) % count;
+            if (usable(options[at])) {
+                cards()[at]?.focus();
+                select(options[at].value);
+                return;
+            }
+        }
+    };
+    return _jsxs("div", { ref: rootRef, role: "radiogroup", "aria-disabled": disabled || undefined, "aria-required": required || undefined, className: [styles.root, className].filter(Boolean).join(" "), "data-layout": layout, style: { "--min-column": `${minColumnWidth}px`, ...style }, ...rest, children: [_jsx(motion.span, { className: styles.ring, style: { x, y, width: w, height: h, opacity: o }, "aria-hidden": "true" }), options.map((option, index) => {
+                const checked = index === selectedIndex, off = !usable(option);
+                const labelId = `${uid}-${index}-label`, descriptionId = `${uid}-${index}-description`;
+                const description = off && option.disabledReason ? option.disabledReason : option.description;
+                return _jsxs("div", { role: "radio", "data-card": index, className: styles.card, "aria-checked": checked, "aria-disabled": off || undefined, "aria-labelledby": labelId, "aria-describedby": description ? descriptionId : undefined, tabIndex: index === tabStop ? 0 : -1, "data-checked": checked || undefined, onClick: () => { if (!off)
+                        select(option.value); }, onKeyDown: event => onKeyDown(event, index), children: [_jsx("span", { className: styles.indicator, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.indicatorDot, initial: false, animate: { scale: checked ? 1 : 0 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy }) }), _jsxs("span", { className: styles.body, children: [_jsxs("span", { id: labelId, className: styles.label, children: [option.icon && _jsx("span", { className: styles.icon, children: option.icon }), _jsx("span", { className: styles.labelText, children: option.label })] }), description && _jsx("span", { id: descriptionId, className: styles.description, children: description })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta })] }, option.value);
+            }), name && _jsx("input", { type: "hidden", name: name, value: selected ?? "", required: required })] });
+});
+export default RadioCards;

package/components/radio-cards/radio-cards.module.css

@@ -0,0 +1,84 @@
+.root {
+  position: relative;
+  display: grid;
+  gap: 10px;
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  letter-spacing: var(--tracking-body);
+  line-height: var(--leading-body);
+}
+.root *, .root *::before, .root *::after { box-sizing: border-box; }
+.root[data-layout="grid"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min-column, 180px)), 1fr)); }
+.root[data-layout="list"] { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+
+/* The one moving part: a ring that springs from card to card. It sits over the card border so the card itself never changes size. */
+.ring {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  border: 1.5px solid var(--control-on);
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  pointer-events: none;
+}
+
+.card {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  align-items: start;
+  gap: 4px 12px;
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-control); corner-shape: var(--corner-shape);
+  background: var(--surface);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
+}
+/* The body row takes any spare height, so prices sit on one baseline across a row even when a description wraps. */
+.root[data-layout="grid"] .card { grid-template-areas: "body indicator" "meta meta"; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto; }
+.root[data-layout="list"] .card { grid-template-areas: "indicator body meta"; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 13px 16px 13px 14px; }
+.card[data-checked] { background: color-mix(in oklab, var(--control-on) 4%, var(--surface)); }
+.card[aria-disabled="true"] { background: var(--surface-muted); cursor: not-allowed; }
+.card[aria-disabled="true"] :is(.label, .meta) { color: var(--text-muted); }
+
+.indicator {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex: none;
+  place-items: center;
+  grid-area: indicator;
+  border: 1.5px solid var(--border-strong);
+  border-radius: 50%; corner-shape: round;
+  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
+}
+.root[data-layout="grid"] .indicator { margin-top: 1px; }
+.card[data-checked] .indicator { border-color: var(--control-on); background: var(--control-on); }
+.indicatorDot { width: 6px; height: 6px; border-radius: 50%; corner-shape: round; background: var(--control-glyph); }
+.card[aria-disabled="true"] .indicator { border-color: var(--border); }
+
+.body { display: grid; min-width: 0; gap: 2px; grid-area: body; }
+.label { display: flex; min-width: 0; align-items: center; gap: 8px; font-weight: 500; }
+.labelText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.icon { display: grid; width: 18px; height: 18px; flex: none; place-items: center; color: var(--text-secondary); }
+.icon > svg { width: 18px; height: 18px; }
+.card[data-checked] .icon { color: var(--foreground); }
+.description { color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); text-wrap: pretty; }
+
+.meta { grid-area: meta; color: var(--foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.root[data-layout="grid"] .meta { margin-top: 10px; font-size: var(--text-lg); }
+.root[data-layout="list"] .meta { font-weight: 500; }
+
+@media (hover: hover) and (pointer: fine) {
+  .card:not([data-checked]):not([aria-disabled="true"]):hover { border-color: var(--border-strong); }
+}
+.card:not([data-checked]):not([aria-disabled="true"]):active { background: var(--surface-muted); }
+.card:focus-visible:not([data-checked]) { border-color: var(--border-strong); background: var(--surface-muted); }
+
+@media (prefers-reduced-motion: reduce) {
+  .card, .indicator { transition: none; }
+}

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

@@ -0,0 +1,13 @@
+export interface RadioGroupProps {
+    label: string;
+    options: {
+        value: string;
+        label: string;
+        description?: string;
+    }[];
+    value: string;
+    onValueChange: (value: string) => void;
+    name?: string;
+}
+/** One highlight travels to the chosen row while the new dot springs in and the old one shrinks away, so a change reads as a single physical move. Arrow keys take the same path. Rows and text never resize. */
+export declare function RadioGroup({ label, options, value, onValueChange, name }: RadioGroupProps): import("react").JSX.Element;

package/components/radio-group/radio-group.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef } from "react";
+import { animate, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./radio-group.module.css";
+/** Sizes the highlight to the chosen row. A new choice glides on the morph spring; the first paint and resizes place it at once. */
+function place(highlight, row, at, glide) {
+    const next = row ? `${row.offsetTop} ${row.offsetHeight}` : "";
+    if (!highlight || next === at.current)
+        return;
+    const visible = at.current !== "";
+    at.current = next;
+    if (!row) {
+        animate(highlight, { opacity: 0 }, { duration: 0 });
+        return;
+    }
+    const target = { y: row.offsetTop, height: row.offsetHeight, opacity: 1 };
+    if (glide && visible) {
+        animate(highlight, target, { ...motionTokens.spring.morph, opacity: { duration: 0 } });
+        return;
+    }
+    // Written to the element too, so the paint that drops the server fallback already shows the highlight in place.
+    Object.assign(highlight.style, { transform: `translateY(${target.y}px)`, height: `${target.height}px`, opacity: "1" });
+    animate(highlight, target, { duration: 0 });
+}
+/** One highlight travels to the chosen row while the new dot springs in and the old one shrinks away, so a change reads as a single physical move. Arrow keys take the same path. Rows and text never resize. */
+export function RadioGroup({ label, options, value, onValueChange, name }) {
+    const id = useId();
+    const reduced = useReducedMotion();
+    const listRef = useRef(null);
+    const highlightRef = useRef(null);
+    const rows = useRef([]);
+    const shown = useRef(null);
+    const at = useRef("");
+    const selected = options.findIndex(option => option.value === value);
+    useLayoutEffect(() => {
+        place(highlightRef.current, rows.current[selected], at, shown.current !== null && shown.current !== selected && !reduced);
+        shown.current = selected;
+        listRef.current?.setAttribute("data-ready", "");
+    }, [selected, reduced]);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => place(highlightRef.current, rows.current[shown.current ?? -1], at, false));
+        observer.observe(list);
+        rows.current.forEach(row => row && observer.observe(row));
+        return () => observer.disconnect();
+    }, [options.length]);
+    return _jsxs("fieldset", { className: styles.group, children: [_jsx("legend", { children: label }), _jsxs("div", { ref: listRef, className: styles.options, children: [_jsx("span", { ref: highlightRef, className: styles.highlight, "aria-hidden": "true" }), options.map((option, index) => {
+                        const checked = value === option.value;
+                        return _jsxs("label", { className: styles.option, ref: node => { rows.current[index] = node; }, children: [_jsx("input", { type: "radio", name: name ?? id, value: option.value, checked: checked, onChange: () => onValueChange(option.value) }), _jsx("span", { className: styles.mark, "aria-hidden": "true", children: _jsx(motion.span, { className: styles.dot, initial: false, animate: checked ? { scale: 1, opacity: 1 } : { scale: .4, opacity: 0 }, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.snappy, opacity: { duration: checked ? motionTokens.duration.fast : motionTokens.duration.instant } } }) }), _jsxs("span", { children: [_jsx("strong", { children: option.label }), option.description && _jsx("small", { children: option.description })] })] }, option.value);
+                    })] })] });
+}

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

@@ -0,0 +1,30 @@
+.group { display: grid; min-width: 0; margin: 0; border: 0; padding: 0; }
+.group legend { margin-bottom: var(--space-related); padding: 0; font-size: var(--text-sm); font-weight: 500; }
+/* One highlight travels between the rows: above their borders and fills, below their text, so it never crosses a label. */
+.options { position: relative; display: grid; gap: var(--space-related); }
+.highlight { position: absolute; top: 0; right: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid var(--control-on); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--control-on) 5%, transparent); opacity: 0; pointer-events: none; }
+/* Rows answer a press with color only; the mark is what moves. */
+/* The mark sits centered on the left edge of the row, whether or not the option has a description. */
+.option { position: relative; display: flex; align-items: center; gap: var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-group); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .option:hover { background: var(--surface-muted); } }
+.option:active { background: var(--surface-muted); }
+/* Until the highlight is placed (server paint or no script), the checked row carries the same look itself. */
+.options:not([data-ready]) .option:has(input:checked) { border-color: var(--control-on); background: color-mix(in oklab, var(--control-on) 5%, transparent); }
+.option input { position: absolute; opacity: 0; }
+/* Rows are not stacking contexts, so their mark and copy rise above the highlight while their border and fill stay below it. */
+.option > span { position: relative; z-index: 2; }
+.mark { display: grid; width: 17px; height: 17px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; corner-shape: round; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+/* 7px keeps the dot on whole pixels inside the 15px interior of the mark. */
+.mark::after, .dot { grid-area: 1 / 1; width: 7px; height: 7px; border-radius: 50%; corner-shape: round; background: var(--foreground); }
+/* A faint dot previews the choice while the pointer is down, then the real dot springs in on release. */
+.mark::after { content: ""; opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); }
+.option:active:not(:has(input:checked)) .mark::after { opacity: .22; }
+/* The mark alone answers a press: a quick dip, then a spring back. */
+.option:active .mark { transform: scale(.88); transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); }
+.option:has(input:checked) .mark { border-color: var(--control-on); background: var(--control-on); }
+.option:has(input:checked) .dot { background: var(--control-glyph); }
+.option strong, .option small { display: block; }
+.option strong { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; transition: color var(--duration-standard) var(--ease-standard); }
+.option:has(input:checked) strong { color: var(--foreground); }
+.option small { margin-top: 2px; color: var(--text-muted); font-size: var(--text-xs); }
+@media (prefers-reduced-motion: reduce) { .option, .mark, .mark::after, .option strong { transition: none; } .option:active .mark { transform: none; } }

package/components/resizable-panels/resizable-panels.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+/** One pane of a `ResizablePanels` group. It only carries configuration; the group renders it. */
+export interface ResizablePanelProps {
+    /** Stable id, also used by the dividers' `aria-controls`. */
+    id: string;
+    /** Names the pane for its divider, for example "Folders". */
+    label: string;
+    /** Starting share of the group. Shares are relative, so they need not add up to 100. */
+    defaultSize: number;
+    /** Width in px where the pane starts to resist. Its content never reflows below it; it clips and fades instead. */
+    minSize?: number;
+    maxSize?: number;
+    /** Dragging well past the minimum, or flicking toward the edge, snaps the pane closed. Its divider then shows a restore tab. */
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * A horizontal split view whose panes people resize by dragging the dividers between them, the way a mail or code editor window works.
+ * Use it when people need to trade space between side-by-side content for the task at hand. Dividers follow the pointer 1:1, resist past
+ * a pane's limits, and snap collapsible panes closed. Each divider is a focusable separator: arrows resize, Home and End jump to the limits,
+ * Enter hides or restores a collapsible pane, and a double-click resets the layout. The group needs a definite height.
+ */
+export interface ResizablePanelsProps {
+    /** Names the group for assistive technology. */
+    label?: string;
+    /** `ResizablePanel` elements, in order. The set of panes should stay the same for the life of the group. */
+    children: ReactNode;
+    /** Called with each pane's share in percent after a resize settles. */
+    onLayoutChange?: (sizes: number[]) => void;
+    className?: string;
+}
+/** Carries a pane's configuration into `ResizablePanels`. Rendered on its own it shows its children unchanged. */
+export declare function ResizablePanel({ children }: ResizablePanelProps): import("react").JSX.Element;
+export declare function ResizablePanels({ label, children, onLayoutChange, className }: ResizablePanelsProps): import("react").JSX.Element;
+export default ResizablePanels;