@hackcove/ui 0.2.3 → 0.2.5

package/dist/Markdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// A minimal, SAFE markdown renderer for the standup (headings / bullets / bold). No
+// A minimal, SAFE markdown renderer (headings / bullets / bold). No
 // dangerouslySetInnerHTML — text is rendered as React nodes, so it can't inject HTML.
 function inline(text) {
     return text.split(/(\*\*[^*]+\*\*)/g).map((p, i) => p.startsWith("**") && p.endsWith("**") ? (_jsx("strong", { className: "font-semibold text-slate-900", children: p.slice(2, -2) }, i)) : (_jsx("span", { children: p }, i)));

package/dist/NavTabs.d.ts

@@ -1,13 +1,24 @@
 import type { ReactElement, ReactNode } from "react";
-/** One pill link in a NavTabs row. */
+import { type LinkRender } from "./link.js";
+/**
+ * One pill link in a NavTabs row: a plain `<a href>`, or with `render` the app's own router
+ * `<Link>` (`render: (p) => <Link to="/stores" {...p} />`, which gets the tab's classes and
+ * `aria-current`; `href` is then not used). `external` opens in a new tab.
+ */
 export type NavTab = {
     label: ReactNode;
-    href: string;
     active?: boolean;
-};
+    external?: boolean;
+} & ({
+    href: string;
+    render?: LinkRender;
+} | {
+    href?: string;
+    render: LinkRender;
+});
 /** The classes of one tab, for a router's own <Link>. */
 export declare function navTabClass(active: boolean): string;
