@ratio-ui/core 0.2.0 → 0.4.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/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.js

@@ -1,7 +1,7 @@
-import { Button } from "../button/Button.js";
 import { Icon } from "../icon/Icon.js";
-import { RatioLink } from "../link-provider/RatioLink.js";
+import { Button } from "../button/Button.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu/DropdownMenu.js";
+import { Link } from "../link/Link.js";
 import { StatusPill } from "../status-pill/StatusPill.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/page-header/PageHeader.tsx
@@ -13,13 +13,13 @@ function PageHeader({ title, icon, status, backHref, backLabel = "Back", actions
 	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]
+		children: [backHref !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: "rt:flex rt:text-b1",
+			children: /* @__PURE__ */ jsx(Link, {
+				href: backHref,
+				back: true,
+				children: 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", {

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from "react";
+/**
+ * The props of Progress: a value, or none for indeterminate, with an optional visible label and value.
+ * Without a visible label, pass aria-label so the bar has a name.
+ */
+export type ProgressProps = {
+  /** The current value; leave it out or pass null for an indeterminate bar. */
+  value?: number | null;
+  /** The value at which the bar is full. Defaults to 100; for steps, the number of steps. */
+  max?: number;
+  /** A visible label, which also names the bar for screen readers. */
+  label?: string;
+  /** Shows the value on the right: a percent, or "value/max" with steps. */
+  showValue?: boolean;
+  /** The step variant: counts completed steps out of max, such as 0/5 for the setup guide. Implies showValue. */
+  steps?: boolean;
+  /** The accessible name when there is no visible label. */
+  'aria-label'?: string;
+};
+/**
+ * The thin progress bar of question 5, 2px high, for page loads and refetches. Determinate with a value, indeterminate
+ * without one (a partial bar that moves only when the loading animation token names a motion, question 5). Base UI gives it the
+ * progressbar role, its label and its value text.
+ */
+export declare function Progress({ value, max, label, showValue, steps, ...rest }: ProgressProps): JSX.Element;

package/dist/components/progress/Progress.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+// src/components/progress/Progress.tsx
+/**
+* The thin progress bar of question 5, 2px high, for page loads and refetches. Determinate with a value, indeterminate
+* without one (a partial bar that moves only when the loading animation token names a motion, question 5). Base UI gives it the
+* progressbar role, its label and its value text.
+*/
+function Progress$1({ value = null, max = 100, label, showValue, steps, ...rest }) {
+	const withValue = showValue || steps;
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		"data-slot": "progress",
+		value,
+		max,
+		"aria-label": label ? void 0 : rest["aria-label"],
+		getAriaValueText: steps ? (_f, v) => v === null ? "In progress" : `${v} of ${max}` : void 0,
+		className: "rt:flex rt:flex-wrap rt:gap-2",
+		children: [
+			label ? /* @__PURE__ */ jsx(Progress.Label, {
+				className: "rt:text-b3 rt:text-foreground",
+				children: label
+			}) : null,
+			withValue ? /* @__PURE__ */ jsx(Progress.Value, {
+				className: "rt:ml-auto rt:text-b3 rt:text-muted-foreground rt:tabular-nums",
+				children: steps ? (_formatted, v) => v === null ? "" : `${v}/${max}` : void 0
+			}) : null,
+			/* @__PURE__ */ jsx(Progress.Track, {
+				"data-slot": "progress-track",
+				className: "rt:h-progress rt:w-full rt:overflow-hidden rt:bg-progress-track",
+				children: /* @__PURE__ */ jsx(Progress.Indicator, {
+					"data-slot": "progress-indicator",
+					className: "rt:h-full rt:bg-progress rt:data-indeterminate:w-1/3 rt:data-indeterminate:loading-motion"
+				})
+			})
+		]
+	});
+}
+export { Progress$1 as Progress };

package/dist/components/progress/index.d.ts

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

package/dist/components/progress/index.js

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

package/dist/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+/** The props of RadioGroup: Base UI's radio group props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type RadioGroupProps = Omit<RadioGroup.Props, 'className' | 'style' | 'render'>;
+/** The props of RadioGroupItem: Base UI's radio props, except className, style and render. Give it an aria-label or a label that points to it. */
+export type RadioGroupItemProps = Omit<Radio.Root.Props, 'className' | 'style' | 'render'>;
+/**
+ * A column of radio buttons where exactly one can be on. The arrow keys move the choice. aria-invalid on the group, as
+ * Field sets it, draws the error ring on every item.
+ */
+declare function RadioGroup$1({ ...props }: RadioGroupProps): JSX.Element;
+/**
+ * One choice in a RadioGroup: a 14px round control like the checkbox, drawn with a hairline ring and filled in the
+ * primary colour with a white dot when chosen. An invisible 24px area around it takes the tap.
+ */
+export declare function RadioGroupItem({ ...props }: RadioGroupItemProps): JSX.Element;
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio-group/RadioGroup.js

@@ -0,0 +1,32 @@
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/components/radio-group/RadioGroup.tsx
+/**
+* A column of radio buttons where exactly one can be on. The arrow keys move the choice. aria-invalid on the group, as
+* Field sets it, draws the error ring on every item.
+*/
+function RadioGroup$1({ ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		"data-slot": "radio-group",
+		className: "rt:group/radio-group rt:grid rt:w-full rt:gap-2",
+		...props
+	});
+}
+/**
+* One choice in a RadioGroup: a 14px round control like the checkbox, drawn with a hairline ring and filled in the
+* primary colour with a white dot when chosen. An invisible 24px area around it takes the tap.
+*/
+function RadioGroupItem({ ...props }) {
+	return /* @__PURE__ */ jsx(Radio.Root, {
+		"data-slot": "radio-group-item",
+		className: cn("rt:relative rt:flex rt:size-3.5 rt:shrink-0 rt:cursor-pointer rt:items-center rt:justify-center rt:rounded-3xl rt:bg-background rt:shadow-ring-hairline rt:transition-colors rt:outline-none", "rt:after:absolute rt:after:-inset-1.25", "rt:hover:bg-primary-tint rt:data-checked:bg-primary rt:data-checked:shadow-none rt:data-checked:hover:bg-primary-hover", "rt:focus-visible:focus-ring rt:forced-outline", "rt:aria-invalid:shadow-ring-invalid rt:group-aria-invalid/radio-group:shadow-ring-invalid", "rt:data-disabled:cursor-not-allowed rt:data-disabled:opacity-50"),
+		...props,
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
+			"data-slot": "radio-group-indicator",
+			className: "rt:block rt:size-1.5 rt:rounded-3xl rt:bg-primary-foreground"
+		})
+	});
+}
+export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./RadioGroup.js";
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps };

