@hackcove/ui-react 0.0.0-stage → 0.8.1

package/dist/IconButton.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+export type IconButtonVariant = "outline" | "ghost";
+export type IconButtonTone = "default" | "danger";
+type IconButtonProps = {
+    /** The button's accessible name and its tooltip. */
+    label: string;
+    /**
+     * `outline` has a border; `ghost` has none, until the hover fill.
+     * @default outline
+     */
+    variant?: IconButtonVariant | undefined;
+    /**
+     * `danger` is red, for delete and clear.
+     * @default default
+     */
+    tone?: IconButtonTone | undefined;
+    /**
+     * The button's height, matching a `Button` or `Input` of the same size.
+     * @default md
+     */
+    size?: Size | undefined;
+    /** A red count on the top-right corner, for unread alerts. Not shown at 0; `label` carries it for a screen reader. */
+    badge?: number | undefined;
+    children: ReactNode;
+};
+type IconButtonAsButton = IconButtonProps & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "children">> & {
+    href?: undefined;
+    render?: undefined;
+    external?: undefined;
+};
+type IconButtonAsLink = IconButtonProps & {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"a">, "href" | "children">> & ({
+    /** Makes the button a link to this URL. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/settings" {...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="/settings" {...p} />`. */
+    render: LinkRender;
+});
+/**
+ * A square button holding one icon. `label` is its accessible name and tooltip. `variant="ghost"`
+ * drops the border for a quiet action in a row or a toolbar; `size` matches the height of a
+ * `Button` of the same size (`sm` 26px, `md` 38px, `lg` 46px); `tone="danger"` is red, for delete
+ * and clear; `badge` pins a red count to the corner. Defaults to `type="button"`. `href` makes it
+ * a link instead (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/settings" {...p} />}`; `external` opens a new tab), with the same look.
+ */
+export declare function IconButton(props: IconButtonAsButton | IconButtonAsLink): ReactElement;
+export {};

package/dist/IconButton.js

@@ -0,0 +1,51 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "./Badge.js";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+const BASE = `relative inline-flex items-center justify-center rounded-lg border transition disabled:pointer-events-none disabled:opacity-50 ${focusRing}`;
+/** The same heights as a `Button` of the size: 26px, 38px and 46px. */
+const SIZE = { sm: "size-6.5", md: "size-9.5", lg: "size-11.5" };
+const LOOK = {
+    default: {
+        outline: "border-slate-200 text-slate-500 hover:bg-slate-50",
+        ghost: "border-transparent text-slate-500 hover:bg-slate-100",
+    },
+    danger: {
+        outline: "border-red-200 text-red-700 hover:bg-red-50",
+        ghost: "border-transparent text-red-700 hover:bg-red-50",
+    },
+};
+/** The classes for a variant, tone and size, each at its default when left out. */
+function look({ variant = "outline", tone = "default", size = "md", }) {
+    return cx(BASE, SIZE[size], LOOK[tone][variant]);
+}
+function isLink(props) {
+    return props.href !== undefined || props.render !== undefined;
+}
+/**
+ * A square button holding one icon. `label` is its accessible name and tooltip. `variant="ghost"`
+ * drops the border for a quiet action in a row or a toolbar; `size` matches the height of a
+ * `Button` of the same size (`sm` 26px, `md` 38px, `lg` 46px); `tone="danger"` is red, for delete
+ * and clear; `badge` pins a red count to the corner. Defaults to `type="button"`. `href` makes it
+ * a link instead (a plain `<a>`, or with `render` the app's own router `<Link>`:
+ * `render={(p) => <Link to="/settings" {...p} />}`; `external` opens a new tab), with the same look.
+ */
+export function IconButton(props) {
+    if (isLink(props)) {
+        const { label, variant, tone, size, badge, children, ...link } = props;
+        return renderLink({
+            ...link,
+            external: link.external ?? false,
+            "aria-label": named(label, badge),
+            title: named(label, badge),
+            className: look({ variant, tone, size }),
+            children: (_jsxs(_Fragment, { children: [children, badge ? _jsx(Badge, { count: badge, corner: true, "aria-hidden": "true" }) : null] })),
+        });
+    }
+    const { label, variant, tone, size, badge, children, ...rest } = props;
+    return (_jsxs("button", { type: "button", ...rest, "aria-label": named(label, badge), title: named(label, badge), className: look({ variant, tone, size }), children: [children, badge ? _jsx(Badge, { count: badge, corner: true, "aria-hidden": "true" }) : null] }));
+}
+/** The accessible name with its count: `Alerts, 3`. */
+function named(label, badge) {
+    return badge ? `${label}, ${badge}` : label;
+}

package/dist/Input.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { type ControlAlign, type ControlProps } from "./control.js";
+import type { Unstyled } from "./props.js";
+/**
+ * A text input. `icon` puts a leading icon inside the field (e.g. a search glass). `prefix` puts
+ * short text inside the border before the value, such as a currency symbol; it is for a plain
+ * field, not with an `icon` or `type="search"`. `align="end"` right-aligns the value, for a numeric
+ * field. `type="search"` drops the browser's own search look and shows a "Clear search" button at the trailing edge while the field has a value. */
+export declare function Input({ icon, prefix, size, width, align, ...rest }: ({
+    /** A leading icon inside the field (a search glass). Not with `prefix`. */
+    icon?: ReactNode;
+    /** Short text inside the border before the value (a currency symbol). For a plain field: not with `icon` or `type="search"`. */
+    prefix?: undefined;
+} | {
+    /** A leading icon inside the field (a search glass). Not with `prefix`. */
+    icon?: undefined;
+    /** Short text inside the border before the value (a currency symbol). For a plain field: not with `icon` or `type="search"`. */
+    prefix: string;
+}) & ControlProps & {
+    /** `end` right-aligns the value, for a numeric field. `start` (default) leaves it as typed. */
+    align?: ControlAlign | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"input">, "size" | "width" | "prefix">>): ReactElement;

package/dist/Input.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CONTROL_ALIGN, CONTROL_PAD, controlClass, } from "./control.js";
+import { cx } from "./cx.js";
+import { InputShell, PrefixShell } from "./InputShell.js";
+import { SearchInput } from "./SearchInput.js";
+/**
+ * A text input. `icon` puts a leading icon inside the field (e.g. a search glass). `prefix` puts
+ * short text inside the border before the value, such as a currency symbol; it is for a plain
+ * field, not with an `icon` or `type="search"`. `align="end"` right-aligns the value, for a numeric
+ * field. `type="search"` drops the browser's own search look and shows a "Clear search" button at the trailing edge while the field has a value. */
+export function Input({ icon, prefix, size = "md", width = "full", align = "start", ...rest }) {
+    if (rest.type === "search") {
+        return _jsx(SearchInput, { ...rest, icon: icon, size: size, width: width, align: align });
+    }
+    if (prefix !== undefined) {
+        return (_jsx(PrefixShell, { prefix: prefix, size: size, width: width, disabled: rest.disabled, children: _jsx("input", { ...rest, className: cx("min-w-0 flex-1 bg-transparent px-1 outline-none placeholder:text-slate-400", CONTROL_ALIGN[align]) }) }));
+    }
+    if (icon === undefined) {
+        return (_jsx("input", { ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x, CONTROL_ALIGN[align]) }));
+    }
+    return (_jsx(InputShell, { icon: icon, size: size, width: width, children: _jsx("input", { ...rest, className: cx(controlClass(size, width === "auto" ? "auto" : "full"), CONTROL_PAD[size].icon, CONTROL_ALIGN[align]) }) }));
+}

