react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/space/Space.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Space = void 0;
+function _react() {
+  const data = _interopRequireDefault(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 _tokens = require("./tokens");
+var _utils = require("../../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 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 = (value, presets) => {
+  if (value === undefined) return presets.normal;
+  if ((0, _utils.isFiniteNumber)(value)) return value;
+  if (typeof value === 'string' && value in presets) {
+    return presets[value];
+  }
+  return (0, _utils.parseNumberLike)(value, presets.normal) ?? presets.normal;
+};
+const parseGap = (value, presets) => {
+  if (Array.isArray(value)) {
+    return [parseSpaceSize(value[1], presets), parseSpaceSize(value[0], presets)];
+  }
+  const parsed = parseSpaceSize(value, presets);
+  return [parsed, parsed];
+};
+const Space = exports.Space = /*#__PURE__*/_react().default.memo(props => {
+  const {
+    children,
+    gap,
+    size,
+    direction: directionProp,
+    align,
+    justify = 'start',
+    wrap: wrapProp,
+    block,
+    fill,
+    divider,
+    tokensOverride,
+    style,
+    onClick,
+    ...rest
+  } = props;
+  const tokens = (0, _tokens.useSpaceTokens)(tokensOverride);
+  const isHorizontal = (directionProp ?? tokens.defaults.direction) === 'horizontal';
+  const wrap = wrapProp ?? tokens.defaults.wrap;
+  const gapInput = (0, _tokens.resolveGapInput)(gap, size, tokens.defaults.gapPreset);
+  const [rawHorizontalGap, rawVerticalGap] = parseGap(gapInput, tokens.sizing.presets);
+  const horizontalGap = Math.max(0, rawHorizontalGap);
+  const verticalGap = Math.max(0, rawVerticalGap);
+  const shouldStretchJustify = justify === 'stretch';
+  const justifyForStyle = shouldStretchJustify ? 'start' : justify;
+  const shouldBlock = block ?? !isHorizontal;
+  const resolvedAlign = align ?? (isHorizontal ? 'center' : 'stretch');
+  const supportsGap = _reactNative().Platform.OS === 'web';
+  const shouldFillMainAxis = isHorizontal && ((fill ?? false) || shouldStretchJustify);
+  const containerBaseStyle = {
+    flexDirection: isHorizontal ? 'row' : 'column',
+    flexWrap: isHorizontal && wrap ? 'wrap' : 'nowrap',
+    alignItems: alignMap[resolvedAlign],
+    justifyContent: justifyMap[justifyForStyle],
+    width: shouldBlock ? '100%' : undefined
+  };
+  const spacingStyle = supportsGap ? null : isHorizontal ? {
+    paddingHorizontal: horizontalGap / 2,
+    paddingVertical: verticalGap / 2
+  } : {
+    paddingVertical: verticalGap / 2
+  };
+  if (supportsGap) {
+    containerBaseStyle.columnGap = isHorizontal ? horizontalGap : undefined;
+    containerBaseStyle.rowGap = verticalGap;
+  } else {
+    containerBaseStyle.marginHorizontal = isHorizontal && horizontalGap ? -horizontalGap / 2 : undefined;
+    containerBaseStyle.marginVertical = verticalGap ? -verticalGap / 2 : undefined;
+  }
+  const childArray = _react().default.Children.toArray(children).filter(_utils.isRenderable);
+  const content = [];
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i];
+    const key = /*#__PURE__*/_react().default.isValidElement(child) && child.key != null ? child.key : i;
+    const fillStyle = shouldFillMainAxis ? {
+      flexGrow: 1,
+      flexBasis: 0,
+      minWidth: 0
+    } : !isHorizontal && (fill || shouldBlock) ? {
+      width: '100%'
+    } : undefined;
+    const node = (0, _utils.isText)(child) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, null, child) : child;
+    content.push(/*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: key,
+      style: [spacingStyle, fillStyle]
+    }, node));
+    if (divider && i < childArray.length - 1) {
+      const dividerNode = (0, _utils.isText)(divider) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, null, divider) : divider;
+      content.push(/*#__PURE__*/_react().default.createElement(_reactNative().View, {
+        key: `divider-${String(key)}`,
+        style: spacingStyle
+      }, dividerNode));
+    }
+  }
+  const interactive = (0, _utils.isFunction)(onClick);
+  const {
+    interactionProps,
+    states
+  } = (0, _hooks.useAriaPress)({
+    disabled: !interactive,
+    onPress: onClick,
+    extraProps: interactive ? {
+      accessibilityRole: 'button'
+    } : undefined
+  });
+  if (interactive) {
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
+      style: [tokens.layout.container, containerBaseStyle, style, states.pressed && {
+        opacity: 0.85
+      }]
+    }, interactionProps, rest), content);
+  }
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    style: [tokens.layout.container, containerBaseStyle, style]
+  }, rest), content);
+});
+Space.displayName = 'Space';

