react-native-system-ui 1.0.1 → 1.0.3

package/dist/es/components/space/Space.js

@@ -1,115 +1 @@
-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); }
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import { useAriaPress } from '../../hooks';
-import { resolveGapInput, useSpaceTokens } from './tokens';
-import { parseNumberLike, isFiniteNumber, isFunction, isRenderable, renderTextOrNode } from '../../utils';
-const alignMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  baseline: 'baseline',
-  stretch: 'stretch'
-};
-const justifyMap = {
-  start: 'flex-start',
-  end: 'flex-end',
-  center: 'center',
-  between: 'space-between',
-  around: 'space-around',
-  evenly: 'space-evenly'
-};
-const parseSpaceSize = (v, presets) => {
-  if (v === undefined) return presets.normal;
-  if (isFiniteNumber(v)) return v;
-  if (typeof v === 'string' && v in presets) return presets[v];
-  return parseNumberLike(v, presets.normal) ?? presets.normal;
-};
-const parseGap = (v, presets) => {
-  if (Array.isArray(v)) return [parseSpaceSize(v[0], presets), parseSpaceSize(v[1], presets)];
-  const p = parseSpaceSize(v, presets);
-  return [p, p];
-};
-export const Space = /*#__PURE__*/React.memo(props => {
-  const {
-    children,
-    gap,
-    size: sizeP,
-    direction: dirP,
-    align: alignP,
-    justify: justP = 'start',
-    wrap: wrapP,
-    block: blockP,
-    fill: fillP,
-    divider,
-    tokensOverride,
-    style,
-    onClick,
-    ...rest
-  } = props;
-  const tokens = useSpaceTokens(tokensOverride);
-  const hor = (dirP ?? tokens.defaults.direction) === 'horizontal';
-  const wrap = wrapP ?? tokens.defaults.wrap;
-  const gapIn = resolveGapInput(gap, sizeP, tokens.defaults.gapPreset);
-  const [hG, vG] = parseGap(gapIn, tokens.sizing.presets);
-  const hGap = Math.max(0, hG);
-  const vGap = Math.max(0, vG);
-  const justStretch = justP === 'stretch';
-  const justStyle = justStretch ? 'start' : justP;
-  const block = blockP ?? !hor;
-  const align = alignP ?? (hor ? 'center' : 'stretch');
-  const fillOrJust = hor && ((fillP ?? false) || justStretch);
-  const boxStyle = {
-    flexDirection: hor ? 'row' : 'column',
-    flexWrap: hor && wrap ? 'wrap' : 'nowrap',
-    alignItems: alignMap[align],
-    justifyContent: justifyMap[justStyle],
-    width: block ? '100%' : undefined,
-    columnGap: hor ? hGap : undefined,
-    rowGap: vGap
-  };
-  const txtStyle = {
-    fontFamily: tokens.typography.fontFamily,
-    fontSize: tokens.typography.fontSize
-  };
-  const arr = React.Children.toArray(children).filter(isRenderable);
-  const content = [];
-  for (let i = 0; i < arr.length; i++) {
-    const child = arr[i];
-    const key = /*#__PURE__*/React.isValidElement(child) && child.key != null ? child.key : i;
-    const flexS = fillOrJust ? {
-      flexGrow: 1,
-      flexBasis: 0,
-      minWidth: 0
-    } : !hor && (fillP || block) ? {
-      width: '100%'
-    } : undefined;
-    content.push(/*#__PURE__*/React.createElement(View, {
-      key: key,
-      style: flexS
-    }, renderTextOrNode(child, txtStyle)));
-    if (divider && i < arr.length - 1) content.push(/*#__PURE__*/React.createElement(View, {
-      key: `divider-${String(key)}`
-    }, renderTextOrNode(divider, txtStyle)));
-  }
-  const inter = isFunction(onClick);
-  const {
-    interactionProps,
-    states
-  } = useAriaPress({
-    disabled: !inter,
-    onPress: onClick,
-    extraProps: inter ? {
-      accessibilityRole: 'button'
-    } : undefined
-  });
-  if (inter) return /*#__PURE__*/React.createElement(Pressable, _extends({
-    style: [tokens.layout.container, boxStyle, style, states.pressed && {
-      opacity: 0.85
-    }]
-  }, interactionProps, rest), content);
-  return /*#__PURE__*/React.createElement(View, _extends({
-    style: [tokens.layout.container, boxStyle, style]
-  }, rest), content);
-});
-Space.displayName = 'Space';
+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 a in r)({}).hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},_extends.apply(null,arguments)}import React from"react";import{Pressable,View}from"react-native";import{useAriaPress}from"../../hooks";import{resolveGapInput,useSpaceTokens}from"./tokens";import{parseNumberLike,isFiniteNumber,isFunction,isRenderable,renderTextOrNode}from"../../utils";const alignMap={start:"flex-start",end:"flex-end",center:"center",baseline:"baseline",stretch:"stretch"},justifyMap={start:"flex-start",end:"flex-end",center:"center",between:"space-between",around:"space-around",evenly:"space-evenly"},parseSpaceSize=(e,t)=>void 0===e?t.normal:isFiniteNumber(e)?e:"string"==typeof e&&e in t?t[e]:parseNumberLike(e,t.normal)??t.normal,parseGap=(e,t)=>{if(Array.isArray(e))return[parseSpaceSize(e[0],t),parseSpaceSize(e[1],t)];const r=parseSpaceSize(e,t);return[r,r]};export const Space=React.memo(e=>{const{children:t,gap:r,size:a,direction:n,align:s,justify:i="start",wrap:o,block:l,fill:c,divider:p,tokensOverride:d,style:u,onClick:f,...m}=e,y=useSpaceTokens(d),h="horizontal"===(n??y.defaults.direction),x=o??y.defaults.wrap,b=resolveGapInput(r,a,y.defaults.gapPreset),[g,v]=parseGap(b,y.sizing.presets),w=Math.max(0,g),S=Math.max(0,v),k="stretch"===i,R=l??!h,z=h&&((c??!1)||k),P={flexDirection:h?"row":"column",flexWrap:h&&x?"wrap":"nowrap",alignItems:alignMap[s??(h?"center":"stretch")],justifyContent:justifyMap[k?"start":i],width:R?"100%":void 0,columnGap:h?w:void 0,rowGap:S},N={fontFamily:y.typography.fontFamily,fontSize:y.typography.fontSize},G=React.Children.toArray(t).filter(isRenderable),O=[];for(let e=0;e<G.length;e++){const t=G[e],r=React.isValidElement(t)&&null!=t.key?t.key:e,a=z?{flexGrow:1,flexBasis:0,minWidth:0}:h||!c&&!R?void 0:{width:"100%"};O.push(React.createElement(View,{key:r,style:a},renderTextOrNode(t,N))),p&&e<G.length-1&&O.push(React.createElement(View,{key:`divider-${String(r)}`},renderTextOrNode(p,N)))}const j=isFunction(f),{interactionProps:F,states:M}=useAriaPress({disabled:!j,onPress:f,extraProps:j?{accessibilityRole:"button"}:void 0});return j?React.createElement(Pressable,_extends({style:[y.layout.container,P,u,M.pressed&&{opacity:.85}]},F,m),O):React.createElement(View,_extends({style:[y.layout.container,P,u]},m),O)});Space.displayName="Space";

