react-native-system-ui 1.0.2 → 1.0.3

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

@@ -1,484 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Stepper = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-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 StepperImpl = (props, ref) => {
-  const tokens = (0, _tokens.useStepperTokens)(props.tokensOverride);
-  const layoutDir = (0, _useDirection.useDirection)();
-  const {
-    min,
-    max,
-    step = 1,
-    autoFixed = true,
-    beforeChange,
-    integer = false,
-    decimalLength: decimalLengthProp,
-    disabled = false,
-    disablePlus = false,
-    disableMinus = false,
-    disableInput = false,
-    allowEmpty = false,
-    showPlus = tokens.defaults.showPlus,
-    showMinus = tokens.defaults.showMinus,
-    showInput = tokens.defaults.showInput,
-    longPress = tokens.defaults.longPress,
-    theme = tokens.defaults.theme,
-    inputWidth,
-    buttonSize,
-    name,
-    placeholder,
-    onClick,
-    onPlus,
-    onMinus,
-    onOverlimit,
-    onFocus,
-    onBlur,
-    inputProps,
-    inputStyle,
-    buttonStyle,
-    style,
-    ...restProps
-  } = props;
-  const [isChanging, setIsChanging] = (0, _react().useState)(false);
-  const changingRef = (0, _react().useRef)(false);
-  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 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)({
-    ...props,
-    defaultValue: defaultVal
-  }, {
-    defaultValue: defaultVal
-  });
-  (0, _react().useEffect)(() => {
-    valueRef.current = value ?? null;
-  }, [value]);
-  (0, _react().useImperativeHandle)(ref, () => ({
-    focus: () => inputRef.current?.focus(),
-    blur: () => inputRef.current?.blur()
-  }));
-  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;
-    setInputTextState(text);
-  }, []);
-  (0, _react().useEffect)(() => {
-    if (!isFocused) {
-      updateInputText((0, _utils.numberToString)(value, decimalLen));
-    }
-  }, [decimalLen, isFocused, updateInputText, value]);
-  const getCurrentNumber = (0, _react().useCallback)(() => {
-    const current = valueRef.current;
-    if ((0, _utils.isFiniteNumber)(current)) return current;
-    return (0, _utils.isFiniteNumber)(min) ? min : 0;
-  }, [min]);
-  const isActionDisabled = (0, _react().useCallback)(type => {
-    if (disabled) return true;
-    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;
-    return false;
-  }, [disableMinus, disablePlus, disabled, getCurrentNumber, max, min]);
-  const commitValue = (0, _react().useCallback)(next => {
-    const prev = valueRef.current ?? null;
-    if (Object.is(prev, next)) return false;
-    valueRef.current = next;
-    triggerChange(next, {
-      name
-    });
-    return true;
-  }, [name, triggerChange]);
-  const normalizeNumber = (0, _react().useCallback)(nextRaw => {
-    const formatted = (0, _utils.formatNumber)(nextRaw, integer, decimalLen);
-    return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
-  }, [autoFixed, decimalLen, integer, max, min]);
-  const processValueChange = (0, _react().useCallback)((next, committed) => {
-    if (changingRef.current) return 'noop';
-    const commit = () => {
-      const didChange = commitValue(next);
-      if (!didChange) return 'noop';
-      updateInputText((0, _utils.numberToString)(next, decimalLen));
-      committed?.(next);
-      return 'changed';
-    };
-    if (!beforeChange) return commit();
-    try {
-      const result = beforeChange(next);
-      if ((0, _utils.isPromiseLike)(result)) {
-        changingRef.current = true;
-        setIsChanging(true);
-        result.then(allowed => {
-          if (allowed === false) {
-            updateInputText((0, _utils.numberToString)(valueRef.current, decimalLen));
-            return;
-          }
-          ;
-          commit();
-        }).catch(() => commit()).finally(() => {
-          changingRef.current = false;
-          setIsChanging(false);
-        });
-        return 'pending';
-      }
-      ;
-      if (result === false) {
-        updateInputText((0, _utils.numberToString)(valueRef.current, decimalLen));
-        return 'noop';
-      }
-      ;
-      return commit();
-    } catch {
-      return commit();
-    }
-  }, [beforeChange, decimalLen, updateInputText, commitValue]);
-  const stepOnce = (0, _react().useCallback)((type, event, options) => {
-    if (changingRef.current) return 'noop';
-    const emitOverlimit = options?.emitOverlimit ?? true;
-    const emitCallbacks = options?.emitButtonCallbacks ?? Boolean(event);
-    if (isActionDisabled(type)) {
-      if (emitOverlimit) onOverlimitRef.current?.(type);
-      return 'overlimit';
-    }
-    ;
-    const current = getCurrentNumber();
-    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') {
-        onPlusRef.current?.(event, committedValue);
-      } else {
-        onMinusRef.current?.(event, committedValue);
-      }
-    });
-  }, [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)(() => {
-    if (disabled || isChanging || !longPress) {
-      clearLongPress();
-    }
-  }, [isChanging, clearLongPress, disabled, longPress]);
-  const startLongPress = (0, _react().useCallback)(type => {
-    if (!longPress) return;
-    if (changingRef.current) return;
-    if (isActionDisabled(type)) return;
-    clearLongPress();
-    longPressRef.current.hadLongPress = false;
-    longPressRef.current.delay = setTimeout(() => {
-      longPressRef.current.hadLongPress = true;
-      const first = stepOnce(type, undefined, {
-        emitOverlimit: true,
-        emitButtonCallbacks: false
-      });
-      if (first !== 'changed') {
-        clearLongPress();
-        return;
-      }
-      ;
-      longPressRef.current.interval = setInterval(() => {
-        const result = stepOnce(type, undefined, {
-          emitOverlimit: true,
-          emitButtonCallbacks: false
-        });
-        if (result !== 'changed') {
-          clearLongPress();
-        }
-      }, LONG_PRESS_INTERVAL);
-    }, LONG_PRESS_DELAY);
-  }, [clearLongPress, isActionDisabled, longPress, stepOnce]);
-  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,
-      emitButtonCallbacks: true
-    });
-  }, [stepOnce]);
-  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 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 btnSizeStyle = (0, _react().useMemo)(() => ({
-    width: rBtnSize,
-    height: rBtnSize
-  }), [rBtnSize]);
-  const inputSizeStyle = (0, _react().useMemo)(() => ({
-    width: rInputW,
-    height: rBtnSize,
-    marginHorizontal: tokens.spacing.gap
-  }), [rBtnSize, rInputW, tokens.spacing.gap]);
-  const getButtonStyle = (0, _react().useCallback)((type, state) => {
-    const isPlus = type === 'plus';
-    const isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
-    if (theme === 'round') {
-      const base = [S.btn, btnSizeStyle, {
-        borderRadius: rBtnSize / 2,
-        opacity: isDisabled ? tokens.opacity.roundDisabled : 1
-      }];
-      if (isPlus) {
-        return [...base, {
-          backgroundColor: tokens.colors.roundTheme,
-          ...(state.pressed && !isDisabled && {
-            opacity: tokens.opacity.pressed
-          })
-        }, buttonStyle];
-      }
-      ;
-      return [...base, {
-        backgroundColor: tokens.colors.roundThemeBackground,
-        ...(state.pressed && !isDisabled && {
-          opacity: tokens.opacity.pressed
-        })
-      }, buttonStyle];
-    }
-    ;
-    const isLeading = type === 'minus' !== (layoutDir === 'rtl');
-    const cornerStyle = isLeading ? {
-      borderTopLeftRadius: radius,
-      borderBottomLeftRadius: radius
-    } : {
-      borderTopRightRadius: radius,
-      borderBottomRightRadius: radius
-    };
-    const bgColor = isDisabled ? tokens.colors.buttonDisabledBackground : state.pressed ? tokens.colors.active : tokens.colors.background;
-    return [S.btn, btnSizeStyle, cornerStyle, {
-      backgroundColor: bgColor
-    }, buttonStyle];
-  }, [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 isDisabled = isPlus ? isPlusDisabled : isMinusDisabled;
-    if (theme === 'round') {
-      const color = isPlus ? tokens.colors.roundThemeText : tokens.colors.roundTheme;
-      return [S.btnTxt, {
-        color,
-        fontFamily: tokens.typography.fontFamily,
-        fontSize: tokens.typography.fontSize,
-        fontWeight: tokens.typography.fontWeight
-      }];
-    }
-    ;
-    return [S.btnTxt, {
-      color: isDisabled ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
-      fontFamily: tokens.typography.fontFamily,
-      fontSize: tokens.typography.fontSize,
-      fontWeight: 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;
-    updateInputText(text);
-    inputPropsRef.current?.onChangeText?.(text);
-    const trimmed = text.trim();
-    if (trimmed === '') {
-      processValueChange(allowEmpty ? null : defaultVal);
-      return;
-    }
-    ;
-    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;
-    }
-    ;
-    setIsFocused(true);
-    onFocusRef.current?.(event);
-    inputPropsRef.current?.onFocus?.(event);
-  }, [disableInput]);
-  const handleBlur = (0, _react().useCallback)(event => {
-    setIsFocused(false);
-    if (!changingRef.current) {
-      const trimmed = inputValueRef.current.trim();
-      if (trimmed === '') {
-        processValueChange(allowEmpty ? null : defaultVal);
-      } else {
-        const num = Number.parseFloat(trimmed);
-        if (Number.isFinite(num)) {
-          processValueChange(normalizeNumber(num));
-        }
-      }
-    }
-    ;
-    onBlurRef.current?.(event);
-    inputPropsRef.current?.onBlur?.(event);
-  }, [allowEmpty, normalizeNumber, processValueChange, defaultVal]);
-  const handleInputPressIn = (0, _react().useCallback)(event => {
-    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 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",
-      testID: "stepper-minus",
-      accessibilityRole: "button",
-      accessibilityLabel: "minus",
-      accessibilityState: {
-        disabled: isMinusDisabled
-      },
-      onPress: handleMinusPress,
-      onPressIn: handleMinusPressIn,
-      onPressOut: handlePressOut,
-      style: getMinusBtnStyle
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: getButtonTextStyle('minus')
-    }, "-"), 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",
-      testID: "stepper-plus",
-      accessibilityRole: "button",
-      accessibilityLabel: "add",
-      accessibilityState: {
-        disabled: isPlusDisabled
-      },
-      onPress: handlePlusPress,
-      onPressIn: handlePlusPressIn,
-      onPressOut: handlePressOut,
-      style: getPlusBtnStyle
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-      style: getButtonTextStyle('plus')
-    }, "+"));
-  }, [getButtonTextStyle, getPlusBtnStyle, handlePlusPress, handlePlusPressIn, handlePressOut, isPlusDisabled, showPlus]);
-  const inputNode = (0, _react().useMemo)(() => {
-    if (!showInput) return null;
-    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: [S.inp, inputSizeStyle, {
-        backgroundColor: bgColor,
-        color: textColor,
-        paddingHorizontal: tokens.spacing.none,
-        paddingVertical: tokens.spacing.none
-      }, inputStyle],
-      value: inputText,
-      placeholder: placeholder,
-      editable: editable,
-      keyboardType: keyboardType,
-      onChangeText: handleChangeText,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onPressIn: handleInputPressIn
-    }));
-  }, [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'
-  },
-  btn: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  btnTxt: {},
-  inp: {
-    textAlign: 'center'
-  }
-});
-const StepperForwardRef = /*#__PURE__*/_react().default.forwardRef(StepperImpl);
-StepperForwardRef.displayName = 'Stepper';
-const Stepper = exports.Stepper = /*#__PURE__*/_react().default.memo(StepperForwardRef);
-var _default = exports.default = Stepper;
+"use strict";function _react(){const e=_interopRequireWildcard(require("react"));return _react=function(){return e},e}function _reactNative(){const e=require("react-native");return _reactNative=function(){return e},e}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Stepper=void 0;var _hooks=require("../../hooks"),_utils=require("../../utils"),_useDirection=require("../config-provider/useDirection"),_tokens=require("./tokens"),_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 a,u,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?n:r){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((u=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(u.get||u.set)?a(s,t,u):s[t]=e[t]);return s})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_extends.apply(null,arguments)}const LONG_PRESS_DELAY=600,LONG_PRESS_INTERVAL=100,StepperImpl=(e,t)=>{const r=(0,_tokens.useStepperTokens)(e.tokensOverride),n=(0,_useDirection.useDirection)(),{min:a,max:u,step:s=1,autoFixed:o=!0,beforeChange:l,integer:c=!1,decimalLength:i,disabled:d=!1,disablePlus:p=!1,disableMinus:b=!1,disableInput:_=!1,allowEmpty:f=!1,showPlus:m=r.defaults.showPlus,showMinus:g=r.defaults.showMinus,showInput:h=r.defaults.showInput,longPress:y=r.defaults.longPress,theme:k=r.defaults.theme,inputWidth:v,buttonSize:C,name:T,placeholder:N,onClick:R,onPlus:P,onMinus:x,onOverlimit:F,onFocus:w,onBlur:I,inputProps:D,inputStyle:O,buttonStyle:L,style:B,...E}=e,[M,W]=(0,_react().useState)(!1),V=(0,_react().useRef)(!1),q=(0,_react().useRef)(P),z=(0,_react().useRef)(x),j=(0,_react().useRef)(F),H=(0,_react().useRef)(w),A=(0,_react().useRef)(I),G=(0,_react().useRef)(R),Y=(0,_react().useRef)(null),J=(0,_react().useRef)(null),K=(0,_react().useRef)(""),Q=(0,_react().useRef)(D),U=(0,_react().useRef)({hadLongPress:!1});q.current=P,z.current=x,j.current=F,H.current=w,A.current=I,G.current=R,Q.current=D;const X=(0,_utils.parseDecimalLength)(i),Z=Number(s??1),$=(0,_utils.isFiniteNumber)(Z)&&Z>0?Z:1,ee=Math.max(0,(0,_utils.parseNumber)(C,r.defaults.buttonSize)),te=Math.max(0,(0,_utils.parseNumber)(v,r.defaults.inputWidth)),re=(0,_react().useMemo)(()=>{const t=e.defaultValue;if(null===t)return null;const r=(0,_utils.isFiniteNumber)(t)?t:0,n=(0,_utils.formatNumber)(r,c,X);return o?(0,_utils.clampValue)(n,a,u):n},[o,X,c,u,a,e.defaultValue]),[ne,ae]=(0,_hooks.useControllableValue)({...e,defaultValue:re},{defaultValue:re});(0,_react().useEffect)(()=>{Y.current=ne??null},[ne]),(0,_react().useImperativeHandle)(t,()=>({focus:()=>J.current?.focus(),blur:()=>J.current?.blur()}));const[ue,se]=(0,_react().useState)(!1),[oe,le]=(0,_react().useState)(()=>(0,_utils.numberToString)(ne,X)),ce=(0,_react().useCallback)(e=>{K.current=e,le(e)},[]);(0,_react().useEffect)(()=>{ue||ce((0,_utils.numberToString)(ne,X))},[X,ue,ce,ne]);const ie=(0,_react().useCallback)(()=>{const e=Y.current;return(0,_utils.isFiniteNumber)(e)?e:(0,_utils.isFiniteNumber)(a)?a:0},[a]),de=(0,_react().useCallback)(e=>{if(d)return!0;if("plus"===e&&p)return!0;if("minus"===e&&b)return!0;const t=ie();return!!("plus"===e&&(0,_utils.isFiniteNumber)(u)&&t>=u)||!!("minus"===e&&(0,_utils.isFiniteNumber)(a)&&t<=a)},[b,p,d,ie,u,a]),pe=(0,_react().useCallback)(e=>{const t=Y.current??null;return!Object.is(t,e)&&(Y.current=e,ae(e,{name:T}),!0)},[T,ae]),be=(0,_react().useCallback)(e=>{const t=(0,_utils.formatNumber)(e,c,X);return o?(0,_utils.clampValue)(t,a,u):t},[o,X,c,u,a]),_e=(0,_react().useCallback)((e,t)=>{if(V.current)return"noop";const r=()=>pe(e)?(ce((0,_utils.numberToString)(e,X)),t?.(e),"changed"):"noop";if(!l)return r();try{const t=l(e);return(0,_utils.isPromiseLike)(t)?(V.current=!0,W(!0),t.then(e=>{!1!==e?r():ce((0,_utils.numberToString)(Y.current,X))}).catch(()=>r()).finally(()=>{V.current=!1,W(!1)}),"pending"):!1===t?(ce((0,_utils.numberToString)(Y.current,X)),"noop"):r()}catch{return r()}},[l,X,ce,pe]),fe=(0,_react().useCallback)((e,t,r)=>{if(V.current)return"noop";const n=r?.emitOverlimit??!0,a=r?.emitButtonCallbacks??Boolean(t);if(de(e))return n&&j.current?.(e),"overlimit";const u=ie(),s="plus"===e?$:-$,o=be((0,_utils.addNumber)(u,s));return _e(o,r=>{a&&t&&("plus"===e?q.current?.(t,r):z.current?.(t,r))})},[be,ie,de,_e,$]),me=(0,_react().useCallback)(()=>{U.current.delay&&(clearTimeout(U.current.delay),U.current.delay=void 0),U.current.interval&&(clearInterval(U.current.interval),U.current.interval=void 0)},[]);(0,_react().useEffect)(()=>me(),[me]),(0,_react().useEffect)(()=>{(d||M||!y)&&me()},[M,me,d,y]);const ge=(0,_react().useCallback)(e=>{y&&(V.current||de(e)||(me(),U.current.hadLongPress=!1,U.current.delay=setTimeout(()=>{U.current.hadLongPress=!0;"changed"===fe(e,void 0,{emitOverlimit:!0,emitButtonCallbacks:!1})?U.current.interval=setInterval(()=>{"changed"!==fe(e,void 0,{emitOverlimit:!0,emitButtonCallbacks:!1})&&me()},100):me()},600)))},[me,de,y,fe]),he=(0,_react().useCallback)(()=>me(),[me]),ye=(0,_react().useCallback)((e,t)=>{U.current.hadLongPress?U.current.hadLongPress=!1:(U.current.hadLongPress=!1,fe(e,t,{emitOverlimit:!0,emitButtonCallbacks:!0}))},[fe]),ke=(0,_utils.isFiniteNumber)(ne)?ne:0,ve=(0,_utils.isFiniteNumber)(a)?a:void 0,Se=(0,_utils.isFiniteNumber)(u)?u:void 0,Ce=d||M,Te=Ce||b||null!=ve&&ke<=ve,Ne=Ce||p||null!=Se&&ke>=Se,Re=r.radii.default,Pe=(0,_react().useMemo)(()=>({width:ee,height:ee}),[ee]),xe=(0,_react().useMemo)(()=>({width:te,height:ee,marginHorizontal:r.spacing.gap}),[ee,te,r.spacing.gap]),Fe=(0,_react().useCallback)((e,t)=>{const a="plus"===e,u=a?Ne:Te;if("round"===k){const e=[S.btn,Pe,{borderRadius:ee/2,opacity:u?r.opacity.roundDisabled:1}];return a?[...e,{backgroundColor:r.colors.roundTheme,...t.pressed&&!u&&{opacity:r.opacity.pressed}},L]:[...e,{backgroundColor:r.colors.roundThemeBackground,...t.pressed&&!u&&{opacity:r.opacity.pressed}},L]}const s="minus"===e!=("rtl"===n)?{borderTopLeftRadius:Re,borderBottomLeftRadius:Re}:{borderTopRightRadius:Re,borderBottomRightRadius:Re},o=u?r.colors.buttonDisabledBackground:t.pressed?r.colors.active:r.colors.background;return[S.btn,Pe,s,{backgroundColor:o},L]},[Pe,L,Te,Ne,Re,ee,k,n,r.colors.active,r.colors.background,r.colors.buttonDisabledBackground,r.colors.roundTheme,r.colors.roundThemeBackground,r.opacity.pressed,r.opacity.roundDisabled]),we=(0,_react().useCallback)(e=>{const t="plus"===e,n=t?Ne:Te;if("round"===k){const e=t?r.colors.roundThemeText:r.colors.roundTheme;return[S.btnTxt,{color:e,fontFamily:r.typography.fontFamily,fontSize:r.typography.fontSize,fontWeight:r.typography.fontWeight}]}return[S.btnTxt,{color:n?r.colors.buttonDisabledIcon:r.colors.buttonIcon,fontFamily:r.typography.fontFamily,fontSize:r.typography.fontSize,fontWeight:r.typography.fontWeight}]},[Te,Ne,k,r.colors.buttonDisabledIcon,r.colors.buttonIcon,r.colors.roundTheme,r.colors.roundThemeText,r.typography.fontFamily,r.typography.fontSize,r.typography.fontWeight]),Ie=(0,_react().useCallback)(e=>{if(_||d||V.current)return;ce(e),Q.current?.onChangeText?.(e);const t=e.trim();if(""===t)return void _e(f?null:re);const r=Number.parseFloat(t);Number.isFinite(r)&&_e(be(r))},[f,be,V,_,d,Q,_e,re,ce]),De=(0,_react().useCallback)(e=>{_?J.current?.blur():(se(!0),H.current?.(e),Q.current?.onFocus?.(e))},[_]),Oe=(0,_react().useCallback)(e=>{if(se(!1),!V.current){const e=K.current.trim();if(""===e)_e(f?null:re);else{const t=Number.parseFloat(e);Number.isFinite(t)&&_e(be(t))}}A.current?.(e),Q.current?.onBlur?.(e)},[f,be,_e,re]),Le=(0,_react().useCallback)(e=>{G.current?.(e),Q.current?.onPressIn?.(e)},[]),Be=(0,_react().useCallback)(e=>ye("minus",e),[ye]),Ee=(0,_react().useCallback)(e=>ye("plus",e),[ye]),Me=(0,_react().useCallback)(()=>ge("minus"),[ge]),We=(0,_react().useCallback)(()=>ge("plus"),[ge]),Ve=(0,_react().useCallback)(e=>Fe("minus",e),[Fe]),qe=(0,_react().useCallback)(e=>Fe("plus",e),[Fe]),ze=(0,_react().useCallback)(()=>g?_react().default.createElement(_reactNative().Pressable,{key:"minus",testID:"stepper-minus",accessibilityRole:"button",accessibilityLabel:"minus",accessibilityState:{disabled:Te},onPress:Be,onPressIn:Me,onPressOut:he,style:Ve},_react().default.createElement(_reactNative().Text,{style:we("minus")},"-"),"round"===k&&_react().default.createElement(_reactNative().View,{style:(0,_hairline.createHairlineView)({position:"all",color:r.colors.roundTheme,borderRadius:ee/2})})):null,[we,Ve,Be,Me,he,Te,g,k,r.colors.roundTheme,ee]),je=(0,_react().useCallback)(()=>m?_react().default.createElement(_reactNative().Pressable,{key:"plus",testID:"stepper-plus",accessibilityRole:"button",accessibilityLabel:"add",accessibilityState:{disabled:Ne},onPress:Ee,onPressIn:We,onPressOut:he,style:qe},_react().default.createElement(_reactNative().Text,{style:we("plus")},"+")):null,[we,qe,Ee,We,he,Ne,m]),He=(0,_react().useMemo)(()=>{if(!h)return null;const e=!Ce&&!_,t=Ce||_,n="round"===k?r.colors.transparent:t?r.colors.inputDisabledBackground:r.colors.background,a=t?r.colors.inputDisabledText:r.colors.inputText,u=c?"number-pad":"decimal-pad";return _react().default.createElement(_reactNative().TextInput,_extends({ref:J},D,{style:[S.inp,xe,{backgroundColor:n,color:a,paddingHorizontal:r.spacing.none,paddingVertical:r.spacing.none},O],value:oe,placeholder:N,editable:e,keyboardType:u,onChangeText:Ie,onFocus:De,onBlur:Oe,onPressIn:Le}))},[Ce,_,Oe,Ie,De,Le,xe,D,O,oe,c,N,h,k,r.colors.background,r.colors.inputDisabledBackground,r.colors.inputDisabledText,r.colors.inputText,r.colors.transparent,r.spacing.none]);return _react().default.createElement(_reactNative().View,_extends({},E,{style:[S.cnt,B]}),ze(),He,je())},S=_reactNative().StyleSheet.create({cnt:{flexDirection:"row",alignItems:"center"},btn:{justifyContent:"center",alignItems:"center"},btnTxt:{},inp:{textAlign:"center"}}),StepperForwardRef=_react().default.forwardRef(StepperImpl);StepperForwardRef.displayName="Stepper";const Stepper=exports.Stepper=_react().default.memo(StepperForwardRef);var _default=exports.default=Stepper;

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

