@hackcove/ui-react 0.0.0-stage → 0.8.0

package/dist/AppShell.d.ts

@@ -0,0 +1,97 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { type ColourScheme, type ColourSchemeClasses } from "./colourScheme.js";
+import { type LinkRender } from "./link.js";
+import type { Passthrough, Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+/**
+ * The class an app puts on its own `<html>`: it always reserves the scrollbar, so centred content
+ * does not shift between a short page and a long one. AppShell never touches `<html>` itself.
+ */
+export declare const appShellRootClass = "overflow-y-scroll";
+/**
+ * Everything an app puts on its own `<html>` from the scheme the server knows: that scheme's class
+ * (`schemeClass`) and `appShellRootClass`, joined. `<html className={appShellRootClassFor(scheme,
+ * schemes)}>` replaces `schemeClass(scheme, schemes) + " " + appShellRootClass`.
+ */
+export declare function appShellRootClassFor(scheme: ColourScheme, schemes?: ColourSchemeClasses): string;
+/**
+ * The `brand` slot as one link: a logo and a label inside the same `<a>`, so the whole brand is the
+ * way home. The label names the link; the logo is decoration and hidden from assistive tech.
+ * `collapse` shows only the logo below `sm`, the label staying in the accessible name. With
+ * `render` it draws the app's own router `<Link>` (`render={(p) => <Link to="/" {...p} />}`).
+ */
+export declare function AppShellBrand({ logo, logoSize, label, collapse, href, render, ...rest }: Passthrough & {
+    /** The name beside the logo. It is the link's accessible name. */
+    label: ReactNode;
+    /** The logo slot's box: sm 20px, md 24px (the default, an `Avatar size="sm"`), lg 32px. An `<img>` or `<svg>` logo fills it. */
+    logoSize?: Size;
+} & ({
+    /** The mark before the label, e.g. an `Avatar` or an `<img>`. */
+    logo?: ReactNode;
+    collapse?: false | undefined;
+} | {
+    logo: ReactNode;
+    /** Below `sm` only the logo shows; the label is visually hidden and still names the link. Needs a `logo`. */
+    collapse: true;
+}) & ({
+    /** Where the brand links, usually the app's home (`/`). */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Where the brand links, usually the app's home (`/`). */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/" {...p} />`. */
+    render: LinkRender;
+})): ReactElement;
+/** The breakpoint below which an `AppShellHideBelow` item is hidden. */
+export type AppShellBreakpoint = "sm" | "md" | "lg";
+/**
+ * An inline header item that only shows from a breakpoint up, such as the viewer's avatar and name
+ * in `controls`: below `breakpoint` it is gone (`display: none`, so assistive tech skips it too).
+ * Its children sit in a row with the header's gap.
+ */
+export declare function AppShellHideBelow({ breakpoint, children, ...rest }: Passthrough & {
+    /**
+     * Hidden below `sm` (640px), `md` (768px) or `lg` (1024px).
+     * @default sm
+     */
+    breakpoint?: AppShellBreakpoint;
+    children: ReactNode;
+}): ReactElement;
+/**
+ * The page frame: it paints the page canvas and sets the type face, ink and font smoothing
+ * (`antialiased`), so an app writes no page-background or font rule of its own (a theme remaps
+ * the canvas and the font stacks). A sticky one-row header, an optional second `subnav` row, the main area and an
+ * optional footer. Header, main and footer each sit in a `Container`, so pages never set their own
+ * width or padding. `bleed` drops main's Container (the header keeps its own), for a layout that
+ * needs the whole width (`FullBleedLayout`). Main is a flex column. `SidebarLayout` needs no
+ * `bleed`: its rail and canvas share the header's Container.
+ *
+ * The header row is laid out by its slots, left to right: `brand`, `nav`, then `header` (anything
+ * the slots do not cover), then `controls`, pushed to the end. An app writes no wrapper or
+ * styling for any of them: an item that only fits a wide screen goes in `AppShellHideBelow`. A bar
+ * that sticks under the header as the page scrolls is a `StickyBar`.
+ */
+export declare function AppShell({ brand, nav, controls, header, subnav, footer, bleed, hideChromeInPrint, children, ...rest }: {
+    /** The brand: a logo and a name, in the header's brand type, with the gap between them. `AppShellBrand` makes both one link. */
+    brand?: ReactNode;
+    /** The main navigation, e.g. a `Tabs variant="pill"` of links (it is already a `<nav>`). */
+    nav?: ReactNode;
+    /** The end of the row: a picker, a theme toggle. Gap-2, vertically centred; no child shrinks, and a full-width control (a `Select` at its default) sizes to its content. */
+    controls?: ReactNode;
+    /** The escape hatch: a free node in the header row, after `brand` and `nav`. */
+    header?: ReactNode;
+    /** A second fixed-height row under the header, e.g. a `Tabs variant="pill"` of links. */
+    subnav?: ReactNode;
+    /** The page footer: small muted text in a `Container`, under a hairline. Hidden in print with `hideChromeInPrint`. */
+    footer?: ReactNode;
+    /** Main without a Container, for a full-bleed layout. */
+    bleed?: boolean;
+    /**
+     * Print only the page: the header and footer are hidden, and main's Container drops its padding
+     * (the page margin is then `@page`'s). Off by default, so a print is unchanged unless an app asks.
+     */
+    hideChromeInPrint?: boolean;
+    children: ReactNode;
+} & Unstyled<Omit<HTMLAttributes<HTMLDivElement>, "children">>): ReactElement;

package/dist/AppShell.js

@@ -0,0 +1,106 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { ContainerFrame } from "./Container.js";
+import { schemeClass } from "./colourScheme.js";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+/**
+ * The class an app puts on its own `<html>`: it always reserves the scrollbar, so centred content
+ * does not shift between a short page and a long one. AppShell never touches `<html>` itself.
+ */
+export const appShellRootClass = "overflow-y-scroll";
+/**
+ * Everything an app puts on its own `<html>` from the scheme the server knows: that scheme's class
+ * (`schemeClass`) and `appShellRootClass`, joined. `<html className={appShellRootClassFor(scheme,
+ * schemes)}>` replaces `schemeClass(scheme, schemes) + " " + appShellRootClass`.
+ */
+export function appShellRootClassFor(scheme, schemes) {
+    return cx(schemeClass(scheme, schemes), appShellRootClass);
+}
+const LOGO_BOX = { sm: "size-5", md: "size-6", lg: "size-8" };
+/**
+ * The `brand` slot as one link: a logo and a label inside the same `<a>`, so the whole brand is the
+ * way home. The label names the link; the logo is decoration and hidden from assistive tech.
+ * `collapse` shows only the logo below `sm`, the label staying in the accessible name. With
+ * `render` it draws the app's own router `<Link>` (`render={(p) => <Link to="/" {...p} />}`).
+ */
+export function AppShellBrand({ logo, logoSize = "md", label, collapse = false, href, render, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        className: cx("flex items-center gap-2 rounded", focusRing),
+        children: (_jsxs(_Fragment, { children: [logo && (_jsx("span", { "aria-hidden": "true", className: cx("flex shrink-0 items-center justify-center [&>img]:size-full [&>svg]:size-full", LOGO_BOX[logoSize]), children: logo })), _jsx("span", { className: collapse ? "sr-only sm:not-sr-only" : undefined, children: label })] })),
+    });
+}
+const SHOWN_FROM = {
+    sm: "hidden sm:flex",
+    md: "hidden md:flex",
+    lg: "hidden lg:flex",
+};
+/**
+ * An inline header item that only shows from a breakpoint up, such as the viewer's avatar and name
+ * in `controls`: below `breakpoint` it is gone (`display: none`, so assistive tech skips it too).
+ * Its children sit in a row with the header's gap.
+ */
+export function AppShellHideBelow({ breakpoint = "sm", children, ...rest }) {
+    return (_jsx("span", { ...rest, className: cx(SHOWN_FROM[breakpoint], "items-center gap-2"), children: children }));
+}
+// One fixed-height row that scrolls sideways and never wraps; its children keep their width.
+const ROW = "flex items-center gap-4 overflow-x-auto whitespace-nowrap *:shrink-0";
+// While a row has more to scroll to on a side, that edge fades out (a mask, so it follows any theme).
+// `ScrollRow` sets `data-more-start` / `data-more-end` (and `data-more` for either); a row that fits
+// has none and is untouched.
+const FADE = "data-more-start:[--fade-start:2rem] data-more-end:[--fade-end:2rem] data-more:[mask-image:linear-gradient(to_right,transparent,#000_var(--fade-start,0px),#000_calc(100%_-_var(--fade-end,0px)),transparent)]";
+/** A row in a Container, with the fade on whichever side still has content to scroll to. */
+function ScrollRow({ className, children }) {
+    const row = useRef(null);
+    // Every render: the children may have changed, and each needs observing.
+    useEffect(() => {
+        const el = row.current;
+        if (!el)
+            return undefined;
+        const update = () => {
+            const start = el.scrollLeft > 1;
+            const end = el.scrollWidth - el.clientWidth - el.scrollLeft > 1;
+            el.toggleAttribute("data-more-start", start);
+            el.toggleAttribute("data-more-end", end);
+            el.toggleAttribute("data-more", start || end);
+        };
+        update();
+        el.addEventListener("scroll", update, { passive: true });
+        // jsdom (a consumer's own tests) has no ResizeObserver.
+        const resize = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(update);
+        resize?.observe(el);
+        for (const child of el.children)
+            resize?.observe(child);
+        return () => {
+            el.removeEventListener("scroll", update);
+            resize?.disconnect();
+        };
+    });
+    return (_jsx(ContainerFrame, { elementRef: (el) => void (row.current = el), className: cx(ROW, FADE, className), children: children }));
+}
+/** The header row's slots in order: brand, nav, the free `children`, then controls at the end. */
+function HeaderSlots({ brand, nav, controls, children, }) {
+    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav, children, controls && (_jsx("div", { className: "ml-auto flex items-center gap-2 *:shrink-0 [&>.w-full]:w-auto", children: controls }))] }));
+}
+/**
+ * The page frame: it paints the page canvas and sets the type face, ink and font smoothing
+ * (`antialiased`), so an app writes no page-background or font rule of its own (a theme remaps
+ * the canvas and the font stacks). A sticky one-row header, an optional second `subnav` row, the main area and an
+ * optional footer. Header, main and footer each sit in a `Container`, so pages never set their own
+ * width or padding. `bleed` drops main's Container (the header keeps its own), for a layout that
+ * needs the whole width (`FullBleedLayout`). Main is a flex column. `SidebarLayout` needs no
+ * `bleed`: its rail and canvas share the header's Container.
+ *
+ * The header row is laid out by its slots, left to right: `brand`, `nav`, then `header` (anything
+ * the slots do not cover), then `controls`, pushed to the end. An app writes no wrapper or
+ * styling for any of them: an item that only fits a wide screen goes in `AppShellHideBelow`. A bar
+ * that sticks under the header as the page scrolls is a `StickyBar`.
+ */
+export function AppShell({ brand, nav, controls, header, subnav, footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
+    return (_jsxs("div", { ...rest, className: cx("flex min-h-dvh flex-col bg-gray-50 font-sans text-slate-900 antialiased", 
+        // The sticky header's height (its rows and the bottom border), for a bar that sticks under it.
+        subnav ? "[--app-header:calc(6.5rem+1px)]" : "[--app-header:calc(3.5rem+1px)]"), children: [_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, children: header }) }), subnav && _jsx(ScrollRow, { className: "h-12", children: subnav })] }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
+}

