@ratio-ui/core 0.3.0 → 0.5.0

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,52 @@
+import { JSX, Ref } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+/** One option: the value that is stored and the text people see. A plain string stands for both. */
+export type ComboboxItem = string | {
+  value: string;
+  label: string;
+};
+/** The props of Combobox: one choice from a list, with a search field. */
+export type ComboboxProps = {
+  /** The options. Strings or { value, label } objects. */
+  items: readonly ComboboxItem[];
+  /** The chosen value for a controlled combobox, or null for none. */
+  value?: string | null;
+  /** The value to start with when the combobox keeps its own state. */
+  defaultValue?: string | null;
+  /** Called with the new value, or null when the choice is cleared. */
+  onValueChange?: (value: string | null, eventDetails: Combobox.Root.ChangeEventDetails) => void;
+  /** The text shown while nothing is chosen. */
+  placeholder?: string;
+  /** The text shown when the search matches no option. Defaults to "No results found". */
+  emptyText?: string;
+  /** Marks the field invalid and draws the error ring, as on every form control. Field sets it when it shows an error. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** The same as aria-invalid, kept as its alias. */
+  invalid?: boolean;
+  /** Shows a button that clears the choice while one is made. Defaults to true. */
+  clearable?: boolean;
+  /** Stops people from changing the choice. */
+  disabled?: boolean;
+  /** The name of the field in a form. */
+  name?: string;
+  /** The accessible name when no label is wired to the field. */
+  'aria-label'?: string;
+  /** The ids of the elements that name the field. Field sets it to its label. */
+  '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 field must be filled. Field sets it for a required field. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** The id of the input, for a label's htmlFor. */
+  id?: string;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field to choose one option from a list, with a search: type to narrow the list, pick with the mouse or Enter.
+ * The field looks like an Input and the list like a Popover panel. For several choices shown as chips, use TagInput.
+ * Mark it invalid with aria-invalid; give the list an empty text with emptyText. Inside a Field, the label, hint, error
+ * and required mark reach the input.
+ */
+declare function Combobox$1({ items, value, defaultValue, onValueChange, placeholder, emptyText, 'aria-invalid': ariaInvalid, invalid, clearable, disabled, name, id, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired }: ComboboxProps): JSX.Element;
+export { Combobox$1 as Combobox };

package/dist/components/combobox/Combobox.js

@@ -0,0 +1,92 @@
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+// src/components/combobox/Combobox.tsx
+const toOption = (item) => typeof item === "string" ? {
+	value: item,
+	label: item
+} : item;
+const ROOT_CLASSES = {
+	field: "rt:flex rt:h-9 rt:w-full rt:min-w-0 rt:items-center rt:gap-0.5 rt:rounded-lg rt:bg-background rt:pr-1.5 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",
+	input: "rt:h-full rt:min-w-0 rt:flex-1 rt:bg-transparent rt:pl-3 rt:text-b3 rt:text-foreground rt:placeholder:text-muted-foreground rt:outline-none rt:disabled:cursor-not-allowed",
+	button: "rt:flex rt:size-6 rt:items-center rt:justify-center rt:rounded-md rt:text-muted-foreground rt:outline-none rt:hover:text-foreground rt:focus-visible:focus-ring rt:disabled:pointer-events-none",
+	popup: "rt:group/combobox-content rt:max-h-available rt:w-anchor rt:max-w-available rt:overflow-hidden rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:outline-hidden rt:transition-colors",
+	item: "rt:relative rt:flex rt:h-7 rt:w-full rt:cursor-default rt:items-center rt:gap-2 rt:pr-8 rt:pl-3 rt:text-b3 rt:text-foreground rt:outline-none rt:select-none rt:transition-colors rt:data-highlighted:bg-accent rt:data-highlighted:text-accent-foreground rt:data-disabled:pointer-events-none rt:data-disabled:opacity-50"
+};
+/**
+* A field to choose one option from a list, with a search: type to narrow the list, pick with the mouse or Enter.
+* The field looks like an Input and the list like a Popover panel. For several choices shown as chips, use TagInput.
+* Mark it invalid with aria-invalid; give the list an empty text with emptyText. Inside a Field, the label, hint, error
+* and required mark reach the input.
+*/
+function Combobox$1({ items, value, defaultValue, onValueChange, placeholder, emptyText = "No results found", "aria-invalid": ariaInvalid, invalid = false, clearable = true, disabled = false, name, id, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-required": ariaRequired }) {
+	const isInvalid = invalid || ariaInvalid === true || ariaInvalid === "true";
+	const options = items.map(toOption);
+	const key = JSON.stringify(options);
+	const labels = useMemo(() => new Map(JSON.parse(key).map((o) => [o.value, o.label])), [key]);
+	const root = {
+		items: useMemo(() => [...labels.keys()], [labels]),
+		disabled,
+		name,
+		itemToStringLabel: (v) => labels.get(v) ?? v,
+		onValueChange: (v, details) => onValueChange?.(v, details)
+	};
+	const controlled = value !== void 0 ? { value } : {};
+	const initial = defaultValue !== void 0 ? { defaultValue } : {};
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		...root,
+		...controlled,
+		...initial,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "combobox",
+			className: ROOT_CLASSES.field,
+			children: [/* @__PURE__ */ jsx(Combobox.Input, {
+				ref,
+				id,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-required": ariaRequired,
+				"aria-invalid": isInvalid || void 0,
+				placeholder,
+				className: ROOT_CLASSES.input
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-0.5",
+				children: [clearable ? /* @__PURE__ */ jsx(Combobox.Clear, {
+					"aria-label": "Clear",
+					className: ROOT_CLASSES.button,
+					children: /* @__PURE__ */ jsx(Icon, { name: "x" })
+				}) : null, /* @__PURE__ */ jsx(Combobox.Trigger, {
+					"aria-label": "Show options",
+					className: ROOT_CLASSES.button,
+					children: /* @__PURE__ */ jsx(Icon, { name: "nav-caret-down" })
+				})]
+			})]
+		}), /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			className: "rt:isolate rt:z-50",
+			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
+				"data-slot": "combobox-content",
+				className: ROOT_CLASSES.popup,
+				children: [/* @__PURE__ */ jsx(Combobox.Empty, {
+					className: "rt:hidden rt:justify-center rt:py-3 rt:text-center rt:text-muted-foreground rt:group-data-empty/combobox-content:flex",
+					children: emptyText
+				}), /* @__PURE__ */ jsx(Combobox.List, {
+					className: "rt:max-h-72 rt:overflow-y-auto rt:overscroll-contain rt:py-1.5 rt:data-empty:py-0",
+					children: (v) => /* @__PURE__ */ jsxs(Combobox.Item, {
+						value: v,
+						className: ROOT_CLASSES.item,
+						children: [labels.get(v), /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
+							className: "rt:pointer-events-none rt:absolute rt:right-3 rt:flex",
+							children: /* @__PURE__ */ jsx(Icon, { name: "check" })
+						})]
+					}, v)
+				})]
+			})
+		}) })]
+	});
+}
+export { Combobox$1 as Combobox };

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

