@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/Field.js

@@ -0,0 +1,159 @@
+import { cx } from "../cx.js";
+import { EyeIcon, EyeOffIcon, WarningIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { RequiredMark } from "./RequiredMark.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId } from "react";
+import { Field } from "@base-ui/react/field";
+import { Fieldset } from "@base-ui/react/fieldset";
+//#region src/components/Field.tsx
+var ControlContext = createContext(null);
+/** 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. */
+var FieldRowContext = createContext(false);
+/** The surrounding Field's control props, for a control drawn further down than the Field's
+*  own children. Null outside a Field. */
+function useFieldControl() {
+	return use(ControlContext);
+}
+var labelClassName = "flex items-center gap-1 text-sm font-medium text-(--theme-app)";
+var actionsClassName = "ml-auto flex shrink-0 items-center gap-1";
+var errorTextClassName = "flex items-center gap-1.5 text-xs text-(--theme-error)";
+/** 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. */
+function ErrorText({ children }) {
+	return children ? /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: errorTextClassName,
+		children: [/* @__PURE__ */ jsx(WarningIcon, {
+			"aria-hidden": "true",
+			className: "size-3.5 shrink-0"
+		}), children]
+	}) : 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. */
+function Field$1({ label, hint, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, group = false, id: ownId, className, children }) {
+	const uid = useId();
+	const id = ownId ?? `${uid}control`;
+	const labelId = `${uid}label`;
+	const descriptionId = description ? `${uid}description` : void 0;
+	const errorId = error ? `${uid}error` : void 0;
+	const isInvalid = Boolean(error) || Boolean(invalid);
+	const describedBy = [descriptionId, errorId].filter(Boolean).join(" ");
+	const control = {
+		id,
+		...group && { "aria-labelledby": labelId },
+		...describedBy && { "aria-describedby": describedBy },
+		...isInvalid && { "aria-invalid": true },
+		...required && { "aria-required": true }
+	};
+	const inline = layout === "inline";
+	const inRow = use(FieldRowContext) && !inline && !group;
+	const labelBox = cx(labelClassName, inline && cx("min-h-9 shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
+	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
+		hint,
+		actions && /* @__PURE__ */ jsx("span", {
+			className: actionsClassName,
+			children: actions
+		})
+	] });
+	const body = /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
+		children: [
+			/* @__PURE__ */ jsx(FieldRowContext, {
+				value: false,
+				children: /* @__PURE__ */ jsx(ControlContext, {
+					value: control,
+					children: typeof children === "function" ? children(control) : children
+				})
+			}),
+			description && /* @__PURE__ */ jsx(Field.Description, {
+				id: descriptionId,
+				className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
+				children: description
+			}),
+			error && /* @__PURE__ */ jsxs(Field.Error, {
+				id: errorId,
+				match: true,
+				role: "alert",
+				className: errorTextClassName,
+				children: [/* @__PURE__ */ jsx(WarningIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 shrink-0"
+				}), error]
+			})
+		]
+	});
+	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : "flex-col gap-1.5", className);
+	if (group) return /* @__PURE__ */ jsx(Field.Root, {
+		invalid: isInvalid,
+		disabled,
+		render: /* @__PURE__ */ jsx(Fieldset.Root, {
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: frame,
+			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+				id: labelId,
+				className: labelBox,
+				children: labelContent
+			}), body]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		invalid: isInvalid,
+		disabled,
+		className: frame,
+		"data-field-row": inRow || void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: labelBox,
+			children: [
+				/* @__PURE__ */ jsxs(Field.Label, {
+					htmlFor: id,
+					id: labelId,
+					"data-field-label": true,
+					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+				}),
+				hint,
+				actions && /* @__PURE__ */ jsx("span", {
+					className: actionsClassName,
+					children: actions
+				})
+			]
+		}), body]
+	});
+}
+/** 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. */
+function FieldOption({ disabled, className, children }) {
+	return /* @__PURE__ */ jsx(Field.Item, {
+		disabled,
+		render: /* @__PURE__ */ jsx("label", {}),
+		className: cx(disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer", className),
+		children
+	});
+}
+/** 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`. */
+function RevealToggle({ revealed, onRevealedChange, disabled }) {
+	const { common: t } = useStrings();
+	const Icon = revealed ? EyeOffIcon : EyeIcon;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": revealed ? t.hideValue : t.showValue,
+		"aria-pressed": revealed,
+		disabled,
+		onClick: () => onRevealedChange(!revealed),
+		className: "absolute inset-y-0 right-0 flex w-9 cursor-pointer items-center justify-center text-(--theme-muted-text-color) hover:text-(--theme-app) disabled:cursor-not-allowed disabled:opacity-50",
+		children: /* @__PURE__ */ jsx(Icon, {
+			"aria-hidden": "true",
+			className: "size-4"
+		})
+	});
+}
+//#endregion
+export { ErrorText, Field$1 as Field, FieldOption, FieldRowContext, RevealToggle, useFieldControl };

