@hackcove/ui 0.2.4 → 0.2.6

package/dist/Select.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { controlClass } from "./control.js";
+import { CONTROL_PAD, controlClass } from "./control.js";
 import { cx } from "./cx.js";
-/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
-export function Select({ className, children, ...rest }) {
-    return (_jsx("select", { ...rest, className: cx(controlClass, "px-3", className), children: children }));
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. Takes `size` and `width` too. */
+export function Select({ size = "md", width = "full", className, children, ...rest }) {
+    return (_jsx("select", { ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x, className), children: children }));
 }

package/dist/SplitBar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { type BarSize, type BarTone } from "./ProgressBar.js";
+/**
+ * A bar split between two parties, `a` on the left and `b` on the right, each sized by its share of
+ * `a + b`. `label` names the split for a screen reader, which hears both percentages; give `names`
+ * (left, right) so it hears whose is whose. Put the parties' names under the bar yourself.
+ */
+export declare function SplitBar({ a, b, label, names, toneA, toneB, size, className, }: {
+    a: number;
+    b: number;
+    label: string;
+    /** The left and right parties, spoken before their percentages. */
+    names?: readonly [string, string];
+    /** Defaults to "negative". */
+    toneA?: BarTone;
+    /** Defaults to "positive". */
+    toneB?: BarTone;
+    /** Defaults to "lg". */
+    size?: BarSize;
+    className?: string;
+}): ReactElement;

package/dist/SplitBar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { BAR_FILL, BAR_TRACK, announcedPercent, sharePercent, } from "./ProgressBar.js";
+/**
+ * A bar split between two parties, `a` on the left and `b` on the right, each sized by its share of
+ * `a + b`. `label` names the split for a screen reader, which hears both percentages; give `names`
+ * (left, right) so it hears whose is whose. Put the parties' names under the bar yourself.
+ */
+export function SplitBar({ a, b, label, names, toneA = "negative", toneB = "positive", size = "lg", className, }) {
+    const shareA = sharePercent(a, a + b);
+    const shareB = a + b > 0 ? 100 - shareA : 0;
+    const percentA = announcedPercent(a, a + b);
+    const percentB = a + b > 0 ? 100 - percentA : 0;
+    return (_jsxs("div", { role: "img", "aria-label": `${label}: ${names ? `${names[0]} ${percentA}%, ${names[1]} ${percentB}%` : `${percentA}% / ${percentB}%`}`, className: cx("flex overflow-hidden rounded-full bg-slate-100", BAR_TRACK[size], className), children: [_jsx("div", { className: BAR_FILL[toneA], style: { width: `${shareA}%` } }), _jsx("div", { className: BAR_FILL[toneB], style: { width: `${shareB}%` } })] }));
+}

