@parallelworks/ui 0.41.0 → 0.43.0

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

@@ -9,5 +9,4 @@ export interface IDurationField extends BaseField {
     disableValue?: number;
     disableLabel?: string;
 }
-declare const _default: import("react").MemoExoticComponent<({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty, currentValue, setFieldValue, setFieldTouched, }: FieldComponentProps<IDurationField, number | string | undefined>) => import("react").JSX.Element>;
-export default _default;
+export default function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IDurationField>): import("react").JSX.Element;

package/dist/form/Fields/DurationField.js

@@ -1,21 +1,24 @@
 import { useStrings } from "../../components/Provider.js";
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { formatDuration, parseDuration } from "../utils/duration.js";
 import { setDurationValidity } from "./durationValidity.js";
-import cx from "classnames";
-import { memo, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/form/Fields/DurationField.tsx
-var DEBOUNCE_MS = 500;
 var isNumericString = (value) => typeof value === "string" && /^\d+$/.test(value.trim());
 var toDisplay = (value) => {
 	if (typeof value === "number") return formatDuration(value);
 	if (isNumericString(value)) return formatDuration(Number(value));
 	return "";
 };
-var DurationField_default = memo(function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty, currentValue, setFieldValue, setFieldTouched }) {
+function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
 	const { form: t } = useStrings();
 	const name = field.name ?? "";
+	const [currentValue, change] = useFieldValue(name);
+	const { setValue } = useFormContext();
 	const min = field.min !== void 0 ? Number(field.min) : Number.NEGATIVE_INFINITY;
 	const max = field.max !== void 0 ? Number(field.max) : Number.POSITIVE_INFINITY;
 	const disableValue = field.disableValue;
@@ -23,12 +26,11 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 	const isSentinel = hasDisableCheckbox && currentValue !== "" && Number(currentValue) === disableValue;
 	const [text, setText] = useState(() => toDisplay(currentValue));
 	const focusedRef = useRef(false);
-	const debounceRef = useRef(null);
 	useEffect(() => {
 		if (isSentinel) {
-			if (typeof currentValue !== "number") setFieldValue?.(name, disableValue);
-		} else if (isNumericString(currentValue)) setFieldValue?.(name, Number(currentValue));
-		else if ((currentValue === void 0 || currentValue === null || currentValue === "") && typeof field.default === "number") setFieldValue?.(name, field.default);
+			if (typeof currentValue !== "number") setValue(name, disableValue);
+		} else if (isNumericString(currentValue)) setValue(name, Number(currentValue));
+		else if ((currentValue === void 0 || currentValue === null || currentValue === "") && typeof field.default === "number") setValue(name, field.default);
 	}, []);
 	useEffect(() => {
 		if (!focusedRef.current) setText(toDisplay(currentValue));
@@ -43,44 +45,35 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 	useEffect(() => {
 		setDurationValidity(name, error === null);
 	}, [name, error]);
-	useEffect(() => () => {
-		setDurationValidity(name, true);
-		clearTimeout(debounceRef.current ?? void 0);
-	}, [name]);
-	const flushToFormik = (val) => {
-		setFieldValue?.(name, val);
+	useEffect(() => () => setDurationValidity(name, true), [name]);
+	const set = (val) => {
+		change(val);
 		onChange?.(val);
-		setFieldTouched?.(name, true);
 	};
 	const handleDisableToggle = (checked) => {
-		clearTimeout(debounceRef.current ?? void 0);
-		setFormDirty(true);
 		if (checked) {
 			setText("");
-			if (disableValue !== void 0) flushToFormik(disableValue);
-		} else flushToFormik(typeof field.default === "number" ? field.default : "");
+			if (disableValue !== void 0) set(disableValue);
+		} else set(typeof field.default === "number" ? field.default : "");
 	};
 	const handleChange = (e) => {
 		const raw = e.target.value;
 		setText(raw);
-		setFormDirty(true);
-		clearTimeout(debounceRef.current ?? void 0);
 		const rawTrimmed = raw.trim();
 		const value = rawTrimmed === "" ? "" : parseDuration(rawTrimmed);
-		if (value === "" || typeof value === "number" && value >= min && value <= max) debounceRef.current = setTimeout(() => flushToFormik(value), DEBOUNCE_MS);
+		if (value === "" || typeof value === "number" && value >= min && value <= max) set(value);
 	};
 	const handleFocus = () => {
 		focusedRef.current = true;
 	};
 	const handleBlur = () => {
 		focusedRef.current = false;
-		clearTimeout(debounceRef.current ?? void 0);
 		if (trimmed === "") {
 			setText("");
-			flushToFormik("");
+			set("");
 		} else if (parsed !== null && parsed >= min && parsed <= max) {
 			setText(formatDuration(parsed));
-			flushToFormik(parsed);
+			set(parsed);
 		}
 	};
 	return /* @__PURE__ */ jsx(FieldWrapper, {
@@ -90,10 +83,10 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 		labelPosition,
 		spaceCompact: spaceCompact ?? false,
 		...field.description !== void 0 && { description: field.description },
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			!isSentinel && /* @__PURE__ */ jsx("input", {
 				"data-1p-ignore": true,
-				className: cx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
+				className: clsx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
 				id,
 				"aria-describedby": describedBy,
 				name,
@@ -111,13 +104,13 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 				children: error
 			}),
 			hasDisableCheckbox && /* @__PURE__ */ jsxs("label", {
-				className: cx("flex items-center gap-2 mt-1", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+				className: clsx("flex items-center gap-2 mt-1", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
 				children: [/* @__PURE__ */ jsx("input", {
 					type: "checkbox",
 					checked: isSentinel,
 					disabled,
 					onChange: (e) => handleDisableToggle(e.target.checked),
-					className: cx("h-4 w-4 accent-(--theme-link)", disabled ? "cursor-not-allowed" : "cursor-pointer")
+					className: clsx("h-4 w-4 accent-(--theme-link)", disabled ? "cursor-not-allowed" : "cursor-pointer")
 				}), /* @__PURE__ */ jsx("span", {
 					className: "theme-text",
 					children: field.disableLabel
@@ -125,6 +118,6 @@ var DurationField_default = memo(function DurationField({ field, label, labelPos
 			})
 		] })
 	});
-});
+}
 //#endregion
-export { DurationField_default as default };
+export { DurationField as default };

package/dist/form/Fields/LabelField.js

@@ -1,4 +1,4 @@
-import cx from "classnames";
+import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/form/Fields/LabelField.tsx
 function LabelField(props) {
@@ -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: clsx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
 			children: field.text?.toString().replace(/(\r)/g, "").replace(/(\\n)/g, "\n") || label
 		})
 	});

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

@@ -1,18 +1,12 @@
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
+import { type FieldOption } from '../utils/fieldItems.js';
+type MultiDropdownValue = string | boolean | number;
+type MultiDropdownOption = FieldOption<MultiDropdownValue>;
 export interface IMultiDropdownField extends BaseField {
     type: 'multi-dropdown';
-    options: Array<string | {
-        label: string;
-        value: string | boolean | number;
-        secondaryLabel?: string;
-        selected?: boolean;
-    }> | Record<string, Array<string | {
-        label: string;
-        value: string | boolean | number;
-        secondaryLabel?: string;
-        selected?: boolean;
-    }>>;
+    options: MultiDropdownOption[] | Record<string, MultiDropdownOption[]>;
     parentValue?: string | boolean | number;
 }
-export default function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange, values, }: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;
+export default function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, onChange, }: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;
+export {};

