@hackcove/ui 0.2.3 → 0.2.5

package/dist/ButtonLink.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { type ButtonLook } from "./Button.js";
+import { type LinkRender } from "./link.js";
+type ButtonLinkProps = ButtonLook & {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+} & Omit<ComponentPropsWithoutRef<"a">, "href"> & ({
+    href: string;
+    render?: LinkRender | undefined;
+} | {
+    href?: string | undefined;
+    render: LinkRender;
+});
+/**
+ * A link that looks like a Button. A plain `<a href>` by default; with `render` it draws the app's
+ * own router `<Link>` instead (`render={(p) => <Link to="/quotes" {...p} />}`), already carrying the
+ * button classes. `variant`, `size` and `tone` are the Button's.
+ */
+export declare function ButtonLink({ variant, size, tone, href, render, external, className, children, ...rest }: ButtonLinkProps): ReactElement;
+export {};

package/dist/ButtonLink.js

@@ -0,0 +1,18 @@
+import { buttonClass } from "./Button.js";
+import { cx } from "./cx.js";
+import { renderLink } from "./link.js";
+/**
+ * A link that looks like a Button. A plain `<a href>` by default; with `render` it draws the app's
+ * own router `<Link>` instead (`render={(p) => <Link to="/quotes" {...p} />}`), already carrying the
+ * button classes. `variant`, `size` and `tone` are the Button's.
+ */
+export function ButtonLink({ variant = "primary", size = "md", tone = "default", href, render, external = false, className, children, ...rest }) {
+    return renderLink({
+        ...rest,
+        href,
+        render,
+        external,
+        className: cx(buttonClass(variant, { size, tone }), className),
+        children,
+    });
+}

package/dist/Callout.d.ts

@@ -1,10 +1,18 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from "react";
 /** The colour family of a callout. */
 export type CalloutTone = "neutral" | "info" | "positive" | "warn" | "danger";
-/** A tinted notice box, with an optional bold title above its body. */
-export declare function Callout({ tone, title, children, className, ...rest }: {
+/**
+ * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
+ * top of a `Card flush` (a padded card would inset it).
+ */
+export declare function Callout({ tone, title, actions, banner, children, className, ...rest }: {
     /** Defaults to "info". */
     tone?: CalloutTone;
     title?: ReactNode;
+    /** A button or link at the end of the row, beside the title and body. */
+    actions?: ReactNode;
+    /** A flat strip: `border-b` only and no radius, to sit above a card body. */
+    banner?: boolean;
     children: ReactNode;
 } & Omit<HTMLAttributes<HTMLDivElement>, "title">): ReactElement;

package/dist/Callout.js

@@ -7,7 +7,12 @@ const TONES = {
     warn: "border-amber-200 bg-amber-50 text-amber-800",
     danger: "border-red-200 bg-red-50 text-red-800",
 };
-/** A tinted notice box, with an optional bold title above its body. */
-export function Callout({ tone = "info", title, children, className, ...rest }) {
-    return (_jsx("div", { className: cx("rounded-xl border p-4 text-sm", TONES[tone], className), ...rest, children: title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children) }));
+/**
+ * A tinted notice box, with an optional bold title above its body. `actions` puts a button or link
+ * at the end of the row; `banner` makes it a flat strip (bottom border only, no radius) for the
+ * top of a `Card flush` (a padded card would inset it).
+ */
+export function Callout({ tone = "info", title, actions, banner = false, children, className, ...rest }) {
+    const content = title ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "font-semibold", children: title }), _jsx("div", { className: "mt-1", children: children })] })) : (children);
+    return (_jsx("div", { className: cx(banner ? "border-b px-5 py-3 text-sm" : "rounded-xl border p-4 text-sm", TONES[tone], className), ...rest, children: actions ? (_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("div", { className: "min-w-0", children: content }), _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })) : (content) }));
 }

package/dist/Checkbox.d.ts