package/dist/Avatar.d.ts

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+declare const SIZE_CLASSES: {
+    readonly sm: "size-6 text-xs";
+    readonly md: "size-8 text-xs";
+    readonly lg: "size-10 text-base";
+    readonly xl: "size-14 text-xl";
+    readonly "2xl": "size-24 text-3xl";
+};
+export type AvatarSize = keyof typeof SIZE_CLASSES;
+/** `round` for a person, `square` (rounded corners that grow with the size) for an org or a team. */
+export type AvatarShape = "round" | "square";
+/** The corner classes for a shape at a size; `AvatarStack`'s "+N" chip uses the same. */
+export declare function avatarShapeClass(shape: AvatarShape, size: AvatarSize): string;
+/** The size classes of an Avatar, shared with `AvatarStack`'s "+N" chip. */
+export declare function avatarSizeClass(size: AvatarSize): string;
+/** The background class for a name: the same name gets the same colour everywhere. */
+export declare function avatarColourClass(name: string): string;
+/** Up to two letters or digits of a name, upper-cased; `?` when it has none. */
+export declare function initialsOf(name: string): string;
+type AvatarProps = {
+    /** Whose avatar: its initials, its colour (a hash of the name) and its title or `alt`. */
+    name: string;
+    /** The person's photo, a local path. It replaces the initials and is announced as `name`. */
+    src?: string | undefined;
+    /**
+     * `sm` 24px, `md` 32px, `lg` 40px, `xl` 56px or `2xl` 96px.
+     * @default md
+     */
+    size?: AvatarSize;
+    /**
+     * `round` for a person; `square` (rounded corners) for an org or a team, so the two never read
+     * as each other.
+     * @default round
+     */
+    shape?: AvatarShape;
+} & Unstyled<Omit<HTMLAttributes<HTMLElement>, "children">>;
+/**
+ * A person as a round badge of initials, or as their photo when `src` is given; `shape="square"`
+ * marks an org or a team instead. It never loads a remote image on its own: that is a request to
+ * another server for decoration, and it makes a screenshot depend on the network. `src` is the
+ * app's own local path. A row of overlapping avatars is an `AvatarStack`.
+ */
+export declare function Avatar(props: AvatarProps): ReactElement;
+/** Avatar plus the stack's ring: internal, so the ring only ever comes from `AvatarStack`. */
+export declare function AvatarMark({ name, src, size, shape, ring, ...rest }: AvatarProps & {
+    ring?: string | false;
+}): ReactElement;
+export {};

