@parallelworks/ui 0.51.0 → 0.53.0

package/dist/file-explorer/helpers.js

@@ -3,13 +3,13 @@ import { CustomizeIcon, DiskIcon, FileIcon, FileTextIcon, FolderIcon, ImageIcon,
 import { toast } from "../components/Toast.js";
 import { usePersistedState, useProvisionCorsRules, useSlots, useStrings } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
-import Callout from "../components/Callout.js";
+import { Callout } from "../components/Callout.js";
 import { ProgressBar } from "../components/Meter.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { formatBytes } from "../format.js";
 import { useElapsed } from "../components/relativeTime.js";
 import { ListSkeleton } from "../list/ListTable.js";
-import { getFileExtension } from "./lib/utils.js";
+import { carriesFiles, getFileExtension } from "./lib/utils.js";
 import { CorsError } from "./lib/errors.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from "react";
@@ -219,20 +219,17 @@ function CorsIssuePreview({ selectedStorage, onRefresh }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-center justify-center max-w-lg mx-auto",
 		children: [/* @__PURE__ */ jsxs(Callout, {
-			className: "text-left",
-			type: "info",
+			className: "my-4 text-left",
+			tone: "info",
+			title: t.explanation.title,
 			children: [
-				/* @__PURE__ */ jsx("h4", {
-					className: "font-semibold mb-2",
-					children: t.explanation.title
-				}),
 				/* @__PURE__ */ jsx("p", {
 					className: "mb-2",
 					children: t.explanation.description
 				}),
 				/* @__PURE__ */ jsx("p", { children: t.explanation.action }),
 				/* @__PURE__ */ jsx("p", {
-					className: "mt-2 text-sm italic",
+					className: "mt-2 italic",
 					children: t.explanation.note
 				})
 			]
@@ -264,32 +261,33 @@ function CorsPropagatingPreview() {
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"aria-live": "polite",
-		className: "flex flex-col items-center justify-center max-w-md mx-auto px-6 py-8 animate-[fadeInUp_400ms_ease-out]",
+		className: "flex flex-col items-center justify-center max-w-md mx-auto px-6 py-8 motion-safe:animate-[fadeInUp_400ms_ease-out]",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
 				className: "relative w-28 h-28 mb-6 flex items-center justify-center",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-full w-full rounded-full bg-blue-400/30 animate-ping",
+						className: "absolute inline-flex h-full w-full rounded-full bg-(--theme-info)/30 motion-safe:animate-ping",
 						style: { animationDuration: "2.4s" }
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-2/3 w-2/3 rounded-full bg-blue-500/40 animate-ping",
+						className: "absolute inline-flex h-2/3 w-2/3 rounded-full bg-(--theme-info)/40 motion-safe:animate-ping",
 						style: {
 							animationDuration: "2.4s",
 							animationDelay: "0.6s"
 						}
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "absolute inline-flex h-1/3 w-1/3 rounded-full bg-blue-500/60 animate-ping",
+						className: "absolute inline-flex h-1/3 w-1/3 rounded-full bg-(--theme-info)/60 motion-safe:animate-ping",
 						style: {
 							animationDuration: "2.4s",
 							animationDelay: "1.2s"
 						}
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: "relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 shadow-[0_0_24px_rgba(59,130,246,0.55)]",
-						children: /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 rounded-full bg-white animate-pulse" })
+						className: "relative inline-flex items-center justify-center w-8 h-8 rounded-full bg-(--theme-info) shadow-[0_0_24px_color-mix(in_oklab,var(--theme-info)_55%,transparent)]",
+						children: /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-2 w-2 rounded-full bg-(--theme-panel-bg) motion-safe:animate-pulse" })
 					})
 				]
 			}),
@@ -349,7 +347,7 @@ function PropagationStage({ status, label }) {
 	return /* @__PURE__ */ jsxs("li", {
 		className: "flex flex-col items-center gap-1.5",
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-green-500 border-green-500 text-white", status === "active" && "border-blue-500", status === "pending" && "theme-border"),
+			className: cx("relative flex items-center justify-center w-6 h-6 rounded-full border transition-colors", status === "done" && "bg-(--theme-success-solid) border-(--theme-success-solid) text-white", status === "active" && "border-(--theme-info)", status === "pending" && "theme-border"),
 			children: [
 				status === "done" && /* @__PURE__ */ jsx("svg", {
 					viewBox: "0 0 16 16",
@@ -362,7 +360,7 @@ function PropagationStage({ status, label }) {
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ jsx("polyline", { points: "3.5 8.5 6.5 11.5 12.5 5" })
 				}),
-				status === "active" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-blue-500" })] }),
+				status === "active" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full bg-(--theme-info)/60" }), /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-(--theme-info)" })] }),
 				status === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
 			]
 		}), /* @__PURE__ */ jsx("span", {
@@ -374,7 +372,7 @@ function PropagationStage({ status, label }) {
 function PropagationConnector({ active }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
+		className: cx("h-px w-8 -mt-5 transition-colors", active ? "bg-(--theme-info)" : "theme-border border-t")
 	});
 }
 function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage = null, className, canWrite = true }) {
@@ -409,8 +407,11 @@ function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionI
 			className: "flex flex-col items-center justify-center max-w-md p-8",
 			children: [
 				/* @__PURE__ */ jsx("div", {
-					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-amber-500/10 mb-4",
-					children: /* @__PURE__ */ jsx(WarningIcon, { className: "h-6 w-6 text-amber-500" })
+					className: "inline-flex items-center justify-center w-14 h-14 rounded-full bg-(--theme-warning-muted) mb-4",
+					children: /* @__PURE__ */ jsx(WarningIcon, {
+						"aria-hidden": "true",
+						className: "h-6 w-6 text-(--theme-warning)"
+					})
 				}),
 				/* @__PURE__ */ jsx("h2", {
 					className: "text-base font-semibold mb-1",
@@ -466,13 +467,13 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
 		onDragOver: (e) => {
 			e.preventDefault();
-			if (onDropFiles) setIsDragging(true);
+			if (onDropFiles && carriesFiles(e.dataTransfer)) setIsDragging(true);
 		},
 		onDragLeave: () => setIsDragging(false),
 		onDrop: (e) => {
 			e.preventDefault();
 			setIsDragging(false);
-			if (!onDropFiles) return;
+			if (!onDropFiles || !carriesFiles(e.dataTransfer)) return;
 			onDropFiles(e.dataTransfer.items.length ? e.dataTransfer.items : e.dataTransfer.files);
 		},
 		children
@@ -532,4 +533,4 @@ async function addCorsRules({ provision, strings, csp, type, username, storageNa
 	toast.warning(strings.corsPropagating);
 }
 //#endregion
-export { CorsIssuePreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };
+export { CorsIssuePreview, CorsPropagatingPreview, DragDropZone, NoDataAvailablePreview, NoFileSelectedPreview, NotFoundPreview, SIDEBAR_WIDTH_STORAGE_KEY, ShareFileButton, SkeletonPreview, getNodeIcon, renderUploadNodes };

package/dist/file-explorer/lib/utils.d.ts

@@ -32,6 +32,9 @@ export declare function attachmentDisposition(filename: string): string;
 export declare function getDirectoryPrefixFromNode(node: TreeNode): string;
 export declare function pruneNodesInsideSelectedDirectories(nodes: TreeNode[]): TreeNode[];
 export declare function collectObjectKeysToDelete(nodes: TreeNode[], listKeysUnderPrefix: (prefix: string) => Promise<string[]>): Promise<string[]>;
+/** True when a drag carries files or folders, not a link or text, such as a
+ *  row's own link dragged across the explorer. */
+export declare function carriesFiles(dataTransfer: DataTransfer): boolean;
 export declare function getUriScheme(uri: string): string;
 export declare function removeLeadingSlash(path: string): string;
 export declare function removeLeadingAndTrailingSlashes(path: string): string;

package/dist/file-explorer/lib/utils.js

@@ -229,6 +229,11 @@ async function collectObjectKeysToDelete(nodes, listKeysUnderPrefix) {
 	}
 	return Array.from(keys);
 }
+/** True when a drag carries files or folders, not a link or text, such as a
+*  row's own link dragged across the explorer. */
+function carriesFiles(dataTransfer) {
+	return Array.from(dataTransfer.types).includes("Files");
+}
 function getUriScheme(uri) {
 	return uri.match(/^([a-z0-9+.-]+):\/\//i)?.[1] ?? "";
 }
@@ -290,4 +295,4 @@ function getUploadSessionETA(totalLoadedBytes, totalSizeBytes, lastProgressTime,
 	};
 }
 //#endregion
-export { attachmentDisposition, calculateUploadNodesTotalSize, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };
+export { attachmentDisposition, calculateUploadNodesTotalSize, carriesFiles, collectObjectKeysToDelete, createTreeBuilder, ensureTrailingSlash, getDirectoryNameError, getDirectoryObjectPath, getDirectoryPrefixFromNode, getFileExtension, getNodeChildren, getNodeName, getObjectKeyFromNode, getParentPath, getUploadNodesFromDataTransferItems, getUploadSessionETA, getUriScheme, isClientValid, pruneNodesInsideSelectedDirectories, removeLeadingAndTrailingSlashes, removeLeadingSlash };

package/dist/file-explorer/toasts.js

@@ -1,8 +1,10 @@
 import { cx } from "../cx.js";
 import { ChevronDownIcon, ChevronUpIcon, CloseIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon, UploadIcon, WarningIcon } from "../icons.js";
+import { toneIcon } from "../components/tone.js";
 import { useStrings } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
 import { IconButton } from "../components/IconButton.js";
+import { Callout } from "../components/Callout.js";
 import { ProgressBar } from "../components/Meter.js";
 import { formatBytes, formatTimeLeft } from "../format.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -11,28 +13,34 @@ import { useState } from "react";
 function getSessionStatusInfo(session, queueLength, strings) {
 	switch (session.status) {
 		case "queued": return {
-			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: cx("w-5 h-5", toneIcon.info) }),
 			title: strings.inQueue(session.queueIndex + 1, queueLength),
 			shortTitle: strings.queuedShort(session.queueIndex + 1, queueLength),
-			bgColor: "bg-blue-100"
+			bgColor: "bg-(--theme-info-muted)"
 		};
 		case "uploading": return {
-			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: cx("w-5 h-5", toneIcon.info) }),
 			title: strings.uploading,
 			shortTitle: strings.uploading,
-			bgColor: "bg-blue-100"
+			bgColor: "bg-(--theme-info-muted)"
 		};
 		case "completed": return {
-			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: "w-5 h-5 text-green-600" }),
+			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: cx("w-5 h-5", toneIcon.success) }),
 			title: strings.completeTitle,
 			shortTitle: strings.completed,
