@ratio-ui/core 0.3.0 → 0.5.0

package/dist/components/icon/glyphs.js

@@ -72,24 +72,35 @@ const NAV_CHEVRON = {
 	}]
 };
 /**
-* The right chevron. The design system draws its pagination chevrons as a 1.5px CSS caret in an 8px box and has no
-* vector for them (design question 9), so this is a stand-in, to be replaced when the designer sends real vectors. It
-* is the outline of a line 1.5 units wide with round ends: two legs at 45 degrees, each 2.5 units across and 2.5
-* down, from (2.75, 1.5) through (5.25, 4) to (2.75, 6.5) in an 8 unit box, which centres the caret in the box.
+* The right chevron. The design system draws its pagination chevrons as a CSS caret in an 8px box and has no vector for
+* them (design question 9): a 4.48px square with 1.5px top and right borders, rotated 45 degrees, square ends, about 8.5px
+* tall. This is that caret as a path. The borders are an L of 1.5 units round the square's 5.98 unit outside (the corners
+* (0,0), (5.98,0), (5.98,5.98), (4.48,5.98), (4.48,1.5), (0,1.5)), rotated 45 degrees about the square's centre, which
+* sits at (3.5, 4) in the 8 unit box: the design system's margin-left of -1 moves the centred caret half a unit left. The
+* caret reaches past the box (y from -0.23 to 8.23), as the CSS one does, so Icon lets a glyph overflow.
 */
 const CHEVRON_RIGHT = {
 	viewBox: "0 0 8 8",
 	paths: [{
-		d: "M3.2803 0.9697L5.7803 3.4697A0.75 0.75 0 0 1 5.7803 4.5303L3.2803 7.0303A0.75 0.75 0 0 1 2.2197 5.9697L4.1893 4L2.2197 2.0303A0.75 0.75 0 0 1 3.2803 0.9697Z",
+		d: "M3.5000 -0.2285L7.7285 4.0000L3.5000 8.2285L2.4393 7.1678L5.6072 4.0000L2.4393 0.8322Z",
 		fillRule: "nonzero"
 	}]
 };
-/** The left chevron: the right chevron mirrored in x = 4. */
+/** The left chevron: the right chevron mirrored in x = 4, as the design system's 225 degree rotation and margin-left of 1 do. */
 const CHEVRON_LEFT = {
 	viewBox: "0 0 8 8",
 	paths: [{
-		d: "M4.7197 0.9697L2.2197 3.4697A0.75 0.75 0 0 0 2.2197 4.5303L4.7197 7.0303A0.75 0.75 0 0 0 5.7803 5.9697L3.8107 4L5.7803 2.0303A0.75 0.75 0 0 0 4.7197 0.9697Z",
+		d: "M4.5000 -0.2285L0.2715 4.0000L4.5000 8.2285L5.5607 7.1678L2.3928 4.0000L5.5607 0.8322Z",
 		fillRule: "nonzero"
 	}]
 };
-export { CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH };
+/** The check mark of the design system's checkbox (Listing.jsx): the path M1 4.2 L3 6.2 L7 1.8 in an 8 unit box, a 1.4 line with round ends. */
+const CHECK_MARK = {
+	viewBox: "0 0 8 8",
+	paths: [{
+		d: "M1 4.2 L3 6.2 L7 1.8",
+		fillRule: "nonzero"
+	}],
+	stroke: 1.4
+};
+export { CHECK_MARK, CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH };

package/dist/components/icon/registry.d.ts

@@ -2,6 +2,7 @@ import "@tabler/icons-react";
 /**
  * The name of an icon. The design system's own glyphs come first (plus, search, export, the two pagination chevrons and
  * the five navigation glyphs); the rest are Tabler icons drawn with a 1.5px line: check, x, alert-triangle, info-circle,
- * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button) and calendar (the date pickers' open button).
+ * the dashboard's navigation glyphs (nav-orders to nav-settings), import, more and menu (the phone menu button), calendar (the date pickers' open button) and arrow-up and arrow-down (the table's sort direction; the
+ * design system has no sort glyph, so Tabler's, question 7). check-mark is the design system's own checkbox check, drawn as a line.
  */
-export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu' | 'calendar';
+export type IconName = 'plus' | 'search' | 'export' | 'chevron-left' | 'chevron-right' | 'nav-home' | 'nav-shortcut' | 'nav-product' | 'nav-product-2' | 'nav-chevron' | 'nav-caret-down' | 'check' | 'x' | 'alert-triangle' | 'info-circle' | 'nav-orders' | 'nav-customers' | 'nav-growth' | 'nav-discounts' | 'nav-content' | 'nav-markets' | 'nav-analytics' | 'nav-sales-channels' | 'nav-apps' | 'nav-settings' | 'import' | 'more' | 'menu' | 'calendar' | 'check-mark' | 'arrow-up' | 'arrow-down';

