@multiplatform.one/forms 6.7.0 → 7.0.0

package/dist/cjs/fields/Stepper/index.native.js

@@ -28,20 +28,20 @@ __export(Stepper_exports, {
 });
 module.exports = __toCommonJS(Stepper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
 var import_tamagui = require("tamagui");
+var import_theme = require("@multiplatform.one/theme");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_utils = require("../../shared/utils.native.js");
 var import_useWheelIncrement = require("../../shared/useWheelIncrement.native.js");
 var import_InputParts = require("../../InputParts/index.native.js");
-var import_ControlGroup = require("../../ControlGroup/index.native.js");
-var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
-var import_Button = require("../../Button/index.native.js");
+var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var repeatDelay = 400;
 var repeatInterval = 80;
+var LARGE_STEP_FACTOR = 10;
 var stepperCssTimings = {
   bouncy: "ease-in 200ms",
   lazy: "ease-in 600ms",
@@ -52,12 +52,21 @@ var stepperCssTimings = {
   snappy: "ease-out 80ms",
   gentle: "ease-in-out 450ms"
 };
+var noButtonRing = {
+  outlineWidth: 0,
+  outlineStyle: "none",
+  outlineColor: "transparent"
+};
+function preventFocusSteal(e) {
+  var _e_preventDefault;
+  (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+}
 function useRepeatAction(action, repeatingRef) {
-  var timerRef = (0, import_react.useRef)(null);
-  var intervalRef = (0, import_react.useRef)(null);
-  var actionRef = (0, import_react.useRef)(action);
+  var timerRef = (0, import_react2.useRef)(null);
+  var intervalRef = (0, import_react2.useRef)(null);
+  var actionRef = (0, import_react2.useRef)(action);
   actionRef.current = action;
-  var stop = (0, import_react.useCallback)(function () {
+  var stop = (0, import_react2.useCallback)(function () {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -68,7 +77,7 @@ function useRepeatAction(action, repeatingRef) {
     }
     repeatingRef.current = false;
   }, [repeatingRef]);
-  var start = (0, import_react.useCallback)(function () {
+  var start = (0, import_react2.useCallback)(function () {
     stop();
     actionRef.current();
     timerRef.current = setTimeout(function () {
@@ -78,7 +87,7 @@ function useRepeatAction(action, repeatingRef) {
       }, repeatInterval);
     }, repeatDelay);
   }, [stop, repeatingRef]);
-  (0, import_react.useEffect)(function () {
+  (0, import_react2.useEffect)(function () {
     return stop;
   }, [stop]);
   return {
@@ -86,6 +95,51 @@ function useRepeatAction(action, repeatingRef) {
     onPressOut: stop
   };
 }
+function StepperSpinButton(param) {
+  var {
+    kind,
+    disabled,
+    stacked,
+    seam,
+    onPressIn,
+    onPressOut,
+    onActivate,
+    children
+  } = param;
+  var label = kind === "increment" ? (0, import_t.t)("Increase") : (0, import_t.t)("Decrease");
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+    tabIndex: -1,
+    disabled,
+    "aria-disabled": disabled || void 0,
+    "aria-label": label,
+    "data-stepper-button": kind,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.4 : 1,
+    height: stacked ? "50%" : "100%",
+    flex: stacked ? 1 : void 0,
+    alignSelf: "stretch",
+    borderBottomWidth: seam === "bottom" ? 1 : 0,
+    borderInlineEndWidth: seam === "end" ? 1 : 0,
+    borderInlineStartWidth: seam === "start" ? 1 : 0,
+    borderColor: import_colorRamps.formInputColors.border.base,
+    focusStyle: noButtonRing,
+    focusVisibleStyle: noButtonRing,
+    hoverStyle: disabled ? {
+      backgroundColor: "transparent"
+    } : void 0,
+    onMouseDown: function onMouseDown(e) {
+      preventFocusSteal(e);
+      onActivate();
+    },
+    onPointerDown: function onPointerDown(e) {
+      preventFocusSteal(e);
+      onActivate();
+    },
+    onPressIn: disabled ? void 0 : onPressIn,
+    onPressOut,
+    children
+  });
+}
 function Stepper(props) {
   var {
     defaultValue,
@@ -96,7 +150,8 @@ function Stepper(props) {
     step = 1,
     precision = 0,
     showButtons = true,
-    buttonPosition = "both",
+    // Spectrum NumberField default: stacked carets on the trailing edge.
+    buttonPosition = "right",
     allowEmpty = false,
     placeholder,
     mode,
@@ -113,6 +168,7 @@ function Stepper(props) {
     size,
     onBlur,
     onChange,
+    value: valueProp,
     skeleton,
     compact,
     id: idProp,
@@ -121,7 +177,6 @@ function Stepper(props) {
   var {
     resolvedForm,
     knobProps,
-    control,
     id
   } = (0, import_utils.useFormField)({
     form,
@@ -129,72 +184,89 @@ function Stepper(props) {
     compact
   });
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  var motionTransition = knobProps.transition || "quick";
-  var areaFocusRing = (0, import_theme.ensureFocusVisibleRing)({
-    ...control.focusVisibleKnobProps,
-    outlineOffset: -2
-  });
-  var [inputValue, setInputValue] = (0, import_react.useState)(function () {
-    if (defaultValue !== void 0 && defaultValue !== null) {
-      return precision > 0 ? defaultValue.toFixed(precision) : String(defaultValue);
+  var motionTransition = knobProps.transition;
+  var controlSize = size || knobProps.sizeToken;
+  var iconPx = (0, import_theme.sizeRecipeForToken)(String(controlSize)).iconSize;
+  var isControlled = valueProp !== void 0 && !name;
+  var [inputValue, setInputValue] = (0, import_react2.useState)(function () {
+    var initial = isControlled ? valueProp : defaultValue;
+    if (initial !== void 0 && initial !== null) {
+      return precision > 0 ? initial.toFixed(precision) : String(initial);
     }
     return "";
   });
-  var [valueFlash, setValueFlash] = (0, import_react.useState)(false);
-  var repeatingRef = (0, import_react.useRef)(false);
-  var typingRef = (0, import_react.useRef)(false);
-  var incrementRef = (0, import_react.useRef)(function () {});
-  var decrementRef = (0, import_react.useRef)(function () {});
-  var pulseDiscreteStep = (0, import_react.useCallback)(function () {
+  var [valueFlash, setValueFlash] = (0, import_react2.useState)(false);
+  var repeatingRef = (0, import_react2.useRef)(false);
+  var typingRef = (0, import_react2.useRef)(false);
+  var incrementRef = (0, import_react2.useRef)(function () {});
+  var decrementRef = (0, import_react2.useRef)(function () {});
+  var areaRef = (0, import_react2.useRef)(null);
+  var focusArea = (0, import_react2.useCallback)(function () {
+    var _node_focus;
+    var node = areaRef.current;
+    node === null || node === void 0 ? void 0 : (_node_focus = node.focus) === null || _node_focus === void 0 ? void 0 : _node_focus.call(node);
+  }, []);
+  var pulseDiscreteStep = (0, import_react2.useCallback)(function () {
     if (repeatingRef.current || typingRef.current) return;
+    if (!motionTransition) return;
     setValueFlash(true);
     setTimeout(function () {
       return setValueFlash(false);
     }, 90);
-  }, []);
+  }, [motionTransition]);
   var repeatIncrement = useRepeatAction(function () {
     return incrementRef.current();
   }, repeatingRef);
   var repeatDecrement = useRepeatAction(function () {
     return decrementRef.current();
   }, repeatingRef);
-  var formatValue = (0, import_react.useCallback)(function (value) {
+  var formatValue = (0, import_react2.useCallback)(function (value) {
     if (value === null || value === void 0) return "";
     return precision > 0 ? value.toFixed(precision) : value.toString();
   }, [precision]);
-  var parseValue = (0, import_react.useCallback)(function (value) {
+  var parseValue = (0, import_react2.useCallback)(function (value) {
     if (value === "" && allowEmpty) return null;
     var parsed = Number.parseFloat(value);
     return Number.isNaN(parsed) ? null : parsed;
   }, [allowEmpty]);
   var boundsLo = min !== void 0 && max !== void 0 ? Math.min(min, max) : min;
   var boundsHi = min !== void 0 && max !== void 0 ? Math.max(min, max) : max;
-  var clampValue = (0, import_react.useCallback)(function (value) {
+  var clampValue = (0, import_react2.useCallback)(function (value) {
     if (value === null) return null;
     if (boundsLo !== void 0 && value < boundsLo) return boundsLo;
     if (boundsHi !== void 0 && value > boundsHi) return boundsHi;
     return value;
   }, [boundsLo, boundsHi]);
-  var increment = (0, import_react.useCallback)(function () {
-    var currentValue = parseValue(inputValue) || 0;
-    var newValue = clampValue(currentValue + step);
-    if (newValue !== null) {
-      pulseDiscreteStep();
-      setInputValue(formatValue(newValue));
-      if (!name) onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    }
-  }, [inputValue, parseValue, clampValue, step, formatValue, name, onChange, pulseDiscreteStep]);
-  var decrement = (0, import_react.useCallback)(function () {
-    var currentValue = parseValue(inputValue) || 0;
-    var newValue = clampValue(currentValue - step);
-    if (newValue !== null) {
-      pulseDiscreteStep();
-      setInputValue(formatValue(newValue));
-      if (!name) onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    }
-  }, [inputValue, parseValue, clampValue, step, formatValue, name, onChange, pulseDiscreteStep]);
+  var commitNumber = (0, import_react2.useCallback)(function (next) {
+    var pulse = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+    var clamped = clampValue(next);
+    var formatted = formatValue(clamped);
+    if (formatted === inputValue) return;
+    if (pulse) pulseDiscreteStep();
+    setInputValue(formatted);
+    if (!name) onChange === null || onChange === void 0 ? void 0 : onChange(clamped);
+  }, [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep]);
+  var applyDelta = (0, import_react2.useCallback)(function (delta) {
+    if (disabled || readOnly) return;
+    var current = parseValue(inputValue);
+    var from = current !== null && current !== void 0 ? current : 0;
+    commitNumber(from + delta, true);
+  }, [disabled, readOnly, parseValue, inputValue, commitNumber]);
+  var increment = (0, import_react2.useCallback)(function () {
+    return applyDelta(step);
+  }, [applyDelta, step]);
+  var decrement = (0, import_react2.useCallback)(function () {
+    return applyDelta(-step);
+  }, [applyDelta, step]);
   incrementRef.current = increment;
   decrementRef.current = decrement;
+  (0, import_react2.useEffect)(function () {
+    if (!isControlled || typingRef.current) return;
+    var formatted = formatValue(valueProp !== null && valueProp !== void 0 ? valueProp : null);
+    setInputValue(function (prev) {
+      return prev === formatted ? prev : formatted;
+    });
+  }, [isControlled, valueProp, formatValue]);
   var {
     wheelProps
   } = (0, import_useWheelIncrement.useWheelIncrement)({
@@ -203,7 +275,43 @@ function Stepper(props) {
     disabled,
     readOnly
   });
-  var handleInputChange = (0, import_react.useCallback)(function (text) {
+  var handleStepperKeyDown = (0, import_react2.useCallback)(function (event) {
+    if (disabled || readOnly) return;
+    var unit = event.shiftKey ? step * LARGE_STEP_FACTOR : step;
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        applyDelta(unit);
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        applyDelta(-unit);
+        break;
+      case "PageUp":
+        event.preventDefault();
+        applyDelta(step * LARGE_STEP_FACTOR);
+        break;
+      case "PageDown":
+        event.preventDefault();
+        applyDelta(-step * LARGE_STEP_FACTOR);
+        break;
+      case "Home":
+        if (boundsLo !== void 0) {
+          event.preventDefault();
+          commitNumber(boundsLo, true);
+        }
+        break;
+      case "End":
+        if (boundsHi !== void 0) {
+          event.preventDefault();
+          commitNumber(boundsHi, true);
+        }
+        break;
+      default:
+        break;
+    }
+  }, [disabled, readOnly, step, applyDelta, boundsLo, boundsHi, commitNumber]);
+  var handleInputChange = (0, import_react2.useCallback)(function (text) {
     typingRef.current = true;
     if (text === "" && allowEmpty) {
       setInputValue("");
@@ -221,95 +329,150 @@ function Stepper(props) {
     var atMin = currentValue !== null && boundsLo !== void 0 && currentValue <= boundsLo;
     var atMax = currentValue !== null && boundsHi !== void 0 && currentValue >= boundsHi;
     var live = repeatingRef.current || typingRef.current;
-    var timing = (_stepperCssTimings_motionTransition = stepperCssTimings[motionTransition]) !== null && _stepperCssTimings_motionTransition !== void 0 ? _stepperCssTimings_motionTransition : stepperCssTimings.quick;
-    var valueMotionStyle = !live ? {
+    var timing = motionTransition ? (_stepperCssTimings_motionTransition = stepperCssTimings[motionTransition]) !== null && _stepperCssTimings_motionTransition !== void 0 ? _stepperCssTimings_motionTransition : stepperCssTimings.quick : void 0;
+    var valueMotionStyle = !live && timing ? {
       transition: import_tamagui.isWeb ? `opacity ${timing}` : void 0,
       opacity: valueFlash ? 0.45 : 1
     } : {
       opacity: 1
     };
-    var controlGroup = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_ControlGroup.ControlGroup, {
-      children: [showButtons && !readOnly && (buttonPosition === "left" || buttonPosition === "both") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: knobProps.sizeToken,
-        disabled: disabled || atMin,
-        tabIndex: -1,
-        "aria-label": (0, import_t.t)("Decrease"),
-        onPressIn: repeatDecrement.onPressIn,
-        onPressOut: repeatDecrement.onPressOut,
-        icon: import_lucide_icons_2.Minus
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
-        id,
-        value: inputValue,
-        placeholder,
-        keyboardType: "numeric",
-        disabled,
-        readOnly: !!readOnly,
-        "aria-labelledby": label ? `${id}-label` : void 0,
-        "aria-label": label ? void 0 : (0, import_t.t)("Number"),
-        "aria-required": required || void 0,
-        "aria-invalid": hasError || void 0,
-        "aria-readonly": readOnly || void 0,
-        "data-stepper-value": true,
-        "data-stepper-live": live ? "true" : void 0,
-        "data-stepper-flash": valueFlash ? "true" : void 0,
-        onChangeText: readOnly ? void 0 : handleInputChange,
-        textAlign: "center",
-        focusStyle: areaFocusRing,
-        focusVisibleStyle: areaFocusRing,
-        opacity: valueMotionStyle.opacity,
-        // LC-25 native value tween intentionally disabled: Tamagui's RN
-        // animation driver crashes Hermes ("Cannot add new property
-        // '_tracking'") when animating a text input. Web keeps the CSS tween.
-        ...inputProps,
-        ...(import_tamagui.isWeb ? {
-          style: {
-            ...(inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
-            transition: valueMotionStyle.transition,
-            opacity: valueMotionStyle.opacity
-          }
-        } : void 0),
-        ...(onBlurHandler ? {
-          onBlur: function onBlur2() {
-            typingRef.current = false;
-            onBlurHandler();
-          }
-        } : {
-          onBlur: function onBlur2() {
-            typingRef.current = false;
-          }
-        }),
-        ...(onFocusHandler ? {
-          onFocus: onFocusHandler
-        } : void 0)
-      }), showButtons && !readOnly && (buttonPosition === "right" || buttonPosition === "both") && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-        size: knobProps.sizeToken,
-        disabled: disabled || atMax,
-        tabIndex: -1,
-        "aria-label": (0, import_t.t)("Increase"),
-        onPressIn: repeatIncrement.onPressIn,
-        onPressOut: repeatIncrement.onPressOut,
-        icon: import_lucide_icons_2.Plus
-      })]
+    var stacked = buttonPosition === "left" || buttonPosition === "right";
+    var showSpin = showButtons && !readOnly;
+    var decDisabled = !!(disabled || atMin);
+    var incDisabled = !!(disabled || atMax);
+    var decrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
+      kind: "decrement",
+      disabled: decDisabled,
+      stacked,
+      seam: buttonPosition === "both" ? "end" : void 0,
+      onPressIn: repeatDecrement.onPressIn,
+      onPressOut: repeatDecrement.onPressOut,
+      onActivate: focusArea,
+      children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+        size: iconPx,
+        weight: "bold",
+        "aria-hidden": true
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.MinusIcon, {
+        size: iconPx,
+        weight: "bold",
+        "aria-hidden": true
+      })
+    });
+    var incrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
+      kind: "increment",
+      disabled: incDisabled,
+      stacked,
+      seam: stacked ? "bottom" : buttonPosition === "both" ? "start" : void 0,
+      onPressIn: repeatIncrement.onPressIn,
+      onPressOut: repeatIncrement.onPressOut,
+      onActivate: focusArea,
+      children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpIcon, {
+        size: iconPx,
+        weight: "bold",
+        "aria-hidden": true
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PlusIcon, {
+        size: iconPx,
+        weight: "bold",
+        "aria-hidden": true
+      })
+    });
+    var spinColumn = function spinColumn2(edge) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+        flexDirection: "column",
+        alignSelf: "stretch",
+        flexShrink: 0,
+        width: controlSize,
+        borderInlineStartWidth: edge === "end" ? 1 : 0,
+        borderInlineEndWidth: edge === "start" ? 1 : 0,
+        borderColor: import_colorRamps.formInputColors.border.base,
+        children: [incrementButton, decrementButton]
+      });
+    };
+    var area = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Area, {
+      ref: areaRef,
+      id,
+      value: inputValue,
+      placeholder,
+      keyboardType: precision > 0 ? "decimal-pad" : "numeric",
+      inputMode: precision > 0 ? "decimal" : "numeric",
+      autoComplete: "off",
+      disabled,
+      readOnly: !!readOnly,
+      role: "spinbutton",
+      "aria-valuenow": currentValue !== null && currentValue !== void 0 ? currentValue : void 0,
+      "aria-valuemin": boundsLo,
+      "aria-valuemax": boundsHi,
+      // Labelled: the sibling Label wires `aria-labelledby` onto this id
+      // itself — naming it here too doubles the spoken name.
+      "aria-label": label ? void 0 : (0, import_t.t)("Number"),
+      "aria-required": required || void 0,
+      "aria-invalid": hasError || void 0,
+      "aria-readonly": readOnly || void 0,
+      "data-stepper-value": true,
+      "data-stepper-live": live ? "true" : void 0,
+      "data-stepper-flash": valueFlash ? "true" : void 0,
+      onChangeText: readOnly ? void 0 : handleInputChange,
+      textAlign: "center",
+      opacity: valueMotionStyle.opacity,
+      // LC-25 native value tween intentionally disabled: Tamagui's RN
+      // animation driver crashes Hermes ("Cannot add new property
+      // '_tracking'") when animating a text input. Web keeps the CSS tween.
+      ...inputProps,
+      ...(import_tamagui.isWeb ? {
+        style: {
+          ...(inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
+          transition: valueMotionStyle.transition,
+          opacity: valueMotionStyle.opacity
+        }
+      } : void 0),
+      onKeyDown: function onKeyDown(event) {
+        var _inputProps_onKeyDown;
+        inputProps === null || inputProps === void 0 ? void 0 : (_inputProps_onKeyDown = inputProps.onKeyDown) === null || _inputProps_onKeyDown === void 0 ? void 0 : _inputProps_onKeyDown.call(inputProps, event);
+        if (event.defaultPrevented) return;
+        handleStepperKeyDown(event);
+      },
+      ...(onBlurHandler ? {
+        onBlur: function onBlur2() {
+          typingRef.current = false;
+          onBlurHandler();
+        }
+      } : {
+        onBlur: function onBlur2() {
+          typingRef.current = false;
+        }
+      }),
+      ...(onFocusHandler ? {
+        onFocus: onFocusHandler
+      } : void 0)
+    });
+    var box = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input.Box, {
+      size: controlSize,
+      disabled,
+      "data-stepper": "true",
+      children: [showSpin && buttonPosition === "both" ? decrementButton : null, showSpin && buttonPosition === "left" ? spinColumn("start") : null, area, showSpin && buttonPosition === "right" ? spinColumn("end") : null, showSpin && buttonPosition === "both" ? incrementButton : null]
     });
     if (import_tamagui.isWeb && !disabled && !readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
         ...wheelProps,
-        children: controlGroup
+        style: {
+          minWidth: 0,
+          width: "100%"
+        },
+        children: box
       });
     }
-    return controlGroup;
+    return box;
   };
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_InputParts.Input, {
-      size: size || knobProps.sizeToken,
+      size: controlSize,
       children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "text",
-        width: "30%",
-        height: 14
+        width: "30%"
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
         variant: "rounded",
         width: "100%",
-        height: knobProps.sizeToken
+        height: controlSize
       })]
     });
   }
@@ -333,7 +496,7 @@ function Stepper(props) {
       // the sibling label/helper readable) — it needs the disabled state.
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-        size: size || knobProps.sizeToken,
+        size: controlSize,
         children: renderNumberRow(commitStandalone, void 0, !!errorProp)
       })
     });
@@ -367,6 +530,7 @@ function Stepper(props) {
         parseValue,
         clampValue,
         knobProps,
+        controlSize,
         renderNumberRow
       });
     }
@@ -383,10 +547,11 @@ function StepperFieldRenderer(param) {
     parseValue,
     clampValue,
     knobProps,
+    controlSize,
     renderNumberRow
   } = param;
-  var isFieldUpdateRef = (0, import_react.useRef)(false);
-  (0, import_react.useEffect)(function () {
+  var isFieldUpdateRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(function () {
     var fieldValue = field.state.value;
     if (fieldValue !== void 0 && fieldValue !== null) {
       var formatted = formatValue(fieldValue);
@@ -399,7 +564,7 @@ function StepperFieldRenderer(param) {
       setInputValue("");
     }
   }, [field.state.value, formatValue, setInputValue]);
-  (0, import_react.useEffect)(function () {
+  (0, import_react2.useEffect)(function () {
     if (isFieldUpdateRef.current) {
       isFieldUpdateRef.current = false;
       return;
@@ -424,7 +589,7 @@ function StepperFieldRenderer(param) {
     // LC-40: see standalone branch — FieldLayout carries dimWhole.
     disabled: fieldProps.disabled,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
-      size: fieldProps.size || knobProps.sizeToken,
+      size: fieldProps.size || controlSize || knobProps.sizeToken,
       children: renderNumberRow(void 0, function () {
         return field.handleChange(parseValue(inputValue));
       }, !!error)