-			bgColor: "bg-green-100"
+			bgColor: "bg-(--theme-success-muted)"
 		};
 		case "failed": return {
-			icon: /* @__PURE__ */ jsx(WarningIcon, { className: "w-5 h-5 text-red-600" }),
+			icon: /* @__PURE__ */ jsx(WarningIcon, { className: cx("w-5 h-5", toneIcon.error) }),
 			title: strings.failedTitle,
 			shortTitle: strings.failed,
-			bgColor: "bg-red-100"
+			bgColor: "bg-(--theme-error-muted)"
+		};
+		case "canceled": return {
+			icon: /* @__PURE__ */ jsx(CloseIcon, { className: "w-5 h-5 theme-muted-text" }),
+			title: strings.canceled,
+			shortTitle: strings.canceled,
+			bgColor: "bg-(--theme-muted-panel-bg)"
 		};
 		default: return {
 			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 theme-muted-text" }),
@@ -178,6 +186,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 								}), /* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": strings.expandDetails,
+									"aria-expanded": false,
 									className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 									onClick: handleExpandClick,
 									title: strings.expandDetails,
@@ -221,6 +230,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
 						"aria-label": strings.minimizeDetails,
+						"aria-expanded": true,
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer mr-2",
 						onClick: handleExpandClick,
 						title: strings.minimizeDetails,
@@ -250,15 +260,11 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						]
 					})
 				}),
-				isUploading && /* @__PURE__ */ jsx("div", {
-					className: "mb-4 p-3 bg-amber-50 border border-amber-200 rounded-lg",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex gap-2",
-						children: [/* @__PURE__ */ jsx(WarningIcon, { className: "w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("p", {
-							className: "text-xs text-amber-800",
-							children: strings.keepPageOpen
-						})]
-					})
+				isUploading && /* @__PURE__ */ jsx(Callout, {
+					tone: "warning",
+					size: "sm",
+					className: "mb-4",
+					children: strings.keepPageOpen
 				}),
 				session.uploadNodes.length > 1 && isUploading && /* @__PURE__ */ jsx(ProgressBar, {
 					value: totalProgress,
@@ -271,6 +277,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					children: [/* @__PURE__ */ jsxs("button", {
 						type: "button",
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
+						"aria-expanded": isFileListExpanded,
 						onClick: () => setIsExpanded(!isFileListExpanded),
 						children: [/* @__PURE__ */ jsx("span", { children: strings.fileCount(session.uploadNodes.length) }), isFileListExpanded ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-4 h-4" })]
 					}), isFileListExpanded && /* @__PURE__ */ jsx("div", {
@@ -294,10 +301,11 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-end",
 					children: [shouldShowSessionCancelButton && /* @__PURE__ */ jsx(Button, {
-						variant: "danger",
+						variant: "outline",
 						size: "xs",
+						className: "*:text-(--theme-error-text)",
 						onClick: handleCancelClick,
-						children: common.cancel
+						children: /* @__PURE__ */ jsx("span", { children: common.cancel })
 					}), showCancelConfirm && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center space-x-2",
 						children: [

package/dist/file-explorer/treeRows.d.ts

@@ -32,4 +32,10 @@ export declare function nextFileLimit(current: number | undefined): number;
 export declare function findRowIndex(rows: readonly TreeRow[], path: string): number;
 /** The next selectable row in `direction`, skipping skeleton and more rows. */
 export declare function stepRow(rows: readonly TreeRow[], from: number, direction: 1 | -1): TreeRow | undefined;
+/** The row's parent: the nearest row above it one level up, or undefined at a root. */
+export declare function parentRow(rows: readonly TreeRow[], index: number): TreeRow | undefined;
+/** An open folder's first child row, or undefined when it shows none yet. */
+export declare function firstChildRow(rows: readonly TreeRow[], index: number): TreeRow | undefined;
+/** The first or last selectable row, for Home and End. */
+export declare function edgeRow(rows: readonly TreeRow[], edge: 'first' | 'last'): TreeRow | undefined;
 export {};

package/dist/file-explorer/treeRows.js

@@ -69,5 +69,23 @@ function stepRow(rows, from, direction) {
 		if (row?.kind === "node") return row;
 	}
 }
+/** The row's parent: the nearest row above it one level up, or undefined at a root. */
+function parentRow(rows, index) {
+	const depth = rows[index]?.depth ?? 0;
+	for (let i = index - 1; i >= 0; i--) {
+		const row = rows[i];
+		if (row?.kind === "node" && row.depth < depth) return row.depth === depth - 1 ? row : void 0;
+	}
+}
+/** An open folder's first child row, or undefined when it shows none yet. */
+function firstChildRow(rows, index) {
+	const depth = rows[index]?.depth ?? 0;
+	const next = rows[index + 1];
+	return next?.kind === "node" && next.depth === depth + 1 ? next : void 0;
+}
+/** The first or last selectable row, for Home and End. */
+function edgeRow(rows, edge) {
+	return edge === "first" ? stepRow(rows, -1, 1) : stepRow(rows, rows.length, -1);
+}
 //#endregion
-export { findRowIndex, flattenTreeRows, nextFileLimit, stepRow };
+export { edgeRow, findRowIndex, firstChildRow, flattenTreeRows, nextFileLimit, parentRow, stepRow };

package/dist/file-explorer/useNearEnd.js

@@ -1,16 +1,13 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useEffectEvent } from "react";
 //#region src/file-explorer/useNearEnd.ts
 /** Fires once the element comes within 100px of the bottom of `root`. */
 function useNearEnd(ref, { active, root, onNear }) {
-	const latestOnNear = useRef(onNear);
-	useEffect(() => {
-		latestOnNear.current = onNear;
-	}, [onNear]);
+	const near = useEffectEvent(onNear);
 	useEffect(() => {
 		const el = ref.current;
 		if (!active || !el) return;
 		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) latestOnNear.current();
+			if (entries.some((entry) => entry.isIntersecting)) near();
 		}, {
 			root,
 			rootMargin: "100px"

package/dist/form/Fields/CheckboxGroupField.js

@@ -5,7 +5,7 @@ import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { fieldOption } from "./fieldOption.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useId, useState } from "react";
 //#region src/form/Fields/CheckboxGroupField.tsx
 function impliedFrom(values, implies = {}) {
 	const result = /* @__PURE__ */ new Set();
@@ -19,6 +19,7 @@ function CheckboxGroupField(props) {
 	const { field, error, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const implies = field.implies;
+	const uid = useId();
 	const rawOf = new Map((field.options ?? []).map((choice) => {
 		const option = fieldOption(choice);
 		return [option.value, option.raw];
@@ -40,26 +41,32 @@ function CheckboxGroupField(props) {
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props, { group: true }),
 		children: /* @__PURE__ */ jsx("div", {
-			className: "flex min-w-0 max-w-lg flex-col gap-1",
-			children: field.options?.map((raw) => {
+			className: "flex min-w-0 max-w-lg flex-col",
+			children: field.options?.map((raw, index) => {
 				const option = fieldOption(raw);
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
+				const labelId = `${uid}label${index}`;
+				const descriptionId = option.description && `${uid}description${index}`;
 				return /* @__PURE__ */ jsxs(FieldOption, {
 					disabled: optionDisabled,
-					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors", !optionDisabled && "hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
+					className: cx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-2 transition-colors", !optionDisabled && "hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
 						onCheckedChange: () => handleToggle(option.value),
 						"aria-invalid": error !== void 0 || void 0,
+						"aria-labelledby": labelId,
+						"aria-describedby": descriptionId || void 0,
 						className: "mt-0.5"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {
-							className: "font-medium leading-tight theme-text",
+							id: labelId,
+							className: "font-medium leading-5 theme-text",
 							children: option.label
 						}), option.description && /* @__PURE__ */ jsx("span", {
+							id: descriptionId,
 							className: "mt-0.5 text-xs leading-snug theme-muted-text",
 							children: option.description
 						})]

package/dist/form/Fields/DurationField.js

@@ -1,7 +1,7 @@
 import { useStrings } from "../../components/Provider.js";
+import { fieldBox } from "../../components/fieldBox.js";
 import { Checkbox } from "../../components/Checkbox.js";
 import { Field, FieldOption } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { formatDurationText, parseDurationText } from "../utils/duration.js";

package/dist/form/Fields/LabelField.js

@@ -10,7 +10,7 @@ function LabelField(props) {
 				whiteSpace: "pre-wrap",
 				...field.size ? { fontSize: `${field.size}px` } : {}
 			},
-			className: cx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
+			className: cx("text-base", field.bold !== false && "font-bold"),
 			children: field.text?.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
 		})
 	});

package/dist/form/Fields/ObjectField.d.ts

@@ -4,4 +4,4 @@ export interface IObjectField extends BaseField {
     type: 'object';
     options: DynamicFormSchema;
 }
-export default function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;
+export default function ObjectField({ field, label, help, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;

package/dist/form/Fields/ObjectField.js

@@ -1,15 +1,16 @@
+import { InfoTip } from "../../components/InfoTip.js";
 import { Section } from "../../components/Section.js";
 import { FieldsFromOptions, resolveMetaOverrides } from "../Form.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/form/Fields/ObjectField.tsx
-function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact }) {
+function ObjectField({ field, label, help, labelPosition, spaceCompact }) {
 	const fieldName = field.name ?? "";
 	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
 	const parentInfo = useMemo(() => ({ fieldNamePrefix: `${fieldName}.` }), [fieldName]);
 	return /* @__PURE__ */ jsx(Section, {
 		title: field.label || label,
-		beside: tooltipComponent,
+		beside: help && /* @__PURE__ */ jsx(InfoTip, { text: help }),
 		collapsible: !field.noCollapse,
 		defaultOpen: !field.collapsed,
 		children: /* @__PURE__ */ jsx(FieldsFromOptions, {

package/dist/form/Fields/StringField.js

@@ -1,16 +1,14 @@
-import { cx } from "../../cx.js";
-import { Field, RevealToggle } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
+import { Field } from "../../components/Field.js";
+import { Input } from "../../components/Input.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/form/Fields/StringField.tsx
 function StringField(props) {
 	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
-	const [revealed, setRevealed] = useState(false);
 	const password = field.type === "password";
 	const fallback = field.default ?? "";
 	const disallowed = useMemo(() => {
@@ -31,29 +29,18 @@ function StringField(props) {
 	};
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
-		children: (control) => {
-			const input = /* @__PURE__ */ jsx("input", {
-				...control,
-				"data-1p-ignore": true,
-				className: cx(fieldBox(), password && "pr-9"),
-				name: field.name,
-				value: password && value === fallback ? "" : value ?? "",
-				type: password && !revealed ? "password" : "text",
-				disabled,
-				placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
-				minLength: field.minLength,
-				maxLength: field.maxLength,
-				onChange: handleChange
-			});
-			return password ? /* @__PURE__ */ jsxs("div", {
-				className: "relative w-full",
-				children: [input, /* @__PURE__ */ jsx(RevealToggle, {
-					revealed,
-					onRevealedChange: setRevealed,
-					disabled
-				})]
-			}) : input;
-		}
+		children: (control) => /* @__PURE__ */ jsx(Input, {
+			...control,
+			"data-1p-ignore": true,
+			name: field.name,
+			value: password && value === fallback ? "" : value ?? "",
+			type: password ? "password" : "text",
+			disabled,
+			placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
+			minLength: field.minLength,
+			maxLength: field.maxLength,
+			onChange: handleChange
+		})
 	});
 }
 //#endregion

package/dist/form/Fields/TextAreaField.js

@@ -1,6 +1,5 @@
-import { cx } from "../../cx.js";
 import { Field } from "../../components/Field.js";
-import { fieldBox } from "../../components/fieldBox.js";
+import { Textarea } from "../../components/Input.js";
 import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
@@ -11,9 +10,9 @@ function TextAreaField(props) {
 	const [value, change] = useFieldValue(field.name ?? "");
 	return /* @__PURE__ */ jsx(Field, {
 		...fieldFrame(props),
-		children: (control) => /* @__PURE__ */ jsx("textarea", {
+		children: (control) => /* @__PURE__ */ jsx(Textarea, {
 			...control,
-			className: cx(fieldBox({ multiline: true }), "h-20 resize-y"),
+			className: "h-20 min-h-20",
 			name: field.name,
 			value: value ?? "",
 			placeholder: getPlaceholder(field.placeholder, field.default),

package/dist/form/Form.js

@@ -3,7 +3,6 @@ import { Loader } from "../components/Loader.js";
 import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
 import { FieldRowContext } from "../components/Field.js";
-import { InfoTip } from "../components/InfoTip.js";
 import { Section } from "../components/Section.js";
 import { parseWizardConfig } from "./Wizard/utils.js";
 import { inputWidth, resolvedFlag } from "./lib.js";
@@ -322,10 +321,7 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 		setValue
 	]);
 	const tooltip = field?.tooltip;
-	const tooltipComponent = useMemo(() => tooltip ? /* @__PURE__ */ jsx(InfoTip, {
-		className: "pr-2",
-		text: typeof tooltip === "string" ? tooltip.replace(/\r/g, "") : tooltip.filter(Boolean).join("\n")
-	}) : null, [tooltip]);
+	const help = (typeof tooltip === "string" ? tooltip.replace(/\r/g, "") : tooltip?.filter(Boolean).join("\n")) || void 0;
 	const path = editing ? [...editing.parent, fieldName] : null;
 	if (field === null || fieldName === "v3") return null;
 	if (reads.hidden) return editing && path && fieldName !== "$meta" ? /* @__PURE__ */ jsx(editing.Row, {
@@ -408,7 +404,7 @@ var FormField = memo(function FormField({ fieldName, optionsField, nested, field
 				disabled: Boolean(fieldObj.disabled),
 				computeOn: computeOn || fieldObj.computeOn,
 				spaceCompact,
-				tooltipComponent
+				help
 			})
 		})
 	});
@@ -625,8 +621,7 @@ function DynamicFormBody({ form, formJSONs: options = {}, reinitialize = false,
 		parsed
 	]);
 	const report = useEffectEvent((values) => {
-		const { editorKeyPostfix: _, ...rest } = values;
-		onValuesChange?.(rest);
+		onValuesChange?.(values);
 	});
 	useEffect(() => form.subscribe({
 		formState: { values: true },

package/dist/form/Wizard/WizardNavigation.js

@@ -44,20 +44,17 @@ function WizardNavigation({ isLastStep, canGoBack, isCurrentStepValid, nextLabel
 			variant: "secondary",
 			onClick: onPrevious,
 			disabled: !canGoBack || isLoading,
-			"aria-label": t.previousStep,
 			children: prevLabel || common.previous
 		}), isLastStep && !onSubmit ? null : isLastStep ? /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: handleSubmit,
 			disabled: !isCurrentStepValid,
 			loading: isLoading,
-			"aria-label": submitLabel,
 			children: submitLabel
 		}) : /* @__PURE__ */ jsx(Button, {
 			variant: "primary",
 			onClick: handleNext,
 			loading: isLoading,
-			"aria-label": t.nextStep,
 			children: nextLabel || common.next
 		})]
 	})] });

package/dist/form/Wizard/utils.js

@@ -1,3 +1,4 @@
+import { isDev } from "../../dev.js";
 //#region src/form/Wizard/utils.ts
 function isWizardMeta(value) {
 	return typeof value === "object" && value !== null && "wizard" in value;
@@ -16,7 +17,7 @@ function parseWizardConfig(options) {
 		stepOrder.push(key);
 	}
 	if (stepOrder.length === 0) {
-		console.warn("Wizard mode enabled but no steps found");
+		if (isDev()) console.warn("Wizard mode enabled but no steps found");
 		return null;
 	}
 	return {

package/dist/form/fieldFrame.d.ts

@@ -2,6 +2,6 @@ import type { FieldProps } from '../components/Field.js';
 import type { FieldComponentProps } from './types/fieldComponentTypes.js';
 /** How a form field's props frame it: its label, help, description, required mark and error,
  *  laid out as the form lays out its fields. Spread on `Field`. */
-export declare function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent, }: FieldComponentProps, { group }?: {
+export declare function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, help }: FieldComponentProps, { group }?: {
     group?: boolean;
 }): Omit<FieldProps, 'children'>;

package/dist/form/fieldFrame.js

@@ -2,10 +2,10 @@ import { resolvedFlag } from "./lib.js";
 //#region src/form/fieldFrame.ts
 /** How a form field's props frame it: its label, help, description, required mark and error,
 *  laid out as the form lays out its fields. Spread on `Field`. */
-function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, tooltipComponent }, { group = false } = {}) {
+function fieldFrame({ field, label, labelPosition, error, disabled, spaceCompact, help }, { group = false } = {}) {
 	return {
 		label,
-		hint: tooltipComponent,
+		help,
 		description: field.description,
 		group,
 		required: !resolvedFlag(field.optional),