@hackcove/ui-react 0.0.0-stage → 0.8.0

package/dist/Table.d.ts

@@ -0,0 +1,142 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { CalloutTone } from "./Callout.js";
+import { type TextTone } from "./typography.js";
+type Align = "start" | "end";
+/**
+ * The text of a cell: its weight and colour. `default`, `strong` and `muted` are the plain ones; the
+ * rest are the Callout's tones, for an amount that carries a meaning (a gain, an overspend). Colour
+ * alone does not say it, so a signed figure or a word says it too.
+ */
+export type CellTone = "default" | "strong" | "muted" | CalloutTone;
+type TableVariant = "card" | "plain";
+/**
+ * The status of a row: the Callout's tones, plus `muted`. A toned row gets a stripe on its leading
+ * edge and the tone's soft fill; `muted` fades the row instead, for one that matters less. The
+ * stripe takes the tone's text colour, which every theme already remaps, so no new palette entry.
+ */
+export type RowTone = "neutral" | "info" | "positive" | "warn" | "danger" | "muted";
+/** The row's status mark: a `tone` (stripe and fill, or faded) or a `stripe` alone, never both. */
+type RowMark = {
+    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give `tone` or `stripe`, not both. */
+    tone?: RowTone | undefined;
+    /** A stripe on the leading edge in this tone, with no fill. Give `stripe` or `tone`, not both. */
+    stripe?: undefined;
+} | {
+    /** A stripe on the leading edge in this tone, with no fill. Give `stripe` or `tone`, not both. */
+    stripe?: TextTone | undefined;
+    /** The row's status: a stripe on the leading edge plus the tone's soft fill, or `muted` to fade the row. Give `tone` or `stripe`, not both. */
+    tone?: undefined;
+};
+/** What an element passes through (`data-*`, `aria-*`, `id`, …): the layout and the children stay the component's. */
+type Rest<Tag extends "table" | "thead" | "tbody" | "tfoot" | "tr" | "th" | "td", Own extends string = never> = Omit<ComponentPropsWithoutRef<Tag>, "className" | "style" | "children" | Own>;
+/**
+ * A list of records in a rounded, bordered card that scrolls sideways on a narrow screen. Compose it
+ * from `TableHead`, `TableBody`, `TableFoot`, `TableRow`, `TableHeaderCell` and `TableCell`. `caption` names the
+ * table for assistive tech and is not drawn. `variant="plain"` drops the card (its border, fill and
+ * shadow), the head's tinted strip and the row hover, and keeps the row dividers; it is for a table
+ * that sits inside a card of its own. Other props
+ * (`id`, `data-*`, `aria-*`) go on the `<table>`.
+ */
+export declare function Table({ caption, variant, children, ...rest }: {
+    /** Names the table for assistive tech; it is not drawn. */
+    caption?: string | undefined;
+    /**
+     * `card` sits the table in its own bordered card; `plain` drops the card, the head's tint and the row hover, for a table inside a card of its own.
+     * @default card
+     */
+    variant?: TableVariant | undefined;
+    children: ReactNode;
+} & Rest<"table">): ReactElement;
+/** The `<thead>`: small uppercase column titles, on a tinted strip unless the table is `plain`. Holds one `TableRow` of `TableHeaderCell`s. */
+export declare function TableHead({ children, ...rest }: {
+    children: ReactNode;
+} & Rest<"thead">): ReactElement;
+/** The `<tbody>`: the rows, each with a line above it and, unless the table is `plain`, a fill on hover. */
+export declare function TableBody({ children, ...rest }: {
+    children: ReactNode;
+} & Rest<"tbody">): ReactElement;
+/**
+ * The `<tfoot>`: totals and subtotals. Its cells are strong by default and each row has a firmer
+ * line above it, in a card and in a `plain` table alike. Put it after `TableBody`; a row of it takes
+ * no `tone`.
+ */
+export declare function TableFoot({ children, ...rest }: {
+    children: ReactNode;
+} & Rest<"tfoot">): ReactElement;
+/**
+ * A `<tr>`, `relative`: the anchor a `TextLink stretch` (with `href`, or `render` for a router `<Link>`) stretches to. Any other link, button or
+ * control in the row (a `TextLink`, a `Button`, a `Checkbox`) sits above that link and is clickable
+ * on its own, with no class from the caller. Use it in the head and the
+ * body. In the body it also draws the line above the row and, unless the table is `plain`, the hover
+ * fill. `tone` marks the row's status (see `RowTone`): a stripe on the leading edge and a soft fill,
+ * or `muted` to fade it. A toned row keeps its fill on hover (the status stays readable), so a
+ * linked row's link, not a hover fill, says it is clickable. `stripe` is the stripe alone, in the
+ * `TextTone` colours (the first five names of a `StackedBar` segment's `VizTone`), with no fill: the row keeps its hover
+ * and its own look. Give `tone` or `stripe`, not both. Body rows only; colour alone does not say it,
+ * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: it is a `TableFoot` row.
+ */
+export declare function TableRow({ tone, stripe, children, ...rest }: RowMark & {
+    children: ReactNode;
+} & Rest<"tr">): ReactElement;
+/**
+ * A full-width group header in the body: a tinted row with a `label` that spans the table's
+ * `colSpan` columns (its real column count), and optional `trailing` content at the far end (a
+ * count, a subtotal, a small button). The group's rows follow it. For a panel of other content across the whole row, use a `TableCell` with
+ * `colSpan` instead.
+ */
+export declare function TableGroupRow({ label, trailing, colSpan, ...rest }: {
+    /** The group's name, at the start of the row. */
+    label: ReactNode;
+    /** Content at the far end of the row: a count, a subtotal, a small button. */
+    trailing?: ReactNode;
+    /** The table's real column count, so the header spans the whole row. */
+    colSpan: number;
+} & Rest<"tr">): ReactElement;
+/**
+ * A column title, `<th scope="col">`. A column with nothing to show in its head (a row's actions)
+ * takes `srLabel` instead of `children`: the name a screen reader hears ("Actions"), visually
+ * hidden so the head keeps its column.
+ */
+export declare function TableHeaderCell({ align, children, srLabel, ...rest }: {
+    /**
+     * The cell's horizontal alignment; `end` for figures.
+     * @default start
+     */
+    align?: Align | undefined;
+} & ({
+    children?: ReactNode;
+    srLabel?: undefined;
+} | {
+    children?: undefined;
+    /** The column's name for a screen reader, visually hidden, for a column with no visible title (a row's actions). */
+    srLabel: string;
+}) & Rest<"th", "align" | "scope">): ReactElement;
+/**
+ * A `<td>`. `tone` is the text weight and colour (see `CellTone`; in a `TableFoot` it defaults to
+ * `strong`); `numeric` sets tabular figures, `mono` a small mono face. `secondary` is a second,
+ * muted line under the content. One rule for wrapping: prose wraps onto more lines (never narrower
+ * than `min-w-48`, so it scrolls the table before it becomes a sliver), and a `numeric` or `mono`
+ * cell (a figure, a code, a type) never breaks. `truncate` caps a long value's width, cuts it with
+ * an ellipsis on one line and puts the full text in a `title`; the content is then plain text (strings and
+ * numbers), since that is what the title shows. `colSpan` passes through: a cell that
+ * spans the row is a full-width panel (an empty state, a note under a group).
+ */
+export declare function TableCell({ align, tone, numeric, mono, truncate, secondary, children, ...rest }: {
+    /**
+     * The cell's horizontal alignment; `end` for figures.
+     * @default start
+     */
+    align?: Align | undefined;
+    /** The text weight and colour (see `CellTone`). In a `TableFoot` it defaults to `strong`. */
+    tone?: CellTone | undefined;
+    /** Tabular figures, and the cell never wraps. */
+    numeric?: boolean | undefined;
+    /** A small monospace face for a code or a type, and the cell never wraps. */
+    mono?: boolean | undefined;
+    /** Caps the width and cuts a long value with an ellipsis on one line, the full text in a `title`. Plain text content only. */
+    truncate?: boolean | undefined;
+    /** A second, muted line under the content. */
+    secondary?: ReactNode;
+    children?: ReactNode;
+} & Rest<"td", "align">): ReactElement;
+export {};