@@ -1,5 +1,11 @@
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
-/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
-export declare function Checkbox({ label, className, ...rest }: {
-    label: ReactNode;
-} & Omit<ComponentPropsWithoutRef<"input">, "type">): ReactElement;
+import type { ControlSize } from "./control.js";
+/**
+ * A native checkbox with its label. `className` goes on the label, every other prop on the input.
+ * `size="sm"` is `text-xs` and a smaller box, for a dense row. Leave `label` out for a bare box in
+ * a table cell, and name it with `aria-label`.
+ */
+export declare function Checkbox({ label, size, className, ...rest }: {
+    label?: ReactNode;
+    size?: ControlSize | undefined;
+} & Omit<ComponentPropsWithoutRef<"input">, "type" | "size" | "width">): ReactElement;

package/dist/Checkbox.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx, focusRing } from "./cx.js";
-/** A native checkbox with its label. `className` goes on the label; every other prop goes on the input. */
-export function Checkbox({ label, className, ...rest }) {
-    return (_jsxs("label", { className: cx("inline-flex cursor-pointer items-center gap-2 text-sm text-slate-700", className), children: [_jsx("input", { type: "checkbox", className: cx("h-4 w-4 accent-violet-600", focusRing), ...rest }), label] }));
+/**
+ * A native checkbox with its label. `className` goes on the label, every other prop on the input.
+ * `size="sm"` is `text-xs` and a smaller box, for a dense row. Leave `label` out for a bare box in
+ * a table cell, and name it with `aria-label`.
+ */
+export function Checkbox({ label, size = "md", className, ...rest }) {
+    const small = size === "sm";
+    return (_jsxs("label", { className: cx("inline-flex cursor-pointer items-center text-slate-700", small ? "gap-1.5 text-xs" : "gap-2 text-sm", className), children: [_jsx("input", { type: "checkbox", className: cx(small ? "h-3.5 w-3.5" : "h-4 w-4", "accent-violet-600", focusRing), ...rest }), label] }));
 }

package/dist/Code.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes, ReactElement } from "react";
+/** Inline code: mono, on a subtle inset background. It takes the surrounding text colour and size (a touch smaller, for the mono face). */
+export declare function Code({ className, ...rest }: HTMLAttributes<HTMLElement>): ReactElement;

package/dist/Code.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** Inline code: mono, on a subtle inset background. It takes the surrounding text colour and size (a touch smaller, for the mono face). */
+export function Code({ className, ...rest }) {
+    return (_jsx("code", { className: cx("rounded bg-slate-100 px-1 py-0.5 font-mono text-[0.9em]", className), ...rest }));
+}

package/dist/ColourSchemeToggle.d.ts

@@ -1,7 +1,18 @@
 import { type ReactElement } from "react";