package/dist/form/Fields/MultiDropdownField.js

@@ -1,36 +1,45 @@
+import { Combobox } from "../../components/Combobox.js";
+import { toFieldItems } from "../utils/fieldItems.js";
 import { FieldWrapper } from "../FieldWrapper.js";
-import { dependentOptions } from "../utils/dependentOptions.js";
-import { MultiSelectionDropdown } from "../Form.js";
+import { useFieldValue } from "../useFieldValue.js";
+import { useDependentOptions } from "../utils/dependentOptions.js";
+import { usePrevious } from "../usePrevious.js";
 import { jsx } from "react/jsx-runtime";
-import { Field } from "formik";
+import { useEffect, useMemo } from "react";
 //#region src/form/Fields/MultiDropdownField.tsx
-function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, setFormDirty, onChange, values }) {
-	const fieldName = field.name ?? "";
-	const dependent = dependentOptions(field.options, field.depends_on, values);
-	const { options } = dependent;
+function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, onChange }) {
+	const [value, change] = useFieldValue(field.name ?? "");
+	const dependent = useDependentOptions(field.options, field.depends_on);
+	const items = useMemo(() => toFieldItems(dependent.options), [dependent.options]);
 	const parentValue = field.depends_on ? dependent.parentValue : field.parentValue;
+	const previousParent = usePrevious(parentValue);
+	useEffect(() => {
+		if (previousParent !== void 0 && previousParent !== parentValue) change([]);
+	}, [
+		previousParent,
+		parentValue,
+		change
+	]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: ({ id }) => disabled ? /* @__PURE__ */ jsx(Field, {
-			className: "theme-input h-7 w-full rounded border placeholder:text-xs",
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Combobox, {
 			id,
-			type: "search",
-			name: field.name,
-			disabled: true,
-			onChange
-		}, field.name) : /* @__PURE__ */ jsx(MultiSelectionDropdown, {
-			name: fieldName,
-			label: field.label || label,
-			options,
-			setFormDirty,
-			parentValue,
-			onChange,
-			invalid: missing
-		}, field.name)
+			"aria-describedby": describedBy,
+			multiple: true,
+			items,
+			value: value ?? [],
+			onValueChange: (next) => {
+				change(next);
+				onChange?.(next);
+			},
+			required: !field.optional,
+			disabled,
+			"aria-invalid": missing
+		})
 	});
 }
 //#endregion

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

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