package/dist/components/HoverCard.js

@@ -1,4 +1,4 @@
-import { cardClassName, portalContainer, positionerClassName } from "./floating.js";
+import { cardClassName, positionerClassName } from "./floating.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
@@ -13,20 +13,17 @@ function HoverCard({ card, children, defaultOpen = false }) {
 			delay: 350,
 			closeDelay: 150,
 			render: children
-		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
-			container: portalContainer(),
-			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
-				side: "bottom",
-				align: "start",
-				sideOffset: 8,
-				collisionPadding: 8,
-				className: positionerClassName,
-				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
-					className: cardClassName,
-					children: card
-				})
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, { children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+			side: "bottom",
+			align: "start",
+			sideOffset: 8,
+			collisionPadding: 8,
+			className: positionerClassName,
+			children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
+				className: cardClassName,
+				children: card
 			})
-		})]
+		}) })]
 	});
 }
 //#endregion

package/dist/components/IconButton.d.ts

@@ -1,17 +1,20 @@
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-interface IconButtonProps extends ComponentPropsWithRef<'button'> {
-    /** Icon to display */
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ButtonSize, type ButtonVariant } from './buttonClasses.js';
+export interface IconButtonProps extends ComponentPropsWithRef<'button'> {
     icon: ReactNode;
     /** The accessible name, also shown as the tooltip. */
     label: string;
-    /** Button variant */
-    variant?: 'default' | 'ghost' | 'primary' | 'success';
-    /** Size of the button */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether button is in active/selected state */
-    active?: boolean;
-    /** False hides the tooltip, such as while the button's own popup is open. */
-    showTooltip?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** A toggle's state: set, it reads as pressed (`aria-pressed`). */
+    pressed?: boolean | undefined;
+    /** A dot in the corner, such as for filters narrowing what the page shows. */
+    dot?: boolean;
+    /** A single key, such as F, that presses the button from anywhere on the page
+     *  outside a text field. Also shown in the tooltip. */
+    shortcut?: string | undefined;
 }
-export declare function IconButton({ icon, label, variant, size, active, showTooltip, className, ...props }: IconButtonProps): import("react").JSX.Element;
-export {};
+/** A button that shows only an icon, named by its tooltip. It can be a popup's
+ *  trigger: it passes the trigger's props and ref on, and hides its tooltip while
+ *  the popup is open. */
+export declare function IconButton({ icon, label, variant, size, pressed, dot, shortcut, className, ref, ...props }: IconButtonProps): import("react").JSX.Element;

package/dist/components/IconButton.js

@@ -1,28 +1,37 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "./buttonClasses.js";
 import { Tooltip } from "./Tooltip.js";
-import { clsx } from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { useShortcutKey } from "./shortcutKey.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
 //#region src/components/IconButton.tsx