package/dist/Table.js

@@ -0,0 +1,138 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, createContext, useContext } from "react";
+import { cx, liftInteractive } from "./cx.js";
+import { TEXT_TONE } from "./typography.js";
+const ALIGN = { start: "text-left", end: "text-right" };
+const TONE = {
+    default: "text-slate-700",
+    strong: "font-medium text-slate-900",
+    neutral: "text-slate-600",
+    ...TEXT_TONE,
+};
+const ROW_TONE = {
+    neutral: "bg-slate-50 text-slate-500",
+    info: "bg-blue-50 text-blue-700",
+    positive: "bg-emerald-50 text-emerald-700",
+    warn: "bg-amber-50 text-amber-700",
+    danger: "bg-red-50 text-red-700",
+    muted: "opacity-60",
+};
+const STRIPE = "shadow-[inset_4px_0_0_0_currentColor]";
+const VariantContext = createContext("card");
+/**
+ * Whether a `TableRow` sits in the body (a line above, a hover fill), the foot (a firmer line above,
+ * strong cells) or the head or nowhere (neither).
+ */
+const SectionContext = createContext(undefined);
+/**
+ * A list of records in a rounded, bordered card that scrolls sideways on a narrow screen. Compose it
+ * from `TableHead`, `TableBody`, `TableFoot`, `TableRow`, `TableHeaderCell` and `TableCell`. `caption` names the
+ * table for assistive tech and is not drawn. `variant="plain"` drops the card (its border, fill and
+ * shadow), the head's tinted strip and the row hover, and keeps the row dividers; it is for a table
+ * that sits inside a card of its own. Other props
+ * (`id`, `data-*`, `aria-*`) go on the `<table>`.
+ */
+export function Table({ caption, variant = "card", children, ...rest }) {
+    return (_jsx(VariantContext.Provider, { value: variant, children: _jsx("div", { className: cx("overflow-x-auto", variant === "card" && "rounded-xl border border-slate-200/70 bg-white shadow-sm"), children: _jsxs("table", { ...rest, className: "w-full text-left text-sm", children: [caption && _jsx("caption", { className: "sr-only", children: caption }), children] }) }) }));
+}
+/** The `<thead>`: small uppercase column titles, on a tinted strip unless the table is `plain`. Holds one `TableRow` of `TableHeaderCell`s. */
+export function TableHead({ children, ...rest }) {
+    const plain = useContext(VariantContext) === "plain";
+    return (_jsx("thead", { ...rest, className: cx("text-xs uppercase tracking-wide text-slate-500", !plain && "bg-slate-50"), children: _jsx(SectionContext.Provider, { value: "head", children: children }) }));
+}
+/** The `<tbody>`: the rows, each with a line above it and, unless the table is `plain`, a fill on hover. */
+export function TableBody({ children, ...rest }) {
+    return (_jsx("tbody", { ...rest, children: _jsx(SectionContext.Provider, { value: "body", children: children }) }));
+}
+/**
+ * The `<tfoot>`: totals and subtotals. Its cells are strong by default and each row has a firmer
+ * line above it, in a card and in a `plain` table alike. Put it after `TableBody`; a row of it takes
+ * no `tone`.
+ */
+export function TableFoot({ children, ...rest }) {
+    return (_jsx("tfoot", { ...rest, children: _jsx(SectionContext.Provider, { value: "foot", children: children }) }));
+}
+/**
+ * A `<tr>`, `relative`: the anchor a `TextLink stretch` (with `href`, or `render` for a router `<Link>`) stretches to. Any other link, button or
+ * control in the row (a `TextLink`, a `Button`, a `Checkbox`) sits above that link and is clickable
+ * on its own, with no class from the caller. Use it in the head and the
+ * body. In the body it also draws the line above the row and, unless the table is `plain`, the hover
+ * fill. `tone` marks the row's status (see `RowTone`): a stripe on the leading edge and a soft fill,
+ * or `muted` to fade it. A toned row keeps its fill on hover (the status stays readable), so a
+ * linked row's link, not a hover fill, says it is clickable. `stripe` is the stripe alone, in the
+ * `TextTone` colours (the first five names of a `StackedBar` segment's `VizTone`), with no fill: the row keeps its hover
+ * and its own look. Give `tone` or `stripe`, not both. Body rows only; colour alone does not say it,
+ * so name the status in a cell too (a `Pill`). A bold subtotal is not a tone: it is a `TableFoot` row.
+ */
+export function TableRow({ tone, stripe, children, ...rest }) {
+    const section = useContext(SectionContext);
+    const plain = useContext(VariantContext) === "plain";
+    return (_jsx("tr", { ...rest, className: rowClass(section, plain, tone, stripe), children: children }));
+}
+/** The classes of a row: a line above in the body and the foot, the hover fill and the tone's or stripe's look in the body only. */
+function rowClass(section, plain, tone, stripe) {
+    if (section === "foot")
+        return cx("relative border-t border-slate-300", liftInteractive);
+    if (section !== "body")
+        return cx("relative", liftInteractive);
+    const line = cx("relative border-t border-slate-200/70", liftInteractive);
+    const hover = !plain && "hover:bg-slate-50";
+    if (stripe !== undefined)
+        return cx(line, hover, TEXT_TONE[stripe], STRIPE);
+    if (tone === undefined)
+        return cx(line, hover);
+    if (tone === "muted")
+        return cx(line, hover, ROW_TONE.muted);
+    return cx(line, ROW_TONE[tone], STRIPE);
+}
+/**
+ * A full-width group header in the body: a tinted row with a `label` that spans the table's
+ * `colSpan` columns (its real column count), and optional `trailing` content at the far end (a
+ * count, a subtotal, a small button). The group's rows follow it. For a panel of other content across the whole row, use a `TableCell` with
+ * `colSpan` instead.
+ */
+export function TableGroupRow({ label, trailing, colSpan, ...rest }) {
+    return (_jsx("tr", { ...rest, className: "relative border-t border-slate-200/70 bg-slate-50", children: _jsx("th", { scope: "rowgroup", colSpan: colSpan, className: "px-4 py-2 text-left text-sm", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "font-medium text-slate-900", children: label }), trailing != null && trailing !== false && (_jsx("span", { className: "shrink-0 font-normal text-slate-500", children: trailing }))] }) }) }));
+}
+/**
+ * A column title, `<th scope="col">`. A column with nothing to show in its head (a row's actions)
+ * takes `srLabel` instead of `children`: the name a screen reader hears ("Actions"), visually
+ * hidden so the head keeps its column.
+ */
+export function TableHeaderCell({ align = "start", children, srLabel, ...rest }) {
+    return (_jsx("th", { ...rest, scope: "col", className: cx("whitespace-nowrap px-4 py-2.5 font-medium", ALIGN[align]), children: srLabel === undefined ? children : _jsx("span", { className: "sr-only", children: srLabel }) }));
+}
+/** The wrapping rule: a figure or code never breaks; prose wraps, down to `min-w-48`. */
+function figureClass(numeric, mono) {
+    if (!numeric && !mono)
+        return "min-w-48";
+    return cx("whitespace-nowrap", numeric && "tabular-nums", mono && "font-mono text-xs");
+}
+/** The widest a `truncate` cell grows. */
+const TRUNCATE_WIDTH = "max-w-xs";
+/**
+ * A `<td>`. `tone` is the text weight and colour (see `CellTone`; in a `TableFoot` it defaults to
+ * `strong`); `numeric` sets tabular figures, `mono` a small mono face. `secondary` is a second,
+ * muted line under the content. One rule for wrapping: prose wraps onto more lines (never narrower
+ * than `min-w-48`, so it scrolls the table before it becomes a sliver), and a `numeric` or `mono`
+ * cell (a figure, a code, a type) never breaks. `truncate` caps a long value's width, cuts it with
+ * an ellipsis on one line and puts the full text in a `title`; the content is then plain text (strings and
+ * numbers), since that is what the title shows. `colSpan` passes through: a cell that
+ * spans the row is a full-width panel (an empty state, a note under a group).
+ */
+export function TableCell({ align = "start", tone, numeric = false, mono = false, truncate = false, secondary, children, ...rest }) {
+    const foot = useContext(SectionContext) === "foot";
+    return (_jsx("td", { ...rest, className: cellClass({ align, tone, foot, numeric, mono }), children: _jsx(CellBody, { align: align, truncate: truncate, secondary: secondary, children: children }) }));
+}
+/** The classes of a cell: the tone (`strong` by default in a foot, and a foot's cells are medium whatever the tone), then the wrapping rule. */
+function cellClass({ align, tone, foot, numeric, mono, }) {
+    const resolved = tone ?? (foot ? "strong" : "default");
+    return cx("px-4 py-3", ALIGN[align], TONE[resolved], foot && resolved !== "strong" && "font-medium", figureClass(numeric, mono));
+}
+const isText = (node) => typeof node === "string" || typeof node === "number";
+/** What a cell holds: the content, cut to one line with its full text in a `title` when `truncate`, then the `secondary` line. */
+function CellBody({ align, truncate, secondary, children, }) {
+    const parts = Children.toArray(children);
+    const text = parts.every(isText) ? parts.join("") : undefined;
+    return (_jsxs(_Fragment, { children: [truncate ? (_jsx("div", { className: cx(TRUNCATE_WIDTH, "truncate", align === "end" && "ml-auto"), title: text, children: children })) : (children), secondary != null && secondary !== false && (_jsx("div", { className: "text-xs font-normal text-slate-500", children: secondary }))] }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,40 @@
+import type { ReactElement } from "react";
+import type { Size } from "./size.js";
+import { type SwitchItem, type SwitchProps } from "./switcher.js";
+/** One tab of a Tabs row. See `SwitchItem`. */
+export type Tab = SwitchItem;
+/** The classes of one pill tab. A `disabled` one drops the hover fill. */
+export declare function pillTabClass(active: boolean, disabled?: boolean, size?: Size): string;
+export type TabsProps = SwitchProps & ({
+    /** `underline` (default) is a row over a bottom rule; `pill` fills the current tab. */
+    variant?: "underline";
+    /** Only a `pill` row takes a `size`. */
+    size?: undefined;
+    /** Only a `pill` row takes an `orientation`. */
+    orientation?: undefined;
+} | {
+    variant: "pill";
+    /**
+     * The pills' height and text, on the scale of a `Button`.
+     * @default md
+     */
+    size?: Size;
+    /**
+     * `vertical` stacks the pills in one column at the rail's width, for a `SidebarLayout` rail;
+     * the up and down arrows then move between button tabs.
+     * @default horizontal
+     */
+    orientation?: "horizontal" | "vertical";
+});
+/**
+ * Underline tabs for switching a view in place: a row over a bottom rule, the current tab
+ * underlined in the accent. `items` are `{ value, label }` buttons (`value` and `onChange` are the
+ * caller's state; the arrow keys, Home and End move between tabs) or links (`href`, or `render` to
+ * draw the app's own router `<Link>`; `active` on an item, or `value`, marks the current one, which
+ * gets `aria-current`). `variant="pill"` fills the current tab instead, with no rule, for under a
+ * `PageHeader` or as a site's section nav, and takes a `size`; `orientation="vertical"` stacks the
+ * pills for a `SidebarLayout` rail. An item may carry a `count`, and a button one `disabled` (with a
+ * `title` for the reason); `disabled` on the row disables every tab. `label` names the tab list.
+ * The panel is the caller's: give it `role="tabpanel"`, and a tab `controls` to point at it.
+ */
+export declare function Tabs({ variant, size, orientation, ...props }: TabsProps): ReactElement;

package/dist/Tabs.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { Switcher } from "./switcher.js";
+const BASE = `-mb-px border-b-2 px-0.5 py-2 transition ${focusRing}`;
+const ON = "border-violet-600 font-medium text-violet-700";
+const OFF = "border-transparent text-slate-600";
+const OFF_LIVE = "hover:text-violet-700";
+// A transparent border, so a pill is as tall as a `Button` of the same size.
+const PILL = `rounded-lg border border-transparent transition ${focusRing}`;
+/** A pill's padding and text, by `size`. */
+const PILL_SIZE = {
+    sm: "px-2.5 py-1 text-xs",
+    md: "px-3 py-2 text-sm",
+    lg: "px-4 py-2.5 text-base",
+};
+/** The classes of one pill tab. A `disabled` one drops the hover fill. */
+export function pillTabClass(active, disabled = false, size = "md") {
+    return cx(PILL, PILL_SIZE[size], active ? "bg-slate-100 font-medium text-slate-900" : "text-slate-600", !active && !disabled && "hover:bg-slate-100");
+}
+/**
+ * Underline tabs for switching a view in place: a row over a bottom rule, the current tab
+ * underlined in the accent. `items` are `{ value, label }` buttons (`value` and `onChange` are the
+ * caller's state; the arrow keys, Home and End move between tabs) or links (`href`, or `render` to
+ * draw the app's own router `<Link>`; `active` on an item, or `value`, marks the current one, which
+ * gets `aria-current`). `variant="pill"` fills the current tab instead, with no rule, for under a
+ * `PageHeader` or as a site's section nav, and takes a `size`; `orientation="vertical"` stacks the
+ * pills for a `SidebarLayout` rail. An item may carry a `count`, and a button one `disabled` (with a
+ * `title` for the reason); `disabled` on the row disables every tab. `label` names the tab list.
+ * The panel is the caller's: give it `role="tabpanel"`, and a tab `controls` to point at it.
+ */
+export function Tabs({ variant = "underline", size = "md", orientation = "horizontal", ...props }) {
+    const pill = variant === "pill";
+    const stacked = pill && orientation === "vertical";
+    return (_jsx(Switcher, { ...props, parts: {
+            group: "tablist",
+            item: "tab",
+            vertical: stacked,
+            stacked,
+            root: rootClass(pill, stacked),
+            option: (active, disabled) => pill
+                ? pillTabClass(active, disabled, size)
+                : cx(BASE, active ? ON : OFF, !active && !disabled && OFF_LIVE),
+        } }));
+}
+function rootClass(pill, stacked) {
+    if (stacked)
+        return "flex flex-col gap-1";
+    return pill ? "flex flex-wrap gap-1" : "flex flex-wrap gap-x-5 border-b border-slate-200 text-sm";
+}

package/dist/TextLink.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type LinkRender } from "./link.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+import { type TextTone } from "./typography.js";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export declare const linkClass: string;
+/**
+ * Stretches a link's hit area over its nearest `relative` ancestor (a table row, a card), so the
+ * whole of it opens the link. Add it to the one link in the row; the ancestor needs `relative`.
+ * `link-stretch` marks the link, so a `TableRow` or `Card` that lifts its other links and buttons
+ * above it leaves this one alone.
+ */
+export declare const linkStretchClass = "link-stretch after:absolute after:inset-0";
+export type TextLinkSize = Size;
+type TextLinkProps = {
+    /**
+     * The link's own type size: `sm` is `text-xs`, `md` `text-sm` and `lg` `text-base`. Left out, it
+     * takes the size of the text around it: a link inside prose has no default size.
+     */
+    size?: TextLinkSize | undefined;
+    /**
+     * A meaning's colour, as on the inline roles: `warn` for a warning link, `danger`, `positive`,
+     * `info` or `muted`. Left out, the link is the accent colour.
+     */
+    tone?: TextTone | undefined;
+    /** The monospace face, for a path, an id or a command. */
+    mono?: boolean | undefined;
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+    /** The link covers its nearest `relative` ancestor, so the whole row or card is the click target. */
+    stretch?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"a">, "href">> & ({
+    /** Where the link goes. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/terms" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Where the link goes. */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/terms" {...p} />`. */
+    render: LinkRender;
+});
+/**
+ * An inline text link in the accent colour. Every anchor prop goes on the `<a>`. With `render` it
+ * draws the app's own router `<Link>` instead (`render={(p) => <Link to="/terms" {...p} />}`).
+ * `size` pins the type size (`sm`, `md` or `lg`), `tone` gives it a meaning's colour and `mono` sets the
+ * monospace face.
+ */
+export declare function TextLink({ size, tone, mono, external, stretch, href, render, children, ...rest }: TextLinkProps): ReactElement;
+export {};

package/dist/TextLink.js

@@ -0,0 +1,37 @@
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+import { TEXT_TONE } from "./typography.js";
+const LINK = "rounded font-medium underline-offset-2 transition-colors";
+/** The classes of an inline text link, for a router's own <Link> that should look like one. */
+export const linkClass = cx(LINK, "text-violet-600 hover:text-violet-700", focusRing);
+// A toned link takes its tone's text colour, shared with Table's cells and the inline roles, and
+// underlines on hover in place of a hover shade.
+const toneClass = (tone) => cx(LINK, TEXT_TONE[tone], "hover:underline", focusRing);
+/**
+ * Stretches a link's hit area over its nearest `relative` ancestor (a table row, a card), so the
+ * whole of it opens the link. Add it to the one link in the row; the ancestor needs `relative`.
+ * `link-stretch` marks the link, so a `TableRow` or `Card` that lifts its other links and buttons
+ * above it leaves this one alone.
+ */
+export const linkStretchClass = "link-stretch after:absolute after:inset-0";
+const SIZE = {
+    sm: "text-xs/4",
+    md: "text-sm/5",
+    lg: "text-base/6",
+};
+/**
+ * An inline text link in the accent colour. Every anchor prop goes on the `<a>`. With `render` it
+ * draws the app's own router `<Link>` instead (`render={(p) => <Link to="/terms" {...p} />}`).
+ * `size` pins the type size (`sm`, `md` or `lg`), `tone` gives it a meaning's colour and `mono` sets the
+ * monospace face.
+ */
+export function TextLink({ size, tone, mono = false, external = false, stretch = false, href, render, children, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        external,
+        className: cx(tone ? toneClass(tone) : linkClass, size && SIZE[size], mono && "font-mono", stretch && linkStretchClass),
+        children,
+    });
+}

package/dist/Textarea.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type ControlProps } from "./control.js";
+import type { Unstyled } from "./props.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
+export declare function Textarea({ size, width, ...rest }: ControlProps & Unstyled<Omit<ComponentPropsWithoutRef<"textarea">, "width">>): ReactElement;

package/dist/Textarea.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CONTROL_PAD, controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** A multi-line text input, styled like `Input`. `rows` defaults to 3. Takes `size` and `width` too. */
+export function Textarea({ size = "md", width = "full", ...rest }) {
+    return (_jsx("textarea", { rows: 3, ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x) }));
+}

