@parallelworks/ui 0.43.0 → 0.45.0

package/dist/file-explorer/toasts.js

@@ -1,59 +1,55 @@
-import { BiExpandVertical } from "../icons/bi/BiExpandVertical.js";
-import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
-import { FaAngleUp } from "../icons/fa/FaAngleUp.js";
-import { HiMiniCheckCircle } from "../icons/hi2/HiMiniCheckCircle.js";
-import { IoMdClose } from "../icons/io/IoMdClose.js";
-import { IoCloudUploadOutline } from "../icons/io5/IoCloudUploadOutline.js";
-import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
-import { VscChromeMinimize } from "../icons/vsc/VscChromeMinimize.js";
+import { cx } from "../cx.js";
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon, UploadIcon, WarningIcon } from "../icons.js";
 import { useStrings } from "../components/Provider.js";
-import { formatETA, formatFileSize } from "./lib/utils.js";
-import { clsx } from "clsx";
+import { Button } from "../components/Button.js";
+import { IconButton } from "../components/IconButton.js";
+import { ProgressBar } from "../components/Meter.js";
+import { formatBytes, formatTimeLeft } from "../format.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/file-explorer/toasts.tsx
 function getSessionStatusInfo(session, queueLength, strings) {
 	switch (session.status) {
 		case "queued": return {
-			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
 			title: strings.inQueue(session.queueIndex + 1, queueLength),
 			shortTitle: strings.queuedShort(session.queueIndex + 1, queueLength),
 			bgColor: "bg-blue-100"
 		};
 		case "uploading": return {
-			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 text-blue-600" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 text-blue-600" }),
 			title: strings.uploading,
 			shortTitle: strings.uploading,
 			bgColor: "bg-blue-100"
 		};
 		case "completed": return {
-			icon: /* @__PURE__ */ jsx(HiMiniCheckCircle, { className: "w-5 h-5 text-green-600" }),
+			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: "w-5 h-5 text-green-600" }),
 			title: strings.completeTitle,
-			shortTitle: strings.completeShort,
+			shortTitle: strings.completed,
 			bgColor: "bg-green-100"
 		};
 		case "failed": return {
-			icon: /* @__PURE__ */ jsx(TbAlertTriangle, { className: "w-5 h-5 text-red-600" }),
+			icon: /* @__PURE__ */ jsx(WarningIcon, { className: "w-5 h-5 text-red-600" }),
 			title: strings.failedTitle,
-			shortTitle: strings.failedShort,
+			shortTitle: strings.failed,
 			bgColor: "bg-red-100"
 		};
 		default: return {
-			icon: /* @__PURE__ */ jsx(IoCloudUploadOutline, { className: "w-5 h-5 theme-muted-text" }),
+			icon: /* @__PURE__ */ jsx(UploadIcon, { className: "w-5 h-5 theme-muted-text" }),
 			title: strings.unknownTitle,
 			shortTitle: strings.unknownShort,
 			bgColor: "bg-(--theme-muted-panel-bg)"
 		};
 	}
 }
