@parallelworks/ui 0.44.0 → 0.45.0

package/dist/form/Fields/DropdownField.js

@@ -1,13 +1,15 @@
 import { Autocomplete, Combobox } from "../../components/Combobox.js";
+import { Field } from "../../components/Field.js";
 import { toFieldItems } from "../utils/fieldItems.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { fieldFrame } from "../fieldFrame.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
-function DropdownField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+function DropdownField(props) {
+	const { field, disabled, onChange } = props;
 	const { options } = useDependentOptions(field.options, field.depends_on);
 	const items = useMemo(() => toFieldItems(options), [options]);
 	const [value, choose] = useChoiceField({
@@ -18,40 +20,22 @@ function DropdownField({ field, label, labelPosition, missing, disabled, onChang
 		onChange
 	});
 	const placeholder = getPlaceholder(field.placeholder, typeof field.default === "string" ? field.default : void 0);
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		description: field.description,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx("div", {
-			className: "grow min-w-0",
-			children: field.allowCustomValue ? /* @__PURE__ */ jsx(Autocomplete, {
-				id,
-				"aria-describedby": describedBy,
-				"aria-label": label,
-				"aria-invalid": missing,
-				required: !field.optional,
-				disabled,
-				className: "w-full",
-				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,
-				className: "w-full",
-				placeholder,
-				items,
-				value: value ?? null,
-				onValueChange: choose
-			})
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => field.allowCustomValue ? /* @__PURE__ */ jsx(Autocomplete, {
+			...control,
+			disabled,
+			placeholder,
+			items,
+			value: value == null ? "" : String(value),
+			onValueChange: choose
+		}) : /* @__PURE__ */ jsx(Combobox, {
+			...control,
+			disabled,
+			placeholder,
+			items,
+			value: value ?? null,
+			onValueChange: choose
 		})
 	});
 }

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

@@ -9,4 +9,4 @@ export interface IDurationField extends BaseField {
     disableValue?: number;
     disableLabel?: string;
 }
-export default function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact, }: FieldComponentProps<IDurationField>): import("react").JSX.Element;
+export default function DurationField(props: FieldComponentProps<IDurationField>): import("react").JSX.Element;

package/dist/form/Fields/DurationField.js

@@ -1,20 +1,23 @@
 import { useStrings } from "../../components/Provider.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { Checkbox } from "../../components/Checkbox.js";
+import { fieldBox } from "../../components/fieldBox.js";
+import { Field, FieldOption } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
-import { formatDuration, parseDuration } from "../utils/duration.js";
+import { formatDurationText, parseDurationText } from "../utils/duration.js";
 import { setDurationValidity } from "./durationValidity.js";
-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 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));
+	if (typeof value === "number") return formatDurationText(value);
+	if (isNumericString(value)) return formatDurationText(Number(value));
 	return "";
 };