-import { type ColourScheme } from "./colourScheme.js";
-/** A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`. */
-export declare function ColourSchemeToggle({ className, onChange, }: {
+import { type ColourScheme, type ColourSchemeClasses } from "./colourScheme.js";
+/**
+ * A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`, unless you pass `schemes` or `initial`: the script knows only the `dark` class and the stored choice, so an app that sets the scheme itself leaves it out.
+ *
+ * An app whose light scheme has a class of its own passes `schemes` (`{ light: "paper", dark: "dark" }`);
+ * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
+ * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
+ * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
+ */
+export declare function ColourSchemeToggle({ className, onChange, schemes, initial, }: {
     className?: string;
     onChange?: (scheme: ColourScheme) => void;
+    /** The class each scheme puts on `<html>`. Default `{ light: "", dark: "dark" }`. */
+    schemes?: ColourSchemeClasses | undefined;
+    /** The scheme the server rendered. What the server and the hydrating client show; the real state follows right after. Default `"light"`. */
+    initial?: ColourScheme | undefined;
 }): ReactElement;

package/dist/ColourSchemeToggle.js

@@ -1,24 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncExternalStore } from "react";
-import { applyColourScheme, storeColourScheme } from "./colourScheme.js";
+import { appliedColourScheme, applyColourScheme, storeColourScheme, } from "./colourScheme.js";
 import { IconButton } from "./IconButton.js";
 const sun = (_jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })] }));
 const moon = (_jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z" }) }));
-// The `dark` class on <html> is the source of truth: the head script set it before React ran.
+// The scheme's class on <html> is the source of truth: the head script or the server set it before React ran.
 function subscribe(onChange) {
     const observer = new MutationObserver(onChange);
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
 }
-const current = () => document.documentElement.classList.contains("dark") ? "dark" : "light";
-// What the server and the hydrating client both render; the real state follows right after.
-const server = () => "light";
-/** A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`. */
-export function ColourSchemeToggle({ className, onChange, }) {
-    const scheme = useSyncExternalStore(subscribe, current, server);
+/**
+ * A sun/moon button that switches `<html>` between light and dark and remembers the choice. It shows the scheme you would switch to. Pair it with `colourSchemeScript` in `<head>`, unless you pass `schemes` or `initial`: the script knows only the `dark` class and the stored choice, so an app that sets the scheme itself leaves it out.
+ *
+ * An app whose light scheme has a class of its own passes `schemes` (`{ light: "paper", dark: "dark" }`);
+ * the toggle swaps those classes, and `schemeClass` gives the same one for the server to render on `<html>`.
+ * An app that knows the scheme on the server (from a cookie) passes it as `initial`, so the server
+ * markup, the hydrating client and the `<html>` class agree; persist a change from `onChange`.
+ */
+export function ColourSchemeToggle({ className, onChange, schemes = { light: "", dark: "dark" }, initial, }) {
+    const scheme = useSyncExternalStore(subscribe, () => appliedColourScheme(document.documentElement, schemes), () => initial ?? "light");
     const next = scheme === "dark" ? "light" : "dark";
     return (_jsx(IconButton, { label: `Switch to ${next} theme`, className: className, onClick: () => {
-            applyColourScheme(next);
+            applyColourScheme(next, document.documentElement, schemes);
             storeColourScheme(next);
             onChange?.(next);
         }, children: next === "light" ? sun : moon }));

package/dist/Container.d.ts

@@ -3,8 +3,10 @@ import type { ReactElement, ReactNode } from "react";
  * The one content edge: every page's width and side padding. This file is the only place they are
  * defined, so a header, a page and a footer inside a Container start at the same x.
  */
-export declare function Container({ as: Tag, className, children, }: {
+export declare function Container({ as: Tag, className, elementRef, children, }: {
     as?: "div" | "main" | "header" | "footer" | "section" | "nav";
     className?: string;
+    /** The rendered element, for a parent that measures or scrolls it. */
+    elementRef?: (element: HTMLElement | null) => void;
     children?: ReactNode;
 }): ReactElement;

package/dist/Container.js

@@ -4,6 +4,6 @@ import { cx } from "./cx.js";
  * The one content edge: every page's width and side padding. This file is the only place they are
  * defined, so a header, a page and a footer inside a Container start at the same x.
  */
-export function Container({ as: Tag = "div", className, children, }) {
-    return _jsx(Tag, { className: cx("mx-auto w-full max-w-6xl px-4 sm:px-6", className), children: children });
+export function Container({ as: Tag = "div", className, elementRef, children, }) {
+    return (_jsx(Tag, { ref: elementRef, className: cx("mx-auto w-full max-w-6xl px-4 sm:px-6", className), children: children }));
 }

package/dist/DateField.d.ts

@@ -14,6 +14,10 @@ export type DateFieldProps = {
     description?: ReactNode;
     /** Replaces the built-in error message (an impossible date, or one outside min/max). */
     errorMessage?: ReactNode;
+    /** An error from outside the field (a server's, say). Shown in place of the description, in red with `role="alert"`, and marks the field invalid. Like `Field`'s `error`. */
+    error?: ReactNode;
+    /** Marks the field invalid with no message of its own; pair it with `errorMessage`. */
+    isInvalid?: boolean;
     className?: string;
 } & Pick<AriaDateFieldProps<CalendarDate>, "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDisabled" | "isRequired" | "name" | "aria-label">;
 /** What the segments show, as the day segment reports it to the field. */
@@ -35,15 +39,24 @@ export declare function frameClass({ isInvalid, isFocusWithin, isDisabled, }: {
     isFocusWithin: boolean;
     isDisabled: boolean;
 }): string;
+/** The props that force a field invalid: an impossible date, `isInvalid`, or an `error` from outside. Spread onto the React Aria field after the rest. */
+export declare function forcedInvalid({ impossible, isInvalid, error, }: {
+    impossible: string | null;
+    isInvalid: boolean | undefined;
+    error: ReactNode;
+}): {
+    isInvalid?: true;
+};
 /** The label, the description or the error line: the shared outside of both components. */
-export declare function Notes({ description, errorMessage, impossible, isInvalid, }: {
+export declare function Notes({ description, errorMessage, error, impossible, isInvalid, }: {
     description: ReactNode;
     errorMessage: ReactNode;
+    error: ReactNode;
     impossible: string | null;
     isInvalid: boolean;
 }): ReactElement;
 export declare const labelClass = "text-sm font-medium text-slate-700";
 export declare const iconButtonClass = "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-600";
 /** A segmented DD / MM / YYYY date input. Values are `CalendarDate`s; `name` posts it as `YYYY-MM-DD`. */
-export declare function DateField({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }: DateFieldProps): ReactElement;
+export declare function DateField({ label, description, errorMessage, error, isInvalid: invalidProp, className, value, defaultValue, onChange, name, ...rest }: DateFieldProps): ReactElement;
 export {};

package/dist/DateField.js

@@ -57,14 +57,18 @@ export function frameClass({ isInvalid, isFocusWithin, isDisabled, }) {
         tone = "border-violet-600 bg-white text-slate-900";
     return cx("flex w-full items-center rounded-lg border py-2 pl-2.5 text-sm transition", tone, isDisabled && "opacity-50");
 }
+/** The props that force a field invalid: an impossible date, `isInvalid`, or an `error` from outside. Spread onto the React Aria field after the rest. */
+export function forcedInvalid({ impossible, isInvalid, error, }) {
+    return impossible || isInvalid || error ? { isInvalid: true } : {};
+}
 /** The label, the description or the error line: the shared outside of both components. */
-export function Notes({ description, errorMessage, impossible, isInvalid, }) {
-    return (_jsxs(_Fragment, { children: [!isInvalid && description ? (_jsx(Text, { slot: "description", className: "text-xs text-slate-500", children: description })) : null, _jsx(FieldError, { className: "text-xs text-red-700", children: ({ validationErrors }) => errorMessage ?? impossible ?? validationErrors.join(" ") })] }));
+export function Notes({ description, errorMessage, error, impossible, isInvalid, }) {
+    return (_jsxs(_Fragment, { children: [!isInvalid && description ? (_jsx(Text, { slot: "description", className: "text-xs text-slate-500", children: description })) : null, _jsx(FieldError, { className: "text-xs text-red-700", children: ({ validationErrors }) => error ? (_jsx("span", { role: "alert", children: error })) : ((errorMessage ?? impossible ?? validationErrors.join(" "))) })] }));
 }
 export const labelClass = "text-sm font-medium text-slate-700";
 export const iconButtonClass = `inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 disabled:opacity-50 ${focusRing}`;
 /** A segmented DD / MM / YYYY date input. Values are `CalendarDate`s; `name` posts it as `YYYY-MM-DD`. */
-export function DateField({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }) {
+export function DateField({ label, description, errorMessage, error, isInvalid: invalidProp, className, value, defaultValue, onChange, name, ...rest }) {
     const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
         value,
         defaultValue,
@@ -73,5 +77,5 @@ export function DateField({ label, description, errorMessage, className, value,
         maxValue: rest.maxValue,
         isRequired: rest.isRequired,
     });
-    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateField, { ...rest, value: inner, onChange: setInner, validate: validate, ...(impossible ? { isInvalid: true } : {}), isReadOnly: leaving, onBlur: onLeft, granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(DateInput, { className: (state) => cx(frameClass(state), "pr-2.5"), children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, impossible: impossible, isInvalid: isInvalid })] })) }) }));
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDateField, { ...rest, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), isReadOnly: leaving, onBlur: onLeft, granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(DateInput, { className: (state) => cx(frameClass(state), "pr-2.5"), children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid })] })) }) }));
 }