package/dist/Avatar.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** The identity colours, in hash order. Each is a stock background utility; a theme remaps them. */
+const COLOUR_CLASSES = [
+    "bg-violet-600",
+    "bg-orange-600",
+    "bg-cyan-600",
+    "bg-emerald-600",
+    "bg-sky-600",
+    "bg-pink-600",
+    "bg-amber-600",
+];
+const SIZE_CLASSES = {
+    sm: "size-6 text-xs",
+    md: "size-8 text-xs",
+    lg: "size-10 text-base",
+    xl: "size-14 text-xl",
+    "2xl": "size-24 text-3xl",
+};
+const SQUARE_CLASSES = {
+    sm: "rounded",
+    md: "rounded-md",
+    lg: "rounded-md",
+    xl: "rounded-lg",
+    "2xl": "rounded-xl",
+};
+/** The corner classes for a shape at a size; `AvatarStack`'s "+N" chip uses the same. */
+export function avatarShapeClass(shape, size) {
+    return shape === "square" ? SQUARE_CLASSES[size] : "rounded-full";
+}
+/** The size classes of an Avatar, shared with `AvatarStack`'s "+N" chip. */
+export function avatarSizeClass(size) {
+    return SIZE_CLASSES[size];
+}
+/** The background class for a name: the same name gets the same colour everywhere. */
+export function avatarColourClass(name) {
+    let hash = 0;
+    for (const char of name)
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    return COLOUR_CLASSES[hash % COLOUR_CLASSES.length] ?? COLOUR_CLASSES[0];
+}
+/** Up to two letters or digits of a name, upper-cased; `?` when it has none. */
+export function initialsOf(name) {
+    return (name
+        .replace(/[^a-z0-9]/gi, "")
+        .slice(0, 2)
+        .toUpperCase() || "?");
+}
+/**
+ * A person as a round badge of initials, or as their photo when `src` is given; `shape="square"`
+ * marks an org or a team instead. It never loads a remote image on its own: that is a request to
+ * another server for decoration, and it makes a screenshot depend on the network. `src` is the
+ * app's own local path. A row of overlapping avatars is an `AvatarStack`.
+ */
+export function Avatar(props) {
+    return _jsx(AvatarMark, { ...props });
+}
+/** Avatar plus the stack's ring: internal, so the ring only ever comes from `AvatarStack`. */
+export function AvatarMark({ name, src, size = "md", shape = "round", ring = false, ...rest }) {
+    const corners = avatarShapeClass(shape, size);
+    if (src) {
+        return (_jsx("img", { src: src, alt: name, title: name, className: cx("shrink-0 object-cover", corners, SIZE_CLASSES[size], ring), ...rest }));
+    }
+    return (_jsx("span", { "aria-hidden": "true", title: name, className: cx("inline-grid shrink-0 place-items-center font-semibold text-violet-50", corners, SIZE_CLASSES[size], avatarColourClass(name), ring), ...rest, children: initialsOf(name) }));
+}