@@ -0,0 +1,2 @@
+import { Combobox, ComboboxItem, ComboboxProps } from "./Combobox.js";
+export { Combobox, type ComboboxItem, type ComboboxProps };

package/dist/components/combobox/index.js

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

package/dist/components/data-table/DataTable.js

@@ -1,7 +1,8 @@
-import { Checkbox } from "../checkbox/Checkbox.js";
+import { Icon } from "../icon/Icon.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
 import { Pagination } from "../pagination/Pagination.js";
-import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
+import { SelectionCell, SelectionHead, Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useSyncExternalStore } from "react";
 import { FlexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
@@ -72,10 +73,10 @@ function DataTable({ columns: allColumns, data, getRowId, selectedIds, onSelecte
 	if (loading) return /* @__PURE__ */ jsx(Fragment, { children: loading });
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "data-table",
-		className: "rt:flex rt:w-full rt:flex-col rt:gap-2",
+		className: "rt:flex rt:w-full rt:flex-col",
 		children: [/* @__PURE__ */ jsx(TableBox, { children: /* @__PURE__ */ jsxs(Table, {
 			...rest,
-			children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [selectable ? /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+			children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [selectable ? /* @__PURE__ */ jsx(SelectionHead, { children: /* @__PURE__ */ jsx(Checkbox, {
 				"aria-label": "Select all rows",
 				checked: table.getIsAllRowsSelected() && rows.length > 0,
 				indeterminate: rows.some((r) => r.getIsSelected()) && !table.getIsAllRowsSelected(),
@@ -92,10 +93,7 @@ function DataTable({ columns: allColumns, data, getRowId, selectedIds, onSelecte
 						"aria-label": `Sort by ${c.header}`,
 						className: "rt:inline-flex rt:cursor-pointer rt:items-center rt:gap-1 rt:uppercase rt:focus-visible:focus-ring",
 						onClick: () => h.column.toggleSorting(),
-						children: [/* @__PURE__ */ jsx(FlexRender, { header: h }), /* @__PURE__ */ jsx("span", {
-							"aria-hidden": "true",
-							children: sorted === "asc" ? "↑" : sorted === "desc" ? "↓" : null
-						})]
+						children: [/* @__PURE__ */ jsx(FlexRender, { header: h }), sorted ? /* @__PURE__ */ jsx(Icon, { name: sorted === "asc" ? "arrow-up" : "arrow-down" }) : null]
 					}) : /* @__PURE__ */ jsx(FlexRender, { header: h })
 				}, h.id);
 			})] }) }), /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
@@ -103,7 +101,7 @@ function DataTable({ columns: allColumns, data, getRowId, selectedIds, onSelecte
 				children: empty
 			}) }) : rows.map((row, index) => /* @__PURE__ */ jsxs(TableRow, {
 				selected: row.getIsSelected(),
-				children: [selectable ? /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Checkbox, {
+				children: [selectable ? /* @__PURE__ */ jsx(SelectionCell, { children: /* @__PURE__ */ jsx(Checkbox, {
 					"aria-label": getRowLabel ? `Select ${getRowLabel(row.original)}` : `Select row ${index + 1}`,
 					checked: row.getIsSelected(),
 					onCheckedChange: () => row.toggleSelected()
@@ -126,15 +124,11 @@ function DataTable({ columns: allColumns, data, getRowId, selectedIds, onSelecte
 					}, cell.id);
 				})]
 			}, row.id)) })]
-		}) }), hasFooter ? /* @__PURE__ */ jsx("div", {
-			"data-slot": "data-table-pagination",
-			className: "rt:rounded-lg rt:border rt:border-border rt:bg-background rt:px-2",
-			children: /* @__PURE__ */ jsx(Pagination, {
-				page,
-				pageSize,
-				total,
-				onPageChange
-			})
+		}) }), hasFooter ? /* @__PURE__ */ jsx(Pagination, {
+			page,
+			pageSize,
+			total,
+			onPageChange
 		}) : null]
 	});
 }