package/dist/form/Fields/NumberField.js

@@ -1,52 +1,82 @@
+import { FaAngleDown } from "../../icons/fa/FaAngleDown.js";
+import { FaAngleUp } from "../../icons/fa/FaAngleUp.js";
 import { FieldWrapper } from "../FieldWrapper.js";
-import FormikCustomInput from "../SpecialTypes/FormikCustomInput.js";
-import FormikNumericInput from "../SpecialTypes/FormikNumericInput.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { jsx } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
+import { NumberField } from "@base-ui/react/number-field";
 //#region src/form/Fields/NumberField.tsx
-function NumberField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact } = props;
-	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue } = useFormikContext();
+/** A value held as text, as one read from a workflow's inputs may be, still shows as its number. */
+function toNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "string" && value.trim() !== "") {
+		const parsed = Number(value);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+	return null;
+}
+var stepperClassName = "flex flex-1 items-center justify-center px-1 theme-muted-text hover:theme-text data-disabled:opacity-40 data-disabled:cursor-not-allowed";
+function NumberField$1({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+	const [value, change] = useFieldValue(field.name ?? "");
+	const unset = value === void 0 || value === null || value === "";
+	const seed = field.prefillDefault && unset ? field.default : void 0;
 	useEffect(() => {
-		if (field.prefillDefault && field.default !== void 0 && (fieldState.value === void 0 || fieldState.value === null || fieldState.value === "")) setFieldValue(fieldName, field.default);
-	}, [
-		field.prefillDefault,
-		field.default,
-		fieldName,
-		fieldState.value,
-		setFieldValue
-	]);
+		if (seed !== void 0) change(seed);
+	}, [seed, change]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
 		tooltipComponent,
+		description: field.description,
 		labelPosition,
 		spaceCompact,
-		children: field.thousandsSeparator ? /* @__PURE__ */ jsx(FormikNumericInput, {
-			invalid: missing,
-			name: fieldName,
-			placeholder: getPlaceholder(field.placeholder, field.default),
-			disabled,
+		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(NumberField.Root, {
+			id,
+			name: field.name,
+			value: toNumber(value),
+			onValueChange: (next) => {
+				const number = next ?? void 0;
+				onChange?.(number);
+				change(number);
+			},
 			min: field.min,
 			max: field.max,
-			...onChange && { onChange }
-		}, field.name) : /* @__PURE__ */ jsx(FormikCustomInput, {
-			invalid: missing,
-			name: fieldName,
-			type: "number",
-			placeholder: getPlaceholder(field.placeholder, field.default),
-			disabled,
 			step: field.step,
-			min: field.min,
-			max: field.max,
-			defaultValue: field.default,
-			...onChange && { onChange }
-		}, field.name)
+			disabled,
+			format: {
+				useGrouping: field.thousandsSeparator ?? false,
+				maximumFractionDigits: 20
+			},
+			children: /* @__PURE__ */ jsxs(NumberField.Group, {
+				className: "relative w-full",
+				children: [/* @__PURE__ */ jsx(NumberField.Input, {
+					"aria-describedby": describedBy,
+					"aria-required": field.optional ? void 0 : true,
+					"aria-invalid": missing || void 0,
+					"data-1p-ignore": true,
+					className: clsx("w-full pr-6 tabular-nums", disabled && "disabled", missing && "invalid"),
+					placeholder: getPlaceholder(field.placeholder, field.default)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "absolute inset-y-px right-px flex flex-col",
+					children: [/* @__PURE__ */ jsx(NumberField.Increment, {
+						className: stepperClassName,
+						children: /* @__PURE__ */ jsx(FaAngleUp, {
+							"aria-hidden": "true",
+							className: "size-3"
+						})
+					}), /* @__PURE__ */ jsx(NumberField.Decrement, {
+						className: stepperClassName,
+						children: /* @__PURE__ */ jsx(FaAngleDown, {
+							"aria-hidden": "true",
+							className: "size-3"
+						})
+					})]
+				})]
+			})
+		})
 	});
 }
 //#endregion