package/dist/AvatarStack.d.ts

@@ -0,0 +1,29 @@
+import type { ReactElement } from "react";
+import { type AvatarShape, type AvatarSize } from "./Avatar.js";
+import type { Passthrough } from "./props.js";
+/** One member of an `AvatarStack`: the same `name` and optional local `src` an `Avatar` takes. */
+export type AvatarStackPerson = {
+    name: string;
+    src?: string | undefined;
+};
+/**
+ * Members as a row of overlapping avatars, each in a ring in the page colour that separates it from
+ * the next. With `max`, the first `max` show and a "+N" chip of the same size and shape stands for
+ * the rest. The row is one image to assistive tech, named by the people in it.
+ */
+export declare function AvatarStack({ people, max, size, shape, ...rest }: {
+    /** Who is in the stack, in order. Give each person's full name, as for `Avatar`. */
+    people: readonly AvatarStackPerson[];
+    /** How many avatars show before a "+N" chip takes the rest. Without it every person shows. */
+    max?: number | undefined;
+    /**
+     * The size of every avatar and of the chip, as `Avatar`'s `size`.
+     * @default md
+     */
+    size?: AvatarSize;
+    /**
+     * `square` for a stack of orgs or teams, as `Avatar`'s `shape`.
+     * @default round
+     */
+    shape?: AvatarShape;
+} & Passthrough): ReactElement;

