@ratio-ui/core 0.3.0 → 0.4.0

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,5 +1,5 @@
-import { Checkbox } from "../checkbox/Checkbox.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";

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/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-5 rt:right-5 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/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-otp rt:text-foreground rt:shadow-ring-subtle rt:transition-colors 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";