@hackcove/ui 0.2.4 → 0.2.6

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/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/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/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] }));
+}

package/dist/NavTabs.d.ts

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

package/dist/NavTabs.js

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

package/dist/PageFade.d.ts

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

package/dist/PageFade.js

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

package/dist/ProgressBar.d.ts

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

package/dist/ProgressBar.js

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

package/dist/SegmentedControl.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { type SwitchItem, type SwitchProps } from "./switcher.js";
+/** One option of a SegmentedControl. See `SwitchItem`. */
+export type Segment = SwitchItem;
+/**
+ * A joined pill group where one option is filled: a mode or a range chosen in place. `items` are
+ * `{ value, label }` buttons (`value` and `onChange` are the caller's state; the arrow keys, Home
+ * and End move the choice) or links (`href`, or `render` to draw the app's own router `<Link>`;
+ * `value` marks the current one, which gets `aria-current`). `label` names the group.
+ */
+export declare function SegmentedControl(props: SwitchProps): ReactElement;

package/dist/SegmentedControl.js

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

package/dist/Select.d.ts

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