package/dist/components/date-picker/DatePicker.d.ts

@@ -12,7 +12,7 @@ export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'class
   value?: Date | null;
   /** The starting day when the field is not controlled. Defaults to empty. */
   defaultValue?: Date | null;
-  /** Called with the day when a typed date is complete or a day is picked, and with null when the text is cleared. */
+  /** Called with the day when a typed date is complete or a day is picked, and with null when the text is cleared or is not a date. */
   onValueChange?: (value: Date | null) => void;
   /** The days that cannot be picked in the calendar, for example { before: new Date() }. */
   disabledDays?: CalendarProps['disabled'];
@@ -27,7 +27,8 @@ export type DatePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'class
 };
 /**
  * A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
- * from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+ * from the button at its end. Text that is not a date reports null (as soon as it is typed over a day, and when the field
+ * loses focus) and is marked invalid, aria-invalid, when the field loses focus; the app shows Field's error from the null.
  * Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
  */
 export declare function DatePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DatePickerProps): JSX.Element;

package/dist/components/date-picker/DatePicker.js

@@ -9,7 +9,8 @@ import { useState } from "react";
 // src/components/date-picker/DatePicker.tsx
 /**
 * A field that shows a day as DD/MM/YYYY, reads a typed date through the format module and opens a calendar in a popover
-* from the button at its end. Text that is not a date is marked invalid when the field loses focus, and reports nothing.
+* from the button at its end. Text that is not a date reports null (as soon as it is typed over a day, and when the field
+* loses focus) and is marked invalid, aria-invalid, when the field loses focus; the app shows Field's error from the null.
 * Under a name, a form submits the day as YYYY-MM-DD (empty when there is none), never the text on screen.
 */
 function DatePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = FORMAT.datePattern, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
