@corbits/react-ui 0.1.0

package/dist/ui/sortable-table.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import { cn } from "../lib/utils.js";
+import { EmptyState } from "./empty-state.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+/**
+ * A table you can sort by clicking a header.
+ *
+ * Rows are an array, not a `DataPort` collection — this sorts client-side over
+ * rows it already has, which is only correct for a set small enough to hold in
+ * full. Once the data is paginated, sorting has to happen at the source or the
+ * user is sorting one page and being told it is the whole set; use `DataTable`
+ * with a server-sorted request for that. The two are different tools and this
+ * one does not pretend to be the other.
+ *
+ * `aria-sort` on the active header is the part that matters. A caret glyph is
+ * invisible to a screen reader, and sort order is exactly the sort of state
+ * that goes unnoticed without it. Inactive sortable headers show a neutral
+ * affordance so it is discoverable which columns can be sorted at all.
+ */ export function SortableTable({ caption, rows, columns, rowKey, initialSort, empty, className }) {
+    const [sort, setSort] = useState(initialSort ?? null);
+    const sorted = useMemo(()=>{
+        if (sort === null) return rows;
+        const column = columns.find((candidate)=>candidate.key === sort.key);
+        if (column?.sortValue === undefined) return rows;
+        const { sortValue } = column;
+        // Sorts a copy: `rows` belongs to the caller and may be frozen.
+        return [
+            ...rows
+        ].sort((a, b)=>{
+            const left = sortValue(a);
+            const right = sortValue(b);
+            const comparison = typeof left === "number" && typeof right === "number" ? left - right : String(left).localeCompare(String(right));
+            return sort.direction === "asc" ? comparison : -comparison;
+        });
+    }, [
+        rows,
+        columns,
+        sort
+    ]);
+    const toggle = (key)=>{
+        setSort((current)=>current?.key === key ? {
+                key,
+                direction: current.direction === "asc" ? "desc" : "asc"
+            } : {
+                key,
+                direction: "asc"
+            });
+    };
+    if (rows.length === 0) {
+        return /*#__PURE__*/ _jsx(_Fragment, {
+            children: empty ?? /*#__PURE__*/ _jsx(EmptyState, {
+                title: "Nothing to show"
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Table, {
+        "aria-label": caption,
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsx(TableHeader, {
+                children: /*#__PURE__*/ _jsx(TableRow, {
+                    children: columns.map((column)=>{
+                        const active = sort?.key === column.key;
+                        const sortable = column.sortValue !== undefined;
+                        return /*#__PURE__*/ _jsx(TableHead, {
+                            scope: "col",
+                            "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : undefined,
+                            className: cn(column.align === "right" && "text-right", column.className),
+                            children: sortable ? /*#__PURE__*/ _jsxs("button", {
+                                type: "button",
+                                onClick: ()=>toggle(column.key),
+                                className: cn("inline-flex items-center gap-1 rounded-sm transition-colors hover:text-foreground", !active && "text-muted-foreground"),
+                                children: [
+                                    column.header,
+                                    active ? sort.direction === "asc" ? /*#__PURE__*/ _jsx(ChevronUp, {
+                                        className: "size-3.5",
+                                        "aria-hidden": true
+                                    }) : /*#__PURE__*/ _jsx(ChevronDown, {
+                                        className: "size-3.5",
+                                        "aria-hidden": true
+                                    }) : /*#__PURE__*/ _jsx(ChevronsUpDown, {
+                                        className: "size-3.5 opacity-50",
+                                        "aria-hidden": true
+                                    })
+                                ]
+                            }) : column.header
+                        }, column.key);
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(TableBody, {
+                children: sorted.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
+                        children: columns.map((column)=>/*#__PURE__*/ _jsx(TableCell, {
+                                className: cn(column.align === "right" && "text-right", column.className),
+                                children: column.cell(row)
+                            }, column.key))
+                    }, rowKey(row)))
+            })
+        ]
+    });
+}

package/dist/ui/sparkline.d.ts

@@ -0,0 +1,27 @@
+export type SparklineProps = {
+    readonly values: readonly number[];
+    /**
+     * What the shape means, in words — "Up 12% over 30 days". Without it the
+     * sparkline is invisible to anyone not looking at it, and a shape with no
+     * axes and no labels cannot be inferred from its markup.
+     */
+    readonly summary: string;
+    readonly className?: string;
+};
+/**
+ * A trend, at the size of a word.
+ *
+ * No axes, no ticks, no labels — that is the form, not an omission. A sparkline
+ * says "rising", "flat", "spiky" beside a number that says exactly how much; the
+ * moment it needs a scale it has outgrown itself and wants to be a chart.
+ *
+ * It is scaled between the series' own minimum and maximum rather than from
+ * zero. This is the one place a non-zero baseline is right: the shape is the
+ * only message, and anchoring to zero flattens every real series into a
+ * horizontal line near the top of a 24px box.
+ *
+ * `role="img"` with the caller's summary as its name. The summary is required
+ * for the same reason `alt` is: a picture with no text alternative is simply
+ * missing for some readers, and this one has no fallback content to fall back to.
+ */
+export declare function Sparkline({ values, summary, className }: SparklineProps): import("react").JSX.Element;

package/dist/ui/sparkline.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { linePath, scaleLinear } from "../lib/chart-geometry.js";
+import { seriesColor } from "../lib/chart-palette.js";
+import { cn } from "../lib/utils.js";
+const WIDTH = 96;
+const HEIGHT = 24;
+/**
+ * A trend, at the size of a word.
+ *
+ * No axes, no ticks, no labels — that is the form, not an omission. A sparkline
+ * says "rising", "flat", "spiky" beside a number that says exactly how much; the
+ * moment it needs a scale it has outgrown itself and wants to be a chart.
+ *
+ * It is scaled between the series' own minimum and maximum rather than from
+ * zero. This is the one place a non-zero baseline is right: the shape is the
+ * only message, and anchoring to zero flattens every real series into a
+ * horizontal line near the top of a 24px box.
+ *
+ * `role="img"` with the caller's summary as its name. The summary is required
+ * for the same reason `alt` is: a picture with no text alternative is simply
+ * missing for some readers, and this one has no fallback content to fall back to.
+ */ export function Sparkline({ values, summary, className }) {
+    if (values.length < 2) {
+        return /*#__PURE__*/ _jsx("span", {
+            className: cn("inline-block", className),
+            role: "img",
+            "aria-label": summary
+        });
+    }
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    const span = max - min;
+    const stepX = WIDTH / (values.length - 1);
+    const points = values.map((value, index)=>({
+            x: index * stepX,
+            // A flat series has no span to scale against; centre it rather than
+            // dividing by zero.
+            y: span === 0 ? HEIGHT / 2 : HEIGHT - scaleLinear(value - min, span, HEIGHT - 4) - 2
+        }));
+    const last = points[points.length - 1];
+    return /*#__PURE__*/ _jsxs("svg", {
+        viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+        className: cn("h-6 w-24", className),
+        role: "img",
+        "aria-label": summary,
+        focusable: "false",
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: linePath(points),
+                fill: "none",
+                stroke: seriesColor(0),
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            }),
+            last === undefined ? null : // The end dot marks "now" — which end is the current period is
+            // otherwise ambiguous on a shape with no axis.
+            /*#__PURE__*/ _jsx("circle", {
+                cx: last.x,
+                cy: last.y,
+                r: 2.5,
+                fill: seriesColor(0),
+                stroke: "var(--card)",
+                strokeWidth: 2
+            })
+        ]
+    });
+}

package/dist/ui/stat-grid.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+export type StatGridColumns = 2 | 3 | 4 | 5;
+export type StatGridProps = {
+    readonly children: ReactNode;
+    /** Responsive column count; defaults to four-up on wide screens. */
+    readonly columns?: StatGridColumns;
+    readonly className?: string;
+};
+/**
+ * The KPI band: a fixed responsive grid of `StatGridItem`s.
+ *
+ * Fixed columns rather than auto-fit, because a KPI row is designed as a set —
+ * four headline numbers are four columns, and a row that reflows to five-up on
+ * a wider screen silently reorders what the reader compares side by side.
+ */
+export declare function StatGrid({ children, columns, className }: StatGridProps): import("react").JSX.Element;
+export type StatGridItemProps = {
+    readonly label: string;
+    /** Pre-formatted. The tile does not know your units. */
+    readonly value: string;
+    /** Small print under the number — a rate, a share, a caveat. */
+    readonly sub?: ReactNode;
+    /** Orange action tone — reserve for genuine action/positive emphasis. */
+    readonly accent?: boolean;
+    /** Semantic danger — failure counts, not the action accent. */
+    readonly danger?: boolean;
+    /** Headline tile: larger value + padding. */
+    readonly emphasis?: boolean;
+    /** Optional period-over-period badge (e.g. a `DeltaBadge`). */
+    readonly delta?: ReactNode;
+    /** Custom sparkline slot; overrides `sparklineValues` when both are set. */
+    readonly sparkline?: ReactNode;
+    /** When set (and `sparkline` is omitted), renders the built-in trend line. */
+    readonly sparklineValues?: readonly number[];
+    /** Words for the built-in trend's shape; defaults to "{label} trend". */
+    readonly sparklineLabel?: string;
+    /**
+     * When set, the tile is a real `<button>` and activates on click/Enter/Space.
+     * Static tiles stay a non-interactive `div` so they do not join the tab order.
+     */
+    readonly onClick?: () => void;
+    readonly className?: string;
+};
+/**
+ * One KPI: caption label, headline number, optional delta, trend and small
+ * print. The value never carries direction by colour alone — `accent` and
+ * `danger` are semantic tones the caller opts into, and the delta slot carries
+ * its own words.
+ *
+ * Interaction is opt-in. With `onClick`, the shell is a `<button>` (not a div
+ * wearing `role="button"`) so keyboard activation is native. Shared layout
+ * classes stay identical; only the interactive shell adds hover/press
+ * affordance and the `text-left`/`w-full` button reset.
+ */
+export declare function StatGridItem({ label, value, sub, accent, danger, emphasis, delta, sparkline, sparklineValues, sparklineLabel, onClick, className, }: StatGridItemProps): import("react").JSX.Element;

package/dist/ui/stat-grid.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Sparkline } from "./sparkline.js";
+// Spelled out rather than composed at runtime — Tailwind's scanner only emits
+// utilities it can see literally in the source.
+const COLUMN_CLASS = {
+    2: "grid-cols-2",
+    3: "grid-cols-2 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4",
+    5: "grid-cols-2 sm:grid-cols-5"
+};
+/**
+ * The KPI band: a fixed responsive grid of `StatGridItem`s.
+ *
+ * Fixed columns rather than auto-fit, because a KPI row is designed as a set —
+ * four headline numbers are four columns, and a row that reflows to five-up on
+ * a wider screen silently reorders what the reader compares side by side.
+ */ export function StatGrid({ children, columns = 4, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("grid gap-3", COLUMN_CLASS[columns], className),
+        children: children
+    });
+}
+function statValueClass(accent, danger) {
+    if (danger === true) return "text-destructive";
+    if (accent === true) return "text-primary-emphasis";
+    return "text-foreground";
+}
+/**
+ * One KPI: caption label, headline number, optional delta, trend and small
+ * print. The value never carries direction by colour alone — `accent` and
+ * `danger` are semantic tones the caller opts into, and the delta slot carries
+ * its own words.
+ *
+ * Interaction is opt-in. With `onClick`, the shell is a `<button>` (not a div
+ * wearing `role="button"`) so keyboard activation is native. Shared layout
+ * classes stay identical; only the interactive shell adds hover/press
+ * affordance and the `text-left`/`w-full` button reset.
+ */ export function StatGridItem({ label, value, sub, accent, danger, emphasis, delta, sparkline, sparklineValues, sparklineLabel, onClick, className }) {
+    const sparklineNode = sparkline ?? (sparklineValues !== undefined && sparklineValues.length > 0 ? /*#__PURE__*/ _jsx(Sparkline, {
+        values: sparklineValues,
+        summary: sparklineLabel ?? `${label} trend`
+    }) : null);
+    const shell = cn("flex flex-col gap-1.5 rounded-lg border border-border bg-card", emphasis === true ? "p-5 shadow-sm" : "p-4", className);
+    const body = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-[10px] font-semibold tracking-[0.12em] uppercase text-muted-foreground",
+                children: label
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-baseline gap-2",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("font-black leading-none tabular-nums", emphasis === true ? "text-[34px]" : "text-[26px]", statValueClass(accent, danger)),
+                        children: value
+                    }),
+                    delta
+                ]
+            }),
+            sparklineNode === null ? null : /*#__PURE__*/ _jsx("div", {
+                className: "mt-0.5",
+                children: sparklineNode
+            }),
+            sub === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                className: "text-[10px] tracking-[0.08em] uppercase text-muted-foreground",
+                children: sub
+            })
+        ]
+    });
+    if (onClick === undefined) {
+        return /*#__PURE__*/ _jsx("div", {
+            "data-slot": "stat-grid-item",
+            className: shell,
+            children: body
+        });
+    }
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        "data-slot": "stat-grid-item",
+        onClick: onClick,
+        className: cn(shell, // text-left/w-full: button UA styles centre content and shrink-wrap.
+        // Hover/press only on the interactive shell so static tiles stay quiet.
+        "w-full cursor-pointer text-left transition-colors hover:border-primary-emphasis active:brightness-95"),
+        children: body
+    });
+}