package/dist/InputShell.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+import { type ControlProps } from "./control.js";
+/** The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package. */
+export declare function InputShell({ icon, size, width, children, }: {
+    icon?: ReactNode;
+    children: ReactNode;
+} & ControlProps): ReactElement;
+/**
+ * The field box of an `Input` with a `prefix`: the control look and the focus ring sit on the
+ * wrapper, around the prefix text and the borderless input. Not exported from the package.
+ */
+export declare function PrefixShell({ prefix, size, width, disabled, children, }: {
+    prefix: string;
+    disabled: boolean | undefined;
+    children: ReactNode;
+} & ControlProps): ReactElement;

package/dist/InputShell.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CONTROL_WIDTH, controlClass } from "./control.js";
+import { cx } from "./cx.js";
+/** Where a leading icon sits, and its size, by the control's size. */
+const ICON = {
+    sm: "left-2 [&>svg]:h-3.5 [&>svg]:w-3.5",
+    md: "left-3 [&>svg]:h-4 [&>svg]:w-4",
+    lg: "left-4 [&>svg]:h-5 [&>svg]:w-5",
+};
+/** The prefix text's inset and size, by the control's size. */
+const PREFIX = {
+    sm: "pl-2 text-xs",
+    md: "pl-3 text-sm",
+    lg: "pl-4 text-base",
+};
+/** The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package. */
+export function InputShell({ icon, size = "md", width = "full", children, }) {
+    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-slate-400", ICON[size]), children: icon })), children] }));
+}
+/**
+ * The field box of an `Input` with a `prefix`: the control look and the focus ring sit on the
+ * wrapper, around the prefix text and the borderless input. Not exported from the package.
+ */
+export function PrefixShell({ prefix, size = "md", width = "full", disabled, children, }) {
+    return (_jsxs("div", { className: cx(controlClass(size, width), "flex items-center has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-violet-600", width === "auto" && "inline-flex", disabled && "opacity-50"), children: [_jsx("span", { className: cx("shrink-0 select-none text-slate-500", PREFIX[size]), children: prefix }), children] }));
+}

