react-native-system-ui 0.0.7 → 1.0.1

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

@@ -2,12 +2,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
-import { parseNumber, addNumber as add, clampValue, formatNumber as formatValue, numberToString as valueToString, parseDecimalLength, isFiniteNumber, isPromiseLike } from '../../utils';
+import { parseNumber, addNumber, clampValue, formatNumber, numberToString, parseDecimalLength, isFiniteNumber, isPromiseLike } from '../../utils';
+import { useDirection } from '../config-provider/useDirection';
 import { useStepperTokens } from './tokens';
+import { createHairlineView } from '../../utils/hairline';
 const LONG_PRESS_DELAY = 600;
 const LONG_PRESS_INTERVAL = 100;
-export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
-  const tokens = useStepperTokens(p.tokensOverride);
+const StepperImpl = (props, ref) => {
+  const tokens = useStepperTokens(props.tokensOverride);
+  const layoutDir = useDirection();
   const {
     min,
     max,
@@ -40,50 +43,66 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
     inputStyle,
     buttonStyle,
     style,
-    ...rest
-  } = p;
-  const [changing, setChanging] = useState(false);
+    ...restProps
+  } = props;
+  const [isChanging, setIsChanging] = useState(false);
   const changingRef = useRef(false);
-  const decimalLength = parseDecimalLength(decimalLengthProp);
-  const resolvedStepRaw = Number(step ?? 1);
-  const resolvedStep = isFiniteNumber(resolvedStepRaw) && resolvedStepRaw > 0 ? resolvedStepRaw : 1;
-  const resolvedButtonSize = Math.max(0, parseNumber(buttonSize, tokens.defaults.buttonSize));
-  const resolvedInputWidth = Math.max(0, parseNumber(inputWidth, tokens.defaults.inputWidth));
-  const resolvedDefaultValue = useMemo(() => {
-    const raw = p.defaultValue;
+  const onPlusRef = useRef(onPlus);
+  const onMinusRef = useRef(onMinus);
+  const onOverlimitRef = useRef(onOverlimit);
+  const onFocusRef = useRef(onFocus);
+  const onBlurRef = useRef(onBlur);
+  const onClickRef = useRef(onClick);
+  const valueRef = useRef(null);
+  const inputRef = useRef(null);
+  const inputValueRef = useRef('');
+  const inputPropsRef = useRef(inputProps);
+  const longPressRef = 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 = parseDecimalLength(decimalLengthProp);
+  const stepRaw = Number(step ?? 1);
+  const stepSize = isFiniteNumber(stepRaw) && stepRaw > 0 ? stepRaw : 1;
+  const rBtnSize = Math.max(0, parseNumber(buttonSize, tokens.defaults.buttonSize));
+  const rInputW = Math.max(0, parseNumber(inputWidth, tokens.defaults.inputWidth));
+  const defaultVal = useMemo(() => {
+    const raw = props.defaultValue;
     if (raw === null) return null;
     const base = isFiniteNumber(raw) ? raw : 0;
-    const formatted = formatValue(base, integer, decimalLength);
-    return autoFixed ? clampValue(formatted, min, max) : formatted;
-  }, [autoFixed, decimalLength, integer, max, min, p.defaultValue]);
+    const fmt = formatNumber(base, integer, decimalLen);
+    return autoFixed ? clampValue(fmt, min, max) : fmt;
+  }, [autoFixed, decimalLen, integer, max, min, props.defaultValue]);
   const [value, triggerChange] = useControllableValue({
-    ...p,
-    defaultValue: resolvedDefaultValue
+    ...props,
+    defaultValue: defaultVal
   }, {
-    defaultValue: resolvedDefaultValue
+    defaultValue: defaultVal
   });
-  const valueRef = useRef(value ?? null);
   useEffect(() => {
     valueRef.current = value ?? null;
   }, [value]);
-  const inputRef = useRef(null);
   useImperativeHandle(ref, () => ({
     focus: () => inputRef.current?.focus(),
     blur: () => inputRef.current?.blur()
   }));
-  const [hasFocus, setHasFocus] = useState(false);
-  const [inputValue, setInputValue] = useState(() => valueToString(value, decimalLength));
-  const inputValueRef = useRef(inputValue);
-  const setInputText = useCallback(text => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [inputText, setInputTextState] = useState(() => numberToString(value, decimalLen));
+  const updateInputText = useCallback(text => {
     inputValueRef.current = text;
-    setInputValue(text);
+    setInputTextState(text);
   }, []);
   useEffect(() => {
-    if (!hasFocus) {
-      const nextText = valueToString(value, decimalLength);
-      setInputText(nextText);
+    if (!isFocused) {
+      updateInputText(numberToString(value, decimalLen));
     }
-  }, [decimalLength, hasFocus, setInputText, value]);
+  }, [decimalLen, isFocused, updateInputText, value]);
   const getCurrentNumber = useCallback(() => {
     const current = valueRef.current;
     if (isFiniteNumber(current)) return current;
@@ -94,15 +113,11 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
     if (type === 'plus' && disablePlus) return true;
     if (type === 'minus' && disableMinus) return true;
     const current = getCurrentNumber();
-    if (type === 'plus' && isFiniteNumber(max) && current >= max) {
-      return true;
-    }
-    if (type === 'minus' && isFiniteNumber(min) && current <= min) {
-      return true;
-    }
+    if (type === 'plus' && isFiniteNumber(max) && current >= max) return true;
+    if (type === 'minus' && isFiniteNumber(min) && current <= min) return true;
     return false;
   }, [disableMinus, disablePlus, disabled, getCurrentNumber, max, min]);
