@hackcove/ui-react 0.0.0-stage → 0.8.1

package/dist/Button.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+const SHAPE = "inline-flex items-center justify-center rounded-lg border font-medium transition";
+// Size sets the padding and the text. The link variant has no box, so it takes the text size only.
+const SIZE = {
+    sm: { box: "gap-1.5 px-2.5 py-1", text: "text-xs" },
+    md: { box: "gap-2 px-4 py-2", text: "text-sm" },
+    lg: { box: "gap-2 px-5 py-2.5", text: "text-base" },
+};
+// A plain `disabled` washes out and ignores the pointer. Blocked and busy buttons are disabled too,
+// but they keep pointer events (the title shows, the cursor says why) and do not take this.
+const DISABLED_PLAIN = "disabled:pointer-events-none disabled:opacity-50";
+const LINK = "underline-offset-2";
+const TONE = {
+    default: {
+        primary: {
+            color: "border-violet-600 bg-violet-600 text-violet-50",
+            hover: "hover:bg-violet-700",
+        },
+        outline: { color: "border-violet-600 text-violet-600", hover: "hover:bg-violet-50" },
+        ghost: { color: "border-transparent text-slate-600", hover: "hover:bg-slate-100" },
+        link: {
+            color: `border-transparent text-violet-600 ${LINK}`,
+            hover: "hover:text-violet-700 hover:underline",
+        },
+    },
+    positive: {
+        primary: {
+            color: "border-emerald-600 bg-emerald-600 text-emerald-50",
+            hover: "hover:bg-emerald-700",
+        },
+        outline: { color: "border-emerald-200 text-emerald-700", hover: "hover:bg-emerald-50" },
+        ghost: { color: "border-transparent text-emerald-700", hover: "hover:bg-emerald-50" },
+        link: { color: `border-transparent text-emerald-700 ${LINK}`, hover: "hover:underline" },
+    },
+    danger: {
+        primary: { color: "border-red-600 bg-red-600 text-red-50", hover: "hover:bg-red-700" },
+        outline: { color: "border-red-200 text-red-700", hover: "hover:bg-red-50" },
+        ghost: { color: "border-transparent text-red-700", hover: "hover:bg-red-50" },
+        link: { color: `border-transparent text-red-700 ${LINK}`, hover: "hover:underline" },
+    },
+};
+// The add row: Card dashed's outline and muted text, lit with the accent on hover. One look, so
+// `tone` does not apply to it.
+const DASHED = {
+    color: "border-slate-300 text-slate-500",
+    hover: "hover:border-violet-400 hover:text-violet-700",
+};
+// An outline or ghost Button with `pressed` set is a toggle, such as a filter chip: off is neutral
+// (the surface, a hairline, muted text, lit with the accent on hover), on is the tone's primary
+// fill, so the selected one stands out in every theme. A primary is already filled, and link and
+// dashed have no selected state; with `pressed` left out, outline and ghost keep their own look.
+const TOGGLE_OFF = {
+    color: "border-slate-200 bg-white text-slate-600",
+    hover: "hover:border-violet-400",
+};
+function lookOf(variant, tone, pressed) {
+    if (variant === "dashed")
+        return DASHED;
+    if (pressed !== undefined && (variant === "outline" || variant === "ghost")) {
+        return pressed ? TONE[tone].primary : TOGGLE_OFF;
+    }
+    return TONE[tone][variant];
+}
+// Blocked replaces the variant's colour and hover rather than overriding them, so no `!` is needed.
+const BLOCKED = "cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400";
+const BLOCKED_DASHED = "cursor-not-allowed border-slate-200 text-slate-400";
+const BLOCKED_LINK = "cursor-not-allowed border-transparent text-slate-400";
+const BLOCKED_BY_VARIANT = {
+    link: BLOCKED_LINK,
+    dashed: BLOCKED_DASHED,
+};
+const BUSY = "cursor-progress opacity-85";
+function shape(variant, size) {
+    const { box, text } = SIZE[size];
+    return cx(SHAPE, variant !== "link" && box, variant === "link" && "gap-1.5", variant === "dashed" && "w-full border-dashed", text, focusRing);
+}
+/** The classes of an idle Button: what `href` draws, and what the tests compare against. */
+export function buttonClass(variant = "primary", { size = "md", tone = "default" } = {}) {
+    return idleClass(variant, size, tone);
+}
+function idleClass(variant, size, tone, pressed) {
+    const look = lookOf(variant, tone, pressed);
+    return cx(shape(variant, size), DISABLED_PLAIN, look.color, look.hover);
+}
+function isLink(props) {
+    return props.href !== undefined || props.render !== undefined;
+}
+/** Busy wins over blocked. */
+function stateOf(busy, disabledReason) {
+    if (busy)
+        return "busy";
+    return disabledReason === undefined ? "idle" : "blocked";
+}
+/** The classes of a Button in a given state: blocked swaps the colour out, busy keeps it. */
+function stateClass({ variant = "primary", size = "md", tone = "default" }, state, pressed) {
+    if (state === "blocked") {
+        return cx(shape(variant, size), BLOCKED_BY_VARIANT[variant] ?? BLOCKED);
+    }
+    if (state === "busy")
+        return cx(shape(variant, size), lookOf(variant, tone, pressed).color, BUSY);
+    return idleClass(variant, size, tone, pressed);
+}
+/**
+ * A button in the primary, outline, ghost, link or dashed style (the link has no box: text with an
+ * underline on hover, for an in-line action; `dashed` is the full-width "add" row, a dashed
+ * outline with muted text that fills its container, with an optional leading icon in the
+ * children). `size="sm"` is compact and `size="lg"` larger; `tone="positive"` is green and `tone="danger"` is red;
+ * `pressed` makes it a toggle: neutral when off, the tone's fill when on.
+ * Defaults to `type="button"`. `disabledReason` and `busy` are the two disabled states that say
+ * more than a plain `disabled`, which keeps its half-opacity look. `href` makes it a link instead,
+ * with the same look (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/quotes" {...p} />}`; `external` opens a new tab).
+ */
+export function Button(props) {
+    return isLink(props) ? _jsx(LinkButton, { ...props }) : _jsx(PlainButton, { ...props });
+}
+function LinkButton({ variant = "primary", size = "md", tone = "default", href, render, external = false, children, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        external,
+        className: buttonClass(variant, { size, tone }),
+        children,
+    });
+}
+function PlainButton({ variant, size, tone, disabledReason, busy = false, busyLabel, pressed, children, title, disabled, ...rest }) {
+    const state = stateOf(busy, disabledReason);
+    const blocked = state === "blocked";
+    return (_jsx("button", { type: "button", className: stateClass({ variant, size, tone }, state, pressed), disabled: disabled || busy || blocked, "aria-busy": busy || undefined, "aria-pressed": pressed, title: blocked ? disabledReason : title, ...rest, children: busy && busyLabel ? busyLabel : children }));
+}

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/**
+ * A wrapping row of buttons with one optional item pushed to the far end (a Back link, say). On a
+ * narrow viewport the row wraps and `end` stays at the end of the last line. `label` makes it a
+ * named `role="group"`. Directly in a `Card` footer it spans the footer, so `end` reaches the far
+ * edge.
+ */
+export declare function ButtonGroup({ children, end, label, ...rest }: {
+    children: ReactNode;
+    /** One item, pushed to the end of the row. */
+    end?: ReactNode;
+    /** The accessible name of the group: sets `role="group"` and `aria-label`. */
+    label?: string;
+} & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "children">>): ReactElement;