package/dist/Kbd.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export declare function Kbd({ children, ...rest }: {
+    children: ReactNode;
+} & Unstyled<HTMLAttributes<HTMLElement>>): ReactElement;

package/dist/Kbd.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** A keyboard key. Its border takes the surrounding text colour, so it reads on a filled button and on plain text. */
+export function Kbd({ children, ...rest }) {
+    return (_jsx("kbd", { ...rest, className: "rounded border border-current/30 px-1 font-mono text-xs leading-4", children: children }));
+}

package/dist/KeyValueList.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+type KeyValueAlign = "end" | "start";
+/**
+ * A definition list of label/value rows. By default each label is on the left and its value
+ * right-aligned. `align="start"` puts every value left-aligned in one column beside the labels,
+ * which are sized to the widest.
+ */
+export declare function KeyValueList({ align, children, ...rest }: {
+    /**
+     * `end` right-aligns each value; `start` puts every value left-aligned in one column beside the labels, sized to the widest.
+     * @default end
+     */
+    align?: KeyValueAlign;
+    children: ReactNode;
+} & Unstyled<HTMLAttributes<HTMLDListElement>>): ReactElement;
+/** One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an `align="start"` list). */
+export declare function KeyValue({ label, children, ...rest }: {
+    /** The term, on the left. */
+    label: ReactNode;
+    children: ReactNode;
+} & Unstyled<HTMLAttributes<HTMLDivElement>>): ReactElement;
+export {};

package/dist/KeyValueList.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, } from "react";
+import { cx } from "./cx.js";
+const AlignContext = createContext("end");
+/**
+ * A definition list of label/value rows. By default each label is on the left and its value
+ * right-aligned. `align="start"` puts every value left-aligned in one column beside the labels,
+ * which are sized to the widest.
+ */
+export function KeyValueList({ align = "end", children, ...rest }) {
+    return (_jsx("dl", { ...rest, className: cx(align === "start"
+            ? "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1.5"
+            : "flex flex-col gap-1.5", "text-sm"), children: _jsx(AlignContext.Provider, { value: align, children: children }) }));
+}
+/** One row of a KeyValueList: a label on the left, a tabular value on the right (or beside it, in an `align="start"` list). */
+export function KeyValue({ label, children, ...rest }) {
+    const start = useContext(AlignContext) === "start";
+    return (_jsxs("div", { ...rest, className: start ? "col-span-2 grid grid-cols-subgrid" : "flex justify-between gap-3", children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: start ? "tabular-nums" : "text-right tabular-nums", children: children })] }));
+}

package/dist/Lightbox.d.ts

