@vamos-ui/react 0.0.0-stage → 0.3.0

package/dist/components/status-picker.js

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { Check, ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useFieldControl } from "../lib/field-context.js";
+import { useLabels } from "../lib/labels.js";
+import { Layer } from "../lib/layer.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { useControllableState, useLatest } from "../lib/use-controllable-state.js";
+import { controlVariants, itemSlots, itemVariants } from "../lib/variants.js";
+import { badgeVariants } from "./badge.js";
+import { Spinner } from "./spinner.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogBody } from "./alert-dialog.js";
+import { Textarea } from "./input.js";
+const statusPickerLabels = {
+    change: "{label}: {status}. Change",
+    status: "Status",
+    notAllowed: "Not allowed from {status}",
+    note: "Note",
+    notePlaceholder: "Add a short reason the requester will see",
+    saving: "Saving…",
+    saved: "Status changed to {status}",
+    failed: "Couldn't change the status. It's back to {status}.",
+    placeholder: "Set status",
+    todo: "To do",
+    active: "In progress",
+    done: "Done",
+    cancelled: "Cancelled",
+    confirm: "Confirm",
+};
+const CATEGORY_TONE = { todo: "neutral", active: "info", done: "success", cancelled: "neutral" };
+const CATEGORY_ORDER = ["todo", "active", "done", "cancelled"];
+/** Default category icons — shape, not only colour, carries the meaning. */
+export function StatusIcon({ category, className }) {
+    const cls = cn("size-3.5 shrink-0", className);
+    switch (category) {
+        case "todo":
+            return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, focusable: "false", className: cls, "data-category": "todo", children: _jsx("circle", { cx: "8", cy: "8", r: "5.75", stroke: "currentColor", strokeWidth: "1.6", strokeDasharray: "2.6 2.1" }) }));
+        case "active":
+            return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, focusable: "false", className: cls, "data-category": "active", children: [_jsx("circle", { cx: "8", cy: "8", r: "5.75", stroke: "currentColor", strokeWidth: "1.6" }), _jsx("path", { d: "M8 4.25a3.75 3.75 0 0 1 0 7.5z", fill: "currentColor" })] }));
+        case "done":
+            return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, focusable: "false", className: cls, "data-category": "done", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5", fill: "currentColor" }), _jsx("path", { d: "M5.2 8.2 7.1 10l3.7-4", stroke: "var(--surface-solid, #fff)", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+        default:
+            return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, focusable: "false", className: cls, "data-category": "cancelled", children: [_jsx("circle", { cx: "8", cy: "8", r: "5.75", stroke: "currentColor", strokeWidth: "1.6" }), _jsx("path", { d: "m5.6 10.4 4.8-4.8", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })] }));
+    }
+}
+/** Badge tone of a status. Passed into the single `badgeVariants` call so the neutral default never overrides it. */
+function toneStyle(s) {
+    if (!s)
+        return { tone: "outline" };
+    if (s.color)
+        return { tone: "custom", style: { ["--tone"]: s.color } };
+    return { tone: s.tone ?? CATEGORY_TONE[s.category] };
+}
+const TONE_COLOR = {
+    neutral: "var(--fg-muted)",
+    accent: "var(--accent-ink)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    danger: "var(--danger)",
+    info: "var(--info)",
+};
+/** The ink colour of a status (icon in field triggers and menus). */
+function toneColor(s) {
+    return s.color ?? TONE_COLOR[s.tone ?? CATEGORY_TONE[s.category]];
+}
+/** A status rendered as a badge (no picker) — table cells, read-only views, activity entries. */
+export function StatusBadge({ status, size = "md", className }) {
+    const tone = toneStyle(status);
+    return (_jsxs("span", { "data-slot": "status-badge", "data-category": status.category, className: cn(badgeVariants({ size: size === "sm" ? "sm" : "md", tone: tone.tone }), "gap-1.5", status.category === "cancelled" && "text-fg-muted", className), style: tone.style, children: [status.icon ?? _jsx(StatusIcon, { category: status.category }), status.label] }));
+}
+/**
+ * Change a record's status inside a workflow: task To do → In progress → Done, deal stages,
+ * content Draft → Review → Published, leave Pending → Approved / Rejected. The trigger is the
+ * status badge itself; transitions not allowed from the current status stay visible with the
+ * reason; a transition can ask for confirmation (and a note); async saves are optimistic and revert.
+ *
+ * ```tsx
+ * <StatusPicker statuses={taskStatuses} value={task.status} onValueChange={(v) => save({ status: v })} />
+ * <StatusPicker statuses={leave} transitions={{ pending: ["approved", "rejected"] }}
+ *   confirm={(s) => s.value === "rejected" && { title: "Reject request?", requireNote: true, tone: "danger" }} />
+ * ```
+ */
+export const StatusPicker = React.forwardRef(function StatusPicker({ statuses, value: valueProp, defaultValue, onValueChange, transitions, confirm, onError, trigger = "badge", groupByCategory, name, size = "md", disabled: disabledProp, readOnly: readOnlyProp, loading, fieldLabel, labels, className, ...rest }, ref) {
+    const t = useLabels("statusPicker", statusPickerLabels, labels);
+    const control = useFieldControl({
+        id: rest.id,
+        name,
+        disabled: disabledProp,
+        readOnly: readOnlyProp,
+        "aria-describedby": rest["aria-describedby"],
+        "aria-labelledby": rest["aria-labelledby"],
+        "aria-invalid": rest["aria-invalid"],
+    });
+    const container = usePortalContainer();
+    const [committed, setCommitted] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? null, name: "StatusPicker" });
+    const [optimistic, setOptimistic] = React.useState(null);
+    const [saving, setSaving] = React.useState(false);
+    const [announce, setAnnounce] = React.useState("");
+    const [pendingConfirm, setPendingConfirm] = React.useState(null);
+    const [note, setNote] = React.useState("");
+    const onChangeRef = useLatest(onValueChange);
+    const noteId = React.useId();
+    const shown = optimistic ?? committed;
+    const byValue = React.useMemo(() => new Map(statuses.map((s) => [s.value, s])), [statuses]);
+    const current = shown ? byValue.get(shown) : undefined;
+    const committedDef = committed ? byValue.get(committed) : undefined;
+    const allowed = committed && transitions ? new Set([committed, ...(transitions[committed] ?? [])]) : null;
+    const disabled = Boolean(control.disabled);
+    const readOnly = Boolean(control.readOnly);
+    const busy = saving || Boolean(loading);
+    const grouped = groupByCategory ?? statuses.length > 5;
+    const commit = async (next, meta) => {
+        const prev = committed;
+        const result = onChangeRef.current?.(next.value, prev, meta);
+        if (result && typeof result.then === "function") {
+            setOptimistic(next.value);
+            setSaving(true);
+            try {
+                await result;
+                setCommitted(next.value);
+                setAnnounce(t("saved", { status: next.label }));
+            }
+            catch (err) {
+                setAnnounce(t("failed", { status: committedDef?.label ?? t("placeholder") }));
+                onError?.(err, next);
+            }
+            finally {
+                setOptimistic(null);
+                setSaving(false);
+            }
+        }
+        else {
+            setCommitted(next.value);
+            setAnnounce(t("saved", { status: next.label }));
+        }
+    };
+    const handleChange = (v) => {
+        const next = byValue.get(v);
+        if (!next || v === committed)
+            return;
+        const config = confirm?.(next, committedDef ?? null);
+        if (config) {
+            setNote("");
+            setPendingConfirm({ next, config });
+            return;
+        }
+        void commit(next, {});
+    };
+    const label = fieldLabel ?? t("status");
+    const accessibleName = rest["aria-label"] ?? (control["aria-labelledby"] ? undefined : t("change", { label, status: current?.label ?? t("placeholder") }));
+    const tone = toneStyle(current);
+    const triggerClass = trigger === "field"
+        ? cn(controlVariants({ size: size === "sm" ? "sm" : "md" }), "justify-start text-start", className)
+        : cn(badgeVariants({ size: size === "sm" ? "sm" : "md", tone: tone.tone }), "gap-1.5 pe-1.5 outline-none transition-[filter,box-shadow] focus-ring", !readOnly && !disabled && "cursor-pointer hover:brightness-95", current?.category === "cancelled" && "text-fg-muted", disabled && "opacity-50", className);
+    const triggerInner = (_jsxs(_Fragment, { children: [busy ? (_jsx(Spinner, { size: "xs", className: trigger === "field" ? "text-fg-muted" : undefined })) : current ? (_jsx("span", { className: "inline-flex", style: trigger === "field" ? { color: toneColor(current) } : undefined, children: current.icon ?? _jsx(StatusIcon, { category: current.category }) })) : null, _jsx("span", { className: cn("truncate", trigger === "field" && "flex-1", !current && "text-fg-subtle"), children: current?.label ?? t("placeholder") }), busy ? _jsx("span", { className: "sr-only", children: t("saving") }) : null, !readOnly ? _jsx(ChevronDown, { "aria-hidden": true, className: cn("shrink-0 opacity-60", trigger === "field" ? "ms-auto size-4" : "size-3") }) : null] }));
+    if (readOnly) {
+        return current ? (_jsx(StatusBadge, { status: current, size: size, className: className })) : (_jsx("span", { className: cn(badgeVariants({ tone: "outline", size: size === "sm" ? "sm" : "md" }), className), children: t("placeholder") }));
+    }
+    const groups = grouped
+        ? CATEGORY_ORDER.map((c) => ({ category: c, items: statuses.filter((s) => s.category === c) })).filter((g) => g.items.length)
+        : [{ category: null, items: statuses }];
+    const renderItem = (s) => {
+        const notAllowed = allowed ? !allowed.has(s.value) : false;
+        const reasonId = `${noteId}-${s.value}`;
+        return (_jsxs(SelectPrimitive.Item, { value: s.value, disabled: notAllowed, "aria-describedby": notAllowed ? reasonId : undefined, className: cn(itemVariants({ size: "md", inset: true }), "items-start py-2"), children: [_jsx("span", { className: cn(itemSlots.indicator, "top-2.5"), children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-3.5", strokeWidth: 2.5 }) }) }), _jsx("span", { "aria-hidden": true, className: "mt-0.5 inline-flex [&_svg]:size-4", style: { color: toneColor(s) }, children: s.icon ?? _jsx(StatusIcon, { category: s.category, className: "size-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SelectPrimitive.ItemText, { children: s.label }), notAllowed ? (_jsx("span", { id: reasonId, className: itemSlots.description, children: t("notAllowed", { status: committedDef?.label ?? "" }) })) : s.description ? (_jsx("span", { className: itemSlots.description, children: s.description })) : null] })] }, s.value));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(SelectPrimitive.Root, { value: shown ?? "", onValueChange: handleChange, disabled: disabled || busy, name: control.name, children: [_jsx(SelectPrimitive.Trigger, { ref: ref, id: control.id, "data-slot": "status-picker", "data-trigger": trigger, "data-category": current?.category, "aria-label": accessibleName, "aria-labelledby": control["aria-labelledby"], "aria-describedby": control["aria-describedby"], "aria-invalid": control["aria-invalid"], "aria-busy": busy || undefined, className: triggerClass, style: trigger === "badge" ? tone.style : undefined, children: triggerInner }), _jsx(SelectPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 6, collisionPadding: 12, align: "start", "data-slot": "status-picker-content", className: "surface-popover ui-pop z-(--z-popover) max-h-(--radix-select-content-available-height) min-w-56 overflow-hidden rounded-ui-lg", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: groups.map((g, i) => g.category ? (_jsxs(SelectPrimitive.Group, { children: [i > 0 ? _jsx(SelectPrimitive.Separator, { className: itemSlots.separator }) : null, _jsx(SelectPrimitive.Label, { className: itemSlots.groupLabel, children: t(g.category) }), g.items.map(renderItem)] }, g.category)) : (_jsx(React.Fragment, { children: g.items.map(renderItem) }, "all"))) }) }) }) })] }), _jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announce }), _jsx(AlertDialog, { open: pendingConfirm !== null, onOpenChange: (o) => !o && setPendingConfirm(null), children: pendingConfirm ? (_jsxs(AlertDialogContent, { tone: pendingConfirm.config.tone ?? "default", children: [_jsx(AlertDialogHeader, { title: pendingConfirm.config.title, description: pendingConfirm.config.description }), pendingConfirm.config.requireNote ? (_jsxs(AlertDialogBody, { className: "grid gap-1.5", children: [_jsx("label", { htmlFor: `${noteId}-note`, className: "text-[13px] font-medium text-fg", children: pendingConfirm.config.noteLabel ?? t("note") }), _jsx(Textarea, { id: `${noteId}-note`, rows: 3, value: note, onChange: (e) => setNote(e.target.value), placeholder: t("notePlaceholder"), required: true, "aria-required": true })] })) : null, _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, {}), _jsx(AlertDialogAction, { disabled: Boolean(pendingConfirm.config.requireNote) && note.trim() === "", onClick: () => {
+                                        const p = pendingConfirm;
+                                        setPendingConfirm(null);
+                                        void commit(p.next, { note: p.config.requireNote ? note.trim() : undefined });
+                                    }, children: pendingConfirm.config.confirmLabel ?? t("confirm") })] })] })) : null })] }));
+});

