@parallelworks/ui 0.18.0 → 0.19.1

package/dist/file-explorer/toasts.js

@@ -0,0 +1,400 @@
+import { useStrings } from "../components/Provider.js";
+import { AlertIcon, AngleDownIcon, AngleUpIcon, CloseIcon, CloudUploadIcon, ExpandVerticalIcon, MinimizeIcon, SuccessIcon } from "../icons.js";
+import { formatETA, formatFileSize } from "./lib/utils.js";
+import cx from "classnames";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-explorer/toasts.tsx
+function getSessionStatusInfo(session, queueLength, strings) {
+	switch (session.status) {
+		case "queued": return {
+			icon: /* @__PURE__ */ jsx(CloudUploadIcon, { 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(CloudUploadIcon, { className: "w-5 h-5 text-blue-600" }),
+			title: strings.uploading,
+			shortTitle: strings.uploading,
+			bgColor: "bg-blue-100"
+		};
+		case "completed": return {
+			icon: /* @__PURE__ */ jsx(SuccessIcon, { className: "w-5 h-5 text-green-600" }),
+			title: strings.completeTitle,
+			shortTitle: strings.completeShort,
+			bgColor: "bg-green-100"
+		};
+		case "failed": return {
+			icon: /* @__PURE__ */ jsx(AlertIcon, { className: "w-5 h-5 text-red-600" }),
+			title: strings.failedTitle,
+			shortTitle: strings.failedShort,
+			bgColor: "bg-red-100"
+		};
+		default: return {
+			icon: /* @__PURE__ */ jsx(CloudUploadIcon, { className: "w-5 h-5 theme-muted-text" }),
+			title: strings.unknownTitle,
+			shortTitle: strings.unknownShort,
+			bgColor: "bg-(--theme-muted-panel-bg)"
+		};
+	}
+}
+function FileProgressBar({ fileProgress, fileName, progressBarColorScheme, onCancelFile }) {
+	const strings = useStrings().fileExplorer.upload;
+	const [isHovered, setIsHovered] = useState(false);
+	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+	const percentage = fileProgress?.percentage || 0;
+	const loadedBytes = fileProgress?.loadedBytes || 0;
+	const totalBytes = fileProgress.fileSizeBytes || fileProgress?.totalBytes || 0;
+	const isCompleted = percentage === 100 || fileProgress.status === "completed";
+	const isCancelled = fileProgress.status === "cancelled";
+	const isFailed = fileProgress.status === "failed";
+	const isUploading = fileProgress.status === "uploading" || !isCompleted && !isCancelled && !isFailed;
+	const canCancel = isUploading && fileProgress.abortController && !isCompleted && !isCancelled && !isFailed;
+	const barColor = isCompleted ? progressBarColorScheme.completed : isCancelled ? progressBarColorScheme.cancelled : isFailed ? progressBarColorScheme.failed : progressBarColorScheme.uploading;
+	const handleCancelClick = (e) => {
+		e.stopPropagation();
+		setShowCancelConfirm(true);
+	};
+	const handleConfirmCancel = (e) => {
+		e.stopPropagation();
+		onCancelFile?.();
+		setShowCancelConfirm(false);
+	};
+	const handleKeepUploading = (e) => {
+		e.stopPropagation();
+		setShowCancelConfirm(false);
+	};
+	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: cx("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: cx("h-full transition-all duration-300 relative flex items-center justify-center", barColor, isHovered && "opacity-80"),
+							style: { width: `${percentage}%` }
+						}), isHovered && !isCompleted && totalBytes > 0 && /* @__PURE__ */ jsxs(Fragment$1, { 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)
+							]
+						})] })]
+					})
+				}),
+				!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(CloseIcon, { 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"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: "!px-1.5 !py-0.5 text-xs btn btn-destructive cursor-pointer",
+							onClick: handleConfirmCancel,
+							children: "Yes"
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
+	const strings = useStrings().fileExplorer.upload;
+	const [isToastExpanded, setIsToastExpanded] = useState(false);
+	const [isFileListExpanded, setIsExpanded] = useState(session.uploadNodes.length <= 3);
+	const [showCancelConfirm, setShowCancelConfirm] = useState(false);
+	const statusInfo = useMemo(() => getSessionStatusInfo(session, queueLength, strings), [
+		session,
+		queueLength,
+		strings
+	]);
+	const targetPath = `${session.targetPath}/`;
+	const isQueued = session.status === "queued";
+	const isCompleted = session.status === "completed";
+	const isCancelled = session.status === "cancelled";
+	const isFailed = session.status === "failed";
+	const isUploading = session.status === "uploading" || !isCompleted && !isCancelled && !isFailed;
+	const totalProgress = session.progress?.overallProgress || 0;
+	const totalSize = session.progress?.totalSizeBytes || 0;
+	const progressBarColorScheme = {
+		uploading: "theme-element",
+		completed: "bg-green-600",
+		failed: "bg-red-600",
+		cancelled: "bg-(--theme-muted-text-color)"
+	};
+	const barColor = isCompleted ? progressBarColorScheme.completed : isCancelled ? progressBarColorScheme.cancelled : isFailed ? progressBarColorScheme.failed : progressBarColorScheme.uploading;
+	const allFiles = session.progress?.allFiles ? Array.from(session.progress.allFiles.values()) : [];
+	const uploadingFiles = session.progress?.allFiles ? Array.from(session.progress.allFiles.values()).filter((file) => file.percentage && file.percentage >= 0 && file.percentage < 100) : [];
+	const shouldShowSessionCancelButton = !showCancelConfirm && (isUploading || isQueued) && session.uploadNodes.length > 1;
+	const estimatedSecondsLeft = session.progress?.estimatedSecondsLeft;
+	const showETA = isUploading && estimatedSecondsLeft && estimatedSecondsLeft > 0;
+	const handleExpandClick = (e) => {
+		e.stopPropagation();
+		setIsToastExpanded(!isToastExpanded);
+	};
+	const handleCancelClick = () => {
+		setShowCancelConfirm(true);
+	};
+	const handleConfirmCancel = () => {
+		onCancel?.();
+		setShowCancelConfirm(false);
+	};
+	const handleKeepUploading = () => {
+		setShowCancelConfirm(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col w-full transition-all duration-300 ease-in-out overflow-hidden",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col w-full space-y-3",
+			children: [!isToastExpanded && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 flex-1",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
+					children: statusInfo.icon
+				}), /* @__PURE__ */ jsxs("div", {
+					role: "none",
+					className: "flex-1 cursor-pointer",
+					onClick: handleExpandClick,
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsx("h3", {
+								className: "text-sm font-medium theme-text truncate",
+								children: statusInfo.shortTitle
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex items-center justify-between gap-2",
+								children: [/* @__PURE__ */ jsxs("div", {
+									className: "text-xs theme-muted-text ml-2",
+									children: [totalProgress.toFixed(1), "%"]
+								}), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									"aria-label": strings.expandDetails,
+									className: "flex items-center justify-between text-xs theme-muted-text hover:theme-text cursor-pointer",
+									onClick: handleExpandClick,
+									title: strings.expandDetails,
+									children: /* @__PURE__ */ jsx(ExpandVerticalIcon, { className: "w-4 h-4" })
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "text-xs theme-muted-text mt-0.5",
+								children: [
+									session.progress?.completedFiles || 0,
+									" / ",
+									session.progress?.totalFiles || 0,
+									" ",
+									"files done"
+								]
+							}), /* @__PURE__ */ jsx("div", {
+								className: "text-xs theme-muted-text mt-0.5",
+								children: showETA && formatETA(estimatedSecondsLeft)
+							})]
+						}),
+						/* @__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: cx("h-full transition-all duration-300", barColor),
+									style: { width: `${totalProgress}%` }
+								})
+							})
+						})
+					]
+				})]
+			}), isToastExpanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							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", {
+							className: "text-xs theme-muted-text",
+							children: [
+								uploadingFiles.length > 0 && `${uploadingFiles.length} uploading `,
+								"(",
+								session.progress?.completedFiles || 0,
+								" / ",
+								session.progress?.totalFiles || 0,
+								" ",
+								"done)"
+							]
+						})] })]
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": strings.minimizeDetails,
+						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(MinimizeIcon, { className: "w-4 h-4" })
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 p-3 bg-(--theme-muted-panel-bg) rounded-lg",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "text-xs theme-muted-text space-y-1",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ jsx("span", { children: strings.destination }), /* @__PURE__ */ jsx("span", {
+									className: "font-medium truncate",
+									children: targetPath
+								})]
+							}),
+							/* @__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) })]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between",
+								children: [/* @__PURE__ */ jsx("span", { children: strings.eta }), showETA ? formatETA(estimatedSecondsLeft) : strings.calculating]
+							})
+						]
+					})
+				}),
+				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(AlertIcon, { 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."
+						})]
+					})
+				}),
+				session.uploadNodes.length > 1 && (isUploading || isQueued) && /* @__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: cx("h-full transition-all duration-300", barColor),
+							style: { width: `${totalProgress}%` }
+						})
+					})]
+				}),
+				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",
+					children: [/* @__PURE__ */ jsxs("button", {
+						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(AngleUpIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(AngleDownIcon, { className: "w-4 h-4" })]
+					}), isFileListExpanded && /* @__PURE__ */ jsx("div", {
+						className: "max-h-48 overflow-y-auto space-y-2",
+						children: session.uploadNodes.map((node) => {
+							const fileProgress = session.progress?.allFiles?.get(node.relativePath);
+							if (!fileProgress) return null;
+							return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FileProgressBar, {
+								fileProgress,
+								fileName: node.name,
+								progressBarColorScheme,
+								onCancelFile: () => onCancelFile?.(node.relativePath)
+							}) }, node.relativePath);
+						})
+					})]
+				}),
+				session.uploadNodes.length === 1 && allFiles.length > 0 && /* @__PURE__ */ jsx(FileProgressBar, {
+					fileProgress: allFiles[0],
+					fileName: session.uploadNodes[0].name,
+					progressBarColorScheme,
+					onCancelFile: () => onCancelFile?.(session.uploadNodes[0].relativePath)
+				}),
+				/* @__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",
+						onClick: handleCancelClick,
+						children: "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?"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "!px-2 !py-1 text-xs bg-(--theme-border) theme-muted-text rounded hover:theme-hover",
+								onClick: handleKeepUploading,
+								children: "No"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "!px-2 !py-1 text-xs btn btn-destructive cursor-pointer",
+								onClick: handleConfirmCancel,
+								children: "Yes"
+							})
+						]
+					})]
+				})
+			] })]
+		})
+	});
+}
+//#endregion
+export { UploadSessionToast };

package/dist/file-explorer/treeRows.js

@@ -0,0 +1,73 @@
+import { getNodeChildren } from "./lib/utils.js";
+/** `stepRow` skips these, so neither kind is ever an arrow-key stop. */
+function statusRow(kind, node, depth, hiddenFiles = 0) {
+	return {
+		kind,
+		key: `${node.path}\u0000${kind}`,
+		node,
+		depth,
+		posInSet: 1,
+		setSize: 1,
+		isExpanded: false,
+		hiddenFiles
+	};
+}
+function countFiles(children) {
+	return children.reduce((total, child) => child.type === "directory" ? total : total + 1, 0);
+}
+/** Flattens the tree to exactly the rows that should be on screen, so the sidebar
+*  can be windowed and keyboard navigation can move by index instead of by DOM. */
+function flattenTreeRows(roots, parentToChildrenMap, expandedPaths, options) {
+	const rows = [];
+	const visit = (node, index, setSize, depth) => {
+		const isDirectory = node.type === "directory";
+		const children = isDirectory ? getNodeChildren(parentToChildrenMap, node.path) : [];
+		const isExpanded = isDirectory && expandedPaths.has(node.path);
+		rows.push({
+			kind: "node",
+			key: node.path,
+			node,
+			depth,
+			posInSet: index + 1,
+			setSize,
+			isExpanded
+		});
+		if (!isExpanded) return;
+		if (options?.loadingPaths?.has(node.path) && children.length === 0) {
+			rows.push(statusRow("skeleton", node, depth + 1));
+			return;
+		}
+		const limit = options?.fileLimits?.get(node.path) ?? 50;
+		walkChildren(children, depth + 1, limit);
+		const hiddenFiles = Math.max(0, countFiles(children) - limit);
+		if (hiddenFiles > 0 || options?.incompletePaths?.has(node.path)) rows.push(statusRow("more", node, depth + 1, hiddenFiles));
+	};
+	const walkChildren = (children, depth, limit) => {
+		let files = 0;
+		children.forEach((child, index) => {
+			if (child.type !== "directory") {
+				files += 1;
+				if (files > limit) return;
+			}
+			visit(child, index, children.length, depth);
+		});
+	};
+	walkChildren(roots, 0, 50);
+	return rows;
+}
+function nextFileLimit(current) {
+	return (current ?? 50) + 50;
+}
+/** Index of `path` among the visible rows, or -1. */
+function findRowIndex(rows, path) {
+	return rows.findIndex((row) => row.kind === "node" && row.node.path === path);
+}
+/** The next selectable row in `direction`, skipping skeleton and more rows. */
+function stepRow(rows, from, direction) {
+	for (let i = from + direction; i >= 0 && i < rows.length; i += direction) {
+		const row = rows[i];
+		if (row?.kind === "node") return row;
+	}
+}
+//#endregion
+export { findRowIndex, flattenTreeRows, nextFileLimit, stepRow };

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

