@multiplatform.one/forms 7.7.6 → 7.10.0

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

@@ -28,6 +28,7 @@ __export(Stepper_exports, {
 module.exports = __toCommonJS(Stepper_exports);
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
+var import_react_native = require("react-native-web");
 var import_tamagui = require("tamagui");
 var import_theme = require("@multiplatform.one/theme");
 var import_resolveStepperPlacement = require("./resolveStepperPlacement.cjs");
@@ -42,6 +43,7 @@ var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const repeatDelay = 400;
 const repeatInterval = 80;
+const boundCaptionDuration = 2e3;
 const LARGE_STEP_FACTOR = 10;
 const stepperCssTimings = {
   bouncy: "ease-in 200ms",
@@ -88,51 +90,107 @@ function useRepeatAction(action, repeatingRef) {
   (0, import_react2.useEffect)(() => stop, [stop]);
   return {
     onPressIn: start,
-    onPressOut: stop
+    onPressOut: stop,
+    stop
   };
 }
 function StepperSpinButton({
   kind,
   disabled,
+  atBound,
+  seamWidth,
   stacked,
   seam,
   onPressIn,
   onPressOut,
   onActivate,
+  onBoundPress,
   children
 }) {
   const label = kind === "increment" ? (0, import_t.t)("Increase") : (0, import_t.t)("Decrease");
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input.Button, {
+  const [pressed, setPressed] = (0, import_react2.useState)(false);
+  const button = /* @__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,
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    pointerEvents: "none",
+    cursor: disabled || atBound ? "not-allowed" : "pointer",
+    opacity: disabled || atBound ? 0.4 : 1,
+    backgroundColor: pressed && !disabled && !atBound ? import_colorRamps.formButtonColors.background.active : "transparent",
+    height: "100%",
     alignSelf: "stretch",
-    borderBottomWidth: seam === "bottom" ? 1 : 0,
-    borderInlineEndWidth: seam === "end" ? 1 : 0,
-    borderInlineStartWidth: seam === "start" ? 1 : 0,
+    borderBottomWidth: seam === "bottom" ? seamWidth : 0,
+    ...(import_tamagui.isWeb ? {
+      style: {
+        borderInlineEndWidth: seam === "end" ? seamWidth : 0,
+        borderInlineStartWidth: seam === "start" ? seamWidth : 0,
+        borderInlineEndStyle: "solid",
+        borderInlineStartStyle: "solid"
+      }
+    } : {
+      borderEndWidth: seam === "end" ? seamWidth : 0,
+      borderStartWidth: seam === "start" ? seamWidth : 0
+    }),
     borderColor: import_colorRamps.formInputColors.border.base,
     focusStyle: noButtonRing,
     focusVisibleStyle: noButtonRing,
     hoverStyle: disabled ? {
       backgroundColor: "transparent"
     } : void 0,
-    onMouseDown: e => {
-      preventFocusSteal(e);
-      onActivate();
+    children
+  });
+  const start = () => {
+    if (disabled) return;
+    setPressed(true);
+    onActivate();
+    if (atBound) onBoundPress();else onPressIn();
+  };
+  const stop = () => {
+    setPressed(false);
+    onPressOut();
+  };
+  const hitStyle = {
+    display: "flex",
+    height: stacked ? "50%" : "100%",
+    flex: stacked ? 1 : void 0
+  };
+  return import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    role: "button",
+    "aria-label": label,
+    "aria-disabled": disabled || atBound || void 0,
+    tabIndex: -1,
+    "data-stepper-button": kind,
+    style: hitStyle,
+    onPointerDown: event => {
+      preventFocusSteal(event);
+      start();
     },
-    onPointerDown: e => {
-      preventFocusSteal(e);
-      onActivate();
+    onMouseDown: preventFocusSteal,
+    onPointerUp: stop,
+    onPointerCancel: stop,
+    onPointerLeave: stop,
+    onClick: event => {
+      if (event.detail !== 0) return;
+      start();
+      stop();
     },
-    onPressIn: disabled ? void 0 : onPressIn,
-    onPressOut,
-    children
+    children: button
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled: disabled || atBound
+    },
+    disabled: disabled || void 0,
+    onPressIn: start,
+    onPressOut: stop,
+    hitSlop: {
+      top: seamWidth,
+      bottom: seamWidth
+    },
+    style: hitStyle,
+    children: button
   });
 }
 function Stepper(props) {
@@ -193,6 +251,24 @@ function Stepper(props) {
     return "";
   });
   const [valueFlash, setValueFlash] = (0, import_react2.useState)(false);
+  const [boundCaption, setBoundCaption] = (0, import_react2.useState)(null);
+  const boundTimerRef = (0, import_react2.useRef)(null);
+  const clearBoundCaption = (0, import_react2.useCallback)(() => {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    boundTimerRef.current = null;
+    setBoundCaption(null);
+  }, []);
+  const showBoundCaption = (0, import_react2.useCallback)(kind => {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    setBoundCaption(kind === "min" ? (0, import_t.t)("Minimum reached") : (0, import_t.t)("Maximum reached"));
+    boundTimerRef.current = setTimeout(() => {
+      boundTimerRef.current = null;
+      setBoundCaption(null);
+    }, boundCaptionDuration);
+  }, []);
+  (0, import_react2.useEffect)(() => () => {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+  }, []);
   const repeatingRef = (0, import_react2.useRef)(false);
   const typingRef = (0, import_react2.useRef)(false);
   const incrementRef = (0, import_react2.useRef)(() => {});
@@ -231,16 +307,34 @@ function Stepper(props) {
     const clamped = clampValue(next);
     const formatted = formatValue(clamped);
     if (formatted === inputValue) return;
+    clearBoundCaption();
     if (pulse) pulseDiscreteStep();
     setInputValue(formatted);
     if (!name) onChange?.(clamped);
-  }, [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep]);
+  }, [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep, clearBoundCaption]);
   const applyDelta = (0, import_react2.useCallback)(delta => {
     if (disabled || readOnly) return;
     const current = parseValue(inputValue);
     const from = current ?? 0;
+    if (current !== null && delta < 0 && boundsLo !== void 0 && from <= boundsLo) {
+      showBoundCaption("min");
+      return;
+    }
+    if (current !== null && delta > 0 && boundsHi !== void 0 && from >= boundsHi) {
+      showBoundCaption("max");
+      return;
+    }
     commitNumber(from + delta, true);
-  }, [disabled, readOnly, parseValue, inputValue, commitNumber]);
+  }, [disabled, readOnly, parseValue, inputValue, commitNumber, boundsLo, boundsHi, showBoundCaption]);
+  (0, import_react2.useEffect)(() => {
+    const current = parseValue(inputValue);
+    if (disabled || readOnly || current !== null && boundsHi !== void 0 && current >= boundsHi) {
+      repeatIncrement.stop();
+    }
+    if (disabled || readOnly || current !== null && boundsLo !== void 0 && current <= boundsLo) {
+      repeatDecrement.stop();
+    }
+  }, [inputValue, parseValue, boundsLo, boundsHi, disabled, readOnly, repeatIncrement.stop, repeatDecrement.stop]);
   const increment = (0, import_react2.useCallback)(() => applyDelta(step), [applyDelta, step]);
   const decrement = (0, import_react2.useCallback)(() => applyDelta(-step), [applyDelta, step]);
   incrementRef.current = increment;
@@ -320,16 +414,18 @@ function Stepper(props) {
     };
     const stacked = placement === "left" || placement === "right";
     const showSpin = showButtons && !readOnly;
-    const decDisabled = !!(disabled || atMin);
-    const incDisabled = !!(disabled || atMax);
+    const seamWidth = knobProps.borderRadius.borderWidth;
     const decrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
       kind: "decrement",
-      disabled: decDisabled,
+      disabled: !!disabled,
+      atBound: atMin,
+      seamWidth,
       stacked,
       seam: placement === "both" ? "end" : void 0,
       onPressIn: repeatDecrement.onPressIn,
       onPressOut: repeatDecrement.onPressOut,
       onActivate: focusArea,
+      onBoundPress: () => showBoundCaption("min"),
       children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
         size: iconPx,
         weight: "bold",
@@ -344,12 +440,15 @@ function Stepper(props) {
     });
     const incrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
       kind: "increment",
-      disabled: incDisabled,
+      disabled: !!disabled,
+      atBound: atMax,
+      seamWidth,
       stacked,
       seam: stacked ? "bottom" : placement === "both" ? "start" : void 0,
       onPressIn: repeatIncrement.onPressIn,
       onPressOut: repeatIncrement.onPressOut,
       onActivate: focusArea,
+      onBoundPress: () => showBoundCaption("max"),
       children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpIcon, {
         size: iconPx,
         weight: "bold",
@@ -367,8 +466,15 @@ function Stepper(props) {
       alignSelf: "stretch",
       flexShrink: 0,
       width: controlSize,
-      borderInlineStartWidth: edge === "end" ? 1 : 0,
-      borderInlineEndWidth: edge === "start" ? 1 : 0,
+      ...(import_tamagui.isWeb ? {
+        borderInlineStartWidth: edge === "end" ? seamWidth : 0,
+        borderInlineEndWidth: edge === "start" ? seamWidth : 0,
+        borderInlineStartStyle: "solid",
+        borderInlineEndStyle: "solid"
+      } : {
+        borderStartWidth: edge === "end" ? seamWidth : 0,
+        borderEndWidth: edge === "start" ? seamWidth : 0
+      }),
       borderColor: import_colorRamps.formInputColors.border.base,
       children: [incrementButton, decrementButton]
     });
@@ -412,11 +518,13 @@ function Stepper(props) {
       ...(onBlurHandler ? {
         onBlur: () => {
           typingRef.current = false;
+          clearBoundCaption();
           onBlurHandler();
         }
       } : {
         onBlur: () => {
           typingRef.current = false;
+          clearBoundCaption();
         }
       }),
       ...(onFocusHandler ? {
@@ -427,7 +535,12 @@ function Stepper(props) {
       size: controlSize,
       disabled,
       "data-stepper": "true",
+      "data-stepper-control": "true",
       "data-stepper-placement": placement,
+      ...(showSpin ? {
+        paddingHorizontal: 0,
+        sizeRecipeEscape: "LC-81 stepper segments reach the compound frame edges"
+      } : void 0),
       children: [showSpin && placement === "both" ? decrementButton : null, showSpin && placement === "left" ? spinColumn("start") : null, area, showSpin && placement === "right" ? spinColumn("end") : null, showSpin && placement === "both" ? incrementButton : null]
     });
     if (import_tamagui.isWeb && !disabled && !readOnly) {
@@ -466,7 +579,7 @@ function Stepper(props) {
       label,
       labelProps,
       error: errorProp,
-      helperText,
+      helperText: boundCaption ?? helperText,
       required,
       size,
       knobProps,
@@ -491,7 +604,7 @@ function Stepper(props) {
         label,
         labelProps,
         error: errorProp,
-        helperText,
+        helperText: boundCaption ?? helperText,
         required,
         size,
         readOnly,

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

@@ -31,6 +31,7 @@ module.exports = __toCommonJS(Stepper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
+var import_react_native = require("react-native");
 var import_tamagui = require("tamagui");
 var import_theme = require("@multiplatform.one/theme");
 var import_resolveStepperPlacement = require("./resolveStepperPlacement.native.js");
@@ -44,6 +45,7 @@ var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
 var repeatDelay = 400;
 var repeatInterval = 80;
+var boundCaptionDuration = 2e3;
 var LARGE_STEP_FACTOR = 10;
 var stepperCssTimings = {
   bouncy: "ease-in 200ms",
@@ -95,52 +97,109 @@ function useRepeatAction(action, repeatingRef) {
   }, [stop]);
   return {
     onPressIn: start,
-    onPressOut: stop
+    onPressOut: stop,
+    stop
   };
 }
 function StepperSpinButton(param) {
   var {
     kind,
     disabled,
+    atBound,
+    seamWidth,
     stacked,
     seam,
     onPressIn,
     onPressOut,
     onActivate,
+    onBoundPress,
     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, {
+  var [pressed, setPressed] = (0, import_react2.useState)(false);
+  var button = /* @__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,
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    pointerEvents: "none",
+    cursor: disabled || atBound ? "not-allowed" : "pointer",
+    opacity: disabled || atBound ? 0.4 : 1,
+    backgroundColor: pressed && !disabled && !atBound ? import_colorRamps.formButtonColors.background.active : "transparent",
+    height: "100%",
     alignSelf: "stretch",
-    borderBottomWidth: seam === "bottom" ? 1 : 0,
-    borderInlineEndWidth: seam === "end" ? 1 : 0,
-    borderInlineStartWidth: seam === "start" ? 1 : 0,
+    borderBottomWidth: seam === "bottom" ? seamWidth : 0,
+    ...(import_tamagui.isWeb ? {
+      style: {
+        borderInlineEndWidth: seam === "end" ? seamWidth : 0,
+        borderInlineStartWidth: seam === "start" ? seamWidth : 0,
+        borderInlineEndStyle: "solid",
+        borderInlineStartStyle: "solid"
+      }
+    } : {
+      borderEndWidth: seam === "end" ? seamWidth : 0,
+      borderStartWidth: seam === "start" ? seamWidth : 0
+    }),
     borderColor: import_colorRamps.formInputColors.border.base,
     focusStyle: noButtonRing,
     focusVisibleStyle: noButtonRing,
     hoverStyle: disabled ? {
       backgroundColor: "transparent"
     } : void 0,
-    onMouseDown: function onMouseDown(e) {
-      preventFocusSteal(e);
-      onActivate();
+    children
+  });
+  var start = function start2() {
+    if (disabled) return;
+    setPressed(true);
+    onActivate();
+    if (atBound) onBoundPress();else onPressIn();
+  };
+  var stop = function stop2() {
+    setPressed(false);
+    onPressOut();
+  };
+  var hitStyle = {
+    display: "flex",
+    height: stacked ? "50%" : "100%",
+    flex: stacked ? 1 : void 0
+  };
+  return import_tamagui.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
+    role: "button",
+    "aria-label": label,
+    "aria-disabled": disabled || atBound || void 0,
+    tabIndex: -1,
+    "data-stepper-button": kind,
+    style: hitStyle,
+    onPointerDown: function onPointerDown(event) {
+      preventFocusSteal(event);
+      start();
     },
-    onPointerDown: function onPointerDown(e) {
-      preventFocusSteal(e);
-      onActivate();
+    onMouseDown: preventFocusSteal,
+    onPointerUp: stop,
+    onPointerCancel: stop,
+    onPointerLeave: stop,
+    onClick: function onClick(event) {
+      if (event.detail !== 0) return;
+      start();
+      stop();
     },
-    onPressIn: disabled ? void 0 : onPressIn,
-    onPressOut,
-    children
+    children: button
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    accessibilityState: {
+      disabled: disabled || atBound
+    },
+    // An explicit false overrides accessibilityState in React Native.
+    disabled: disabled || void 0,
+    onPressIn: start,
+    onPressOut: stop,
+    hitSlop: {
+      top: seamWidth,
+      bottom: seamWidth
+    },
+    style: hitStyle,
+    children: button
   });
 }
 function Stepper(props) {
@@ -201,6 +260,26 @@ function Stepper(props) {
     return "";
   });
   var [valueFlash, setValueFlash] = (0, import_react2.useState)(false);
+  var [boundCaption, setBoundCaption] = (0, import_react2.useState)(null);
+  var boundTimerRef = (0, import_react2.useRef)(null);
+  var clearBoundCaption = (0, import_react2.useCallback)(function () {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    boundTimerRef.current = null;
+    setBoundCaption(null);
+  }, []);
+  var showBoundCaption = (0, import_react2.useCallback)(function (kind) {
+    if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    setBoundCaption(kind === "min" ? (0, import_t.t)("Minimum reached") : (0, import_t.t)("Maximum reached"));
+    boundTimerRef.current = setTimeout(function () {
+      boundTimerRef.current = null;
+      setBoundCaption(null);
+    }, boundCaptionDuration);
+  }, []);
+  (0, import_react2.useEffect)(function () {
+    return function () {
+      if (boundTimerRef.current) clearTimeout(boundTimerRef.current);
+    };
+  }, []);
   var repeatingRef = (0, import_react2.useRef)(false);
   var typingRef = (0, import_react2.useRef)(false);
   var incrementRef = (0, import_react2.useRef)(function () {});
@@ -247,16 +326,34 @@ function Stepper(props) {
     var clamped = clampValue(next);
     var formatted = formatValue(clamped);
     if (formatted === inputValue) return;
+    clearBoundCaption();
     if (pulse) pulseDiscreteStep();
     setInputValue(formatted);
     if (!name) onChange === null || onChange === void 0 ? void 0 : onChange(clamped);
-  }, [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep]);
+  }, [clampValue, formatValue, inputValue, name, onChange, pulseDiscreteStep, clearBoundCaption]);
   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;
+    if (current !== null && delta < 0 && boundsLo !== void 0 && from <= boundsLo) {
+      showBoundCaption("min");
+      return;
+    }
+    if (current !== null && delta > 0 && boundsHi !== void 0 && from >= boundsHi) {
+      showBoundCaption("max");
+      return;
+    }
     commitNumber(from + delta, true);
-  }, [disabled, readOnly, parseValue, inputValue, commitNumber]);
+  }, [disabled, readOnly, parseValue, inputValue, commitNumber, boundsLo, boundsHi, showBoundCaption]);
+  (0, import_react2.useEffect)(function () {
+    var current = parseValue(inputValue);
+    if (disabled || readOnly || current !== null && boundsHi !== void 0 && current >= boundsHi) {
+      repeatIncrement.stop();
+    }
+    if (disabled || readOnly || current !== null && boundsLo !== void 0 && current <= boundsLo) {
+      repeatDecrement.stop();
+    }
+  }, [inputValue, parseValue, boundsLo, boundsHi, disabled, readOnly, repeatIncrement.stop, repeatDecrement.stop]);
   var increment = (0, import_react2.useCallback)(function () {
     return applyDelta(step);
   }, [applyDelta, step]);
@@ -343,16 +440,20 @@ function Stepper(props) {
     };
     var stacked = placement === "left" || placement === "right";
     var showSpin = showButtons && !readOnly;
-    var decDisabled = !!(disabled || atMin);
-    var incDisabled = !!(disabled || atMax);
+    var seamWidth = knobProps.borderRadius.borderWidth;
     var decrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
       kind: "decrement",
-      disabled: decDisabled,
+      disabled: !!disabled,
+      atBound: atMin,
+      seamWidth,
       stacked,
       seam: placement === "both" ? "end" : void 0,
       onPressIn: repeatDecrement.onPressIn,
       onPressOut: repeatDecrement.onPressOut,
       onActivate: focusArea,
+      onBoundPress: function onBoundPress() {
+        return showBoundCaption("min");
+      },
       children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
         size: iconPx,
         weight: "bold",
@@ -367,12 +468,17 @@ function Stepper(props) {
     });
     var incrementButton = /* @__PURE__ */(0, import_jsx_runtime.jsx)(StepperSpinButton, {
       kind: "increment",
-      disabled: incDisabled,
+      disabled: !!disabled,
+      atBound: atMax,
+      seamWidth,
       stacked,
       seam: stacked ? "bottom" : placement === "both" ? "start" : void 0,
       onPressIn: repeatIncrement.onPressIn,
       onPressOut: repeatIncrement.onPressOut,
       onActivate: focusArea,
+      onBoundPress: function onBoundPress() {
+        return showBoundCaption("max");
+      },
       children: stacked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpIcon, {
         size: iconPx,
         weight: "bold",
@@ -391,8 +497,15 @@ function Stepper(props) {
         alignSelf: "stretch",
         flexShrink: 0,
         width: controlSize,
-        borderInlineStartWidth: edge === "end" ? 1 : 0,
-        borderInlineEndWidth: edge === "start" ? 1 : 0,
+        ...(import_tamagui.isWeb ? {
+          borderInlineStartWidth: edge === "end" ? seamWidth : 0,
+          borderInlineEndWidth: edge === "start" ? seamWidth : 0,
+          borderInlineStartStyle: "solid",
+          borderInlineEndStyle: "solid"
+        } : {
+          borderStartWidth: edge === "end" ? seamWidth : 0,
+          borderEndWidth: edge === "start" ? seamWidth : 0
+        }),
         borderColor: import_colorRamps.formInputColors.border.base,
         children: [incrementButton, decrementButton]
       });
@@ -443,11 +556,13 @@ function Stepper(props) {
       ...(onBlurHandler ? {
         onBlur: function onBlur2() {
           typingRef.current = false;
+          clearBoundCaption();
           onBlurHandler();
         }
       } : {
         onBlur: function onBlur2() {
           typingRef.current = false;
+          clearBoundCaption();
         }
       }),
       ...(onFocusHandler ? {
@@ -458,7 +573,12 @@ function Stepper(props) {
       size: controlSize,
       disabled,
       "data-stepper": "true",
+      "data-stepper-control": "true",
       "data-stepper-placement": placement,
+      ...(showSpin ? {
+        paddingHorizontal: 0,
+        sizeRecipeEscape: "LC-81 stepper segments reach the compound frame edges"
+      } : void 0),
       children: [showSpin && placement === "both" ? decrementButton : null, showSpin && placement === "left" ? spinColumn("start") : null, area, showSpin && placement === "right" ? spinColumn("end") : null, showSpin && placement === "both" ? incrementButton : null]
     });
     if (import_tamagui.isWeb && !disabled && !readOnly) {
@@ -497,7 +617,7 @@ function Stepper(props) {
       label,
       labelProps,
       error: errorProp,
-      helperText,
+      helperText: boundCaption !== null && boundCaption !== void 0 ? boundCaption : helperText,
       required,
       size,
       knobProps,
@@ -525,7 +645,7 @@ function Stepper(props) {
           label,
           labelProps,
           error: errorProp,
-          helperText,
+          helperText: boundCaption !== null && boundCaption !== void 0 ? boundCaption : helperText,
           required,
           size,
           readOnly,