@@ -0,0 +1,28 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+export type LightboxProps = {
+    /** The viewer's accessible name, e.g. "Photo from Anna". */
+    label: string;
+    /** The media: one `<img>` or `<video>`, scaled down to fit the screen. */
+    children: ReactNode;
+    /** A line on the scrim above the media, e.g. who posted it. */
+    title?: ReactNode;
+    /** A muted line under the title, e.g. when. */
+    meta?: ReactNode;
+    /** Muted text on the scrim under the media. */
+    caption?: ReactNode;
+    /** Called when the viewer closes: Esc, a click on the scrim or the close button. */
+    onClose: () => void;
+    /** Shows a previous button and binds ArrowLeft. Leave it out at the first item. */
+    onPrevious?: (() => void) | undefined;
+    /** Shows a next button and binds ArrowRight. Leave it out at the last item. */
+    onNext?: (() => void) | undefined;
+} & Passthrough;
+/**
+ * A full-screen photo or video viewer on the browser's own `<dialog>`: it is opened with
+ * `showModal()` on mount, so render it only while it is open. The page behind goes inert, Esc
+ * closes it and focus stays inside; a click on the scrim around the media and its text closes it
+ * too. The scrim stays near-black with light text in every theme. `onPrevious` and `onNext` add
+ * step buttons and the arrow keys.
+ */
+export declare function Lightbox({ label, children, title, meta, caption, onClose, onPrevious, onNext, ...rest }: LightboxProps): ReactElement;

package/dist/Lightbox.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, } from "react";
+import { Icon } from "./Icon.js";
+import { useModal } from "./modal.js";
+/**
+ * The full-screen viewer, painted with its own scrim: `bg-black/90` and the light text on it are the
+ * palette's media-scrim role, which every theme keeps near-black, light themes included.
+ */
+const VIEWER = "fixed inset-0 m-0 size-full max-h-none max-w-none flex-col border-0 bg-black/90 p-0 text-white opacity-0 transition-[opacity,overlay,display] transition-discrete duration-200 open:flex open:opacity-100 starting:open:opacity-0 motion-reduce:transition-none";
+/** A round control on the scrim, with a light focus ring: the accent is too dark on near-black in a light theme. */
+const CONTROL = "inline-flex size-11 shrink-0 items-center justify-center rounded-full text-white transition hover:bg-white/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white";
+const CLOSE = "M5.28 4.22a.75.75 0 0 0-1.06 1.06L8.94 10l-4.72 4.72a.75.75 0 1 0 1.06 1.06L10 11.06l4.72 4.72a.75.75 0 1 0 1.06-1.06L11.06 10l4.72-4.72a.75.75 0 0 0-1.06-1.06L10 8.94 5.28 4.22Z";
+const PREVIOUS = "M12.78 4.22a.75.75 0 0 1 0 1.06L8.06 10l4.72 4.72a.75.75 0 1 1-1.06 1.06l-5.25-5.25a.75.75 0 0 1 0-1.06l5.25-5.25a.75.75 0 0 1 1.06 0Z";
+const NEXT = "M7.22 4.22a.75.75 0 0 1 1.06 0l5.25 5.25a.75.75 0 0 1 0 1.06l-5.25 5.25a.75.75 0 1 1-1.06-1.06L11.94 10 7.22 5.28a.75.75 0 0 1 0-1.06Z";
+/** A round icon button on the scrim, named by `label`, which is also its tooltip. */
+function ScrimButton({ label, path, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: onClick, className: CONTROL, children: _jsx(Icon, { children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { d: path }) }) }) }));
+}
+/**
+ * A full-screen photo or video viewer on the browser's own `<dialog>`: it is opened with
+ * `showModal()` on mount, so render it only while it is open. The page behind goes inert, Esc
+ * closes it and focus stays inside; a click on the scrim around the media and its text closes it
+ * too. The scrim stays near-black with light text in every theme. `onPrevious` and `onNext` add
+ * step buttons and the arrow keys.
+ */
+export function Lightbox({ label, children, title, meta, caption, onClose, onPrevious, onNext, ...rest }) {
+    const dialog = useRef(null);
+    const closed = useModal(dialog, onClose);
+    const close = () => dialog.current?.close();
+    // The scrim is the dialog and the layout boxes in it, marked `data-scrim`; the media, the text and
+    // the buttons are not.
+    const clicked = (event) => {
+        if (event.target instanceof HTMLElement && event.target.hasAttribute("data-scrim"))
+            close();
+    };
+    const stepped = (event) => {
+        const step = { ArrowLeft: onPrevious, ArrowRight: onNext }[event.key];
+        if (!step)
+            return;
+        event.preventDefault();
+        step();
+    };
+    return (_jsxs("dialog", { ...rest, ref: dialog, "aria-label": label, "data-scrim": "", onClose: closed, onClick: clicked, onKeyDown: stepped, className: VIEWER, children: [_jsxs("header", { "data-scrim": "", className: "flex shrink-0 items-start justify-between gap-3 p-3", children: [_jsxs("div", { className: "min-w-0 px-2 py-1.5", children: [title && _jsx("div", { className: "text-sm font-semibold", children: title }), meta && _jsx("div", { className: "text-xs text-white/70", children: meta })] }), _jsx(ScrimButton, { label: "Close", path: CLOSE, onClick: close })] }), _jsxs("div", { "data-scrim": "", className: "flex min-h-0 flex-1 items-center gap-2 px-3", children: [onPrevious && _jsx(ScrimButton, { label: "Previous", path: PREVIOUS, onClick: onPrevious }), _jsx("div", { "data-scrim": "", className: "flex size-full min-w-0 items-center justify-center *:max-h-full *:max-w-full *:object-contain", children: children }), onNext && _jsx(ScrimButton, { label: "Next", path: NEXT, onClick: onNext })] }), _jsx("footer", { "data-scrim": "", className: "flex shrink-0 justify-center px-5 py-4", children: caption && _jsx("p", { className: "max-w-prose text-center text-sm text-white/70", children: caption }) })] }));
+}