package/dist/AvatarStack.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AvatarMark, avatarShapeClass, avatarSizeClass, } from "./Avatar.js";
+import { cx } from "./cx.js";
+// Each avatar after the first overlaps the one before it by about a quarter of its width.
+const OVERLAP = {
+    sm: "-ml-1.5",
+    md: "-ml-2",
+    lg: "-ml-2.5",
+    xl: "-ml-3.5",
+    "2xl": "-ml-6",
+};
+// The ring in the page colour that keeps two overlapping avatars apart.
+const RING = "border-2 border-slate-50";
+/**
+ * Members as a row of overlapping avatars, each in a ring in the page colour that separates it from
+ * the next. With `max`, the first `max` show and a "+N" chip of the same size and shape stands for
+ * the rest. The row is one image to assistive tech, named by the people in it.
+ */
+export function AvatarStack({ people, max, size = "md", shape = "round", ...rest }) {
+    const shown = max === undefined ? people : people.slice(0, Math.max(max, 0));
+    const hidden = people.slice(shown.length);
+    const overlap = OVERLAP[size];
+    const names = shown.map((person) => person.name);
+    const label = hidden.length > 0 ? `${names.join(", ")} and ${hidden.length} more` : names.join(", ");
+    return (_jsxs("span", { role: "img", "aria-label": label, className: "inline-flex items-center", ...rest, children: [shown.map((person, index) => (_jsx(AvatarMark, { name: person.name, src: person.src, size: size, shape: shape, ring: cx(RING, index > 0 && overlap) }, `${index}:${person.name}`))), hidden.length > 0 && (_jsxs("span", { "aria-hidden": "true", title: hidden.map((person) => person.name).join(", "), className: cx("inline-grid shrink-0 place-items-center bg-slate-100 font-semibold text-slate-700 tabular-nums", RING, avatarSizeClass(size), avatarShapeClass(shape, size), shown.length > 0 && overlap), children: ["+", hidden.length] }))] }));
+}