-function barColor({ isCompleted, isCancelled, isFailed }) {
-	if (isCompleted) return "bg-green-600";
-	if (isCancelled) return "bg-(--theme-muted-text-color)";
-	return isFailed ? "bg-red-600" : "theme-element";
+function barTone({ isCompleted, isCancelled, isFailed }) {
+	if (isCompleted) return "success";
+	if (isCancelled) return "muted";
+	return isFailed ? "error" : "accent";
 }
 function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
-	const strings = useStrings().fileExplorer.upload;
-	const [isHovered, setIsHovered] = useState(false);
+	const { common, fileExplorer } = useStrings();
+	const strings = fileExplorer.upload;
 	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
 	const percentage = fileProgress.percentage || 0;
 	const loadedBytes = fileProgress.loadedBytes || 0;
@@ -62,114 +58,62 @@ function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
 	const isCancelled = fileProgress.status === "cancelled";
 	const isFailed = fileProgress.status === "failed";
 	const isSettled = isCompleted || isCancelled || isFailed;
-	const isUploading = fileProgress.status === "uploading" || !isSettled;
 	const canCancel = !!fileProgress.abortController && !isSettled;
-	const handleCancelClick = (e) => {
+	const stop = (e, then) => {
 		e.stopPropagation();
-		setShowCancelConfirm(true);
-	};
-	const handleConfirmCancel = (e) => {
-		e.stopPropagation();
-		onCancelFile?.();
-		setShowCancelConfirm(false);
-	};
-	const handleKeepUploading = (e) => {
-		e.stopPropagation();
-		setShowCancelConfirm(false);
+		then();
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-1",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between text-xs",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "text-xs theme-muted-text text-wrap max-w-[75%]",
-				children: fileName
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "text-xs theme-muted-text text-right self-end",
-				children: [
-					isCancelled && strings.cancelled,
-					isCompleted && strings.completed,
-					isFailed && strings.failed,
-					isUploading && `${percentage.toFixed(2)}%`
-				]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-1",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					role: "none",
-					className: "relative flex-1",
-					onMouseEnter: () => setIsHovered(true),
-					onMouseLeave: () => setIsHovered(false),
-					children: /* @__PURE__ */ jsxs("div", {
-						className: clsx("w-full bg-(--theme-border) rounded-full overflow-hidden transition-all duration-300 ease-in-out flex items-center", isHovered && !isCompleted ? "h-6" : "h-2"),
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("h-full transition-all duration-300 relative flex items-center justify-center", barColor({
-								isCompleted,
-								isCancelled,
-								isFailed
-							}), isHovered && "opacity-80"),
-							style: { width: `${percentage}%` }
-						}), isHovered && !isCompleted && totalBytes > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-							className: "absolute inset-0 flex items-center justify-center text-xs whitespace-nowrap p-0.5 z-10",
-							style: {
-								WebkitClipPath: `inset(0 ${100 - percentage}% 0 0)`,
-								color: "white"
-							},
-							children: [
-								formatFileSize(loadedBytes),
-								" / ",
-								formatFileSize(totalBytes)
-							]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "absolute inset-0 flex items-center justify-center text-xs whitespace-nowrap p-0.5 z-10",
-							style: {
-								WebkitClipPath: `inset(0 0 0 ${percentage}%)`,
-								color: "black"
-							},
-							children: [
-								formatFileSize(loadedBytes),
-								" / ",
-								formatFileSize(totalBytes)
-							]
-						})] })]
-					})
+		className: "flex items-end gap-1",
+		children: [
+			/* @__PURE__ */ jsx(ProgressBar, {
+				className: "flex-1",
+				value: percentage,
+				tone: barTone({
+					isCompleted,
+					isCancelled,
+					isFailed
 				}),
-				!showCancelConfirm && canCancel && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": `Cancel ${fileName}`,
-					className: "p-1 rounded-full hover:bg-red-100 relative cursor-pointer",
-					onClick: handleCancelClick,
-					title: `Cancel ${fileName}`,
-					children: /* @__PURE__ */ jsx(IoMdClose, { className: "w-4 h-4 text-red-500 hover:text-red-700" })
-				}),
-				showCancelConfirm && canCancel && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "text-xs theme-muted-text whitespace-nowrap",
-							children: "Cancel?"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "px-1.5 py-0.5 text-xs bg-(--theme-border) theme-muted-text rounded hover:theme-hover",
-							onClick: handleKeepUploading,
-							children: "No"
+				label: fileName,
+				status: isCancelled ? strings.cancelled : isCompleted ? strings.completed : isFailed ? strings.failed : void 0,
+				detail: !isSettled && totalBytes > 0 ? `${formatBytes(loadedBytes)} / ${formatBytes(totalBytes)}` : void 0
+			}),
+			!showCancelConfirm && canCancel && /* @__PURE__ */ jsx(IconButton, {
+				size: "xs",
+				label: strings.cancelFile(fileName),
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				onClick: (e) => stop(e, () => setShowCancelConfirm(true))
+			}),
+			showCancelConfirm && canCancel && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-xs theme-muted-text whitespace-nowrap",
+						children: strings.confirmCancelFile
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "xs",
+						onClick: (e) => stop(e, () => setShowCancelConfirm(false)),
+						children: common.no
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						size: "xs",
+						onClick: (e) => stop(e, () => {
+							onCancelFile?.();
+							setShowCancelConfirm(false);
 						}),
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "!px-1.5 !py-0.5 text-xs btn btn-destructive cursor-pointer",
-							onClick: handleConfirmCancel,
-							children: "Yes"
-						})
-					]
-				})
-			]
-		})]
+						children: common.yes
+					})
+				]
+			})
+		]
 	});
 }
 function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