package/dist/components/stepper.d.ts

@@ -0,0 +1,86 @@
+import * as React from "react";
+declare const stepperLabels: {
+    label: string;
+    step: string;
+    optional: string;
+    complete: string;
+    current: string;
+    error: string;
+    skipped: string;
+};
+type StepperLabels = Partial<typeof stepperLabels>;
+export type StepStatus = "upcoming" | "current" | "complete" | "error" | "skipped";
+export interface StepItem {
+    /** Stable key. Defaults to the index. */
+    id?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Overrides the status derived from `value` (e.g. `"error"` from validation, `"skipped"`). */
+    status?: StepStatus;
+    /** Shows an "Optional" note under the title. */
+    optional?: boolean;
+    /** Replaces the number in the indicator (upcoming / current steps). */
+    icon?: React.ReactNode;
+    /** Never clickable. */
+    disabled?: boolean;
+    /** Vertical only: content shown under the current step. */
+    content?: React.ReactNode;
+}
+export interface StepProps extends Omit<StepItem, "content"> {
+    /** Vertical only: content shown under this step while it is current. */
+    children?: React.ReactNode;
+}
+/**
+ * One step, for the compound API: `<Stepper value={1}><Step title="Upload" /><Step title="Map columns" /></Stepper>`.
+ * It only describes the step; `Stepper` renders it.
+ */
+export declare function Step(_props: StepProps): React.ReactElement | null;
+type Variant = "numbered" | "dots" | "bar" | "compact";
+type Size = "sm" | "md";
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Current step, 0-based. */
+    value: number;
+    /** Makes navigable steps clickable. Moving between steps doesn't move focus; focus your step heading. */
+    onValueChange?: (index: number) => void;
+    /** Which steps may be clicked: `"completed"` (default, steps before the current one) · `"all"` · a predicate. */
+    navigable?: "completed" | "all" | ((index: number) => boolean);
+    orientation?: "horizontal" | "vertical";
+    /** `numbered` (default) · `dots` · `bar` (segments) · `compact` ("Step 2 of 4 · Map columns" + thin bar). */
+    variant?: Variant;
+    size?: Size;
+    /** Data-driven steps. Or pass `<Step>` children. */
+    steps?: StepItem[];
+    /** Spinner in the current step's indicator (e.g. while validating). */
+    loading?: boolean;
+    /** Horizontal steppers switch to `compact` below 640px. Default `true`. */
+    responsive?: boolean;
+    labels?: StepperLabels;
+    children?: React.ReactNode;
+}
+export interface StepIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    status: StepStatus;
+    /** 1-based number shown for upcoming / current steps. */
+    number?: number;
+    icon?: React.ReactNode;
+    loading?: boolean;
+    size?: Size;
+}
+/** The circle: number, check, warning or spinner. Decorative (`aria-hidden`) — status is in the step's text. */
+export declare function StepIndicator({ status, number, icon, loading, size, className, ...props }: StepIndicatorProps): React.JSX.Element;
+/**
+ * Shows position and status in an ordered process (wizards, import flows, approvals, checkout).
+ * Display and navigation only — form state belongs to the consumer.
+ *
+ * ```tsx
+ * <Stepper value={1} steps={[{ title: "Upload" }, { title: "Map columns" }, { title: "Review" }, { title: "Import" }]} />
+ * <Stepper value={step} onValueChange={setStep} orientation="vertical">
+ *   <Step title="Company details">…form…</Step>
+ *   <Step title="Billing" optional />
+ * </Stepper>
+ * ```
+ *
+ * An ordered list; the current step has `aria-current="step"` and every step's name includes its
+ * position and status ("Step 2 of 4, Map columns, current").
+ */
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/stepper.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertTriangle, Check, Minus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { Spinner } from "./spinner.js";
+const stepperLabels = {
+    label: "Progress",
+    step: "Step {current} of {total}",
+    optional: "Optional",
+    complete: "Completed",
+    current: "Current",
+    error: "Needs attention",
+    skipped: "Skipped",
+};
+/**
+ * One step, for the compound API: `<Stepper value={1}><Step title="Upload" /><Step title="Map columns" /></Stepper>`.
+ * It only describes the step; `Stepper` renders it.
+ */
+export function Step(_props) {
+    return null;
+}
+const indicatorSize = { sm: "size-6 text-[11px] [&_svg]:size-3", md: "size-7 text-xs [&_svg]:size-3.5" };
+/** The circle: number, check, warning or spinner. Decorative (`aria-hidden`) — status is in the step's text. */
+export function StepIndicator({ status, number, icon, loading, size = "md", className, ...props }) {
+    return (_jsx("span", { "aria-hidden": true, "data-slot": "step-indicator", "data-status": status, className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full font-semibold tabular transition-[background-color,box-shadow,color] duration-200", indicatorSize[size], status === "complete" && "bg-accent text-accent-fg", status === "current" && "bg-surface text-fg shadow-[0_0_0_1.5px_var(--accent-ink),0_0_0_5px_var(--accent-soft)]", status === "upcoming" && "text-fg-subtle shadow-[inset_0_0_0_1.5px_var(--track)]", status === "error" && "tone-danger tone-soft shadow-[inset_0_0_0_1.5px_var(--danger)]", status === "skipped" && "border-[1.5px] border-dashed border-field-border text-fg-subtle", className), ...props, children: loading ? (_jsx(Spinner, { size: "xs" })) : status === "complete" ? (_jsx(Check, { strokeWidth: 3 })) : status === "error" ? (_jsx(AlertTriangle, { strokeWidth: 2.5 })) : status === "skipped" ? (_jsx(Minus, { strokeWidth: 2.5 })) : ((icon ?? number)) }));
+}
+/**
+ * Shows position and status in an ordered process (wizards, import flows, approvals, checkout).
+ * Display and navigation only — form state belongs to the consumer.
+ *
+ * ```tsx
+ * <Stepper value={1} steps={[{ title: "Upload" }, { title: "Map columns" }, { title: "Review" }, { title: "Import" }]} />
+ * <Stepper value={step} onValueChange={setStep} orientation="vertical">
+ *   <Step title="Company details">…form…</Step>
+ *   <Step title="Billing" optional />
+ * </Stepper>
+ * ```
+ *
+ * An ordered list; the current step has `aria-current="step"` and every step's name includes its
+ * position and status ("Step 2 of 4, Map columns, current").
+ */
+export const Stepper = React.forwardRef(function Stepper({ value, onValueChange, navigable = "completed", orientation = "horizontal", variant = "numbered", size = "md", steps: stepsProp, loading, responsive = true, labels, className, children, "aria-label": ariaLabel, ...props }, ref) {
+    const t = useLabels("stepper", stepperLabels, labels);
+    const raw = stepsProp ??
+        React.Children.toArray(children)
+            .filter((c) => React.isValidElement(c) && c.type === Step)
+            .map(({ props: { children: content, ...rest } }) => ({ ...rest, content }));
+    const total = raw.length;
+    const canNavigate = (i, status) => typeof navigable === "function" ? navigable(i) : navigable === "all" ? true : i < value || status === "complete";
+    const steps = raw.map((s, i) => {
+        const status = s.status ?? (i < value ? "complete" : i === value ? "current" : "upcoming");
+        return { ...s, index: i, status, key: s.id ?? String(i), clickable: Boolean(onValueChange) && !s.disabled && i !== value && canNavigate(i, status) };
+    });
+    const statusWord = (s) => (s === "upcoming" ? "" : t(s === "complete" ? "complete" : s));
+    const name = (s) => ({
+        before: `${t("step", { current: s.index + 1, total })}, `,
+        after: statusWord(s.status) ? `, ${statusWord(s.status)}` : "",
+    });
+    const effective = orientation === "vertical" && variant === "bar" ? "numbered" : variant;
+    const showCompactOnMobile = responsive && orientation === "horizontal" && effective !== "compact";
+    const current = steps[Math.min(Math.max(value, 0), Math.max(total - 1, 0))];
+    const compact = current ? (_jsxs("div", { "data-slot": "stepper-compact", className: cn("flex flex-col gap-2", showCompactOnMobile && "sm:hidden"), children: [_jsxs("p", { className: "flex min-w-0 items-baseline gap-1.5 text-[13px]", children: [_jsx("span", { className: "tabular shrink-0 text-fg-muted", children: t("step", { current: current.index + 1, total }) }), _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: "\u00B7" }), _jsx("span", { className: "truncate font-medium text-fg", children: current.title }), current.status === "error" ? _jsx("span", { className: "shrink-0 text-danger", children: t("error") }) : null] }), _jsx("span", { "aria-hidden": true, className: "block h-1 overflow-hidden rounded-full bg-track", children: _jsx("span", { className: "block h-full rounded-full bg-accent transition-[width] duration-300 motion-reduce:transition-none", style: { width: `${((current.index + 1) / total) * 100}%` } }) })] })) : null;
+    const renderTrigger = (s, inner, extra) => {
+        const n = name(s);
+        const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: n.before }), inner, n.after ? _jsx("span", { className: "sr-only", children: n.after }) : null] }));
+        return s.clickable ? (_jsx("button", { type: "button", "data-slot": "step-trigger", onClick: () => onValueChange?.(s.index), className: cn("group/step -m-1 flex min-w-0 items-start gap-3 rounded-ui-sm p-1 text-start outline-none focus-ring", extra), children: body })) : (_jsx("div", { "data-slot": "step-trigger", className: cn("flex min-w-0 items-start gap-3", extra), children: body }));
+    };
+    const text = (s, opts = {}) => (_jsxs("span", { className: cn("flex min-w-0 flex-col", size === "sm" ? "gap-0 pt-0.5" : "gap-0.5 pt-1", opts.hideTitle && "sr-only"), children: [_jsx("span", { "data-slot": "step-title", className: cn("font-medium leading-tight", size === "sm" ? "text-[13px]" : "text-sm", s.status === "upcoming" || s.status === "skipped" ? "text-fg-muted" : "text-fg", s.status === "error" && "text-danger", s.clickable && "group-hover/step:underline group-hover/step:decoration-line group-hover/step:underline-offset-4"), children: s.title }), s.optional ? _jsx("span", { className: "text-xs text-fg-subtle", children: t("optional") }) : null, s.description ? _jsx("span", { className: cn("text-fg-subtle", size === "sm" ? "text-xs" : "text-[13px]"), children: s.description }) : null] }));
+    const listLabel = ariaLabel ?? t("label");
+    const passed = (s) => s.index < value && s.status !== "error";
+    const connectorTop = size === "sm" ? "mt-3" : "mt-3.5";
+    let list = null;
+    if (effective === "numbered" && orientation === "horizontal") {
+        list = (_jsx("ol", { "aria-label": listLabel, className: cn("flex items-start gap-3", showCompactOnMobile && "max-sm:hidden"), children: steps.map((s, i) => (_jsxs("li", { "data-status": s.status, "aria-current": s.status === "current" || i === value ? "step" : undefined, className: "flex min-w-0 flex-auto items-start gap-3 last:flex-none", children: [renderTrigger(s, _jsxs(_Fragment, { children: [_jsx(StepIndicator, { status: s.status, number: i + 1, icon: s.icon, loading: loading && i === value, size: size }), text(s)] }), "min-w-min"), i < total - 1 ? (_jsx("span", { "aria-hidden": true, className: cn("h-px min-w-6 flex-1 transition-colors duration-300", connectorTop, passed(s) ? "bg-accent-ink" : "bg-line") })) : null] }, s.key))) }));
+    }
+    else if (effective === "numbered" || (effective === "dots" && orientation === "vertical")) {
+        const dots = effective === "dots";
+        list = (_jsx("ol", { "aria-label": listLabel, className: "flex flex-col", children: steps.map((s, i) => (_jsxs("li", { "data-status": s.status, "aria-current": i === value ? "step" : undefined, className: "grid grid-cols-[auto_minmax(0,1fr)] gap-x-3", children: [_jsxs("span", { className: "flex flex-col items-center", children: [dots ? (_jsx("span", { "aria-hidden": true, className: cn("mt-1.5 size-2.5 shrink-0 rounded-full", dotClass(s.status)) })) : (_jsx(StepIndicator, { status: s.status, number: i + 1, icon: s.icon, loading: loading && i === value, size: size, onClick: s.clickable ? () => onValueChange?.(s.index) : undefined, className: s.clickable ? "cursor-pointer" : undefined })), i < total - 1 ? _jsx("span", { "aria-hidden": true, className: cn("my-1.5 w-px min-h-5 flex-1 transition-colors duration-300", passed(s) ? "bg-accent-ink" : "bg-line") }) : null] }), _jsxs("div", { className: cn("min-w-0", i < total - 1 && (size === "sm" ? "pb-4" : "pb-6")), children: [renderTrigger(s, text(s), dots ? "-mt-0.5" : undefined), i === value && s.content ? (_jsx("div", { "data-slot": "step-content", className: cn("pt-3", size === "sm" ? "text-[13px]" : "text-sm"), children: s.content })) : null] })] }, s.key))) }));
+    }
+    else if (effective === "dots") {
+        list = (_jsx("ol", { "aria-label": listLabel, className: cn("flex items-center gap-2", showCompactOnMobile && "max-sm:hidden"), children: steps.map((s, i) => (_jsxs("li", { "data-status": s.status, "aria-current": i === value ? "step" : undefined, className: "flex flex-1 items-center gap-2 last:flex-none", children: [renderTrigger(s, _jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, title: typeof s.title === "string" ? s.title : undefined, className: cn("block h-2.5 rounded-full transition-[width,background-color] duration-300 motion-reduce:transition-none", i === value ? "w-6" : "w-2.5", dotClass(s.status)) }), text(s, { hideTitle: true })] }), "items-center p-1.5 -m-1.5"), i < total - 1 ? _jsx("span", { "aria-hidden": true, className: cn("h-px min-w-3 flex-1", passed(s) ? "bg-accent-ink" : "bg-line") }) : null] }, s.key))) }));
+    }
+    else if (effective === "bar") {
+        list = (_jsx("ol", { "aria-label": listLabel, className: cn("grid gap-1.5", showCompactOnMobile && "max-sm:hidden"), style: { gridTemplateColumns: `repeat(${total}, minmax(0, 1fr))` }, children: steps.map((s, i) => (_jsx("li", { "data-status": s.status, "aria-current": i === value ? "step" : undefined, className: "min-w-0", children: renderTrigger(s, _jsxs("span", { className: "flex w-full min-w-0 flex-col gap-2", children: [_jsx("span", { "aria-hidden": true, className: cn("block h-1 rounded-full transition-colors duration-300", barClass(s.status)) }), text(s)] }), "w-full") }, s.key))) }));
+    }
+    return (_jsxs("div", { ref: ref, "data-slot": "stepper", "data-orientation": orientation, "data-variant": effective, className: cn("min-w-0", className), ...props, children: [effective === "compact" ? (_jsx("ol", { "aria-label": listLabel, className: "sr-only", children: steps.map((s, i) => (_jsxs("li", { "aria-current": i === value ? "step" : undefined, children: [name(s).before, s.title, name(s).after] }, s.key))) })) : (list), effective === "compact" || showCompactOnMobile ? _jsx("div", { "aria-hidden": effective === "compact" || undefined, children: compact }) : null] }));
+});
+function dotClass(status) {
+    return status === "complete" ? "bg-accent-ink" : status === "current" ? "bg-accent shadow-[0_0_0_1.5px_var(--accent-ink)]" : status === "error" ? "bg-danger" : "bg-track";
+}
+function barClass(status) {
+    return status === "complete"
+        ? "bg-accent-ink"
+        : status === "current"
+            ? "bg-accent"
+            : status === "error"
+                ? "bg-danger"
+                : status === "skipped"
+                    ? "bg-[repeating-linear-gradient(90deg,var(--track)_0_4px,transparent_4px_7px)]"
+                    : "bg-track";
+}