package/dist/components/icon/registry.js

@@ -1,5 +1,5 @@
-import { CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH } from "./glyphs.js";
-import { IconAlertTriangle, IconApps, IconBuildingStore, IconCalendar, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
+import { CHECK_MARK, CHEVRON_LEFT, CHEVRON_RIGHT, EXPORT, NAV_CHEVRON, NAV_HOME, NAV_PRODUCT, NAV_PRODUCT_2, NAV_SHORTCUT, PLUS, SEARCH } from "./glyphs.js";
+import { IconAlertTriangle, IconApps, IconArrowDown, IconArrowUp, IconBuildingStore, IconCalendar, IconChartBar, IconCheck, IconDiscount2, IconDots, IconFileImport, IconFileText, IconInfoCircle, IconMenu2, IconReceipt, IconSettings, IconTrendingUp, IconUsers, IconWorld, IconX } from "@tabler/icons-react";
 // src/components/icon/registry.ts
 /**
 * Every icon by name. nav-chevron and nav-caret-down are one glyph under two names, as in the design system, whose
@@ -121,6 +121,18 @@ const ICONS = {
 	calendar: {
 		kind: "tabler",
 		component: IconCalendar
+	},
+	"check-mark": {
+		kind: "glyph",
+		glyph: CHECK_MARK
+	},
+	"arrow-up": {
+		kind: "tabler",
+		component: IconArrowUp
+	},
+	"arrow-down": {
+		kind: "tabler",
+		component: IconArrowDown
 	}
 };
 export { ICONS };

package/dist/components/input/Input.js

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input } from "@base-ui/react/input";
 // src/components/input/Input.tsx
-const inputVariants = cva("rt:w-full rt:min-w-0 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+const inputVariants = cva("rt:w-full rt:min-w-0 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:shadow-ring-subtle rt:outline-none rt:ring-fade rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
 	variants: { size: {
 		36: "rt:h-9 rt:px-3",
 		32: "rt:h-8 rt:px-2.75"

package/dist/components/input-group/InputGroup.d.ts

@@ -5,6 +5,8 @@ export type InputGroupSize = 36 | 32;
 export type InputGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> & {
   /** The height in px: 36 for forms and search, 32 for fields inside a table. Defaults to 36. */
   size?: InputGroupSize;
+  /** Draws the design system search bar's 8px side padding instead of 12px. SearchField sets it; forms leave it off. */
+  search?: boolean;
   /** Receives the group element. */
   ref?: Ref<HTMLDivElement>;
 };
@@ -12,7 +14,7 @@ export type InputGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' |
  * A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
  * and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
  */
-export declare function InputGroup({ size, ref, ...rest }: InputGroupProps): JSX.Element;
+export declare function InputGroup({ size, search, ref, ...rest }: InputGroupProps): JSX.Element;
 /** The side of the input an addon sits on: start is before it, end is after it. */
 export type InputGroupAddonAlign = 'start' | 'end';
 /** The props of InputGroupAddon: the HTML attributes of a div, except className and style, with its side. */

package/dist/components/input-group/InputGroup.js

@@ -4,23 +4,35 @@ import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { Input } from "@base-ui/react/input";
 // src/components/input-group/InputGroup.tsx
-const groupVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:gap-2 rt:rounded-lg rt:bg-background rt:shadow-ring-subtle rt:transition-colors rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50", {
-	variants: { size: {
-		36: "rt:h-9 rt:px-3",
-		32: "rt:h-8 rt:px-2.75"
-	} },
-	defaultVariants: { size: 36 }
+const groupVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:gap-2 rt:rounded-lg rt:bg-background rt:shadow-ring-subtle rt:ring-fade rt:forced-outline rt:focus-within:shadow-ring-focus rt:has-aria-invalid:shadow-ring-invalid rt:has-aria-invalid:focus-within:shadow-ring-invalid rt:has-disabled:opacity-50", {
+	variants: {
+		size: {
+			36: "rt:h-9 rt:px-3",
+			32: "rt:h-8 rt:px-2.75"
+		},
+		search: {
+			true: "rt:px-2",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: 36,
+		search: false
+	}
 });
 /**
 * A field with a prefix, suffix, icon or shortcut hint beside the input, inside one ring. Put an InputGroupInput in it
 * and an InputGroupAddon on either side, for example a rupee sign before a price or kg after a weight.
 */