@@ -49,13 +50,16 @@ function DatePicker({ value, defaultValue = null, onValueChange, disabledDays, s
 				if (next.trim() === "") return commit(null);
 				const parsed = parseDate(next);
 				if (parsed !== null) commit(parsed);
+				else if (day !== null) commit(null);
 			},
 			onBlur: (event) => {
 				onBlur?.(event);
 				const parsed = parseDate(text);
 				if (text.trim() === "") setMalformed(false);
-				else if (parsed === null) setMalformed(true);
-				else setText(formatDate(parsed));
+				else if (parsed === null) {
+					setMalformed(true);
+					commit(null);
+				} else setText(formatDate(parsed));
 			}
 		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
 			align: "end",

package/dist/components/date-range-picker/DateRangePicker.d.ts

@@ -17,7 +17,7 @@ export type DateRangePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
   value?: DateRangeValue | null;
   /** The starting range when the field is not controlled. Defaults to empty. */
   defaultValue?: DateRangeValue | null;
-  /** Called with the range when a typed range is complete or two days are picked, and with null when the text is cleared. */
+  /** Called with the range when a typed range is complete or two days are picked, and with null when the text is cleared or is not a range. */
   onValueChange?: (value: DateRangeValue | null) => void;
   /** The days that cannot be picked in the calendar, for example { after: new Date() } for an analytics period. */
   disabledDays?: CalendarProps['disabled'];
@@ -33,7 +33,8 @@ export type DateRangePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, '
 /**
  * A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
  * a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
- * in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+ * in order reports null (as soon as it is typed over a range, and when the field loses focus) and is marked invalid, aria-invalid,
+ * when the field loses focus. Under a name, a form submits two fields,
  * `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
  */
 export declare function DateRangePicker({ value, defaultValue, onValueChange, disabledDays, startMonth, endMonth, size, placeholder, readOnly, disabled, onBlur, ref, name, 'aria-invalid': ariaInvalid, ...rest }: DateRangePickerProps): JSX.Element;

package/dist/components/date-range-picker/DateRangePicker.js

@@ -25,7 +25,8 @@ function parseRange(text) {
 /**
 * A field that shows a range as two DD/MM/YYYY days, reads a typed range through the format module and opens a calendar in
 * a popover from the button at its end, for analytics periods. Pick the first day, then the last. Text that is not a range
-* in order is marked invalid when the field loses focus, and reports nothing. Under a name, a form submits two fields,
+* in order reports null (as soon as it is typed over a range, and when the field loses focus) and is marked invalid, aria-invalid,
+* when the field loses focus. Under a name, a form submits two fields,
 * `name.from` and `name.to`, each as YYYY-MM-DD (empty when there is no range), never the text on screen.
 */
 function DateRangePicker({ value, defaultValue = null, onValueChange, disabledDays, startMonth, endMonth, size = 36, placeholder = `${FORMAT.datePattern}${SEPARATOR}${FORMAT.datePattern}`, readOnly, disabled, onBlur, ref, name, "aria-invalid": ariaInvalid, ...rest }) {
@@ -66,13 +67,16 @@ function DateRangePicker({ value, defaultValue = null, onValueChange, disabledDa
 				if (next.trim() === "") return commit(null);
 				const parsed = parseRange(next);
 				if (parsed !== null) commit(parsed);
+				else if (range !== null) commit(null);
 			},
 			onBlur: (event) => {
 				onBlur?.(event);
 				const parsed = parseRange(text);
 				if (text.trim() === "") setMalformed(false);
-				else if (parsed === null) setMalformed(true);
-				else setText(write(parsed));
+				else if (parsed === null) {
+					setMalformed(true);
+					commit(null);
+				} else setText(write(parsed));
 			}
 		}), readOnly ? null : /* @__PURE__ */ jsx(InputGroupAddon, {
 			align: "end",

package/dist/components/definition/Definition.js

@@ -21,7 +21,7 @@ function Definition({ children, definition }) {
 		className: "rt:isolate rt:z-50",
 		children: /* @__PURE__ */ jsx(Popover.Popup, {
 			"aria-label": "Definition",
-			className: "rt:max-w-72 rt:rounded-md rt:border rt:border-border rt:bg-popover rt:px-3 rt:py-1.5 rt:text-b1 rt:text-popover-foreground rt:outline-hidden",
+			className: "rt:max-w-72 rt:rounded-lg rt:border rt:border-border rt:bg-popover rt:px-3 rt:py-1.5 rt:text-b1 rt:text-popover-foreground rt:outline-hidden",
 			children: definition
 		})
 	}) })] });