package/dist/Timeline.d.ts

@@ -0,0 +1,27 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { CalloutTone } from "./Callout.js";
+import type { Passthrough } from "./props.js";
+/**
+ * A vertical list of events, newest or oldest first as the caller orders them. A named `<ol>` of
+ * `TimelineItem`s on a rail; with no children it draws `empty` instead of an empty list.
+ */
+export declare function Timeline({ label, empty, children, ...rest }: {
+    /** Names the list (`aria-label`), e.g. "Status history". */
+    label: string;
+    /** Drawn in place of the list when there are no items. */
+    empty?: ReactNode;
+    children?: ReactNode;
+} & Passthrough): ReactElement | null;
+/**
+ * One event: a `title` (a `Pill`, a heading), a `time` the app has already formatted, and the
+ * `children` as a note under them. `tone` colours the marker dot with the Callout's set.
+ */
+export declare function TimelineItem({ title, time, tone, children, ...rest }: {
+    /** What happened: text, a `Pill` or a heading. */
+    title: ReactNode;
+    /** When, already formatted by the app, small and muted beside the title. */
+    time?: ReactNode;
+    /** The marker dot's colour. Defaults to `neutral`, a plain ring. */
+    tone?: CalloutTone;
+    children?: ReactNode;
+} & Passthrough): ReactElement;

