@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/DatePicker.js

@@ -0,0 +1,191 @@
+import { cx } from "../cx.js";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { panelClassName, positionerClassName } from "./floating.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { DayPicker } from "@daypicker/react";
+//#region src/components/DatePicker.tsx
+var pad = (n) => String(n).padStart(2, "0");
+var toDay = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+/** The local calendar day a value names, or undefined for none or nonsense. */
+function parseDay(value) {
+	const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})/);
+	if (!match) return;
+	const [, y, m, d] = match.map(Number);
+	const date = new Date(y, m - 1, d);
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+var timeOf = (value) => value?.match(/T(\d{2}:\d{2}(?::\d{2})?)/)?.[1];
+/** The locale's first day of the week, where the browser reports it; Sunday otherwise. */
+function firstWeekday() {
+	try {
+		const locale = new Intl.Locale(navigator.language);
+		const firstDay = (locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay;
+		return firstDay === void 0 ? 0 : firstDay % 7;
+	} catch {
+		return 0;
+	}
+}
+var caption = new Intl.DateTimeFormat(void 0, {
+	month: "long",
+	year: "numeric"
+});
+var weekday = new Intl.DateTimeFormat(void 0, { weekday: "narrow" });
+var longDay = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
+var shownDay = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var calendarClassNames = {
+	root: "relative p-3",
+	months: "flex flex-col",
+	month: "flex flex-col gap-2",
+	month_caption: "flex h-7 items-center px-1",
+	caption_label: "text-sm font-semibold",
+	nav: "absolute top-3 right-3 flex items-center gap-1",
+	button_previous: buttonClasses({
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true
+	}),
+	button_next: buttonClasses({
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true
+	}),
+	month_grid: "border-collapse",
+	weekdays: "",
+	weekday: "size-9 text-center text-xs font-normal text-(--theme-muted-text-color)",
+	week: "",
+	day: "size-9 p-0 text-center text-sm",
+	day_button: "size-9 rounded-md cursor-pointer outline-none hover:bg-(--theme-hover) focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) disabled:cursor-not-allowed disabled:hover:bg-transparent",
+	selected: "[&>button]:bg-(--theme-accent) [&>button]:text-(--theme-accent-text) [&>button]:hover:bg-(--theme-accent)",
+	today: "font-semibold [&>button]:underline [&>button]:underline-offset-4",
+	outside: "text-(--theme-muted-text-color) opacity-60",
+	disabled: "text-(--theme-muted-text-color) opacity-40"
+};
+var triggerClassName = cx(fieldBox(), "flex flex-1 min-w-40 cursor-pointer items-center gap-2 text-left");
+/**
+* A day from a calendar, and with `withTime` a time beside it. The value is a string as a native
+* date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
+* and the shown date follow the reader's locale.
+*/
+function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+	const t = useStrings().datePicker;
+	const { common } = useStrings();
+	const [open, setOpen] = useState(false);
+	const [weekStartsOn] = useState(firstWeekday);
+	const day = parseDay(value);
+	const time = timeOf(value) ?? timeOf(min) ?? "00:00";
+	const earliest = parseDay(min);
+	const latest = parseDay(max);
+	const outOfRange = [...earliest ? [{ before: earliest }] : [], ...latest ? [{ after: latest }] : []];
+	const emit = (next, nextTime = time) => {
+		if (!next) {
+			onValueChange("");
+			return;
+		}
+		onValueChange(withTime ? `${toDay(next)}T${nextTime}` : toDay(next));
+	};
+	const opensOn = day ?? earliest;
+	const pick = (next) => {
+		emit(next);
+		setOpen(false);
+	};
+	const sameDay = (bound) => day !== void 0 && parseDay(bound)?.getTime() === day.getTime();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full items-center gap-2", className),
+		children: [/* @__PURE__ */ jsxs(Popover.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+				id,
+				disabled,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || void 0,
+				className: triggerClassName,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 shrink-0 text-(--theme-muted-text-color)"
+				}), /* @__PURE__ */ jsx("span", {
+					className: cx("truncate", !day && "text-(--theme-muted-text-color)"),
+					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
+				})]
+			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				align: "start",
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					className: panelClassName,
+					children: [/* @__PURE__ */ jsx(DayPicker, {
+						...required ? {
+							mode: "single",
+							required: true,
+							selected: day,
+							onSelect: pick
+						} : {
+							mode: "single",
+							selected: day,
+							onSelect: pick
+						},
+						...opensOn && { defaultMonth: opensOn },
+						...earliest && { startMonth: earliest },
+						...latest && { endMonth: latest },
+						disabled: outOfRange,
+						weekStartsOn,
+						autoFocus: true,
+						showOutsideDays: true,
+						fixedWeeks: true,
+						classNames: calendarClassNames,
+						formatters: {
+							formatCaption: (month) => caption.format(month),
+							formatWeekdayName: (date) => weekday.format(date)
+						},
+						labels: {
+							labelDayButton: (date) => longDay.format(date),
+							labelPrevious: () => t.previousMonth,
+							labelNext: () => t.nextMonth,
+							labelGrid: (month) => caption.format(month),
+							labelWeekday: (date) => new Intl.DateTimeFormat(void 0, { weekday: "long" }).format(date)
+						},
+						components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
+					}), !required && day && /* @__PURE__ */ jsx("div", {
+						className: "flex justify-end border-t border-(--theme-border) px-3 py-2",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: buttonClasses({
+								variant: "ghost",
+								size: "xs"
+							}),
+							onClick: () => {
+								emit(void 0);
+								setOpen(false);
+							},
+							children: common.clear
+						})
+					})]
+				})
+			}) })]
+		}), withTime && /* @__PURE__ */ jsx("input", {
+			type: "time",
+			"aria-label": t.time,
+			value: day ? time : "",
+			step: timeStep,
+			min: sameDay(min) ? timeOf(min) : void 0,
+			max: sameDay(max) ? timeOf(max) : void 0,
+			disabled,
+			"aria-invalid": ariaInvalid || void 0,
+			onChange: (event) => {
+				const next = event.target.value;
+				if (next) emit(day ?? earliest ?? /* @__PURE__ */ new Date(), next);
+			},
+			className: cx(fieldBox(), "w-auto tabular-nums")
+		})]
+	});
+}
+//#endregion
+export { DatePicker };