-export { NumberField as default };
+export { NumberField$1 as default };

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, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;
+export default function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact, }: FieldComponentProps<IObjectField>): import("react").JSX.Element;

package/dist/form/Fields/ObjectField.js

@@ -1,55 +1,24 @@
-import { ControlledCollapsiblePanel } from "../../components/CollapsiblePanel.js";
-import { FieldsFromOptions, GroupHeader, resolveMetaOverrides } from "../Form.js";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useFormikContext } from "formik";
+import { FieldGroup } from "../FieldGroup.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, missingFields, setFormDirty, workflowForm, labelPosition, spaceCompact }) {
+function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompact }) {
 	const fieldName = field.name ?? "";
-	const [open, setOpen] = useState(field.collapsed !== void 0 ? !field.collapsed : true);
-	const { values, setFieldValue, setFieldTouched } = useFormikContext();
 	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
-	const body = /* @__PURE__ */ jsx("div", {
-		className: "w-full",
+	const parentInfo = useMemo(() => ({ fieldNamePrefix: `${fieldName}.` }), [fieldName]);
+	return /* @__PURE__ */ jsx(FieldGroup, {
+		title: field.label || label,
+		actions: tooltipComponent,
+		collapsible: !field.noCollapse,
+		defaultOpen: !field.collapsed,
 		children: /* @__PURE__ */ jsx(FieldsFromOptions, {
 			options: field.options,
-			values,
-			setFormDirty,
-			setFieldValue,
-			setFieldTouched,
-			missingFields,
-			workflowForm,
 			labelPosition: meta.labelPosition,
 			spaceCompact: meta.spaceCompact,
-			parentInfo: {
-				parentName: fieldName,
-				fieldNamePrefix: `${fieldName}.`
-			}
+			parentInfo
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col w-full",
-		children: [field.noCollapse && /* @__PURE__ */ jsx("div", {
-			className: "flex items-center w-full mb-[15px]",
-			children: /* @__PURE__ */ jsxs("h3", {
-				className: "flex items-center gap-1 text-md font-bold",
-				children: [
-					label,
-					" ",
-					tooltipComponent
-				]
-			})
-		}), field.noCollapse ? body : /* @__PURE__ */ jsx(ControlledCollapsiblePanel, {
-			open,
-			setOpen,
-			title: /* @__PURE__ */ jsx(GroupHeader, {
-				open,
-				setOpen,
-				title: field.label || label
-			}),
-			children: body
-		})]
-	});
 }
 //#endregion
 export { ObjectField as default };

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

@@ -8,4 +8,4 @@ export interface IRadioField extends BaseField {
     }>;
     optionLabelPosition?: 'left' | 'top';
 }
-export default function RadioField(props: FieldComponentProps<IRadioField>): import("react").JSX.Element;
+export default function RadioField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IRadioField>): import("react").JSX.Element;

package/dist/form/Fields/RadioField.js

@@ -1,56 +1,45 @@
+import { Radio, RadioGroup } from "../../components/Radio.js";
 import { FieldWrapper } from "../FieldWrapper.js";
+import { useFieldValue } from "../useFieldValue.js";
 import { fieldOption } from "./fieldOption.js";
-import cx from "classnames";
-import { useId } from "react";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useField, useFormikContext } from "formik";
 //#region src/form/Fields/RadioField.tsx
-function RadioField(props) {
-	const { field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
-	const fieldName = field.name ?? "";
-	const uid = useId();
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched } = useFormikContext();
-	const handleChange = (val) => {
-		if (disabled) return;
-		onChange?.(val);
-		setFieldTouched(fieldName, true);
-		setFieldValue(fieldName, val);
-		setFormDirty(true);
-	};
+function RadioField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+	const [value, change] = useFieldValue(field.name ?? "");
+	const options = (field.options ?? []).map((raw) => ({
+		...fieldOption(raw),
+		unlabelled: typeof raw !== "object" || raw.label === void 0
+	}));
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
 		tooltipComponent,
 		labelPosition,
 		spaceCompact,
-		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx("div", {
-			role: "radiogroup",
+		children: ({ labelId, describedBy }) => /* @__PURE__ */ jsx(RadioGroup, {
 			"aria-labelledby": labelId,
 			"aria-describedby": describedBy,
-			"aria-required": field.optional ? void 0 : true,
-			className: cx("flex py-1.5", field.optionLabelPosition === "top" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-5 gap-y-2"),
-			children: field.options?.map((raw) => {
-				const option = fieldOption(raw);
-				const unlabelled = typeof raw !== "object" || raw.label === void 0;
-				return /* @__PURE__ */ jsxs("label", {
-					htmlFor: `${uid}-${option.value}`,
-					className: cx("flex items-center gap-2", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
-					children: [/* @__PURE__ */ jsx("input", {
-						id: `${uid}-${option.value}`,
-						className: cx("h-4 w-4", disabled ? "cursor-not-allowed" : "cursor-pointer", missing && "invalid"),
-						name: field.name,
-						type: "radio",
-						value: option.value,
-						checked: fieldState.value !== void 0 && fieldState.value !== null && String(fieldState.value) === option.value,
-						disabled,
-						onChange: () => handleChange(option.raw)
-					}), /* @__PURE__ */ jsx("span", {
-						className: cx("theme-text", unlabelled && "capitalize"),
-						children: option.label
-					})]
-				}, field.name + option.value);
-			})
+			name: field.name,
+			required: !field.optional,
+			disabled,
+			value: value === void 0 || value === null ? null : String(value),
+			onValueChange: (next) => {
+				const picked = options.find((option) => option.value === next)?.raw;
+				onChange?.(picked);
+				change(picked);
+			},
+			className: clsx("flex py-1.5", field.optionLabelPosition === "top" ? "flex-col gap-2" : "flex-row flex-wrap gap-x-5 gap-y-2"),
+			children: options.map((option) => /* @__PURE__ */ jsxs("label", {
+				className: clsx("flex items-center gap-2", disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"),
+				children: [/* @__PURE__ */ jsx(Radio, {
+					value: option.value,
+					"aria-invalid": missing || void 0
+				}), /* @__PURE__ */ jsx("span", {
+					className: clsx("theme-text", option.unlabelled && "capitalize"),
+					children: option.label
+				})]
+			}, option.value))
 		})
 	});
 }

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

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { FieldComponentProps } from '../types/fieldComponentTypes.js';
 import type { BaseField } from '../types/fieldTypes.js';
 export interface IRangeField extends BaseField {
@@ -8,4 +7,4 @@ export interface IRangeField extends BaseField {
     max: number;
     step?: number;
 }
-export default function RangeField(props: FieldComponentProps<IRangeField>): React.JSX.Element;
+export default function RangeField(props: FieldComponentProps<IRangeField>): import("react").JSX.Element;

package/dist/form/Fields/RangeField.js

@@ -1,26 +1,34 @@
 import { FieldWrapper } from "../FieldWrapper.js";
-import cx from "classnames";
+import { useFieldValue } from "../useFieldValue.js";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Field, useField, useFormikContext } from "formik";
+import { useEffect } from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/form/Fields/RangeField.tsx
 function RangeField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
-	const fieldName = field.name ?? "";
-	const [fieldState] = useField(fieldName);
-	const { setFieldValue, setFieldTouched } = useFormikContext();
+	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const name = field.name ?? "";
+	const [value, change] = useFieldValue(name);
+	const { setValue } = useFormContext();
 	const handleChange = (e) => {
 		let val = e.target.valueAsNumber;
 		if (!Number.isNaN(val)) {
 			val = Math.max(field.min, Math.min(field.max, val));
-			setFieldValue(fieldName, val);
+			change(val);
 			onChange?.(val);
-			setFieldTouched(fieldName, true);
-			setFormDirty(true);
 		}
 	};
 	const seedValue = field.default ?? field.min;
-	if ((fieldState.value === void 0 || fieldState.value === null) && seedValue !== void 0) setFieldValue(fieldName, seedValue);
-	const currentValue = fieldState.value !== void 0 ? fieldState.value : seedValue;
+	const seed = (value === void 0 || value === null) && seedValue !== void 0;
+	useEffect(() => {
+		if (seed) setValue(name, seedValue);
+	}, [
+		seed,
+		seedValue,
+		name,
+		setValue
+	]);
+	const currentValue = value ?? seedValue ?? "";
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		optional: field.optional,
 		label,
@@ -29,8 +37,8 @@ function RangeField(props) {
 		spaceCompact,
 		children: ({ id, labelId }) => /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center",
-			children: [/* @__PURE__ */ jsx(Field, {
-				className: cx("theme-input h-7 w-1/3 mr-5 text-center rounded border", disabled && "disabled"),
+			children: [/* @__PURE__ */ jsx("input", {
+				className: clsx("theme-input h-7 w-1/3 mr-5 text-center rounded border", disabled && "disabled"),
 				id,
 				type: "number",
 				value: currentValue,
@@ -39,13 +47,12 @@ function RangeField(props) {
 				step: field.step || 1,
 				disabled,
 				onChange: handleChange
-			}), /* @__PURE__ */ jsx(Field, {
-				className: cx("rounded w-full", disabled && "disabled"),
+			}), /* @__PURE__ */ jsx("input", {
+				className: clsx("rounded w-full", disabled && "disabled"),
 				name: field.name,
 				value: currentValue,
 				type: "range",
 				"aria-labelledby": labelId,
-				"aria-required": field.optional ? void 0 : true,
 				min: field.min,
 				max: field.max,
 				step: field.step || 1,

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

@@ -13,5 +13,4 @@ export interface IStringField extends BaseField {
     sanitize?: string;
     prefillDefault?: boolean;
 }
-declare const _default: import("react").MemoExoticComponent<(props: FieldComponentProps<IStringField, string>) => import("react").JSX.Element>;
-export default _default;
+export default function StringField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IStringField>): import("react").JSX.Element;