package/dist/components/dialog/Dialog.js

@@ -36,7 +36,7 @@ function DialogContent({ children, showCloseButton = true, closeLabel = "Close",
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "dialog-close",
 			"aria-label": closeLabel,
-			className: "rt:absolute rt:top-4 rt:right-4 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+			className: "rt:absolute rt:top-6 rt:right-6 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "x",
 				size: 12

package/dist/components/drawer/Drawer.d.ts

@@ -0,0 +1,52 @@
+import { ComponentProps, JSX } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+/** Props of Drawer. */
+export interface DrawerProps extends Drawer.Root.Props {
+  /** Whether a short bar shows on the edge the drawer is swiped from, as a hint on phones. Defaults to false. */
+  showSwipeHandle?: boolean;
+}
+/**
+ * The root of a drawer: a panel people swipe away on a phone. It holds the open state and renders nothing itself.
+ * `swipeDirection` picks the edge it leaves by (down, the default, makes a bottom drawer). Pass `open` and
+ * `onOpenChange` to control it, or `defaultOpen`. The page behind is inert while it is open, with no scrim over it.
+ */
+declare function Drawer$1({ modal, showSwipeHandle, swipeDirection, ...props }: DrawerProps): JSX.Element;
+/** Props of DrawerTrigger. */
+export type DrawerTriggerProps = Omit<Drawer.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the drawer. */
+export declare function DrawerTrigger(props: DrawerTriggerProps): JSX.Element;
+/** Props of DrawerClose. */
+export type DrawerCloseProps = Omit<Drawer.Close.Props, 'className' | 'style'>;
+/** A button that closes the drawer, such as Done in the footer. */
+export declare function DrawerClose(props: DrawerCloseProps): JSX.Element;
+/** Props of DrawerContent. */
+export interface DrawerContentProps extends Omit<Drawer.Popup.Props, 'className' | 'style'> {
+  /** Whether the corner close button shows. It is the way to close without swiping. Defaults to true. */
+  showCloseButton?: boolean;
+  /** The accessible name of the corner close button. Defaults to Close. */
+  closeLabel?: string;
+}
+/**
+ * The panel, white with a hairline and 24px corners on its inner edge. A bottom drawer spans the screen and sizes to its
+ * content; a side drawer is full height and three quarters of a phone screen, 384px from the small breakpoint up. It
+ * follows the finger while it is swiped and otherwise does not move: no slide in or out, no scrim, blur or shadow.
+ * Put DrawerHeader, the content and DrawerFooter inside.
+ */
+export declare function DrawerContent({ children, showCloseButton, closeLabel, ...props }: DrawerContentProps): JSX.Element;
+/** Props of DrawerHeader. */
+export type DrawerHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked, with room on the right for the close button. */
+export declare function DrawerHeader(props: DrawerHeaderProps): JSX.Element;
+/** Props of DrawerFooter. */
+export type DrawerFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The actions at the bottom of the drawer, stacked full width for a thumb. */
+export declare function DrawerFooter(props: DrawerFooterProps): JSX.Element;
+/** Props of DrawerTitle. */
+export type DrawerTitleProps = Omit<Drawer.Title.Props, 'className' | 'style'>;
+/** The drawer's name, in the b4 style. It names the drawer for assistive technology. */
+export declare function DrawerTitle(props: DrawerTitleProps): JSX.Element;
+/** Props of DrawerDescription. */
+export type DrawerDescriptionProps = Omit<Drawer.Description.Props, 'className' | 'style'>;
+/** One line that says what the drawer is for, in subdued body text. */
+export declare function DrawerDescription(props: DrawerDescriptionProps): JSX.Element;
+export { Drawer$1 as Drawer };

package/dist/components/drawer/Drawer.js

@@ -0,0 +1,120 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+// src/components/drawer/Drawer.tsx
+const DrawerContext = createContext({
+	modal: true,
+	showSwipeHandle: false
+});
+/**
+* The root of a drawer: a panel people swipe away on a phone. It holds the open state and renders nothing itself.
+* `swipeDirection` picks the edge it leaves by (down, the default, makes a bottom drawer). Pass `open` and
+* `onOpenChange` to control it, or `defaultOpen`. The page behind is inert while it is open, with no scrim over it.
+*/
+function Drawer$1({ modal = true, showSwipeHandle = false, swipeDirection = "down", ...props }) {
+	const value = useMemo(() => ({
+		modal,
+		showSwipeHandle
+	}), [modal, showSwipeHandle]);
+	return /* @__PURE__ */ jsx(DrawerContext, {
+		value,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			modal,
+			swipeDirection,
+			...props
+		})
+	});
+}
+/** The button that opens the drawer. */
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+/** A button that closes the drawer, such as Done in the footer. */
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+/**
+* The panel, white with a hairline and 24px corners on its inner edge. A bottom drawer spans the screen and sizes to its
+* content; a side drawer is full height and three quarters of a phone screen, 384px from the small breakpoint up. It
+* follows the finger while it is swiped and otherwise does not move: no slide in or out, no scrim, blur or shadow.
+* Put DrawerHeader, the content and DrawerFooter inside.
+*/
+function DrawerContent({ children, showCloseButton = true, closeLabel = "Close", ...props }) {
+	const { modal, showSwipeHandle } = use(DrawerContext);
+	return /* @__PURE__ */ jsx(Drawer.Portal, { children: /* @__PURE__ */ jsx(Drawer.Viewport, {
+		"data-slot": "drawer-viewport",
+		className: cn("rt:pointer-events-none rt:fixed rt:inset-0 rt:z-50", modal === true && "rt:pointer-events-auto"),
+		children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+			"data-slot": "drawer-popup",
+			className: cn("rt:group/drawer-popup rt:pointer-events-auto rt:fixed rt:z-50 rt:flex rt:max-h-full rt:min-h-0 rt:flex-col rt:border-border rt:bg-popover rt:text-b3 rt:text-popover-foreground rt:select-none rt:drawer-swipe rt:focus-visible:focus-ring", "rt:swipe-y:inset-x-0 rt:swipe-x:inset-y-0 rt:swipe-x:w-3/4 rt:swipe-x:flex-row rt:swipe-x:sm:w-96", "rt:swipe-down:bottom-0 rt:swipe-down:rounded-t-3xl rt:swipe-down:border-x rt:swipe-down:border-t", "rt:swipe-up:top-0 rt:swipe-up:rounded-b-3xl rt:swipe-up:border-x rt:swipe-up:border-b", "rt:swipe-left:left-0 rt:swipe-left:rounded-r-3xl rt:swipe-left:border-y rt:swipe-left:border-r", "rt:swipe-right:right-0 rt:swipe-right:rounded-l-3xl rt:swipe-right:border-y rt:swipe-right:border-l"),
+			...props,
+			children: [
+				showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}),
+				/* @__PURE__ */ jsx(Drawer.Content, {
+					"data-slot": "drawer-content",
+					className: "rt:flex rt:min-h-0 rt:flex-1 rt:flex-col rt:overflow-y-auto rt:overscroll-contain rt:select-text rt:group-data-swiping/drawer-popup:select-none",
+					children
+				}),
+				showCloseButton && /* @__PURE__ */ jsx(Drawer.Close, {
+					"data-slot": "drawer-close",
+					"aria-label": closeLabel,
+					className: "rt:absolute rt:top-6 rt:right-6 rt:flex rt:size-7 rt:items-center rt:justify-center rt:rounded-md rt:text-icon rt:transition-colors rt:hover:bg-primary-tint rt:focus-visible:focus-ring",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 12
+					})
+				})
+			]
+		})
+	}) });
+}
+/** A short bar on the edge the drawer is swiped from. It is decorative: the whole panel takes the swipe. */
+function DrawerSwipeHandle() {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: "rt:flex rt:shrink-0 rt:items-center rt:justify-center rt:cursor-grab rt:group-swipe-y/drawer-popup:h-5 rt:group-swipe-x/drawer-popup:w-5 rt:group-swipe-up/drawer-popup:order-last rt:group-swipe-left/drawer-popup:order-last rt:active:cursor-grabbing",
+		children: /* @__PURE__ */ jsx("span", { className: "rt:block rt:rounded-sm rt:bg-muted rt:group-swipe-y/drawer-popup:h-1 rt:group-swipe-y/drawer-popup:w-12 rt:group-swipe-x/drawer-popup:h-12 rt:group-swipe-x/drawer-popup:w-1" })
+	});
+}
+/** The title and description, stacked, with room on the right for the close button. */
+function DrawerHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: "rt:flex rt:shrink-0 rt:flex-col rt:gap-1 rt:p-6 rt:pr-20",
+		...props
+	});
+}
+/** The actions at the bottom of the drawer, stacked full width for a thumb. */
+function DrawerFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: "rt:mt-auto rt:flex rt:shrink-0 rt:flex-col rt:gap-2 rt:px-6 rt:pb-6",
+		...props
+	});
+}
+/** The drawer's name, in the b4 style. It names the drawer for assistive technology. */
+function DrawerTitle(props) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** One line that says what the drawer is for, in subdued body text. */
+function DrawerDescription(props) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,2 @@
+import { Drawer, DrawerClose, DrawerCloseProps, DrawerContent, DrawerContentProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps } from "./Drawer.js";
+export { Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps };

package/dist/components/drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./Drawer.js";

package/dist/components/field/Field.d.ts

@@ -14,22 +14,25 @@ export type FieldProps = {
   /** Dims the label and disables the control. */
   disabled?: boolean;
   /**
-   * The control: one element, such as Input, which gets an id, aria-describedby, aria-invalid, aria-required and disabled.
-   * When the control sits inside a wrapper such as InputGroup, pass a function instead and spread the props it receives
-   * onto the input itself.
+   * The control: one element, such as Input, which gets an id, aria-labelledby, aria-describedby, aria-invalid,
+   * aria-required and disabled. When the control sits inside a wrapper such as InputGroup, pass a function instead and
+   * spread the props it receives onto the input itself.
    */
   children: ReactElement<Record<string, unknown>> | ((props: FieldControlProps) => ReactNode);
 };
 /** The props Field hands to a function child, to spread onto the control. */
 export type FieldControlProps = {
   id: string;
+  /** The label's id, so a control that a label cannot point at with htmlFor, such as RadioGroup, still has a name. */
+  'aria-labelledby'?: string;
   'aria-describedby'?: string;
   'aria-invalid'?: true;
   'aria-required'?: true;
   disabled?: true;
 };
 /**
- * A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
- * aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+ * A form row: label, control, hint and error. It wires the label to the control by id and aria-labelledby (which also
+ * names a group such as RadioGroup), links the hint and error with aria-describedby, and sets aria-invalid when there is
+ * an error. The control keeps an id it already has.
  */
 export declare function Field({ label, hint, error, info, required, disabled, children }: FieldProps): JSX.Element;