-function InputGroup({ size = 36, ref, ...rest }) {
+function InputGroup({ size = 36, search = false, ref, ...rest }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
 		ref,
-		className: cn(groupVariants({ size })),
+		className: cn(groupVariants({
+			size,
+			search
+		})),
 		...rest
 	});
 }

package/dist/components/input-otp/InputOtp.d.ts

@@ -0,0 +1,43 @@
+import { JSX, Ref } from "react";
+/**
+ * The props of InputOtp. Mark a wrong code with aria-invalid, which draws the error ring on every slot. Inside a Field,
+ * spread the props of its function child: they reach the hidden input.
+ */
+export type InputOtpProps = {
+  /** The number of digits. Defaults to 6. */
+  length?: number;
+  /** The code typed so far, for a controlled field. */
+  value?: string;
+  /** The code typed so far, for an uncontrolled field. */
+  defaultValue?: string;
+  /** Called with the whole code on every change, including a paste. */
+  onValueChange?: (value: string) => void;
+  /** Called once with the code when every slot is filled. */
+  onComplete?: (value: string) => void;
+  /** Stops editing and halves the opacity. */
+  disabled?: boolean;
+  /** Draws the error ring on every slot. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** The accessible name, for example "6-digit code". */
+  'aria-label'?: string;
+  /** The id of an element that names the field. */
+  'aria-labelledby'?: string;
+  /** The ids of the elements that describe the field, such as its hint or error. Field sets it. */
+  'aria-describedby'?: string;
+  /** Tells assistive technology that the code must be filled. Field sets it for a required field. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** The id of the hidden input, for a label's htmlFor. Field sets it. */
+  id?: string;
+  /** The form field name. */
+  name?: string;
+  /** Focuses the field on mount. */
+  autoFocus?: boolean;
+  /** Receives the hidden input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A one-time-code field: six 44px digit slots (set `length` for another count) over one hidden input, so the browser
+ * offers the SMS code (autocomplete one-time-code), a pasted code fills every slot, and the numeric keypad opens on phones.
+ * Digits only.
+ */
+export declare function InputOtp({ length, ref, disabled, onValueChange, ...rest }: InputOtpProps): JSX.Element;

package/dist/components/input-otp/InputOtp.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_DIGITS } from "input-otp";
+// src/components/input-otp/InputOtp.tsx
+const slotClass = "rt:relative rt:flex rt:size-11 rt:items-center rt:justify-center rt:rounded-lg rt:bg-background rt:text-b4 rt:text-foreground rt:shadow-ring-subtle rt:ring-fade rt:forced-outline rt:data-active:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:data-active:shadow-ring-invalid";
+function Slot({ index, invalid }) {
+	const { char, hasFakeCaret, isActive } = use(OTPInputContext).slots[index] ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "input-otp-slot",
+		"data-active": isActive ? "" : void 0,
+		"aria-invalid": invalid || void 0,
+		className: slotClass,
+		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
+			className: "rt:pointer-events-none rt:absolute rt:inset-0 rt:flex rt:items-center rt:justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "rt:h-5 rt:w-px rt:bg-foreground" })
+		}) : null]
+	});
+}
+/**
+* A one-time-code field: six 44px digit slots (set `length` for another count) over one hidden input, so the browser
+* offers the SMS code (autocomplete one-time-code), a pasted code fills every slot, and the numeric keypad opens on phones.
+* Digits only.
+*/
+function InputOtp({ length = 6, ref, disabled, onValueChange, ...rest }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"data-slot": "input-otp",
+		ref,
+		maxLength: length,
+		pattern: REGEXP_ONLY_DIGITS,
+		pasteTransformer: (pasted) => pasted.replace(/\D/g, ""),
+		inputMode: "numeric",
+		autoComplete: "one-time-code",
+		spellCheck: false,
+		disabled,
+		onChange: onValueChange,
+		containerClassName: "rt:flex rt:items-center rt:gap-2 rt:has-disabled:opacity-50",
+		className: "rt:disabled:cursor-not-allowed",
+		...rest,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(Slot, {
+			index,
+			invalid: rest["aria-invalid"] === true || rest["aria-invalid"] === "true"
+		}, index))
+	});
+}
+export { InputOtp };

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

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

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

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

package/dist/components/key-value-list/KeyValueList.d.ts

