react-native-system-ui 0.0.7 → 1.0.1

package/dist/cjs/components/stepper/Stepper.js

@@ -20,13 +20,16 @@ function _reactNative() {
 }
 var _hooks = require("../../hooks");
 var _utils = require("../../utils");
+var _useDirection = require("../config-provider/useDirection");
 var _tokens = require("./tokens");
+var _hairline = require("../../utils/hairline");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const LONG_PRESS_DELAY = 600;
 const LONG_PRESS_INTERVAL = 100;
-const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, ref) => {
-  const tokens = (0, _tokens.useStepperTokens)(p.tokensOverride);
+const StepperImpl = (props, ref) => {
+  const tokens = (0, _tokens.useStepperTokens)(props.tokensOverride);
+  const layoutDir = (0, _useDirection.useDirection)();
   const {
     min,
     max,
@@ -59,50 +62,66 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
     inputStyle,
     buttonStyle,
     style,
-    ...rest
-  } = p;
-  const [changing, setChanging] = (0, _react().useState)(false);
+    ...restProps
+  } = props;
+  const [isChanging, setIsChanging] = (0, _react().useState)(false);
   const changingRef = (0, _react().useRef)(false);
-  const decimalLength = (0, _utils.parseDecimalLength)(decimalLengthProp);
-  const resolvedStepRaw = Number(step ?? 1);
-  const resolvedStep = (0, _utils.isFiniteNumber)(resolvedStepRaw) && resolvedStepRaw > 0 ? resolvedStepRaw : 1;
-  const resolvedButtonSize = Math.max(0, (0, _utils.parseNumber)(buttonSize, tokens.defaults.buttonSize));
-  const resolvedInputWidth = Math.max(0, (0, _utils.parseNumber)(inputWidth, tokens.defaults.inputWidth));
-  const resolvedDefaultValue = (0, _react().useMemo)(() => {
-    const raw = p.defaultValue;
+  const onPlusRef = (0, _react().useRef)(onPlus);
+  const onMinusRef = (0, _react().useRef)(onMinus);
+  const onOverlimitRef = (0, _react().useRef)(onOverlimit);
+  const onFocusRef = (0, _react().useRef)(onFocus);
+  const onBlurRef = (0, _react().useRef)(onBlur);
+  const onClickRef = (0, _react().useRef)(onClick);
+  const valueRef = (0, _react().useRef)(null);
+  const inputRef = (0, _react().useRef)(null);
+  const inputValueRef = (0, _react().useRef)('');
+  const inputPropsRef = (0, _react().useRef)(inputProps);
+  const longPressRef = (0, _react().useRef)({
+    hadLongPress: false
+  });
+  onPlusRef.current = onPlus;
+  onMinusRef.current = onMinus;
+  onOverlimitRef.current = onOverlimit;
+  onFocusRef.current = onFocus;
+  onBlurRef.current = onBlur;
+  onClickRef.current = onClick;
+  inputPropsRef.current = inputProps;
+  const decimalLen = (0, _utils.parseDecimalLength)(decimalLengthProp);
+  const stepRaw = Number(step ?? 1);
+  const stepSize = (0, _utils.isFiniteNumber)(stepRaw) && stepRaw > 0 ? stepRaw : 1;
+  const rBtnSize = Math.max(0, (0, _utils.parseNumber)(buttonSize, tokens.defaults.buttonSize));
+  const rInputW = Math.max(0, (0, _utils.parseNumber)(inputWidth, tokens.defaults.inputWidth));
+  const defaultVal = (0, _react().useMemo)(() => {
+    const raw = props.defaultValue;
     if (raw === null) return null;
     const base = (0, _utils.isFiniteNumber)(raw) ? raw : 0;
-    const formatted = (0, _utils.formatNumber)(base, integer, decimalLength);
-    return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
-  }, [autoFixed, decimalLength, integer, max, min, p.defaultValue]);
+    const fmt = (0, _utils.formatNumber)(base, integer, decimalLen);
+    return autoFixed ? (0, _utils.clampValue)(fmt, min, max) : fmt;
+  }, [autoFixed, decimalLen, integer, max, min, props.defaultValue]);
   const [value, triggerChange] = (0, _hooks.useControllableValue)({
-    ...p,
-    defaultValue: resolvedDefaultValue
+    ...props,
+    defaultValue: defaultVal
   }, {
-    defaultValue: resolvedDefaultValue
+    defaultValue: defaultVal
   });
-  const valueRef = (0, _react().useRef)(value ?? null);
   (0, _react().useEffect)(() => {
     valueRef.current = value ?? null;
   }, [value]);
-  const inputRef = (0, _react().useRef)(null);
   (0, _react().useImperativeHandle)(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur()
   }));
