@ratio-ui/core 0.1.1 → 0.3.0

package/dist/components/media-grid/MediaGrid.js

@@ -0,0 +1,303 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { formatCount } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { SortableContext, arrayMove, rectSortingStrategy, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
+import { Progress } from "@base-ui/react/progress";
+import { useDropzone } from "react-dropzone";
+// src/components/media-grid/MediaGrid.tsx
+const orderKey = (ids) => ids.join("\n");
+const IMAGES = { "image/*": [] };
+const INSTRUCTIONS = { draggable: "To move an image, press space or enter to pick it up, the arrow keys to move it, space or enter to drop it and escape to cancel. The Move left, Move right and Make cover buttons move it too" };
+function MediaTile({ item, index, last, disabled, onAction }) {
+	const { attributes, listeners, setNodeRef, isDragging } = useSortable({
+		id: item.id,
+		disabled
+	});
+	const id = useId();
+	const isCover = index === 0;
+	const uploading = item.progress !== void 0 && item.progress < 100 && !item.error;
+	const describedBy = [
+		attributes["aria-describedby"],
+		isCover ? `${id}-cover` : null,
+		item.error ? `${id}-error` : null
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "media-grid-item",
+		"data-media-id": item.id,
+		className: "rt:flex rt:w-24 rt:flex-col rt:gap-1",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:relative rt:size-24",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: setNodeRef,
+						...attributes,
+						...listeners,
+						"aria-describedby": describedBy,
+						"aria-invalid": item.error ? true : void 0,
+						"data-dragging": isDragging || void 0,
+						className: "rt:size-full rt:cursor-grab rt:overflow-hidden rt:rounded-lg rt:bg-muted rt:p-px rt:shadow-ring-subtle rt:forced-outline rt:select-none rt:transition-colors rt:focus-visible:focus-ring rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:aria-disabled:cursor-default rt:data-dragging:opacity-50",
+						children: /* @__PURE__ */ jsx("img", {
+							src: item.src,
+							alt: item.alt,
+							draggable: false,
+							className: "rt:size-full rt:rounded-md rt:object-cover"
+						})
+					}),
+					isCover ? /* @__PURE__ */ jsx("span", {
+						id: `${id}-cover`,
+						className: "rt:pointer-events-none rt:absolute rt:top-1 rt:left-1 rt:rounded-sm rt:bg-background rt:px-1.5 rt:text-c2 rt:text-foreground",
+						children: "Cover"
+					}) : null,
+					uploading ? /* @__PURE__ */ jsx(Progress.Root, {
+						value: item.progress ?? 0,
+						"aria-label": `Uploading ${item.alt}`,
+						className: "rt:pointer-events-none rt:absolute rt:inset-x-2 rt:bottom-2",
+						children: /* @__PURE__ */ jsx(Progress.Track, {
+							"data-slot": "media-grid-progress-track",
+							className: "rt:h-progress rt:overflow-hidden rt:bg-progress-track",
+							children: /* @__PURE__ */ jsx(Progress.Indicator, { className: "rt:h-full rt:bg-progress" })
+						})
+					}) : null
+				]
+			}),
+			item.error ? /* @__PURE__ */ jsxs("span", {
+				className: "rt:flex rt:items-start rt:gap-1 rt:text-error-icon",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "rt:mt-0.5 rt:flex",
+					children: /* @__PURE__ */ jsx(Icon, { name: "alert-triangle" })
+				}), /* @__PURE__ */ jsx("span", {
+					id: `${id}-error`,
+					className: "rt:text-c1 rt:text-error",
+					children: item.error
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": item.alt,
+				className: "rt:flex rt:flex-col rt:items-start",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "rt:flex rt:w-full rt:justify-between",
+					children: [
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Move left",
+							"data-media-action": "left",
+							disabled: disabled || isCover,
+							onClick: () => onAction("left", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Move right",
+							"data-media-action": "right",
+							disabled: disabled || last,
+							onClick: () => onAction("right", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right" })
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							iconOnly: true,
+							"aria-label": "Remove",
+							"data-media-action": "remove",
+							disabled,
+							onClick: () => onAction("remove", index),
+							children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+						})
+					]
+				}), isCover ? null : /* @__PURE__ */ jsx(Button, {
+					variant: "link",
+					"data-media-action": "cover",
+					disabled,
+					onClick: () => onAction("cover", index),
+					children: "Make cover"
+				})]
+			})
+		]
+	});
+}
+/**
+* The media of a product: a row of square thumbs with an add tile that opens the file picker and takes dropped files.
+* Thumbs reorder by drag (pointer, touch or keyboard) and by the Move left, Move right and Make cover buttons, so no
+* drag is needed. The first image is the cover and carries a badge. Uploads show a thin progress bar and failures an
+* error under the thumb. Every move, cover change and removal is announced to screen readers.
+*/
+function MediaGrid({ items, onAdd, onReorder, onRemove, onMakeCover, accept = IMAGES, disabled = false, addLabel = "Add media", "aria-label": ariaLabel, "aria-labelledby": labelledBy, ...rest }) {
+	const ids = items.map((i) => i.id);
+	const total = formatCount(items.length);
+	const [activeId, setActiveId] = useState(null);
+	const pendingRef = useRef(null);
+	const statusRef = useRef(null);
+	const { getRootProps, getInputProps, open, isDragActive, rootRef } = useDropzone({
+		accept,
+		disabled,
+		multiple: true,
+		noClick: true,
+		noKeyboard: true,
+		onDrop: (files) => {
+			if (files.length > 0) onAdd(files);
+		}
+	});
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 200,
+		tolerance: 6
+	} }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	useEffect(() => {
+		const want = pendingRef.current;
+		const root = rootRef.current;
+		if (!want || !root) return;
+		const now = orderKey(items.map((i) => i.id));
+		if (now === want.before) return;
+		pendingRef.current = null;
+		if (now !== want.expected) return;
+		if (statusRef.current) statusRef.current.textContent = want.message;
+		const focused = document.activeElement;
+		if (focused && focused !== document.body && !root.contains(focused)) return;
+		const tile = Array.from(root.querySelectorAll("[data-slot=\"media-grid-item\"]")).find((el) => el.dataset.mediaId === want.id);
+		for (const action of want.actions) {
+			const target = tile?.querySelector(`button[data-media-action="${action}"]`);
+			if (target && !target.disabled) {
+				target.focus();
+				return;
+			}
+		}
+		root.querySelector("button[data-media-action=\"add\"]")?.focus();
+	}, [items, rootRef]);
+	const altOf = (id) => items.find((i) => i.id === id)?.alt ?? "";
+	const positionOf = (id) => formatCount(ids.indexOf(String(id)) + 1);
+	const announcements = {
+		onDragStart: ({ active }) => `Picked up ${altOf(active.id)}, position ${positionOf(active.id)} of ${total}`,
+		onDragOver: ({ active, over }) => over ? `${altOf(active.id)} is over position ${positionOf(over.id)} of ${total}` : `${altOf(active.id)} is not over a position`,
+		onDragEnd: ({ active, over }) => over ? `${altOf(active.id)} dropped at position ${positionOf(over.id)} of ${total}` : `${altOf(active.id)} dropped`,
+		onDragCancel: ({ active }) => `Moving ${altOf(active.id)} cancelled`
+	};
+	const onAction = (action, index) => {
+		const item = items[index];
+		if (!item) return;
+		const before = orderKey(ids);
+		if (action === "remove") {
+			const next = ids.filter((id) => id !== item.id);
+			pendingRef.current = {
+				before,
+				expected: orderKey(next),
+				message: `${item.alt} removed`,
+				id: (items[index + 1] ?? items[index - 1])?.id ?? null,
+				actions: ["remove"]
+			};
+			onRemove(item.id);
+			return;
+		}
+		if (action === "cover") {
+			const next = arrayMove(ids, index, 0);
+			pendingRef.current = {
+				before,
+				expected: orderKey(next),
+				message: `${item.alt} is now the cover`,
+				id: item.id,
+				actions: ["right", "remove"]
+			};
+			onReorder(next);
+			onMakeCover?.(item.id);
+			return;
+		}
+		const to = action === "left" ? index - 1 : index + 1;
+		if (to < 0 || to >= items.length) return;
+		const next = arrayMove(ids, index, to);
+		pendingRef.current = {
+			before,
+			expected: orderKey(next),
+			message: `${item.alt} moved to position ${formatCount(to + 1)} of ${total}`,
+			id: item.id,
+			actions: action === "left" ? [
+				"left",
+				"right",
+				"remove"
+			] : [
+				"right",
+				"left",
+				"remove"
+			]
+		};
+		onReorder(next);
+	};
+	const onDragEnd = ({ active, over }) => {
+		setActiveId(null);
+		if (!over || active.id === over.id) return;
+		const from = ids.indexOf(String(active.id));
+		const to = ids.indexOf(String(over.id));
+		if (from < 0 || to < 0) return;
+		onReorder(arrayMove(ids, from, to));
+	};
+	const active = items.find((i) => i.id === activeId);
+	return /* @__PURE__ */ jsxs("div", {
+		...getRootProps({ role: "group" }),
+		...rest,
+		"aria-label": labelledBy ? ariaLabel : ariaLabel ?? "Media",
+		"aria-labelledby": labelledBy,
+		"data-slot": "media-grid",
+		className: "rt:flex rt:flex-col",
+		children: [
+			/* @__PURE__ */ jsx("input", { ...getInputProps() }),
+			/* @__PURE__ */ jsxs(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				accessibility: {
+					announcements,
+					screenReaderInstructions: INSTRUCTIONS
+				},
+				onDragStart: ({ active: dragged }) => setActiveId(String(dragged.id)),
+				onDragEnd,
+				onDragCancel: () => setActiveId(null),
+				children: [/* @__PURE__ */ jsx(SortableContext, {
+					items: ids,
+					strategy: rectSortingStrategy,
+					children: /* @__PURE__ */ jsxs("ul", {
+						className: "rt:flex rt:flex-wrap rt:gap-2",
+						children: [items.map((item, index) => /* @__PURE__ */ jsx(MediaTile, {
+							item,
+							index,
+							last: index === items.length - 1,
+							disabled,
+							onAction
+						}, item.id)), /* @__PURE__ */ jsx("li", {
+							className: "rt:flex",
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": addLabel,
+								"data-media-action": "add",
+								"data-drag-active": isDragActive || void 0,
+								disabled,
+								onClick: () => open(),
+								className: "rt:flex rt:size-24 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-lg rt:border rt:border-dashed rt:border-border-strong rt:bg-background rt:text-icon rt:transition-colors rt:hover:bg-muted rt:focus-visible:focus-ring rt:data-drag-active:border-primary rt:data-drag-active:bg-primary-tint rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50",
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "plus",
+									size: 16
+								})
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx(DragOverlay, {
+					dropAnimation: null,
+					children: active ? /* @__PURE__ */ jsx("img", {
+						src: active.src,
+						alt: "",
+						draggable: false,
+						className: "rt:size-24 rt:cursor-grabbing rt:rounded-lg rt:object-cover rt:shadow-ring-subtle"
+					}) : null
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: statusRef,
+				"data-slot": "media-grid-status",
+				role: "status",
+				className: "rt:sr-only"
+			})
+		]
+	});
+}
+export { MediaGrid };

package/dist/components/media-grid/index.d.ts

@@ -0,0 +1,2 @@
+import { MediaGrid, MediaGridItem, MediaGridProps } from "./MediaGrid.js";
+export { MediaGrid, type MediaGridItem, type MediaGridProps };

package/dist/components/media-grid/index.js

@@ -0,0 +1 @@
+export { MediaGrid } from "./MediaGrid.js";

package/dist/components/metric-strip/MetricStrip.d.ts

@@ -0,0 +1,23 @@
+import { JSX, ReactNode } from "react";
+/** One metric of the strip. */
+export type MetricSegment = {
+  /** A stable key. */
+  id: string;
+  /** The metric's name. */
+  title: string;
+  /** A sentence that explains the title; the title gets a dotted underline and opens it. */
+  definition?: ReactNode;
+  /** The value. A number is formatted by format; a string is shown as it is; null or undefined shows No data. */
+  value?: number | string | null;
+  /** How a number is written: money (rupees, Indian grouping) or count (123456). Defaults to count. */
+  format?: 'money' | 'count';
+};
+/** Props of MetricStrip. */
+export type MetricStripProps = {
+  /** The metrics, left to right. */
+  segments: MetricSegment[];
+  /** The accessible name of the strip. */
+  label?: string;
+};
+/** A row of metrics in one hairline container: each segment is a title, optionally with a definition, over its value. */
+export declare function MetricStrip({ segments, label }: MetricStripProps): JSX.Element;

package/dist/components/metric-strip/MetricStrip.js

@@ -0,0 +1,39 @@
+import { formatCount, formatMoney } from "../../lib/format.js";
+import { Definition } from "../definition/Definition.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/metric-strip/MetricStrip.tsx
+function show(segment) {
+	const { value, format = "count" } = segment;
+	if (value === null || value === void 0) return "No data";
+	if (typeof value === "string") return value;
+	return format === "money" ? formatMoney(value) : formatCount(value);
+}
+/** A row of metrics in one hairline container: each segment is a title, optionally with a definition, over its value. */
+function MetricStrip({ segments, label }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-label": label,
+		className: "rt:overflow-hidden rt:rounded-md rt:border rt:border-border rt:bg-background",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "rt:-mr-px rt:-mb-px rt:flex rt:flex-wrap",
+			children: segments.map((segment) => {
+				const empty = segment.value === null || segment.value === void 0;
+				return /* @__PURE__ */ jsxs("div", {
+					"data-segment": "",
+					className: "rt:flex rt:min-w-0 rt:flex-auto rt:flex-col rt:gap-1 rt:border-r rt:border-b rt:border-divider rt:p-6",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "rt:text-b1 rt:text-muted-foreground",
+						children: segment.definition !== void 0 ? /* @__PURE__ */ jsx(Definition, {
+							definition: segment.definition,
+							children: segment.title
+						}) : segment.title
+					}), /* @__PURE__ */ jsx("span", {
+						className: empty ? "rt:text-b2 rt:text-muted-foreground" : "rt:text-s1 rt:text-foreground-strong",
+						children: show(segment)
+					})]
+				}, segment.id);
+			})
+		})
+	});
+}
+export { MetricStrip };

