@corbits/react-ui 0.1.0

package/dist/ui/research-body.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { toSafeHref } from "../lib/url.js";
+import { cn } from "../lib/utils.js";
+/**
+ * Reads a brief (and its optional prose report) out of an artifact payload.
+ *
+ * Checks only `topic` and the two counts — the fields the header renders
+ * unconditionally and the ones whose absence would print "undefined sources".
+ * Everything below the header is already guarded by a presence check at its own
+ * render site, so validating it here would only reject briefs this component
+ * draws correctly.
+ */ export function parseResearchArtifact(json) {
+    let raw;
+    try {
+        raw = JSON.parse(json);
+    } catch  {
+        return null;
+    }
+    if (typeof raw !== "object" || raw === null) return null;
+    const candidate = raw;
+    if (typeof candidate.topic !== "string" || typeof candidate.sourceCount !== "number" || typeof candidate.itemCount !== "number") {
+        return null;
+    }
+    const body = typeof candidate.body === "string" ? candidate.body : undefined;
+    return body === undefined ? {
+        brief: candidate
+    } : {
+        brief: candidate,
+        body
+    };
+}
+/**
+ * A citation list can name the same URL twice — one item that clustered under
+ * two sources. Both the numbering the reader sees and any export they take must
+ * agree on the count, so dedupe once, here, at the point of render.
+ */ function dedupeByUrl(sources) {
+    const seen = new Set();
+    return sources.filter((source)=>{
+        if (seen.has(source.url)) return false;
+        seen.add(source.url);
+        return true;
+    });
+}
+/**
+ * A structured research brief: what was found, grouped, quoted and cited.
+ *
+ * The layout is an argument in order — headline stat line, the lead insight,
+ * then clusters, then evidence, then citations. A reader who stops after the
+ * first screen should still have the finding; a reader who wants to audit it
+ * can walk down to the sources without leaving the page.
+ *
+ * `body` is the prose report when the producer wrote one. Given both, the prose
+ * is the deliverable and the structured data becomes supporting evidence behind
+ * a `<details>` — collapsed rather than removed, because "show me your working"
+ * is the second question every reader of a generated report asks. `<details>` is
+ * a native disclosure: keyboard-operable and announced as expandable with no JS
+ * and no ARIA of our own.
+ *
+ * Prose is rendered as pre-wrapped text, not parsed as Markdown. The registry
+ * ships no Markdown dependency, and adding ~40kB of parser that a consumer then
+ * owns is not something a component should decide on their behalf. Wrap the
+ * `body` slot in your own renderer if you have one.
+ */ export function ResearchBody({ brief, body, className }) {
+    const report = body?.trim() ?? "";
+    const citations = dedupeByUrl(brief.citations ?? []);
+    const data = /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-6",
+        children: [
+            brief.clusters === undefined || brief.clusters.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-3",
+                "aria-label": "Themes",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold",
+                        children: "Themes"
+                    }),
+                    brief.clusters.map((cluster)=>/*#__PURE__*/ _jsxs("article", {
+                            className: "flex flex-col gap-2 rounded-lg border border-border p-4",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-start justify-between gap-3",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("h4", {
+                                            className: "text-sm leading-snug font-semibold",
+                                            children: cluster.title
+                                        }),
+                                        cluster.sources === undefined || cluster.sources.length === 0 ? null : /*#__PURE__*/ _jsx("span", {
+                                            className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
+                                            children: cluster.sources.join(", ")
+                                        })
+                                    ]
+                                }),
+                                cluster.summary === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                                    className: "text-xs leading-relaxed text-muted-foreground",
+                                    children: cluster.summary
+                                }),
+                                cluster.items === undefined || cluster.items.length === 0 ? null : /*#__PURE__*/ _jsx("ul", {
+                                    className: "flex flex-col gap-1.5",
+                                    children: cluster.items.map((item)=>{
+                                        const href = toSafeHref(item.url);
+                                        return /*#__PURE__*/ _jsx("li", {
+                                            className: "min-w-0",
+                                            children: href === undefined ? /*#__PURE__*/ _jsx("span", {
+                                                className: "text-xs leading-snug text-muted-foreground",
+                                                children: item.title ?? item.url
+                                            }) : /*#__PURE__*/ _jsx("a", {
+                                                href: href,
+                                                target: "_blank",
+                                                rel: "noopener noreferrer",
+                                                className: "text-xs leading-snug text-primary-emphasis underline-offset-2 hover:underline",
+                                                children: item.title ?? item.url
+                                            })
+                                        }, item.url);
+                                    })
+                                })
+                            ]
+                        }, cluster.id))
+                ]
+            }),
+            brief.quotes === undefined || brief.quotes.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-3",
+                "aria-label": "Quotes",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold",
+                        children: "Quotes"
+                    }),
+                    brief.quotes.map((quote)=>{
+                        const href = toSafeHref(quote.url);
+                        return(// <figure>/<figcaption> rather than a div and a span: a quotation
+                        // with an attribution is exactly what the element pair is for, and
+                        // it is what makes the attribution reachable from the quote for a
+                        // screen reader instead of being a loose line of text after it.
+                        /*#__PURE__*/ _jsxs("figure", {
+                            className: "border-l-2 border-border pl-4",
+                            children: [
+                                /*#__PURE__*/ _jsx("blockquote", {
+                                    className: "text-sm leading-relaxed italic",
+                                    children: quote.quote
+                                }),
+                                /*#__PURE__*/ _jsxs("figcaption", {
+                                    className: "mt-1 text-xs text-muted-foreground",
+                                    children: [
+                                        quote.author === undefined ? "" : `${quote.author} · `,
+                                        quote.source,
+                                        href === undefined ? null : /*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                " · ",
+                                                /*#__PURE__*/ _jsx("a", {
+                                                    href: href,
+                                                    target: "_blank",
+                                                    rel: "noopener noreferrer",
+                                                    className: "text-primary-emphasis underline-offset-2 hover:underline",
+                                                    children: "source"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }, `${quote.source}-${quote.quote.slice(0, 32)}`));
+                    })
+                ]
+            }),
+            citations.length === 0 ? null : /*#__PURE__*/ _jsxs("section", {
+                className: "flex flex-col gap-3",
+                "aria-label": "Citations",
+                children: [
+                    /*#__PURE__*/ _jsx("h3", {
+                        className: "text-sm font-semibold",
+                        children: "Citations"
+                    }),
+                    /*#__PURE__*/ _jsx("ol", {
+                        className: "flex flex-col gap-2",
+                        children: citations.map((citation, index)=>{
+                            const href = toSafeHref(citation.url);
+                            return /*#__PURE__*/ _jsxs("li", {
+                                className: "flex items-baseline gap-3 text-xs",
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        className: "w-6 shrink-0 text-right font-mono text-muted-foreground tabular-nums",
+                                        children: index + 1
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "min-w-0 leading-relaxed",
+                                        children: [
+                                            href === undefined ? /*#__PURE__*/ _jsx("span", {
+                                                className: "break-words",
+                                                children: citation.title ?? citation.url
+                                            }) : /*#__PURE__*/ _jsx("a", {
+                                                href: href,
+                                                target: "_blank",
+                                                rel: "noopener noreferrer",
+                                                className: "break-words text-primary-emphasis underline-offset-2 hover:underline",
+                                                children: citation.title ?? citation.url
+                                            }),
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                className: "text-muted-foreground",
+                                                children: [
+                                                    " · ",
+                                                    citation.source
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, citation.url);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn("flex flex-col gap-6", className),
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                className: "flex flex-col gap-1.5",
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: "text-base leading-snug font-semibold",
+                        children: brief.topic
+                    }),
+                    /*#__PURE__*/ _jsxs("p", {
+                        className: "font-mono text-xs text-muted-foreground tabular-nums",
+                        children: [
+                            brief.sourceCount.toLocaleString(),
+                            " sources · ",
+                            brief.itemCount.toLocaleString(),
+                            " items",
+                            brief.range === undefined ? "" : ` · ${brief.range}`
+                        ]
+                    }),
+                    brief.leadInsight === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                        className: "max-w-prose text-sm leading-relaxed",
+                        children: brief.leadInsight
+                    })
+                ]
+            }),
+            report === "" ? data : /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "max-w-prose text-sm leading-relaxed whitespace-pre-wrap",
+                        children: report
+                    }),
+                    /*#__PURE__*/ _jsxs("details", {
+                        className: "group border-t border-border pt-4",
+                        children: [
+                            /*#__PURE__*/ _jsxs("summary", {
+                                className: "cursor-pointer text-sm font-semibold text-muted-foreground hover:text-foreground",
+                                children: [
+                                    "Sources & data (",
+                                    brief.sourceCount.toLocaleString(),
+                                    " sources ·",
+                                    " ",
+                                    brief.itemCount.toLocaleString(),
+                                    " items)"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "mt-5",
+                                children: data
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/ui/rich-empty-state.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+export type RichEmptyStateAction = {
+    readonly label: string;
+    readonly onClick?: () => void;
+    /** Renders the action as a link instead of a button. */
+    readonly href?: string;
+    /** At most one `primary` per empty state — it is the one suggested way out. */
+    readonly variant?: "primary" | "secondary";
+};
+export type RichEmptyStateProps = {
+    readonly icon?: ReactNode;
+    /** What is not here, as a statement: "No skills installed yet". */
+    readonly title: string;
+    /** Why, and what this surface will look like once it is populated. */
+    readonly description: ReactNode;
+    /** Suggested next steps, rendered as buttons or links. */
+    readonly actions?: readonly RichEmptyStateAction[];
+    /** Extra controls (e.g. a menu) below the primary actions. */
+    readonly footer?: ReactNode;
+    /** Action button size. Defaults to `md`; `sm` matches a denser host chrome (e.g. a top bar). */
+    readonly actionSize?: ButtonProps["size"];
+    readonly className?: string;
+};
+/**
+ * The onboarding-grade empty state: icon, message, and suggested actions on a
+ * bordered surface of its own.
+ *
+ * It is not `EmptyState` — that is the quiet in-list "nothing matched" stack.
+ * This one is for a surface that is empty because the user has not started
+ * yet, where the empty state *is* the page and has to carry the way in. The
+ * icon stays decorative and hidden from assistive tech; the title carries the
+ * meaning.
+ */
+export declare function RichEmptyState({ icon, title, description, actions, footer, actionSize, className, }: RichEmptyStateProps): import("react").JSX.Element;

package/dist/ui/rich-empty-state.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+function ActionControl({ action, size }) {
+    const variant = action.variant === "primary" ? "primary" : "secondary";
+    if (action.href !== undefined) {
+        return /*#__PURE__*/ _jsx(Button, {
+            asChild: true,
+            variant: variant,
+            size: size,
+            children: /*#__PURE__*/ _jsx("a", {
+                href: action.href,
+                children: action.label
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Button, {
+        type: "button",
+        variant: variant,
+        size: size,
+        onClick: action.onClick,
+        children: action.label
+    });
+}
+/**
+ * The onboarding-grade empty state: icon, message, and suggested actions on a
+ * bordered surface of its own.
+ *
+ * It is not `EmptyState` — that is the quiet in-list "nothing matched" stack.
+ * This one is for a surface that is empty because the user has not started
+ * yet, where the empty state *is* the page and has to carry the way in. The
+ * icon stays decorative and hidden from assistive tech; the title carries the
+ * meaning.
+ */ export function RichEmptyState({ icon, title, description, actions, footer, actionSize = "md", className }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "rich-empty-state",
+        className: cn("flex flex-col items-center justify-center rounded-[12px] border border-border bg-card px-6 py-10 text-center", className),
+        children: [
+            icon === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                "aria-hidden": true,
+                className: "mb-4 grid size-12 place-items-center rounded-[12px] bg-muted text-muted-foreground",
+                children: icon
+            }),
+            /*#__PURE__*/ _jsx("h3", {
+                className: "text-[15px] font-bold tracking-[-0.01em]",
+                children: title
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: "mt-2 max-w-md text-[13px] leading-relaxed text-muted-foreground",
+                children: description
+            }),
+            actions !== undefined && actions.length > 0 ? /*#__PURE__*/ _jsx("div", {
+                className: "mt-5 flex flex-wrap items-center justify-center gap-2",
+                children: actions.map((action)=>/*#__PURE__*/ _jsx(ActionControl, {
+                        action: action,
+                        size: actionSize
+                    }, action.label))
+            }) : null,
+            footer === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                className: "mt-4",
+                children: footer
+            })
+        ]
+    });
+}

package/dist/ui/run-now-button.d.ts

@@ -0,0 +1,23 @@
+import { type ButtonProps } from "./button.js";
+export type RunNowButtonProps = Omit<ButtonProps, "onClick" | "children"> & {
+    /** Resolve when the work is accepted, reject to show nothing changed. */
+    readonly onRun: () => void | Promise<void>;
+    readonly label?: string;
+    readonly pendingLabel?: string;
+    readonly doneLabel?: string;
+    /** How long the confirmation stays up, in ms. */
+    readonly confirmMs?: number;
+};
+/**
+ * Fire something off now — send the brief, run the schedule ahead of time.
+ *
+ * The three states exist because "did that work?" is the only question the user
+ * has after pressing it, and a button that snaps back to its resting label
+ * answers it with nothing. The confirmation is announced through `aria-live`,
+ * not just shown, and the label carries it — a separate toast for a
+ * button-sized action is more machinery than the action deserves.
+ *
+ * A rejected promise returns the button to rest rather than claiming success.
+ * The caller surfaces the reason; this only refuses to lie about it.
+ */
+export declare function RunNowButton({ onRun, label, pendingLabel, doneLabel, confirmMs, disabled, ...props }: RunNowButtonProps): import("react").JSX.Element;

package/dist/ui/run-now-button.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "./button.js";
+/**
+ * Fire something off now — send the brief, run the schedule ahead of time.
+ *
+ * The three states exist because "did that work?" is the only question the user
+ * has after pressing it, and a button that snaps back to its resting label
+ * answers it with nothing. The confirmation is announced through `aria-live`,
+ * not just shown, and the label carries it — a separate toast for a
+ * button-sized action is more machinery than the action deserves.
+ *
+ * A rejected promise returns the button to rest rather than claiming success.
+ * The caller surfaces the reason; this only refuses to lie about it.
+ */ export function RunNowButton({ onRun, label = "Run now", pendingLabel = "Starting…", doneLabel = "Started", confirmMs = 2000, disabled, ...props }) {
+    const [state, setState] = useState("idle");
+    const timerRef = useRef(undefined);
+    // Clear on unmount: a timer that fires into an unmounted component is a
+    // React warning today and a leak in every version.
+    useEffect(()=>()=>window.clearTimeout(timerRef.current), []);
+    const run = async ()=>{
+        setState("pending");
+        try {
+            await onRun();
+            setState("done");
+            timerRef.current = window.setTimeout(()=>setState("idle"), confirmMs);
+        } catch  {
+            setState("idle");
+        }
+    };
+    return /*#__PURE__*/ _jsx(Button, {
+        ...props,
+        disabled: disabled || state !== "idle",
+        onClick: ()=>{
+            void run();
+        },
+        children: /*#__PURE__*/ _jsx("span", {
+            "aria-live": "polite",
+            children: state === "pending" ? pendingLabel : state === "done" ? doneLabel : label
+        })
+    });
+}

package/dist/ui/section.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export type SectionProps = {
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    /** Controls for this section: a filter, a view toggle, a primary action. */
+    readonly action?: ReactNode;
+    /** Item count shown beside the title. */
+    readonly count?: number;
+    /**
+     * Heading level. Defaults to `h2`. Set `h1` for the page's own header — this
+     * is deliberately one component and not a separate `PageHeader`, because the
+     * only real difference between the two is the document outline, and a second
+     * near-identical file is how two headers drift apart.
+     */
+    readonly as?: "h1" | "h2" | "h3";
+    readonly children: ReactNode;
+    readonly className?: string;
+};
+/** A titled block: heading, optional description and controls, then content. */
+export declare function Section({ title, description, action, count, as, children, className }: SectionProps): import("react").JSX.Element;

package/dist/ui/section.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+const TITLE_CLASS = {
+    h1: "text-xl font-semibold tracking-tight",
+    h2: "text-sm font-semibold",
+    h3: "text-xs font-semibold"
+};
+/** A titled block: heading, optional description and controls, then content. */ export function Section({ title, description, action, count, as = "h2", children, className }) {
+    const Heading = as;
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-slot": "section",
+        className: cn("flex flex-col gap-3", className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-4",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex min-w-0 flex-col gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex items-center gap-2",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Heading, {
+                                        className: TITLE_CLASS[as],
+                                        children: title
+                                    }),
+                                    count === undefined ? null : /*#__PURE__*/ _jsx("span", {
+                                        className: "shrink-0 rounded-sm bg-muted px-1.5 py-0.5 font-mono text-xs text-muted-foreground",
+                                        children: count
+                                    })
+                                ]
+                            }),
+                            description === undefined ? null : /*#__PURE__*/ _jsx("p", {
+                                className: "text-sm leading-snug text-muted-foreground",
+                                children: description
+                            })
+                        ]
+                    }),
+                    action === undefined ? null : /*#__PURE__*/ _jsx("div", {
+                        className: "flex shrink-0 items-center gap-2",
+                        children: action
+                    })
+                ]
+            }),
+            children
+        ]
+    });
+}

