@vamos-ui/react 0.0.0-stage → 0.2.0

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 {};

package/dist/components/table.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DataLabel } from "../lib/data-islands.js";
+import { EmptyState } from "./empty-state.js";
+const alignClass = { start: "text-start", center: "text-center", end: "text-end" };
+/**
+ * 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 const TableContainer = React.forwardRef(function TableContainer({ className, maxHeight, style, ...props }, ref) {
+    return (_jsx("div", { ref: ref, role: "region", tabIndex: 0, "data-slot": "table-container", className: cn("ui-table-scroll relative w-full overflow-auto overscroll-x-contain rounded-[inherit] focus-ring", className), style: maxHeight ? { maxHeight, ...style } : style, ...props }));
+});
+/**
+ * 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 const Table = React.forwardRef(function Table({ className, density = "inherit", striped, hover = true, bordered = "rows", stickyHeader, stickyFirstColumn, layout = "auto", children, ...props }, ref) {
+    if (process.env.NODE_ENV !== "production" && !props["aria-label"] && !props["aria-labelledby"]) {
+        const hasCaption = React.Children.toArray(children).some((c) => React.isValidElement(c) && c.type === TableCaption);
+        if (!hasCaption)
+            console.warn("[vamos-ui] <Table> needs a <TableCaption>, aria-label or aria-labelledby.");
+    }
+    return (_jsx("table", { ref: ref, "data-slot": "table", "data-density": density === "inherit" ? undefined : density, "data-striped": striped ? "" : undefined, "data-hover": hover ? "" : undefined, "data-bordered": bordered, "data-sticky-header": stickyHeader ? "" : undefined, "data-sticky-column": stickyFirstColumn ? "" : undefined, className: cn("ui-table w-full caption-bottom border-separate border-spacing-0 text-[13px] text-fg", layout === "fixed" && "table-fixed", className), ...props, children: children }));
+});
+/** Names the table. Visible under the table by default; `visuallyHidden` keeps it for screen readers. */
+export const TableCaption = React.forwardRef(function TableCaption({ className, visuallyHidden, side = "bottom", ...props }, ref) {
+    return (_jsx("caption", { ref: ref, "data-slot": "table-caption", className: cn(visuallyHidden ? "sr-only" : "px-(--cell-px) py-3 text-start text-xs text-fg-subtle", side === "top" && "caption-top pt-0", className), ...props }));
+});
+export const TableHeader = React.forwardRef(function TableHeader({ className, ...props }, ref) {
+    return _jsx("thead", { ref: ref, "data-slot": "table-header", className: className, ...props });
+});
+export const TableBody = React.forwardRef(function TableBody({ className, ...props }, ref) {
+    return _jsx("tbody", { ref: ref, "data-slot": "table-body", className: className, ...props });
+});
+export const TableFooter = React.forwardRef(function TableFooter({ className, ...props }, ref) {
+    return _jsx("tfoot", { ref: ref, "data-slot": "table-footer", className: cn("font-medium", className), ...props });
+});
+export const TableRow = React.forwardRef(function TableRow({ className, selected, disabled, highlighted, ...props }, ref) {
+    return (_jsx("tr", { ref: ref, "data-slot": "table-row", "data-state": selected ? "selected" : undefined, "data-disabled": disabled ? "" : undefined, "data-highlighted": highlighted ? "" : undefined, "aria-selected": selected === undefined ? undefined : selected, "aria-disabled": disabled || undefined, className: className, ...props }));
+});
+/**
+ * Column header (`<th scope="col">`). With `onSort` the label becomes a button and the cell
+ * gets `aria-sort`.
+ */
+export const TableHead = React.forwardRef(function TableHead({ className, align, numeric, sort, onSort, scope = "col", children, ...props }, ref) {
+    const a = align ?? (numeric ? "end" : "start");
+    const sortable = sort !== undefined || onSort !== undefined;
+    const SortIcon = sort === "asc" ? ArrowUp : sort === "desc" ? ArrowDown : ChevronsUpDown;
+    return (_jsx("th", { ref: ref, scope: scope, "data-slot": "table-head", "data-numeric": numeric ? "" : undefined, "aria-sort": sortable ? (sort === "asc" ? "ascending" : sort === "desc" ? "descending" : "none") : undefined, className: cn("h-[calc(var(--row-h)*0.78)] px-(--cell-px) align-middle text-xs font-medium whitespace-nowrap text-fg-muted", alignClass[a], className), ...props, children: sortable ? (_jsxs("button", { type: "button", onClick: onSort, "data-sorted": sort ? "" : undefined, className: cn("-mx-1.5 inline-flex items-center gap-1 rounded-ui-sm px-1.5 py-1 font-medium transition-colors hover:bg-hover hover:text-fg focus-ring data-sorted:text-fg", a === "end" && "flex-row-reverse"), children: [children, _jsx(SortIcon, { "aria-hidden": true, className: cn("size-3.5 shrink-0", sort ? "text-fg" : "text-fg-subtle") })] })) : (children) }));
+});
+export const TableCell = React.forwardRef(function TableCell({ className, align, numeric, truncate, rowHeader, children, ...props }, ref) {
+    const a = align ?? (numeric ? "end" : "start");
+    const Comp = rowHeader ? "th" : "td";
+    const clamp = typeof truncate === "number" && truncate > 1;
+    return (_jsx(Comp, { ref: ref, ...(rowHeader ? { scope: "row" } : {}), "data-slot": "table-cell", "data-numeric": numeric ? "" : undefined, className: cn("h-(--row-h) px-(--cell-px) py-2 align-middle", alignClass[a], numeric && "font-mono text-[12.5px] whitespace-nowrap tabular", rowHeader && "font-medium", truncate === true || truncate === 1 ? "max-w-0 truncate" : null, className), ...props, children: clamp ? (_jsx("span", { className: "line-clamp-(--lines)", style: { ["--lines"]: truncate }, children: children })) : (children) }));
+});
+/** A single full-width row for an empty table body. */
+export const TableEmpty = React.forwardRef(function TableEmpty({ colSpan, icon, title, description, className, children, ...props }, ref) {
+    return (_jsx("tr", { ref: ref, "data-slot": "table-empty", className: className, ...props, children: _jsx("td", { colSpan: colSpan, className: "px-(--cell-px) py-8", children: _jsx(EmptyState, { kind: "no-results", size: "sm", icon: icon, title: title ?? _jsx(DataLabel, { ns: "table", id: "empty" }), description: description, actions: children }) }) }));
+});