package/dist/components/metric-strip/index.d.ts

@@ -0,0 +1,2 @@
+import { MetricSegment, MetricStrip, MetricStripProps } from "./MetricStrip.js";
+export { type MetricSegment, MetricStrip, type MetricStripProps };

package/dist/components/metric-strip/index.js

@@ -0,0 +1 @@
+export { MetricStrip } from "./MetricStrip.js";

package/dist/components/money-input/MoneyInput.d.ts

@@ -0,0 +1,30 @@
+import { InputGroupSize } from "../input-group/InputGroup.js";
+import "../input-group/index.js";
+import { InputHTMLAttributes, JSX, Ref } from "react";
+/**
+ * The props of MoneyInput: the HTML attributes of an input, except className, style, size and the ones the field sets
+ * itself (type, inputMode, step, onChange), with the amount in integer paise in and out. Mark an invalid field with
+ * aria-invalid, which draws the error ring around the whole group.
+ */
+export type MoneyInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'size' | 'type' | 'inputMode' | 'step' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
+  /** The amount in integer paise (12345650 is 1,23,456 rupees and 50 paise), or null for an empty field. Pass it to control the field. */
+  value?: number | null;
+  /** The starting amount in integer paise when the field is not controlled. Defaults to empty. */
+  defaultValue?: number | null;
+  /** Called with the amount in integer paise as it is typed, pasted or cleared (null when empty). */
+  onValueChange?: (paise: number | null) => void;
+  /** The smallest amount in integer paise; the field moves a smaller one up to it on blur. Leave it out to allow negatives. */
+  min?: number;
+  /** The largest amount in integer paise; the field moves a larger one down to it on blur. */
+  max?: number;
+  /** The height in px: 36 for forms, 32 for prices inside a table. Defaults to 36. */
+  size?: InputGroupSize;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A money field: the currency symbol before the amount, inside one ring. It takes and gives integer paise, shows the
+ * amount grouped as India groups it with two decimals (1,23,456.50) once the field loses focus, and reads a pasted
+ * amount written with the currency symbol or with either grouping. Under a name, a form submits paise.
+ */
+export declare function MoneyInput({ value, defaultValue, onValueChange, min, max, size, id, name, disabled, readOnly, required, onPaste, 'aria-describedby': describedBy, ref, ...rest }: MoneyInputProps): JSX.Element;