-/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+/** A row of pill links where the active one is filled. Plain <a> by default; a tab's `render` draws a router's Link. */
 export declare function NavTabs({ items, label, className, }: {
     items: NavTab[];
     /** The accessible name of the nav landmark. */

package/dist/NavTabs.js

@@ -1,11 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
 const BASE = `rounded-lg px-3 py-1.5 transition ${focusRing}`;
 /** The classes of one tab, for a router's own <Link>. */
 export function navTabClass(active) {
     return cx(BASE, active ? "bg-slate-100 font-medium text-slate-900" : "text-slate-600 hover:bg-slate-100");
 }
-/** A row of pill links where the active one is filled. Renders plain <a>; use navTabClass with a router's Link. */
+/** A row of pill links where the active one is filled. Plain <a> by default; a tab's `render` draws a router's Link. */
 export function NavTabs({ items, label, className, }) {
-    return (_jsx("nav", { "aria-label": label, className: cx("flex flex-wrap gap-1 text-sm", className), children: items.map((item) => (_jsx("a", { href: item.href, className: navTabClass(!!item.active), "aria-current": item.active ? "page" : undefined, children: item.label }, item.href))) }));
+    return (_jsx("nav", { "aria-label": label, className: cx("flex flex-wrap gap-1 text-sm", className), children: items.map((item, index) => (_jsx(Tab, { item: item }, item.href ?? index))) }));
+}
+function Tab({ item }) {
+    return renderLink({
+        href: item.href,
+        render: item.render,
+        external: item.external,
+        className: navTabClass(!!item.active),
+        "aria-current": item.active ? "page" : undefined,
+        children: item.label,
+    });
 }

package/dist/PageFade.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+/**
+ * The page's content area, named for the View Transitions API so a route change cross-fades it
+ * while the frame around it (header, footer) stays put. Wrap what changes between pages, once per
+ * page: two on one page need a different `name` each, or the browser skips the transition.
+ * The fade runs only when the navigation is wrapped in a view transition: `startPageTransition`,
+ * or a router's own option (TanStack Router `viewTransition`, React Router's `viewTransition` prop,
+ * Astro's `ClientRouter`). Otherwise, or where the browser has no View Transitions, it renders
+ * and behaves as a plain `<div>`. A `view-transition-name` makes the div a stacking context, so a
+ * dropdown inside it cannot rise above a sticky header outside it: portal overlays to the body. Under `prefers-reduced-motion: reduce` this content swaps with no fade; a router's own
+ * transition of the rest of the page is the router's to quiet.
+ */
+export declare function PageFade({ name, className, children, ...rest }: {
+    /** The view-transition name, a CSS identifier (letters, digits, `-`, `_`). */
+    name?: string;
+    children: ReactNode;
+} & HTMLAttributes<HTMLDivElement>): ReactElement;
+/**
+ * Run `update` inside a view transition, so a `PageFade` cross-fades. `update` is a synchronous
+ * state change, flushed at once as the browser needs the new DOM; for a router's navigation, which
+ * is async, use the router's own view-transition option instead. Where the browser has
+ * no View Transitions, or the user prefers reduced motion, `update` just runs. Call it from an event
+ * handler, not during render.
+ */
+export declare function startPageTransition(update: () => void): void;

package/dist/PageFade.js

@@ -0,0 +1,39 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flushSync } from "react-dom";
+const DEFAULT_NAME = "hc-page";
+// The one place the View Transitions pseudo-elements can be styled: a stylesheet, as Tailwind
+// classes cannot reach `::view-transition-*`. The browser's own cross-fade does the fading; this
+// names the element and, under reduced motion, switches the animations off so the content swaps.
+// No colour in it. Where the API is missing the rules are never matched.
+const css = (name) => `[data-page-fade="${name}"]{view-transition-name:${name}}
+@media (prefers-reduced-motion:reduce){::view-transition-group(${name}),::view-transition-old(${name}),::view-transition-new(${name}){animation:none}}`;
+/**
+ * The page's content area, named for the View Transitions API so a route change cross-fades it
+ * while the frame around it (header, footer) stays put. Wrap what changes between pages, once per
+ * page: two on one page need a different `name` each, or the browser skips the transition.
+ * The fade runs only when the navigation is wrapped in a view transition: `startPageTransition`,
+ * or a router's own option (TanStack Router `viewTransition`, React Router's `viewTransition` prop,
+ * Astro's `ClientRouter`). Otherwise, or where the browser has no View Transitions, it renders
+ * and behaves as a plain `<div>`. A `view-transition-name` makes the div a stacking context, so a
+ * dropdown inside it cannot rise above a sticky header outside it: portal overlays to the body. Under `prefers-reduced-motion: reduce` this content swaps with no fade; a router's own
+ * transition of the rest of the page is the router's to quiet.
+ */
+export function PageFade({ name = DEFAULT_NAME, className, children, ...rest }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css(name) }), _jsx("div", { "data-page-fade": name, className: className, ...rest, children: children })] }));
+}
+/**
+ * Run `update` inside a view transition, so a `PageFade` cross-fades. `update` is a synchronous
+ * state change, flushed at once as the browser needs the new DOM; for a router's navigation, which
+ * is async, use the router's own view-transition option instead. Where the browser has
+ * no View Transitions, or the user prefers reduced motion, `update` just runs. Call it from an event
+ * handler, not during render.
+ */
+export function startPageTransition(update) {
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+    if (reduce || typeof document.startViewTransition !== "function") {
+        update();
+        return;
+    }
+    // A skipped transition (a second one starting, a hidden tab) rejects `ready`; the update still ran.
+    document.startViewTransition(() => flushSync(update)).ready.catch(() => { });
+}