package/dist/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "react";
+import type { Unstyled } from "./props.js";
+/**
+ * A small red count, 10px, for sitting on an icon. `corner` pins it to the top-right corner of its
+ * `relative` parent (wrap the icon button and the badge in a `relative inline-flex` element); a
+ * count above 99 reads `99+`. Name the control it sits on (`aria-label` on the button) for a
+ * screen reader. An `IconButton` takes `badge` itself and does all of this.
+ */
+export declare function Badge({ count, corner, ...rest }: {
+    /** The number shown; above 99 it reads `99+`. */
+    count: number;
+    /** Pin it to the top-right corner of its `relative` parent, over the icon. */
+    corner?: boolean;
+} & Unstyled<Omit<HTMLAttributes<HTMLSpanElement>, "children">>): import("react").JSX.Element;

package/dist/Badge.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A small red count, 10px, for sitting on an icon. `corner` pins it to the top-right corner of its
+ * `relative` parent (wrap the icon button and the badge in a `relative inline-flex` element); a
+ * count above 99 reads `99+`. Name the control it sits on (`aria-label` on the button) for a
+ * screen reader. An `IconButton` takes `badge` itself and does all of this.
+ */
+export function Badge({ count, corner = false, ...rest }) {
+    return (_jsx("span", { ...rest, className: cx("inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-red-600 px-1 text-[10px] font-semibold leading-none text-red-50", corner && "absolute -right-1.5 -top-1.5"), children: count > 99 ? "99+" : count }));
+}

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+import type { Passthrough } from "./props.js";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export declare const crumbLinkClass: string;
+/**
+ * A crumb that links: a plain `<a href>`, or with `render` the app's own router `<Link>`
+ * (`render: (p) => <Link to="/quotes" {...p} />`; `href` is then not used). `external` opens in a
+ * new tab. The last crumb is the current page and is never a link.
+ */
+export type Crumb = {
+    label: ReactNode;
+    external?: boolean;
+} & ({
+    href: string;
+    render?: LinkRender;
+} | {
+    href?: string;
+    render: LinkRender;
+});
+/**
+ * `org / project / build / snapshot`: each crumb truncates, and the last is the current page. A
+ * crumb is a node, or a `Crumb` object when it links.
+ */
+export declare function Breadcrumbs({ crumbs, ...rest }: {
+    /** The trail, first to current: a node, or a `Crumb` (`{ label, href | render, external? }`) for one that links. The last is the current page and never a link. */
+    crumbs: Array<Crumb | ReactNode>;
+} & Passthrough): ReactElement;

package/dist/Breadcrumbs.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+/** The classes of a crumb that links somewhere, for a router's own <Link>. The current page is plain text, not a link. */
+export const crumbLinkClass = cx("rounded text-slate-500 hover:underline", focusRing);
+function isCrumb(crumb) {
+    return typeof crumb === "object" && crumb !== null && !isValidElement(crumb) && "label" in crumb;
+}
+function CrumbContent({ crumb, current, }) {
+    if (!isCrumb(crumb))
+        return crumb;
+    if (current)
+        return crumb.label;
+    return renderLink({
+        href: crumb.href,
+        render: crumb.render,
+        external: crumb.external,
+        className: crumbLinkClass,
+        children: crumb.label,
+    });
+}
+/**
+ * `org / project / build / snapshot`: each crumb truncates, and the last is the current page. A
+ * crumb is a node, or a `Crumb` object when it links.
+ */
+export function Breadcrumbs({ crumbs, ...rest }) {
+    const last = crumbs.length - 1;
+    return (_jsx("nav", { ...rest, "aria-label": "Breadcrumb", className: "min-w-0", children: _jsx("ol", { className: "flex min-w-0 items-center gap-2 text-sm", children: crumbs.map((crumb, index) => (_jsxs("li", { "aria-current": index === last ? "page" : undefined, className: "flex min-w-0 items-center gap-2", children: [index > 0 && (_jsx("span", { "aria-hidden": "true", className: "text-slate-400", children: "/" })), _jsx("span", { className: cx("min-w-0 truncate", index === last ? "font-medium text-slate-900" : "text-slate-500"), children: _jsx(CrumbContent, { crumb: crumb, current: index === last }) })] }, index))) }) }));
+}