package/dist/components/money-input/MoneyInput.js

@@ -0,0 +1,72 @@
+import { FORMAT, MONEY_NUMBER_FORMAT, amountToPaise, currencySymbol, formatPaiseForEditing, paiseToAmount, parseMoney } from "../../lib/format.js";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "../input-group/InputGroup.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { NumberField } from "@base-ui/react/number-field";
+// src/components/money-input/MoneyInput.tsx
+const amountOf = (paise) => paise === void 0 ? void 0 : paiseToAmount(paise);
+/**
+* Writes text into the input the way typing does (the value setter React tracks, then an input event), so NumberField
+* reads it with its own change handler and keeps its text and value in step.
+*/
+function typeInto(input, text) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, text);
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+* A money field: the currency symbol before the amount, inside one ring. It takes and gives integer paise, shows the
+* amount grouped as India groups it with two decimals (1,23,456.50) once the field loses focus, and reads a pasted
+* amount written with the currency symbol or with either grouping. Under a name, a form submits paise.
+*/
+function MoneyInput({ value, defaultValue = null, onValueChange, min, max, size = 36, id, name, disabled, readOnly, required, onPaste, "aria-describedby": describedBy, ref, ...rest }) {
+	const [ownPaise, setOwnPaise] = useState(defaultValue);
+	const paise = value === void 0 ? ownPaise : value;
+	const symbolId = useId();
+	const change = (amount) => {
+		const next = amount === null ? null : amountToPaise(amount);
+		if (value === void 0) setOwnPaise(next);
+		onValueChange?.(next);
+	};
+	const paste = (event) => {
+		onPaste?.(event);
+		const input = event.currentTarget;
+		if (event.defaultPrevented || input.readOnly) return;
+		event.preventDefault();
+		const { value: text, selectionStart, selectionEnd } = input;
+		const pasted = event.clipboardData.getData("text/plain");
+		const next = parseMoney(text.slice(0, selectionStart ?? text.length) + pasted + text.slice(selectionEnd ?? text.length));
+		if (next !== null) typeInto(input, formatPaiseForEditing(next));
+	};
+	return /* @__PURE__ */ jsxs(NumberField.Root, {
+		id,
+		value: paise === null ? null : paiseToAmount(paise),
+		onValueChange: change,
+		locale: FORMAT.locale,
+		format: MONEY_NUMBER_FORMAT,
+		min: amountOf(min),
+		max: amountOf(max),
+		disabled,
+		readOnly,
+		required,
+		children: [/* @__PURE__ */ jsxs(InputGroup, {
+			size,
+			"aria-disabled": disabled || void 0,
+			children: [/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, {
+				id: symbolId,
+				children: currencySymbol()
+			}) }), /* @__PURE__ */ jsx(NumberField.Input, {
+				render: /* @__PURE__ */ jsx(InputGroupInput, {}),
+				ref,
+				"aria-describedby": describedBy === void 0 ? symbolId : `${symbolId} ${describedBy}`,
+				onPaste: paste,
+				...rest
+			})]
+		}), name !== void 0 && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: paise ?? "",
+			disabled
+		})]
+	});
+}
+export { MoneyInput };