package/dist/ListRow.d.ts

@@ -0,0 +1,109 @@
+import { type ComponentPropsWithoutRef, type PointerEventHandler, type ReactElement, type ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+type Shared = {
+    /**
+     * `sm` is dense padding, `lg` one step roomier than `md`.
+     * @default md
+     */
+    size?: Size | undefined;
+    /** A hairline above the row: set it on every row after the first. */
+    divided?: boolean | undefined;
+    /** Content before the label: an Avatar, a thumbnail, an icon. */
+    leading?: ReactNode | undefined;
+    /** Content at the far end of the row: a value, a count, a Pill. */
+    trailing?: ReactNode | undefined;
+    /**
+     * Marks the row in view, the one whose detail is open: a violet fill and `aria-current="true"`.
+     * Set it on one row of a list.
+     */
+    selected?: boolean | undefined;
+    /**
+     * Marks the row the keyboard cursor is on, for a list moved with the arrow keys or `j`/`k` while
+     * focus stays on the list: the focus ring, drawn inside the row. It says nothing to a screen
+     * reader (move real focus for that) and combines with `selected`.
+     */
+    focused?: boolean | undefined;
+    /**
+     * Marks the row a list follows with the pointer and the keyboard alike (set it from
+     * `onPointerEnter` and `onFocus`): a fill one step deeper than hover, so it shows on a white card
+     * and on a tinted panel alike. On a static row it shows the fill without `revealOnHover`, and
+     * shows `actions` that `revealOnHover` hides. `selected` wins.
+     */
+    active?: boolean | undefined;
+    /**
+     * A fixed width for `leading`, for a thumbnail (an `<img>` fills it), so the labels of rows with
+     * and without a picture still line up. Without it `leading` is as wide as its content.
+     */
+    leadingWidth?: "thumbnail" | undefined;
+    children: ReactNode;
+};
+type NotStatic = {
+    static?: undefined;
+    actions?: undefined;
+    revealOnHover?: undefined;
+};
+type ListRowButtonProps = Shared & NotStatic & {
+    /**
+     * Makes the row a collapsible header: sets `aria-expanded` and shows a chevron that turns down
+     * when open. The caller owns the state and the section; pass `aria-controls` to name it.
+     */
+    expanded?: boolean | undefined;
+    href?: undefined;
+    render?: undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "children">>;
+type ListRowLinkProps = Shared & NotStatic & {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+    expanded?: undefined;
+    /** On the row, not the link, so a link or button in the row does not count as leaving it. */
+    onPointerEnter?: PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: PointerEventHandler<HTMLDivElement> | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"a">, "href" | "children" | "onPointerEnter" | "onPointerLeave">> & ({
+    /** Makes the row a link to this URL. */
+    href: string;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/quotes/1" {...p} />`. */
+    render?: LinkRender | undefined;
+} | {
+    /** Makes the row a link to this URL. */
+    href?: string | undefined;
+    /** Draws the link with the app's own router `<Link>`: `(p) => <Link to="/quotes/1" {...p} />`. */
+    render: LinkRender;
+});
+type ListRowStaticProps = Shared & {
+    /**
+     * A row that is neither a button nor a link, for one that holds its own controls: a `<div>` with
+     * no click target and no hover fill (unless `revealOnHover`), taking `actions` as well.
+     */
+    static: true;
+    /** Buttons for this row, after `trailing`: `Button size="sm"`, `IconButton`. */
+    actions?: ReactNode | undefined;
+    /**
+     * Hides `actions` until the row is hovered or something in it has focus, so a long list is not a
+     * wall of buttons. A touch screen has no hover, so they are always shown there.
+     */
+    revealOnHover?: boolean | undefined;
+    expanded?: undefined;
+    href?: undefined;
+    render?: undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"div">, "children">>;
+export type ListRowProps = ListRowButtonProps | ListRowLinkProps | ListRowStaticProps;
+/**
+ * A full-width row that is a `<button>` (or, with `href` or `render`, a link) with a hover fill, a
+ * left-aligned label and `trailing` content at the far end. A linked row is a `<div>` with the link
+ * stretched over it, so the whole row opens the link; a `TextLink`, `Button` or `Checkbox` in the
+ * row sits above the link and is clickable on its own. With `expanded` it is the header of a
+ * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; `divided` draws
+ * the line between them, on each row after the first.
+ *
+ * `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
+ * `selected` marks the row in view, `focused` the one the keyboard cursor is on and `active` fills
+ * the row a list follows (`onPointerEnter`, `onPointerLeave` and `onFocus` reach
+ * every form; on a linked row the pointer handlers go on the row itself). The label is a
+ * `<div>`, so it can hold block content (a name over a path). `static` makes the
+ * row a plain `<div>` for one that holds its own buttons (a button cannot sit inside a button or a
+ * link): `actions` follow `trailing`, and `revealOnHover` shows them only on hover or focus.
+ */
+export declare function ListRow(props: ListRowProps): ReactElement;
+export {};

package/dist/ListRow.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { Chevron } from "./Chevron.js";
+import { cx, focusRing, liftInteractive } from "./cx.js";
+import { renderLink } from "./link.js";
+const ROW_LOOK = "flex w-full items-center gap-3 text-left text-sm text-slate-900 disabled:pointer-events-none disabled:opacity-50";
+const INSET_RING = `${focusRing} focus-visible:-outline-offset-2`;
+const ROW = `${ROW_LOOK} ${INSET_RING}`;
+/** A linked row is a `relative` box; its link is an empty overlay, so the row's own links and buttons are not nested in it. */
+const LINK_ROW = `relative ${ROW_LOOK} ${liftInteractive}`;
+const OVERLAY = `link-stretch absolute inset-0 ${INSET_RING}`;
+const STATIC = "group/row flex w-full items-center gap-3 text-sm text-slate-900";
+const FILL = "hover:bg-slate-50";
+const SELECTED = "bg-violet-50 hover:bg-violet-50";
+/**
+ * The row a pointer or keyboard cursor is on: the inset fill, one step deeper than hover, so it
+ * still shows on a `bg-slate-50` surface (a `FullBleedLayout` panel, a toned card).
+ */
+const ACTIVE = "bg-slate-100";
+/** The keyboard cursor: the focus ring, drawn inside the row, on a row that does not hold DOM focus. */
+const FOCUSED = "outline-2 -outline-offset-2 outline-violet-600";
+/** A thumbnail's width. A direct-child image fills it. */
+const THUMBNAIL = "block w-32 [&>img]:block [&>img]:h-auto [&>img]:w-full";
+/** Hidden until the row is hovered or has focus inside it; always shown where any pointer is coarse (a touch screen, hybrids included). */
+const REVEAL = "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 any-pointer-coarse:opacity-100";
+const PAD = { sm: "px-3 py-2", md: "px-4 py-3", lg: "px-5 py-4" };
+/** The row's background: the selected fill, else the hover fill unless a plain static row has none. */
+function fillOf(props) {
+    if (props.selected)
+        return SELECTED;
+    if (props.active)
+        return ACTIVE;
+    return props.static && !props.revealOnHover ? undefined : FILL;
+}
+function rowBase(props) {
+    if (props.static)
+        return STATIC;
+    return props.href !== undefined || props.render !== undefined ? LINK_ROW : ROW;
+}
+function look(props) {
+    const { size = "md", divided = false, focused = false } = props;
+    return cx(rowBase(props), PAD[size], divided && "border-t border-slate-200/70", fillOf(props), focused && FOCUSED);
+}
+function StaticRow(props) {
+    const { leading: _l, leadingWidth: _lw, trailing: _t, focused: _f, active = false, selected, size: _s, divided: _d, static: _st, actions, revealOnHover = false, expanded: _e, href: _h, render: _r, start, label, end, ...rest } = props;
+    return (_jsxs("div", { ...rest, ...(selected ? { "aria-current": "true" } : {}), className: look(props), children: [start, label, end, actions != null && (_jsx("span", { className: cx("flex shrink-0 items-center gap-2", revealOnHover && !active && REVEAL), children: actions }))] }));
+}
+function LinkRow(props) {
+    const { leading: _l, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded: _e, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, start, label, end, onPointerEnter, onPointerLeave, ...rest } = props;
+    const rowId = useId();
+    return (_jsxs("div", { id: rowId, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: look(props), children: [renderLink({
+                ...(rest["aria-label"] === undefined ? { "aria-labelledby": rowId } : {}),
+                ...rest,
+                ...(selected ? { "aria-current": "true" } : {}),
+                className: OVERLAY,
+                children: null,
+            }), start, label, end] }));
+}
+function ButtonRow(props) {
+    const { leading: _l, leadingWidth: _lw, trailing: _t, focused: _f, active: _ac, selected, expanded, size: _s, divided: _d, static: _st, actions: _a, revealOnHover: _rh, href: _h, render: _r, start, label, end, ...rest } = props;
+    return (_jsxs("button", { type: "button", ...rest, ...(selected ? { "aria-current": "true" } : {}), ...(expanded === undefined ? {} : { "aria-expanded": expanded }), className: look(props), children: [expanded !== undefined && _jsx(Chevron, { open: expanded }), start, label, end] }));
+}
+/**
+ * A full-width row that is a `<button>` (or, with `href` or `render`, a link) with a hover fill, a
+ * left-aligned label and `trailing` content at the far end. A linked row is a `<div>` with the link
+ * stretched over it, so the whole row opens the link; a `TextLink`, `Button` or `Checkbox` in the
+ * row sits above the link and is clickable on its own. With `expanded` it is the header of a
+ * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; `divided` draws
+ * the line between them, on each row after the first.
+ *
+ * `leading` is content before the label (`leadingWidth="thumbnail"` gives it a fixed picture width),
+ * `selected` marks the row in view, `focused` the one the keyboard cursor is on and `active` fills
+ * the row a list follows (`onPointerEnter`, `onPointerLeave` and `onFocus` reach
+ * every form; on a linked row the pointer handlers go on the row itself). The label is a
+ * `<div>`, so it can hold block content (a name over a path). `static` makes the
+ * row a plain `<div>` for one that holds its own buttons (a button cannot sit inside a button or a
+ * link): `actions` follow `trailing`, and `revealOnHover` shows them only on hover or focus.
+ */
+export function ListRow(props) {
+    const { leading, leadingWidth, trailing, children } = props;
+    const pieces = {
+        start: leading != null && (_jsx("span", { className: cx("shrink-0", leadingWidth === "thumbnail" && THUMBNAIL), children: leading })),
+        label: _jsx("div", { className: "min-w-0 flex-1", children: children }),
+        end: trailing != null && (_jsx("span", { className: "shrink-0 tabular-nums text-slate-500", children: trailing })),
+    };
+    if (props.static)
+        return _jsx(StaticRow, { ...props, ...pieces });
+    if (props.href !== undefined || props.render !== undefined) {
+        return _jsx(LinkRow, { ...props, ...pieces });
+    }
+    return _jsx(ButtonRow, { ...props, ...pieces });
+}

package/dist/Markdown.d.ts

@@ -0,0 +1,9 @@
+import type { Passthrough } from "./props.js";
+/**
+ * A small, safe Markdown renderer for short notes: `## ` and `### ` headings, `- ` or `* ` bullets,
+ * `**bold**` and paragraphs. Text is rendered as React nodes, never as HTML.
+ */
+export declare function Markdown({ md, ...rest }: {
+    /** The Markdown source. */
+    md: string;
+} & Passthrough): import("react").JSX.Element;

package/dist/Markdown.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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)));
+}
+/**
+ * A small, safe Markdown renderer for short notes: `## ` and `### ` headings, `- ` or `* ` bullets,
+ * `**bold**` and paragraphs. Text is rendered as React nodes, never as HTML.
+ */
+export function Markdown({ md, ...rest }) {
+    const out = [];
+    let bullets = [];
+    const flush = () => {
+        if (bullets.length) {
+            out.push(_jsx("ul", { className: "ml-4 list-disc space-y-1", children: bullets }, `u${out.length}`));
+            bullets = [];
+        }
+    };
+    md.split("\n").forEach((ln, i) => {
+        const t = ln.trim();
+        if (t.startsWith("## ")) {
+            flush();
+            out.push(_jsx("h2", { className: "mt-4 text-xs font-semibold uppercase tracking-wide text-slate-400 first:mt-0", children: t.slice(3) }, i));
+        }
+        else if (t.startsWith("### ")) {
+            flush();
+            out.push(_jsx("h3", { className: "mt-3 text-sm font-semibold text-slate-700", children: t.slice(4) }, i));
+        }
+        else if (t.startsWith("- ") || t.startsWith("* ")) {
+            bullets.push(_jsx("li", { className: "text-sm text-slate-700", children: inline(t.slice(2)) }, i));
+        }
+        else if (t === "") {
+            flush();
+        }
+        else {
+            flush();
+            out.push(_jsx("p", { className: "text-sm text-slate-700", children: inline(t) }, i));
+        }
+    });
+    flush();
+    return (_jsx("div", { ...rest, className: "space-y-1", children: out }));
+}