package/dist/ButtonGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A wrapping row of buttons with one optional item pushed to the far end (a Back link, say). On a
+ * narrow viewport the row wraps and `end` stays at the end of the last line. `label` makes it a
+ * named `role="group"`. Directly in a `Card` footer it spans the footer, so `end` reaches the far
+ * edge.
+ */
+export function ButtonGroup({ children, end, label, ...rest }) {
+    return (_jsxs("div", { ...rest, ...(label === undefined ? {} : { role: "group", "aria-label": label }), "data-button-group": "", className: "flex flex-wrap items-center gap-2", children: [children, end ? _jsx("div", { className: "ml-auto", children: end }) : null] }));
+}

package/dist/Callout.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/** The colour family of a callout. */
+export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
+/** The soft fill and border of each tone; a toned `Card` uses the same. */
+export declare const TONE_SURFACE: Record<CalloutTone, string>;
+/**
+ * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
+ * top of a `Card flush` and nowhere else: a padded card or a padded `FullBleedLayout` column
+ * would inset it. In a page's column the notice is a plain Callout, first in the column's `Stack`. With `actions` the box is `relative`, so a `TextLink
+ * stretch` there makes the whole callout its click target, like a link in a table row.
+ */
+export declare function Callout({ tone, title, actions, banner, children, ...rest }: {
+    /** Defaults to "info". */
+    tone?: CalloutTone;
+    /** A bold line above the body. */
+    title?: ReactNode;
+    /** A flat strip: `border-b` only and no radius, for the top of a `Card flush` only. */
+    banner?: boolean;
+    /** A button or link at the end of the row, beside the title and body. */
+    actions?: ReactNode;
+    children: ReactNode;
+} & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "title">>): ReactElement;