@@ -0,0 +1,25 @@
+import { JSX, ReactNode } from "react";
+/** One row of a KeyValueList. */
+export type KeyValueItem = {
+  /** The label, shown on the left. It is the row key, so keep labels unique. */
+  label: string;
+  /** The value, shown on the right, already formatted (money and dates come from the format module). Empty shows the placeholder. */
+  value?: ReactNode;
+  /** An optional action, such as Edit, shown after the value. Its button is named with the action label and the row label. */
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+};
+/** The props of KeyValueList. */
+export type KeyValueListProps = {
+  /** The rows, in order. */
+  items: KeyValueItem[];
+  /** What an empty value shows. Defaults to "Not set". */
+  emptyValue?: string;
+};
+/**
+ * Settings rows in a hairline bordered panel: the label on the left, the value on the right and an optional action. It is
+ * a description list, so a screen reader announces each label with its value.
+ */
+export declare function KeyValueList({ items, emptyValue }: KeyValueListProps): JSX.Element;

package/dist/components/key-value-list/KeyValueList.js

@@ -0,0 +1,40 @@
+import { Text } from "../text/Text.js";
+import { Button } from "../button/Button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/key-value-list/KeyValueList.tsx
+/**
+* Settings rows in a hairline bordered panel: the label on the left, the value on the right and an optional action. It is
+* a description list, so a screen reader announces each label with its value.
+*/
+function KeyValueList({ items, emptyValue = "Not set" }) {
+	return /* @__PURE__ */ jsx("dl", {
+		className: "rt:m-0 rt:overflow-hidden rt:rounded-lg rt:border rt:border-border rt:bg-background",
+		children: items.map((item) => {
+			const empty = item.value === void 0 || item.value === null || item.value === "";
+			return /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-h-11 rt:items-center rt:justify-between rt:gap-3 rt:border-border rt:px-3 rt:py-2 rt:not-first:border-t",
+				children: [/* @__PURE__ */ jsx(Text, {
+					as: "dt",
+					variant: "b3",
+					tone: "subdued",
+					children: item.label
+				}), /* @__PURE__ */ jsxs("dd", {
+					className: "rt:m-0 rt:flex rt:min-w-0 rt:items-center rt:justify-end rt:gap-3 rt:text-right",
+					children: [/* @__PURE__ */ jsx(Text, {
+						variant: "b3",
+						tone: empty ? "muted" : "default",
+						children: empty ? emptyValue : item.value
+					}), item.action && /* @__PURE__ */ jsxs(Button, {
+						variant: "link",
+						onClick: item.action.onClick,
+						children: [item.action.label, /* @__PURE__ */ jsxs("span", {
+							className: "rt:sr-only",
+							children: [" ", item.label]
+						})]
+					})]
+				})]
+			}, item.label);
+		})
+	});
+}
+export { KeyValueList };

package/dist/components/key-value-list/index.d.ts

@@ -0,0 +1,2 @@
+import { KeyValueItem, KeyValueList, KeyValueListProps } from "./KeyValueList.js";
+export { type KeyValueItem, KeyValueList, type KeyValueListProps };

package/dist/components/key-value-list/index.js

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

package/dist/components/link/Link.js

@@ -2,7 +2,7 @@ import { cn } from "../../lib/cn.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/link/Link.tsx
-const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:underline rt:focus-visible:focus-ring rt:forced-outline";
+const LINK = "rt:inline-flex rt:items-center rt:gap-1 rt:rounded-sm rt:text-primary rt:transition-colors rt:hover:text-primary-hover rt:hover:underline rt:focus-visible:focus-ring";
 /**
 * A text link to another page, such as "← Products" or "View all variants →". It is drawn by the app's LinkProvider, so a
 * router navigates without a reload; without one it is a plain <a href>. The arrows are decoration and are hidden from

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

@@ -13,7 +13,7 @@ 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",
+		className: "rt:overflow-hidden rt:rounded-lg 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) => {

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

@@ -1,7 +1,7 @@
 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 { 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/pagination/Pagination.js

@@ -51,7 +51,7 @@ function Pagination({ page, pageSize, total, onPageChange, "aria-label": label =
 			})]
 		}), /* @__PURE__ */ jsx("p", {
 			role: "status",
-			className: "rt:min-w-26 rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-foreground-subdued",
+			className: "rt:min-w-26.5 rt:px-2 rt:text-c1 rt:whitespace-nowrap rt:text-foreground-subdued",
 			children: summary
 		})]
 	});

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/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,12 @@
+import { JSX, ReactNode, Ref } from "react";
+/** The props of ScrollArea. */
+export type ScrollAreaProps = {
+  /** The scrolling content. */
+  children: ReactNode;
+  /** Which scrollbars to offer. Defaults to vertical. */
+  orientation?: 'vertical' | 'horizontal' | 'both';
+  /** Receives the rendered element. */
+  ref?: Ref<HTMLDivElement>;
+};
+/** A scrolling region that fills its parent, which sets the height or width, with a thin scrollbar in the design system greys. */
+export declare function ScrollArea({ children, orientation, ref }: ScrollAreaProps): JSX.Element;

