@corbits/react-ui 0.1.0

package/dist/ui/settings-panel.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+export type SettingsPanelProps = {
+    readonly title: string;
+    readonly description?: ReactNode;
+    /**
+     * Present a save control. Omit for panels whose controls take effect on
+     * change — a Save button that saves nothing new is worse than none.
+     */
+    readonly onSave?: () => void;
+    /** Unsaved changes. Drives the save control and the status line. */
+    readonly dirty?: boolean;
+    readonly saving?: boolean;
+    readonly error?: string | null;
+    /** Set after a successful save so the panel can confirm it happened. */
+    readonly savedAt?: string | null;
+    readonly onReset?: () => void;
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+/**
+ * The frame every settings panel shares: a heading, the controls, and — only
+ * where it means something — a save control.
+ *
+ * There is one shell rather than one component per setting group. "Defaults",
+ * "Instructions", "Style" and "Preferences" differ in the fields inside them
+ * and in nothing else; a component per group would be nine files forwarding
+ * props to the same markup, and they would drift.
+ *
+ * Nothing here is agent-specific. The panel is titled by its host.
+ *
+ * The save control is disabled when there is nothing to save, and the panel
+ * says why in text as well: a greyed-out button with no explanation is the most
+ * common dead end in a settings screen.
+ */
+export declare function SettingsPanel({ title, description, onSave, dirty, saving, error, savedAt, onReset, children, className, }: SettingsPanelProps): import("react").JSX.Element;

package/dist/ui/settings-panel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+/**
+ * The frame every settings panel shares: a heading, the controls, and — only
+ * where it means something — a save control.
+ *
+ * There is one shell rather than one component per setting group. "Defaults",
+ * "Instructions", "Style" and "Preferences" differ in the fields inside them
+ * and in nothing else; a component per group would be nine files forwarding
+ * props to the same markup, and they would drift.
+ *
+ * Nothing here is agent-specific. The panel is titled by its host.
+ *
+ * The save control is disabled when there is nothing to save, and the panel
+ * says why in text as well: a greyed-out button with no explanation is the most
+ * common dead end in a settings screen.
+ */ export function SettingsPanel({ title, description, onSave, dirty = false, saving = false, error = null, savedAt = null, onReset, children, className }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-slot": "settings-panel",
+        "aria-label": title,
+        className: cn("flex flex-col gap-4 rounded-lg border border-border bg-card p-5 text-card-foreground", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold",
+                        children: title
+                    }),
+                    description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm leading-snug text-muted-foreground",
+                        children: description
+                    })
+                ]
+            }),
+            children,
+            error === null ? null : /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                className: "text-sm text-destructive",
+                children: error
+            }),
+            onSave === undefined ? null : /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-wrap items-center gap-2 border-t border-border pt-4",
+                children: [
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "sm",
+                        onClick: onSave,
+                        disabled: !dirty || saving,
+                        children: saving ? "Saving…" : "Save changes"
+                    }),
+                    onReset === undefined || !dirty ? null : /*#__PURE__*/ _jsx(Button, {
+                        variant: "ghost",
+                        size: "sm",
+                        onClick: onReset,
+                        disabled: saving,
+                        children: "Discard"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        "aria-live": "polite",
+                        className: "ml-auto text-xs text-muted-foreground",
+                        children: dirty ? "Unsaved changes" : savedAt === null ? "" : `Saved ${savedAt}`
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/shimmer-text.d.ts

@@ -0,0 +1,19 @@
+export type ShimmerTextProps = {
+    readonly children: string;
+    /** Omit when an ancestor already carries the live region. */
+    readonly role?: "status";
+    readonly className?: string;
+};
+/**
+ * A shimmer sweep over inline text: a brighter band slides through the
+ * words to signal "still going" without the words themselves changing. The
+ * sweep is a `background-clip: text` gradient animating its position, built
+ * from `--muted-foreground` and `--foreground` only — no new hex, so the
+ * contrast gate never sees it as a text/background pair.
+ *
+ * The theme's global reduced-motion rule collapses animation duration, but
+ * that would still leave `text-transparent` + `background-clip: text` with
+ * nothing to paint. Under `prefers-reduced-motion` and `forced-colors` this
+ * falls back to solid `text-muted-foreground` with no clip.
+ */
+export declare function ShimmerText({ children, role, className }: ShimmerTextProps): import("react").JSX.Element;

package/dist/ui/shimmer-text.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * A shimmer sweep over inline text: a brighter band slides through the
+ * words to signal "still going" without the words themselves changing. The
+ * sweep is a `background-clip: text` gradient animating its position, built
+ * from `--muted-foreground` and `--foreground` only — no new hex, so the
+ * contrast gate never sees it as a text/background pair.
+ *
+ * The theme's global reduced-motion rule collapses animation duration, but
+ * that would still leave `text-transparent` + `background-clip: text` with
+ * nothing to paint. Under `prefers-reduced-motion` and `forced-colors` this
+ * falls back to solid `text-muted-foreground` with no clip.
+ */ export function ShimmerText({ children, role, className }) {
+    return /*#__PURE__*/ _jsx("span", {
+        role: role,
+        className: cn("bg-clip-text text-transparent", "[background-image:linear-gradient(90deg,var(--muted-foreground)_40%,var(--foreground)_50%,var(--muted-foreground)_60%)]", "[background-size:200%_100%]", "[animation:corbits-shimmer-sweep_1.8s_linear_infinite]", "motion-reduce:animate-none motion-reduce:bg-none motion-reduce:bg-clip-border motion-reduce:text-muted-foreground", "forced-colors:animate-none forced-colors:bg-none forced-colors:bg-clip-border forced-colors:text-muted-foreground", className),
+        children: children
+    });
+}

package/dist/ui/sidebar-item-row.d.ts

@@ -0,0 +1,40 @@
+import type * as React from "react";
+export type SidebarItemRowProps = {
+    readonly name: React.ReactNode;
+    /** An icon, an avatar, a status dot — whatever leads the row. */
+    readonly leading?: React.ReactNode;
+    /** A badge, a status dot, a timestamp — right-aligned, always visible. */
+    readonly meta?: React.ReactNode;
+    /** A menu trigger or icon button, revealed on hover/focus only. */
+    readonly action?: React.ReactNode;
+    readonly unread?: boolean;
+    readonly selected?: boolean;
+    /**
+     * Set right before removing the row from its list, and keep it mounted for
+     * one more frame (~150ms) so the leave transition gets to play. List
+     * membership is the consumer's data — nothing here manages it for you.
+     */
+    readonly leaving?: boolean;
+    readonly onSelect?: () => void;
+    readonly className?: string;
+};
+/**
+ * The live-updating row: a channel, a thread, a running workflow. Motion is a
+ * CSS transition on `transform`/`opacity` driven by a `data-state` of
+ * `entering` | `visible` | `leaving`, not an enter/exit keyframe pair — a
+ * keyframe animation restarts from its `from` value every time it is
+ * retriggered, so a row that gets un-marked `leaving` mid-exit (the live-
+ * activity list does this) would snap instead of reversing. A transition has
+ * no such restart: toggling the state class mid-flight just continues from
+ * wherever the interrupted transition already got to.
+ *
+ * `unread` is weight only: the name goes semibold. `meta` carries whatever
+ * the caller wants rendered — a `Badge`, a `StatusDot`, a timestamp — with no
+ * shape enforced by this component; callers who need the unread state to
+ * survive colour-blindness and grayscale screenshots should pass a `meta`
+ * that is not colour-only (a `StatusDot`, a count), not rely on this
+ * component to supply one.
+ *
+ * Not `ui/sidebar`'s `SidebarItem` — that's the single-column family's row.
+ */
+export declare function SidebarItemRow({ name, leading, meta, action, unread, selected, leaving, onSelect, className, }: SidebarItemRowProps): React.JSX.Element;

package/dist/ui/sidebar-item-row.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * The live-updating row: a channel, a thread, a running workflow. Motion is a
+ * CSS transition on `transform`/`opacity` driven by a `data-state` of
+ * `entering` | `visible` | `leaving`, not an enter/exit keyframe pair — a
+ * keyframe animation restarts from its `from` value every time it is
+ * retriggered, so a row that gets un-marked `leaving` mid-exit (the live-
+ * activity list does this) would snap instead of reversing. A transition has
+ * no such restart: toggling the state class mid-flight just continues from
+ * wherever the interrupted transition already got to.
+ *
+ * `unread` is weight only: the name goes semibold. `meta` carries whatever
+ * the caller wants rendered — a `Badge`, a `StatusDot`, a timestamp — with no
+ * shape enforced by this component; callers who need the unread state to
+ * survive colour-blindness and grayscale screenshots should pass a `meta`
+ * that is not colour-only (a `StatusDot`, a count), not rely on this
+ * component to supply one.
+ *
+ * Not `ui/sidebar`'s `SidebarItem` — that's the single-column family's row.
+ */ export function SidebarItemRow({ name, leading, meta, action, unread = false, selected = false, leaving = false, onSelect, className }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(()=>{
+        const raf = requestAnimationFrame(()=>setMounted(true));
+        return ()=>cancelAnimationFrame(raf);
+    }, []);
+    const state = !mounted ? "entering" : leaving ? "leaving" : "visible";
+    return /*#__PURE__*/ _jsx("li", {
+        "data-slot": "sidebar-item-row",
+        "data-state": state,
+        className: cn("group/row transition-[transform,opacity] duration-150 ease-out", state === "entering" && "-translate-y-1 opacity-0", state === "leaving" && "pointer-events-none translate-y-1 opacity-0", state === "visible" && "translate-y-0 opacity-100", className),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: cn("flex w-full items-center gap-2 rounded-[var(--sidebar-row-radius)] pr-1.5 text-sm transition-colors", selected ? "bg-[var(--sidebar-row-selected-bg)] text-primary-emphasis" : "text-foreground hover:bg-muted"),
+            children: [
+                /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
+                    "aria-current": selected ? "true" : undefined,
+                    onClick: onSelect,
+                    className: "flex min-w-0 flex-1 items-center gap-2 rounded-[var(--sidebar-row-radius)] py-1.5 pl-2 text-left active:brightness-95",
+                    children: [
+                        leading === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                            className: "grid size-5 shrink-0 place-items-center [&_svg]:size-4",
+                            "aria-hidden": true,
+                            children: leading
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: cn("min-w-0 flex-1 truncate", unread && "font-semibold"),
+                            children: name
+                        }),
+                        meta === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                            className: "flex shrink-0 items-center gap-1.5",
+                            children: meta
+                        })
+                    ]
+                }),
+                action === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                    className: "shrink-0 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100",
+                    children: action
+                })
+            ]
+        })
+    });
+}