-function DurationField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+function DurationField(props) {
+	const { field, disabled, onChange } = props;
 	const { form: t } = useStrings();
 	const name = field.name ?? "";
 	const [currentValue, change] = useFieldValue(name);
@@ -36,11 +39,11 @@ function DurationField({ field, label, labelPosition, missing, disabled, onChang
 		if (!focusedRef.current) setText(toDisplay(currentValue));
 	}, [currentValue]);
 	const trimmed = text.trim();
-	const parsed = trimmed === "" ? null : parseDuration(trimmed);
+	const parsed = trimmed === "" ? null : parseDurationText(trimmed);
 	let error = null;
 	if (!isSentinel && trimmed !== "") {
 		if (parsed === null) error = t.invalidDuration;
-		else if (parsed < min || parsed > max) error = Number.isFinite(max) ? t.durationOutOfRange(formatDuration(Math.max(min, 0)), formatDuration(max)) : t.durationBelowMin(formatDuration(Math.max(min, 0)));
+		else if (parsed < min || parsed > max) error = Number.isFinite(max) ? t.durationOutOfRange(formatDurationText(Math.max(min, 0)), formatDurationText(max)) : t.durationBelowMin(formatDurationText(Math.max(min, 0)));
 	}
 	useEffect(() => {
 		setDurationValidity(name, error === null);
@@ -60,7 +63,7 @@ function DurationField({ field, label, labelPosition, missing, disabled, onChang
 		const raw = e.target.value;
 		setText(raw);
 		const rawTrimmed = raw.trim();
-		const value = rawTrimmed === "" ? "" : parseDuration(rawTrimmed);
+		const value = rawTrimmed === "" ? "" : parseDurationText(rawTrimmed);
 		if (value === "" || typeof value === "number" && value >= min && value <= max) set(value);
 	};
 	const handleFocus = () => {
@@ -72,51 +75,34 @@ function DurationField({ field, label, labelPosition, missing, disabled, onChang
 			setText("");
 			set("");
 		} else if (parsed !== null && parsed >= min && parsed <= max) {
-			setText(formatDuration(parsed));
+			setText(formatDurationText(parsed));
 			set(parsed);
 		}
 	};
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional ?? false,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact: spaceCompact ?? false,
-		...field.description !== void 0 && { description: field.description },
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-			!isSentinel && /* @__PURE__ */ jsx("input", {
-				"data-1p-ignore": true,
-				className: clsx("w-full", disabled && "disabled", (missing || error !== null) && "invalid"),
-				id,
-				"aria-describedby": describedBy,
-				name,
-				value: text,
-				type: "text",
-				"aria-required": field.optional ? void 0 : true,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		error: error ?? props.error,
+		children: (control) => /* @__PURE__ */ jsxs(Fragment, { children: [!isSentinel && /* @__PURE__ */ jsx("input", {
+			...control,
+			"data-1p-ignore": true,
+			className: fieldBox(),
+			name,
+			value: text,
+			type: "text",
+			disabled,
+			placeholder: field.placeholder ?? "DD-HH:MM:SS",
+			onChange: handleChange,
+			onFocus: handleFocus,
+			onBlur: handleBlur
+		}), hasDisableCheckbox && /* @__PURE__ */ jsxs(FieldOption, {
+			disabled,
+			className: "flex items-center gap-2 text-sm",
+			children: [/* @__PURE__ */ jsx(Checkbox, {
+				checked: isSentinel,
 				disabled,
-				placeholder: field.placeholder ?? "DD-HH:MM:SS",
-				onChange: handleChange,
-				onFocus: handleFocus,
-				onBlur: handleBlur
-			}),
-			error && /* @__PURE__ */ jsx("div", {
-				className: "text-xs text-red-500 mt-1",
-				children: error
-			}),
-			hasDisableCheckbox && /* @__PURE__ */ jsxs("label", {
-				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: clsx("h-4 w-4 accent-(--theme-link)", disabled ? "cursor-not-allowed" : "cursor-pointer")
-				}), /* @__PURE__ */ jsx("span", {
-					className: "theme-text",
-					children: field.disableLabel
-				})]
-			})
-		] })
+				onCheckedChange: handleDisableToggle
+			}), field.disableLabel]
+		})] })
 	});
 }
 //#endregion

package/dist/form/Fields/LabelField.js

@@ -1,4 +1,4 @@
-import { clsx } from "clsx";
+import { cx } from "../../cx.js";
 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: clsx("relative", "text-md", field.bold !== false ? "font-bold" : ""),
+			className: cx("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

@@ -8,5 +8,5 @@ export interface IMultiDropdownField extends BaseField {
     options: MultiDropdownOption[] | Record<string, MultiDropdownOption[]>;
     parentValue?: string | boolean | number;
 }
-export default function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, onChange, }: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;
+export default function MultiDropdownField(props: FieldComponentProps<IMultiDropdownField>): import("react").JSX.Element;
 export {};

package/dist/form/Fields/MultiDropdownField.js

@@ -1,13 +1,15 @@
 import { Combobox } from "../../components/Combobox.js";
+import { Field } from "../../components/Field.js";
 import { toFieldItems } from "../utils/fieldItems.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { useDependentOptions } from "../utils/dependentOptions.js";
 import { usePrevious } from "../usePrevious.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 //#region src/form/Fields/MultiDropdownField.tsx
-function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spaceCompact, disabled, missing, onChange }) {
+function MultiDropdownField(props) {
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const dependent = useDependentOptions(field.options, field.depends_on);
 	const items = useMemo(() => toFieldItems(dependent.options), [dependent.options]);
@@ -20,15 +22,10 @@ function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spa
 		parentValue,
 		change
 	]);
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(Combobox, {
-			id,
-			"aria-describedby": describedBy,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => /* @__PURE__ */ jsx(Combobox, {
+			...control,
 			multiple: true,
 			items,
 			value: value ?? [],
@@ -36,9 +33,7 @@ function MultiDropdownField({ field, label, tooltipComponent, labelPosition, spa
 				change(next);
 				onChange?.(next);
 			},
-			required: !field.optional,
-			disabled,
-			"aria-invalid": missing
+			disabled
 		})
 	});
 }

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

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

package/dist/form/Fields/NumberField.js