package/dist/components/switch.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+export declare const switchVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "checked" | "defaultChecked" | "onCheckedChange" | "children"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** Text beside the switch; clicking it toggles. */
+    label?: React.ReactNode;
+    /** Secondary line under the label. */
+    description?: React.ReactNode;
+    /** `"end"` (default): switch, then label. `"start"`: label first, switch at the far end (settings rows). */
+    labelPosition?: "start" | "end";
+    size?: "sm" | "md";
+    /** A save is in flight: spinner in the thumb, `aria-busy`, changes locked. */
+    loading?: boolean;
+    invalid?: boolean;
+    /** Focusable, but can't be flipped (`aria-readonly`). */
+    readOnly?: boolean;
+    /** Classes for the track when `label` is used (`className` goes on the row). */
+    controlClassName?: string;
+}
+/**
+ * Instant on/off setting: "Maintenance mode", "Accept online bookings", active/inactive in a table.
+ * Radix Switch (`role="switch"`), Field-aware, with an optimistic-save `loading` state.
+ *
+ * ```tsx
+ * <Switch label="Email digests" description="A summary every Monday at 9:00." defaultChecked />
+ * <Switch size="sm" checked={active} onCheckedChange={save} loading={saving} aria-label="Active" />
+ * ```
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/switch.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { mergeIds } from "../lib/compose-refs.js";
+import { useFieldControl } from "../lib/field-context.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Spinner } from "./spinner.js";
+export const switchVariants = cva([
+    "group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent p-[2px] outline-none",
+    "bg-track transition-[background-color,box-shadow] duration-200",
+    "data-[state=unchecked]:hover:bg-[color-mix(in_srgb,var(--track),var(--fg)_9%)]",
+    "data-[state=checked]:bg-accent data-[state=checked]:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--fg)_10%,transparent)]",
+    "focus-visible:shadow-[0_0_0_2px_var(--scene),0_0_0_4px_var(--ring)]",
+    "aria-invalid:shadow-[inset_0_0_0_1.5px_var(--danger)]",
+    "disabled:cursor-not-allowed disabled:opacity-45 aria-busy:cursor-progress",
+], {
+    variants: {
+        size: {
+            /** 28 × 16 — table rows, dense lists. */
+            sm: "h-4 w-7 [--switch-thumb-size:12px] [--switch-travel:12px]",
+            /** 36 × 20. */
+            md: "h-5 w-9 [--switch-thumb-size:16px] [--switch-travel:16px]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+/**
+ * Instant on/off setting: "Maintenance mode", "Accept online bookings", active/inactive in a table.
+ * Radix Switch (`role="switch"`), Field-aware, with an optimistic-save `loading` state.
+ *
+ * ```tsx
+ * <Switch label="Email digests" description="A summary every Monday at 9:00." defaultChecked />
+ * <Switch size="sm" checked={active} onCheckedChange={save} loading={saving} aria-label="Active" />
+ * ```
+ */
+export const Switch = React.forwardRef(function Switch(rawProps, ref) {
+    const { checked: checkedProp, defaultChecked, onCheckedChange, label, description, labelPosition = "end", size = "md", loading, invalid, className, controlClassName, style, ...rest } = rawProps;
+    const control = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
+    const { readOnly, required, ...controlProps } = control;
+    const [checked, setChecked] = useControllableState({
+        value: checkedProp,
+        defaultValue: defaultChecked ?? false,
+        onChange: onCheckedChange,
+        name: "Switch",
+    });
+    const autoId = React.useId();
+    const id = controlProps.id ?? (label ? `sw${autoId.replace(/:/g, "")}` : undefined);
+    const descId = description ? `${id ?? autoId}-desc` : undefined;
+    const labelId = label ? `${id ?? autoId}-label` : undefined;
+    const labelledBy = controlProps["aria-labelledby"] ?? (label && !controlProps["aria-label"] ? labelId : undefined);
+    const locked = readOnly || loading;
+    const track = (_jsx(SwitchPrimitive.Root, { ref: ref, "data-slot": "switch", "data-size": size, ...controlProps, id: id, required: required, "aria-required": required || undefined, "aria-readonly": readOnly || undefined, "aria-busy": loading || undefined, "aria-labelledby": labelledBy, "aria-describedby": mergeIds(controlProps["aria-describedby"], descId), checked: checked, onCheckedChange: (next) => {
+            if (locked)
+                return;
+            setChecked(next);
+        }, onKeyDown: (e) => {
+            if (locked && (e.key === " " || e.key === "Enter"))
+                e.preventDefault();
+            controlProps.onKeyDown?.(e);
+        }, className: cn(switchVariants({ size }), label ? controlClassName : cn(controlClassName, className)), style: label ? undefined : style, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none flex size-(--switch-thumb-size) items-center justify-center rounded-full bg-(--switch-thumb) text-fg-muted", "shadow-[0_1px_2px_rgb(0_0_0/0.18),0_0_0_0.5px_rgb(0_0_0/0.06)]", "transition-[transform,width,background-color] duration-200 ease-[cubic-bezier(0.3,1.3,0.5,1)]", "data-[state=checked]:translate-x-[calc(var(--switch-travel)*var(--dir))] data-[state=checked]:bg-accent-fg data-[state=checked]:text-accent", 
+            // a little stretch while pressed
+            "group-active/switch:w-[calc(var(--switch-thumb-size)+3px)] group-active/switch:data-[state=checked]:translate-x-[calc((var(--switch-travel)-3px)*var(--dir))]"), children: loading ? _jsx(Spinner, { size: size === "sm" ? 9 : 11 }) : null }) }));
+    if (!label)
+        return track;
+    const text = (_jsxs("label", { htmlFor: id, className: cn("grid min-w-0 select-none gap-0.5", controlProps.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"), children: [_jsx("span", { id: labelId, className: cn("text-fg", size === "sm" ? "text-[13px] leading-4" : "text-sm leading-5"), children: label }), description ? (_jsx("span", { id: descId, className: cn("text-pretty leading-[1.45] text-fg-subtle", size === "sm" ? "text-[11.5px]" : "text-xs"), children: description })) : null] }));
+    return (_jsxs("div", { "data-slot": "switch-row", "data-label-position": labelPosition, className: cn("flex items-start gap-3", labelPosition === "start" && "justify-between gap-6", className), style: style, children: [labelPosition === "start" ? text : null, _jsx("span", { className: cn("flex shrink-0 items-center", size === "sm" ? "h-4" : "h-5"), children: track }), labelPosition === "end" ? text : null] }));
+});

package/dist/components/table.d.ts

@@ -0,0 +1,101 @@
+import * as React from "react";
+type Align = "start" | "center" | "end";
+export interface TableContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the scroll region (required when the table can scroll). */
+    "aria-label"?: string;
+    /** Max height; the header stays visible with `<Table stickyHeader>`. E.g. `"24rem"`. */
+    maxHeight?: string;
+}
+/**
+ * Scroll wrapper for a Table: horizontal (and optional vertical) scrolling with soft edge fades
+ * that show there is more content. It is a focusable, named region so keyboard users can scroll.
+ */
+export declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    /** Row height + cell padding (`--row-h`, `--cell-px`). `"inherit"` follows the page `data-density`. Default `"inherit"`. */
+    density?: "inherit" | "compact" | "comfortable" | "spacious";
+    /** Zebra rows. */
+    striped?: boolean;
+    /** Row hover tint. Default `true`. */
+    hover?: boolean;
+    /** `"rows"` (default) hairlines between rows · `"grid"` every cell · `"none"`. */
+    bordered?: "rows" | "grid" | "none";
+    /** Keep the header visible while the TableContainer scrolls. Opaque (never blurred). */
+    stickyHeader?: boolean;
+    /** Pin the first column while scrolling sideways. */
+    stickyFirstColumn?: boolean;
+    /** `"fixed"` uses the column widths you set (`<TableHead style={{ width }}>`). Default `"auto"`. */
+    layout?: "auto" | "fixed";
+}
+/**
+ * Styled semantic table for small and static data: line items, settings lists, chart data.
+ * Server-component compatible. Give it a `<TableCaption>` or `aria-label`.
+ *
+ * ```tsx
+ * <TableContainer aria-label="Invoice lines">
+ *   <Table>
+ *     <TableCaption>Invoice INV-2041</TableCaption>
+ *     <TableHeader><TableRow><TableHead>Item</TableHead><TableHead numeric>Amount</TableHead></TableRow></TableHeader>
+ *     <TableBody><TableRow><TableCell>Design retainer</TableCell><TableCell numeric>$4,500.00</TableCell></TableRow></TableBody>
+ *   </Table>
+ * </TableContainer>
+ * ```
+ */
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+    /** Keep the caption for screen readers only. */
+    visuallyHidden?: boolean;
+    /** Default `"bottom"`. */
+    side?: "top" | "bottom";
+}
+/** Names the table. Visible under the table by default; `visuallyHidden` keeps it for screen readers. */
+export declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Selected row (`data-state="selected"`, `aria-selected`). */
+    selected?: boolean;
+    /** Dimmed, non-interactive row. */
+    disabled?: boolean;
+    /** Accent bar at the start edge — e.g. the row you just created. */
+    highlighted?: boolean;
+}
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableHeadProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, "align"> {
+    align?: Align;
+    /** Numbers: end-aligned, tabular, mono. */
+    numeric?: boolean;
+    /** Current sort of this column. Set `false` for a sortable column that is not sorted. */
+    sort?: "asc" | "desc" | false;
+    /** Makes the header a sort button (`aria-sort` on the `th`). */
+    onSort?: () => void;
+}
+/**
+ * Column header (`<th scope="col">`). With `onSort` the label becomes a button and the cell
+ * gets `aria-sort`.
+ */
+export declare const TableHead: React.ForwardRefExoticComponent<TableHeadProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, "align"> {
+    align?: Align;
+    /** Numbers and money: end-aligned, tabular, mono — also in RTL. */
+    numeric?: boolean;
+    /** `true` cuts to one line with an ellipsis; a number clamps to that many lines. */
+    truncate?: boolean | number;
+    /** Render as a row header (`<th scope="row">`) — e.g. the name column. */
+    rowHeader?: boolean;
+}
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableEmptyProps extends Omit<React.HTMLAttributes<HTMLTableRowElement>, "title"> {
+    /** Number of columns to span. */
+    colSpan: number;
+    /** Replace the icon (`false` for none). */
+    icon?: React.ReactNode | false;
+    /** Main line. Default "No results". */
+    title?: React.ReactNode;
+    /** Secondary line. Children render as actions (e.g. "Clear filters"). */
+    description?: React.ReactNode;
+}
+/** A single full-width row for an empty table body. */
+export declare const TableEmpty: React.ForwardRefExoticComponent<TableEmptyProps & React.RefAttributes<HTMLTableRowElement>>;
+export {};