package/dist/DatePicker.d.ts

@@ -5,4 +5,4 @@ export type DatePickerProps = DateFieldProps & {
     defaultOpen?: boolean;
 };
 /** A `DateField` with a calendar button that opens a month view in a popover. */
-export declare function DatePicker({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }: DatePickerProps): ReactElement;
+export declare function DatePicker({ label, description, errorMessage, error, isInvalid: invalidProp, className, value, defaultValue, onChange, name, ...rest }: DatePickerProps): ReactElement;

package/dist/DatePicker.js

@@ -3,7 +3,7 @@ import { useContext } from "react";
 import { Button, DatePicker as AriaDatePicker, DateFieldContext, DateInput, Group, I18nProvider, Label, } from "react-aria-components";
 import { cx } from "./cx.js";
 import { CalendarPopover, calendarIcon } from "./DateCalendar.js";
-import { FieldSegment, LOCALE, Notes, frameClass, iconButtonClass, labelClass, } from "./DateField.js";
+import { FieldSegment, LOCALE, forcedInvalid, Notes, frameClass, iconButtonClass, labelClass, } from "./DateField.js";
 import { ShownInput, useShownDate } from "./shownDate.js";
 /**
  * The picker's input, read-only while `leaving`. Only the field: a read-only picker would also
@@ -14,7 +14,7 @@ function PickerInput({ leaving, onLeft, children, }) {
     return (_jsx(DateFieldContext.Provider, { value: { ...field, isReadOnly: leaving, onBlur: onLeft }, children: children }));
 }
 /** A `DateField` with a calendar button that opens a month view in a popover. */