-function IconButton({ icon, label, variant = "default", size = "md", active = false, showTooltip = true, className, ...props }) {
-	const sizeClasses = {
-		sm: "w-7 h-7 [&_svg]:w-3.5 [&_svg]:h-3.5",
-		md: "w-9 h-9 [&_svg]:w-4 [&_svg]:h-4",
-		lg: "w-11 h-11 [&_svg]:w-5 [&_svg]:h-5"
-	};
-	const variantClasses = {
-		default: clsx("bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-border)] hover:text-[var(--theme-app)]", active && "bg-[var(--theme-element)]/10 text-[var(--theme-element)]"),
-		ghost: clsx("bg-transparent text-[var(--theme-muted-text-color)]", "hover:bg-[var(--theme-muted-panel-bg)] hover:text-[var(--theme-app)]", active && "text-[var(--theme-element)]"),
-		primary: clsx("bg-[var(--theme-element)] text-white", "hover:bg-[var(--theme-element)]/90", active && "ring-2 ring-[var(--theme-element)]/50"),
-		success: clsx("bg-[#22c55e] text-white", "hover:bg-[#22c55e]/90", active && "ring-2 ring-[#22c55e]/50")
-	};
+/** A button that shows only an icon, named by its tooltip. It can be a popup's
+*  trigger: it passes the trigger's props and ref on, and hides its tooltip while
+*  the popup is open. */
+function IconButton({ icon, label, variant = "ghost", size = "sm", pressed, dot = false, shortcut, className, ref, ...props }) {
+	const button = useRef(null);
+	const setButton = useCallback((node) => {
+		button.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useShortcutKey(shortcut, () => button.current?.click());
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: label,
-		disabled: !showTooltip,
-		children: /* @__PURE__ */ jsx("button", {
+		shortcut: shortcut?.toUpperCase(),
+		disabled: props["aria-expanded"] === true && !!props["aria-haspopup"],
+		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-label": label,
-			className: clsx("inline-flex items-center justify-center rounded-lg", "transition-all duration-200 cursor-pointer", "disabled:opacity-50 disabled:cursor-not-allowed", sizeClasses[size], variantClasses[variant], className),
+			"aria-pressed": pressed,
+			ref: setButton,
+			className: cx(buttonClasses({
+				variant,
+				size,
+				iconOnly: true
+			}), className),
 			...props,
-			children: icon
+			children: [icon, dot && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
 		})
 	});
 }

package/dist/components/InfoTip.js

@@ -1,11 +1,11 @@
-import { HiQuestionMarkCircle } from "../icons/hi/HiQuestionMarkCircle.js";
-import { portalContainer, positionerClassName, tipArrowClassName, tipClassName } from "./floating.js";
+import { cx } from "../cx.js";
+import { HelpIcon } from "../icons.js";
 import { keyedByContent } from "./keys.js";
 import { useStrings } from "./Provider.js";
-import { clsx } from "clsx";
+import { ExternalLink } from "./ExternalLink.js";
+import { Popover } from "./Popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1 } from "react";
-import { Popover } from "@base-ui/react/popover";
 //#region src/components/InfoTip.tsx
 var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
 function formatLine(line) {
@@ -13,10 +13,8 @@ function formatLine(line) {
 	let last = 0;
 	for (const match of line.matchAll(linkRegex)) {
 		if (match.index > last) nodes.push(line.slice(last, match.index));
-		nodes.push(/* @__PURE__ */ jsx("a", {
+		nodes.push(/* @__PURE__ */ jsx(ExternalLink, {
 			href: match[2],
-			target: "_blank",
-			rel: "noopener noreferrer",
 			className: "underline",
 			children: match[1]
 		}, match.index));
@@ -38,23 +36,18 @@ function InfoTip({ text, side = "top", className, children }) {
 		className,
 		children
 	}) : null;
-	return /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+	return /* @__PURE__ */ jsx(Popover, {
+		variant: "tip",
 		openOnHover: true,
-		"aria-label": children ? void 0 : t.moreInfo,
-		className: clsx("inline-flex items-center cursor-help", !children && "tooltip", className),
-		children: children ?? /* @__PURE__ */ jsx(HiQuestionMarkCircle, { "aria-hidden": "true" })
-	}), /* @__PURE__ */ jsx(Popover.Portal, {
-		container: portalContainer(),
-		children: /* @__PURE__ */ jsx(Popover.Positioner, {
-			side,
-			sideOffset: 8,
-			className: positionerClassName,
-			children: /* @__PURE__ */ jsxs(Popover.Popup, {
-				className: clsx("max-w-sm text-left", tipClassName),
-				children: [/* @__PURE__ */ jsx(Popover.Arrow, { className: tipArrowClassName }), formatInfoTipContent(text)]
-			})
-		})
-	})] });
+		side,
+		trigger: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": children ? void 0 : t.moreInfo,
+			className: cx("inline-flex items-center cursor-help", !children && "tooltip", className),
+			children: children ?? /* @__PURE__ */ jsx(HelpIcon, { "aria-hidden": "true" })
+		}),
+		children: formatInfoTipContent(text)
+	});
 }
 //#endregion
 export { InfoTip, formatInfoTipContent };