package/dist/ui/sidebar-panel.d.ts

@@ -0,0 +1,25 @@
+import type * as React from "react";
+/**
+ * The second column's shell. Composable parts, like `ui/sidebar` — a consumer
+ * assembles `SidebarPanelHeader`, `SidebarPanelPins`, `SidebarPanelBody` and
+ * `SidebarPanelFooter` in whatever combination the active page calls for, and
+ * the root only supplies the width, the border and the flex column.
+ */
+export declare function SidebarPanel({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export type SidebarPanelHeaderProps = React.ComponentProps<"div"> & {
+    readonly title: React.ReactNode;
+    /** A single trailing control — "New channel", a filter, a settings icon. */
+    readonly action?: React.ReactNode;
+};
+/** Not `ui/sidebar`'s `SidebarHeader` — that's the single-column family's header slot. */
+export declare function SidebarPanelHeader({ title, action, className, ...props }: SidebarPanelHeaderProps): React.JSX.Element;
+/**
+ * Global pins live above the per-page sections and never scroll away with
+ * them — that is the entire reason this is a separate slot rather than just
+ * the first `SidebarPanelSection` inside the body.
+ */
+export declare function SidebarPanelPins({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** The scrollable region: sections go here. Everything above and below it is pinned. */
+export declare function SidebarPanelBody({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Not `ui/sidebar`'s `SidebarFooter` — that's the single-column family's footer slot. */
+export declare function SidebarPanelFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/sidebar-panel.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * The second column's shell. Composable parts, like `ui/sidebar` — a consumer
+ * assembles `SidebarPanelHeader`, `SidebarPanelPins`, `SidebarPanelBody` and
+ * `SidebarPanelFooter` in whatever combination the active page calls for, and
+ * the root only supplies the width, the border and the flex column.
+ */ export function SidebarPanel({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-panel",
+        className: cn("flex h-full w-72 shrink-0 flex-col border-r border-border bg-card text-card-foreground", className),
+        ...props
+    });
+}
+/** Not `ui/sidebar`'s `SidebarHeader` — that's the single-column family's header slot. */ export function SidebarPanelHeader({ title, action, className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "sidebar-panel-header",
+        className: cn("flex min-h-14 shrink-0 items-center justify-between gap-2 border-b border-border px-3", className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                className: "min-w-0 truncate text-sm font-semibold",
+                children: title
+            }),
+            action === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "shrink-0",
+                children: action
+            })
+        ]
+    });
+}
+/**
+ * Global pins live above the per-page sections and never scroll away with
+ * them — that is the entire reason this is a separate slot rather than just
+ * the first `SidebarPanelSection` inside the body.
+ */ export function SidebarPanelPins({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-panel-pins",
+        className: cn("shrink-0 border-b border-border px-2 py-2", className),
+        ...props
+    });
+}
+/** The scrollable region: sections go here. Everything above and below it is pinned. */ export function SidebarPanelBody({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-panel-body",
+        className: cn("min-h-0 flex-1 overflow-y-auto py-1", className),
+        ...props
+    });
+}
+/** Not `ui/sidebar`'s `SidebarFooter` — that's the single-column family's footer slot. */ export function SidebarPanelFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-panel-footer",
+        className: cn("shrink-0 border-t border-border p-2", className),
+        ...props
+    });
+}