package/dist/components/radio-group/index.js

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

package/dist/components/save-bar/SaveBar.d.ts

@@ -0,0 +1,27 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+/** The props of SaveBar: the HTML attributes of its div, except className, style, children and onSave. */
+export type SaveBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & {
+  /** Whether the form has unsaved changes. The bar renders nothing when false. */
+  dirty: boolean;
+  /** True while the save is running: Save is disabled and reads the saving label. */
+  saving?: boolean;
+  /** Called by Save. */
+  onSave: () => void;
+  /** Called by Discard. The bar asks nothing itself: confirm in the caller if you need to. */
+  onDiscard: () => void;
+  /** The message. Defaults to "Unsaved changes". */
+  message?: ReactNode;
+  /** The Save label. Defaults to "Save". */
+  saveLabel?: ReactNode;
+  /** The Save label while saving. Defaults to "Saving…". */
+  savingLabel?: ReactNode;
+  /** The Discard label. Defaults to "Discard". */
+  discardLabel?: ReactNode;
+  /** Receives the rendered div. */
+  ref?: Ref<HTMLDivElement>;
+};
+/**
+ * The bar that appears under the top bar when a form is dirty: a message, Discard and Save. It renders in flow, so the
+ * page (AppShell) decides where it sits. While saving, Save is disabled; Discard only calls onDiscard.
+ */
+export declare function SaveBar({ dirty, saving, onSave, onDiscard, message, saveLabel, savingLabel, discardLabel, ref, ...rest }: SaveBarProps): JSX.Element | null;

package/dist/components/save-bar/SaveBar.js

@@ -0,0 +1,37 @@
+import { cn } from "../../lib/cn.js";
+import { Text } from "../text/Text.js";
+import { Button } from "../button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/save-bar/SaveBar.tsx
+/**
+* The bar that appears under the top bar when a form is dirty: a message, Discard and Save. It renders in flow, so the
+* page (AppShell) decides where it sits. While saving, Save is disabled; Discard only calls onDiscard.
+*/
+function SaveBar({ dirty, saving = false, onSave, onDiscard, message = "Unsaved changes", saveLabel = "Save", savingLabel = "Saving…", discardLabel = "Discard", ref, ...rest }) {
+	if (!dirty) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"data-slot": "save-bar",
+		...rest,
+		ref,
+		"aria-busy": saving || void 0,
+		className: cn("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-3 rt:border-b rt:border-border rt:bg-background rt:px-3 rt:py-2"),
+		children: [/* @__PURE__ */ jsx(Text, {
+			variant: "b4",
+			children: message
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "rt:flex rt:shrink-0 rt:items-center rt:gap-2",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: onDiscard,
+				children: discardLabel
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "main",
+				disabled: saving,
+				onClick: onSave,
+				children: saving ? savingLabel : saveLabel
+			})]
+		})]
+	});
+}
+export { SaveBar };

package/dist/components/save-bar/index.d.ts

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

package/dist/components/save-bar/index.js

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