@corbits/react-ui 0.1.0 → 0.3.0

package/dist/ui/avatar.d.ts

@@ -1,11 +1,23 @@
 import type { ReactNode } from "react";
 export type AvatarTone = "neutral" | "agent" | "agent2" | "agent3";
+export type AvatarShape = "circle" | "square";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "working" | "ready" | "idle";
 export type AvatarProps = {
     /** One or two characters shown when no image is provided. */
     readonly initials: string;
     readonly label: string;
     readonly tone?: AvatarTone;
-    readonly size?: "sm" | "md" | "lg";
+    readonly size?: AvatarSize;
+    /**
+     * `circle` is fully round; `square` rounds by `--avatar-radius` (defaults to
+     * `--radius`). Omitted keeps the unrounded default.
+     */
+    readonly shape?: AvatarShape;
+    /** Corner dot marking state; the label gains the state for assistive tech. */
+    readonly status?: AvatarStatus;
+    /** Orange arc circling the avatar. Static under reduced motion. */
+    readonly orbit?: boolean;
     /** Tenant monogram badge overlaid on the corner. */
     readonly tenantMonogram?: string;
     readonly className?: string;
@@ -15,23 +27,28 @@ export type AvatarProps = {
  * intentionally unsupported here: identity headers should not flash or
  * depend on third-party avatar hosts.
  */
-export declare function Avatar({ initials, label, tone, size, tenantMonogram, className, }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ initials, label, tone, size, shape, status, orbit, tenantMonogram, className, }: AvatarProps): import("react").JSX.Element;
 export type AvatarStackItem = {
     readonly id: string;
     readonly initials: string;
     readonly label: string;
     readonly tone?: AvatarTone;
+    readonly shape?: AvatarShape;
+    readonly status?: AvatarStatus;
+    readonly orbit?: boolean;
     readonly tenantMonogram?: string;
 };
 export type AvatarStackProps = {
     readonly items: readonly AvatarStackItem[];
     /** Cap visible avatars; remainder becomes a +N chip. */
     readonly max?: number;
-    readonly size?: "sm" | "md";
+    readonly size?: AvatarSize;
+    /** Default shape for every item; an item's own `shape` wins. */
+    readonly shape?: AvatarShape;
     readonly className?: string;
 };
 /**
  * Overlapping avatar stack for thread participants and channel members.
  */
-export declare function AvatarStack({ items, max, size, className }: AvatarStackProps): import("react").JSX.Element;
+export declare function AvatarStack({ items, max, size, shape, className, }: AvatarStackProps): import("react").JSX.Element;
 export type AvatarStackSlot = ReactNode;

package/dist/ui/avatar.js

@@ -1,73 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 const SIZE_CLASS = {
+    xs: "size-5 text-[8px]",
     sm: "size-6 text-[10px]",
     md: "size-8 text-xs",
-    lg: "size-10 text-sm"
+    lg: "size-10 text-sm",
+    xl: "size-14 text-lg",
+};
+const SHAPE_CLASS = {
+    circle: "rounded-full",
+    square: "rounded-[var(--avatar-radius,var(--radius))]",
+};
+const STATUS_CLASS = {
+    working: "bg-primary-emphasis",
+    ready: "bg-ok",
+    idle: "bg-muted-foreground",
+};
+const DOT_SIZE = {
+    xs: "size-1.5",
+    sm: "size-2",
+    md: "size-2.5",
+    lg: "size-3",
+    xl: "size-3.5",
 };
 const TONE_CLASS = {
-    neutral: "bg-muted text-muted-foreground",
+    neutral: "bg-muted text-muted-foreground dark:bg-[color-mix(in_srgb,var(--foreground)_14%,var(--muted))]",
     agent: "bg-primary text-primary-foreground",
     agent2: "bg-accent text-accent-foreground",
-    agent3: "bg-success text-success-foreground"
+    agent3: "bg-success text-success-foreground",
 };
 const BADGE_SIZE = {
+    xs: "size-2.5 text-[6px]",
     sm: "size-3 text-[7px]",
     md: "size-3.5 text-[8px]",
-    lg: "size-4 text-[9px]"
+    lg: "size-4 text-[9px]",
+    xl: "size-5 text-[10px]",
 };
 /**
  * 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)
-            })
-        ]
-    });
+ */
+export function Avatar({ initials, label, tone = "neutral", size = "md", shape, status, orbit = false, tenantMonogram, className, }) {
+    return (_jsxs("span", { role: "img", "aria-label": status === undefined ? label : `${label}, ${status}`, className: cn("relative inline-flex shrink-0 items-center justify-center font-bold uppercase", SIZE_CLASS[size], TONE_CLASS[tone], "dark:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--foreground)_14%,transparent)]", shape !== undefined && SHAPE_CLASS[shape], className), children: [orbit ? (_jsx("span", { "aria-hidden": true, className: "corbits-avatar-orbit", style: {
+                    borderRadius: shape === "circle"
+                        ? "9999px"
+                        : shape === "square"
+                            ? "calc(var(--avatar-radius, var(--radius)) + 4px)"
+                            : "0",
+                } })) : null, _jsx("span", { "aria-hidden": true, children: initials.slice(0, 2) }), tenantMonogram === undefined ? null : (_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) })), status === undefined ? null : (_jsx("span", { "aria-hidden": true, className: cn("absolute -right-0.5 -bottom-0.5 rounded-full ring-2 ring-background", DOT_SIZE[size], STATUS_CLASS[status], tenantMonogram !== undefined && "right-auto -left-0.5") }))] }));
 }
 /**
  * Overlapping avatar stack for thread participants and channel members.
- */ export function AvatarStack({ items, max = 4, size = "sm", className }) {
+ */
+export function AvatarStack({ items, max = 4, size = "sm", shape, 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
-                ]
-            })
-        ]
-    });
+    return (_jsxs("span", { className: cn("inline-flex items-center", className), role: "group", "aria-label": "Participants", children: [visible.map((item, index) => (_jsx(Avatar, { initials: item.initials, label: item.label, ...(item.tone === undefined ? {} : { tone: item.tone }), ...(item.shape === undefined && shape === undefined
+                    ? {}
+                    : { shape: item.shape ?? shape }), ...(item.status === undefined ? {} : { status: item.status }), ...(item.orbit === undefined ? {} : { orbit: item.orbit }), ...(item.tenantMonogram === undefined
+                    ? {}
+                    : { tenantMonogram: item.tenantMonogram }), size: size, className: cn("ring-1 ring-background", index > 0 && "-ml-1.5") }, item.id))), overflow <= 0 ? null : (_jsxs("span", { className: cn("inline-flex items-center justify-center bg-muted font-mono font-semibold text-muted-foreground ring-1 ring-background", shape !== undefined && SHAPE_CLASS[shape], SIZE_CLASS[size], visible.length > 0 && "-ml-1.5"), "aria-label": `${overflow} more`, children: ["+", overflow] }))] }));
 }