-  const [hasFocus, setHasFocus] = (0, _react().useState)(false);
-  const [inputValue, setInputValue] = (0, _react().useState)(() => (0, _utils.numberToString)(value, decimalLength));
-  const inputValueRef = (0, _react().useRef)(inputValue);
-  const setInputText = (0, _react().useCallback)(text => {
+  const [isFocused, setIsFocused] = (0, _react().useState)(false);
+  const [inputText, setInputTextState] = (0, _react().useState)(() => (0, _utils.numberToString)(value, decimalLen));
+  const updateInputText = (0, _react().useCallback)(text => {
     inputValueRef.current = text;
-    setInputValue(text);
+    setInputTextState(text);
   }, []);
   (0, _react().useEffect)(() => {
-    if (!hasFocus) {
-      const nextText = (0, _utils.numberToString)(value, decimalLength);
-      setInputText(nextText);
+    if (!isFocused) {
+      updateInputText((0, _utils.numberToString)(value, decimalLen));
     }
-  }, [decimalLength, hasFocus, setInputText, value]);
+  }, [decimalLen, isFocused, updateInputText, value]);
   const getCurrentNumber = (0, _react().useCallback)(() => {
     const current = valueRef.current;
     if ((0, _utils.isFiniteNumber)(current)) return current;
@@ -113,15 +132,11 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
     if (type === 'plus' && disablePlus) return true;
     if (type === 'minus' && disableMinus) return true;
     const current = getCurrentNumber();
-    if (type === 'plus' && (0, _utils.isFiniteNumber)(max) && current >= max) {
-      return true;
-    }
-    if (type === 'minus' && (0, _utils.isFiniteNumber)(min) && current <= min) {
-      return true;
-    }
+    if (type === 'plus' && (0, _utils.isFiniteNumber)(max) && current >= max) return true;
+    if (type === 'minus' && (0, _utils.isFiniteNumber)(min) && current <= min) return true;
     return false;
   }, [disableMinus, disablePlus, disabled, getCurrentNumber, max, min]);
-  const setValue = (0, _react().useCallback)(next => {
+  const commitValue = (0, _react().useCallback)(next => {
     const prev = valueRef.current ?? null;
     if (Object.is(prev, next)) return false;
     valueRef.current = next;
@@ -130,93 +145,87 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
     });
     return true;
   }, [name, triggerChange]);
-  const applyNextValue = (0, _react().useCallback)(nextRaw => {
-    const formatted = (0, _utils.formatNumber)(nextRaw, integer, decimalLength);
+  const normalizeNumber = (0, _react().useCallback)(nextRaw => {
+    const formatted = (0, _utils.formatNumber)(nextRaw, integer, decimalLen);
     return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
-  }, [autoFixed, decimalLength, integer, max, min]);
-  const performValueChange = (0, _react().useCallback)((next, committed) => {
-    if (changingRef.current) {
-      return 'noop';
-    }
+  }, [autoFixed, decimalLen, integer, max, min]);
+  const processValueChange = (0, _react().useCallback)((next, committed) => {
+    if (changingRef.current) return 'noop';
     const commit = () => {
-      const didChange = setValue(next);
+      const didChange = commitValue(next);
       if (!didChange) return 'noop';
-      setInputText((0, _utils.numberToString)(next, decimalLength));
+      updateInputText((0, _utils.numberToString)(next, decimalLen));
       committed?.(next);
       return 'changed';
     };
-    if (!beforeChange) {
-      return commit();
-    }
+    if (!beforeChange) return commit();
     try {
       const result = beforeChange(next);
       if ((0, _utils.isPromiseLike)(result)) {
         changingRef.current = true;
-        setChanging(true);
+        setIsChanging(true);
         result.then(allowed => {
           if (allowed === false) {
-            setInputText((0, _utils.numberToString)(valueRef.current, decimalLength));
+            updateInputText((0, _utils.numberToString)(valueRef.current, decimalLen));
             return;
           }
+          ;
           commit();
-        }).catch(() => {
-          commit();
-        }).finally(() => {
+        }).catch(() => commit()).finally(() => {
           changingRef.current = false;
-          setChanging(false);
+          setIsChanging(false);
         });
         return 'pending';
       }
+      ;
       if (result === false) {
-        setInputText((0, _utils.numberToString)(valueRef.current, decimalLength));
+        updateInputText((0, _utils.numberToString)(valueRef.current, decimalLen));
         return 'noop';
       }
+      ;
       return commit();
     } catch {
       return commit();
     }
-  }, [beforeChange, decimalLength, setInputText, setValue]);
+  }, [beforeChange, decimalLen, updateInputText, commitValue]);
   const stepOnce = (0, _react().useCallback)((type, event, options) => {
-    if (changingRef.current) {
-      return 'noop';
-    }
+    if (changingRef.current) return 'noop';
     const emitOverlimit = options?.emitOverlimit ?? true;
-    const emitButtonCallbacks = options?.emitButtonCallbacks ?? Boolean(event);
+    const emitCallbacks = options?.emitButtonCallbacks ?? Boolean(event);
     if (isActionDisabled(type)) {
-      if (emitOverlimit) onOverlimit?.(type);
+      if (emitOverlimit) onOverlimitRef.current?.(type);
       return 'overlimit';
     }
+    ;
     const current = getCurrentNumber();
-    const diff = type === 'plus' ? resolvedStep : -resolvedStep;
-    const next = applyNextValue((0, _utils.addNumber)(current, diff));
-    return performValueChange(next, committedValue => {
-      if (!emitButtonCallbacks || !event) return;
+    const diff = type === 'plus' ? stepSize : -stepSize;
+    const next = normalizeNumber((0, _utils.addNumber)(current, diff));
+    return processValueChange(next, committedValue => {
+      if (!emitCallbacks || !event) return;
       if (type === 'plus') {
-        onPlus?.(event, committedValue);
+        onPlusRef.current?.(event, committedValue);
       } else {
-        onMinus?.(event, committedValue);
+        onMinusRef.current?.(event, committedValue);
       }
     });
-  }, [applyNextValue, getCurrentNumber, isActionDisabled, onMinus, onOverlimit, onPlus, performValueChange, resolvedStep]);
-  const longPressRef = (0, _react().useRef)({
-    hadLongPress: false
-  });
+  }, [normalizeNumber, getCurrentNumber, isActionDisabled, processValueChange, stepSize]);
   const clearLongPress = (0, _react().useCallback)(() => {
     if (longPressRef.current.delay) {
       clearTimeout(longPressRef.current.delay);
       longPressRef.current.delay = undefined;
     }
+    ;
     if (longPressRef.current.interval) {
       clearInterval(longPressRef.current.interval);
       longPressRef.current.interval = undefined;
     }
   }, []);
-  (0, _react().useEffect)(() => clearLongPress, [clearLongPress]);
+  (0, _react().useEffect)(() => clearLongPress(), [clearLongPress]);
   (0, _react().useEffect)(() => {
-    if (disabled || changing || !longPress) {
+    if (disabled || isChanging || !longPress) {
       clearLongPress();
     }
-  }, [changing, clearLongPress, disabled, longPress]);
+  }, [isChanging, clearLongPress, disabled, longPress]);
   const startLongPress = (0, _react().useCallback)(type => {
     if (!longPress) return;
     if (changingRef.current) return;
@@ -233,6 +242,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
         clearLongPress();
         return;
       }
+      ;
       longPressRef.current.interval = setInterval(() => {
         const result = stepOnce(type, undefined, {
           emitOverlimit: true,
@@ -244,14 +254,13 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       }, LONG_PRESS_INTERVAL);
     }, LONG_PRESS_DELAY);
   }, [clearLongPress, isActionDisabled, longPress, stepOnce]);