@@ -1,6 +1,6 @@
 import { type RefObject } from 'react';
 /** Fires once the element comes within 100px of the bottom of `root`. */
-export declare function useNearEnd(ref: RefObject<Element | null>, { active, root, onNear, }: {
+export declare function useNearEnd(ref: RefObject<Element | null>, { active, root, onNear }: {
     active: boolean;
     root: HTMLElement | null;
     onNear: () => void;

package/dist/file-explorer/useNearEnd.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } 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]);
+	useEffect(() => {
+		const el = ref.current;
+		if (!active || !el) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) latestOnNear.current();
+		}, {
+			root,
+			rootMargin: "100px"
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [
+		ref,
+		active,
+		root
+	]);
+}
+//#endregion
+export { useNearEnd };

package/dist/form/FieldWrapper.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { Optional } from './types/workflow-schema.js';
+import type { FieldFlag } from './types/fieldTypes.js';
 export interface FieldLabelBinding {
     id: string;
     labelId: string;
@@ -11,6 +11,6 @@ export declare function FieldWrapper({ label, tooltipComponent, description, lab
     description?: string | undefined;
     labelPosition?: 'left' | 'top' | undefined;
     spaceCompact?: boolean | undefined;
-    optional?: Optional | undefined;
+    optional?: FieldFlag | undefined;
     children: React.ReactNode | ((binding: FieldLabelBinding) => React.ReactNode);
 }): React.JSX.Element;

package/dist/form/FieldWrapper.js

@@ -0,0 +1,54 @@
+import { RequiredMark } from "../components/RequiredMark.js";
+import { FieldProvider } from "./fieldContext.js";
+import { resolvedFlag } from "./lib.js";
+import cx from "classnames";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/FieldWrapper.tsx
+function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
+	const isOptional = Boolean(resolvedFlag(optional));
+	const uid = useId();
+	const id = `${uid}control`;
+	const labelId = `${uid}label`;
+	const descriptionId = description ? `${uid}description` : void 0;
+	const field = useMemo(() => ({
+		required: !isOptional,
+		id,
+		labelId,
+		descriptionId
+	}), [
+		isOptional,
+		id,
+		labelId,
+		descriptionId
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			id: labelId,
+			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
+			children: [
+				label,
+				!isOptional && /* @__PURE__ */ jsx(RequiredMark, {}),
+				tooltipComponent
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(FieldProvider, {
+				value: field,
+				children: typeof children === "function" ? children({
+					id,
+					labelId,
+					describedBy: descriptionId
+				}) : children
+			}), description && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "text-xs theme-muted-text mt-1 leading-relaxed",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+export { FieldWrapper };

package/dist/form/Fields/BooleanField.js

@@ -0,0 +1,51 @@
+import SwitchToggle from "../../components/SwitchToggle.js";
+import { FieldWrapper } from "../FieldWrapper.js";
+import { jsx } from "react/jsx-runtime";
+import { useField, useFormikContext } from "formik";
+//#region src/form/Fields/BooleanField.tsx
+function BooleanField(props) {
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
+	const [fieldState] = useField(field.name);
+	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const handleChange = (val) => {
+		if (disabled) return;
+		if (onChange) onChange(val);
+		setFieldTouched(field.name, true);
+		setFieldValue(field.name, val);
+		setFormDirty(true);
+	};
+	const value = fieldState.value;
+	const options = field.options ? {
+		onOption: String(field.options.onOption ?? true),
+		offOption: String(field.options.offOption ?? false)
+	} : void 0;
+	const displayLabel = (option) => option.charAt(0).toUpperCase() + option.slice(1).toLowerCase();
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		optional: true,
+		label,
+		tooltipComponent: /* @__PURE__ */ jsx("div", { children: tooltipComponent }),
+		description: field.description,
+		labelPosition,
+		spaceCompact,
+		children: ({ id, describedBy }) => options ? /* @__PURE__ */ jsx(SwitchToggle, {
+			id,
+			"aria-describedby": describedBy,
+			onChange: (on) => handleChange(on ? options.onOption : options.offOption),
+			value: value === true || value === options.onOption,
+			yesLabel: displayLabel(options.onOption),
+			noLabel: displayLabel(options.offOption),
+			disabled,
+			invalid: missing
+		}) : /* @__PURE__ */ jsx(SwitchToggle, {
+			id,
+			"aria-describedby": describedBy,
+			datatip: field.disabled_message,
+			onChange: handleChange,
+			value: value === true || value === "true",
+			disabled,
+			invalid: missing
+		})
+	});
+}
+//#endregion
+export { BooleanField as default };