package/dist/Timeline.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { cx } from "./cx.js";
+// The marker's colour is the tone's text colour, which every theme already remaps, drawn as a
+// solid dot; `neutral` is the ring.
+const DOT = {
+    neutral: "border-slate-300 bg-white",
+    info: "border-current bg-current text-blue-700",
+    positive: "border-current bg-current text-emerald-700",
+    warn: "border-current bg-current text-amber-700",
+    danger: "border-current bg-current text-red-700",
+};
+/**
+ * A vertical list of events, newest or oldest first as the caller orders them. A named `<ol>` of
+ * `TimelineItem`s on a rail; with no children it draws `empty` instead of an empty list.
+ */
+export function Timeline({ label, empty, children, ...rest }) {
+    if (Children.toArray(children).length === 0) {
+        return empty == null ? null : _jsx(_Fragment, { children: empty });
+    }
+    return (_jsx("ol", { ...rest, "aria-label": label, className: "flex flex-col", children: children }));
+}
+/**
+ * One event: a `title` (a `Pill`, a heading), a `time` the app has already formatted, and the
+ * `children` as a note under them. `tone` colours the marker dot with the Callout's set.
+ */
+export function TimelineItem({ title, time, tone = "neutral", children, ...rest }) {
+    return (_jsxs("li", { ...rest, className: "relative border-l border-slate-300 pb-5 pl-5 last:border-transparent last:pb-0", children: [_jsx("span", { "aria-hidden": "true", className: cx("absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full border-2", DOT[tone]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [_jsx("span", { className: "text-sm font-medium text-slate-900", children: title }), time != null && _jsx("span", { className: "text-xs tabular-nums text-slate-500", children: time })] }), children != null && _jsx("div", { className: "mt-1 text-sm text-slate-700", children: children })] }));
+}

package/dist/Video.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement, VideoHTMLAttributes } from "react";
+import type { Unstyled } from "./props.js";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export declare function Video({ src, captions, children, ...rest }: {
+    /** The video file, the app's own. */
+    src: string;
+    /** A WebVTT file, offered as the default captions track. */
+    captions?: string | undefined;
+} & Unstyled<Omit<VideoHTMLAttributes<HTMLVideoElement>, "src" | "controls">>): ReactElement;