package/dist/es/components/space/index.js

@@ -1,2 +1 @@
-export { Space as default } from './Space';
-export { Space } from './Space';
+export{Space as default}from"./Space";export{Space}from"./Space";

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

@@ -1,32 +1 @@
-import { createComponentTokensHook } from '../../design-system';
-const createSpaceTokens = foundations => {
-  const {
-    spacing,
-    fontSize,
-    typography
-  } = foundations;
-  return {
-    defaults: {
-      direction: 'horizontal',
-      wrap: false,
-      gapPreset: 'normal'
-    },
-    layout: {
-      container: {}
-    },
-    typography: {
-      fontFamily: typography.fontFamily,
-      fontSize: fontSize.sm
-    },
-    sizing: {
-      presets: {
-        mini: spacing.xxs ?? spacing.xs ?? 4,
-        small: spacing.xs,
-        normal: spacing.sm,
-        large: spacing.md
-      }
-    }
-  };
-};
-export const useSpaceTokens = createComponentTokensHook('space', createSpaceTokens);
-export const resolveGapInput = (gap, size, fallback) => gap ?? size ?? fallback ?? 'normal';
+import{createComponentTokensHook}from"../../design-system";const createSpaceTokens=e=>{const{spacing:o,fontSize:n,typography:t}=e;return{defaults:{direction:"horizontal",wrap:!1,gapPreset:"normal"},layout:{container:{}},typography:{fontFamily:t.fontFamily,fontSize:n.sm},sizing:{presets:{mini:o.xxs??o.xs??4,small:o.xs,normal:o.sm,large:o.md}}}};export const useSpaceTokens=createComponentTokensHook("space",createSpaceTokens);export const resolveGapInput=(e,o,n)=>e??o??n??"normal";

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

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

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

@@ -1,3 +1 @@
-import Stepper from './Stepper';
-export default Stepper;
-export { Stepper };
+import Stepper from"./Stepper";export default Stepper;export{Stepper};