@parallelworks/ui 0.41.0 → 0.43.0

package/dist/file-explorer/TreeView.js

@@ -1,16 +1,15 @@
-import { useStrings } from "../components/Provider.js";
 import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
 import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
 import { FaRegFolderOpen } from "../icons/fa6/FaRegFolderOpen.js";
 import { positionKeys } from "../components/keys.js";
+import { useStrings } from "../components/Provider.js";
 import { getParentPath } from "./lib/utils.js";
 import { canPreview } from "./FilePreview/previewType.js";
 import { getNodeIcon } from "./helpers.js";
 import { findRowIndex, flattenTreeRows, nextFileLimit, stepRow } from "./treeRows.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import Skeleton from "react-loading-skeleton";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/file-explorer/TreeView.tsx
 /** 9px margin + 12px padding, per level. */
@@ -183,7 +182,7 @@ function indentStyle(depth, isDirectory) {
 }
 function IndentGuides({ depth }) {
 	if (depth === 0) return null;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: positionKeys(depth, "indent").map((key, level) => /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(Fragment, { children: positionKeys(depth, "indent").map((key, level) => /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "pointer-events-none absolute inset-y-0 w-px bg-(--theme-border)/60",
 		style: { left: GUIDE_OFFSET + level * INDENT_PER_LEVEL }
@@ -195,7 +194,7 @@ function RowIcons({ isDirectory, isExpanded, customIcon }) {
 		children: customIcon
 	});
 	const folder = isExpanded ? /* @__PURE__ */ jsx(FaRegFolderOpen, { className: "h-4 w-4 mr-1 text-sky-500" }) : /* @__PURE__ */ jsx(FaRegFolder, { className: "h-4 w-4 mr-1 text-sky-500/80" });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FaAngleRight, { className: cx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FaAngleRight, { className: clsx("h-3.5 w-3.5 shrink-0 theme-muted-text transition-transform duration-150", isExpanded && "rotate-90") }), customIcon ?? folder] });
 }
 /** Click-only, unlike the table's sentinel: the tree is a navigation aid, and
 *  growing it automatically as the user scrolls is what the cap exists to prevent. */
@@ -213,16 +212,15 @@ function TreeMoreRow({ depth, hiddenFiles, partial, loading, failed, onReveal })
 			style: { paddingLeft: depth * INDENT_PER_LEVEL + ROW_PAD_FILE },
 			children: loading ? /* @__PURE__ */ jsx("span", { children: t.loadingMore }) : /* @__PURE__ */ jsx("button", {
 				type: "button",
-				className: cx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
+				className: clsx("cursor-pointer underline", failed ? "text-red-500" : "theme-link"),
 				onClick: onReveal,
 				children: label()
 			})
 		})]
 	});
 }
-/** Sized by the slot, not by its contents: react-loading-skeleton wraps each bar
-*  in an inline span, so a bar occupies a line box taller than its `height` and
-*  the overflow would sit on top of the absolutely positioned row below. */
+/** Sized by the slot, not by its contents, so the bars never spill onto the
+*  absolutely positioned row below. */
 function TreeSkeletonRow({ depth }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative h-full overflow-hidden",
@@ -233,10 +231,7 @@ function TreeSkeletonRow({ depth }) {
 				0,
 				1,
 				2
-			].map((i) => /* @__PURE__ */ jsx(Skeleton, {
-				height: 12,
-				containerClassName: "block leading-none"
-			}, i))
+			].map((i) => /* @__PURE__ */ jsx("div", { className: "h-3 shrink-0 animate-pulse rounded bg-(--theme-muted-panel-bg)" }, i))
 		})]
 	});
 }