-  const setValue = useCallback(next => {
+  const commitValue = useCallback(next => {
     const prev = valueRef.current ?? null;
     if (Object.is(prev, next)) return false;
     valueRef.current = next;
@@ -111,93 +126,87 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
     });
     return true;
   }, [name, triggerChange]);
-  const applyNextValue = useCallback(nextRaw => {
-    const formatted = formatValue(nextRaw, integer, decimalLength);
+  const normalizeNumber = useCallback(nextRaw => {
+    const formatted = formatNumber(nextRaw, integer, decimalLen);
     return autoFixed ? clampValue(formatted, min, max) : formatted;
-  }, [autoFixed, decimalLength, integer, max, min]);
-  const performValueChange = useCallback((next, committed) => {
-    if (changingRef.current) {
-      return 'noop';
-    }
+  }, [autoFixed, decimalLen, integer, max, min]);
+  const processValueChange = useCallback((next, committed) => {
+    if (changingRef.current) return 'noop';
     const commit = () => {
-      const didChange = setValue(next);
+      const didChange = commitValue(next);
       if (!didChange) return 'noop';
-      setInputText(valueToString(next, decimalLength));
+      updateInputText(numberToString(next, decimalLen));
       committed?.(next);
       return 'changed';
     };
-    if (!beforeChange) {
-      return commit();
-    }
+    if (!beforeChange) return commit();
     try {
       const result = beforeChange(next);
       if (isPromiseLike(result)) {
         changingRef.current = true;
-        setChanging(true);
+        setIsChanging(true);
         result.then(allowed => {
           if (allowed === false) {
-            setInputText(valueToString(valueRef.current, decimalLength));
+            updateInputText(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(valueToString(valueRef.current, decimalLength));
+        updateInputText(numberToString(valueRef.current, decimalLen));
         return 'noop';
       }
+      ;
       return commit();
     } catch {
       return commit();
     }
-  }, [beforeChange, decimalLength, setInputText, setValue]);
+  }, [beforeChange, decimalLen, updateInputText, commitValue]);
   const stepOnce = 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(add(current, diff));
-    return performValueChange(next, committedValue => {
-      if (!emitButtonCallbacks || !event) return;
+    const diff = type === 'plus' ? stepSize : -stepSize;
+    const next = normalizeNumber(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 = useRef({
-    hadLongPress: false
-  });
+  }, [normalizeNumber, getCurrentNumber, isActionDisabled, processValueChange, stepSize]);
   const clearLongPress = 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;
     }
   }, []);
-  useEffect(() => clearLongPress, [clearLongPress]);
+  useEffect(() => clearLongPress(), [clearLongPress]);
   useEffect(() => {
-    if (disabled || changing || !longPress) {
+    if (disabled || isChanging || !longPress) {
       clearLongPress();
     }
-  }, [changing, clearLongPress, disabled, longPress]);
+  }, [isChanging, clearLongPress, disabled, longPress]);
   const startLongPress = useCallback(type => {
     if (!longPress) return;
     if (changingRef.current) return;
@@ -214,6 +223,7 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
         clearLongPress();
         return;
       }
+      ;
       longPressRef.current.interval = setInterval(() => {
         const result = stepOnce(type, undefined, {
           emitOverlimit: true,
@@ -225,14 +235,13 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       }, LONG_PRESS_INTERVAL);
     }, LONG_PRESS_DELAY);
   }, [clearLongPress, isActionDisabled, longPress, stepOnce]);