-	const strings = useStrings().fileExplorer.upload;
+	const { common, fileExplorer } = useStrings();
+	const strings = fileExplorer.upload;
 	const [isToastExpanded, setIsToastExpanded] = useState(false);
 	const [isFileListExpanded, setIsExpanded] = useState(session.uploadNodes.length <= 3);
 	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
@@ -181,7 +125,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 	const isUploading = !isCompleted && !isCancelled && !isFailed;
 	const totalProgress = session.progress?.overallProgress || 0;
 	const totalSize = session.progress?.totalSizeBytes || 0;
-	const sessionBarColor = barColor({
+	const sessionTone = barTone({
 		isCompleted,
 		isCancelled,
 		isFailed
@@ -214,7 +158,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 			children: [!isToastExpanded && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-3 flex-1",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: clsx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
+					className: cx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
 					children: statusInfo.icon
 				}), /* @__PURE__ */ jsxs("div", {
 					role: "none",
@@ -237,35 +181,25 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 									className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 									onClick: handleExpandClick,
 									title: strings.expandDetails,
-									children: /* @__PURE__ */ jsx(BiExpandVertical, { className: "w-4 h-4" })
+									children: /* @__PURE__ */ jsx(ExpandVerticalIcon, { className: "w-4 h-4" })
 								})]
 							})]
 						}),
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ jsxs("div", {
+							children: [/* @__PURE__ */ jsx("div", {
 								className: "text-xs theme-muted-text mt-0.5",
-								children: [
-									session.progress?.completedFiles || 0,
-									" / ",
-									session.progress?.totalFiles || 0,
-									" ",
-									"files done"
-								]
+								children: strings.filesDone(session.progress?.completedFiles || 0, session.progress?.totalFiles || 0)
 							}), /* @__PURE__ */ jsx("div", {
 								className: "text-xs theme-muted-text mt-0.5",
-								children: showETA && formatETA(estimatedSecondsLeft)
+								children: showETA && (formatTimeLeft(estimatedSecondsLeft) ?? strings.almostDone)
 							})]
 						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "mt-1 flex items-center gap-2",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "flex-1 h-1.5 bg-(--theme-border) rounded-full overflow-hidden",
-								children: /* @__PURE__ */ jsx("div", {
-									className: clsx("h-full transition-all duration-300", sessionBarColor),
-									style: { width: `${totalProgress}%` }
-								})
-							})
+						/* @__PURE__ */ jsx(ProgressBar, {
+							className: "mt-1",
+							value: totalProgress,
+							tone: sessionTone,
+							"aria-label": strings.overallProgress
 						})
 					]
 				})]
@@ -275,22 +209,14 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
+							className: cx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
 							children: statusInfo.icon
 						}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
 							className: "text-sm font-semibold theme-text",
 							children: statusInfo.title
-						}), /* @__PURE__ */ jsxs("p", {
+						}), /* @__PURE__ */ jsx("p", {
 							className: "text-xs theme-muted-text",
-							children: [
-								uploadingFiles.length > 0 && `${uploadingFiles.length} uploading `,
-								"(",
-								session.progress?.completedFiles || 0,
-								" / ",
-								session.progress?.totalFiles || 0,
-								" ",
-								"done)"
-							]
+							children: strings.progress(uploadingFiles.length, session.progress?.completedFiles || 0, session.progress?.totalFiles || 0)
 						})] })]
 					}), /* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -298,7 +224,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer mr-2",
 						onClick: handleExpandClick,
 						title: strings.minimizeDetails,
-						children: /* @__PURE__ */ jsx(VscChromeMinimize, { className: "w-4 h-4" })
+						children: /* @__PURE__ */ jsx(MinimizeIcon, { className: "w-4 h-4" })
 					})]
 				}),
 				/* @__PURE__ */ jsx("div", {
@@ -315,11 +241,11 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ jsx("span", { children: session.uploadNodes.length > 1 ? strings.totalSize : strings.size }), /* @__PURE__ */ jsx("span", { children: formatFileSize(totalSize) })]
+								children: [/* @__PURE__ */ jsx("span", { children: session.uploadNodes.length > 1 ? strings.totalSize : strings.size }), /* @__PURE__ */ jsx("span", { children: formatBytes(totalSize) })]
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "flex justify-between",
-								children: [/* @__PURE__ */ jsx("span", { children: strings.eta }), showETA ? formatETA(estimatedSecondsLeft) : strings.calculating]
+								children: [/* @__PURE__ */ jsx("span", { children: strings.eta }), showETA ? formatTimeLeft(estimatedSecondsLeft) ?? strings.almostDone : strings.calculating]
 							})
 						]
 					})