-export function DatePicker({ label, description, errorMessage, className, value, defaultValue, onChange, name, ...rest }) {
+export function DatePicker({ label, description, errorMessage, error, isInvalid: invalidProp, className, value, defaultValue, onChange, name, ...rest }) {
     const { inner, setInner, shown, impossible, onRead, validate, leaving, onBlurCapture, onLeft } = useShownDate({
         value,
         defaultValue,
@@ -23,5 +23,5 @@ export function DatePicker({ label, description, errorMessage, className, value,
         maxValue: rest.maxValue,
         isRequired: rest.isRequired,
     });
-    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, value: inner, onChange: setInner, validate: validate, ...(impossible ? { isInvalid: true } : {}), granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1 pr-1"), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: iconButtonClass, children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, {})] })) }) }));
+    return (_jsx(I18nProvider, { locale: LOCALE, children: _jsx(AriaDatePicker, { ...rest, value: inner, onChange: setInner, validate: validate, ...forcedInvalid({ impossible, isInvalid: invalidProp, error }), granularity: "day", shouldForceLeadingZeros: true, className: cx("flex flex-col gap-1.5", className), children: ({ isInvalid }) => (_jsxs(_Fragment, { children: [label ? _jsx(Label, { className: labelClass, children: label }) : null, _jsxs(Group, { className: (state) => cx(frameClass(state), "gap-1 pr-1"), children: [_jsx("div", { className: "contents", onBlurCapture: onBlurCapture, children: _jsx(PickerInput, { leaving: leaving, onLeft: onLeft, children: _jsx(DateInput, { className: "flex flex-1", children: (segment) => (_jsx(FieldSegment, { segment: segment, ...(segment.type === "day" ? { onRead } : {}) })) }) }) }), _jsx(Button, { className: iconButtonClass, children: calendarIcon })] }), _jsx(ShownInput, { name: name, shown: shown, isDisabled: rest.isDisabled }), _jsx(Notes, { description: description, errorMessage: errorMessage, error: error, impossible: impossible, isInvalid: isInvalid }), _jsx(CalendarPopover, {})] })) }) }));
 }

package/dist/Divider.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes, ReactElement } from "react";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Spacing is the caller's, on `className`. */
+export declare function Divider({ className, ...rest }: Omit<HTMLAttributes<HTMLHRElement>, "children">): ReactElement;

package/dist/Divider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/** A hairline rule in the theme's line colour: between a heading and its content, or above a footer. Spacing is the caller's, on `className`. */
+export function Divider({ className, ...rest }) {
+    return _jsx("hr", { className: cx("border-t border-slate-200/70", className), ...rest });
+}

package/dist/Drawer.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement, type ReactNode } from "react";
+declare const SIZE: {
+    readonly sm: "w-80";
+    readonly md: "w-110";
+    readonly lg: "w-160";
+};
+export type DrawerProps = {
+    /** The drawer's accessible name, shown as its heading. */
+    title: ReactNode;
+    children?: ReactNode;
+    /** Actions pinned under the scrolling body, right-aligned. */
+    footer?: ReactNode;
+    /** `md` (the default) holds a form or a record; `sm` is narrower and `lg` wider. */
+    size?: keyof typeof SIZE;
+    /** Called when the drawer closes: Esc, a click on the scrim or the close button. */
+    onClose: () => void;
+    /** The accessible name of the close button. */
+    closeLabel?: string;
+    className?: string;
+};
+/**
+ * A modal slide-over anchored to the right edge, 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 (the `<dialog>` element itself, not its
+ * contents) closes it too. The header holds the title and a close button; the body scrolls between
+ * it and an optional pinned `footer`.
+ */
+export declare function Drawer({ title, children, footer, size, onClose, closeLabel, className, }: DrawerProps): ReactElement;
+export {};

package/dist/Drawer.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useId, useRef } from "react";
+import { cx } from "./cx.js";
+import { IconButton } from "./IconButton.js";
+import { ModalHeading } from "./typography.js";
+const PANEL = "fixed inset-y-0 right-0 left-auto m-0 h-dvh max-h-none max-w-full flex-col overflow-hidden border-l border-slate-200 bg-white p-0 text-slate-900 shadow-2xl backdrop:bg-slate-900/35 open:flex transition-transform duration-200 starting:open:translate-x-full motion-reduce:transition-none";
+const SIZE = { sm: "w-80", md: "w-110", lg: "w-160" };
+/**
+ * A modal slide-over anchored to the right edge, 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 (the `<dialog>` element itself, not its
+ * contents) closes it too. The header holds the title and a close button; the body scrolls between
+ * it and an optional pinned `footer`.
+ */
+export function Drawer({ title, children, footer, size = "md", onClose, closeLabel = "Close", className, }) {
+    const dialog = useRef(null);
+    const titleId = useId();
+    // Closing on unmount (not just on Esc or the scrim) hands focus back to the opener when the
+    // parent unmounts the drawer, and keeps StrictMode's second mount from reopening an open dialog.
+    useLayoutEffect(() => {
+        const el = dialog.current;
+        el?.showModal();
+        return () => el?.close();
+    }, []);
+    return (_jsxs("dialog", { ref: dialog, "aria-labelledby": titleId, onClose: onClose, onClick: (event) => event.target === dialog.current && dialog.current?.close(), className: cx(PANEL, SIZE[size], className), children: [_jsxs("header", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5.5 py-3.5", children: [_jsx(ModalHeading, { id: titleId, children: title }), _jsx(IconButton, { label: closeLabel, onClick: () => dialog.current?.close(), children: _jsx("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", className: "h-4 w-4", children: _jsx("path", { d: "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" }) }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-5.5 py-4", children: children }), footer && (_jsx("footer", { className: "flex shrink-0 justify-end gap-2 border-t border-slate-200 px-5.5 py-3.5", children: footer }))] }));
+}