package/dist/components/money-input/index.d.ts

@@ -0,0 +1,2 @@
+import { MoneyInput, MoneyInputProps } from "./MoneyInput.js";
+export { MoneyInput, type MoneyInputProps };

package/dist/components/money-input/index.js

@@ -0,0 +1 @@
+export { MoneyInput } from "./MoneyInput.js";

package/dist/components/page-header/PageHeader.d.ts

@@ -0,0 +1,37 @@
+import { StatusPillTone } from "../status-pill/StatusPill.js";
+import "../status-pill/index.js";
+import { JSX, ReactNode } from "react";
+/** One entry of the overflow menu. */
+export type PageHeaderMenuItem = {
+  /** The text of the item. */
+  label: string;
+  /** Runs when the item is chosen. */
+  onSelect: () => void;
+  /** Draws the item in the danger colour, for an action that deletes. */
+  destructive?: boolean;
+};
+/** Props of PageHeader. */
+export type PageHeaderProps = {
+  /** The page title, shown as the level 1 heading. */
+  title: string;
+  /** An icon or logo shown before the title. */
+  icon?: ReactNode;
+  /** The state of the record, one word, beside the title. */
+  status?: {
+    label: string;
+    tone?: StatusPillTone;
+  };
+  /** Where the back link goes. The link shows only with this. On a router, LinkProvider draws it with the app's own link. */
+  backHref?: string;
+  /** The text of the back link, such as the parent page's name. Defaults to Back. */
+  backLabel?: string;
+  /** Buttons on the right, such as Export and Add product. */
+  actions?: ReactNode;
+  /** Entries of the overflow menu. The More actions button shows only when there is at least one. */
+  menuItems?: PageHeaderMenuItem[];
+};
+/**
+ * The top of a page: an optional back link, then an icon, the title and a status pill on the left, and the actions with
+ * an overflow menu on the right. It wraps on a phone.
+ */
+export declare function PageHeader({ title, icon, status, backHref, backLabel, actions, menuItems }: PageHeaderProps): JSX.Element;