package/dist/ui/select.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function Select({ className, children, ...props }: React.ComponentProps<"select">): React.JSX.Element;

package/dist/ui/select.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+// Same border/focus-ring/disabled treatment as `Input`; the chevron is a
+// decorative overlay since a native `<select>` cannot be given its own icon.
+export function Select({ className, children, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "group relative",
+        children: [
+            /*#__PURE__*/ _jsx("select", {
+                "data-slot": "select",
+                className: cn("flex h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-card px-3 py-1 pr-8 text-sm shadow-xs transition-colors", "selection:bg-primary selection:text-primary-foreground", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50", className),
+                ...props,
+                children: children
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                "aria-hidden": true,
+                className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground group-has-[:disabled]:opacity-50"
+            })
+        ]
+    });
+}

package/dist/ui/selection-checkbox.d.ts

@@ -0,0 +1,42 @@
+export type SelectionCheckboxState = boolean | "indeterminate";
+export type SelectionCheckboxProps = {
+    /**
+     * `"indeterminate"` is for a header checkbox driven by `selectAll`: some
+     * but not all rows are selected. A per-row cell only ever passes a plain
+     * boolean.
+     */
+    readonly checked: SelectionCheckboxState;
+    /**
+     * Fires on both a plain click and a cmd/ctrl-click — `useListSelection`'s
+     * `toggle` takes the same `shiftKey` modifier this passes through, so a
+     * row wires this straight to it without branching on the click type
+     * itself.
+     */
+    readonly onToggle: (event: {
+        readonly shiftKey: boolean;
+    }) => void;
+    /** Row label for the default accessible name, e.g. `Select "Q3 rollup"`. */
+    readonly rowLabel: string;
+    /**
+     * Overrides the default `Select ${rowLabel}` accessible name outright —
+     * for a consumer localizing this published library's one hardcoded
+     * English string, or phrasing the row label differently than "Select ".
+     */
+    readonly ariaLabel?: string;
+    readonly id?: string;
+    readonly className?: string;
+};
+/**
+ * A row's selection control: hidden until the row is hovered or focused, and
+ * always visible on a touch device — there is no hover to reveal it on, so
+ * `(hover: none)` forces it on. The consumer's row needs a `group` class
+ * ancestor (e.g. `<TableRow className="group">`) for the hover reveal to
+ * find; nothing here declares that ancestor itself since the row, not this
+ * cell, owns that boundary.
+ *
+ * Built as a `role="checkbox"` button rather than `Checkbox`'s native input:
+ * a native input's own focus ring and box model fight the opacity-driven
+ * reveal below, where the control needs to participate in hover/focus state
+ * that belongs to an ancestor it does not render.
+ */
+export declare function SelectionCheckbox({ checked, onToggle, rowLabel, ariaLabel, id, className }: SelectionCheckboxProps): import("react").JSX.Element;