@@ -328,24 +254,17 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					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(TbAlertTriangle, { className: "w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5" }), /* @__PURE__ */ jsx("p", {
+						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: "Please don't refresh this page during upload to prevent any data loss."
+							children: strings.keepPageOpen
 						})]
 					})
 				}),
-				session.uploadNodes.length > 1 && isUploading && /* @__PURE__ */ jsxs("div", {
-					className: "space-y-2",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex items-center justify-between text-xs theme-muted-text",
-						children: [/* @__PURE__ */ jsx("span", { children: strings.overallProgress }), /* @__PURE__ */ jsxs("span", { children: [totalProgress.toFixed(1), "%"] })]
-					}), /* @__PURE__ */ jsx("div", {
-						className: "h-2 w-full bg-(--theme-border) rounded-full overflow-hidden",
-						children: /* @__PURE__ */ jsx("div", {
-							className: clsx("h-full transition-all duration-300", sessionBarColor),
-							style: { width: `${totalProgress}%` }
-						})
-					})]
+				session.uploadNodes.length > 1 && isUploading && /* @__PURE__ */ jsx(ProgressBar, {
+					value: totalProgress,
+					tone: sessionTone,
+					size: "lg",
+					label: strings.overallProgress
 				}),
 				session.uploadNodes.length > 1 && /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col bg-(--theme-muted-panel-bg) rounded py-2 px-3 space-y-2 transition-all duration-300",
@@ -353,7 +272,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 						type: "button",
 						className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
 						onClick: () => setIsExpanded(!isFileListExpanded),