package/dist/FileDrop.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+/**
+ * A dashed drop zone around a file input. The input covers the whole zone, invisible, so a click
+ * opens the file dialog and a file dragged onto it is taken by the browser as it is by any file
+ * input. `children` is the prompt; show the chosen file's name there from `onChange`. `className`
+ * goes on the label (which also shows the keyboard focus ring, the input being invisible), every other prop (`accept`, `multiple`, `name`, `disabled`, `onChange`) on the input.
+ */
+export declare function FileDrop({ children, className, ...rest }: {
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"input">, "type" | "children" | "size" | "width">): ReactElement;

package/dist/FileDrop.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from "./cx.js";
+/**
+ * A dashed drop zone around a file input. The input covers the whole zone, invisible, so a click
+ * opens the file dialog and a file dragged onto it is taken by the browser as it is by any file
+ * input. `children` is the prompt; show the chosen file's name there from `onChange`. `className`
+ * goes on the label (which also shows the keyboard focus ring, the input being invisible), every other prop (`accept`, `multiple`, `name`, `disabled`, `onChange`) on the input.
+ */
+export function FileDrop({ children, className, ...rest }) {
+    return (_jsxs("label", { className: cx("relative flex items-center justify-center rounded-lg border border-dashed border-slate-300 px-4 py-6 text-center text-sm text-slate-500 transition hover:border-violet-400 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-violet-600", rest.disabled && "opacity-50", className), children: [_jsx("input", { type: "file", className: "absolute inset-0 h-full w-full cursor-pointer rounded-lg opacity-0 disabled:cursor-not-allowed", ...rest }), children] }));
+}

package/dist/InlineLinks.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement, type ReactNode } from "react";
+export type InlineLinksSeparator = "·" | "•" | "none";
+/**
+ * A wrapping row of links, small text, joined by a separator. The separator is `aria-hidden` and
+ * leads each link but the first, held to its link so a wrap never leaves one at a line's end.
+ */
+export declare function InlineLinks({ separator, className, children, }: {
+    separator?: InlineLinksSeparator;
+    className?: string;
+    children: ReactNode;
+}): ReactElement;