package/dist/ui/status-dot.d.ts

@@ -0,0 +1,13 @@
+export type StatusDotTone = "neutral" | "emphasis" | "success" | "warning" | "danger";
+export type StatusDotProps = {
+    /** Names the state for assistive tech. Required — a bare colour says nothing. */
+    readonly label: string;
+    /** Adds a ring that pulses outward: this state is live and still changing. */
+    readonly live?: boolean;
+    readonly tone?: StatusDotTone;
+    /** `sm` (8px, default) beside body text; `xs` (6px) inside dense chrome. */
+    readonly size?: StatusDotSize;
+    readonly className?: string;
+};
+export type StatusDotSize = "xs" | "sm";
+export declare function StatusDot({ label, live, tone, size, className }: StatusDotProps): import("react").JSX.Element;

package/dist/ui/status-dot.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * Three tones, not one per status, and that is deliberate. A dot is a non-text
+ * UI element and has to clear 3:1 against both the page and a card; the only
+ * fills in the theme that do so at 8px are the emphasis orange, the destructive
+ * red and the muted ink. A green "done" dot would have to invent a token, and
+ * the run's own `Badge` already carries the full status colour on a
+ * contrast-tested fill/foreground pair. The dot marks *liveness*; the badge
+ * names the state.
+ *
+ * Classes are spelled out rather than composed at runtime — Tailwind's scanner
+ * only emits utilities it can see literally in the source.
+ */ const TONE_CLASS = {
+    neutral: "bg-muted-foreground",
+    emphasis: "bg-primary-emphasis",
+    // success/warning use emphasis orange until dedicated high-contrast
+    // fills clear 3:1 at 8px; Badge remains the full-status carrier.
+    success: "bg-primary-emphasis",
+    warning: "bg-primary-emphasis",
+    danger: "bg-destructive"
+};
+/**
+ * A state marker carrying its own accessible name — a coloured dot with no
+ * label is invisible to a screen reader, so the label is required rather than
+ * optional.
+ *
+ * The `live` ring is a separate `aria-hidden` element: motion says "still
+ * changing" to people who can see it, and the label already says so to those
+ * who cannot. It stills under the theme's reduced-motion rule.
+ */ const SIZE_CLASS = {
+    xs: "size-1.5",
+    sm: "size-2"
+};
+export function StatusDot({ label, live = false, tone = "neutral", size = "sm", className }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        role: "img",
+        "aria-label": label,
+        className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className),
+        children: [
+            live ? /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: cn("absolute inset-0 rounded-full [animation:corbits-status-pulse_1.8s_ease-out_infinite]", TONE_CLASS[tone])
+            }) : null,
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: cn("relative size-full rounded-full", TONE_CLASS[tone])
+            })
+        ]
+    });
+}