package/dist/components/field/Field.js

@@ -5,8 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, useId } from "react";
 // src/components/field/Field.tsx
 /**
-* A form row: label, control, hint and error. It wires the label to the control by id, links the hint and error with
-* aria-describedby, and sets aria-invalid when there is an error. The control keeps an id it already has.
+* A form row: label, control, hint and error. It wires the label to the control by id and aria-labelledby (which also
+* names a group such as RadioGroup), links the hint and error with aria-describedby, and sets aria-invalid when there is
+* an error. The control keeps an id it already has.
 */
 function Field({ label, hint, error, info, required, disabled, children }) {
 	const generatedId = useId();
@@ -15,9 +16,13 @@ function Field({ label, hint, error, info, required, disabled, children }) {
 	const hasError = error !== void 0 && error !== null && error !== false && error !== "";
 	const hasHint = !hasError && hint !== void 0 && hint !== null && hint !== false && hint !== "";
 	const messageId = `${id}-message`;
-	const described = [typeof children === "function" ? void 0 : children.props["aria-describedby"], hasError || hasHint ? messageId : void 0].filter((part) => typeof part === "string" && part !== "").join(" ");
+	const labelId = `${id}-label`;
+	const ownProp = (name) => typeof children === "function" ? void 0 : children.props[name];
+	const ids = (...parts) => parts.filter((part) => typeof part === "string" && part !== "").join(" ");
+	const described = ids(ownProp("aria-describedby"), hasError || hasHint ? messageId : void 0);
 	const wiring = {
 		id,
+		"aria-labelledby": ids(labelId, ownProp("aria-labelledby")),
 		...described === "" ? {} : { "aria-describedby": described },
 		...hasError ? { "aria-invalid": true } : {},
 		...required === true ? { "aria-required": true } : {},
@@ -31,6 +36,7 @@ function Field({ label, hint, error, info, required, disabled, children }) {
 			/* @__PURE__ */ jsxs("div", {
 				className: `rt:flex rt:items-center rt:gap-1.5${disabled === true ? " rt:opacity-50" : ""}`,
 				children: [/* @__PURE__ */ jsxs(Label, {
+					id: labelId,
 					htmlFor: id,
 					children: [label, required === true ? /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",

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

@@ -27,7 +27,7 @@ export interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'className
   label?: string;
 }
 /**
- * Draws one icon of the registry: the design system's own glyphs, filled in a single colour, and Tabler's icons for the
+ * Draws one icon of the registry: the design system's own glyphs, filled (or, for check-mark, stroked) in a single colour, and Tabler's icons for the
  * rest, drawn with a 1.5px line at every size. The icon is a square box of 8, 12 or 16px and takes the colour of its
  * tone.
  */

package/dist/components/icon/Icon.js

@@ -9,7 +9,7 @@ const TONE_CLASSES = {
 	primary: "rt:text-primary"
 };
 /**
-* Draws one icon of the registry: the design system's own glyphs, filled in a single colour, and Tabler's icons for the
+* Draws one icon of the registry: the design system's own glyphs, filled (or, for check-mark, stroked) in a single colour, and Tabler's icons for the
 * rest, drawn with a 1.5px line at every size. The icon is a square box of 8, 12 or 16px and takes the colour of its
 * tone.
 */
@@ -40,13 +40,24 @@ function Icon({ name, size = 12, tone = "current", label, ...rest }) {
 			strokeLinejoin: "round"
 		});
 	}
+	const { glyph } = entry;
+	const paint = glyph.stroke === void 0 ? {
+		fill: "currentColor",
+		stroke: "none"
+	} : {
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: glyph.stroke,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	};
 	return /* @__PURE__ */ jsx("svg", {
 		...rest,
 		...own,
-		viewBox: entry.glyph.viewBox,
-		fill: "currentColor",
-		stroke: "none",
-		children: entry.glyph.paths.map(({ d, fillRule, transform }) => /* @__PURE__ */ jsx("path", {
+		className: cn(own.className, "rt:overflow-visible"),
+		viewBox: glyph.viewBox,
+		...paint,
+		children: glyph.paths.map(({ d, fillRule, transform }) => /* @__PURE__ */ jsx("path", {
 			d,
 			fillRule,
 			transform