package/dist/components/DescriptionList.js

@@ -1,11 +1,11 @@
+import { cx } from "../cx.js";
 import { InfoTip } from "./InfoTip.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: clsx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 truncate",
 			children: label
@@ -21,7 +21,7 @@ function DescriptionListItem({ label, children, tooltip, className, ...props })
 }
 function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("w-full", wrapperClassName),
+		className: cx("w-full", wrapperClassName),
 		children: [
 			title && /* @__PURE__ */ jsx("h2", {
 				className: "text-sm font-semibold w-full mb-1",
@@ -32,7 +32,7 @@ function DescriptionList({ children, title, separators = true, subtitle, classNa
 				children: subtitle
 			}),
 			/* @__PURE__ */ jsx("dl", {
-				className: clsx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
 				children: Array.isArray(children) ? React.Children.toArray(children) : children
 			})
 		]

package/dist/components/Disclosure.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+/** The height a collapsible panel animates as it opens and closes. It clips
+ *  only while it moves, so focus rings and overflowing content show once open. */
+export declare const collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
+export interface DisclosureProps {
+    /** The line that toggles the detail: a label, or a row of status and label. */
+    summary: ReactNode;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    /** Nothing to reveal: the summary shows without a toggle. */
+    disabled?: boolean | undefined;
+    /** Keep the detail mounted while folded, so its own state survives. */
+    keepMounted?: boolean | undefined;
+    className?: string | undefined;
+    /** On the toggle: its width (`w-full` for a whole row), text size and color. */
+    summaryClassName?: string | undefined;
+    /** On the revealed detail: its indent and spacing. */
+    panelClassName?: string | undefined;
+    children: ReactNode;
+}
+/** A line inside content that reveals more detail beneath it, such as a tool
+ *  call's arguments or a model's reasoning. For a titled part of a page or
+ *  form, which belongs in the page's outline, use Section. */
+export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, children, }: DisclosureProps): import("react").JSX.Element;
+/** The revealing panel alone, for a toggle that lives elsewhere, such as a
+ *  tree row's chevron that names this panel with `aria-controls`. */
+export declare function DisclosurePanel({ open, id, keepMounted, className, children, }: {
+    open: boolean;
+    id?: string | undefined;
+    keepMounted?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Disclosure.js

@@ -0,0 +1,46 @@
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/Disclosure.tsx
+/** The height a collapsible panel animates as it opens and closes. It clips
+*  only while it moves, so focus rings and overflowing content show once open. */
+var collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
+/** A line inside content that reveals more detail beneath it, such as a tool
+*  call's arguments or a model's reasoning. For a titled part of a page or
+*  form, which belongs in the page's outline, use Section. */
+function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, children }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		defaultOpen,
+		disabled,
+		className,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: cx("group/disclosure flex min-w-0 items-start gap-2 text-left", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
+			children: [summary, !disabled && /* @__PURE__ */ jsx(ChevronRightIcon, {
+				"aria-hidden": "true",
+				className: "mt-1 h-3.5 w-3.5 shrink-0 opacity-70 transition-transform group-data-panel-open/disclosure:rotate-90 motion-reduce:transition-none"
+			})]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			keepMounted,
+			className: cx(collapsePanelClassName, panelClassName),
+			children
+		})]
+	});
+}
+/** The revealing panel alone, for a toggle that lives elsewhere, such as a
+*  tree row's chevron that names this panel with `aria-controls`. */
+function DisclosurePanel({ open, id, keepMounted = false, className, children }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open,
+		children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+			id,
+			keepMounted,
+			className: cx(collapsePanelClassName, className),
+			children
+		})
+	});
+}
+//#endregion
+export { Disclosure, DisclosurePanel, collapsePanelClassName };