package/dist/InlineLinks.js

@@ -0,0 +1,11 @@
+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 links, small text, joined by a separator. The separator is `aria-hidden` and
+ * leads each link but the first, held to its link so a wrap never leaves one at a line's end.
+ */
+export function InlineLinks({ separator = "·", className, children, }) {
+    return (_jsx("div", { className: cx("flex flex-wrap items-center gap-x-3 gap-y-1 text-sm", className), children: Children.toArray(children).map((child, index) => (_jsxs("span", { className: "inline-flex items-center gap-x-3 whitespace-nowrap", children: [index > 0 && separator !== "none" && _jsx(Caption, { "aria-hidden": "true", children: separator }), child] }, index))) }));
+}

package/dist/Input.d.ts

@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { type ControlProps } from "./control.js";
 /** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
-export declare function Input({ icon, className, ...rest }: {
+export declare function Input({ icon, size, width, className, ...rest }: {
     icon?: ReactNode;
-} & ComponentPropsWithoutRef<"input">): ReactElement;
+} & ControlProps & Omit<ComponentPropsWithoutRef<"input">, "size" | "width">): ReactElement;

package/dist/Input.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { controlClass } from "./control.js";
+import { CONTROL_PAD, CONTROL_WIDTH, controlClass } from "./control.js";
 import { cx } from "./cx.js";
 /** A text input. `icon` puts a leading icon inside the field (e.g. a search glass). */