@@ -1,12 +1,10 @@
-import { FaAngleDown } from "../../icons/fa/FaAngleDown.js";
-import { FaAngleUp } from "../../icons/fa/FaAngleUp.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { Field } from "../../components/Field.js";
+import { NumberInput } from "../../components/NumberInput.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { NumberField } from "@base-ui/react/number-field";
 //#region src/form/Fields/NumberField.tsx
 /** A value held as text, as one read from a workflow's inputs may be, still shows as its number. */
 function toNumber(value) {
@@ -17,23 +15,18 @@ function toNumber(value) {
 	}
 	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 }) {
+function NumberField(props) {
+	const { field, disabled, onChange } = props;
 	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 (seed !== void 0) change(seed);
 	}, [seed, change]);
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		description: field.description,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => /* @__PURE__ */ jsx(NumberField.Root, {
-			id,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => /* @__PURE__ */ jsx(NumberInput, {
+			...control,
 			name: field.name,
 			value: toNumber(value),
 			onValueChange: (next) => {
@@ -45,38 +38,10 @@ function NumberField$1({ field, label, labelPosition, missing, disabled, onChang
 			max: field.max,
 			step: field.step,
 			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"
-						})
-					})]
-				})]
-			})
+			format: { useGrouping: field.thousandsSeparator ?? false },
+			placeholder: getPlaceholder(field.placeholder, field.default)
 		})
 	});
 }
 //#endregion
-export { NumberField$1 as default };
+export { NumberField as default };

package/dist/form/Fields/ObjectField.js

@@ -1,4 +1,4 @@
-import { FieldGroup } from "../FieldGroup.js";
+import { Section } from "../../components/Section.js";
 import { FieldsFromOptions, resolveMetaOverrides } from "../Form.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