package/dist/ui/step-list.d.ts

@@ -0,0 +1,21 @@
+import type { StepListItem } from "../lib/workflow-registry.js";
+export type StepListRowProps = {
+    readonly step: StepListItem;
+    readonly className?: string;
+};
+/** One step row — a mark carrying its own glyph and colour, a name, and the
+ * status spelled out in text so it never depends on colour alone. */
+export declare function StepListRow({ step, className }: StepListRowProps): import("react").JSX.Element;
+export type StepListProps = {
+    readonly steps: readonly StepListItem[];
+    /** Names the list. Required — a bare sequence of rows has no subject. */
+    readonly label?: string;
+    readonly className?: string;
+};
+/**
+ * A run's steps and how far along each one is. `aria-live="polite"` so a
+ * step flipping to done or failed is announced without stealing focus from
+ * wherever the reader actually is — the same rule `progress-checklist.tsx`
+ * follows for a long-running operation's checklist.
+ */
+export declare function StepList({ steps, label, className }: StepListProps): import("react").JSX.Element | null;

package/dist/ui/step-list.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { StatusDot } from "./status-dot.js";
+const STATE_LABEL = {
+    pending: "Pending",
+    active: "Now",
+    done: "Done",
+    failed: "Failed"
+};
+const MARK_CLASS = {
+    pending: "border-input text-muted-foreground",
+    active: "border-primary-emphasis bg-primary/10 text-primary-emphasis",
+    done: "border-transparent bg-success text-success-foreground",
+    failed: "border-transparent bg-destructive text-destructive-foreground"
+};
+const LABEL_CLASS = {
+    pending: "text-muted-foreground",
+    active: "font-medium text-primary-emphasis",
+    done: "text-foreground",
+    failed: "font-medium text-destructive"
+};
+/** One step row — a mark carrying its own glyph and colour, a name, and the
+ * status spelled out in text so it never depends on colour alone. */ export function StepListRow({ step, className }) {
+    return /*#__PURE__*/ _jsxs("li", {
+        "data-step-status": step.status,
+        className: cn("grid grid-cols-[20px_minmax(0,1fr)_auto] items-start gap-2 py-1.5", className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: cn("mt-0.5 grid size-5 place-items-center rounded-sm border text-[10px] font-semibold", MARK_CLASS[step.status]),
+                children: step.status === "done" ? /*#__PURE__*/ _jsx(Check, {
+                    className: "size-3"
+                }) : step.status === "failed" ? /*#__PURE__*/ _jsx(X, {
+                    className: "size-3"
+                }) : step.status === "active" ? /*#__PURE__*/ _jsx(StatusDot, {
+                    label: "",
+                    tone: "emphasis",
+                    live: true
+                }) : null
+            }),
+            /*#__PURE__*/ _jsxs("span", {
+                className: "min-w-0",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: cn("block truncate text-sm", LABEL_CLASS[step.status]),
+                        children: step.name
+                    }),
+                    step.meta === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                        className: "block truncate text-xs text-muted-foreground",
+                        children: step.meta
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "shrink-0 text-[10.5px] font-bold uppercase tracking-[0.05em] text-muted-foreground",
+                children: STATE_LABEL[step.status]
+            })
+        ]
+    });
+}
+/**
+ * A run's steps and how far along each one is. `aria-live="polite"` so a
+ * step flipping to done or failed is announced without stealing focus from
+ * wherever the reader actually is — the same rule `progress-checklist.tsx`
+ * follows for a long-running operation's checklist.
+ */ export function StepList({ steps, label = "Steps", className }) {
+    if (steps.length === 0) return null;
+    return /*#__PURE__*/ _jsx("ol", {
+        "aria-label": label,
+        "aria-live": "polite",
+        className: cn("flex flex-col", className),
+        children: steps.map((step)=>/*#__PURE__*/ _jsx(StepListRow, {
+                step: step
+            }, step.id))
+    });
+}