package/dist/PageLayouts.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 import { type PageHeaderProps } from "./PageHeader.js";
+import { type StackGap } from "./Stack.js";
 /** A list page: header, an optional `filters` slot, then the list, or `empty` when `isEmpty`. */
 export declare function ListLayout({ filters, empty, isEmpty, children, ...header }: PageHeaderProps & {
     filters?: ReactNode;
@@ -18,6 +19,17 @@ export declare function FormLayout({ actions, children, breadcrumbs, title, subt
     actions?: ReactNode;
     children: ReactNode;
 } & Omit<ComponentPropsWithoutRef<"form">, "title">): ReactElement;
+/**
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
+ * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
+ * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
+ * stay beside the text instead of at the Container's far edge. `className` goes on the column.
+ */
+export declare function ProseLayout({ gap, className, children, ...header }: PageHeaderProps & {
+    gap?: StackGap | undefined;
+    className?: string;
+    children?: ReactNode;
+}): ReactElement;
 declare const COLUMNS: {
     readonly 2: "lg:grid-cols-2";
     readonly 3: "lg:grid-cols-3";
@@ -33,12 +45,21 @@ export declare function CardGrid({ columns, className, children, }: {
  * A full-height `rail` beside the `children` canvas. Render it in `<AppShell bleed>`: it fills what
  * the shell's flex column leaves under the header, so no header height is written down. The rail is
  * `md:w-60` and stacks above the canvas below `md`; the canvas keeps the Container's padding.
+ *
+ * It deliberately breaks the shared left edge from `md` up: a full-height rail needs the viewport's
+ * left edge, so the rail starts at x=0 and the canvas at the rail's width plus the Container's
+ * padding (264 at 1280), not at the header logo's x. Below `md` every layout agrees.
  */
 export declare function SidebarLayout({ rail, children, }: {
     rail: ReactNode;
     children: ReactNode;
 }): ReactElement;
-/** Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller screen. Render it in `<AppShell bleed>`. */
+/**
+ * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
+ * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer
+ * that needs the whole width has no Container of its own, so `children` start at the viewport's
+ * left edge and add their own padding.
+ */
 export declare function FullBleedLayout({ panel, children, }: {
     panel?: ReactNode;
     children: ReactNode;

package/dist/PageLayouts.js

@@ -3,7 +3,7 @@ import { Card } from "./ui.js";
 import { Container } from "./Container.js";
 import { cx } from "./cx.js";
 import { PageHeader, PageHeaderContent } from "./PageHeader.js";
-import { Stack } from "./Stack.js";
+import { STACK_WIDTH, Stack } from "./Stack.js";
 // Compositions of the layout foundation. None sets a page width or outer padding of its own; the
 // ones that narrow their content do it inside the Container they are rendered in.
 /** A list page: header, an optional `filters` slot, then the list, or `empty` when `isEmpty`. */
@@ -18,6 +18,15 @@ export function DetailLayout({ aside, children, ...header }) {
 export function FormLayout({ actions, children, breadcrumbs, title, subtitle, tabs, className, ...form }) {
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { breadcrumbs: breadcrumbs, title: title, subtitle: subtitle, tabs: tabs }), _jsx("form", { className: cx("max-w-3xl", className), ...form, children: _jsxs(Stack, { children: [children, actions && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: actions })] }) })] }));
 }
+/**
+ * A text page: header, then `children` stacked `gap` apart (`md` by default), all in one `narrow`
+ * (`max-w-3xl`) reading column that starts at the Container's left edge (it is not re-centred, so
+ * the title does not jump). Unlike `FormLayout` the header sits inside the column, so its `actions`
+ * stay beside the text instead of at the Container's far edge. `className` goes on the column.
+ */
+export function ProseLayout({ gap, className, children, ...header }) {
+    return (_jsxs("div", { className: cx(STACK_WIDTH.narrow, className), children: [_jsx(PageHeader, { ...header }), _jsx(Stack, { gap: gap, children: children })] }));
+}
 const COLUMNS = {
     2: "lg:grid-cols-2",
     3: "lg:grid-cols-3",
@@ -31,11 +40,20 @@ export function CardGrid({ columns = 3, className, children, }) {
  * A full-height `rail` beside the `children` canvas. Render it in `<AppShell bleed>`: it fills what
  * the shell's flex column leaves under the header, so no header height is written down. The rail is
  * `md:w-60` and stacks above the canvas below `md`; the canvas keeps the Container's padding.
+ *
+ * It deliberately breaks the shared left edge from `md` up: a full-height rail needs the viewport's
+ * left edge, so the rail starts at x=0 and the canvas at the rail's width plus the Container's
+ * padding (264 at 1280), not at the header logo's x. Below `md` every layout agrees.
  */
 export function SidebarLayout({ rail, children, }) {
     return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col md:flex-row", children: [_jsx("aside", { className: "w-full shrink-0 border-b border-slate-200 bg-slate-50 p-4 md:w-60 md:border-r md:border-b-0", children: rail }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Container, { className: "py-8", children: children }) })] }));
 }
-/** Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller screen. Render it in `<AppShell bleed>`. */
+/**
+ * Edge-to-edge `children` with an optional right `panel` (`lg:w-72`) that stacks below on a smaller
+ * screen. Render it in `<AppShell bleed>`. It deliberately breaks the shared left edge: a viewer
+ * that needs the whole width has no Container of its own, so `children` start at the viewport's
+ * left edge and add their own padding.
+ */
 export function FullBleedLayout({ panel, children, }) {
     return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [_jsx("div", { className: "min-w-0 flex-1", children: children }), panel && (_jsx("aside", { className: "w-full shrink-0 border-t border-slate-200 bg-slate-50 p-4 lg:w-72 lg:border-t-0 lg:border-l", children: panel }))] }));
 }