@@ -7,9 +7,9 @@ function ObjectField({ field, label, tooltipComponent, labelPosition, spaceCompa
 	const fieldName = field.name ?? "";
 	const meta = resolveMetaOverrides(field.options, labelPosition, spaceCompact ?? false);
 	const parentInfo = useMemo(() => ({ fieldNamePrefix: `${fieldName}.` }), [fieldName]);
-	return /* @__PURE__ */ jsx(FieldGroup, {
+	return /* @__PURE__ */ jsx(Section, {
 		title: field.label || label,
-		actions: tooltipComponent,
+		beside: tooltipComponent,
 		collapsible: !field.noCollapse,
 		defaultOpen: !field.collapsed,
 		children: /* @__PURE__ */ jsx(FieldsFromOptions, {

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

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

package/dist/form/Fields/RadioField.js

@@ -1,27 +1,23 @@
+import { cx } from "../../cx.js";
+import { Field, FieldOption } from "../../components/Field.js";
 import { Radio, RadioGroup } from "../../components/Radio.js";
-import { FieldWrapper } from "../FieldWrapper.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";
 //#region src/form/Fields/RadioField.tsx
-function RadioField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+function RadioField(props) {
+	const { field, error, disabled, onChange } = props;
 	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(RadioGroup, {
-			"aria-labelledby": labelId,
-			"aria-describedby": describedBy,
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props, { group: true }),
+		children: (control) => /* @__PURE__ */ jsx(RadioGroup, {
+			...control,
 			name: field.name,
-			required: !field.optional,
 			disabled,
 			value: value === void 0 || value === null ? null : String(value),
 			onValueChange: (next) => {
@@ -29,14 +25,15 @@ function RadioField({ field, label, labelPosition, missing, disabled, onChange,
 				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"),
+			className: cx("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(FieldOption, {
+				disabled,
+				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ jsx(Radio, {
 					value: option.value,
-					"aria-invalid": missing || void 0
+					"aria-invalid": error !== void 0 || void 0
 				}), /* @__PURE__ */ jsx("span", {
-					className: clsx("theme-text", option.unlabelled && "capitalize"),
+					className: cx("theme-text", option.unlabelled && "capitalize"),
 					children: option.label
 				})]
 			}, option.value))

package/dist/form/Fields/RangeField.js

@@ -1,22 +1,27 @@
-import { FieldWrapper } from "../FieldWrapper.js";
+import { Field } from "../../components/Field.js";
+import { NumberInput } from "../../components/NumberInput.js";
+import { Slider } from "../../components/Slider.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/form/Fields/RangeField.tsx
+/** A value held as text, as one read from a workflow's inputs may be, still places the slider. */
+function toNumber(value) {
+	const number = typeof value === "string" && value.trim() !== "" ? Number(value) : value;
+	return typeof number === "number" && Number.isFinite(number) ? number : null;
+}
 function RangeField(props) {
-	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact } = props;
+	const { field, label, disabled, onChange } = 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));
-			change(val);
-			onChange?.(val);
-		}
+	const set = (next) => {
+		if (next === null) return;
+		const clamped = Math.max(field.min, Math.min(field.max, next));
+		change(clamped);
+		onChange?.(clamped);
 	};
 	const seedValue = field.default ?? field.min;
 	const seed = (value === void 0 || value === null) && seedValue !== void 0;
@@ -28,36 +33,30 @@ function RangeField(props) {
 		name,
 		setValue
 	]);
-	const currentValue = value ?? seedValue ?? "";
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, labelId }) => /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center",
-			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,
+	const current = toNumber(value) ?? seedValue;
+	const step = field.step || 1;
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-4",
+			children: [/* @__PURE__ */ jsx(NumberInput, {
+				...control,
+				name: field.name,
+				value: current,
+				onValueChange: set,
 				min: field.min,
 				max: field.max,
-				step: field.step || 1,
+				step,
 				disabled,
-				onChange: handleChange
-			}), /* @__PURE__ */ jsx("input", {
-				className: clsx("rounded w-full", disabled && "disabled"),
-				name: field.name,
-				value: currentValue,
-				type: "range",
-				"aria-labelledby": labelId,
+				className: "w-28 shrink-0"
+			}), /* @__PURE__ */ jsx(Slider, {
+				"aria-label": label,
+				value: current,
+				onValueChange: set,
 				min: field.min,
 				max: field.max,
-				step: field.step || 1,
-				disabled,
-				onChange: handleChange
+				step,
+				disabled
 			})]
 		})
 	});

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

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

package/dist/form/Fields/StringField.js

@@ -1,13 +1,14 @@
-import { LuEye } from "../../icons/lu/LuEye.js";
-import { LuEyeOff } from "../../icons/lu/LuEyeOff.js";
-import { FieldWrapper } from "../FieldWrapper.js";
+import { cx } from "../../cx.js";
+import { fieldBox } from "../../components/fieldBox.js";
+import { Field, RevealToggle } from "../../components/Field.js";
+import { fieldFrame } from "../fieldFrame.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 //#region src/form/Fields/StringField.tsx
-function StringField({ field, label, labelPosition, missing, disabled, onChange, tooltipComponent, spaceCompact }) {
+function StringField(props) {
+	const { field, disabled, onChange } = props;
 	const [value, change] = useFieldValue(field.name ?? "");
 	const [revealed, setRevealed] = useState(false);
 	const password = field.type === "password";
@@ -28,23 +29,16 @@ function StringField({ field, label, labelPosition, missing, disabled, onChange,
 		onChange?.(next);
 		change(next);
 	};
-	return /* @__PURE__ */ jsx(FieldWrapper, {
-		optional: field.optional,
-		label,
-		tooltipComponent,
-		description: field.description,
-		labelPosition,
-		spaceCompact,
-		children: ({ id, describedBy }) => {
+	return /* @__PURE__ */ jsx(Field, {
+		...fieldFrame(props),
+		children: (control) => {
 			const input = /* @__PURE__ */ jsx("input", {
-				id,
-				"aria-describedby": describedBy,
+				...control,
 				"data-1p-ignore": true,
-				className: clsx("w-full", disabled && "disabled", missing && "invalid", password && "pr-8"),
+				className: cx(fieldBox(), password && "pr-9"),
 				name: field.name,
 				value: password && value === fallback ? "" : value ?? "",
 				type: password && !revealed ? "password" : "text",
-				"aria-required": field.optional ? void 0 : true,
 				disabled,
 				placeholder: password && field.placeholder === void 0 ? "•".repeat(fallback.toString().length > 0 ? 16 : 0) : getPlaceholder(field.placeholder, field.default),
 				minLength: field.minLength,
@@ -53,14 +47,10 @@ function StringField({ field, label, labelPosition, missing, disabled, onChange,
 			});
 			return password ? /* @__PURE__ */ jsxs("div", {
 				className: "relative w-full",
-				children: [input, /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "absolute right-2 top-1/2 -translate-y-1/2 theme-muted-text",
-					onClick: () => setRevealed((shown) => !shown),
-					disabled,
-					tabIndex: -1,
-					"aria-label": revealed ? "Hide value" : "Show value",
-					children: revealed ? /* @__PURE__ */ jsx(LuEyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(LuEye, { className: "h-4 w-4" })
+				children: [input, /* @__PURE__ */ jsx(RevealToggle, {
+					revealed,
+					onRevealedChange: setRevealed,
+					disabled
 				})]
 			}) : input;
 		}