@@ -1,15 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Stepper", {
-  enumerable: true,
-  get: function () {
-    return _Stepper.default;
-  }
-});
-exports.default = void 0;
-var _Stepper = _interopRequireDefault(require("./Stepper"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Stepper.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Stepper",{enumerable:!0,get:function(){return _Stepper.default}}),exports.default=void 0;var _Stepper=_interopRequireDefault(require("./Stepper"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=_Stepper.default;

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

@@ -1,60 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useStepperTokens = void 0;
-var _designSystem = require("../../design-system");
-const createStepperTokens = foundations => {
-  const {
-    palette,
-    radii,
-    fontSize,
-    opacity,
-    typography
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  return {
-    defaults: {
-      theme: 'default',
-      showInput: true,
-      showPlus: true,
-      showMinus: true,
-      longPress: true,
-      inputWidth: 32,
-      buttonSize: 28
-    },
-    colors: {
-      active: palette.default[200],
-      background: palette.default[100],
-      buttonIcon: palette.default[900],
-      buttonDisabledBackground: '#ffffff',
-      buttonDisabledIcon: palette.default[400],
-      roundTheme: palette.primary[500],
-      roundThemeText: onPrimary,
-      roundThemeBackground: '#ffffff',
-      inputText: palette.default[900],
-      inputDisabledText: palette.default[400],
-      inputDisabledBackground: palette.default[100],
-      transparent: 'transparent'
-    },
-    radii: {
-      default: radii.md
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      fontSize: fontSize.md,
-      fontWeight: typography.weight.semiBold
-    },
-    opacity: {
-      disabled: opacity.disabled,
-      roundDisabled: 0.3,
-      pressed: opacity.pressed
-    },
-    spacing: {
-      gap: 2,
-      none: foundations.spacing.none
-    }
-  };
-};
-const useStepperTokens = exports.useStepperTokens = (0, _designSystem.createComponentTokensHook)('stepper', createStepperTokens);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useStepperTokens=void 0;var _designSystem=require("../../design-system");const createStepperTokens=e=>{const{palette:t,radii:n,fontSize:o,opacity:s,typography:r}=e,a=t.primary.foreground??"#ffffff";return{defaults:{theme:"default",showInput:!0,showPlus:!0,showMinus:!0,longPress:!0,inputWidth:32,buttonSize:28},colors:{active:t.default[200],background:t.default[100],buttonIcon:t.default[900],buttonDisabledBackground:"#ffffff",buttonDisabledIcon:t.default[400],roundTheme:t.primary[500],roundThemeText:a,roundThemeBackground:"#ffffff",inputText:t.default[900],inputDisabledText:t.default[400],inputDisabledBackground:t.default[100],transparent:"transparent"},radii:{default:n.md},typography:{fontFamily:r.fontFamily,fontSize:o.md,fontWeight:r.weight.semiBold},opacity:{disabled:s.disabled,roundDisabled:.3,pressed:s.pressed},spacing:{gap:2,none:e.spacing.none}}},useStepperTokens=exports.useStepperTokens=(0,_designSystem.createComponentTokensHook)("stepper",createStepperTokens);