package/dist/Video.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A `<video>` with controls, full width and rounded; it loads metadata only, so the page does not
+ * pull the file until it is played. `src` is the app's own video; `captions` is a WebVTT file,
+ * offered as the default track. `children` is the fallback for a browser that cannot play it.
+ */
+export function Video({ src, captions, children, ...rest }) {
+    return (_jsxs("video", { controls: true, preload: "metadata", src: src, ...rest, className: "w-full rounded-lg", children: [captions && _jsx("track", { kind: "captions", src: captions, default: true }), children] }));
+}

package/dist/colourScheme.d.ts

@@ -0,0 +1,21 @@
+export type ColourScheme = "light" | "dark";
+/** The class each scheme puts on `<html>`: none for light and `dark` for dark, unless the app's theme says otherwise (a light theme with a scope class of its own). */
+export type ColourSchemeClasses = {
+    light: string;
+    dark: string;
+};
+/** The class for `scheme`: what to render on `<html>` on the server so the first paint is right. `""` for the default light scheme. */
+export declare function schemeClass(scheme: ColourScheme, schemes?: ColourSchemeClasses): string;
+/** Which scheme `root` is in: dark when it carries the dark class, else light. */
+export declare function appliedColourScheme(root?: HTMLElement, schemes?: ColourSchemeClasses): ColourScheme;
+/** Put `scheme` on `root` (the `<html>` element by default): its class from `schemes` (default `dark` for dark and none for light), the other scheme's class taken off, and `color-scheme` so native controls and scrollbars follow. */
+export declare function applyColourScheme(scheme: ColourScheme, root?: HTMLElement, schemes?: ColourSchemeClasses): void;
+/** The stored choice, else the system preference. `fallback` (default `"light"`) is for when neither is available: server rendering, or storage that throws with no `matchMedia`. */
+export declare function readColourScheme(fallback?: ColourScheme): ColourScheme;
+/** Remember `scheme` for the next visit. A storage error is swallowed, so private mode does not crash. */
+export declare function storeColourScheme(scheme: ColourScheme): void;
+/**
+ * JavaScript to inline in `<head>`, before first paint: applies the stored scheme, else the
+ * system one, to `<html>` as `applyColourScheme` does. Without it a light user sees a dark flash.
+ */
+export declare const colourSchemeScript: string;