package/dist/components/page-header/PageHeader.js

@@ -0,0 +1,62 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { RatioLink } from "../link-provider/RatioLink.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
+import { StatusPill } from "../status-pill/StatusPill.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/page-header/PageHeader.tsx
+/**
+* The top of a page: an optional back link, then an icon, the title and a status pill on the left, and the actions with
+* an overflow menu on the right. It wraps on a phone.
+*/
+function PageHeader({ title, icon, status, backHref, backLabel = "Back", actions, menuItems }) {
+	const hasMenu = menuItems !== void 0 && menuItems.length > 0;
+	return /* @__PURE__ */ jsxs("header", {
+		className: "rt:flex rt:flex-col rt:gap-2",
+		children: [backHref !== void 0 && /* @__PURE__ */ jsxs(RatioLink, {
+			href: backHref,
+			className: "rt:inline-flex rt:w-fit rt:items-center rt:gap-1 rt:rounded-sm rt:text-b1 rt:text-muted-foreground rt:transition-colors rt:hover:text-foreground rt:focus-visible:focus-ring",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "chevron-left",
+				size: 8
+			}), backLabel]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:flex-wrap rt:items-center rt:justify-between rt:gap-x-3 rt:gap-y-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:items-center rt:gap-3",
+				children: [
+					icon !== void 0 && /* @__PURE__ */ jsx("span", {
+						className: "rt:flex rt:shrink-0 rt:items-center",
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						className: "rt:m-0 rt:min-w-0 rt:truncate rt:text-h5 rt:text-foreground-strong",
+						children: title
+					}),
+					status !== void 0 && /* @__PURE__ */ jsx(StatusPill, {
+						tone: status.tone,
+						children: status.label
+					})
+				]
+			}), (actions !== void 0 || hasMenu) && /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:flex-wrap rt:items-center rt:gap-2",
+				children: [actions, hasMenu && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+					children: ["More actions", /* @__PURE__ */ jsx(Icon, {
+						name: "nav-caret-down",
+						size: 8
+					})]
+				}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+					side: "bottom",
+					align: "end",
+					children: menuItems.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+						variant: item.destructive ? "destructive" : void 0,
+						onClick: item.onSelect,
+						children: item.label
+					}, item.label))
+				})] })]
+			})]
+		})]
+	});
+}
+export { PageHeader };

package/dist/components/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderMenuItem, PageHeaderProps } from "./PageHeader.js";
+export { PageHeader, type PageHeaderMenuItem, type PageHeaderProps };

package/dist/components/page-header/index.js

@@ -0,0 +1 @@
+export { PageHeader } from "./PageHeader.js";

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps, JSX } from "react";
+/** The props of Pagination: the attributes of a nav element, except className, style and children, and the page being shown. */
+export type PaginationProps = Omit<ComponentProps<'nav'>, 'className' | 'style' | 'children'> & {
+  /** The page being shown, counting from 1. */
+  page: number;
+  /** How many results one page holds. */
+  pageSize: number;
+  /** How many results there are in all, across every page. */
+  total: number;
+  /** Called with the page to show when Previous or Next is pressed. */
+  onPageChange: (page: number) => void;
+};
+/**
+ * The footer under a table: Previous and Next arrows and the range on show, written "1 – 20 of 84 results". An arrow is
+ * dimmed to 50% and disabled (aria-disabled, still focusable) when there is no page that way. The parent owns the page: it passes `page` and updates it in
+ * `onPageChange`.
+ */
+export declare function Pagination({ page, pageSize, total, onPageChange, 'aria-label': label, ...rest }: PaginationProps): JSX.Element;