-  const handlePressOut = (0, _react().useCallback)(() => {
-    clearLongPress();
-  }, [clearLongPress]);
+  const handlePressOut = (0, _react().useCallback)(() => clearLongPress(), [clearLongPress]);
   const handleButtonPress = (0, _react().useCallback)((type, event) => {
     if (longPressRef.current.hadLongPress) {
       longPressRef.current.hadLongPress = false;
       return;
     }
+    ;
     longPressRef.current.hadLongPress = false;
     stepOnce(type, event, {
       emitOverlimit: true,
@@ -261,122 +270,129 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
   const currentForCompare = (0, _utils.isFiniteNumber)(value) ? value : 0;
   const minNumber = (0, _utils.isFiniteNumber)(min) ? min : undefined;
   const maxNumber = (0, _utils.isFiniteNumber)(max) ? max : undefined;
-  const disabledForAll = disabled || changing;
-  const minusDisabled = disabledForAll || disableMinus || minNumber !== undefined && currentForCompare <= minNumber;
-  const plusDisabled = disabledForAll || disablePlus || maxNumber !== undefined && currentForCompare >= maxNumber;
+  const isDisabledAll = disabled || isChanging;
+  const isMinusDisabled = isDisabledAll || disableMinus || minNumber != null && currentForCompare <= minNumber;
+  const isPlusDisabled = isDisabledAll || disablePlus || maxNumber != null && currentForCompare >= maxNumber;
   const radius = tokens.radii.default;
-  const buttonBaseStyle = (0, _react().useMemo)(() => ({
-    width: resolvedButtonSize,
-    height: resolvedButtonSize
-  }), [resolvedButtonSize]);
-  const inputBoxStyle = (0, _react().useMemo)(() => ({
-    width: resolvedInputWidth,
-    height: resolvedButtonSize,
+  const btnSizeStyle = (0, _react().useMemo)(() => ({
+    width: rBtnSize,
+    height: rBtnSize
+  }), [rBtnSize]);
+  const inputSizeStyle = (0, _react().useMemo)(() => ({
+    width: rInputW,
+    height: rBtnSize,
     marginHorizontal: tokens.spacing.gap
-  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
+  }), [rBtnSize, rInputW, tokens.spacing.gap]);
   const getButtonStyle = (0, _react().useCallback)((type, state) => {
     const isPlus = type === 'plus';
-    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    const isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
     if (theme === 'round') {
-      const base = [styles.button, buttonBaseStyle, {
-        borderRadius: resolvedButtonSize / 2,
-        opacity: disabledState ? tokens.opacity.roundDisabled : 1
+      const base = [S.btn, btnSizeStyle, {
+        borderRadius: rBtnSize / 2,
+        opacity: isDisabled ? tokens.opacity.roundDisabled : 1
       }];
       if (isPlus) {
         return [...base, {
           backgroundColor: tokens.colors.roundTheme,
-          ...(state.pressed && !disabledState && {
+          ...(state.pressed && !isDisabled && {
             opacity: tokens.opacity.pressed
           })
         }, buttonStyle];
       }
+      ;
       return [...base, {
         backgroundColor: tokens.colors.roundThemeBackground,
-        borderWidth: _reactNative().StyleSheet.hairlineWidth,
-        borderColor: tokens.colors.roundTheme,
-        ...(state.pressed && !disabledState && {
+        ...(state.pressed && !isDisabled && {
           opacity: tokens.opacity.pressed
         })
       }, buttonStyle];
     }
-    const cornerStyle = type === 'minus' ? {
+    ;
+    const isLeading = type === 'minus' !== (layoutDir === 'rtl');
+    const cornerStyle = isLeading ? {
       borderTopLeftRadius: radius,
       borderBottomLeftRadius: radius
     } : {
       borderTopRightRadius: radius,
       borderBottomRightRadius: radius
     };
-    const backgroundColor = disabledState ? tokens.colors.buttonDisabledBackground : state.pressed ? tokens.colors.active : tokens.colors.background;
-    return [styles.button, buttonBaseStyle, cornerStyle, {
-      backgroundColor
+    const bgColor = isDisabled ? tokens.colors.buttonDisabledBackground : state.pressed ? tokens.colors.active : tokens.colors.background;
+    return [S.btn, btnSizeStyle, cornerStyle, {
+      backgroundColor: bgColor
     }, buttonStyle];
-  }, [buttonBaseStyle, buttonStyle, minusDisabled, plusDisabled, radius, resolvedButtonSize, theme, tokens.colors.active, tokens.colors.background, tokens.colors.buttonDisabledBackground, tokens.colors.roundTheme, tokens.colors.roundThemeBackground, tokens.opacity.pressed, tokens.opacity.roundDisabled]);
+  }, [btnSizeStyle, buttonStyle, isMinusDisabled, isPlusDisabled, radius, rBtnSize, theme, layoutDir, tokens.colors.active, tokens.colors.background, tokens.colors.buttonDisabledBackground, tokens.colors.roundTheme, tokens.colors.roundThemeBackground, tokens.opacity.pressed, tokens.opacity.roundDisabled]);
   const getButtonTextStyle = (0, _react().useCallback)(type => {
     const isPlus = type === 'plus';
-    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    const isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
     if (theme === 'round') {
       const color = isPlus ? tokens.colors.roundThemeText : tokens.colors.roundTheme;
-      return [styles.buttonText, {
+      return [S.btnTxt, {
         color,
+        fontFamily: tokens.typography.fontFamily,
         fontSize: tokens.typography.fontSize,
         fontWeight: tokens.typography.fontWeight
       }];
     }
-    return [styles.buttonText, {
-      color: disabledState ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
+    ;
+    return [S.btnTxt, {
+      color: isDisabled ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.fontSize,
       fontWeight: tokens.typography.fontWeight
     }];
-  }, [minusDisabled, plusDisabled, theme, tokens.colors.buttonDisabledIcon, tokens.colors.buttonIcon, tokens.colors.roundTheme, tokens.colors.roundThemeText, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  }, [isMinusDisabled, isPlusDisabled, theme, tokens.colors.buttonDisabledIcon, tokens.colors.buttonIcon, tokens.colors.roundTheme, tokens.colors.roundThemeText, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight]);
   const handleChangeText = (0, _react().useCallback)(text => {
     if (disableInput || disabled || changingRef.current) return;
-    setInputText(text);
-    inputProps?.onChangeText?.(text);
+    updateInputText(text);
+    inputPropsRef.current?.onChangeText?.(text);
     const trimmed = text.trim();
     if (trimmed === '') {
-      performValueChange(allowEmpty ? null : resolvedDefaultValue);
+      processValueChange(allowEmpty ? null : defaultVal);
       return;
     }
-    const numeric = Number.parseFloat(trimmed);
-    if (!Number.isFinite(numeric)) return;
-    performValueChange(applyNextValue(numeric));
-  }, [allowEmpty, applyNextValue, changingRef, disableInput, disabled, inputProps, performValueChange, resolvedDefaultValue, setInputText]);
+    ;
+    const num = Number.parseFloat(trimmed);
+    if (!Number.isFinite(num)) return;
+    processValueChange(normalizeNumber(num));
+  }, [allowEmpty, normalizeNumber, changingRef, disableInput, disabled, inputPropsRef, processValueChange, defaultVal, updateInputText]);
   const handleFocus = (0, _react().useCallback)(event => {
     if (disableInput) {
       inputRef.current?.blur();
       return;
     }
-    setHasFocus(true);
-    onFocus?.(event);
-    inputProps?.onFocus?.(event);
-  }, [disableInput, inputProps, onFocus]);
+    ;
+    setIsFocused(true);
+    onFocusRef.current?.(event);
+    inputPropsRef.current?.onFocus?.(event);
+  }, [disableInput]);
   const handleBlur = (0, _react().useCallback)(event => {
-    setHasFocus(false);
+    setIsFocused(false);
     if (!changingRef.current) {
       const trimmed = inputValueRef.current.trim();
       if (trimmed === '') {
-        performValueChange(allowEmpty ? null : resolvedDefaultValue);
+        processValueChange(allowEmpty ? null : defaultVal);
       } else {
-        const numeric = Number.parseFloat(trimmed);
-        if (Number.isFinite(numeric)) {
-          performValueChange(applyNextValue(numeric));
+        const num = Number.parseFloat(trimmed);
+        if (Number.isFinite(num)) {
+          processValueChange(normalizeNumber(num));
         }
       }
     }
-    onBlur?.(event);
-    inputProps?.onBlur?.(event);
-  }, [allowEmpty, applyNextValue, inputProps, onBlur, performValueChange, resolvedDefaultValue]);
+    ;
+    onBlurRef.current?.(event);
+    inputPropsRef.current?.onBlur?.(event);
+  }, [allowEmpty, normalizeNumber, processValueChange, defaultVal]);
   const handleInputPressIn = (0, _react().useCallback)(event => {
-    onClick?.(event);
-    inputProps?.onPressIn?.(event);
-  }, [inputProps, onClick]);
+    onClickRef.current?.(event);
+    inputPropsRef.current?.onPressIn?.(event);
+  }, []);
   const handleMinusPress = (0, _react().useCallback)(event => handleButtonPress('minus', event), [handleButtonPress]);
   const handlePlusPress = (0, _react().useCallback)(event => handleButtonPress('plus', event), [handleButtonPress]);
   const handleMinusPressIn = (0, _react().useCallback)(() => startLongPress('minus'), [startLongPress]);
   const handlePlusPressIn = (0, _react().useCallback)(() => startLongPress('plus'), [startLongPress]);
-  const getMinusButtonStyle = (0, _react().useCallback)(state => getButtonStyle('minus', state), [getButtonStyle]);
-  const getPlusButtonStyle = (0, _react().useCallback)(state => getButtonStyle('plus', state), [getButtonStyle]);
-  const renderMinusButton = (0, _react().useCallback)(() => {
+  const getMinusBtnStyle = (0, _react().useCallback)(state => getButtonStyle('minus', state), [getButtonStyle]);
+  const getPlusBtnStyle = (0, _react().useCallback)(state => getButtonStyle('plus', state), [getButtonStyle]);
+  const renderMinusBtn = (0, _react().useCallback)(() => {
     if (!showMinus) return null;
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       key: "minus",
@@ -384,17 +400,23 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       accessibilityRole: "button",
       accessibilityLabel: "minus",
       accessibilityState: {
-        disabled: minusDisabled
+        disabled: isMinusDisabled
       },
       onPress: handleMinusPress,
       onPressIn: handleMinusPressIn,
       onPressOut: handlePressOut,
-      style: getMinusButtonStyle
+      style: getMinusBtnStyle
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: getButtonTextStyle('minus')
-    }, "-"));
-  }, [getButtonTextStyle, getMinusButtonStyle, handleMinusPress, handleMinusPressIn, handlePressOut, minusDisabled, showMinus]);
-  const renderPlusButton = (0, _react().useCallback)(() => {
+    }, "-"), theme === 'round' && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: (0, _hairline.createHairlineView)({
+        position: 'all',
+        color: tokens.colors.roundTheme,
+        borderRadius: rBtnSize / 2
+      })
+    }));
+  }, [getButtonTextStyle, getMinusBtnStyle, handleMinusPress, handleMinusPressIn, handlePressOut, isMinusDisabled, showMinus, theme, tokens.colors.roundTheme, rBtnSize]);
+  const renderPlusBtn = (0, _react().useCallback)(() => {
     if (!showPlus) return null;
     return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       key: "plus",
@@ -402,33 +424,33 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       accessibilityRole: "button",
       accessibilityLabel: "add",
       accessibilityState: {
-        disabled: plusDisabled
+        disabled: isPlusDisabled
       },
       onPress: handlePlusPress,
       onPressIn: handlePlusPressIn,
       onPressOut: handlePressOut,
-      style: getPlusButtonStyle
+      style: getPlusBtnStyle
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
       style: getButtonTextStyle('plus')
     }, "+"));
-  }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
+  }, [getButtonTextStyle, getPlusBtnStyle, handlePlusPress, handlePlusPressIn, handlePressOut, isPlusDisabled, showPlus]);
   const inputNode = (0, _react().useMemo)(() => {
     if (!showInput) return null;
-    const editable = !disabledForAll && !disableInput;
-    const inputDisabled = disabledForAll || disableInput;
-    const inputBackground = theme === 'round' ? tokens.colors.transparent : inputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
-    const inputTextColor = inputDisabled ? tokens.colors.inputDisabledText : tokens.colors.inputText;
+    const editable = !isDisabledAll && !disableInput;
+    const isInputDisabled = isDisabledAll || disableInput;
+    const bgColor = theme === 'round' ? tokens.colors.transparent : isInputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
+    const textColor = isInputDisabled ? tokens.colors.inputDisabledText : tokens.colors.inputText;
     const keyboardType = integer ? 'number-pad' : 'decimal-pad';
     return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
       ref: inputRef
     }, inputProps, {
-      style: [styles.input, inputBoxStyle, {
-        backgroundColor: inputBackground,
-        color: inputTextColor,
+      style: [S.inp, inputSizeStyle, {
+        backgroundColor: bgColor,
+        color: textColor,
         paddingHorizontal: tokens.spacing.none,
         paddingVertical: tokens.spacing.none
       }, inputStyle],
-      value: inputValue,
+      value: inputText,
       placeholder: placeholder,
       editable: editable,
       keyboardType: keyboardType,
@@ -437,24 +459,26 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       onBlur: handleBlur,
       onPressIn: handleInputPressIn
     }));
-  }, [disabledForAll, disableInput, handleBlur, handleChangeText, handleFocus, handleInputPressIn, inputBoxStyle, inputProps, inputStyle, inputValue, integer, placeholder, showInput, theme, tokens.colors.background, tokens.colors.inputDisabledBackground, tokens.colors.inputDisabledText, tokens.colors.inputText, tokens.colors.transparent, tokens.spacing.none]);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    style: [styles.container, style]
-  }), renderMinusButton(), inputNode, renderPlusButton());
-});
-const styles = _reactNative().StyleSheet.create({
-  container: {
+  }, [isDisabledAll, disableInput, handleBlur, handleChangeText, handleFocus, handleInputPressIn, inputSizeStyle, inputProps, inputStyle, inputText, integer, placeholder, showInput, theme, tokens.colors.background, tokens.colors.inputDisabledBackground, tokens.colors.inputDisabledText, tokens.colors.inputText, tokens.colors.transparent, tokens.spacing.none]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, restProps, {
+    style: [S.cnt, style]
+  }), renderMinusBtn(), inputNode, renderPlusBtn());
+};
+const S = _reactNative().StyleSheet.create({
+  cnt: {
     flexDirection: 'row',
     alignItems: 'center'
   },
-  button: {
+  btn: {
     justifyContent: 'center',
     alignItems: 'center'
   },
-  buttonText: {},
-  input: {
+  btnTxt: {},
+  inp: {
     textAlign: 'center'
   }
 });
-Stepper.displayName = 'Stepper';
+const StepperForwardRef = /*#__PURE__*/_react().default.forwardRef(StepperImpl);
+StepperForwardRef.displayName = 'Stepper';
+const Stepper = exports.Stepper = /*#__PURE__*/_react().default.memo(StepperForwardRef);
 var _default = exports.default = Stepper;

package/dist/cjs/components/stepper/tokens.js

@@ -42,6 +42,7 @@ const createStepperTokens = foundations => {
       default: radii.md
     },
     typography: {
+      fontFamily: typography.fontFamily,
       fontSize: fontSize.md,
       fontWeight: typography.weight.semiBold
     },