package/dist/components/Input.d.ts

@@ -1,19 +1,20 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-interface FieldProps {
+interface FramedProps {
+    /** Without a label the box stands alone; name it with `aria-label`. */
     label?: ReactNode;
-    /** Shown beside the label, outside it, so it stays out of the field's name. */
-    labelHint?: ReactNode;
-    /** Help text shown under the label. */
+    /** Beside the label and outside it, so it stays out of the field's name. */
+    hint?: ReactNode;
+    /** Help under the field. */
     description?: ReactNode;
-    error?: string | undefined;
+    error?: ReactNode;
     mono?: boolean;
 }
-interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps {
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, FramedProps {
 }
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldProps {
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FramedProps {
 }
-/** The box a text field draws, for other controls that should look like one. */
-export declare const fieldBoxClasses: string;
+/** A single-line text field. `type="password"` adds a button that shows what was typed. */
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+/** A multi-line text field that grows by hand. */
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/Input.js

@@ -1,109 +1,67 @@
-import { LuEye } from "../icons/lu/LuEye.js";
-import { LuEyeOff } from "../icons/lu/LuEyeOff.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { RequiredMark } from "./RequiredMark.js";
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
+import { fieldBox } from "./fieldBox.js";
+import { Field, RevealToggle } from "./Field.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useId, useState } from "react";
+import { forwardRef, useState } from "react";
 //#region src/components/Input.tsx
-/** The box a text field draws, for other controls that should look like one. */
-var fieldBoxClasses = clsx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]");
-function LabelRow({ id, label, hint, required }) {
-	const element = /* @__PURE__ */ jsxs("label", {
-		className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
-		htmlFor: id,
-		children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-	});
-	return hint ? /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-baseline gap-x-1.5",
-		children: [element, hint]
-	}) : element;
-}
-function useFieldFrame({ label, labelHint, description, error }, ownId, describedBy, required) {
-	const generatedId = useId();
-	const id = ownId ?? generatedId;
-	const errorId = `${id}-error`;
-	const descriptionId = `${id}-description`;
-	return {
+/** The Field around a control when it has a label; the control alone when it doesn't. */
+function framed({ label, hint, description, error }, { id, required, disabled }, control) {
+	if (label === void 0) return control(error ? { "aria-invalid": true } : {});
+	return /* @__PURE__ */ jsx(Field, {
+		label,
+		hint,
+		description,
+		error,
+		required,
+		disabled,
 		id,
-		describedBy: [
-			describedBy,
-			description ? descriptionId : void 0,
-			error ? errorId : void 0
-		].filter(Boolean).join(" ") || void 0,
-		frame: (control) => /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-1.5",
-			children: [
-				label && /* @__PURE__ */ jsx(LabelRow, {
-					id,
-					label,
-					hint: labelHint,
-					required
-				}),
-				description && /* @__PURE__ */ jsx("span", {
-					id: descriptionId,
-					className: "-mt-1 text-xs text-(--theme-muted-text-color)",
-					children: description
-				}),
-				control,
-				error && /* @__PURE__ */ jsxs("span", {
-					id: errorId,
-					role: "alert",
-					className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-4 h-4" }), error]
-				})
-			]
-		})
-	};
+		children: control
+	});
 }