-  const handlePressOut = useCallback(() => {
-    clearLongPress();
-  }, [clearLongPress]);
+  const handlePressOut = useCallback(() => clearLongPress(), [clearLongPress]);
   const handleButtonPress = useCallback((type, event) => {
     if (longPressRef.current.hadLongPress) {
       longPressRef.current.hadLongPress = false;
       return;
     }
+    ;
     longPressRef.current.hadLongPress = false;
     stepOnce(type, event, {
       emitOverlimit: true,
@@ -242,122 +251,129 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
   const currentForCompare = isFiniteNumber(value) ? value : 0;
   const minNumber = isFiniteNumber(min) ? min : undefined;
   const maxNumber = 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 = useMemo(() => ({
-    width: resolvedButtonSize,
-    height: resolvedButtonSize
-  }), [resolvedButtonSize]);
-  const inputBoxStyle = useMemo(() => ({
-    width: resolvedInputWidth,
-    height: resolvedButtonSize,
+  const btnSizeStyle = useMemo(() => ({
+    width: rBtnSize,
+    height: rBtnSize
+  }), [rBtnSize]);
+  const inputSizeStyle = useMemo(() => ({
+    width: rInputW,
+    height: rBtnSize,
     marginHorizontal: tokens.spacing.gap
-  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
+  }), [rBtnSize, rInputW, tokens.spacing.gap]);
   const getButtonStyle = 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: 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 = 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 = 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 = 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 = 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 = useCallback(event => {
-    onClick?.(event);
-    inputProps?.onPressIn?.(event);
-  }, [inputProps, onClick]);
+    onClickRef.current?.(event);
+    inputPropsRef.current?.onPressIn?.(event);
+  }, []);
   const handleMinusPress = useCallback(event => handleButtonPress('minus', event), [handleButtonPress]);
   const handlePlusPress = useCallback(event => handleButtonPress('plus', event), [handleButtonPress]);
   const handleMinusPressIn = useCallback(() => startLongPress('minus'), [startLongPress]);
   const handlePlusPressIn = useCallback(() => startLongPress('plus'), [startLongPress]);
-  const getMinusButtonStyle = useCallback(state => getButtonStyle('minus', state), [getButtonStyle]);
-  const getPlusButtonStyle = useCallback(state => getButtonStyle('plus', state), [getButtonStyle]);
-  const renderMinusButton = useCallback(() => {
+  const getMinusBtnStyle = useCallback(state => getButtonStyle('minus', state), [getButtonStyle]);
+  const getPlusBtnStyle = useCallback(state => getButtonStyle('plus', state), [getButtonStyle]);
+  const renderMinusBtn = useCallback(() => {
     if (!showMinus) return null;
     return /*#__PURE__*/React.createElement(Pressable, {
       key: "minus",
@@ -365,17 +381,23 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       accessibilityRole: "button",
       accessibilityLabel: "minus",
       accessibilityState: {
-        disabled: minusDisabled
+        disabled: isMinusDisabled
       },
       onPress: handleMinusPress,
       onPressIn: handleMinusPressIn,
       onPressOut: handlePressOut,
-      style: getMinusButtonStyle
+      style: getMinusBtnStyle
     }, /*#__PURE__*/React.createElement(Text, {
       style: getButtonTextStyle('minus')
-    }, "-"));
-  }, [getButtonTextStyle, getMinusButtonStyle, handleMinusPress, handleMinusPressIn, handlePressOut, minusDisabled, showMinus]);
-  const renderPlusButton = useCallback(() => {
+    }, "-"), theme === 'round' && /*#__PURE__*/React.createElement(View, {
+      style: createHairlineView({
+        position: 'all',
+        color: tokens.colors.roundTheme,
+        borderRadius: rBtnSize / 2
+      })
+    }));
+  }, [getButtonTextStyle, getMinusBtnStyle, handleMinusPress, handleMinusPressIn, handlePressOut, isMinusDisabled, showMinus, theme, tokens.colors.roundTheme, rBtnSize]);
+  const renderPlusBtn = useCallback(() => {
     if (!showPlus) return null;
     return /*#__PURE__*/React.createElement(Pressable, {
       key: "plus",
@@ -383,33 +405,33 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       accessibilityRole: "button",
       accessibilityLabel: "add",
       accessibilityState: {
-        disabled: plusDisabled
+        disabled: isPlusDisabled
       },
       onPress: handlePlusPress,
       onPressIn: handlePlusPressIn,
       onPressOut: handlePressOut,
-      style: getPlusButtonStyle
+      style: getPlusBtnStyle
     }, /*#__PURE__*/React.createElement(Text, {
       style: getButtonTextStyle('plus')
     }, "+"));
-  }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
+  }, [getButtonTextStyle, getPlusBtnStyle, handlePlusPress, handlePlusPressIn, handlePressOut, isPlusDisabled, showPlus]);
   const inputNode = 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.createElement(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,
@@ -418,24 +440,26 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       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.createElement(View, _extends({}, rest, {
-    style: [styles.container, style]
-  }), renderMinusButton(), inputNode, renderPlusButton());
-});
-const styles = 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.createElement(View, _extends({}, restProps, {
+    style: [S.cnt, style]
+  }), renderMinusBtn(), inputNode, renderPlusBtn());
+};
+const S = 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.forwardRef(StepperImpl);
+StepperForwardRef.displayName = 'Stepper';
+export const Stepper = /*#__PURE__*/React.memo(StepperForwardRef);
 export default Stepper;

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

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