package/dist/ui/badge.js

@@ -16,20 +16,12 @@ const badgeVariants = cva("inline-flex items-center gap-1 rounded-sm border px-1
             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"
-        }
+            access: "border-primary-emphasis/40 bg-primary/10 text-primary-emphasis",
+        },
     },
-    defaultVariants: {
-        tone: "neutral"
-    }
+    defaultVariants: { tone: "neutral" },
 });
 export function Badge({ className, tone, ...props }) {
-    return /*#__PURE__*/ _jsx("span", {
-        "data-slot": "badge",
-        className: cn(badgeVariants({
-            tone
-        }), className),
-        ...props
-    });
+    return (_jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ tone }), className), ...props }));
 }
 export { badgeVariants };

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

@@ -35,4 +35,4 @@ export type BarChartProps = {
  * 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;
+export declare function BarChart({ title, description, data, valueLabel, format, className, }: BarChartProps): import("react").JSX.Element;

package/dist/ui/bar-chart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatCompact, niceTicks, scaleLinear } from "../lib/chart-geometry.js";
+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";
@@ -30,89 +30,37 @@ const RADIUS = 4;
  * 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));
+ */
+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}`,
+    return (_jsxs(ChartFrame, { title: title, ...(description === undefined ? {} : { description }), table: {
+            columns: ["Category", valueLabel],
+            rows: data.map((datum) => [datum.label, format(datum.value)]),
+        }, className: className, children: [_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)=>{
+                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
+                        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)=>{
+                        _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."
-                ]
-            })
-        ]
-    });
+                        return (_jsxs("g", { children: [_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 }), _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) }), _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));
+                    })] }), _jsxs("p", { className: cn("text-xs text-muted-foreground"), children: ["Axis to ", format(axisMax), ", from zero."] })] }));
 }

package/dist/ui/block-card.js

@@ -8,59 +8,21 @@ import { cn } from "../lib/utils.js";
  * 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
-            })
-        ]
-    });
+ */
+export function BlockCard({ title, children, className }) {
+    return (_jsxs("div", { "data-slot": "block-card", className: cn("overflow-hidden rounded-none border border-border bg-card", className), children: [_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: [_jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-none bg-current [animation:corbits-block-pulse_1.6s_ease_infinite]" }), _jsx("span", { "data-slot": "block-card-title", children: title })] }), _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"
+    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
-            })
-        ]
-    });
+ */
+export function RiskBadge({ level, label, note, className }) {
+    return (_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: [_jsx(TriangleAlert, { "aria-hidden": true }), _jsx("span", { children: label }), note === undefined ? null : (_jsx("span", { className: "font-medium text-muted-foreground", children: note }))] }));
 }

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

@@ -20,4 +20,4 @@ export type BootScreenProps = {
  * 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;
+export declare function BootScreen({ message, brand, footer, className, }: BootScreenProps): import("react").JSX.Element;

package/dist/ui/boot-screen.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/utils.js";
@@ -12,38 +13,8 @@ import { cn } from "../lib/utils.js";
  * 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 }) {
+ */
+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
-            })
-        ]
-    });
+    return (_jsxs("div", { role: "status", "aria-labelledby": messageId, className: cn("absolute inset-0 overflow-hidden bg-background text-foreground", className), children: [brand === undefined ? null : (_jsx("div", { className: "absolute top-6 left-7", children: brand })), _jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-4 p-6", children: [_jsx("span", { "aria-hidden": true, className: "h-0.5 w-24 overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: "block h-full w-1/3 rounded-full bg-primary [animation:corbits-boot-sweep_1.4s_ease-in-out_infinite]" }) }), _jsx("p", { id: messageId, className: "max-w-[32ch] text-center text-xs leading-relaxed text-muted-foreground", children: message })] }), footer === undefined ? null : (_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

@@ -34,4 +34,4 @@ export type BulkActionBarProps = {
  * 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;
+export declare function BulkActionBar({ count, onClear, children, label, className, }: BulkActionBarProps): import("react").JSX.Element | null;

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { cn } from "../lib/utils.js";
 /**
@@ -26,39 +27,19 @@ import { cn } from "../lib/utils.js";
  * `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;