package/dist/ui/selection-checkbox.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Minus } from "lucide-react";
+import { useId } from "react";
+import { cn } from "../lib/utils.js";
+/**
+ * A row's selection control: hidden until the row is hovered or focused, and
+ * always visible on a touch device — there is no hover to reveal it on, so
+ * `(hover: none)` forces it on. The consumer's row needs a `group` class
+ * ancestor (e.g. `<TableRow className="group">`) for the hover reveal to
+ * find; nothing here declares that ancestor itself since the row, not this
+ * cell, owns that boundary.
+ *
+ * Built as a `role="checkbox"` button rather than `Checkbox`'s native input:
+ * a native input's own focus ring and box model fight the opacity-driven
+ * reveal below, where the control needs to participate in hover/focus state
+ * that belongs to an ancestor it does not render.
+ */ export function SelectionCheckbox({ checked, onToggle, rowLabel, ariaLabel, id, className }) {
+    const generatedId = useId();
+    const checkboxId = id ?? generatedId;
+    const isOn = checked !== false;
+    const isIndeterminate = checked === "indeterminate";
+    return /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        id: checkboxId,
+        role: "checkbox",
+        "aria-checked": isIndeterminate ? "mixed" : checked,
+        "aria-label": ariaLabel ?? `Select ${rowLabel}`,
+        onClick: (event)=>onToggle({
+                shiftKey: event.shiftKey
+            }),
+        onKeyDown: (event)=>{
+            if (event.key !== " " && event.key !== "Enter") return;
+            event.preventDefault();
+            onToggle({
+                shiftKey: event.shiftKey
+            });
+        },
+        className: cn("relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-card shadow-xs transition-colors", "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100", isOn && "border-primary bg-primary opacity-100", // The pop plays only on landing fully checked — an indeterminate
+        // header checkbox flips between indeterminate and checked/unchecked
+        // as rows come and go, and it should not re-pop on every one of
+        // those incidental transitions.
+        checked === true && "motion-safe:[animation:corbits-selection-pop_220ms_var(--ease-out)_both]", className),
+        children: [
+            /*#__PURE__*/ _jsx(Check, {
+                "aria-hidden": true,
+                className: cn("size-3 text-primary-foreground transition-transform", checked === true ? "scale-100" : "scale-0")
+            }),
+            /*#__PURE__*/ _jsx(Minus, {
+                "aria-hidden": true,
+                className: cn("absolute size-3 text-primary-foreground transition-transform", isIndeterminate ? "scale-100" : "scale-0")
+            })
+        ]
+    });
+}