package/dist/components/tabs.d.ts

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { Tabs as RadixTabs } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+import { type BadgeProps } from "./badge.js";
+export declare const tabsListVariants: (props?: ({
+    variant?: "underline" | "pill" | "segmented" | null | undefined;
+    fill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const tabsTriggerVariants: (props?: ({
+    variant?: "underline" | "pill" | "segmented" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TabsVariant = NonNullable<VariantProps<typeof tabsListVariants>["variant"]>;
+type TabsSize = "sm" | "md";
+type TabsOrientation = "horizontal" | "vertical";
+export interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixTabs.Root>, "value" | "defaultValue" | "onValueChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+/**
+ * Switches between views of the same context (WAI-ARIA Tabs: arrows, Home/End).
+ * Inactive panels unmount by default; pass `forceMount` on a `TabsContent` to keep it.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="deals" count={4}>Deals</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">…</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * `activationMode="manual"` for heavy panels (focus moves with arrows, Enter/Space selects).
+ * For route-based tabs use `TabsLinkList` — that is navigation, not the Tabs pattern.
+ */
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.List> {
+    /** `underline` (pages, records) · `pill` (status filters) · `segmented` (view switch). Default `underline`. */
+    variant?: TabsVariant;
+    size?: TabsSize;
+    /** Equal-width tabs that fill the row. */
+    fill?: boolean;
+    /**
+     * `"scroll"`: when tabs don't fit, the strip scrolls with edge fade masks and the selected tab
+     * is kept in view. Default `"scroll"` for horizontal lists. `"none"` lets the list wrap/clip.
+     */
+    overflow?: "scroll" | "none";
+}
+/** The row (or column) of tab triggers. */
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Trigger> {
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Trailing count (locale-formatted, 99+). Announced as part of the name: "Draft, 12". */
+    count?: number;
+    /** Badge tone for `count`. Default `neutral` (the selected tab uses `accent`). */
+    badgeTone?: BadgeProps["tone"];
+}
+/** One tab. `value` must match a `TabsContent`. */
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof RadixTabs.Content> {
+}
+/** The panel for one tab. Unmounted while inactive unless `forceMount`. */
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabsLinkListProps extends React.HTMLAttributes<HTMLElement> {
+    /** Accessible name of the `nav`, e.g. "Contact sections". Required when the page has more than one nav. */
+    "aria-label"?: string;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    fill?: boolean;
+    orientation?: TabsOrientation;
+    overflow?: "scroll" | "none";
+}
+/**
+ * Route-based tabs: a `<nav>` of links with `aria-current="page"` on the active one. Links use the
+ * app's router `Link` from `VamosProvider`, and the active tab is derived from `currentPath`
+ * unless a `TabsLink` sets `active`.
+ *
+ * ```tsx
+ * <TabsLinkList aria-label="Contact sections">
+ *   <TabsLink href="/contacts/42" exact>Overview</TabsLink>
+ *   <TabsLink href="/contacts/42/deals" count={4}>Deals</TabsLink>
+ * </TabsLinkList>
+ * ```
+ */
+export declare const TabsLinkList: React.ForwardRefExoticComponent<TabsLinkListProps & React.RefAttributes<HTMLElement>>;
+export interface TabsLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+    /** Force the active state. Default: derived from `currentPath` (`exact` for an index route). */
+    active?: boolean;
+    /** Match only this exact path (use for the first, "Overview" tab). */
+    exact?: boolean;
+    icon?: React.ReactNode;
+    count?: number;
+    badgeTone?: BadgeProps["tone"];
+    /** Dims the link and removes it from the tab order. */
+    disabled?: boolean;
+}
+/** One route tab. Renders the app's `Link`. */
+export declare const TabsLink: React.ForwardRefExoticComponent<TabsLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};