package/dist/Callout.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The soft fill and border of each tone; a toned `Card` uses the same. */
+export const TONE_SURFACE = {
+    neutral: "border-slate-200 bg-slate-50",
+    info: "border-blue-200 bg-blue-50",
+    positive: "border-emerald-200 bg-emerald-50",
+    warn: "border-amber-200 bg-amber-50",
+    danger: "border-red-200 bg-red-50",
+};
+const TONE_TEXT = {
+    neutral: "text-slate-700",
+    info: "text-blue-800",
+    positive: "text-emerald-800",
+    warn: "text-amber-800",
+    danger: "text-red-800",
+};
+/**
+ * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
+ * top of a `Card flush` and nowhere else: a padded card or a padded `FullBleedLayout` column
+ * would inset it. In a page's column the notice is a plain Callout, first in the column's `Stack`. With `actions` the box is `relative`, so a `TextLink
+ * stretch` there makes the whole callout its click target, like a link in a table row.
+ */
+export function Callout({ tone = "info", title, actions, banner = false, children, ...rest }) {
+    const content = title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children);
+    return (_jsx("div", { className: cx(Boolean(actions) && "relative", banner ? "border-b px-5 py-3 text-sm" : "rounded-xl border p-4 text-sm", TONE_SURFACE[tone], TONE_TEXT[tone]), ...rest, children: actions ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-w-0", children: content }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })) : (content) }));
+}

package/dist/Card.d.ts

@@ -0,0 +1,95 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from "react";
+import { type CalloutTone } from "./Callout.js";
+import { type LinkRender } from "./link.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+type CardBase = {
+    /** The card's heading, a small uppercase `h2`; on a `section` or `article` it names the card. */
+    title?: string;
+    /** A small number beside the title (how many rows the card holds). Needs a `title`. */
+    count?: number;
+    /** A `Pill` (or any node) directly beside the title and count, not at the far end like `actions`. Needs a `title`. */
+    status?: ReactNode;
+    /** Put the title, count and actions in a tinted strip above the body, edge to edge. */
+    bar?: boolean;
+    /** No padding and `overflow-hidden`: the body (a table, a list) fills the card. */
+    flush?: boolean;
+    /** An empty-state shell: dashed outline, no shadow, no fill, centred muted text. `"filled"` puts it on a surface fill with more padding. */
+    dashed?: boolean | "filled";
+    /** A soft fill and border in the Callout's tones, for a data panel with a status. Ignored with `bar` and `dashed`. */
+    tone?: CalloutTone;
+    /** A `Pill` (or any small node) pinned in the top-right corner, over the content and inside the radius, with no change to the layout. On a card that is a link it is part of the link's name, and a link or button in it is clickable on its own. */
+    badge?: ReactNode;
+    /** The warn tone's strong border in place of the card's own, for the one card in a set that needs a look (a run that differed). It keeps the card's fill. Ignored with `dashed`. */
+    attention?: boolean;
+    /**
+     * `sm` is dense padding on the body, heading and bar, `lg` one step roomier than `md`; a
+     * `dashed` shell keeps its own.
+     * @default md
+     */
+    size?: Size;
+    children: ReactNode;
+};
+type CardPanelProps = CardBase & {
+    /** Buttons or links at the end of the header: in the strip with `bar`, else beside the title. */
+    actions?: ReactNode;
+    /** A tinted strip across the bottom of the card, under a hairline, for the card's own actions or a total. It stays at the foot when the card is stretched in a `CardGrid`. Ignored with `dashed`. */
+    footer?: ReactNode;
+    /**
+     * The root element. A `div` takes no name from the title. Not on a card that is a link.
+     * @default section
+     */
+    as?: "section" | "article" | "div";
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+} & Omit<ComponentPropsWithoutRef<"section">, "title" | "className" | "style" | "children">;
+type CardLinkProps = CardBase & {
+    actions?: undefined;
+    footer?: undefined;
+    as?: undefined;
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"a">, "href" | "title" | "children">> & ({
+    /** Makes the whole card one link to this URL, with no `actions`, `footer` or `as`. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/shots/1" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Makes the whole card one link to this URL, with no `actions`, `footer` or `as`. */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/shots/1" {...p} />`. */
+    render: LinkRender;
+});
+/**
+ * A bordered panel with an optional title, count and status; `as` picks the element (default `section`).
+ * Three opt-in forms for data views: `flush` drops the padding and clips the corners, for a table
+ * that runs edge to edge; `bar` puts the title, count and `actions` in a tinted strip across the
+ * top, over the body; `dashed` is an empty-state shell, a dashed outline with centred muted text.
+ * `dashed` stands alone: it ignores `flush` and `bar`; `dashed="filled"` is the same shell on a
+ * surface fill with more padding, for an empty state that must read as a panel. A flush card has no
+ * padding for a `title`, so give it a `bar`. `size="sm"` is the dense padding and `size="lg"` the
+ * roomy one, the same on a `ListRow` and a `FileDrop`. `tone` is the Callout's set, for a data panel that carries a status
+ * (a soft fill and border, no shadow); a message is still a `Callout`, and `bar` and `dashed` have
+ * no tone. A titled panel (`section`, `article`) is named by its title: the root gets
+ * `aria-labelledby` pointing at the heading, unless the caller passes its own `aria-label` or
+ * `aria-labelledby`, which wins. Other props (`id`, `data-*`, `aria-*`) go on the root. The root is `relative`, so a
+ * `TextLink stretch` inside it covers the card. A card with an `id` is an anchor target: `#id`
+ * scrolls it clear of the sticky header (and a `subnav`) and outlines it in the accent colour while
+ * it is the target.
+ *
+ * `footer` is a tinted strip across the bottom, under a hairline, for the card's own actions or a
+ * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
+ * suits a panel, not a card that is a link, and `dashed` has none.
+ *
+ * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
+ * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
+ * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`
+ * (`render={(p) => <Link to="/shots/1" {...p} />}`). `external` opens it in a new tab. On a link card
+ * `id`, `data-*` and the describing `aria-*` (`aria-describedby`, `aria-details`, …) go on the card
+ * root, not the link; the link's own `aria-label`, `aria-labelledby` and `aria-current` stay on the
+ * link. The link is named by the card's text (title, body, `badge`) through the root's id, which is
+ * generated when the caller gives none.
+ */
+export declare function Card(props: CardPanelProps | CardLinkProps): ReactElement;
+export {};

package/dist/Card.js

@@ -0,0 +1,134 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { TONE_SURFACE } from "./Callout.js";
+import { CardBadge } from "./CardBadge.js";
+import { CardBar, CardFooter, CardHeader, CardHeading } from "./CardParts.js";
+import { cx, focusRing, liftInteractive } from "./cx.js";
+import { renderLink } from "./link.js";
+/** A card with a `footer`: a `dashed` card stands alone and has none. */
+function withFooter(form, footer) {
+    return { ...form, footer: !form.dashed && Boolean(footer) };
+}
+/** `dashed` stands alone; `bar` needs a title or actions to fill it and has no tone. */
+function cardForm(asked, hasHeader) {
+    const dashed = Boolean(asked.dashed);
+    const bar = (asked.bar ?? false) && !dashed && hasHeader;
+    return {
+        flush: (asked.flush ?? false) && !dashed,
+        bar,
+        dashed,
+        filled: asked.dashed === "filled",
+        tone: dashed || bar ? undefined : asked.tone,
+        attention: (asked.attention ?? false) && !dashed,
+        size: asked.size,
+        footer: false,
+    };
+}
+/** The padding of a card's body by `size`. */
+const BODY_PAD = { sm: "p-3", md: "p-5", lg: "p-6" };
+function cardBorder(form) {
+    if (form.dashed)
+        return "border-dashed border-slate-300";
+    const surface = form.tone ? TONE_SURFACE[form.tone] : "border-slate-200/70 bg-white";
+    if (!form.attention)
+        return surface;
+    // The warn tone's strong edge in place of the border colour; the fill stays.
+    const fill = surface.split(" ").filter((c) => c.startsWith("bg-"));
+    return cx("border-amber-600", ...fill);
+}
+function cardPadding(form) {
+    if (form.dashed) {
+        return cx(form.filled ? "p-10" : "p-8", "text-center text-sm text-slate-500");
+    }
+    return !form.flush && !form.bar && !form.footer && BODY_PAD[form.size];
+}
+function cardClass(form) {
+    return cx("relative scroll-mt-28 rounded-xl border target:outline-2 target:outline-violet-600", liftInteractive, cardBorder(form), form.filled && "bg-white", cardPadding(form), !form.dashed && !form.tone && "shadow-sm", (form.flush || form.bar || form.footer) && "overflow-hidden", form.footer && "flex flex-col");
+}
+function isCardLink(props) {
+    return props.href !== undefined || props.render !== undefined;
+}
+/**
+ * A bordered panel with an optional title, count and status; `as` picks the element (default `section`).
+ * Three opt-in forms for data views: `flush` drops the padding and clips the corners, for a table
+ * that runs edge to edge; `bar` puts the title, count and `actions` in a tinted strip across the
+ * top, over the body; `dashed` is an empty-state shell, a dashed outline with centred muted text.
+ * `dashed` stands alone: it ignores `flush` and `bar`; `dashed="filled"` is the same shell on a
+ * surface fill with more padding, for an empty state that must read as a panel. A flush card has no
+ * padding for a `title`, so give it a `bar`. `size="sm"` is the dense padding and `size="lg"` the
+ * roomy one, the same on a `ListRow` and a `FileDrop`. `tone` is the Callout's set, for a data panel that carries a status
+ * (a soft fill and border, no shadow); a message is still a `Callout`, and `bar` and `dashed` have
+ * no tone. A titled panel (`section`, `article`) is named by its title: the root gets
+ * `aria-labelledby` pointing at the heading, unless the caller passes its own `aria-label` or
+ * `aria-labelledby`, which wins. Other props (`id`, `data-*`, `aria-*`) go on the root. The root is `relative`, so a
+ * `TextLink stretch` inside it covers the card. A card with an `id` is an anchor target: `#id`
+ * scrolls it clear of the sticky header (and a `subnav`) and outlines it in the accent colour while
+ * it is the target.
+ *
+ * `footer` is a tinted strip across the bottom, under a hairline, for the card's own actions or a
+ * total; in a `CardGrid` it stays at the foot of a card that is stretched to the row's height. It
+ * suits a panel, not a card that is a link, and `dashed` has none.
+ *
+ * `href` makes the whole card one link: a hover border and the focus ring, with the link stretched
+ * over the card, so it takes no `actions`, `footer` or `as`. A `TextLink`, `Button` or `Checkbox` in
+ * the body sits above the link and is clickable on its own. With `render` it draws the app's own router `<Link>`
+ * (`render={(p) => <Link to="/shots/1" {...p} />}`). `external` opens it in a new tab. On a link card
+ * `id`, `data-*` and the describing `aria-*` (`aria-describedby`, `aria-details`, …) go on the card
+ * root, not the link; the link's own `aria-label`, `aria-labelledby` and `aria-current` stay on the
+ * link. The link is named by the card's text (title, body, `badge`) through the root's id, which is
+ * generated when the caller gives none.
+ */
+export function Card(props) {
+    return isCardLink(props) ? _jsx(LinkCard, { ...props }) : _jsx(PanelCard, { ...props });
+}
+/** A card that is not a link: `as` (a `section` by default) named by its heading. */
+function PanelCard(props) {
+    const { title, count, status, actions, footer, bar, flush, dashed, tone, badge, attention, size = "md", children, ...panel } = props;
+    const { as: Tag = "section", ...rest } = panel;
+    const headingId = useId();
+    const form = withFooter(cardForm({ flush, bar, dashed, tone, attention, size }, Boolean(title || actions)), footer);
+    // The title names the section or article; a caller's own name wins, and a bare `div` takes none.
+    const named = title &&
+        Tag !== "div" &&
+        rest["aria-label"] === undefined &&
+        rest["aria-labelledby"] === undefined;
+    return (_jsxs(Tag, { ...(named ? { "aria-labelledby": headingId } : {}), ...rest, className: cardClass(form), children: [cardBody(form, { title, count, status, actions, children, headingId }), form.footer && _jsx(CardFooter, { size: form.size, children: footer }), badge && _jsx(CardBadge, { size: form.size, children: badge })] }));
+}
+/** What names or marks the link itself: these stay on the overlay `<a>`; `id`, `data-*` and every other `aria-*` go on the card. */
+const LINK_OWN = new Set(["aria-label", "aria-labelledby", "aria-current"]);
+/** Splits a link card's props into the attributes for the root and the rest, for the `<a>`. */
+function splitRootAttrs(props) {
+    const root = {};
+    const link = {};
+    for (const [key, value] of Object.entries(props)) {
+        const onRoot = key === "id" || key.startsWith("data-") || (key.startsWith("aria-") && !LINK_OWN.has(key));
+        (onRoot ? root : link)[key] = value;
+    }
+    return [root, link];
+}
+/** A card that is a link: a `div` with the link stretched over it as an empty overlay, so the card's own links and buttons are not nested in it. */
+function LinkCard(props) {
+    const { title, count, status, actions, bar, flush, dashed, tone, badge, attention, size = "md", children, external = false, ...rest } = props;
+    const form = cardForm({ flush, bar, dashed, tone, attention, size }, Boolean(title));
+    const generated = useId();
+    const [root, link] = splitRootAttrs(rest);
+    // The link is named by the whole card, so the root needs an id: the caller's, else a generated one.
+    const cardId = typeof root["id"] === "string" ? root["id"] : generated;
+    return (_jsxs("div", { ...root, id: cardId, className: cx(cardClass(form), "transition hover:border-violet-400"), children: [renderLink({
+                ...(link["aria-label"] === undefined ? { "aria-labelledby": cardId } : {}),
+                ...link,
+                external,
+                className: cx("link-stretch absolute inset-0 rounded-xl", focusRing, "focus-visible:-outline-offset-2"),
+                children: null,
+            }), cardBody(form, { title, count, status, actions, children, headingId: undefined }), badge && _jsx(CardBadge, { size: form.size, children: badge })] }));
+}
+function cardBody(form, { title, count, status, actions, children, headingId, }) {
+    const heading = title && (_jsx(CardHeading, { id: headingId, title: title, count: count, status: status, bar: form.bar, spaced: !form.bar && !actions, size: form.size }));
+    const grow = form.footer && "flex-1";
+    if (form.bar) {
+        return (_jsxs(_Fragment, { children: [_jsx(CardBar, { heading: heading, actions: actions, size: form.size }), _jsx("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]) || undefined, children: children })] }));
+    }
+    const content = (_jsxs(_Fragment, { children: [_jsx(CardHeader, { heading: heading, actions: actions, size: form.size }), children] }));
+    // With a footer the root has no padding, so the body pads itself and takes the room left over.
+    return form.footer ? (_jsx("div", { className: cx(grow, !form.flush && BODY_PAD[form.size]), children: content })) : (content);
+}

package/dist/CardBadge.d.ts

@@ -0,0 +1,7 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Size } from "./size.js";
+/** A `Card`'s `badge`: pinned over the content; a click falls through to a link card, except on a link or button in it. */
+export declare function CardBadge({ size, children }: {
+    size: Size;
+    children: ReactNode;
+}): ReactElement;

package/dist/CardBadge.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The corner a `badge` sits in, by `size`: inside the radius, clear of the edge. */
+const BADGE_CORNER = {
+    sm: "top-2 right-2",
+    md: "top-3 right-3",
+    lg: "top-4 right-4",
+};
+/** A `Card`'s `badge`: pinned over the content; a click falls through to a link card, except on a link or button in it. */
+export function CardBadge({ size, children }) {
+    return (_jsx("span", { className: cx("pointer-events-none absolute z-10 flex [&_:is(a,button)]:pointer-events-auto", BADGE_CORNER[size]), children: children }));
+}

package/dist/CardParts.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import type { Size } from "./size.js";
+export declare function CardHeading({ id, title, count, status, bar, spaced, size, }: {
+    id: string | undefined;
+    title: string;
+    count: number | undefined;
+    status: ReactNode;
+    bar: boolean;
+    spaced: boolean;
+    size: Size;
+}): import("react").JSX.Element;
+export declare function CardBar({ heading, actions, size, }: {
+    heading: ReactNode;
+    actions: ReactNode;
+    size: Size;
+}): import("react").JSX.Element;
+export declare function CardFooter({ children, size }: {
+    children: ReactNode;
+    size: Size;
+}): import("react").JSX.Element;
+export declare function CardHeader({ heading, actions, size, }: {
+    heading: ReactNode;
+    actions: ReactNode;
+    size: Size;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/CardParts.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Overline } from "./typography.js";
+/** The space under a card's heading, by `size`. */
+const HEADING_GAP = { sm: "mb-2", md: "mb-3", lg: "mb-4" };
+/** The padding of a card's bar and footer strips, by `size`. */
+const STRIP_PAD = { sm: "px-3 py-2", md: "px-5 py-3", lg: "px-6 py-4" };
+export function CardHeading({ id, title, count, status, bar, spaced, size, }) {
+    const ink = bar ? "text-slate-500" : "text-slate-400";
+    return (_jsxs("div", { className: cx("flex gap-2", status ? "items-center" : "items-baseline", spaced && HEADING_GAP[size]), children: [_jsx(Overline, { as: "h2", id: id, color: bar ? "tertiary" : "muted", children: title }), count !== undefined && _jsx("span", { className: cx("text-xs font-medium", ink), children: count }), status] }));
+}
+function CardActions({ children }) {
+    return _jsx("div", { className: "ml-auto flex items-center gap-2", children: children });
+}
+export function CardBar({ heading, actions, size, }) {
+    return (_jsxs("div", { className: cx("flex items-center justify-between gap-3 border-b border-slate-200/70 bg-slate-50", STRIP_PAD[size]), children: [heading, actions && _jsx(CardActions, { children: actions })] }));
+}
+export function CardFooter({ children, size }) {
+    return (_jsx("div", { className: cx("flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-slate-200/70 bg-slate-50 [&>[data-button-group]]:grow", STRIP_PAD[size]), children: children }));
+}
+export function CardHeader({ heading, actions, size, }) {
+    if (!actions)
+        return heading;
+    return (_jsxs("div", { className: cx("flex items-center justify-between gap-3", HEADING_GAP[size]), children: [heading, _jsx(CardActions, { children: actions })] }));
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+/**
+ * A native checkbox with its label. Every prop but the label goes on the input.
+ * `size="sm"` is `text-xs` and a smaller box, for a dense row; `size="lg"` is `text-base` and a
+ * larger box. Leave `label` out for a bare box in
+ * a table cell, and name it with `aria-label`. `align="start"` puts the box on the label's first
+ * line, for a label that wraps onto several; the default centres it on the whole label. The box
+ * keeps its size either way. `description` is a muted line under the label that says more, like a
+ * `Field`'s hint; it is the box's `aria-describedby`, and with it the box sits on the label's first
+ * line.
+ */
+export declare function Checkbox({ label, description, size, align, "aria-describedby": describedBy, ...rest }: {
+    /** The text beside the box. Leave it out for a bare box (a table cell) and name it with `aria-label`. */
+    label?: ReactNode;
+    /** A muted line under the label that says more. It is the box's `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * The label's text size and the box with it.
+     * @default md
+     */
+    size?: Size | undefined;
+    /**
+     * `start` puts the box on the label's first line, for a label that wraps; `center` centres it on the whole label. A `description` makes it `start`.
+     * @default center
+     */
+    align?: "center" | "start" | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"input">, "type" | "size" | "width">>): ReactElement;

package/dist/Checkbox.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cx, focusRing } from "./cx.js";
+/** The label's gap and text, the box, and the box's drop onto the first line, by `size`. */
+const SIZE = {
+    sm: { label: "gap-1.5 text-xs", box: "h-3.5 w-3.5", start: "mt-px" },
+    md: { label: "gap-2 text-sm", box: "h-4 w-4", start: "mt-0.5" },
+    lg: { label: "gap-2.5 text-base", box: "h-5 w-5", start: "mt-0.5" },
+};
+/** The label, with its muted description under it when there is one. */
+function Words({ label, description, id, }) {
+    if (id === undefined)
+        return label;
+    return (_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: label }), _jsx("span", { id: id, className: "text-xs text-slate-500", children: description })] }));
+}
+/** The description's id (none without a description) and the box's whole `aria-describedby`. */
+function useDescription(description, describedBy) {
+    const generatedId = useId();
+    const descriptionId = description != null && description !== false ? generatedId : undefined;
+    return { descriptionId, describedIds: [describedBy, descriptionId].filter(Boolean).join(" ") };
+}
+/**
+ * A native checkbox with its label. Every prop but the label goes on the input.
+ * `size="sm"` is `text-xs` and a smaller box, for a dense row; `size="lg"` is `text-base` and a
+ * larger box. Leave `label` out for a bare box in
+ * a table cell, and name it with `aria-label`. `align="start"` puts the box on the label's first
+ * line, for a label that wraps onto several; the default centres it on the whole label. The box
+ * keeps its size either way. `description` is a muted line under the label that says more, like a
+ * `Field`'s hint; it is the box's `aria-describedby`, and with it the box sits on the label's first
+ * line.
+ */
+export function Checkbox({ label, description, size = "md", align = "center", "aria-describedby": describedBy, ...rest }) {
+    const { descriptionId, describedIds } = useDescription(description, describedBy);
+    const start = align === "start" || descriptionId !== undefined;
+    return (_jsxs("label", { className: cx("inline-flex cursor-pointer text-slate-700", start ? "items-start" : "items-center", SIZE[size].label), children: [_jsx("input", { type: "checkbox", className: cx(SIZE[size].box, "shrink-0", start && SIZE[size].start, "accent-violet-600", focusRing), ...(describedIds ? { "aria-describedby": describedIds } : {}), ...rest }), _jsx(Words, { label: label, description: description, id: descriptionId })] }));
+}

package/dist/Chevron.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from "react";
+/** The right-pointing chevron of a collapsible header; it turns down when `open`. */
+export declare function Chevron({ open }: {
+    open: boolean;
+}): ReactElement;

package/dist/Chevron.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The right-pointing chevron of a collapsible header; it turns down when `open`. */
+export function Chevron({ open }) {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", className: cx("h-4 w-4 shrink-0 text-slate-400", open && "rotate-90"), children: _jsx("path", { fillRule: "evenodd", d: "M7.2 4.8a.75.75 0 0 1 1.06 0l4.7 4.67a.75.75 0 0 1 0 1.06l-4.7 4.67a.75.75 0 1 1-1.06-1.06L11.37 10 7.2 5.86a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) }));
+}