package/dist/ui/sidebar.d.ts

@@ -0,0 +1,46 @@
+import type * as React from "react";
+/**
+ * The app rail. Composable parts rather than one `items={...}` component: a
+ * consumer owns this file after `shadcn add`, and nav shape (sections, counts,
+ * a tenant switcher, an environment badge) differs per app. Every part is a
+ * slot — `SidebarHeader` is where an environment badge goes, `SidebarFooter` is
+ * where a tenant selector goes — and nothing here fetches anything.
+ *
+ * Collapse is a prop, not internal state or a context: the host already owns
+ * that bit (it persists it, and the top bar's menu button toggles it). The root
+ * publishes it as `data-collapsed` and the children style off
+ * `group-data-[collapsed=true]/sidebar:` — so a new part added later collapses
+ * correctly with no wiring.
+ *
+ * Collapsing hides labels with `sr-only`, never `hidden`: the icon-only rail
+ * must keep its accessible names or it is unusable with a screen reader.
+ */
+export declare function Sidebar({ collapsed, className, ...props }: React.ComponentProps<"aside"> & {
+    collapsed?: boolean;
+}): React.JSX.Element;
+export declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** One nav section. `label` is required — an unlabelled group is invisible to AT. */
+export declare function SidebarSection({ label, className, children, ...props }: React.ComponentProps<"nav"> & {
+    label: string;
+}): React.JSX.Element;
+export type SidebarItemProps = React.ComponentProps<"a"> & {
+    /** Renders the current route. Sets `aria-current="page"`, not just a colour. */
+    active?: boolean;
+    /** Leading icon. Kept visible when collapsed — it is the whole control then. */
+    icon?: React.ReactNode;
+    /** Unread / pending count. Part of the accessible name, so it survives collapse. */
+    count?: number;
+    /** Renders the child element instead of an `<a>` — for a router's Link. */
+    asChild?: boolean;
+};
+export declare function SidebarItem({ active, icon, count, asChild, className, children, ...props }: SidebarItemProps): React.JSX.Element;
+/**
+ * Collapse control. `aria-expanded` describes the rail it controls, so pass the
+ * rail's id in `aria-controls` when the button lives outside the `<aside>`.
+ */
+export declare function SidebarCollapseToggle({ collapsed, onToggle, className, ...props }: Omit<React.ComponentProps<"button">, "onToggle"> & {
+    collapsed: boolean;
+    onToggle: () => void;
+}): React.JSX.Element;