-export function Input({ icon, className, ...rest }) {
+export function Input({ icon, size = "md", width = "full", className, ...rest }) {
     if (icon === undefined) {
-        return _jsx("input", { ...rest, className: cx(controlClass, "px-3", className) });
+        return (_jsx("input", { ...rest, className: cx(controlClass(size, width), CONTROL_PAD[size].x, className) }));
     }
-    return (_jsxs("div", { className: "relative", children: [_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-slate-400 [&>svg]:h-4 [&>svg]:w-4", children: icon }), _jsx("input", { ...rest, className: cx(controlClass, "pr-3 pl-9", className) })] }));
+    const small = size === "sm";
+    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-slate-400", small ? "left-2 [&>svg]:h-3.5 [&>svg]:w-3.5" : "left-3 [&>svg]:h-4 [&>svg]:w-4"), children: icon }), _jsx("input", { ...rest, className: cx(controlClass(size, width === "auto" ? "auto" : "full"), CONTROL_PAD[size].icon, className) })] }));
 }

package/dist/KeyValueList.d.ts

@@ -1,10 +1,17 @@
-import type { HTMLAttributes, ReactElement, ReactNode } from "react";
-/** A definition list of label/value rows: each label on the left, its value right-aligned. */
-export declare function KeyValueList({ className, children, ...rest }: {
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+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, className, children, ...rest }: {
+    align?: KeyValueAlign;
     children: ReactNode;
 } & HTMLAttributes<HTMLDListElement>): ReactElement;
-/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+/** 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, className, ...rest }: {
     label: ReactNode;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>): ReactElement;
+export {};

package/dist/KeyValueList.js

@@ -1,10 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, } from "react";
 import { cx } from "./cx.js";
-/** A definition list of label/value rows: each label on the left, its value right-aligned. */
-export function KeyValueList({ className, children, ...rest }) {
-    return (_jsx("dl", { className: cx("flex flex-col gap-1.5 text-sm", className), ...rest, children: children }));
+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", className, children, ...rest }) {
+    return (_jsx("dl", { 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", className), ...rest, children: _jsx(AlignContext.Provider, { value: align, children: children }) }));
 }
-/** One row of a KeyValueList: a label on the left, a right-aligned tabular value on the right. */
+/** 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, className, ...rest }) {
-    return (_jsxs("div", { className: cx("flex justify-between gap-3", className), ...rest, children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: "text-right tabular-nums", children: children })] }));
+    const start = useContext(AlignContext) === "start";
+    return (_jsxs("div", { className: cx(start ? "col-span-2 grid grid-cols-subgrid" : "flex justify-between gap-3", className), ...rest, children: [_jsx("dt", { className: "text-slate-600", children: label }), _jsx("dd", { className: start ? "tabular-nums" : "text-right tabular-nums", children: children })] }));
 }

package/dist/ListRow.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import { type LinkRender } from "./link.js";
+type Shared = {
+    /** Content at the far end of the row: a value, a count, a Pill. */
+    trailing?: ReactNode | undefined;
+    children: ReactNode;
+};
+type ListRowButtonProps = Shared & {
+    /**
+     * 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;
+} & Omit<ComponentPropsWithoutRef<"button">, "children">;
+type ListRowLinkProps = Shared & {
+    /** Opens in a new tab: adds `target="_blank"` and `rel="noreferrer"`. */
+    external?: boolean | undefined;
+    expanded?: undefined;
+} & Omit<ComponentPropsWithoutRef<"a">, "href" | "children"> & ({
+    href: string;
+    render?: LinkRender | undefined;
+} | {
+    href?: string | undefined;
+    render: LinkRender;
+});
+export type ListRowProps = ListRowButtonProps | ListRowLinkProps;
+/**
+ * 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. With `expanded` it is the header of a
+ * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; lines between
+ * them are the caller's (`border-t border-slate-200/70` on each row after the first).
+ */
+export declare function ListRow(props: ListRowProps): ReactElement;
+export {};

package/dist/ListRow.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { renderLink } from "./link.js";
+const ROW = `flex w-full items-center gap-3 px-4 py-3 text-left text-sm text-slate-900 hover:bg-slate-50 disabled:pointer-events-none disabled:opacity-50 ${focusRing} focus-visible:-outline-offset-2`;
+function Chevron({ open }) {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 20 20", fill: "currentColor", className: cx("h-4 w-4 shrink-0 text-slate-400", open && "rotate-90"), children: _jsx("path", { fillRule: "evenodd", d: "M7.2 4.8a.75.75 0 0 1 1.06 0l4.7 4.67a.75.75 0 0 1 0 1.06l-4.7 4.67a.75.75 0 1 1-1.06-1.06L11.37 10 7.2 5.86a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) }));
+}
+/**
+ * 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. With `expanded` it is the header of a
+ * collapsible section: `aria-expanded` and a chevron. Rows sit in a `Card flush`; lines between
+ * them are the caller's (`border-t border-slate-200/70` on each row after the first).
+ */
+export function ListRow(props) {
+    const { trailing, children, className } = props;
+    const label = _jsx("span", { className: "min-w-0 flex-1", children: children });
+    const end = trailing != null && (_jsx("span", { className: "shrink-0 tabular-nums text-slate-500", children: trailing }));
+    if (props.href !== undefined || props.render !== undefined) {
+        const { trailing: _t, expanded: _e, href, render, external, className: _c, ...rest } = props;
+        return renderLink({
+            ...rest,
+            href,
+            render,
+            external,
+            className: cx(ROW, className),
+            children: (_jsxs(_Fragment, { children: [label, end] })),
+        });
+    }
+    const { trailing: _t, expanded, href: _h, render: _r, className: _c, ...rest } = props;
+    return (_jsxs("button", { type: "button", ...rest, ...(expanded === undefined ? {} : { "aria-expanded": expanded }), className: cx(ROW, className), children: [expanded !== undefined && _jsx(Chevron, { open: expanded }), label, end] }));
+}