pentatrion-design 1.2.10 → 1.2.12

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 1.2.12
+
+### Patch Changes
+
+- 4cce0c9: update deps
+- 4cce0c9: enhance Range AudioRange RangeField
+
+## 1.2.11
+
+### Patch Changes
+
+- 53018ea: tabs added preload prop
+
 ## 1.2.10
 
 ### Patch Changes

package/dist/components/fields/range/index.d.mts

@@ -1,11 +1,10 @@
 import { i as ThemeColor } from "../../../types-CbJroQxH.mjs";
 import { n as FieldProps } from "../../../Field-DhaPMGcl.mjs";
-import { ComponentPropsWithRef, RefObject } from "react";
+import { ComponentProps } from "react";
 import { FieldName } from "@conform-to/react/future";
 //#region src/components/fields/range/Range.d.ts
-interface RangeProps$1 extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "min" | "max" | "step"> {
-  defaultValue?: number | string;
-  value?: number | string;
+interface RangeProps$1 extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "min" | "max" | "step" | "onPointerDown" | "onPointerUp" | "onTouchEnd" | "ref"> {
+  value: number;
   additionalBarValue?: number;
   min?: number;
   max?: number;
@@ -16,23 +15,22 @@ interface RangeProps$1 extends Omit<ComponentPropsWithRef<"input">, "value" | "d
   valuesByTick?: number;
   color?: ThemeColor;
   formatter?: (str: number) => string;
-  ref?: RefObject<HTMLInputElement>;
+  onChangeCommitted?: (valueAsNumber: number) => void;
 }
-declare function Range({ className, defaultValue, additionalBarValue, value: controlledValue, min, max, color, showMinMax, step, valuesByTick, showValue, ticks, formatter, onChange, ref, ...rest }: RangeProps$1): import("react").JSX.Element;
+declare function Range({ className, additionalBarValue, value: controlledValue, min, max, color, showMinMax, step, valuesByTick, showValue, ticks, formatter, onChange, onChangeCommitted, ...rest }: RangeProps$1): import("react").JSX.Element;
 //#endregion
 //#region src/components/fields/range/AudioRange.d.ts
-interface RangeProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "min" | "max" | "step"> {
-  defaultValue?: number | string;
-  value?: number | string;
+interface RangeProps extends Omit<ComponentProps<"input">, "value" | "defaultValue" | "min" | "max" | "step" | "onPointerDown" | "onPointerUp" | "onTouchEnd" | "onKeyDown" | "ref"> {
+  value: number;
   min?: number;
   max?: number;
   step?: number;
   color?: ThemeColor;
   formatter?: (str: number) => string;
-  ref?: RefObject<HTMLInputElement>;
   valueClassName?: string;
+  onChangeCommitted?: (valueAsNumber: number) => void;
 }
-declare function AudioRange({ className, valueClassName, defaultValue, value: controlledValue, min, max, color, step, formatter, onChange, ref, ...rest }: RangeProps): import("react").JSX.Element;
+declare function AudioRange({ className, valueClassName, value: controlledValue, min, max, color, step, formatter, onChange, onChangeCommitted, ...rest }: RangeProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/fields/range/RangeField.d.ts
 interface Props extends Omit<FieldProps, "errors" | "children" | "group"> {

package/dist/components/fields/range/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/fields/range/Range.tsx","../../../../src/components/fields/range/AudioRange.tsx","../../../../src/components/fields/range/RangeField.tsx"],"mappings":";;;;;UAKiB,qBAAmB,KAClC;EAGA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EAEA,QAAQ;EAER,aAAa;EAEb,MAAM,UAAU;;iBAKF,QACd,WACA,cACA,oBACA,OAAO,iBACP,KACA,KACA,OACA,YACA,MACA,cACA,WACA,OACA,WACA,UACA,QACG,QACF,+BAAU,IAAA;;;UCnCI,mBAAmB,KAClC;EAGA;EACA;EAEA;EACA;EACA;EAEA,QAAQ;EAER,aAAa;EAEb,MAAM,UAAU;EAEhB;;iBAKc,aACd,WACA,gBACA,cACA,OAAO,iBACP,KACA,KACA,OACA,MACA,WACA,UACA,QACG,QACF,6BAAU,IAAA;;;UChDH,cAAc,KAAK;EAC3B,MAAM;EAEN;EACA;EACA;EACA;EACA;;iBAGc,aACd,MACA,KACA,KACA,MACA,YACA,WACA,IAAI,aACD,QACF,wBAAK,IAAA"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/fields/range/Range.tsx","../../../../src/components/fields/range/AudioRange.tsx","../../../../src/components/fields/range/RangeField.tsx"],"mappings":";;;;;UAKiB,qBAAmB,KAClC;EAWA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EAEA;EAEA;EAEA,QAAQ;EAER,aAAa;EAEb,qBAAqB;;iBAKP,QACd,WACA,oBACA,OAAO,iBACP,KACA,KACA,OACA,YACA,MACA,cACA,WACA,OACA,WACA,UACA,sBACG,QACF,+BAAU,IAAA;;;UCzCI,mBAAmB,KAClC;EAYA;EAEA;EACA;EACA;EAEA,QAAQ;EAER,aAAa;EAEb;EAEA,qBAAqB;;iBAKP,aACd,WACA,gBACA,OAAO,iBACP,KACA,KACA,OACA,MACA,WACA,UACA,sBACG,QACF,6BAAU,IAAA;;;UCvDH,cAAc,KAAK;EAC3B,MAAM;EAEN;EACA;EACA;EACA;EACA;;iBAGc,aACd,MACA,KACA,KACA,MACA,YACA,WACA,IAAI,aACD,QACF,wBAAK,IAAA"}

package/dist/components/fields/range/index.mjs

@@ -1,31 +1,38 @@
 import { t as Field } from "../../../Field-DZmC5a1D.mjs";
 import { c } from "react/compiler-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useField } from "@conform-to/react/future";
+import { useControl, useField } from "@conform-to/react/future";
 //#region src/components/fields/range/Range.tsx
 const trackBase$1 = "pointer-events-none absolute top-0 left-0 h-full";
-function Range({ className, defaultValue, additionalBarValue, value: controlledValue, min = 0, max = 100, color = "yellow", showMinMax = "onHover", step = 1, valuesByTick, showValue = true, ticks = false, formatter = (str) => str?.toString(), onChange, ref, ...rest }) {
-	const isControlled = typeof controlledValue !== "undefined";
-	const [unControlledValue, setUnControlledValue] = useState(defaultValue);
-	const value = isControlled ? controlledValue : unControlledValue;
-	const valueAsNumber = typeof value === "string" ? parseInt(value) : value;
+function Range({ className, additionalBarValue, value: controlledValue, min = 0, max = 100, color = "yellow", showMinMax = "onHover", step = 1, valuesByTick, showValue = true, ticks = false, formatter = (str) => str?.toString(), onChange, onChangeCommitted, ...rest }) {
+	const rangeRef = useRef(null);
+	const [tempValue, setTempValue] = useState(void 0);
+	const isTemp = typeof tempValue !== "undefined";
+	const value = isTemp ? tempValue : controlledValue;
 	const range = max - min;
-	const percent = (valueAsNumber - min) / range;
+	const percent = (value - min) / range;
 	const additionalPercent = additionalBarValue ? (additionalBarValue - min) / range : 0;
 	const nbOfTicks = 1 + Math.floor(range / (valuesByTick ?? step ?? 5));
 	const cssVars = useMemo(() => ({
-		"--p8n-range-c-bg": `var(--color-custom-1)`,
-		"--p8n-range-c-bg-2": `var(--color-custom-2)`,
-		"--p8n-range-c-fg": `var(--color-custom-4)`,
 		"--p8n-range-progress-percent": `${percent * 100}%`,
 		"--p8n-range-additional-percent": `${additionalPercent * 100}%`
 	}), [percent, additionalPercent]);
 	const handleChange = (e) => {
-		if (!isControlled) setUnControlledValue(e.target.valueAsNumber);
-		if (onChange) onChange(e);
+		if (isTemp) setTempValue(e.target.valueAsNumber);
+		onChange?.(e);
 	};
+	function handleSeekStart() {
+		setTempValue(rangeRef.current.valueAsNumber);
+	}
+	function handleSeekEnd() {
+		setTempValue(void 0);
+		onChangeCommitted?.(rangeRef.current.valueAsNumber);
+	}
+	function handleKeyUp() {
+		onChangeCommitted?.(rangeRef.current.valueAsNumber);
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("group relative flex", className),
 		style: cssVars,
@@ -43,13 +50,13 @@ function Range({ className, defaultValue, additionalBarValue, value: controlledV
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative h-2 w-[calc(100%-2rem)]",
 					children: [
-						/* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "track w-full bg-(--p8n-range-c-bg) after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:bg-(--p8n-range-c-bg)") }),
-						typeof additionalBarValue !== "undefined" && /* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "w-(--p8n-range-additional-percent) rounded-[3px] bg-(--p8n-range-c-bg-2) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-bg-2)") }),
+						/* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "track w-full bg-custom-1 after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:bg-custom-1") }),
+						typeof additionalBarValue !== "undefined" && /* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "w-(--p8n-range-additional-percent) rounded-[3px] bg-custom-2 before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-custom-2") }),
 						showValue && /* @__PURE__ */ jsx("div", {
 							className: "text-body-sm pointer-events-none absolute bottom-4 left-(--p8n-range-progress-percent) -translate-x-2/4",
-							children: formatter(valueAsNumber)
+							children: formatter(value)
 						}),
-						/* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "w-(--p8n-range-progress-percent) rounded-[3px] bg-(--p8n-range-c-fg) before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-(--p8n-range-c-fg)") }),
+						/* @__PURE__ */ jsx("div", { className: clsx(trackBase$1, "w-(--p8n-range-progress-percent) rounded-[3px] bg-custom-4 before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:bg-custom-4") }),
 						ticks && /* @__PURE__ */ jsx("div", {
 							className: clsx(trackBase$1, "-mx-0.5 flex w-[calc(100%+0.25rem)] items-center justify-between"),
 							children: Array.from({ length: nbOfTicks }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "bg-gray-0 h-1 w-1 rounded-full" }, i))
@@ -60,13 +67,16 @@ function Range({ className, defaultValue, additionalBarValue, value: controlledV
 			/* @__PURE__ */ jsx("input", {
 				type: "range",
 				className: clsx("p8n-input-range h-8 w-full min-w-0 bg-transparent outline-offset-[0.75rem]"),
-				ref,
+				ref: rangeRef,
 				min,
 				max,
 				step,
-				defaultValue,
-				value: controlledValue,
+				value,
 				onChange: handleChange,
+				onPointerDown: handleSeekStart,
+				onPointerUp: handleSeekEnd,
+				onTouchEnd: handleSeekEnd,
+				onKeyUp: handleKeyUp,
 				...rest
 			})
 		]
@@ -83,12 +93,11 @@ const formatTime = (time) => {
 };
 const trackBase = "pointer-events-none absolute top-0 left-0 h-full";
 function AudioRange(t0) {
-	const $ = c(57);
+	const $ = c(63);
 	let className;
 	let controlledValue;
-	let defaultValue;
 	let onChange;
-	let ref;
+	let onChangeCommitted;
 	let rest;
 	let t1;
 	let t2;
@@ -97,269 +106,269 @@ function AudioRange(t0) {
 	let t5;
 	let valueClassName;
 	if ($[0] !== t0) {
-		({className, valueClassName, defaultValue, value: controlledValue, min: t1, max: t2, color: t3, step: t4, formatter: t5, onChange, ref, ...rest} = t0);
+		({className, valueClassName, value: controlledValue, min: t1, max: t2, color: t3, step: t4, formatter: t5, onChange, onChangeCommitted, ...rest} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = controlledValue;
-		$[3] = defaultValue;
-		$[4] = onChange;
-		$[5] = ref;
-		$[6] = rest;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-		$[11] = t5;
-		$[12] = valueClassName;
+		$[3] = onChange;
+		$[4] = onChangeCommitted;
+		$[5] = rest;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = valueClassName;
 	} else {
 		className = $[1];
 		controlledValue = $[2];
-		defaultValue = $[3];
-		onChange = $[4];
-		ref = $[5];
-		rest = $[6];
-		t1 = $[7];
-		t2 = $[8];
-		t3 = $[9];
-		t4 = $[10];
-		t5 = $[11];
-		valueClassName = $[12];
+		onChange = $[3];
+		onChangeCommitted = $[4];
+		rest = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
+		t5 = $[10];
+		valueClassName = $[11];
 	}
 	const min = t1 === void 0 ? 0 : t1;
 	const max = t2 === void 0 ? 100 : t2;
 	const color = t3 === void 0 ? "yellow" : t3;
 	const step = t4 === void 0 ? 1 : t4;
 	const formatter = t5 === void 0 ? formatTime : t5;
-	const isControlled = typeof controlledValue !== "undefined";
-	const [unControlledValue, setUnControlledValue] = useState(defaultValue);
-	const value = isControlled ? controlledValue : unControlledValue;
-	const valueAsNumber = typeof value === "string" ? parseInt(value) : value;
+	const rangeRef = useRef(null);
+	const [tempValue, setTempValue] = useState(void 0);
+	const isTemp = typeof tempValue !== "undefined";
+	const value = isTemp ? tempValue : controlledValue;
 	const range = max - min;
-	const t6 = `${(valueAsNumber - min) / range * 100}%`;
+	const t6 = `${(value - min) / range * 100}%`;
 	let t7;
-	if ($[13] !== t6) {
-		t7 = {
-			"--p8n-range-c-bg": "var(--color-custom-1)",
-			"--p8n-range-c-fg": "var(--color-custom-4)",
-			"--p8n-range-progress-percent": t6
-		};
-		$[13] = t6;
-		$[14] = t7;
-	} else t7 = $[14];
+	if ($[12] !== t6) {
+		t7 = { "--p8n-range-progress-percent": t6 };
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
 	const cssVars = t7;
 	let t8;
-	if ($[15] !== isControlled || $[16] !== onChange) {
+	if ($[14] !== isTemp || $[15] !== onChange) {
 		t8 = (e) => {
-			if (!isControlled) setUnControlledValue(e.target.valueAsNumber);
-			if (onChange) onChange(e);
+			if (isTemp) setTempValue(e.target.valueAsNumber);
+			onChange?.(e);
 		};
-		$[15] = isControlled;
-		$[16] = onChange;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[14] = isTemp;
+		$[15] = onChange;
+		$[16] = t8;
+	} else t8 = $[16];
 	const handleChange = t8;
 	let t9;
-	if ($[18] !== valueClassName) {
-		t9 = clsx("text-right", valueClassName);
-		$[18] = valueClassName;
-		$[19] = t9;
-	} else t9 = $[19];
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = function handleSeekStart() {
+			setTempValue(rangeRef.current.valueAsNumber);
+		};
+		$[17] = t9;
+	} else t9 = $[17];
+	const handleSeekStart = t9;
 	let t10;
-	if ($[20] !== formatter || $[21] !== valueAsNumber) {
-		t10 = formatter(valueAsNumber);
-		$[20] = formatter;
-		$[21] = valueAsNumber;
-		$[22] = t10;
-	} else t10 = $[22];
+	if ($[18] !== onChangeCommitted) {
+		t10 = function handleSeekEnd() {
+			setTempValue(void 0);
+			onChangeCommitted?.(rangeRef.current.valueAsNumber);
+		};
+		$[18] = onChangeCommitted;
+		$[19] = t10;
+	} else t10 = $[19];
+	const handleSeekEnd = t10;
 	let t11;
-	if ($[23] !== t10 || $[24] !== t9) {
-		t11 = /* @__PURE__ */ jsx("div", {
-			className: t9,
-			children: t10
-		});
-		$[23] = t10;
-		$[24] = t9;
-		$[25] = t11;
-	} else t11 = $[25];
+	if ($[20] !== max || $[21] !== min || $[22] !== onChangeCommitted) {
+		t11 = function handleKeyDown(e_0) {
+			const currentVal = rangeRef.current.valueAsNumber;
+			bb41: switch (e_0.code) {
+				case "ArrowLeft":
+					e_0.preventDefault();
+					onChangeCommitted?.(Math.max(min, currentVal - 5));
+					break bb41;
+				case "ArrowRight":
+					e_0.preventDefault();
+					onChangeCommitted?.(Math.min(max, currentVal + 5));
+			}
+		};
+		$[20] = max;
+		$[21] = min;
+		$[22] = onChangeCommitted;
+		$[23] = t11;
+	} else t11 = $[23];
+	const handleKeyDown = t11;
 	let t12;
-	if ($[26] !== className) {
-		t12 = clsx("group relative flex flex-1", className);
-		$[26] = className;
-		$[27] = t12;
-	} else t12 = $[27];
+	if ($[24] !== valueClassName) {
+		t12 = clsx("text-right", valueClassName);
+		$[24] = valueClassName;
+		$[25] = t12;
+	} else t12 = $[25];
 	let t13;
-	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = clsx(trackBase, "right-0 bottom-0 flex items-center justify-center");
+	if ($[26] !== formatter || $[27] !== value) {
+		t13 = formatter(value);
+		$[26] = formatter;
+		$[27] = value;
 		$[28] = t13;
 	} else t13 = $[28];
 	let t14;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[29] !== t12 || $[30] !== t13) {
 		t14 = /* @__PURE__ */ jsx("div", {
-			className: t13,
+			className: t12,
+			children: t13
+		});
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] !== className) {
+		t15 = clsx("group relative flex flex-1", className);
+		$[32] = className;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = clsx(trackBase, "right-0 bottom-0 flex items-center justify-center");
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx("div", {
+			className: t16,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "relative h-2 w-[calc(100%-2rem)]",
-				children: [/* @__PURE__ */ jsx("div", { className: clsx(trackBase, "track bg-custom-2/50 after:bg-custom-2/50 w-full after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:mask-l-from-50% after:mask-l-to-transparent after:mask-l-to-50%") }), /* @__PURE__ */ jsx("div", { className: clsx(trackBase, "from-gray-8/70 to-gray-8/50 before:bg-gray-8/70 bg-linear-to-r from-5%", "group-hover:from-custom-4 group-hover:to-custom-3 group-hover:before:bg-custom-4 group-hover:bg-linear-to-r", "w-(--p8n-range-progress-percent) rounded-r-[4px]", "before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:mask-r-from-50% before:mask-r-to-transparent before:mask-r-to-50%") })]
+				children: [/* @__PURE__ */ jsx("div", { className: clsx(trackBase, "track bg-custom-2/50 after:bg-custom-2/50 w-full after:absolute after:left-[calc(100%-.25rem)] after:h-2 after:w-2 after:rounded-full after:mask-l-from-50% after:mask-l-to-transparent after:mask-l-to-50%") }), /* @__PURE__ */ jsx("div", { className: clsx(trackBase, "from-gray-8/70 to-gray-8/50 before:bg-gray-8/70 bg-linear-to-r from-5%", "group-hover:from-custom-4 group-hover:to-custom-3 group-hover:before:bg-custom-4 group-hover:bg-linear-to-r", "w-(--p8n-range-progress-percent) rounded-r-sm", "before:absolute before:-left-1 before:h-2 before:w-2 before:rounded-full before:mask-r-from-50% before:mask-r-to-transparent before:mask-r-to-50%") })]
 			})
 		});
-		$[29] = t14;
-	} else t14 = $[29];
-	let t15;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = clsx("p8n-input-audio-range h-8 w-full min-w-0 cursor-pointer bg-transparent outline-offset-[0.75rem]");
-		$[30] = t15;
-	} else t15 = $[30];
-	let t16;
-	if ($[31] !== controlledValue || $[32] !== defaultValue || $[33] !== handleChange || $[34] !== max || $[35] !== min || $[36] !== ref || $[37] !== rest || $[38] !== step) {
-		t16 = /* @__PURE__ */ jsx("input", {
+		$[35] = t17;
+	} else t17 = $[35];
+	let t18;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = clsx("p8n-input-audio-range h-8 w-full min-w-0 cursor-pointer bg-transparent outline-offset-[0.75rem]");
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== handleChange || $[38] !== handleKeyDown || $[39] !== handleSeekEnd || $[40] !== max || $[41] !== min || $[42] !== rest || $[43] !== step || $[44] !== value) {
+		t19 = /* @__PURE__ */ jsx("input", {
 			autoComplete: "off",
 			type: "range",
-			className: t15,
-			ref,
+			className: t18,
+			ref: rangeRef,
 			min,
 			max,
 			step,
-			defaultValue,
-			value: controlledValue,
+			value,
 			onChange: handleChange,
+			onPointerDown: handleSeekStart,
+			onPointerUp: handleSeekEnd,
+			onTouchEnd: handleSeekEnd,
+			onKeyDown: handleKeyDown,
 			...rest
 		});
-		$[31] = controlledValue;
-		$[32] = defaultValue;
-		$[33] = handleChange;
-		$[34] = max;
-		$[35] = min;
-		$[36] = ref;
-		$[37] = rest;
-		$[38] = step;
-		$[39] = t16;
-	} else t16 = $[39];
-	let t17;
-	if ($[40] !== color || $[41] !== cssVars || $[42] !== t12 || $[43] !== t16) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: t12,
+		$[37] = handleChange;
+		$[38] = handleKeyDown;
+		$[39] = handleSeekEnd;
+		$[40] = max;
+		$[41] = min;
+		$[42] = rest;
+		$[43] = step;
+		$[44] = value;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== color || $[47] !== cssVars || $[48] !== t15 || $[49] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: t15,
 			style: cssVars,
 			"data-color": color,
-			children: [t14, t16]
+			children: [t17, t19]
 		});
-		$[40] = color;
-		$[41] = cssVars;
-		$[42] = t12;
-		$[43] = t16;
-		$[44] = t17;
-	} else t17 = $[44];
-	let t18;
-	if ($[45] !== valueClassName) {
-		t18 = clsx(valueClassName);
-		$[45] = valueClassName;
-		$[46] = t18;
-	} else t18 = $[46];
-	let t19;
-	if ($[47] !== formatter || $[48] !== max) {
-		t19 = formatter(max);
-		$[47] = formatter;
-		$[48] = max;
+		$[46] = color;
+		$[47] = cssVars;
+		$[48] = t15;
 		$[49] = t19;
-	} else t19 = $[49];
-	let t20;
-	if ($[50] !== t18 || $[51] !== t19) {
-		t20 = /* @__PURE__ */ jsx("div", {
-			className: t18,
-			children: t19
-		});
-		$[50] = t18;
-		$[51] = t19;
-		$[52] = t20;
-	} else t20 = $[52];
+		$[50] = t20;
+	} else t20 = $[50];
 	let t21;
-	if ($[53] !== t11 || $[54] !== t17 || $[55] !== t20) {
-		t21 = /* @__PURE__ */ jsxs("div", {
+	if ($[51] !== valueClassName) {
+		t21 = clsx(valueClassName);
+		$[51] = valueClassName;
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== formatter || $[54] !== max) {
+		t22 = formatter(max);
+		$[53] = formatter;
+		$[54] = max;
+		$[55] = t22;
+	} else t22 = $[55];
+	let t23;
+	if ($[56] !== t21 || $[57] !== t22) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			className: t21,
+			children: t22
+		});
+		$[56] = t21;
+		$[57] = t22;
+		$[58] = t23;
+	} else t23 = $[58];
+	let t24;
+	if ($[59] !== t14 || $[60] !== t20 || $[61] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center",
 			children: [
-				t11,
-				t17,
-				t20
+				t14,
+				t20,
+				t23
 			]
 		});
-		$[53] = t11;
-		$[54] = t17;
-		$[55] = t20;
-		$[56] = t21;
-	} else t21 = $[56];
-	return t21;
+		$[59] = t14;
+		$[60] = t20;
+		$[61] = t23;
+		$[62] = t24;
+	} else t24 = $[62];
+	return t24;
 }
 //#endregion
 //#region src/components/fields/range/RangeField.tsx
-function RangeField(t0) {
-	const $ = c(23);
-	let forcedId;
-	let max;
-	let min;
-	let name;
-	let rest;
-	let showMinMax;
-	let showValue;
-	let step;
-	if ($[0] !== t0) {
-		({name, min, max, step, showMinMax, showValue, id: forcedId, ...rest} = t0);
-		$[0] = t0;
-		$[1] = forcedId;
-		$[2] = max;
-		$[3] = min;
-		$[4] = name;
-		$[5] = rest;
-		$[6] = showMinMax;
-		$[7] = showValue;
-		$[8] = step;
-	} else {
-		forcedId = $[1];
-		max = $[2];
-		min = $[3];
-		name = $[4];
-		rest = $[5];
-		showMinMax = $[6];
-		showValue = $[7];
-		step = $[8];
-	}
+function RangeField({ name, min, max, step, showMinMax, showValue, id: forcedId, ...rest }) {
 	const field = useField(name);
 	const id = forcedId ?? field.id;
-	const numberValue = field.defaultValue ? parseInt(field.defaultValue) : void 0;
-	let t1;
-	if ($[9] !== field.name || $[10] !== max || $[11] !== min || $[12] !== numberValue || $[13] !== showMinMax || $[14] !== showValue || $[15] !== step) {
-		t1 = /* @__PURE__ */ jsx(Range, {
-			name: field.name,
-			defaultValue: numberValue,
+	const control = useControl({
+		defaultValue: field.defaultValue,
+		parse(payload) {
+			if (typeof payload !== "string") throw new Error("range input must return string");
+			return parseInt(payload);
+		},
+		serialize(value) {
+			return value.toString();
+		}
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
+		type: "text",
+		name: field.name,
+		ref: control.register,
+		hidden: true
+	}), /* @__PURE__ */ jsx(Field, {
+		id,
+		errors: field.errors,
+		"data-testid": field.name,
+		...rest,
+		children: /* @__PURE__ */ jsx(Range, {
+			value: control.payload ?? 0,
 			min,
 			max,
 			step,
 			showMinMax,
-			showValue
-		});
-		$[9] = field.name;
-		$[10] = max;
-		$[11] = min;
-		$[12] = numberValue;
-		$[13] = showMinMax;
-		$[14] = showValue;
-		$[15] = step;
-		$[16] = t1;
-	} else t1 = $[16];
-	let t2;
-	if ($[17] !== field.errors || $[18] !== field.name || $[19] !== id || $[20] !== rest || $[21] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Field, {
-			id,
-			errors: field.errors,
-			"data-testid": field.name,
-			...rest,
-			children: t1
-		});
-		$[17] = field.errors;
-		$[18] = field.name;
-		$[19] = id;
-		$[20] = rest;
-		$[21] = t1;
-		$[22] = t2;
-	} else t2 = $[22];
-	return t2;
+			showValue,
+			onChangeCommitted: (value_0) => {
+				control.change(value_0);
+			},
+			onBlur: () => control.blur()
+		})
+	})] });
 }
 //#endregion
 export { AudioRange, Range, RangeField };