@@ -339,10 +334,10 @@ var TreeRowItem = memo(function TreeRowItem({ row, isSelected, onToggleExpand, o
 	const customIcon = getNodeIcon(node);
 	const label = isDirectory && node.storageId && node.displayName ? node.displayName : node.name;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
+		className: clsx("relative h-full rounded-md transition-[box-shadow,background-color] duration-150", dragActive && "ring-1 ring-(--theme-link)/60"),
 		...dragHandlers,
 		children: [/* @__PURE__ */ jsx(IndentGuides, { depth }), /* @__PURE__ */ jsxs("div", {
-			className: cx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-element)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
+			className: clsx("group relative flex items-center gap-1.5 pr-2 py-1 rounded-md cursor-pointer", "transition-colors duration-150", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--theme-link)", isSelected ? "bg-(--theme-element)/15 font-medium" : dragActive ? "theme-hover" : "hover:theme-hover"),
 			style: indentStyle(depth, isDirectory),
 			onClick: handleSelect,
 			onKeyDown: handleKeyDown,

package/dist/file-explorer/helpers.js

@@ -1,4 +1,3 @@
-import { useNotify, useProvisionCorsRules, useStrings } from "../components/Provider.js";
 import { BsFileEarmarkZip } from "../icons/bs/BsFileEarmarkZip.js";
 import { FaRegFileImage } from "../icons/fa/FaRegFileImage.js";
 import { FaRegFolder } from "../icons/fa/FaRegFolder.js";
@@ -15,15 +14,15 @@ import { MdRefresh } from "../icons/md/MdRefresh.js";
 import { PiShareBold } from "../icons/pi/PiShareBold.js";
 import { TbAlertTriangle } from "../icons/tb/TbAlertTriangle.js";
 import { positionKeys } from "../components/keys.js";
+import { useNotify, useProvisionCorsRules, useStrings } from "../components/Provider.js";
 import Callout from "../components/Callout.js";
 import { ListSkeleton } from "../list/ListTable.js";
 import { formatFileSize, getFileExtension } from "./lib/utils.js";
 import { CorsError } from "./lib/errors.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useTransition } from "react";
 import { useLocalStorage } from "usehooks-ts";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import Skeleton from "react-loading-skeleton";
 //#region src/file-explorer/helpers.tsx
 var SIDEBAR_WIDTH_STORAGE_KEY = "fileExplorerSidebarWidth";
 var contentTypeIconMap = [
@@ -368,7 +367,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: clsx("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"),
 			children: [
 				status === "done" && /* @__PURE__ */ jsx("svg", {
 					viewBox: "0 0 16 16",
@@ -381,11 +380,11 @@ 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$1, { 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 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 === "pending" && /* @__PURE__ */ jsx("span", { className: "inline-flex h-1.5 w-1.5 rounded-full theme-muted-text opacity-60" })
 			]
 		}), /* @__PURE__ */ jsx("span", {
-			className: cx("text-[11px] uppercase tracking-wider", status === "pending" ? "theme-muted-text opacity-60" : "theme-text"),
+			className: clsx("text-[11px] uppercase tracking-wider", status === "pending" ? "theme-muted-text opacity-60" : "theme-text"),
 			children: label
 		})]
 	});
@@ -393,20 +392,20 @@ 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: clsx("h-px w-8 -mt-5 transition-colors", active ? "bg-blue-500" : "theme-border border-t")
 	});
 }
 function NoDataAvailablePreview({ selectedStorage, error, onRefresh, connectionIssueMessage = null, className, canWrite = true }) {
 	const t = useStrings().fileExplorer;
 	if (error instanceof CorsError) return /* @__PURE__ */ jsx("div", {
-		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
+		className: clsx("flex-1 flex items-center justify-center w-full text-center", className),
 		children: /* @__PURE__ */ jsx(CorsIssuePreview, {
 			selectedStorage,
 			onRefresh
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex-1 flex items-center justify-center w-full text-center", className),
+		className: clsx("flex-1 flex items-center justify-center w-full text-center", className),
 		children: !connectionIssueMessage ? /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col items-center justify-center max-w-sm p-8",
 			children: [
@@ -465,7 +464,7 @@ function SkeletonPreview() {
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: "overflow-auto flex-1 px-2 py-2 space-y-1.5",
-					children: positionKeys(6, "skeleton").map((key) => /* @__PURE__ */ jsx(Skeleton, { height: 14 }, key))
+					children: positionKeys(6, "skeleton").map((key) => /* @__PURE__ */ jsx("div", { className: "h-3.5 animate-pulse rounded bg-(--theme-muted-panel-bg)" }, key))
 				})]
 			})
 		}), /* @__PURE__ */ jsxs("div", {
@@ -478,7 +477,7 @@ function DragDropZone({ onDropFiles, children, className = "" }) {
 	const [isDragging, setIsDragging] = useState(false);
 	return /* @__PURE__ */ jsx("div", {
 		role: "none",
-		className: cx("transition-[box-shadow,background-color] duration-150", className, isDragging && "ring-1 ring-(--theme-link) ring-inset bg-(--theme-link)/5"),
+		className: clsx("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);

package/dist/file-explorer/toasts.js

@@ -1,4 +1,3 @@
-import { useStrings } from "../components/Provider.js";
 import { BiExpandVertical } from "../icons/bi/BiExpandVertical.js";
 import { FaAngleDown } from "../icons/fa/FaAngleDown.js";
 import { FaAngleUp } from "../icons/fa/FaAngleUp.js";
@@ -7,10 +6,11 @@ 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 { useStrings } from "../components/Provider.js";
 import { formatETA, formatFileSize } from "./lib/utils.js";
-import cx from "classnames";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { 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) {
@@ -102,15 +102,15 @@ function FileProgressBar({ fileProgress, fileName, onCancelFile }) {
 					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"),
+						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: cx("h-full transition-all duration-300 relative flex items-center justify-center", barColor({
+							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$1, { children: [/* @__PURE__ */ jsxs("div", {
+						}), 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)`,
@@ -214,7 +214,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: cx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
+					className: clsx("w-10 h-10 rounded-full flex items-center justify-center", statusInfo.bgColor),
 					children: statusInfo.icon
 				}), /* @__PURE__ */ jsxs("div", {
 					role: "none",
@@ -262,20 +262,20 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 							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", sessionBarColor),
+									className: clsx("h-full transition-all duration-300", sessionBarColor),
 									style: { width: `${totalProgress}%` }
 								})
 							})
 						})
 					]
 				})]
-			}), isToastExpanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			}), isToastExpanded && /* @__PURE__ */ jsxs(Fragment, { 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),
+							className: clsx("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",
@@ -342,7 +342,7 @@ function UploadSessionToast({ session, queueLength, onCancel, onCancelFile }) {
 					}), /* @__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", sessionBarColor),
+							className: clsx("h-full transition-all duration-300", sessionBarColor),
 							style: { width: `${totalProgress}%` }
 						})
 					})]

package/dist/form/FieldGroup.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/** A titled group of fields. Folding keeps them mounted, so they hold their
+ *  values and validation while closed. */
+export declare function FieldGroup({ title, actions, collapsible, defaultOpen, children, }: {
+    title: ReactNode;
+    /** Beside the title, outside the toggle, such as the group's info tip. */
+    actions?: ReactNode;
+    collapsible?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/form/FieldGroup.js

@@ -0,0 +1,36 @@
+import { FaAngleRight } from "../icons/fa/FaAngleRight.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/form/FieldGroup.tsx
+/** A titled group of fields. Folding keeps them mounted, so they hold their
+*  values and validation while closed. */
+function FieldGroup({ title, actions, collapsible = true, defaultOpen = true, children }) {
+	if (!collapsible) return /* @__PURE__ */ jsxs("section", {
+		className: "flex w-full flex-col",
+		children: [/* @__PURE__ */ jsxs("h3", {
+			className: "mb-[15px] flex items-center gap-1 text-md font-bold",
+			children: [title, actions]
+		}), children]
+	});
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		defaultOpen,
+		className: "flex w-full flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-2 flex w-full items-center gap-2 border-b border-(--theme-border) pb-1 text-lg font-semibold",
+			children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				"data-field-label": true,
+				className: "group flex flex-1 cursor-pointer items-center text-left",
+				children: [/* @__PURE__ */ jsx(FaAngleRight, {
+					"aria-hidden": "true",
+					className: "px-1 text-[1.25rem] transition-transform group-data-panel-open:rotate-90"
+				}), title]
+			}), actions]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			keepMounted: true,
+			className: "h-(--collapsible-panel-height) transition-[height] duration-300 ease-in-out data-starting-style:h-0 data-ending-style:h-0 data-starting-style:overflow-hidden data-ending-style:overflow-hidden",
+			children
+		})]
+	});
+}
+//#endregion
+export { FieldGroup };

package/dist/form/FieldWrapper.js

@@ -1,9 +1,9 @@
 import { RequiredMark } from "../components/RequiredMark.js";
 import { resolvedFlag } from "./lib.js";
 import { FieldProvider } from "./fieldContext.js";
-import cx from "classnames";
-import { useId, useMemo } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
 //#region src/form/FieldWrapper.tsx
 function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
 	const isOptional = Boolean(resolvedFlag(optional));
@@ -23,12 +23,12 @@ function FieldWrapper({ label, tooltipComponent, description, labelPosition = "l
 		descriptionId
 	]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
+		className: clsx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
 		children: [/* @__PURE__ */ jsxs("label", {
 			htmlFor: id,
 			id: labelId,
 			"data-field-label": true,
-			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
+			className: clsx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
 			children: [
 				label,
 				!isOptional && /* @__PURE__ */ jsx(RequiredMark, {}),

package/dist/form/Fields/BooleanField.js

@@ -1,50 +1,40 @@
-import SwitchToggle from "../../components/SwitchToggle.js";
+import { Tooltip } from "../../components/Tooltip.js";
+import { Switch } from "../../components/Switch.js";
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.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 fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const [value, change] = useFieldValue(field.name ?? "");
 	const handleChange = (val) => {
 		if (disabled) return;
 		onChange?.(val);
-		setFieldTouched(fieldName, true);
-		setFieldValue(fieldName, val);
-		setFormDirty(true);
+		change(val);
 	};
-	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();
+	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: /* @__PURE__ */ jsx("div", { children: tooltipComponent }),
+		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
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Tooltip, {
+			content: field.disabled_message,
+			disabled: !disabled,
+			children: /* @__PURE__ */ jsx(Switch, {
+				id,
+				nativeButton: true,
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				checked,
+				onCheckedChange: (on) => handleChange(on ? onOption : offOption),
+				disabled,
+				"aria-describedby": describedBy,
+				"aria-invalid": missing || void 0
+			})
 		})
 	});
 }

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, setFormDirty, }: FieldComponentProps<ICheckboxGroupField>): import("react").JSX.Element;
+export default function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<ICheckboxGroupField>): import("react").JSX.Element;

package/dist/form/Fields/CheckboxGroupField.js

@@ -1,9 +1,9 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { fieldOption } from "./fieldOption.js";
-import cx from "classnames";
-import { useState } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
+import { useState } from "react";
 //#region src/form/Fields/CheckboxGroupField.tsx
 function impliedFrom(values, implies = {}) {
 	const result = /* @__PURE__ */ new Set();
@@ -13,17 +13,15 @@ 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, setFormDirty }) {
-	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched } = useFormikContext();
+function CheckboxGroupField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+	const [value, change] = useFieldValue(field.name ?? "");
 	const implies = field.implies;
 	const rawOf = new Map((field.options ?? []).map((choice) => {
 		const option = fieldOption(choice);
 		return [option.value, option.raw];
 	}));
 	const [manual, setManual] = useState(() => {
-		const saved = (fieldState.value || []).map(String);
+		const saved = (value || []).map(String);
 		const impliedBySaved = impliedFrom(saved, implies);
 		return saved.filter((v) => !impliedBySaved.has(v));
 	});
@@ -33,10 +31,8 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 		const nextManual = manual.includes(value) ? manual.filter((v) => v !== value) : [...manual, value];
 		const next = union(nextManual, impliedFrom(nextManual, implies)).map((v) => rawOf.get(v) ?? v);
 		setManual(nextManual);
-		setFieldTouched(fieldName, true);
-		setFieldValue(fieldName, next);
+		change(next);
 		onChange?.(next);
-		setFormDirty(true);
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
@@ -53,13 +49,13 @@ function CheckboxGroupField({ field, label, labelPosition, missing, disabled, on
 				const locked = forced.has(option.value);
 				const optionDisabled = disabled || locked;
 				return /* @__PURE__ */ jsxs("label", {
-					className: cx("-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)"),
+					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",
 						checked: manual.includes(option.value) || locked,
 						disabled: optionDisabled,
 						onChange: () => handleToggle(option.value),
-						className: cx("h-4 min-h-0 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
+						className: clsx("h-4 min-h-0 w-4 rounded accent-(--theme-link)", optionDisabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid")
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-col",
 						children: [/* @__PURE__ */ jsx("span", {

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

@@ -1,8 +1,7 @@
-import type React from 'react';
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
 export interface IColorField extends BaseField {
     type: 'color';
     default?: string;
 }
-export default function ColorField(props: FieldComponentProps<IColorField>): React.JSX.Element;
+export default function ColorField(props: FieldComponentProps<IColorField>): import("react").JSX.Element;

package/dist/form/Fields/ColorField.js

@@ -1,17 +1,13 @@
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { jsx } from "react/jsx-runtime";
-import { Field, useField, useFormikContext } from "formik";
 //#region src/form/Fields/ColorField.tsx
 function ColorField(props) {
 	const { field, label, labelPosition, onChange, tooltipComponent, spaceCompact } = props;
-	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const [value, change] = useFieldValue(field.name ?? "");
 	const handleChange = (e) => {
-		const val = e.target.value;
-		onChange?.(val);
-		setFieldTouched(fieldName, true);
-		setFieldValue(fieldName, val);
+		onChange?.(e.target.value);
+		change(e.target.value);
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
@@ -19,13 +15,12 @@ function ColorField(props) {
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: ({ id }) => /* @__PURE__ */ jsx(Field, {
+		children: ({ id }) => /* @__PURE__ */ jsx("input", {
 			className: "theme-input h-8 w-18 rounded border border-neutral-400 placeholder:text-xs",
 			id,
 			name: field.name,
-			value: fieldState.value || "#fbbf24",
+			value: value || "#fbbf24",
 			type: "color",
-			"aria-required": field.optional ? void 0 : true,
 			onChange: handleChange
 		})
 	});

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

@@ -1,23 +1,13 @@
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
+import { type FieldOption } from '../utils/fieldItems.js';
 export interface IDropdownField extends BaseField {
     type: 'dropdown';
     dropdownType?: string;
-    options: Array<{
-        label: string;
-        value: string;
-        secondaryLabel?: string;
-        description?: string;
-    }> | Record<string, Array<{
-        label: string;
-        value: string;
-        secondaryLabel?: string;
-        description?: string;
-    }>>;
+    options: FieldOption[] | Record<string, FieldOption[]>;
     parentValue?: string;
     autoselect?: boolean;
     allowCustomValue?: boolean;
-    customValueLabel?: string;
     placeholder?: string;
 }
-export default function DropdownField(props: FieldComponentProps<IDropdownField, string>): import("react").JSX.Element;
+export default function DropdownField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IDropdownField>): import("react").JSX.Element;

package/dist/form/Fields/DropdownField.js

@@ -1,17 +1,23 @@
+import { Autocomplete, Combobox } from "../../components/Combobox.js";
+import { toFieldItems } from "../utils/fieldItems.js";
 import { FieldWrapper } from "../FieldWrapper.js";
-import FormikCustomDropdown_default from "../SpecialTypes/FormikCustomDropdown.js";
-import { dependentOptions } from "../utils/dependentOptions.js";
+import { useChoiceField } from "../useChoiceField.js";
+import { useDependentOptions } from "../utils/dependentOptions.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 //#region src/form/Fields/DropdownField.tsx
-var missingSetter = () => {
-	throw new Error("DropdownField needs setFieldValue and setFieldTouched");
-};
-function DropdownField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFieldValue, setFieldTouched, currentValue, values } = props;
-	const fieldName = field.name ?? "";
-	const { options } = dependentOptions(field.options, field.depends_on, values);
-	const secondaryField = Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField;
+function DropdownField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+	const { options } = useDependentOptions(field.options, field.depends_on);
+	const items = useMemo(() => toFieldItems(options), [options]);
+	const [value, choose] = useChoiceField({
+		name: field.name ?? "",
+		items,
+		autoselect: field.autoselect,
+		secondaryField: Array.isArray(field.secondaryField) ? field.secondaryField[0] : field.secondaryField,
+		onChange
+	});
+	const placeholder = getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -19,26 +25,33 @@ function DropdownField(props) {
 		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: /* @__PURE__ */ jsx("div", {
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx("div", {
 			className: "grow min-w-0",
-			children: /* @__PURE__ */ jsx(FormikCustomDropdown_default, {
-				invalid: missing,
+			children: field.allowCustomValue ? /* @__PURE__ */ jsx(Autocomplete, {
+				id,
+				"aria-describedby": describedBy,
+				"aria-label": label,
+				"aria-invalid": missing,
+				required: !field.optional,
+				disabled,
 				className: "w-full",
-				name: fieldName,
-				ariaLabel: label,
-				options,
-				setFormDirty: props.setFormDirty,
-				onChange,
-				secondaryField,
+				placeholder,
+				items,
+				value: value == null ? "" : String(value),
+				onValueChange: choose
+			}) : /* @__PURE__ */ jsx(Combobox, {
+				id,
+				"aria-describedby": describedBy,
+				"aria-label": label,
+				"aria-invalid": missing,
+				required: !field.optional,
 				disabled,
-				autoselect: field.autoselect,
-				allowCustomValue: field.allowCustomValue,
-				customValueLabel: field.customValueLabel,
-				placeholder: getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0),
-				currentValue,
-				setFieldValue: setFieldValue ?? missingSetter,
-				setFieldTouched: setFieldTouched ?? missingSetter
-			}, field.name)
+				className: "w-full",
+				placeholder,
+				items,
+				value: value ?? null,
+				onValueChange: choose
+			})
 		})
 	});
 }