package/dist/ui/sidebar.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { cn } from "../lib/utils.js";
+/**
+ * The app rail. Composable parts rather than one `items={...}` component: a
+ * consumer owns this file after `shadcn add`, and nav shape (sections, counts,
+ * a tenant switcher, an environment badge) differs per app. Every part is a
+ * slot — `SidebarHeader` is where an environment badge goes, `SidebarFooter` is
+ * where a tenant selector goes — and nothing here fetches anything.
+ *
+ * Collapse is a prop, not internal state or a context: the host already owns
+ * that bit (it persists it, and the top bar's menu button toggles it). The root
+ * publishes it as `data-collapsed` and the children style off
+ * `group-data-[collapsed=true]/sidebar:` — so a new part added later collapses
+ * correctly with no wiring.
+ *
+ * Collapsing hides labels with `sr-only`, never `hidden`: the icon-only rail
+ * must keep its accessible names or it is unusable with a screen reader.
+ */ export function Sidebar({ collapsed = false, className, ...props }) {
+    return /*#__PURE__*/ _jsx("aside", {
+        "data-slot": "sidebar",
+        "data-collapsed": collapsed,
+        className: cn("group/sidebar flex h-full shrink-0 flex-col border-r border-border bg-card text-card-foreground", "w-60 transition-[width] duration-200 data-[collapsed=true]:w-14", className),
+        ...props
+    });
+}
+export function SidebarHeader({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-header",
+        className: cn("flex min-h-14 items-center gap-2 border-b border-border px-3", className),
+        ...props
+    });
+}
+export function SidebarContent({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-content",
+        className: cn("min-h-0 flex-1 overflow-y-auto py-2", className),
+        ...props
+    });
+}
+export function SidebarFooter({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "sidebar-footer",
+        className: cn("border-t border-border p-2", className),
+        ...props
+    });
+}
+/** One nav section. `label` is required — an unlabelled group is invisible to AT. */ export function SidebarSection({ label, className, children, ...props }) {
+    return /*#__PURE__*/ _jsxs("nav", {
+        "data-slot": "sidebar-section",
+        "aria-label": label,
+        className: cn("px-2 py-1", className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                className: "px-2 py-1 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase group-data-[collapsed=true]/sidebar:sr-only",
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: "flex flex-col gap-0.5",
+                children: children
+            })
+        ]
+    });
+}
+export function SidebarItem({ active = false, icon, count, asChild = false, className, children, ...props }) {
+    const Comp = asChild ? Slot : "a";
+    return /*#__PURE__*/ _jsx("li", {
+        children: /*#__PURE__*/ _jsxs(Comp, {
+            "data-slot": "sidebar-item",
+            "aria-current": active ? "page" : undefined,
+            className: cn("flex items-center gap-2.5 rounded-md px-2 py-2 text-sm transition-colors", "group-data-[collapsed=true]/sidebar:justify-center", active ? "bg-primary/10 font-medium text-primary-emphasis" : "text-muted-foreground hover:bg-muted hover:text-foreground", className),
+            ...props,
+            children: [
+                icon === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                    className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4",
+                    "aria-hidden": true,
+                    children: icon
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:sr-only",
+                    children: children
+                }),
+                count === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                    className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground group-data-[collapsed=true]/sidebar:sr-only",
+                    children: count
+                })
+            ]
+        })
+    });
+}
+/**
+ * Collapse control. `aria-expanded` describes the rail it controls, so pass the
+ * rail's id in `aria-controls` when the button lives outside the `<aside>`.
+ */ export function SidebarCollapseToggle({ collapsed, onToggle, className, ...props }) {
+    const Icon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    return /*#__PURE__*/ _jsx("button", {
+        type: "button",
+        "data-slot": "sidebar-collapse-toggle",
+        "aria-expanded": !collapsed,
+        "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+        onClick: onToggle,
+        className: cn("grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(Icon, {
+            className: "size-4",
+            "aria-hidden": true
+        })
+    });
+}