package/dist/StatTile.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/** The colour of a tile's value (and of its accent bar): plain ink, green or red. */
+export type StatTileTone = "neutral" | "positive" | "negative";
+/**
+ * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
+ * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
+ * tone. Pass the value already formatted.
+ */
+export declare function StatTile({ label, value, hint, tone, accent, className, ...rest }: {
+    label: ReactNode;
+    value: ReactNode;
+    hint?: ReactNode;
+    /** Defaults to "neutral". */
+    tone?: StatTileTone;
+    accent?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">): ReactElement;

package/dist/StatTile.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { BAR_FILL } from "./ProgressBar.js";
+const VALUE = {
+    neutral: "text-slate-900",
+    positive: "text-emerald-700",
+    negative: "text-red-700",
+};
+const BAR = {
+    neutral: BAR_FILL.accent,
+    positive: BAR_FILL.positive,
+    negative: BAR_FILL.negative,
+};
+/**
+ * One headline figure: an uppercase caption over a large tabular-nums value, with an optional
+ * hint line beneath. `tone` colours the value; `accent` adds a bar across the top edge in the same
+ * tone. Pass the value already formatted.
+ */
+export function StatTile({ label, value, hint, tone = "neutral", accent = false, className, ...rest }) {
+    return (_jsxs("div", { className: cx("relative overflow-hidden rounded-xl border border-slate-200/70 bg-white p-5 shadow-sm", className), ...rest, children: [accent && (_jsx("span", { "aria-hidden": "true", className: cx("absolute inset-x-0 top-0 h-1", BAR[tone]) })), _jsx("p", { className: "text-xs font-semibold uppercase tracking-wider text-slate-500", children: label }), _jsx("p", { className: cx("mt-2 text-3xl font-bold tabular-nums", VALUE[tone]), children: value }), hint != null && _jsx("p", { className: "mt-1 text-xs text-slate-500", children: hint })] }));
+}

package/dist/Table.d.ts

@@ -0,0 +1,48 @@
+import type { ReactElement, ReactNode } from "react";
+type Align = "start" | "end";
+declare const TONE: {
+    readonly default: "text-slate-700";
+    readonly strong: "font-medium text-slate-900";
+    readonly muted: "text-slate-500";
+};
+/**
+ * The classes of the one link in a row whose hit area covers the row, so the whole row is the
+ * click target. For a router's own `<Link>`; `TableRow` is the `relative` ancestor it stretches to.
+ */
+export declare const rowLinkClass: string;
+/**
+ * A list of records in a rounded, bordered card that scrolls sideways on a narrow screen. Compose it
+ * from `TableHead`, `TableBody`, `TableRow`, `TableHeaderCell` and `TableCell`. `caption` names the
+ * table for assistive tech and is not drawn.
+ */
+export declare function Table({ caption, className, children, }: {
+    caption?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): ReactElement;
+/** The `<thead>`: small uppercase column titles on a tinted strip. Holds one `TableRow` of `TableHeaderCell`s. */
+export declare function TableHead({ children }: {
+    children: ReactNode;
+}): ReactElement;
+/** The `<tbody>`: the rows, each with a line above it and a fill on hover. */
+export declare function TableBody({ children }: {
+    children: ReactNode;
+}): ReactElement;
+/** A `<tr>`, `relative`: the anchor a `rowLinkClass` link stretches to. Use it in the head and the body. */
+export declare function TableRow({ children }: {
+    children: ReactNode;
+}): ReactElement;
+/** A column title, `<th scope="col">`. */
+export declare function TableHeaderCell({ align, children, }: {
+    align?: Align | undefined;
+    children?: ReactNode;
+}): ReactElement;
+/** A `<td>`. `tone` is the text weight and colour; `numeric` sets tabular figures, `mono` a small mono face. */
+export declare function TableCell({ align, tone, numeric, mono, children, }: {
+    align?: Align | undefined;
+    tone?: keyof typeof TONE | undefined;
+    numeric?: boolean | undefined;
+    mono?: boolean | undefined;
+    children?: ReactNode;
+}): ReactElement;
+export {};

package/dist/Table.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { linkClass, linkStretchClass } from "./TextLink.js";
+const ALIGN = { start: "text-left", end: "text-right" };
+const TONE = {
+    default: "text-slate-700",
+    strong: "font-medium text-slate-900",
+    muted: "text-slate-500",
+};
+/**
+ * The classes of the one link in a row whose hit area covers the row, so the whole row is the
+ * click target. For a router's own `<Link>`; `TableRow` is the `relative` ancestor it stretches to.
+ */
+export const rowLinkClass = cx(linkClass, linkStretchClass);
+/**
+ * A list of records in a rounded, bordered card that scrolls sideways on a narrow screen. Compose it
+ * from `TableHead`, `TableBody`, `TableRow`, `TableHeaderCell` and `TableCell`. `caption` names the
+ * table for assistive tech and is not drawn.
+ */
+export function Table({ caption, className, children, }) {
+    return (_jsx("div", { className: cx("overflow-x-auto rounded-xl border border-slate-200/70 bg-white shadow-sm", className), children: _jsxs("table", { 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. Holds one `TableRow` of `TableHeaderCell`s. */
+export function TableHead({ children }) {
+    return (_jsx("thead", { className: "bg-slate-50 text-xs uppercase tracking-wide text-slate-500", children: children }));
+}
+/** The `<tbody>`: the rows, each with a line above it and a fill on hover. */
+export function TableBody({ children }) {
+    return (_jsx("tbody", { className: "[&>tr:hover]:bg-slate-50 [&>tr]:border-t [&>tr]:border-slate-200/70", children: children }));
+}
+/** A `<tr>`, `relative`: the anchor a `rowLinkClass` link stretches to. Use it in the head and the body. */
+export function TableRow({ children }) {
+    return _jsx("tr", { className: "relative", children: children });
+}
+/** A column title, `<th scope="col">`. */
+export function TableHeaderCell({ align = "start", children, }) {
+    return (_jsx("th", { scope: "col", className: cx("whitespace-nowrap px-4 py-2.5 font-medium", ALIGN[align]), children: children }));
+}
+/** A `<td>`. `tone` is the text weight and colour; `numeric` sets tabular figures, `mono` a small mono face. */
+export function TableCell({ align = "start", tone = "default", numeric = false, mono = false, children, }) {
+    return (_jsx("td", { className: cx("whitespace-nowrap px-4 py-3", ALIGN[align], TONE[tone], numeric && "tabular-nums", mono && "font-mono text-xs"), children: children }));
+}

package/dist/Tabs.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import { type SwitchItem, type SwitchProps } from "./switcher.js";
+/** One tab of a Tabs row. See `SwitchItem`. */
+export type Tab = SwitchItem;
+/**
+ * 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>`; `value` marks the current one, which gets `aria-current`).
+ * `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(props: SwitchProps): ReactElement;

package/dist/Tabs.js

@@ -0,0 +1,23 @@
+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 hover:text-violet-700";
+/**
+ * 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>`; `value` marks the current one, which gets `aria-current`).
+ * `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(props) {
+    return (_jsx(Switcher, { ...props, parts: {
+            group: "tablist",
+            item: "tab",
+            vertical: false,
+            root: "flex flex-wrap gap-x-5 border-b border-slate-200 text-sm",
+            option: (active) => cx(BASE, active ? ON : OFF),
+        } }));
+}

package/dist/TextLink.d.ts

@@ -1,12 +1,27 @@
 import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type LinkRender } from "./link.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`.
+ */
+export declare const linkStretchClass = "after:absolute after:inset-0";
 type TextLinkProps = {
     /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
     external?: boolean | undefined;
-} & ComponentPropsWithoutRef<"a"> & {
+    /** The link covers its nearest `relative` ancestor, so the whole row or card is the click target. */
+    stretch?: boolean | undefined;
+} & Omit<ComponentPropsWithoutRef<"a">, "href"> & ({
     href: string;
-};
-/** An inline text link in the accent colour. Every anchor prop goes on the `<a>`. */
-export declare function TextLink({ external, className, children, ...rest }: TextLinkProps): ReactElement;
+    render?: LinkRender | undefined;
+} | {
+    href?: string | undefined;
+    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} />}`).
+ */
+export declare function TextLink({ external, stretch, href, render, className, children, ...rest }: TextLinkProps): ReactElement;
 export {};

package/dist/TextLink.js

@@ -1,8 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
 /** The classes of an inline text link, for a router's own <Link> that should look like one. */
 export const linkClass = cx("rounded font-medium text-violet-600 underline-offset-2 transition-colors hover:text-violet-700", focusRing);
-/** An inline text link in the accent colour. Every anchor prop goes on the `<a>`. */
-export function TextLink({ external = false, className, children, ...rest }) {
-    return (_jsx("a", { className: cx(linkClass, className), ...(external ? { target: "_blank", rel: "noreferrer" } : {}), ...rest, children: children }));
+/**
+ * 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`.
+ */
+export const linkStretchClass = "after:absolute after:inset-0";
+/**
+ * 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} />}`).
+ */
+export function TextLink({ external = false, stretch = false, href, render, className, children, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        external,
+        className: cx(linkClass, stretch && linkStretchClass, className),
+        children,
+    });
 }

package/dist/Textarea.d.ts

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

package/dist/Textarea.js

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

package/dist/Timeline.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement, type ReactNode } from "react";
+/**
+ * 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, }: {
+    /** 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;
+}): 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.
+ */
+export declare function TimelineItem({ title, time, children, }: {
+    title: ReactNode;
+    time?: ReactNode;
+    children?: ReactNode;
+}): ReactElement;

package/dist/Timeline.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+/**
+ * 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, }) {
+    if (Children.toArray(children).length === 0) {
+        return empty == null ? null : _jsx(_Fragment, { children: empty });
+    }
+    return (_jsx("ol", { "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.
+ */
+export function TimelineItem({ title, time, children, }) {
+    return (_jsxs("li", { className: "relative border-l border-slate-300 pb-5 pl-5 last:border-transparent last:pb-0", children: [_jsx("span", { "aria-hidden": "true", className: "absolute -left-[5px] top-1.5 h-2.5 w-2.5 rounded-full border-2 border-slate-300 bg-white" }), _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/colourScheme.d.ts

@@ -1,6 +1,15 @@
 export type ColourScheme = "light" | "dark";
-/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
-export declare function applyColourScheme(scheme: ColourScheme, root?: HTMLElement): void;
+/** 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. */

package/dist/colourScheme.js

@@ -1,9 +1,22 @@
 const STORAGE_KEY = "hackcove:colour-scheme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
 const isScheme = (value) => value === "light" || value === "dark";
-/** Put `scheme` on `root` (the `<html>` element by default): the `dark` class, and `color-scheme` so native controls and scrollbars follow. */
-export function applyColourScheme(scheme, root = document.documentElement) {
-    root.classList.toggle("dark", scheme === "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() {

package/dist/control.d.ts

@@ -1,2 +1,19 @@
-/** Shared look of text controls; each control adds its own horizontal padding. */
-export declare const controlClass = "w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";
+export type ControlSize = "md" | "sm";
+/** `full` fills the parent (the default); `auto` is as wide as the content, or as wide as a `className` width says; the rest are fixed. */
+export type ControlWidth = "full" | "auto" | "xs" | "sm" | "md" | "lg";
+/** The props `Input`, `Select` and `Textarea` share. They replace the native `size` and `width`. */
+export type ControlProps = {
+    /** `sm` is compact, `text-xs` with less padding, for dense forms and table rows. */
+    size?: ControlSize | undefined;
+    /** `full` (default) fills the parent; `xs`, `sm`, `md`, `lg` are fixed; `auto` is as wide as its content, or its `className` width. */
+    width?: ControlWidth | undefined;
+};
+/** One width class per control, so a fixed width never fights `w-full`. `auto` has none. */
+export declare const CONTROL_WIDTH: Record<ControlWidth, string | undefined>;
+/** The horizontal padding of a control, and of an `Input`'s icon gutter. */
+export declare const CONTROL_PAD: Record<ControlSize, {
+    x: string;
+    icon: string;
+}>;
+/** Shared look of text controls; `size` sets the height and type, `width` the one width class. */
+export declare function controlClass(size?: ControlSize, width?: ControlWidth): string;

package/dist/control.js

@@ -1,3 +1,26 @@
 import { focusRing } from "./cx.js";
-/** Shared look of text controls; each control adds its own horizontal padding. */
-export const controlClass = `w-full rounded-lg border border-slate-300 bg-white py-2 text-sm text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`;
+const SIZE = { md: "py-2 text-sm", sm: "py-1 text-xs" };
+/** One width class per control, so a fixed width never fights `w-full`. `auto` has none. */
+export const CONTROL_WIDTH = {
+    full: "w-full",
+    auto: undefined,
+    xs: "w-20",
+    sm: "w-28",
+    md: "w-36",
+    lg: "w-48",
+};
+/** The horizontal padding of a control, and of an `Input`'s icon gutter. */
+export const CONTROL_PAD = {
+    md: { x: "px-3", icon: "pr-3 pl-9" },
+    sm: { x: "px-2", icon: "pr-2 pl-7" },
+};
+/** Shared look of text controls; `size` sets the height and type, `width` the one width class. */
+export function controlClass(size = "md", width = "full") {
+    return [
+        CONTROL_WIDTH[width],
+        SIZE[size],
+        `rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`,
+    ]
+        .filter(Boolean)
+        .join(" ");
+}

package/dist/index.d.ts

@@ -1,37 +1,53 @@
-export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic, type PillTone } from "./ui.js";
+export { Badge } from "./Badge.js";
+export { StatTile, type StatTileTone } from "./StatTile.js";
+export { ProgressBar, type BarSize, type BarTone } from "./ProgressBar.js";
+export { SplitBar } from "./SplitBar.js";
 export { Markdown } from "./Markdown.js";
-export { AppShell, appShellRootClass } from "./AppShell.js";
+export { AppShell, AppShellBrand, appShellRootClass, appShellRootClassFor } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
 export { Section, Stack, type StackGap, type StackWidth } from "./Stack.js";
-export { Button, buttonClass, type ButtonVariant } from "./Button.js";
+export { Button, buttonClass, type ButtonLook, type ButtonSize, type ButtonTone, type ButtonVariant, } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { ButtonLink } from "./ButtonLink.js";
+export { type LinkRender, type LinkRenderProps } from "./link.js";
 export { Avatar, avatarColourClass, initialsOf, type AvatarSize } from "./Avatar.js";
-export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
+export { Breadcrumbs, crumbLinkClass, type Crumb } from "./Breadcrumbs.js";
 export { BulletList } from "./BulletList.js";
 export { Callout, type CalloutTone } from "./Callout.js";
+export { ListRow, type ListRowProps } from "./ListRow.js";
+export { rowLinkClass, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { Timeline, TimelineItem } from "./Timeline.js";
 export { Code } from "./Code.js";
 export { Divider } from "./Divider.js";
+export { PageFade, startPageTransition } from "./PageFade.js";
 export { Dialog, type DialogProps } from "./Dialog.js";
+export { Drawer, type DrawerProps } from "./Drawer.js";
 export { IconButton } from "./IconButton.js";
 export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
-export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, type ColourScheme, } from "./colourScheme.js";
+export { applyColourScheme, schemeClass, type ColourSchemeClasses, colourSchemeScript, readColourScheme, storeColourScheme, type ColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass, type NavTab } from "./NavTabs.js";
+export { Tabs, type Tab } from "./Tabs.js";
+export { SegmentedControl, type Segment } from "./SegmentedControl.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
 export { FieldDialog, type FieldDialogProps } from "./FieldDialog.js";
 export { Input } from "./Input.js";
+export type { ControlSize, ControlWidth } from "./control.js";
 export { InlineLinks, type InlineLinksSeparator } from "./InlineLinks.js";
 export { Kbd } from "./Kbd.js";
 export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Video } from "./Video.js";
-export { linkClass, TextLink } from "./TextLink.js";
+export { linkClass, linkStretchClass, TextLink } from "./TextLink.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Subtitle, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
 export { DatePicker, type DatePickerProps } from "./DatePicker.js";

package/dist/index.js

@@ -1,25 +1,40 @@
 export { Card, EpicHeader, Empty, PageTitle, Pill, groupByEpic } from "./ui.js";
+export { Badge } from "./Badge.js";
+export { StatTile } from "./StatTile.js";
+export { ProgressBar } from "./ProgressBar.js";
+export { SplitBar } from "./SplitBar.js";
 export { Markdown } from "./Markdown.js";
-export { AppShell, appShellRootClass } from "./AppShell.js";
+export { AppShell, AppShellBrand, appShellRootClass, appShellRootClassFor } from "./AppShell.js";
 export { Container } from "./Container.js";
 export { PageHeader } from "./PageHeader.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, SidebarLayout, } from "./PageLayouts.js";
 export { Section, Stack } from "./Stack.js";
-export { Button, buttonClass } from "./Button.js";
+export { Button, buttonClass, } from "./Button.js";
+export { ButtonGroup } from "./ButtonGroup.js";
+export { ButtonLink } from "./ButtonLink.js";
+export {} from "./link.js";
 export { Avatar, avatarColourClass, initialsOf } from "./Avatar.js";
 export { Breadcrumbs, crumbLinkClass } from "./Breadcrumbs.js";
 export { BulletList } from "./BulletList.js";
 export { Callout } from "./Callout.js";
+export { ListRow } from "./ListRow.js";
+export { rowLinkClass, Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { Timeline, TimelineItem } from "./Timeline.js";
 export { Code } from "./Code.js";
 export { Divider } from "./Divider.js";
+export { PageFade, startPageTransition } from "./PageFade.js";
 export { Dialog } from "./Dialog.js";
+export { Drawer } from "./Drawer.js";
 export { IconButton } from "./IconButton.js";
 export { ColourSchemeToggle } from "./ColourSchemeToggle.js";
-export { applyColourScheme, colourSchemeScript, readColourScheme, storeColourScheme, } from "./colourScheme.js";
+export { applyColourScheme, schemeClass, colourSchemeScript, readColourScheme, storeColourScheme, } from "./colourScheme.js";
 export { NavTabs, navTabClass } from "./NavTabs.js";
+export { Tabs } from "./Tabs.js";
+export { SegmentedControl } from "./SegmentedControl.js";
 export { ToggleChip } from "./ToggleChip.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
 export { CopyLine } from "./CopyLine.js";
 export { Field } from "./Field.js";
@@ -31,7 +46,7 @@ export { KeyValue, KeyValueList } from "./KeyValueList.js";
 export { Select } from "./Select.js";
 export { Textarea } from "./Textarea.js";
 export { Video } from "./Video.js";
-export { linkClass, TextLink } from "./TextLink.js";
+export { linkClass, linkStretchClass, TextLink } from "./TextLink.js";
 export { Body, BodyStrong, Caption, Display, Lead, ModalHeading, Overline, PageHeading, SectionHeading, SubsectionHeading, Subtitle, } from "./typography.js";
 export { DateField } from "./DateField.js";
 export { DatePicker } from "./DatePicker.js";

package/dist/link.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/**
+ * What a `render` function receives to draw a link with the app's own router `<Link>`: the
+ * component's classes, its label as `children`, and (for a tab that is current or a link that is
+ * external) `aria-current`, `target` and `rel`. Spread it on the router's link:
+ * `render: (props) => <Link to="/quotes" {...props} />`. `@hackcove/ui` has no router dependency.
+ */
+export type LinkRenderProps = Omit<ComponentPropsWithoutRef<"a">, "href" | "className" | "children"> & {
+    className: string;
+    children: ReactNode;
+};
+/** Draws one link. The component hands it `LinkRenderProps`; it returns the app's own link element. */
+export type LinkRender = (props: LinkRenderProps) => ReactNode;
+/**
+ * A link drawn by `render` when there is one, otherwise a plain `<a href>`. `external` adds
+ * `target="_blank"` and `rel="noreferrer"` to either, unless the caller passes its own.
+ */
+export declare function renderLink({ href, render, external, ...props }: LinkRenderProps & {
+    href?: string | undefined;
+    render?: LinkRender | undefined;
+    external?: boolean | undefined;
+}): ReactElement;

package/dist/link.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A link drawn by `render` when there is one, otherwise a plain `<a href>`. `external` adds
+ * `target="_blank"` and `rel="noreferrer"` to either, unless the caller passes its own.
+ */
+export function renderLink({ href, render, external = false, ...props }) {
+    const all = external ? { target: "_blank", rel: "noreferrer", ...props } : props;
+    if (render)
+        return _jsx(_Fragment, { children: render(all) });
+    return _jsx("a", { ...(href === undefined ? {} : { href }), ...all });
+}