package/dist/cjs/space/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Space", {
+  enumerable: true,
+  get: function () {
+    return _Space.Space;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Space.Space;
+  }
+});
+var _Space = require("./Space");

package/dist/cjs/space/tokens.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSpaceTokens = exports.resolveGapInput = void 0;
+var _designSystem = require("../../design-system");
+const createSpaceTokens = foundations => {
+  const {
+    spacing
+  } = foundations;
+  return {
+    defaults: {
+      direction: 'horizontal',
+      wrap: false,
+      gapPreset: 'normal'
+    },
+    layout: {
+      container: {}
+    },
+    sizing: {
+      presets: {
+        mini: spacing.xxs ?? spacing.xs ?? 4,
+        small: spacing.xs,
+        normal: spacing.sm,
+        large: spacing.md
+      }
+    }
+  };
+};
+const useSpaceTokens = exports.useSpaceTokens = (0, _designSystem.createComponentTokensHook)('space', createSpaceTokens);
+const resolveGapInput = (gap, size, fallback) => gap ?? size ?? fallback ?? 'normal';
+exports.resolveGapInput = resolveGapInput;

package/dist/cjs/stepper/Stepper.js

@@ -0,0 +1,461 @@
+"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 _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const LONG_PRESS_DELAY = 600;
+const LONG_PRESS_INTERVAL = 100;
+const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, ref) => {
+  const tokens = (0, _tokens.useStepperTokens)(p.tokensOverride);
+  const {
+    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,
+    ...rest
+  } = p;
+  const [changing, setChanging] = (0, _react().useState)(false);
+  const changingRef = (0, _react().useRef)(false);
+  const decimalLength = (0, _utils.parseDecimalLength)(decimalLengthProp);
+  const resolvedStepRaw = Number(step ?? 1);
+  const resolvedStep = (0, _utils.isFiniteNumber)(resolvedStepRaw) && resolvedStepRaw > 0 ? resolvedStepRaw : 1;
+  const resolvedButtonSize = Math.max(0, (0, _utils.parseNumber)(buttonSize, tokens.defaults.buttonSize));
+  const resolvedInputWidth = Math.max(0, (0, _utils.parseNumber)(inputWidth, tokens.defaults.inputWidth));
+  const resolvedDefaultValue = (() => {
+    const raw = p.defaultValue;
+    if (raw === null) return null;
+    const base = (0, _utils.isFiniteNumber)(raw) ? raw : 0;
+    const formatted = (0, _utils.formatNumber)(base, integer, decimalLength);
+    return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
+  })();
+  const [value, triggerChange] = (0, _hooks.useControllableValue)({
+    ...p,
+    defaultValue: resolvedDefaultValue
+  }, {
+    defaultValue: resolvedDefaultValue
+  });
+  const valueRef = (0, _react().useRef)(value ?? null);
+  (0, _react().useEffect)(() => {
+    valueRef.current = value ?? null;
+  }, [value]);
+  const inputRef = (0, _react().useRef)(null);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur()
+  }));
+  const [hasFocus, setHasFocus] = (0, _react().useState)(false);
+  const [inputValue, setInputValue] = (0, _react().useState)(() => (0, _utils.numberToString)(value, decimalLength));
+  const inputValueRef = (0, _react().useRef)(inputValue);
+  const setInputText = (0, _react().useCallback)(text => {
+    inputValueRef.current = text;
+    setInputValue(text);
+  }, []);
+  (0, _react().useEffect)(() => {
+    if (!hasFocus) {
+      const nextText = (0, _utils.numberToString)(value, decimalLength);
+      setInputText(nextText);
+    }
+  }, [decimalLength, hasFocus, setInputText, value]);
+  const getCurrentNumber = (0, _react().useCallback)(() => {
+    const current = valueRef.current;
+    return (0, _utils.isFiniteNumber)(current) ? current : 0;
+  }, []);
+  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 setValue = (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 applyNextValue = (0, _react().useCallback)(nextRaw => {
+    const formatted = (0, _utils.formatNumber)(nextRaw, integer, decimalLength);
+    return autoFixed ? (0, _utils.clampValue)(formatted, min, max) : formatted;
+  }, [autoFixed, decimalLength, integer, max, min]);
+  const performValueChange = (0, _react().useCallback)((next, committed) => {
+    if (changingRef.current) {
+      return 'noop';
+    }
+    const commit = () => {
+      const didChange = setValue(next);
+      if (!didChange) return 'noop';
+      setInputText((0, _utils.numberToString)(next, decimalLength));
+      committed?.(next);
+      return 'changed';
+    };
+    if (!beforeChange) {
+      return commit();
+    }
+    try {
+      const result = beforeChange(next);
+      if ((0, _utils.isPromiseLike)(result)) {
+        changingRef.current = true;
+        setChanging(true);
+        result.then(allowed => {
+          if (allowed === false) {
+            setInputText((0, _utils.numberToString)(valueRef.current, decimalLength));
+            return;
+          }
+          commit();
+        }).catch(error => {
+          if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+          commit();
+        }).finally(() => {
+          changingRef.current = false;
+          setChanging(false);
+        });
+        return 'pending';
+      }
+      if (result === false) {
+        setInputText((0, _utils.numberToString)(valueRef.current, decimalLength));
+        return 'noop';
+      }
+      return commit();
+    } catch (error) {
+      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+      return commit();
+    }
+  }, [beforeChange, decimalLength, setInputText, setValue]);
+  const stepOnce = (0, _react().useCallback)((type, event, options) => {
+    if (changingRef.current) {
+      return 'noop';
+    }
+    const emitOverlimit = options?.emitOverlimit ?? true;
+    const emitButtonCallbacks = options?.emitButtonCallbacks ?? Boolean(event);
+    if (isActionDisabled(type)) {
+      if (emitOverlimit) onOverlimit?.(type);
+      return 'overlimit';
+    }
+    const current = getCurrentNumber();
+    const diff = type === 'plus' ? resolvedStep : -resolvedStep;
+    const next = applyNextValue((0, _utils.addNumber)(current, diff));
+    return performValueChange(next, committedValue => {
+      if (!emitButtonCallbacks || !event) return;
+      if (type === 'plus') {
+        onPlus?.(event, committedValue);
+      } else {
+        onMinus?.(event, committedValue);
+      }
+    });
+  }, [applyNextValue, getCurrentNumber, isActionDisabled, onMinus, onOverlimit, onPlus, performValueChange, resolvedStep]);
+  const longPressRef = (0, _react().useRef)({
+    hadLongPress: false
+  });
+  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 || changing || !longPress) {
+      clearLongPress();
+    }
+  }, [changing, 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 disabledForAll = disabled || changing;
+  const minusDisabled = disabledForAll || disableMinus || minNumber !== undefined && currentForCompare <= minNumber;
+  const plusDisabled = disabledForAll || disablePlus || maxNumber !== undefined && currentForCompare >= maxNumber;
+  const radius = tokens.radii.default;
+  const buttonBaseStyle = (0, _react().useMemo)(() => ({
+    width: resolvedButtonSize,
+    height: resolvedButtonSize
+  }), [resolvedButtonSize]);
+  const inputBoxStyle = (0, _react().useMemo)(() => ({
+    width: resolvedInputWidth,
+    height: resolvedButtonSize,
+    marginHorizontal: tokens.spacing.gap
+  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
+  const getButtonStyle = (0, _react().useCallback)((type, state) => {
+    const isPlus = type === 'plus';
+    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    if (theme === 'round') {
+      const base = [styles.button, buttonBaseStyle, {
+        borderRadius: resolvedButtonSize / 2,
+        opacity: disabledState ? tokens.opacity.roundDisabled : 1
+      }];
+      if (isPlus) {
+        return [...base, {
+          backgroundColor: tokens.colors.roundTheme,
+          ...(state.pressed && !disabledState && {
+            opacity: tokens.opacity.pressed
+          })
+        }, buttonStyle];
+      }
+      return [...base, {
+        backgroundColor: tokens.colors.roundThemeBackground,
+        borderWidth: _reactNative().StyleSheet.hairlineWidth,
+        borderColor: tokens.colors.roundTheme,
+        ...(state.pressed && !disabledState && {
+          opacity: tokens.opacity.pressed
+        })
+      }, buttonStyle];
+    }
+    const cornerStyle = type === 'minus' ? {
+      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
+    }, 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]);
+  const getButtonTextStyle = (0, _react().useCallback)(type => {
+    const isPlus = type === 'plus';
+    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    if (theme === 'round') {
+      const color = isPlus ? tokens.colors.roundThemeText : tokens.colors.roundTheme;
+      return [styles.buttonText, {
+        color,
+        fontSize: tokens.typography.fontSize,
+        fontWeight: tokens.typography.fontWeight
+      }];
+    }
+    return [styles.buttonText, {
+      color: disabledState ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
+      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]);
+  const handleChangeText = (0, _react().useCallback)(text => {
+    if (disableInput || disabled || changingRef.current) return;
+    setInputText(text);
+    inputProps?.onChangeText?.(text);
+    const trimmed = text.trim();
+    if (trimmed === '') {
+      performValueChange(allowEmpty ? null : resolvedDefaultValue);
+      return;
+    }
+    const numeric = Number.parseFloat(trimmed);
+    if (!Number.isFinite(numeric)) return;
+    performValueChange(applyNextValue(numeric));
+  }, [allowEmpty, applyNextValue, changingRef, disableInput, disabled, inputProps, performValueChange, resolvedDefaultValue, setInputText]);
+  const handleFocus = (0, _react().useCallback)(event => {
+    if (disableInput) {
+      inputRef.current?.blur();
+      return;
+    }
+    setHasFocus(true);
+    onFocus?.(event);
+    inputProps?.onFocus?.(event);
+  }, [disableInput, inputProps, onFocus]);
+  const handleBlur = (0, _react().useCallback)(event => {
+    setHasFocus(false);
+    if (!changingRef.current) {
+      const trimmed = inputValueRef.current.trim();
+      if (trimmed === '') {
+        performValueChange(allowEmpty ? null : resolvedDefaultValue);
+      } else {
+        const numeric = Number.parseFloat(trimmed);
+        if (Number.isFinite(numeric)) {
+          performValueChange(applyNextValue(numeric));
+        }
+      }
+    }
+    onBlur?.(event);
+    inputProps?.onBlur?.(event);
+  }, [allowEmpty, applyNextValue, inputProps, onBlur, performValueChange, resolvedDefaultValue]);
+  const handleInputPressIn = (0, _react().useCallback)(event => {
+    onClick?.(event);
+    inputProps?.onPressIn?.(event);
+  }, [inputProps, onClick]);
+  const handleMinusPress = (0, _react().useCallback)(event => handleButtonPress('minus', event), [handleButtonPress]);
+  const handlePlusPress = (0, _react().useCallback)(event => handleButtonPress('plus', event), [handleButtonPress]);
+  const handleMinusPressIn = (0, _react().useCallback)(() => startLongPress('minus'), [startLongPress]);
+  const handlePlusPressIn = (0, _react().useCallback)(() => startLongPress('plus'), [startLongPress]);
+  const getMinusButtonStyle = (0, _react().useCallback)(state => getButtonStyle('minus', state), [getButtonStyle]);
+  const getPlusButtonStyle = (0, _react().useCallback)(state => getButtonStyle('plus', state), [getButtonStyle]);
+  const renderMinusButton = (0, _react().useCallback)(() => {
+    if (!showMinus) return null;
+    return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
+      key: "minus",
+      testID: "stepper-minus",
+      accessibilityRole: "button",
+      accessibilityLabel: "minus",
+      accessibilityState: {
+        disabled: minusDisabled
+      },
+      onPress: handleMinusPress,
+      onPressIn: handleMinusPressIn,
+      onPressOut: handlePressOut,
+      style: getMinusButtonStyle
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: getButtonTextStyle('minus')
+    }, "-"));
+  }, [getButtonTextStyle, getMinusButtonStyle, handleMinusPress, handleMinusPressIn, handlePressOut, minusDisabled, showMinus]);
+  const renderPlusButton = (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: plusDisabled
+      },
+      onPress: handlePlusPress,
+      onPressIn: handlePlusPressIn,
+      onPressOut: handlePressOut,
+      style: getPlusButtonStyle
+    }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: getButtonTextStyle('plus')
+    }, "+"));
+  }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
+  const inputNode = (0, _react().useMemo)(() => {
+    if (!showInput) return null;
+    const editable = !disabledForAll && !disableInput;
+    const inputDisabled = disabledForAll || disableInput;
+    const inputBackground = theme === 'round' ? 'transparent' : inputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
+    const inputTextColor = inputDisabled ? tokens.colors.inputDisabledText : tokens.colors.inputText;
+    const keyboardType = integer ? 'number-pad' : 'decimal-pad';
+    return /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
+      ref: inputRef
+    }, inputProps, {
+      style: [styles.input, inputBoxStyle, {
+        backgroundColor: inputBackground,
+        color: inputTextColor
+      }, inputStyle],
+      value: inputValue,
+      placeholder: placeholder,
+      editable: editable,
+      keyboardType: keyboardType,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onPressIn: handleInputPressIn
+    }));
+  }, [disableInput, disabledForAll, handleBlur, handleChangeText, handleFocus, handleInputPressIn, inputBoxStyle, inputProps, inputStyle, inputValue, integer, placeholder, showInput, theme, tokens.colors.background, tokens.colors.inputDisabledBackground, tokens.colors.inputDisabledText, tokens.colors.inputText]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
+    style: [styles.container, style]
+  }), renderMinusButton(), inputNode, renderPlusButton());
+});
+const styles = _reactNative().StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonText: {},
+  input: {
+    textAlign: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  }
+});
+Stepper.displayName = 'Stepper';
+var _default = exports.default = Stepper;

package/dist/cjs/stepper/index.js

@@ -0,0 +1,15 @@
+"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;