@multiplatform.one/forms 7.34.4 → 7.36.0

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

@@ -27,11 +27,13 @@ __export(Stepper_exports, {
 });
 module.exports = __toCommonJS(Stepper_exports);
 var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
+var import_theme3 = require("@multiplatform.one/theme");
 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_theme2 = require("@multiplatform.one/theme");
+var import_theme4 = require("@multiplatform.one/theme");
 var import_resolveStepperPlacement = require("./resolveStepperPlacement.cjs");
 var import_resolveStepperPlacement2 = require("./resolveStepperPlacement.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
@@ -46,16 +48,7 @@ const repeatDelay = 400;
 const repeatInterval = 80;
 const boundCaptionDuration = 2e3;
 const LARGE_STEP_FACTOR = 10;
-const stepperCssTimings = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms"
-};
+const hugMinChars = 4;
 const noButtonRing = {
   outlineWidth: 0,
   outlineStyle: "none",
@@ -194,8 +187,11 @@ function StepperSpinButton({
     children: button
   });
 }
+function hugNativeCharPx(controlSize) {
+  return Math.ceil((0, import_theme4.sizeRecipeForToken)(String(controlSize)).fontSize * 0.62);
+}
 function Stepper(props) {
-  const hydrationTouch = (0, import_theme.useTouchSurface)();
+  const hydrationTouch = (0, import_theme3.useTouchSurface)();
   const {
     defaultValue,
     form,
@@ -225,9 +221,10 @@ function Stepper(props) {
     onChange,
     value: valueProp,
     skeleton,
-    compact,
     id: idProp,
     currency,
+    unit,
+    hug = false,
     ...restProps
   } = (0, import_tamagui.useProps)(props);
   const {
@@ -236,15 +233,17 @@ function Stepper(props) {
     id
   } = (0, import_utils.useFormField)({
     form,
-    id: idProp,
-    compact
+    id: idProp
   });
-  const affix = (0, import_theme2.currencyAffix)(currency);
+  const affix = unit ? {
+    glyph: unit,
+    position: "trailing"
+  } : (0, import_theme4.currencyAffix)(currency);
   const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  const motionTransition = knobProps.transition;
+  const motionTransition = knobProps.motion.control.transition;
   const controlSize = size || knobProps.sizeToken;
-  const iconPx = (0, import_theme2.sizeRecipeForToken)(String(controlSize)).iconSize;
-  const glyphColor = (0, import_theme2.useGlyphColor)();
+  const iconPx = (0, import_theme4.sizeRecipeForToken)(String(controlSize)).iconSize;
+  const glyphColor = (0, import_theme4.useGlyphColor)();
   const placement = (0, import_resolveStepperPlacement.resolveStepperPlacement)(buttonPosition, hydrationTouch);
   const isControlled = valueProp !== void 0 && !name;
   const [inputValue, setInputValue] = (0, import_react2.useState)(() => {
@@ -254,6 +253,7 @@ function Stepper(props) {
     }
     return "";
   });
+  const hugChars = hug ? Math.max(inputValue.length, Math.max(hugMinChars, ...[min, max].filter(bound => typeof bound === "number" && Number.isFinite(bound)).map(bound => String(Math.trunc(Math.abs(bound))).length + 1)) + (precision > 0 ? precision + 1 : 0)) : 0;
   const [valueFlash, setValueFlash] = (0, import_react2.useState)(false);
   const [boundCaption, setBoundCaption] = (0, import_react2.useState)(null);
   const boundTimerRef = (0, import_react2.useRef)(null);
@@ -286,7 +286,7 @@ function Stepper(props) {
     if (repeatingRef.current || typingRef.current) return;
     if (!motionTransition) return;
     setValueFlash(true);
-    setTimeout(() => setValueFlash(false), 90);
+    setTimeout(() => setValueFlash(false), (0, import_theme.motionDurationMs)(motionTransition));
   }, [motionTransition]);
   const repeatIncrement = useRepeatAction(() => incrementRef.current(), repeatingRef);
   const repeatDecrement = useRepeatAction(() => decrementRef.current(), repeatingRef);
@@ -358,15 +358,15 @@ function Stepper(props) {
   });
   const handleStepperKeyDown = (0, import_react2.useCallback)(event => {
     if (disabled || readOnly) return;
-    const unit = event.shiftKey ? step * LARGE_STEP_FACTOR : step;
+    const unit2 = event.shiftKey ? step * LARGE_STEP_FACTOR : step;
     switch (event.key) {
       case "ArrowUp":
         event.preventDefault();
-        applyDelta(unit);
+        applyDelta(unit2);
         break;
       case "ArrowDown":
         event.preventDefault();
-        applyDelta(-unit);
+        applyDelta(-unit2);
         break;
       case "PageUp":
         event.preventDefault();
@@ -409,7 +409,7 @@ function Stepper(props) {
     const atMin = currentValue !== null && boundsLo !== void 0 && currentValue <= boundsLo;
     const atMax = currentValue !== null && boundsHi !== void 0 && currentValue >= boundsHi;
     const live = repeatingRef.current || typingRef.current;
-    const timing = motionTransition ? stepperCssTimings[motionTransition] ?? stepperCssTimings.quick : void 0;
+    const timing = motionTransition ? import_theme2.cssAnimationConfig[motionTransition] ?? import_theme2.cssAnimationConfig.quick : void 0;
     const valueMotionStyle = !live && timing ? {
       transition: import_tamagui.isWeb ? `opacity ${timing}` : void 0,
       opacity: valueFlash ? 0.45 : 1
@@ -504,12 +504,23 @@ function Stepper(props) {
       "data-stepper-live": live ? "true" : void 0,
       "data-stepper-flash": valueFlash ? "true" : void 0,
       onChangeText: readOnly ? void 0 : handleInputChange,
-      textAlign: affix ? "right" : "center",
+      textAlign: affix ? "right" : showSpin ? "center" : "left",
+      ...(hug ? import_tamagui.isWeb ? {
+        flexGrow: 0,
+        flexShrink: 0
+      } : {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: hugChars * hugNativeCharPx(controlSize)
+      } : void 0),
       opacity: valueMotionStyle.opacity,
       ...inputProps,
       ...(import_tamagui.isWeb ? {
         style: {
           ...inputProps?.style,
+          ...(hug ? {
+            width: `${hugChars}ch`
+          } : void 0),
           transition: valueMotionStyle.transition,
           opacity: valueMotionStyle.opacity
         }
@@ -543,7 +554,7 @@ function Stepper(props) {
       flexShrink: 0,
       paddingHorizontal: "$1.5",
       ...knobProps.body,
-      fontSize: (0, import_theme2.sizeRecipeForToken)(String(controlSize), {
+      fontSize: (0, import_theme4.sizeRecipeForToken)(String(controlSize), {
         touch: hydrationTouch
       }).fontSize,
       color: "$color",
@@ -556,6 +567,10 @@ function Stepper(props) {
       "data-stepper": "true",
       "data-stepper-control": "true",
       "data-stepper-placement": placement,
+      "data-stepper-hug": hug ? "true" : void 0,
+      ...(hug ? {
+        alignSelf: "flex-start"
+      } : void 0),
       ...(showSpin ? {
         paddingHorizontal: 0,
         sizeRecipeEscape: "LC-81 stepper segments reach the compound frame edges"
@@ -565,7 +580,10 @@ function Stepper(props) {
     if (import_tamagui.isWeb && !disabled && !readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
         ...wheelProps,
-        style: {
+        style: hug ? {
+          minWidth: 0,
+          maxWidth: "100%"
+        } : {
           minWidth: 0,
           width: "100%"
         },
@@ -603,6 +621,7 @@ function Stepper(props) {
       size,
       knobProps,
       onBlur,
+      hug,
       disabled,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
         size: controlSize,
@@ -629,6 +648,7 @@ function Stepper(props) {
         readOnly,
         disabled,
         onBlur,
+        hug,
         ...restProps
       },
       id,
@@ -692,6 +712,7 @@ function StepperFieldRenderer({
     size: fieldProps.size,
     knobProps,
     onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", fieldProps.onBlur),
+    hug: fieldProps.hug,
     disabled: fieldProps.disabled,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {
       size: fieldProps.size || controlSize || knobProps.sizeToken,

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

@@ -30,11 +30,13 @@ __export(Stepper_exports, {
 module.exports = __toCommonJS(Stepper_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_theme = require("@multiplatform.one/theme");
+var import_theme2 = require("@multiplatform.one/theme");
+var import_theme3 = require("@multiplatform.one/theme");
 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_theme2 = require("@multiplatform.one/theme");
+var import_theme4 = require("@multiplatform.one/theme");
 var import_resolveStepperPlacement = require("./resolveStepperPlacement.native.js");
 var import_resolveStepperPlacement2 = require("./resolveStepperPlacement.native.js");
 var import_Skeleton = require("../../Skeleton");
@@ -48,16 +50,7 @@ var repeatDelay = 400;
 var repeatInterval = 80;
 var boundCaptionDuration = 2e3;
 var LARGE_STEP_FACTOR = 10;
-var stepperCssTimings = {
-  bouncy: "ease-in 200ms",
-  lazy: "ease-in 600ms",
-  slow: "ease-in 500ms",
-  medium: "ease-in-out 250ms",
-  quick: "ease-in 100ms",
-  tooltip: "ease-in 400ms",
-  snappy: "ease-out 80ms",
-  gentle: "ease-in-out 450ms"
-};
+var hugMinChars = 4;
 var noButtonRing = {
   outlineWidth: 0,
   outlineStyle: "none",
@@ -203,8 +196,11 @@ function StepperSpinButton(param) {
     children: button
   });
 }
+function hugNativeCharPx(controlSize) {
+  return Math.ceil((0, import_theme4.sizeRecipeForToken)(String(controlSize)).fontSize * 0.62);
+}
 function Stepper(props) {
-  var hydrationTouch = (0, import_theme.useTouchSurface)();
+  var hydrationTouch = (0, import_theme3.useTouchSurface)();
   var {
     defaultValue,
     form,
@@ -234,9 +230,10 @@ function Stepper(props) {
     onChange,
     value: valueProp,
     skeleton,
-    compact,
     id: idProp,
     currency,
+    unit,
+    hug = false,
     ...restProps
   } = (0, import_tamagui.useProps)(props);
   var {
@@ -245,15 +242,17 @@ function Stepper(props) {
     id
   } = (0, import_utils.useFormField)({
     form,
-    id: idProp,
-    compact
+    id: idProp
   });
-  var affix = (0, import_theme2.currencyAffix)(currency);
+  var affix = unit ? {
+    glyph: unit,
+    position: "trailing"
+  } : (0, import_theme4.currencyAffix)(currency);
   var resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
-  var motionTransition = knobProps.transition;
+  var motionTransition = knobProps.motion.control.transition;
   var controlSize = size || knobProps.sizeToken;
-  var iconPx = (0, import_theme2.sizeRecipeForToken)(String(controlSize)).iconSize;
-  var glyphColor = (0, import_theme2.useGlyphColor)();
+  var iconPx = (0, import_theme4.sizeRecipeForToken)(String(controlSize)).iconSize;
+  var glyphColor = (0, import_theme4.useGlyphColor)();
   var placement = (0, import_resolveStepperPlacement.resolveStepperPlacement)(buttonPosition, hydrationTouch);
   var isControlled = valueProp !== void 0 && !name;
   var [inputValue, setInputValue] = (0, import_react2.useState)(function () {
@@ -263,6 +262,11 @@ function Stepper(props) {
     }
     return "";
   });
+  var hugChars = hug ? Math.max(inputValue.length, Math.max(hugMinChars, ...[min, max].filter(function (bound) {
+    return typeof bound === "number" && Number.isFinite(bound);
+  }).map(function (bound) {
+    return String(Math.trunc(Math.abs(bound))).length + 1;
+  })) + (precision > 0 ? precision + 1 : 0)) : 0;
   var [valueFlash, setValueFlash] = (0, import_react2.useState)(false);
   var [boundCaption, setBoundCaption] = (0, import_react2.useState)(null);
   var boundTimerRef = (0, import_react2.useRef)(null);
@@ -300,7 +304,7 @@ function Stepper(props) {
     setValueFlash(true);
     setTimeout(function () {
       return setValueFlash(false);
-    }, 90);
+    }, (0, import_theme.motionDurationMs)(motionTransition));
   }, [motionTransition]);
   var repeatIncrement = useRepeatAction(function () {
     return incrementRef.current();
@@ -383,15 +387,15 @@ function Stepper(props) {
   });
   var handleStepperKeyDown = (0, import_react2.useCallback)(function (event) {
     if (disabled || readOnly) return;
-    var unit = event.shiftKey ? step * LARGE_STEP_FACTOR : step;
+    var unit2 = event.shiftKey ? step * LARGE_STEP_FACTOR : step;
     switch (event.key) {
       case "ArrowUp":
         event.preventDefault();
-        applyDelta(unit);
+        applyDelta(unit2);
         break;
       case "ArrowDown":
         event.preventDefault();
-        applyDelta(-unit);
+        applyDelta(-unit2);
         break;
       case "PageUp":
         event.preventDefault();
@@ -430,12 +434,12 @@ function Stepper(props) {
     setInputValue(cleanText);
   }, [allowEmpty, precision]);
   var renderNumberRow = function renderNumberRow2(onBlurHandler, onFocusHandler, hasError) {
-    var _stepperCssTimings_motionTransition;
+    var _cssAnimationConfig_motionTransition;
     var currentValue = parseValue(inputValue);
     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 = motionTransition ? (_stepperCssTimings_motionTransition = stepperCssTimings[motionTransition]) !== null && _stepperCssTimings_motionTransition !== void 0 ? _stepperCssTimings_motionTransition : stepperCssTimings.quick : void 0;
+    var timing = motionTransition ? (_cssAnimationConfig_motionTransition = import_theme2.cssAnimationConfig[motionTransition]) !== null && _cssAnimationConfig_motionTransition !== void 0 ? _cssAnimationConfig_motionTransition : import_theme2.cssAnimationConfig.quick : void 0;
     var valueMotionStyle = !live && timing ? {
       transition: import_tamagui.isWeb ? `opacity ${timing}` : void 0,
       opacity: valueFlash ? 0.45 : 1
@@ -538,7 +542,15 @@ function Stepper(props) {
       "data-stepper-live": live ? "true" : void 0,
       "data-stepper-flash": valueFlash ? "true" : void 0,
       onChangeText: readOnly ? void 0 : handleInputChange,
-      textAlign: affix ? "right" : "center",
+      textAlign: affix ? "right" : showSpin ? "center" : "left",
+      ...(hug ? import_tamagui.isWeb ? {
+        flexGrow: 0,
+        flexShrink: 0
+      } : {
+        flexGrow: 0,
+        flexShrink: 0,
+        width: hugChars * hugNativeCharPx(controlSize)
+      } : void 0),
       opacity: valueMotionStyle.opacity,
       // LC-25 native value tween intentionally disabled: Tamagui's RN
       // animation driver crashes Hermes ("Cannot add new property
@@ -547,6 +559,9 @@ function Stepper(props) {
       ...(import_tamagui.isWeb ? {
         style: {
           ...(inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
+          ...(hug ? {
+            width: `${hugChars}ch`
+          } : void 0),
           transition: valueMotionStyle.transition,
           opacity: valueMotionStyle.opacity
         }
@@ -581,7 +596,7 @@ function Stepper(props) {
       flexShrink: 0,
       paddingHorizontal: "$1.5",
       ...knobProps.body,
-      fontSize: (0, import_theme2.sizeRecipeForToken)(String(controlSize), {
+      fontSize: (0, import_theme4.sizeRecipeForToken)(String(controlSize), {
         touch: hydrationTouch
       }).fontSize,
       color: "$color",
@@ -594,6 +609,10 @@ function Stepper(props) {
       "data-stepper": "true",
       "data-stepper-control": "true",
       "data-stepper-placement": placement,
+      "data-stepper-hug": hug ? "true" : void 0,
+      ...(hug ? {
+        alignSelf: "flex-start"
+      } : void 0),
       ...(showSpin ? {
         paddingHorizontal: 0,
         sizeRecipeEscape: "LC-81 stepper segments reach the compound frame edges"
@@ -603,7 +622,10 @@ function Stepper(props) {
     if (import_tamagui.isWeb && !disabled && !readOnly) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
         ...wheelProps,
-        style: {
+        style: hug ? {
+          minWidth: 0,
+          maxWidth: "100%"
+        } : {
           minWidth: 0,
           width: "100%"
         },
@@ -641,6 +663,7 @@ function Stepper(props) {
       size,
       knobProps,
       onBlur,
+      hug,
       // LC-40: FieldLayout owns the dimWhole assembly dim (keepLabel pins
       // the sibling label/helper readable) — it needs the disabled state.
       disabled,
@@ -670,6 +693,7 @@ function Stepper(props) {
           readOnly,
           disabled,
           onBlur,
+          hug,
           ...restProps
         },
         id,
@@ -735,6 +759,7 @@ function StepperFieldRenderer(param) {
     size: fieldProps.size,
     knobProps,
     onBlur: (0, import_utils.mergeFieldHandler)(field, "handleBlur", fieldProps.onBlur),
+    hug: fieldProps.hug,
     // LC-40: see standalone branch — FieldLayout carries dimWhole.
     disabled: fieldProps.disabled,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_InputParts.Input, {