package/dist/ui/switch.d.ts

@@ -0,0 +1,23 @@
+export type SwitchProps = {
+    readonly checked: boolean;
+    readonly onCheckedChange: (checked: boolean) => void;
+    /** Accessible name. Omit only when a `<label htmlFor>` already names it. */
+    readonly label?: string;
+    readonly id?: string;
+    readonly disabled?: boolean;
+    /** Ids of the text describing the setting, for `aria-describedby`. */
+    readonly describedBy?: string;
+    readonly className?: string;
+};
+/**
+ * An on/off setting.
+ *
+ * `role="switch"` on a real `<button>`, not a styled checkbox: a switch takes
+ * effect immediately and a checkbox implies a form you still have to submit.
+ * Screen readers say "on/off" for a switch and "checked/unchecked" for a
+ * checkbox, and that difference is the whole reason the role exists.
+ *
+ * The knob is a `<span>` inside the button rather than a `::after`, so its
+ * transform animates independently of the track's colour transition.
+ */
+export declare function Switch({ checked, onCheckedChange, label, id, disabled, describedBy, className, }: SwitchProps): import("react").JSX.Element;

package/dist/ui/switch.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * An on/off setting.
+ *
+ * `role="switch"` on a real `<button>`, not a styled checkbox: a switch takes
+ * effect immediately and a checkbox implies a form you still have to submit.
+ * Screen readers say "on/off" for a switch and "checked/unchecked" for a
+ * checkbox, and that difference is the whole reason the role exists.
+ *
+ * The knob is a `<span>` inside the button rather than a `::after`, so its
+ * transform animates independently of the track's colour transition.
+ */ export function Switch({ checked, onCheckedChange, label, id, disabled = false, describedBy, className }) {
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        id: id,
+        role: "switch",
+        "aria-checked": checked,
+        "aria-label": label,
+        "aria-describedby": describedBy,
+        disabled: disabled,
+        onClick: ()=>onCheckedChange(!checked),
+        className: cn("inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent p-0.5 transition-colors disabled:opacity-50", checked ? "bg-primary" : "bg-input", className),
+        children: /*#__PURE__*/ _jsx("span", {
+            "aria-hidden": true,
+            className: cn("size-4 rounded-full bg-background transition-transform", checked && "translate-x-4")
+        })
+    });
+}

