@corbits/react-ui 0.1.0

package/dist/ui/avatar.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const SIZE_CLASS = {
+    sm: "size-6 text-[10px]",
+    md: "size-8 text-xs",
+    lg: "size-10 text-sm"
+};
+const TONE_CLASS = {
+    neutral: "bg-muted text-muted-foreground",
+    agent: "bg-primary text-primary-foreground",
+    agent2: "bg-accent text-accent-foreground",
+    agent3: "bg-success text-success-foreground"
+};
+const BADGE_SIZE = {
+    sm: "size-3 text-[7px]",
+    md: "size-3.5 text-[8px]",
+    lg: "size-4 text-[9px]"
+};
+/**
+ * Initials avatar with optional tenant monogram badge. Images are
+ * intentionally unsupported here: identity headers should not flash or
+ * depend on third-party avatar hosts.
+ */ export function Avatar({ initials, label, tone = "neutral", size = "md", tenantMonogram, className }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        role: "img",
+        "aria-label": label,
+        className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], className),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                children: initials.slice(0, 2)
+            }),
+            tenantMonogram === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                "aria-hidden": true,
+                className: cn("absolute -right-0.5 -bottom-0.5 inline-flex items-center justify-center border border-background bg-muted font-bold uppercase text-muted-foreground", BADGE_SIZE[size]),
+                children: tenantMonogram.slice(0, 1)
+            })
+        ]
+    });
+}
+/**
+ * Overlapping avatar stack for thread participants and channel members.
+ */ export function AvatarStack({ items, max = 4, size = "sm", className }) {
+    const visible = items.slice(0, max);
+    const overflow = items.length - visible.length;
+    return /*#__PURE__*/ _jsxs("span", {
+        className: cn("inline-flex items-center", className),
+        role: "group",
+        "aria-label": "Participants",
+        children: [
+            visible.map((item, index)=>/*#__PURE__*/ _jsx(Avatar, {
+                    initials: item.initials,
+                    label: item.label,
+                    ...item.tone === undefined ? {} : {
+                        tone: item.tone
+                    },
+                    ...item.tenantMonogram === undefined ? {} : {
+                        tenantMonogram: item.tenantMonogram
+                    },
+                    size: size,
+                    className: cn("ring-1 ring-background", index > 0 && "-ml-1.5")
+                }, item.id)),
+            overflow <= 0 ? null : /*#__PURE__*/ _jsxs("span", {
+                className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"),
+                "aria-label": `${overflow} more`,
+                children: [
+                    "+",
+                    overflow
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/badge.d.ts

@@ -0,0 +1,10 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const badgeVariants: (props?: ({
+    tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | "shared" | "access" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The tone names, exported so callers can type a state → tone lookup table. */
+export type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>["tone"]>;
+export type BadgeProps = React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
+export declare function Badge({ className, tone, ...props }: BadgeProps): React.JSX.Element;
+export { badgeVariants };

package/dist/ui/badge.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+// A compact label chip. Tones are semantic, not decorative: `accent` is the one
+// orange tone and — like the primary button — should stay rare on a screen.
+// Orange here is `primary-emphasis`, the orange that clears text contrast on the
+// page and card grounds; the fill orange does not.
+const badgeVariants = cva("inline-flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-[10px] font-semibold tracking-[0.08em] uppercase", {
+    variants: {
+        tone: {
+            neutral: "border-border bg-muted text-muted-foreground",
+            accent: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis",
+            info: "border-accent bg-accent text-accent-foreground",
+            success: "border-success bg-success text-success-foreground",
+            // Warning reuses accent amber until a dedicated warning pair lands in theme.
+            warning: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis",
+            danger: "border-destructive bg-destructive text-destructive-foreground",
+            shared: "border-accent bg-accent text-accent-foreground",
+            access: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis"
+        }
+    },
+    defaultVariants: {
+        tone: "neutral"
+    }
+});
+export function Badge({ className, tone, ...props }) {
+    return /*#__PURE__*/ _jsx("span", {
+        "data-slot": "badge",
+        className: cn(badgeVariants({
+            tone
+        }), className),
+        ...props
+    });
+}
+export { badgeVariants };

package/dist/ui/bar-chart.d.ts

@@ -0,0 +1,38 @@
+export type BarDatum = {
+    readonly label: string;
+    readonly value: number;
+};
+export type BarChartProps = {
+    readonly title: string;
+    readonly description?: string;
+    readonly data: readonly BarDatum[];
+    /** Column header for the value in the table view. */
+    readonly valueLabel?: string;
+    /** Formats the value at each bar's tip and in the table. */
+    readonly format?: (value: number) => string;
+    readonly className?: string;
+};
+/**
+ * One value per category, as horizontal bars.
+ *
+ * Horizontal, not vertical, because category labels are words. Words on a
+ * vertical chart's x-axis either rotate 45°, truncate, or force the chart to be
+ * as wide as the longest name; on a horizontal chart they sit flat in a fixed
+ * gutter and stay readable at any count.
+ *
+ * Every bar is the *same* colour — slot 1. Colouring nominal bars by their value
+ * spends the identity channel re-encoding what bar length already shows, and it
+ * makes a legend necessary for information the reader already has. The bars are
+ * one series, so there is no legend either: the caption names it.
+ *
+ * The rounded end is only on the value end. A bar rounded at the baseline no
+ * longer starts at zero — it starts at a curve, and small values read as smaller
+ * than they are. `RADIUS` is also clamped to half the bar's length so a short
+ * bar becomes a stub rather than a lozenge whose length is pure geometry.
+ *
+ * The whole plot is `aria-hidden` and the table below the frame carries the
+ * numbers. An SVG full of `<rect>` elements announced individually is noise, and
+ * the exact values — which is what anyone reading non-visually wants — are in
+ * the table, in order, with headers.
+ */
+export declare function BarChart({ title, description, data, valueLabel, format, className }: BarChartProps): import("react").JSX.Element;

package/dist/ui/bar-chart.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatCompact, niceTicks, scaleLinear } from "../lib/chart-geometry.js";
+import { seriesColor } from "../lib/chart-palette.js";
+import { cn } from "../lib/utils.js";
+import { ChartFrame } from "./chart-frame.js";
+const ROW_HEIGHT = 28;
+const BAR_HEIGHT = 20; // ≤ 24px: the band's leftover is deliberate air.
+const LABEL_WIDTH = 120;
+const VALUE_WIDTH = 56;
+const RADIUS = 4;
+/**
+ * One value per category, as horizontal bars.
+ *
+ * Horizontal, not vertical, because category labels are words. Words on a
+ * vertical chart's x-axis either rotate 45°, truncate, or force the chart to be
+ * as wide as the longest name; on a horizontal chart they sit flat in a fixed
+ * gutter and stay readable at any count.
+ *
+ * Every bar is the *same* colour — slot 1. Colouring nominal bars by their value
+ * spends the identity channel re-encoding what bar length already shows, and it
+ * makes a legend necessary for information the reader already has. The bars are
+ * one series, so there is no legend either: the caption names it.
+ *
+ * The rounded end is only on the value end. A bar rounded at the baseline no
+ * longer starts at zero — it starts at a curve, and small values read as smaller
+ * than they are. `RADIUS` is also clamped to half the bar's length so a short
+ * bar becomes a stub rather than a lozenge whose length is pure geometry.
+ *
+ * The whole plot is `aria-hidden` and the table below the frame carries the
+ * numbers. An SVG full of `<rect>` elements announced individually is noise, and
+ * the exact values — which is what anyone reading non-visually wants — are in
+ * the table, in order, with headers.
+ */ export function BarChart({ title, description, data, valueLabel = "Value", format = formatCompact, className }) {
+    const max = Math.max(0, ...data.map((datum)=>datum.value));
+    const ticks = niceTicks(max);
+    const axisMax = ticks[ticks.length - 1] ?? 1;
+    const plotWidth = 320;
+    const height = data.length * ROW_HEIGHT;
+    const width = LABEL_WIDTH + plotWidth + VALUE_WIDTH;
+    return /*#__PURE__*/ _jsxs(ChartFrame, {
+        title: title,
+        ...description === undefined ? {} : {
+            description
+        },
+        table: {
+            columns: [
+                "Category",
+                valueLabel
+            ],
+            rows: data.map((datum)=>[
+                    datum.label,
+                    format(datum.value)
+                ])
+        },
+        className: className,
+        children: [
+            /*#__PURE__*/ _jsxs("svg", {
+                viewBox: `0 0 ${width} ${height}`,
+                // Scales to the container's width; the row rhythm is what must stay
+                // fixed, and it is expressed in the viewBox.
+                className: "h-auto w-full",
+                "aria-hidden": true,
+                focusable: "false",
+                children: [
+                    ticks.map((tick)=>{
+                        const x = LABEL_WIDTH + scaleLinear(tick, axisMax, plotWidth);
+                        return(// Hairline, solid, one step off the surface: present enough to
+                        // measure against, quiet enough that the bars stay the loud thing.
+                        /*#__PURE__*/ _jsx("line", {
+                            x1: x,
+                            y1: 0,
+                            x2: x,
+                            y2: height,
+                            stroke: "var(--border)",
+                            strokeWidth: 1
+                        }, tick));
+                    }),
+                    data.map((datum, index)=>{
+                        const y = index * ROW_HEIGHT + (ROW_HEIGHT - BAR_HEIGHT) / 2;
+                        const length = scaleLinear(datum.value, axisMax, plotWidth);
+                        const radius = Math.min(RADIUS, length / 2);
+                        return /*#__PURE__*/ _jsxs("g", {
+                            children: [
+                                /*#__PURE__*/ _jsx("text", {
+                                    x: LABEL_WIDTH - 8,
+                                    y: index * ROW_HEIGHT + ROW_HEIGHT / 2,
+                                    textAnchor: "end",
+                                    dominantBaseline: "middle",
+                                    className: "fill-muted-foreground text-[11px]",
+                                    children: datum.label
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: length <= 0 ? "" : `M${LABEL_WIDTH} ${y}` + `H${LABEL_WIDTH + length - radius}` + `a${radius} ${radius} 0 0 1 ${radius} ${radius}` + `V${y + BAR_HEIGHT - radius}` + `a${radius} ${radius} 0 0 1 ${-radius} ${radius}` + `H${LABEL_WIDTH}Z`,
+                                    fill: seriesColor(0)
+                                }),
+                                /*#__PURE__*/ _jsx("text", {
+                                    x: LABEL_WIDTH + length + 8,
+                                    y: index * ROW_HEIGHT + ROW_HEIGHT / 2,
+                                    dominantBaseline: "middle",
+                                    className: "fill-foreground text-[11px] tabular-nums",
+                                    children: format(datum.value)
+                                })
+                            ]
+                        }, datum.label);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("p", {
+                className: cn("text-xs text-muted-foreground"),
+                children: [
+                    "Axis to ",
+                    format(axisMax),
+                    ", from zero."
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/block-card.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export type BlockCardProps = {
+    readonly title: string;
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The generative-UI block frame: a bordered, square-cornered card with a
+ * pulse-dot header. Zero radius is deliberate — it is what separates a
+ * generated block from the theme's otherwise-rounded surfaces, so a reader
+ * can tell "the agent made this" at a glance. Lifted out of a consumer app
+ * unchanged; see `RiskBadge` below for the tone it pairs with inside
+ * `children`.
+ */
+export declare function BlockCard({ title, children, className }: BlockCardProps): import("react").JSX.Element;
+export type RiskLevel = "low" | "medium" | "high";
+export type RiskBadgeProps = {
+    readonly level: RiskLevel;
+    readonly label: string;
+    readonly note?: string;
+    readonly className?: string;
+};
+/**
+ * A risk callout for a block whose action carries consequence — approve this
+ * order cancellation, run this migration. `level` drives colour only; the
+ * `label` is what actually says what the risk is, so the badge is never a
+ * bare colour dot.
+ */
+export declare function RiskBadge({ level, label, note, className }: RiskBadgeProps): import("react").JSX.Element;

package/dist/ui/block-card.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * The generative-UI block frame: a bordered, square-cornered card with a
+ * pulse-dot header. Zero radius is deliberate — it is what separates a
+ * generated block from the theme's otherwise-rounded surfaces, so a reader
+ * can tell "the agent made this" at a glance. Lifted out of a consumer app
+ * unchanged; see `RiskBadge` below for the tone it pairs with inside
+ * `children`.
+ */ export function BlockCard({ title, children, className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "block-card",
+        className: cn("overflow-hidden rounded-none border border-border bg-card", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                "data-slot": "block-card-header",
+                className: "flex items-center gap-2 border-b border-border px-3.5 py-2.5 text-xs font-bold tracking-[0.02em] text-primary-emphasis",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        className: "size-1.5 shrink-0 rounded-none bg-current [animation:corbits-block-pulse_1.6s_ease_infinite]"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        "data-slot": "block-card-title",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "data-slot": "block-card-body",
+                className: "p-4",
+                children: children
+            })
+        ]
+    });
+}
+const RISK_TONE_CLASS = {
+    low: "text-muted-foreground",
+    medium: "text-warn",
+    high: "text-destructive"
+};
+/**
+ * A risk callout for a block whose action carries consequence — approve this
+ * order cancellation, run this migration. `level` drives colour only; the
+ * `label` is what actually says what the risk is, so the badge is never a
+ * bare colour dot.
+ */ export function RiskBadge({ level, label, note, className }) {
+    return /*#__PURE__*/ _jsxs("span", {
+        "data-slot": "risk-badge",
+        "data-risk": level,
+        className: cn("inline-flex items-center gap-1.5 text-xs font-bold [&_svg]:size-3.5", RISK_TONE_CLASS[level], className),
+        children: [
+            /*#__PURE__*/ _jsx(TriangleAlert, {
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                children: label
+            }),
+            note === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                className: "font-medium text-muted-foreground",
+                children: note
+            })
+        ]
+    });
+}

package/dist/ui/boot-screen.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+export type BootScreenProps = {
+    /** What the app is doing, in words: "Loading workbench", "Reconnecting…". */
+    readonly message: string;
+    /** Brand lockup, top left. */
+    readonly brand?: ReactNode;
+    /** Quiet corner detail — a version string, a build id. */
+    readonly footer?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The screen before the app: brand top-left, one centered status line, a quiet
+ * corner detail. Fills its positioned parent — `BootScreen` is the surface, and
+ * whoever mounts it decides whether that is the whole viewport (initial load)
+ * or a cover over a live app (`ReconnectingOverlay`).
+ *
+ * `role="status"` with the message as the accessible name, so a screen reader
+ * announces the state change rather than the user waiting on a blank screen.
+ * No spinner: the pulsing bar is decorative and `aria-hidden`, and it collapses
+ * to a still frame under the theme's reduced-motion rule with nothing to do
+ * here.
+ */
+export declare function BootScreen({ message, brand, footer, className }: BootScreenProps): import("react").JSX.Element;

package/dist/ui/boot-screen.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * The screen before the app: brand top-left, one centered status line, a quiet
+ * corner detail. Fills its positioned parent — `BootScreen` is the surface, and
+ * whoever mounts it decides whether that is the whole viewport (initial load)
+ * or a cover over a live app (`ReconnectingOverlay`).
+ *
+ * `role="status"` with the message as the accessible name, so a screen reader
+ * announces the state change rather than the user waiting on a blank screen.
+ * No spinner: the pulsing bar is decorative and `aria-hidden`, and it collapses
+ * to a still frame under the theme's reduced-motion rule with nothing to do
+ * here.
+ */ export function BootScreen({ message, brand, footer, className }) {
+    const messageId = useId();
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "status",
+        "aria-labelledby": messageId,
+        className: cn("absolute inset-0 overflow-hidden bg-background text-foreground", className),
+        children: [
+            brand === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "absolute top-6 left-7",
+                children: brand
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "absolute inset-0 flex flex-col items-center justify-center gap-4 p-6",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": true,
+                        className: "h-0.5 w-24 overflow-hidden rounded-full bg-muted",
+                        children: /*#__PURE__*/ _jsx("span", {
+                            className: "block h-full w-1/3 rounded-full bg-primary [animation:corbits-boot-sweep_1.4s_ease-in-out_infinite]"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        id: messageId,
+                        className: "max-w-[32ch] text-center text-xs leading-relaxed text-muted-foreground",
+                        children: message
+                    })
+                ]
+            }),
+            footer === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "absolute bottom-6 left-7 font-mono text-[11px] text-muted-foreground",
+                children: footer
+            })
+        ]
+    });
+}

package/dist/ui/bulk-action-bar.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export type BulkActionBarProps = {
+    readonly count: number;
+    readonly onClear: () => void;
+    /** Action buttons, rendered after the "N selected" label — typically `Button`s. */
+    readonly children: ReactNode;
+    /** Overrides the default `"Bulk actions"` accessible name outright — for a consumer localizing this published library's one hardcoded English string. */
+    readonly label?: string;
+    readonly className?: string;
+};
+/**
+ * The floating pill that appears once a list has a selection: fixed to the
+ * bottom of the viewport (or the nearest ancestor that establishes its own
+ * containing block — a `transform`, `filter`, or similar CSS property on an
+ * ancestor changes what `fixed` positions against), riding in with a small
+ * rise so it reads as newly arrived rather than always having been there.
+ * Renders nothing while `count` is 0 — the caller does not need to guard
+ * the render site itself.
+ *
+ * The horizontal centering (`left-1/2` plus a permanent `-translate-x-1/2`)
+ * is not part of the entrance animation and is never gated by
+ * `motion-safe:` — a `prefers-reduced-motion` viewer gets no animation at
+ * all, and if the centering correction lived only in the animation's own
+ * `transform`, that viewer would see the bar pinned at the horizontal
+ * midpoint with its left edge running off-viewport. The animation itself
+ * only touches `opacity`/`translateY`, on an inner element, so it never
+ * overwrites the outer element's static centering transform.
+ *
+ * Escape clears the selection from anywhere on the page while the bar is
+ * showing, not only while it has focus — the bar is a global consequence of
+ * list state, not a dialog the user has stepped into, so it listens on
+ * `window` rather than requiring focus to land on it first. It defers to
+ * `event.defaultPrevented`, so a dialog or input stacked above the bar that
+ * already handled its own Escape wins instead of also clearing the
+ * selection underneath it.
+ */
+export declare function BulkActionBar({ count, onClear, children, label, className }: BulkActionBarProps): import("react").JSX.Element | null;

package/dist/ui/bulk-action-bar.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * The floating pill that appears once a list has a selection: fixed to the
+ * bottom of the viewport (or the nearest ancestor that establishes its own
+ * containing block — a `transform`, `filter`, or similar CSS property on an
+ * ancestor changes what `fixed` positions against), riding in with a small
+ * rise so it reads as newly arrived rather than always having been there.
+ * Renders nothing while `count` is 0 — the caller does not need to guard
+ * the render site itself.
+ *
+ * The horizontal centering (`left-1/2` plus a permanent `-translate-x-1/2`)
+ * is not part of the entrance animation and is never gated by
+ * `motion-safe:` — a `prefers-reduced-motion` viewer gets no animation at
+ * all, and if the centering correction lived only in the animation's own
+ * `transform`, that viewer would see the bar pinned at the horizontal
+ * midpoint with its left edge running off-viewport. The animation itself
+ * only touches `opacity`/`translateY`, on an inner element, so it never
+ * overwrites the outer element's static centering transform.
+ *
+ * Escape clears the selection from anywhere on the page while the bar is
+ * showing, not only while it has focus — the bar is a global consequence of
+ * list state, not a dialog the user has stepped into, so it listens on
+ * `window` rather than requiring focus to land on it first. It defers to
+ * `event.defaultPrevented`, so a dialog or input stacked above the bar that
+ * already handled its own Escape wins instead of also clearing the
+ * selection underneath it.
+ */ export function BulkActionBar({ count, onClear, children, label = "Bulk actions", className }) {
+    useEffect(()=>{
+        if (count === 0) return;
+        function onKeyDown(event) {
+            if (event.key === "Escape" && !event.defaultPrevented) onClear();
+        }
+        window.addEventListener("keydown", onKeyDown);
+        return ()=>window.removeEventListener("keydown", onKeyDown);
+    }, [
+        count,
+        onClear
+    ]);
+    if (count === 0) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn("fixed bottom-6 left-1/2 z-40 -translate-x-1/2", className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            role: "group",
+            "aria-label": label,
+            className: cn("flex items-center gap-3 rounded-full border border-border bg-card px-4 py-2 shadow-lg", "motion-safe:[animation:corbits-bulk-action-bar-in_220ms_var(--ease-out)_both]"),
+            children: [
+                /*#__PURE__*/ _jsxs("span", {
+                    "aria-live": "polite",
+                    className: "text-sm font-medium whitespace-nowrap",
+                    children: [
+                        count,
+                        " selected"
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex items-center gap-2",
+                    children: children
+                })
+            ]
+        })
+    });
+}

package/dist/ui/button.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+declare const buttonVariantsBase: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function buttonVariants(props?: VariantProps<typeof buttonVariantsBase>): string;
+export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariantsBase> & {
+    asChild?: boolean;
+};
+export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): React.JSX.Element;
+export { buttonVariants };

package/dist/ui/button.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+import { cn } from "../lib/utils.js";
+// The focus ring lives in the theme's base layer, not here — one ring for the
+// whole app, declared once.
+//
+// NOTE FOR THE NEXT IMPLEMENTER: DESIGN.md:377 specifies a white label on the
+// orange primary. That measures 2.69:1, a hard AA failure. `text-primary-
+// foreground` resolves to ink in light (5.53:1) and black in dark (5.34:1),
+// which is correct. DESIGN.md is wrong; do not "fix" this back.
+const buttonVariantsBase = cva(// active:brightness-95 is the press state for every variant: it darkens the
+// rendered fill whatever that fill is, so it needs no per-variant pressed
+// token. Deliberately outside `transition-colors` — a press should land on
+// the frame the pointer goes down, not ease in. The scale feedback gets its
+// own `transition-transform` for the same reason: sharing `transition-colors`
+// would delay the press-down scale behind the color easing.
+"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors active:brightness-95 motion-safe:transition-transform motion-safe:duration-100 motion-safe:active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            primary: "bg-primary text-primary-foreground hover:bg-primary-active",
+            secondary: "bg-secondary text-secondary-foreground hover:opacity-90",
+            outline: "border border-input bg-transparent hover:bg-muted",
+            ghost: "hover:bg-muted",
+            link: "text-primary-emphasis underline-offset-4 hover:underline",
+            destructive: "bg-destructive text-destructive-foreground hover:opacity-90"
+        },
+        size: {
+            sm: "h-8 px-3",
+            md: "h-9 px-4",
+            lg: "h-10 px-6",
+            icon: "size-9"
+        }
+    },
+    // link reads as inline text, not a control — it opts out of every size's
+    // fixed height/padding rather than getting a box of its own.
+    compoundVariants: [
+        {
+            variant: "link",
+            size: [
+                "sm",
+                "md",
+                "lg",
+                "icon"
+            ],
+            class: "h-auto px-0"
+        }
+    ],
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+// cva concatenates variant, size, and compound-variant classes as plain
+// strings with no dedup, so the compound override above only wins once
+// tailwind-merge resolves the h-*/px-* conflicts — hence the wrapper instead
+// of exporting buttonVariantsBase directly.
+function buttonVariants(props) {
+    return twMerge(buttonVariantsBase(props));
+}
+export function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return /*#__PURE__*/ _jsx(Comp, {
+        "data-slot": "button",
+        className: cn(buttonVariants({
+            variant,
+            size
+        }), className),
+        ...props
+    });
+}
+export { buttonVariants };

package/dist/ui/card.d.ts

@@ -0,0 +1,6 @@
+import type * as React from "react";
+export declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function CardTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
+export declare function CardDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+export declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;