-var Input = forwardRef(({ label, labelHint, description, error, className = "", mono, type, required, ...props }, ref) => {
-	const [showPassword, setShowPassword] = useState(false);
-	const isPassword = type === "password";
-	const field = useFieldFrame({
+/** A single-line text field. `type="password"` adds a button that shows what was typed. */
+var Input = forwardRef(({ label, hint, description, error, className, mono, type, ...props }, ref) => {
+	const [revealed, setRevealed] = useState(false);
+	const secret = type === "password";
+	return framed({
 		label,
-		labelHint,
+		hint,
 		description,
 		error
-	}, props.id, props["aria-describedby"], required);
-	return field.frame(/* @__PURE__ */ jsxs("div", {
-		className: isPassword ? "relative w-full" : "",
-		children: [/* @__PURE__ */ jsx("input", {
+	}, props, (control) => {
+		const input = /* @__PURE__ */ jsx("input", {
 			ref,
-			type: isPassword && showPassword ? "text" : type,
-			className: clsx(fieldBoxClasses, "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", isPassword && "pr-11", className),
 			...props,
-			id: field.id,
-			required,
-			"aria-invalid": error ? true : props["aria-invalid"],
-			"aria-describedby": field.describedBy
-		}), isPassword && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
-			onClick: () => setShowPassword(!showPassword),
-			tabIndex: -1,
-			"aria-label": showPassword ? "Hide password" : "Show password",
-			children: showPassword ? /* @__PURE__ */ jsx(LuEyeOff, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(LuEye, { className: "w-5 h-5" })
-		})]
-	}));
+			...control,
+			"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
+			"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+			type: secret && revealed ? "text" : type,
+			className: cx(fieldBox(), mono && "font-mono", secret && "pr-9", className)
+		});
+		return secret ? /* @__PURE__ */ jsxs("div", {
+			className: "relative w-full",
+			children: [input, /* @__PURE__ */ jsx(RevealToggle, {
+				revealed,
+				onRevealedChange: setRevealed,
+				disabled: props.disabled
+			})]
+		}) : input;
+	});
 });
 Input.displayName = "Input";
-var Textarea = forwardRef(({ label, labelHint, description, error, className = "", mono, required, ...props }, ref) => {
-	const field = useFieldFrame({
-		label,
-		labelHint,
-		description,
-		error
-	}, props.id, props["aria-describedby"], required);
-	return field.frame(/* @__PURE__ */ jsx("textarea", {
-		ref,
-		className: clsx(fieldBoxClasses, "min-h-[140px] resize-y", mono && "font-mono text-[0.8125rem]", error && "!border-[#ef4444]", className),
-		...props,
-		id: field.id,
-		required,
-		"aria-invalid": error ? true : props["aria-invalid"],
-		"aria-describedby": field.describedBy
-	}));
-});
+/** A multi-line text field that grows by hand. */
+var Textarea = forwardRef(({ label, hint, description, error, className, mono, ...props }, ref) => framed({
+	label,
+	hint,
+	description,
+	error
+}, props, (control) => /* @__PURE__ */ jsx("textarea", {
+	ref,
+	...props,
+	...control,
+	"aria-invalid": control["aria-invalid"] ?? props["aria-invalid"],
+	"aria-describedby": [props["aria-describedby"], control["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+	className: cx(fieldBox({ multiline: true }), "min-h-24 resize-y", mono && "font-mono", className)
+})));
 Textarea.displayName = "Textarea";
 //#endregion
-export { Input, Textarea, fieldBoxClasses };
+export { Input, Textarea };

package/dist/components/LetterBadge.js

@@ -1,11 +1,11 @@
-import { clsx } from "clsx";
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/LetterBadge.tsx
 /** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
 * an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
 function LetterBadge({ text, className }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: clsx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
 		children: text
 	});
 }

package/dist/components/Loader.d.ts

@@ -1,11 +1,18 @@
-interface LoaderProps {
+export interface LoaderProps {
+    /** The spinner's size, in pixels or any CSS length. */
     size?: number | string;
-    text?: string | undefined;
-    textSize?: number;
-    color?: string;
-    full?: boolean;
-    loaderStyle?: React.CSSProperties;
+    /** Shown under the spinner, and its accessible name. Without one, the
+     *  loader is named with the provider's `loading` string. */
+    label?: string | undefined;
     variant?: 'spinner' | 'logo';
+    /** Sits in a line of text or a button instead of centering in its own row. */
+    inline?: boolean;
+    /** The spinner's color, such as `currentColor` inside a button. */
+    color?: string | undefined;
+    /** Beside text that already says what is happening, such as a busy button's
+     *  label: hidden from assistive technology, and in the text's color. */
+    decorative?: boolean;
 }
-export default function Loader({ size, text, textSize, full, color, loaderStyle, variant, }: LoaderProps): import("react").JSX.Element;
-export {};
+/** Something on the way that has no shape to sketch yet. When its shape is
+ *  known, such as rows of a list, sketch it with `Skeleton` instead. */
+export declare function Loader({ size, label, variant, inline, color, decorative, }: LoaderProps): import("react").JSX.Element;