package/dist/ui/table.d.ts

@@ -0,0 +1,8 @@
+import type * as React from "react";
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
+export declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
+export declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
+export declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;

package/dist/ui/table.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+export function Table({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "relative w-full overflow-x-auto",
+        children: /*#__PURE__*/ _jsx("table", {
+            "data-slot": "table",
+            className: cn("w-full caption-bottom text-sm", className),
+            ...props
+        })
+    });
+}
+export function TableHeader({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("thead", {
+        className: cn("[&_tr]:border-b [&_tr]:border-border", className),
+        ...props
+    });
+}
+export function TableBody({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("tbody", {
+        className: cn("[&_tr:last-child]:border-0", className),
+        ...props
+    });
+}
+export function TableRow({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("tr", {
+        className: cn("border-b border-border transition-colors hover:bg-muted", className),
+        ...props
+    });
+}
+export function TableHead({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("th", {
+        className: cn("h-10 px-3 text-left align-middle font-medium text-muted-foreground", className),
+        ...props
+    });
+}
+export function TableCell({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("td", {
+        className: cn("p-3 align-middle", className),
+        ...props
+    });
+}
+export function TableCaption({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("caption", {
+        className: cn("mt-3 text-sm text-muted-foreground", className),
+        ...props
+    });
+}