package/dist/ui/skeleton.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+/**
+ * A placeholder for content that has not arrived.
+ *
+ * Sizing and shape come from the caller's className — a skeleton is a shape,
+ * and a `variant="text" | "avatar"` prop would only be a lookup table for
+ * classes the caller can write directly.
+ *
+ * `aria-hidden`, always. A screen reader should hear "Loading…" once from a
+ * sibling `role="status"`, not the geometry of six grey boxes. If you render
+ * these, render a status line with them.
+ */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/ui/skeleton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+/**
+ * A placeholder for content that has not arrived.
+ *
+ * Sizing and shape come from the caller's className — a skeleton is a shape,
+ * and a `variant="text" | "avatar"` prop would only be a lookup table for
+ * classes the caller can write directly.
+ *
+ * `aria-hidden`, always. A screen reader should hear "Loading…" once from a
+ * sibling `role="status"`, not the geometry of six grey boxes. If you render
+ * these, render a status line with them.
+ */ export function Skeleton({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "skeleton",
+        "aria-hidden": true,
+        className: cn("animate-pulse rounded-md bg-muted", className),
+        ...props
+    });
+}

package/dist/ui/sortable-table.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+export type SortDirection = "asc" | "desc";
+export type SortableColumn<T> = {
+    /** Stable id — the React key and the sort key. */
+    readonly key: string;
+    readonly header: string;
+    readonly cell: (row: T) => ReactNode;
+    /**
+     * Makes the column sortable by returning its comparable value. Omit for
+     * presentation-only columns such as a row-actions cell.
+     */
+    readonly sortValue?: (row: T) => string | number;
+    readonly align?: "left" | "right";
+    readonly className?: string;
+};
+export type SortableTableProps<T> = {
+    readonly caption: string;
+    readonly rows: readonly T[];
+    readonly columns: readonly SortableColumn<T>[];
+    readonly rowKey: (row: T) => string;
+    readonly initialSort?: {
+        readonly key: string;
+        readonly direction: SortDirection;
+    };
+    readonly empty?: ReactNode;
+    readonly className?: string;
+};
+/**
+ * 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 declare function SortableTable<T>({ caption, rows, columns, rowKey, initialSort, empty, className, }: SortableTableProps<T>): import("react").JSX.Element;