package/dist/components/Drawer.d.ts

@@ -0,0 +1,47 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import { type ReactNode } from 'react';
+export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' | 'children' | 'render' | 'title'> {
+    open: boolean;
+    onClose: () => void;
+    /** The header's heading, which names the drawer. Without one, name it with `aria-label`. */
+    title?: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** Actions along the bottom edge, such as Cancel and Save; they stay in view as the body scrolls. */
+    footer?: ReactNode;
+    /** The edge it slides in from, and the way a swipe dismisses it. */
+    side?: 'left' | 'right';
+    /** Its width: pixels, or any CSS length such as `'100%'` for as wide as the space allows. */
+    width?: number | string;
+    /** Adds a handle on the inner edge that drags, or arrow keys move, to change the width. */
+    resizable?: boolean;
+    /** The narrowest a drag leaves it, in pixels. */
+    minWidth?: number;
+    /** False ignores the backdrop and Escape, so typed input isn't lost to a stray
+     *  click; the drawer's own buttons still close it. */
+    dismissible?: boolean;
+    /** True dims the page behind it, locks its scroll and keeps focus inside;
+     *  `'trap-focus'` dims and keeps focus but leaves the page's scroll alone, as an
+     *  embedded panel wants; false is a side panel the page stays usable beside. */
+    modal?: boolean | 'trap-focus';
+    /** False drops the header's close button, for a drawer whose footer closes it. */
+    closeButton?: boolean;
+    /** Covers its nearest positioned ancestor instead of the window, as a drawer
+     *  inside an embedded panel does. */
+    contained?: boolean;
+    /** Keeps the content mounted while closed, so its scroll and state survive. */
+    keepMounted?: boolean;
+    /** False drops the body's padding, for content that fills the drawer edge to edge. */
+    padded?: boolean;
+    /** On the body. */
+    className?: string;
+    children: ReactNode;
+}
+/** A panel that slides in from an edge over the page. A swipe toward that edge,
+ *  Escape or a press outside closes it, and focus returns where it was.
+ *
+ *  It leaves the host's fixed chrome uncovered: it starts below
+ *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
+ *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
+ *  on the document root. */
+export declare function Drawer({ open, onClose, title, description, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;

package/dist/components/Drawer.js

@@ -0,0 +1,120 @@
+import { cx } from "../cx.js";
+import { CloseIcon } from "../icons.js";
+import { pressedToast } from "./Toast.js";
+import { useStrings } from "./Provider.js";
+import { useSplitter } from "./splitter.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/Drawer.tsx
+/** A panel that slides in from an edge over the page. A swipe toward that edge,
+*  Escape or a press outside closes it, and focus returns where it was.
+*
+*  It leaves the host's fixed chrome uncovered: it starts below
+*  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
+*  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
+*  on the document root. */
+function Drawer$1({ open, onClose, title, description, footer, side = "right", width = 480, resizable = false, minWidth = 320, dismissible = true, modal = true, closeButton = true, contained = false, keepMounted = false, padded = true, className, children, ...popupProps }) {
+	const { common } = useStrings();
+	const container = useRef(null);
+	const viewport = useRef(null);
+	const [popup, setPopup] = useState(null);
+	const [chosen, setChosen] = useState(null);
+	const rendered = useRenderedWidth(resizable ? popup : null);
+	const splitter = useSplitter({
+		width: chosen ?? rendered ?? (typeof width === "number" ? width : minWidth),
+		onWidthChange: setChosen,
+		min: minWidth,
+		max: () => innerWidth(viewport.current),
+		side: side === "right" ? "left" : "right"
+	});
+	const header = title !== void 0 || description !== void 0 || closeButton;
+	const area = contained ? "absolute inset-0" : "fixed inset-x-0 bottom-0 top-(--app-inset-top,0px)";
+	const onOpenChange = (next, details) => {
+		if (next) return;
+		if (!dismissible && details.reason === "escape-key" || details.reason === "outside-press" && pressedToast(details.event)) {
+			details.cancel();
+			return;
+		}
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs(Drawer.Root, {
+		open,
+		onOpenChange,
+		swipeDirection: side,
+		modal,
+		disablePointerDismissal: !dismissible,
+		children: [contained && /* @__PURE__ */ jsx("div", {
+			ref: container,
+			className: "contents"
+		}), /* @__PURE__ */ jsxs(Drawer.Portal, {
+			...contained ? { container } : {},
+			keepMounted,
+			className: contained ? "contents" : void 0,
+			children: [modal !== false && /* @__PURE__ */ jsx(Drawer.Backdrop, { className: cx(area, "z-(--layer-drawer) bg-black/40 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none") }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+				ref: viewport,
+				className: cx(area, "pointer-events-none z-(--layer-drawer) flex", side === "right" ? "justify-end pl-[max(var(--app-inset-start,0px),2.5rem)]" : "justify-start pl-(--app-inset-start,0px) pr-10"),
+				children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+					...popupProps,
+					ref: setPopup,
+					className: cx("pointer-events-auto relative flex h-full max-w-full flex-col border-(--theme-border) bg-(--theme-panel-bg) text-(--theme-app) shadow-xl outline-none", side === "right" ? "border-l" : "border-r", "transition-transform duration-300 ease-in-out [transform:translateX(var(--drawer-swipe-movement-x))] data-swiping:select-none data-swiping:duration-0 motion-reduce:transition-none", side === "right" ? "data-ending-style:[transform:translateX(100%)] data-starting-style:[transform:translateX(100%)]" : "data-ending-style:[transform:translateX(-100%)] data-starting-style:[transform:translateX(-100%)]"),
+					style: { width: splitter.resizing || chosen !== null ? splitter.width : width },
+					children: [resizable && /* @__PURE__ */ jsx("div", {
+						...splitter.separatorProps,
+						"data-base-ui-swipe-ignore": ""
+					}), /* @__PURE__ */ jsxs(Drawer.Content, {
+						className: "flex min-h-0 flex-1 flex-col",
+						children: [
+							header && /* @__PURE__ */ jsxs("div", {
+								className: "flex shrink-0 items-start gap-3 border-b border-(--theme-border) px-4 py-3",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 flex-1",
+									children: [title !== void 0 && /* @__PURE__ */ jsx(Drawer.Title, {
+										className: "truncate text-sm font-semibold",
+										children: title
+									}), description !== void 0 && /* @__PURE__ */ jsx(Drawer.Description, {
+										className: "mt-0.5 text-xs text-(--theme-muted-text-color)",
+										children: description
+									})]
+								}), closeButton && /* @__PURE__ */ jsx(Drawer.Close, {
+									"aria-label": common.close,
+									className: "-m-1 shrink-0 cursor-pointer rounded-md p-1 text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+									children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-4 w-4" })
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: cx("relative flex min-h-0 flex-1 flex-col overflow-y-auto", padded && "p-4", className),
+								children
+							}),
+							footer && /* @__PURE__ */ jsx("div", {
+								className: "flex shrink-0 justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
+								children: footer
+							})
+						]
+					})]
+				})
+			})]
+		})]
+	});
+}
+/** The width an element renders at, which its CSS may hold below the width asked for. */
+function useRenderedWidth(el) {
+	const [rendered, setRendered] = useState(null);
+	useLayoutEffect(() => {
+		if (!el) return;
+		const measure = () => setRendered(el.getBoundingClientRect().width || null);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [el]);
+	return rendered;
+}
+/** The room inside the drawer's viewport, past its gutter; unbounded before layout, as in a test. */
+function innerWidth(el) {
+	if (!el?.clientWidth) return Number.POSITIVE_INFINITY;
+	const style = getComputedStyle(el);
+	return el.clientWidth - (Number.parseFloat(style.paddingLeft) || 0) - (Number.parseFloat(style.paddingRight) || 0);
+}
+//#endregion
+export { Drawer$1 as Drawer };

package/dist/components/EmptyState.d.ts

@@ -1,11 +1,16 @@
-import type React from 'react';
-interface EmptyStateProps {
-    title: string;
-    description?: string;
-    action?: React.ReactNode;
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** What to do about it, such as a create button. */
+    action?: ReactNode;
+    icon?: ReactNode;
+    /** `panel` stands in for a whole page or list; `bare` sits inside something
+     *  that already frames it, such as a sidebar, a menu or a dialog. */
+    variant?: 'panel' | 'bare' | undefined;
+    className?: string | undefined;
+    testId?: string | undefined;
 }
-export default function EmptyState({ title, description, action, icon: Icon }: EmptyStateProps): React.JSX.Element;
-export {};
+/** What shows where there is nothing yet, or nothing matches: what's missing,
+ *  and what to do about it. */
+export declare function EmptyState({ title, description, action, icon, variant, className, testId, }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/EmptyState.js

@@ -1,19 +1,24 @@
+import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/EmptyState.tsx
-function EmptyState({ title, description, action, icon: Icon }) {
+/** What shows where there is nothing yet, or nothing matches: what's missing,
+*  and what to do about it. */
+function EmptyState({ title, description, action, icon, variant = "panel", className, testId }) {
+	const panel = variant === "panel";
 	return /* @__PURE__ */ jsxs("div", {
-		className: "border-solid rounded-2xl border border-(--theme-border) theme-panel flex flex-col items-center justify-center py-12 px-6",
+		"data-testid": testId,
+		className: cx("flex flex-col items-center justify-center text-center", panel ? "panel px-6 py-12" : "px-3 py-6", className),
 		children: [
-			Icon && /* @__PURE__ */ jsx("div", {
-				className: "w-10 h-10 rounded-full bg-(--theme-muted-panel-bg) flex items-center justify-center mb-3",
-				children: /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 theme-muted-text" })
+			icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-(--theme-muted-panel-bg) theme-muted-text [&_svg]:h-5 [&_svg]:w-5",
+				children: icon
 			}),
 			/* @__PURE__ */ jsx("p", {
-				className: "text-sm font-medium mb-1",
+				className: cx("text-sm", panel ? "mb-1 font-medium" : "theme-muted-text"),
 				children: title
 			}),
 			description && /* @__PURE__ */ jsx("p", {
-				className: "text-xs theme-muted-text text-center max-w-xs",
+				className: "max-w-xs text-xs theme-muted-text",
 				children: description
 			}),
 			action && /* @__PURE__ */ jsx("div", {
@@ -24,4 +29,4 @@ function EmptyState({ title, description, action, icon: Icon }) {
 	});
 }
 //#endregion
-export { EmptyState as default };
+export { EmptyState };

package/dist/components/ExternalLink.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from 'react';
+export type ExternalLinkProps = Omit<ComponentPropsWithRef<'a'>, 'target' | 'rel'> & {
+    /** Marks the link as leaving the page with an arrow after its text. */
+    icon?: boolean;
+};
+/** A link that opens in a new tab, says so to screen readers, and gives the
+ *  page it opens no hold on this one. */
+export declare function ExternalLink({ children, icon, className, ...props }: ExternalLinkProps): import("react").JSX.Element;

package/dist/components/ExternalLink.js

@@ -0,0 +1,29 @@
+import { cx } from "../cx.js";
+import { ExternalLinkIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ExternalLink.tsx
+/** A link that opens in a new tab, says so to screen readers, and gives the
+*  page it opens no hold on this one. */
+function ExternalLink({ children, icon = false, className, ...props }) {
+	const { common } = useStrings();
+	return /* @__PURE__ */ jsxs("a", {
+		...props,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: cx(icon && "inline-flex items-center gap-1", className),
+		children: [
+			children,
+			/* @__PURE__ */ jsxs("span", {
+				className: "sr-only",
+				children: [" ", common.opensInNewTab]
+			}),
+			icon && /* @__PURE__ */ jsx(ExternalLinkIcon, {
+				className: "h-3 w-3 shrink-0",
+				"aria-hidden": true
+			})
+		]
+	});
+}
+//#endregion
+export { ExternalLink };

package/dist/components/Field.d.ts

@@ -0,0 +1,70 @@
+import { type ReactNode } from 'react';
+/** What a field's control takes to be named, described and marked by its field. Spread it
+ *  on the control: `{(control) => <input {...control} />}`. */
+export interface FieldControlProps {
+    id: string;
+    /** Set for a group, which its legend names rather than a label. */
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: true | undefined;
+    'aria-required'?: true | undefined;
+}
+/** Set by a layout that lines up the fields in a row, as a form's grid does: a stacked field's
+ *  label and control take the row's label and control tracks, so controls under labels of
+ *  different lengths line up. The layout makes the field's box a subgrid of two rows. */
+export declare const FieldRowContext: import("react").Context<boolean>;
+/** The surrounding Field's control props, for a control drawn further down than the Field's
+ *  own children. Null outside a Field. */
+export declare function useFieldControl(): FieldControlProps | null;
+export type FieldLayout = 'stacked' | 'inline';
+export interface FieldProps {
+    label: ReactNode;
+    /** Beside the label and outside it, so it stays out of the control's name: an InfoTip, a count. */
+    hint?: ReactNode;
+    /** Buttons at the far end of the label's row that act on the field, such as one that
+     *  switches its control to a typed expression. */
+    actions?: ReactNode;
+    /** Help under the control, read with it. */
+    description?: ReactNode;
+    /** A message under the control. It also marks the control invalid. */
+    error?: ReactNode;
+    /** Marks the control invalid without a message, for one shown elsewhere. */
+    invalid?: boolean | undefined;
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** `stacked` puts the label above the control. `inline` puts it in a column to the left, as a
+     *  form lays out its fields. */
+    layout?: FieldLayout | undefined;
+    /** With `inline`, the label takes only its own width rather than the column's. */
+    compact?: boolean | undefined;
+    /** A set of controls, such as radios or checkboxes, that a legend names instead of a label. */
+    group?: boolean | undefined;
+    /** The control's id; one is made up when left out. */
+    id?: string | undefined;
+    className?: string | undefined;
+    /** The control, or a function that places the control props on it. A Base UI control, such
+     *  as Select, Combobox, NumberInput, Checkbox or Switch, needs only the `id`. */
+    children: ReactNode | ((control: FieldControlProps) => ReactNode);
+}
+/** An error in the look a Field gives its own, for one under a part of a control rather than
+ *  the whole of it, such as a row of a list editor. */
+export declare function ErrorText({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+/** A control with its label, help and error, tied to it for assistive technology. One frame
+ *  for every field, in a form or standing alone. */
+export declare function Field({ label, hint, actions, description, error, invalid, required, disabled, layout, compact, group, id: ownId, className, children, }: FieldProps): import("react").JSX.Element;
+/** One checkbox or radio and its label inside a Field, such as an option of a group. A bare
+ *  `<label>` there would take the Field's label as its own, so every option read as the field. */
+export declare function FieldOption({ disabled, className, children, }: {
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The eye button inside a secret's box that shows or hides what was typed. Give the box
+ *  room for it on the right, such as `pr-9`. */
+export declare function RevealToggle({ revealed, onRevealedChange, disabled, }: {
+    revealed: boolean;
+    onRevealedChange: (revealed: boolean) => void;
+    disabled?: boolean | undefined;
+}): import("react").JSX.Element;