package/dist/MetaList.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/** The mark between MetaList items: `·`, `•`, or `none` for a gap alone. */
+export type MetaListSeparator = "·" | "•" | "none";
+/**
+ * A wrapping row of facts or links in muted small text, joined by a `·`: branch · SHA · date, or a
+ * footer's Privacy · Terms · Email. An item is text, a `Code` or a `TextLink`. The separator is
+ * `aria-hidden` and leads each item but the first, held to its item so a wrap never leaves one at a
+ * line's end; `separator` swaps it for a `•` or none. `nowrap` keeps each item on one line, for
+ * links. `mono` sets the whole row in the monospace face, for ids and paths.
+ */
+export declare function MetaList({ mono, separator, nowrap, children, ...rest }: {
+    /** The whole row in the monospace face, for ids and paths. */
+    mono?: boolean | undefined;
+    /**
+     * The mark between items: `·`, `•`, or `none` for a gap alone.
+     * @default ·
+     */
+    separator?: MetaListSeparator | undefined;
+    /** Each item stays on one line; the row still wraps between items. For a row of links. */
+    nowrap?: boolean | undefined;
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/MetaList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { cx } from "./cx.js";
+import { Caption } from "./typography.js";
+/**
+ * A wrapping row of facts or links in muted small text, joined by a `·`: branch · SHA · date, or a
+ * footer's Privacy · Terms · Email. An item is text, a `Code` or a `TextLink`. The separator is
+ * `aria-hidden` and leads each item but the first, held to its item so a wrap never leaves one at a
+ * line's end; `separator` swaps it for a `•` or none. `nowrap` keeps each item on one line, for
+ * links. `mono` sets the whole row in the monospace face, for ids and paths.
+ */
+export function MetaList({ mono = false, separator = "·", nowrap = false, children, ...rest }) {
+    return (_jsx("ul", { ...rest, className: cx("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-slate-500", mono && "font-mono"), children: Children.toArray(children).map((child, index) => (_jsxs("li", { className: cx("inline-flex items-center gap-x-3", nowrap && "whitespace-nowrap"), children: [index > 0 && separator !== "none" && _jsx(Caption, { "aria-hidden": "true", children: separator }), child] }, index))) }));
+}