package/dist/components/scroll-area/ScrollArea.js

@@ -0,0 +1,34 @@
+import { cn } from "../../lib/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+// src/components/scroll-area/ScrollArea.tsx
+function Bar({ orientation }) {
+	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+		"data-slot": "scroll-area-scrollbar",
+		orientation,
+		className: cn("rt:flex rt:touch-none rt:p-px rt:select-none rt:data-horizontal:h-1.5 rt:data-horizontal:flex-col rt:data-vertical:h-full rt:data-vertical:w-1.5"),
+		children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {
+			"data-slot": "scroll-area-thumb",
+			className: "rt:relative rt:flex-1 rt:rounded-sm rt:bg-border-strong rt:transition-colors rt:hover:bg-foreground-subdued"
+		})
+	});
+}
+/** A scrolling region that fills its parent, which sets the height or width, with a thin scrollbar in the design system greys. */
+function ScrollArea$1({ children, orientation = "vertical", ref }) {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
+		ref,
+		"data-slot": "scroll-area",
+		className: "rt:relative rt:size-full",
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				"data-slot": "scroll-area-viewport",
+				className: "rt:size-full rt:outline-none rt:focus-visible:focus-ring",
+				children
+			}),
+			orientation !== "horizontal" && /* @__PURE__ */ jsx(Bar, { orientation: "vertical" }),
+			orientation !== "vertical" && /* @__PURE__ */ jsx(Bar, { orientation: "horizontal" }),
+			/* @__PURE__ */ jsx(ScrollArea.Corner, {})
+		]
+	});
+}
+export { ScrollArea$1 as ScrollArea };

package/dist/components/scroll-area/index.d.ts

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

package/dist/components/scroll-area/index.js

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

package/dist/components/search-field/SearchField.js

@@ -28,10 +28,14 @@ function SearchField({ label, value, defaultValue = "", onValueChange, size = 36
 	};
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		size,
+		search: true,
 		children: [
-			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(Icon, {
-				name: "search",
-				tone: "icon"
+			/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx("span", {
+				className: "rt:flex rt:w-6 rt:items-center rt:pl-2",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "search",
+					tone: "icon"
+				})
 			}) }),
 			/* @__PURE__ */ jsx(InputGroupInput, {
 				...rest,
@@ -56,7 +60,7 @@ function SearchField({ label, value, defaultValue = "", onValueChange, size = 36
 					type: "button",
 					"aria-label": "Clear search",
 					onClick: clear,
-					className: "rt:inline-flex rt:size-5 rt:items-center rt:justify-center rt:rounded-sm rt:text-icon rt:outline-none rt:transition-colors rt:hover:bg-muted rt:focus-visible:shadow-ring-focus",
+					className: "rt:inline-flex rt:size-5 rt:items-center rt:justify-center rt:rounded-sm rt:text-icon rt:outline-none rt:transition-colors rt:hover:bg-muted rt:focus-visible:focus-ring",
 					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
 				})
 			}) : null

package/dist/components/select/Select.js

@@ -8,7 +8,7 @@ import { Select } from "@base-ui/react/select";
 function Select$1(props) {
 	return /* @__PURE__ */ jsx(Select.Root, { ...props });
 }
-const triggerVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:whitespace-nowrap rt:shadow-ring-subtle rt:outline-none rt:select-none rt:transition-colors rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:data-placeholder:text-muted-foreground rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+const triggerVariants = cva("rt:flex rt:w-full rt:min-w-0 rt:items-center rt:justify-between rt:gap-2 rt:rounded-lg rt:bg-background rt:text-b3 rt:text-foreground rt:whitespace-nowrap rt:shadow-ring-subtle rt:outline-none rt:select-none rt:ring-fade rt:forced-outline rt:focus-visible:shadow-ring-focus rt:aria-invalid:shadow-ring-invalid rt:aria-invalid:focus-visible:shadow-ring-invalid rt:data-placeholder:text-muted-foreground rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
 	variants: { size: {
 		36: "rt:h-9 rt:pr-8 rt:pl-3",
 		32: "rt:h-8 rt:pr-8 rt:pl-2.75"