package/dist/ProgressBar.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from "react";
+/** The colour of a bar's fill. */
+export type BarTone = "accent" | "positive" | "warn" | "negative";
+/** 6px, 8px or 12px tall. */
+export type BarSize = "sm" | "md" | "lg";
+export declare const BAR_FILL: Record<BarTone, string>;
+export declare const BAR_TRACK: Record<BarSize, string>;
+/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+export declare function sharePercent(part: number, whole: number): number;
+/** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
+export declare function announcedPercent(part: number, whole: number): number;
+/**
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
+ * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ */
+export declare function ProgressBar({ value, max, label, tone, size, className, }: {
+    value: number;
+    /** Defaults to 100. */
+    max?: number;
+    label: string;
+    /** Defaults to "accent". */
+    tone?: BarTone;
+    /** Defaults to "sm". */
+    size?: BarSize;
+    className?: string;
+}): ReactElement;

package/dist/ProgressBar.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+export const BAR_FILL = {
+    accent: "bg-violet-600",
+    positive: "bg-emerald-600",
+    warn: "bg-amber-600",
+    negative: "bg-red-600",
+};
+export const BAR_TRACK = {
+    sm: "h-1.5",
+    md: "h-2",
+    lg: "h-3",
+};
+/** `part` as a percent of `whole`, held to 0–100; 0 when either is not positive. */
+export function sharePercent(part, whole) {
+    if (!(whole > 0) || !(part > 0))
+        return 0;
+    return Math.min(100, (part / whole) * 100);
+}
+/** The share as a whole percent for a screen reader: never 0 or 100 unless it truly is. */
+export function announcedPercent(part, whole) {
+    const share = sharePercent(part, whole);
+    return share <= 0 || share >= 100 ? share : Math.min(99, Math.max(1, Math.round(share)));
+}
+/**
+ * A thin horizontal bar with a filled share, for progress toward a total. `value` is held to
+ * 0–`max`. `label` names what it measures, for a screen reader, which also hears the percentage.
+ */
+export function ProgressBar({ value, max = 100, label, tone = "accent", size = "sm", className, }) {
+    const share = sharePercent(value, max);
+    return (_jsx("div", { role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": announcedPercent(value, max), className: cx("overflow-hidden rounded-full bg-slate-100", BAR_TRACK[size], className), children: _jsx("div", { className: cx("h-full", BAR_FILL[tone]), style: { width: `${share}%` } }) }));
+}

package/dist/SegmentedControl.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { type SwitchItem, type SwitchProps } from "./switcher.js";
+/** One option of a SegmentedControl. See `SwitchItem`. */
+export type Segment = SwitchItem;
+/**
+ * A joined pill group where one option is filled: a mode or a range chosen in place. `items` are
+ * `{ value, label }` buttons (`value` and `onChange` are the caller's state; the arrow keys, Home
+ * and End move the choice) 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 group.
+ */
+export declare function SegmentedControl(props: SwitchProps): ReactElement;

package/dist/SegmentedControl.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+import { Switcher } from "./switcher.js";
+// The focus ring sits inside the option, since the group's rounded edge would clip an outer one.
+const BASE = "border-l border-slate-300 px-3 py-1.5 transition first:rounded-l-full first:border-l-0 last:rounded-r-full focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-violet-600";
+const ON = "bg-violet-600 font-medium text-violet-50";
+const OFF = "bg-white text-slate-600 hover:bg-violet-50 hover:text-violet-700";
+/**
+ * A joined pill group where one option is filled: a mode or a range chosen in place. `items` are
+ * `{ value, label }` buttons (`value` and `onChange` are the caller's state; the arrow keys, Home
+ * and End move the choice) 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 group.
+ */
+export function SegmentedControl(props) {
+    return (_jsx(Switcher, { ...props, parts: {
+            group: "radiogroup",
+            item: "radio",
+            vertical: true,
+            root: "inline-flex rounded-full border border-slate-300 text-sm",
+            option: (active) => cx(BASE, active ? ON : OFF),
+        } }));
+}

package/dist/Select.d.ts

@@ -1,3 +1,4 @@
 import type { ComponentPropsWithoutRef, ReactElement } from "react";
-/** A native `<select>` styled like `Input`, keeping the browser's own arrow. */
-export declare function Select({ className, children, ...rest }: ComponentPropsWithoutRef<"select">): ReactElement;
+import { type ControlProps } from "./control.js";
+/** A native `<select>` styled like `Input`, keeping the browser's own arrow. Takes `size` and `width` too. */
+export declare function Select({ size, width, className, children, ...rest }: ControlProps & Omit<ComponentPropsWithoutRef<"select">, "size" | "width">): ReactElement;

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/Stack.d.ts

@@ -1,18 +1,30 @@
 import { type ReactElement, type ReactNode } from "react";
-export type StackGap = "sm" | "md" | "lg";
-/** A vertical column of blocks a fixed `gap` apart: `sm` inside a group, `md` (default) between blocks, `lg` between groups. */
-export declare function Stack({ gap, as: Tag, className, children, ...rest }: {
-    gap?: StackGap;
+export type StackGap = "xs" | "sm" | "md" | "lg";
+export type StackWidth = "narrow" | "default" | "wide" | "full";
+/** `default` adds nothing: the Stack is as wide as its parent. */
+export declare const STACK_WIDTH: Record<StackWidth, string | undefined>;
+/**
+ * A vertical column of blocks a fixed `gap` apart: `xs` between lines of text (a heading and the
+ * line under it), `sm` inside a group, `md` (default) between blocks, `lg` between groups.
+ *
+ * `width` caps the column: `narrow` is a reading measure (`max-w-3xl`), `wide` is `max-w-5xl`, `full`
+ * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
+ * edge (it is never re-centred), so its first line lines up with every other block on the page.
+ */
+export declare function Stack({ gap, width, as: Tag, className, children, ...rest }: {
+    gap?: StackGap | undefined;
+    width?: StackWidth | undefined;
     as?: "div" | "section";
     className?: string | undefined;
     children?: ReactNode;
     "aria-labelledby"?: string | undefined;
 }): ReactElement;
 /** A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside it. */
-export declare function Section({ title, actions, gap, className, children, }: {
+export declare function Section({ title, actions, gap, width, className, children, }: {
     title?: ReactNode;
     actions?: ReactNode;
-    gap?: StackGap;
+    gap?: StackGap | undefined;
+    width?: StackWidth | undefined;
     className?: string;
     children?: ReactNode;
 }): ReactElement;

package/dist/Stack.js

@@ -2,13 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "./cx.js";
 import { SectionHeading } from "./typography.js";
-const GAP = { sm: "gap-4", md: "gap-6", lg: "gap-8" };
-/** A vertical column of blocks a fixed `gap` apart: `sm` inside a group, `md` (default) between blocks, `lg` between groups. */
-export function Stack({ gap = "md", as: Tag = "div", className, children, ...rest }) {
-    return (_jsx(Tag, { className: cx("flex flex-col", GAP[gap], className), ...rest, children: children }));
+const GAP = { xs: "gap-2", sm: "gap-4", md: "gap-6", lg: "gap-8" };
+/** `default` adds nothing: the Stack is as wide as its parent. */
+export const STACK_WIDTH = {
+    narrow: "max-w-3xl",
+    default: undefined,
+    wide: "max-w-5xl",
+    full: "w-full",
+};
+/**
+ * A vertical column of blocks a fixed `gap` apart: `xs` between lines of text (a heading and the
+ * line under it), `sm` inside a group, `md` (default) between blocks, `lg` between groups.
+ *
+ * `width` caps the column: `narrow` is a reading measure (`max-w-3xl`), `wide` is `max-w-5xl`, `full`
+ * is the parent's whole width and `default` sets nothing. A capped Stack starts at its parent's left
+ * edge (it is never re-centred), so its first line lines up with every other block on the page.
+ */
+export function Stack({ gap = "md", width = "default", as: Tag = "div", className, children, ...rest }) {
+    return (_jsx(Tag, { className: cx("flex flex-col", GAP[gap], STACK_WIDTH[width], className), ...rest, children: children }));
 }
 /** A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside it. */
-export function Section({ title, actions, gap = "sm", className, children, }) {
+export function Section({ title, actions, gap = "sm", width, className, children, }) {
     const titleId = useId();
-    return (_jsxs(Stack, { as: "section", gap: gap, className: className, "aria-labelledby": title ? titleId : undefined, children: [(title || actions) && (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
+    return (_jsxs(Stack, { as: "section", gap: gap, width: width, className: className, "aria-labelledby": title ? titleId : undefined, children: [(title || actions) && (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
 }

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;