+ */
+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();
+            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
-                })
-            ]
-        })
-    });
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [count, onClear]);
+    if (count === 0)
+        return null;
+    return (_jsx("div", { className: cn("fixed bottom-6 left-1/2 z-40 -translate-x-1/2", className), children: _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: [_jsxs("span", { "aria-live": "polite", className: "text-sm font-medium whitespace-nowrap", children: [count, " selected"] }), _jsx("div", { className: "flex items-center gap-2", children: children })] }) }));
 }

package/dist/ui/button.js

@@ -10,7 +10,8 @@ import { cn } from "../lib/utils.js";
 // 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
+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
@@ -24,33 +25,25 @@ const buttonVariantsBase = cva(// active:brightness-95 is the press state for ev
             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"
+            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"
-        }
+            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"
-        }
+            size: ["sm", "md", "lg", "icon"],
+            class: "h-auto px-0",
+        },
     ],
-    defaultVariants: {
-        variant: "primary",
-        size: "md"
-    }
+    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
@@ -61,13 +54,6 @@ function buttonVariants(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
-    });
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size }), className), ...props }));
 }
 export { buttonVariants };

package/dist/ui/card.js

@@ -1,37 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 export function Card({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "card",
-        className: cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "card", className: cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-6 text-card-foreground", className), ...props }));
 }
 export function CardHeader({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "card-header",
-        className: cn("flex flex-col gap-1", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "card-header", className: cn("flex flex-col gap-1", className), ...props }));
 }
 export function CardTitle({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("h3", {
-        "data-slot": "card-title",
-        className: cn("text-base leading-none font-semibold", className),
-        ...props
-    });
+    return (_jsx("h3", { "data-slot": "card-title", className: cn("text-base leading-none font-semibold", className), ...props }));
 }
 export function CardDescription({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("p", {
-        "data-slot": "card-description",
-        className: cn("text-sm text-muted-foreground", className),
-        ...props
-    });
+    return (_jsx("p", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
 }
 export function CardFooter({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "card-footer",
-        className: cn("flex items-center gap-2", className),
-        ...props
-    });
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center gap-2", className), ...props }));
 }