package/dist/BulletList.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes, ReactElement } from "react";
+import type { Unstyled } from "./props.js";
+/** A bulleted `<ul>`: discs, indented, a small gap between items. Its children are `<li>`s (e.g. `Text as="li"`). */
+export declare function BulletList(props: Unstyled<HTMLAttributes<HTMLUListElement>>): ReactElement;

package/dist/BulletList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A bulleted `<ul>`: discs, indented, a small gap between items. Its children are `<li>`s (e.g. `Text as="li"`). */
+export function BulletList(props) {
+    return _jsx("ul", { ...props, className: "list-disc space-y-1 pl-5" });
+}

package/dist/Button.d.ts

@@ -0,0 +1,78 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type LinkRender } from "./link.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+export type ButtonVariant = "primary" | "outline" | "ghost" | "link" | "dashed";
+export type ButtonSize = Size;
+export type ButtonTone = "default" | "positive" | "danger";
+/** Size, tone and variant: the look of a button, apart from its state. */
+export type ButtonLook = {
+    /**
+     * `primary` is filled, for the one main action; `outline` and `ghost` are quieter; `link` is
+     * text with an underline on hover; `dashed` is an "add another" row that fills its container.
+     * @default primary
+     */
+    variant?: ButtonVariant | undefined;
+    /**
+     * `sm` is compact, for table rows and toolbars; `lg` is larger, for a hero call to action.
+     * @default md
+     */
+    size?: ButtonSize | undefined;
+    /**
+     * `positive` is green, for accept and approve; `danger` is red, for delete and clear. Not for
+     * `dashed`, which has the one look.
+     * @default default
+     */
+    tone?: ButtonTone | undefined;
+};
+/** The classes of an idle Button: what `href` draws, and what the tests compare against. */
+export declare function buttonClass(variant?: ButtonVariant, { size, tone }?: Omit<ButtonLook, "variant">): string;
+type ButtonAsButton = ButtonLook & {
+    /** Why the button cannot be pressed: disables it, sets it as the `title`, and greys it flat. */
+    disabledReason?: string | undefined;
+    /** The work is in flight: disabled, `aria-busy`, keeps its colour. Wins over `disabledReason`. */
+    busy?: boolean | undefined;
+    /** The label while `busy`, in place of the children. */
+    busyLabel?: string | undefined;
+    /**
+     * A toggle: sets `aria-pressed`. On `outline` and `ghost`, `false` draws the neutral off look
+     * and `true` the tone's primary fill, so a row of filter chips shows the selected one plainly.
+     * Left out, the button is not a toggle, has no `aria-pressed` and keeps its variant's look.
+     */
+    pressed?: boolean | undefined;
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+} & Unstyled<ComponentPropsWithoutRef<"button">>;
+type ButtonAsLink = ButtonLook & {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+    disabledReason?: undefined;
+    busy?: undefined;
+    busyLabel?: undefined;
+    pressed?: undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"a">, "href">> & ({
+    /** Makes the button a link to this URL. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/quotes" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Makes the button a link to this URL. */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/quotes" {...p} />`. */
+    render: LinkRender;
+});
+type ButtonProps = ButtonAsButton | ButtonAsLink;
+/**
+ * A button in the primary, outline, ghost, link or dashed style (the link has no box: text with an
+ * underline on hover, for an in-line action; `dashed` is the full-width "add" row, a dashed
+ * outline with muted text that fills its container, with an optional leading icon in the
+ * children). `size="sm"` is compact and `size="lg"` larger; `tone="positive"` is green and `tone="danger"` is red;
+ * `pressed` makes it a toggle: neutral when off, the tone's fill when on.
+ * Defaults to `type="button"`. `disabledReason` and `busy` are the two disabled states that say
+ * more than a plain `disabled`, which keeps its half-opacity look. `href` makes it a link instead,
+ * with the same look (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/quotes" {...p} />}`; `external` opens a new tab).
+ */
+export declare function Button(props: ButtonProps): ReactElement;
+export {};