-						children: [/* @__PURE__ */ jsxs("span", { children: [session.uploadNodes.length, " files"] }), isFileListExpanded ? /* @__PURE__ */ jsx(FaAngleUp, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(FaAngleDown, { className: "w-4 h-4" })]
+						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", {
 						className: "max-h-48 overflow-y-auto space-y-2",
 						children: session.uploadNodes.map((node) => {
@@ -374,29 +293,29 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-end",
-					children: [shouldShowSessionCancelButton && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "!px-2 !py-1 text-xs btn btn-destructive cursor-pointer transition-colors",
+					children: [shouldShowSessionCancelButton && /* @__PURE__ */ jsx(Button, {
+						variant: "danger",
+						size: "xs",
 						onClick: handleCancelClick,
-						children: "Cancel"
+						children: common.cancel
 					}), showCancelConfirm && /* @__PURE__ */ jsxs("div", {
 						className: "flex items-center space-x-2",
 						children: [
 							/* @__PURE__ */ jsx("span", {
 								className: "text-xs theme-muted-text",
-								children: "Cancel all uploading files?"
+								children: strings.confirmCancelAll
 							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "!px-2 !py-1 text-xs bg-(--theme-border) theme-muted-text rounded hover:theme-hover",
+							/* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								size: "xs",
 								onClick: handleKeepUploading,
-								children: "No"
+								children: common.no
 							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "!px-2 !py-1 text-xs btn btn-destructive cursor-pointer",
+							/* @__PURE__ */ jsx(Button, {
+								variant: "danger",
+								size: "xs",
 								onClick: handleConfirmCancel,
-								children: "Yes"
+								children: common.yes
 							})
 						]
 					})]

package/dist/form/Fields/BooleanField.js

@@ -1,11 +1,12 @@
 import { Tooltip } from "../../components/Tooltip.js";
 import { Switch } from "../../components/Switch.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { Field } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/BooleanField.tsx
 function BooleanField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const handleChange = (val) => {
 		if (disabled) return;
@@ -15,25 +16,22 @@ function BooleanField(props) {
 	const onOption = field.options ? String(field.options.onOption ?? true) : true;
 	const offOption = field.options ? String(field.options.offOption ?? false) : false;
 	const checked = value === true || value === "true" || value === onOption;
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: true,
-		label,
-		tooltipComponent,
-		description: field.description,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Tooltip, {
+	const stateName = (option) => typeof option === "string" ? option.charAt(0).toUpperCase() + option.slice(1).toLowerCase() : void 0;
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		required: false,
+		children: (control) => /* @__PURE__ */ jsx(Tooltip, {
 			content: field.disabled_message,
 			disabled: !disabled,
 			children: /* @__PURE__ */ jsx(Switch, {
-				id,
+				...control,
 				nativeButton: true,
 				render: /* @__PURE__ */ jsx("button", { type: "button" }),
 				checked,
 				onCheckedChange: (on) => handleChange(on ? onOption : offOption),
-				disabled,
-				"aria-describedby": describedBy,
-				"aria-invalid": missing || void 0
+				onLabel: stateName(onOption),
+				offLabel: stateName(offOption),
+				disabled
 			})
 		})
 	});

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

@@ -15,4 +15,4 @@ export interface ICheckboxGroupField extends BaseField {
      */
     implies?: Record<string, string[]>;
 }
-export default function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<ICheckboxGroupField>): import("react").JSX.Element;
+export default function CheckboxGroupField(props: FieldComponentProps<ICheckboxGroupField>): import("react").JSX.Element;

package/dist/form/Fields/CheckboxGroupField.js

@@ -1,7 +1,9 @@
-import { FieldWrapper } from "../FieldWrapper.js";
+import { cx } from "../../cx.js";
+import { Checkbox } from "../../components/Checkbox.js";
+import { Field, FieldOption } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { fieldOption } from "./fieldOption.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/form/Fields/CheckboxGroupField.tsx
@@ -13,7 +15,8 @@ function impliedFrom(values, implies = {}) {
 function union(manual, forced) {
 	return [...manual, ...[...forced].filter((v) => !manual.includes(v))];
 }
-function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+function CheckboxGroupField(props) {
+	const { field, error, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const implies = field.implies;
 	const rawOf = new Map((field.options ?? []).map((choice) => {
@@ -34,28 +37,23 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 		change(next);
 		onChange?.(next);
 	};
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
-		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("fieldset", {
-			"aria-labelledby": labelId,
-			"aria-describedby": describedBy,
+	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) => {
 				const option = fieldOption(raw);
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
-				return /* @__PURE__ */ jsxs("label", {
-					className: clsx("-mx-2 flex items-start gap-2.5 rounded-md px-2 py-1.5 transition-colors", optionDisabled ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-(--theme-hover) has-[:focus-visible]:bg-(--theme-hover)"),
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "checkbox",
+				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)"),
+					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
-						onChange: () => handleToggle(option.value),
-						className: clsx("h-4 min-h-0 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+						onCheckedChange: () => handleToggle(option.value),
+						"aria-invalid": error !== void 0 || void 0,
+						className: "mt-0.5"
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {

package/dist/form/Fields/ColorField.js

@@ -1,26 +1,26 @@
-import { FieldWrapper } from "../FieldWrapper.js";
+import { cx } from "../../cx.js";
+import { fieldBox } from "../../components/fieldBox.js";
+import { Field } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/ColorField.tsx
 function ColorField(props) {
-	const { field, label, labelPosition, onChange, tooltipComponent, spaceCompact } = props;
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const handleChange = (e) => {
 		onChange?.(e.target.value);
 		change(e.target.value);
 	};
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
-		children: ({ id }) => /* @__PURE__ */ jsx("input", {
-			className: "theme-input h-8 w-18 rounded border border-neutral-400 placeholder:text-xs",
-			id,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => /* @__PURE__ */ jsx("input", {
+			...control,
+			className: cx(fieldBox(), "w-18 cursor-pointer p-1"),
 			name: field.name,
 			value: value || "#fbbf24",
 			type: "color",
+			disabled,
 			onChange: handleChange
 		})
 	});

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

@@ -10,4 +10,4 @@ export interface IDropdownField extends BaseField {
     allowCustomValue?: boolean;
     placeholder?: string;
 }
-export default function DropdownField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IDropdownField>): import("react").JSX.Element;
+export default function DropdownField(props: FieldComponentProps<IDropdownField>): import("react").JSX.Element;