package/dist/colourScheme.js

@@ -0,0 +1,53 @@
+const STORAGE_KEY = "hackcove:colour-scheme";
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+const isScheme = (value) => value === "light" || value === "dark";
+const DEFAULT_CLASSES = { light: "", dark: "dark" };
+/** The class for `scheme`: what to render on `<html>` on the server so the first paint is right. `""` for the default light scheme. */
+export function schemeClass(scheme, schemes = DEFAULT_CLASSES) {
+    return schemes[scheme];
+}
+/** Which scheme `root` is in: dark when it carries the dark class, else light. */
+export function appliedColourScheme(root = document.documentElement, schemes = DEFAULT_CLASSES) {
+    return schemes.dark !== "" && root.classList.contains(schemes.dark) ? "dark" : "light";
+}
+/** Put `scheme` on `root` (the `<html>` element by default): its class from `schemes` (default `dark` for dark and none for light), the other scheme's class taken off, and `color-scheme` so native controls and scrollbars follow. */
+export function applyColourScheme(scheme, root = document.documentElement, schemes = DEFAULT_CLASSES) {
+    const other = scheme === "dark" ? "light" : "dark";
+    if (schemes[other] !== "")
+        root.classList.remove(schemes[other]);
+    if (schemes[scheme] !== "")
+        root.classList.add(schemes[scheme]);
+    root.style.colorScheme = scheme;
+}
+function storedScheme() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return isScheme(stored) ? stored : undefined;
+    }
+    catch {
+        return undefined; // storage blocked: private mode, or no window at all
+    }
+}
+function systemScheme() {
+    if (typeof matchMedia !== "function")
+        return undefined;
+    return matchMedia(DARK_QUERY).matches ? "dark" : "light";
+}
+/** The stored choice, else the system preference. `fallback` (default `"light"`) is for when neither is available: server rendering, or storage that throws with no `matchMedia`. */
+export function readColourScheme(fallback = "light") {
+    return storedScheme() ?? systemScheme() ?? fallback;
+}
+/** Remember `scheme` for the next visit. A storage error is swallowed, so private mode does not crash. */
+export function storeColourScheme(scheme) {
+    try {
+        localStorage.setItem(STORAGE_KEY, scheme);
+    }
+    catch {
+        // Not remembered; the page still switches for this visit.
+    }
+}
+/**
+ * JavaScript to inline in `<head>`, before first paint: applies the stored scheme, else the
+ * system one, to `<html>` as `applyColourScheme` does. Without it a light user sees a dark flash.
+ */
+export const colourSchemeScript = `(function(){var r=document.documentElement,s;try{s=localStorage.getItem(${JSON.stringify(STORAGE_KEY)})}catch(e){}if(s!=="light"&&s!=="dark")s=typeof matchMedia==="function"?matchMedia(${JSON.stringify(DARK_QUERY)}).matches?"dark":"light":null;if(s){r.classList.toggle("dark",s==="dark");r.style.colorScheme=s}})()`;