react-native-system-ui 0.0.2 → 0.0.4

package/dist/cjs/{share-sheet → components/share-sheet}/tokens.js

@@ -24,7 +24,19 @@ const createTokens = foundations => {
     spacing: {
       horizontal: spacing.md,
       vertical: spacing.sm,
-      gap: spacing.xs
+      gap: spacing.xs,
+      popupPadding: 0,
+      headerPaddingTop: spacing.sm,
+      headerPaddingHorizontal: spacing.lg,
+      headerPaddingBottom: spacing.md,
+      titleMarginTop: spacing.xs,
+      descriptionMarginTop: spacing.xs,
+      nodeMarginTop: spacing.xs,
+      iconMarginHorizontal: spacing.md,
+      optionTextPaddingHorizontal: spacing.xs,
+      optionDescPaddingHorizontal: spacing.lg,
+      cancelPaddingVertical: 14,
+      cancelMarginTop: spacing.sm
     },
     sizing: {
       icon: 48
@@ -33,7 +45,8 @@ const createTokens = foundations => {
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,
-      optionDesc: fontSize.xxs
+      optionDesc: fontSize.xxs,
+      cancel: fontSize.md
     }
   };
 };

package/dist/cjs/{sidebar → components/sidebar}/Sidebar.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireWildcard(require("react"));
+  const data = _interopRequireDefault(require("react"));
   _react = function () {
     return data;
   };
@@ -23,7 +23,7 @@ var _hooks = require("../../hooks");
 var _SidebarContext = require("./SidebarContext");
 var _tokens = require("./tokens");
 var _utils = require("../../utils");
-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 _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 SidebarBase = props => {
   const {
@@ -34,7 +34,7 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = (0, _tokens.useSidebarTokens)(tokensOverride);
-  const items = (0, _react().useMemo)(() => {
+  const items = (() => {
     const out = [];
     const list = _react().default.Children.toArray(children);
     for (let i = 0; i < list.length; i++) {
@@ -46,7 +46,7 @@ const SidebarBase = props => {
       });
     }
     return out;
-  }, [children]);
+  })();
   const firstIndex = items[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = (0, _hooks.useControllableValue)(props, {
     defaultValue: firstIndex,
@@ -61,24 +61,20 @@ const SidebarBase = props => {
       break;
     }
   }
-  const contextValue = (0, _react().useMemo)(() => ({
+  const contextValue = {
     activeIndex: currentIndex,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = (0, _react().useMemo)(() => {
-    return items.map(item => {
-      const key = item.element.key ?? item.index;
-      const merged = (0, _designSystem.mergeTokensOverride)(tokensOverride, item.element.props.tokensOverride);
-      return /*#__PURE__*/_react().default.cloneElement(item.element, {
-        key,
-        index: item.index,
-        tokensOverride: merged
-      });
+  };
+  const clonedItems = items.map(item => {
+    const key = item.element.key ?? item.index;
+    const merged = (0, _designSystem.mergeTokensOverride)(tokensOverride, item.element.props.tokensOverride);
+    return /*#__PURE__*/_react().default.cloneElement(item.element, {
+      key,
+      index: item.index,
+      tokensOverride: merged
     });
-  }, [items, tokensOverride]);
-  const activeItem = (0, _react().useMemo)(() => {
-    return items.find(item => item.index === currentIndex)?.element;
-  }, [currentIndex, items]);
+  });
+  const activeItem = items.find(item => item.index === currentIndex)?.element;
   const activeContentStyle = activeItem?.props?.contentStyle;
   const activeContent = activeItem?.props?.children;
   const activeContentNode = activeContent == null || activeContent === false ? null : (0, _utils.isText)(activeContent) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, null, activeContent) : activeContent;

package/dist/cjs/{sidebar → components/sidebar}/SidebarItem.js

@@ -44,9 +44,6 @@ const SidebarItem = props => {
   const tokens = (0, _tokens.useSidebarTokens)(tokensOverride);
   const context = (0, _SidebarContext.useSidebarContext)();
   if (!context) {
-    if (typeof __DEV__ !== 'undefined' && __DEV__) {
-      console.warn('[SidebarItem] 需要作为 Sidebar 子节点使用。');
-    }
     return null;
   }
   const disabled = disabledProp ?? tokens.defaults.disabled;

package/dist/cjs/{skeleton → components/skeleton}/Skeleton.js

@@ -58,18 +58,18 @@ const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   const row = rowProp ?? tokens.defaults.rowCount;
   const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
   const round = roundProp ?? false;
-  const rows = (0, _react().useMemo)(() => (0, _utils.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0, [row]);
-  const rowWidths = (0, _react().useMemo)(() => {
+  const rows = (0, _utils.isFiniteNumber)(row) ? Math.max(0, Math.floor(row)) : 0;
+  const rowWidths = (() => {
     const widths = resolveSeries(rows, rowWidth, tokens.defaults.rowWidth);
     if (!Array.isArray(rowWidth) && rows > 1 && (props.rowWidth === undefined || (0, _utils.isString)(props.rowWidth) && props.rowWidth.trim() === '100%')) {
       widths[rows - 1] = tokens.defaults.lastRowWidth;
     }
     return widths;
-  }, [props.rowWidth, rowWidth, rows, tokens.defaults.lastRowWidth, tokens.defaults.rowWidth]);
-  const rowHeights = (0, _react().useMemo)(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
-  const titleHeight = (0, _react().useMemo)(() => rowHeights[0] ?? tokens.defaults.rowHeight, [rowHeights, tokens.defaults.rowHeight]);
-  const resolvedAvatarSize = (0, _react().useMemo)(() => normalize(avatarSize, tokens.defaults.avatarSize), [avatarSize, tokens.defaults.avatarSize]);
-  const resolvedTitleWidth = (0, _react().useMemo)(() => normalize(titleWidth, tokens.defaults.titleWidth), [titleWidth, tokens.defaults.titleWidth]);
+  })();
+  const rowHeights = resolveSeries(rows, rowHeight, tokens.defaults.rowHeight);
+  const titleHeight = rowHeights[0] ?? tokens.defaults.rowHeight;
+  const resolvedAvatarSize = normalize(avatarSize, tokens.defaults.avatarSize);
+  const resolvedTitleWidth = normalize(titleWidth, tokens.defaults.titleWidth);
   const animated = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
   (0, _react().useEffect)(() => {
     if (!loading || !animate || tokens.animation.duration <= 0) {
@@ -88,56 +88,44 @@ const Skeleton = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, loading, tokens.animation.duration]);
-  const animatedStyle = (0, _react().useMemo)(() => {
-    if (!loading || !animate) return undefined;
-    return {
-      opacity: animated.interpolate({
-        inputRange: [0, 1],
-        outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
-      })
-    };
-  }, [animate, animated, loading, tokens.animation.maxOpacity, tokens.animation.minOpacity]);
-  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
+  const animatedStyle = !loading || !animate ? undefined : {
+    opacity: animated.interpolate({
+      inputRange: [0, 1],
+      outputRange: [tokens.animation.minOpacity, tokens.animation.maxOpacity]
+    })
+  };
+  const containerStyles = [styles.container, {
     gap: tokens.spacing.containerGap
-  }, style], [style, tokens.spacing.containerGap]);
-  const avatarNode = (0, _react().useMemo)(() => {
-    if (!avatar) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      style: [{
-        width: resolvedAvatarSize,
-        height: resolvedAvatarSize,
-        borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
-        backgroundColor: tokens.colors.block
-      }, animatedStyle]
-    });
-  }, [animatedStyle, avatar, avatarShape, resolvedAvatarSize, tokens.colors.block, tokens.radius]);
-  const titleNode = (0, _react().useMemo)(() => {
-    if (!title) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      style: [{
-        width: resolvedTitleWidth,
-        height: titleHeight,
-        backgroundColor: tokens.colors.block,
-        borderRadius: round ? tokens.radius : 0
-      }, animatedStyle]
-    });
-  }, [animatedStyle, round, resolvedTitleWidth, title, titleHeight, tokens.colors.block, tokens.radius]);
-  const rowNodes = (0, _react().useMemo)(() => {
-    if (rows <= 0) return null;
-    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.rows
-    }, rowWidths.map((width, index) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-      key: index,
-      testID: `rv-skeleton-row-${index}`,
-      style: [{
-        width: width,
-        height: rowHeights[index],
-        marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
-        backgroundColor: tokens.colors.block,
-        borderRadius: round ? tokens.radius : 0
-      }, animatedStyle]
-    })));
-  }, [animatedStyle, rowHeights, rowWidths, round, rows, title, tokens.colors.block, tokens.radius, tokens.spacing.rowGap]);
+  }, style];
+  const avatarNode = !avatar ? null : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [{
+      width: resolvedAvatarSize,
+      height: resolvedAvatarSize,
+      borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
+      backgroundColor: tokens.colors.block
+    }, animatedStyle]
+  });
+  const titleNode = !title ? null : /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    style: [{
+      width: resolvedTitleWidth,
+      height: titleHeight,
+      backgroundColor: tokens.colors.block,
+      borderRadius: round ? tokens.radius : 0
+    }, animatedStyle]
+  });
+  const rowNodes = rows <= 0 ? null : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: styles.rows
+  }, rowWidths.map((width, index) => /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
+    key: index,
+    testID: `rv-skeleton-row-${index}`,
+    style: [{
+      width: width,
+      height: rowHeights[index],
+      marginTop: index === 0 && !title ? 0 : tokens.spacing.rowGap,
+      backgroundColor: tokens.colors.block,
+      borderRadius: round ? tokens.radius : 0
+    }, animatedStyle]
+  })));
   if (!loading) {
     return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
       ref: ref,

package/dist/cjs/{slider → components/slider}/Slider.js

@@ -80,38 +80,35 @@ const ThumbNode = /*#__PURE__*/_react().default.memo(({
   }, state, ariaReverse);
   const rawThumbViewProps = thumbProps;
   const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
-  const translate = (0, _react().useMemo)(() => -size / 2, [size]);
-  const thumbStyle = (0, _react().useMemo)(() => {
-    const next = {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      borderColor: activeColor,
-      transform: [{
-        translateX: translate
-      }, {
-        translateY: translate
-      }]
-    };
-    if (orientation === 'vertical') {
-      next.top = `${visualPercent}%`;
-      next.left = '50%';
-    } else {
-      next.left = `${visualPercent}%`;
-      next.top = '50%';
-    }
-    if (!content) {
-      next.backgroundColor = thumbBackgroundColor;
-      next.elevation = thumbElevation;
-    }
-    return next;
-  }, [activeColor, content, orientation, size, thumbBackgroundColor, thumbElevation, translate, visualPercent]);
-  const indicatorStyle = (0, _react().useMemo)(() => ({
+  const translate = -size / 2;
+  const thumbStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+    borderColor: activeColor,
+    transform: [{
+      translateX: translate
+    }, {
+      translateY: translate
+    }]
+  };
+  if (orientation === 'vertical') {
+    thumbStyle.top = `${visualPercent}%`;
+    thumbStyle.left = '50%';
+  } else {
+    thumbStyle.left = `${visualPercent}%`;
+    thumbStyle.top = '50%';
+  }
+  if (!content) {
+    thumbStyle.backgroundColor = thumbBackgroundColor;
+    thumbStyle.elevation = thumbElevation;
+  }
+  const indicatorStyle = {
     width: indicatorSize,
     height: indicatorSize,
     borderRadius: indicatorSize / 2,
     backgroundColor: indicatorColor
-  }), [indicatorColor, indicatorSize]);
+  };
   const accessibilityProps = (0, _utils2.createAccessibilityProps)(inputProps);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
@@ -168,7 +165,7 @@ const Slider = props => {
   const resolvedActiveColor = activeColor ?? tokens.colors.active;
   const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactive;
   const scope = Math.max(resolvedMax - resolvedMin, 0.00001);
-  const normalized = (0, _react().useMemo)(() => (0, _utils2.normalizeValue)(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
+  const normalized = (0, _utils2.normalizeValue)(valueProp, range, resolvedMin, resolvedMax);
   const isControlled = valueProp !== undefined;
   const formatOutput = (0, _react().useCallback)(values => (0, _utils2.toSliderValue)(values, range, resolvedMin), [range, resolvedMin]);
   const handleStateChange = (0, _react().useCallback)(values => {
@@ -177,7 +174,7 @@ const Slider = props => {
   const handleStateChangeEnd = (0, _react().useCallback)(values => {
     onChangeAfter?.(formatOutput(values));
   }, [formatOutput, onChangeAfter]);
-  const sliderStateOptions = (0, _react().useMemo)(() => ({
+  const sliderStateOptions = {
     minValue: resolvedMin,
     maxValue: resolvedMax,
     step: resolvedStep,
@@ -188,7 +185,7 @@ const Slider = props => {
     defaultValue: !isControlled ? normalized : undefined,
     onChange: handleStateChange,
     onChangeEnd: handleStateChangeEnd
-  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+  };
   const state = (0, _slider2().useSliderState)(sliderStateOptions);
   const [trackLayout, setTrackLayout] = (0, _react().useState)({
     width: 0,
@@ -397,9 +394,9 @@ const Slider = props => {
     return wrapped;
   }, [onDragStart, onDragEnd]);
   const values = state.values;
-  const thumbPercents = (0, _react().useMemo)(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
-  const thumbVisualPercents = (0, _react().useMemo)(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
-  const activeRange = (0, _react().useMemo)(() => {
+  const thumbPercents = values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100);
+  const thumbVisualPercents = thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent);
+  const activeRange = (() => {
     const first = thumbVisualPercents[0] ?? 0;
     const second = thumbVisualPercents[1] ?? first;
     return range && thumbVisualPercents.length > 1 ? {
@@ -412,33 +409,30 @@ const Slider = props => {
       offset: first,
       size: 100 - first
     };
-  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
-  const activeTrackStyle = (0, _react().useMemo)(() => {
-    const next = {
-      backgroundColor: resolvedActiveColor,
-      borderRadius: tokens.track.radius
-    };
-    if (orientation === 'vertical') {
-      next.left = 0;
-      next.width = '100%';
-      next.height = `${Math.max(activeRange.size, 0)}%`;
-      next.top = `${Math.max(activeRange.offset, 0)}%`;
-    } else {
-      next.top = 0;
-      next.height = '100%';
-      next.width = `${Math.max(activeRange.size, 0)}%`;
-      next.left = `${Math.max(activeRange.offset, 0)}%`;
-    }
-    return next;
-  }, [activeRange.offset, activeRange.size, orientation, resolvedActiveColor, tokens.track.radius]);
-  const trackBaseStyle = (0, _react().useMemo)(() => orientation === 'vertical' ? [styles.trackVertical, {
+  })();
+  const activeTrackStyle = {
+    backgroundColor: resolvedActiveColor,
+    borderRadius: tokens.track.radius
+  };
+  if (orientation === 'vertical') {
+    activeTrackStyle.left = 0;
+    activeTrackStyle.width = '100%';
+    activeTrackStyle.height = `${Math.max(activeRange.size, 0)}%`;
+    activeTrackStyle.top = `${Math.max(activeRange.offset, 0)}%`;
+  } else {
+    activeTrackStyle.top = 0;
+    activeTrackStyle.height = '100%';
+    activeTrackStyle.width = `${Math.max(activeRange.size, 0)}%`;
+    activeTrackStyle.left = `${Math.max(activeRange.offset, 0)}%`;
+  }
+  const trackBaseStyle = orientation === 'vertical' ? [styles.trackVertical, {
     width: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor,
     alignSelf: 'center'
   }] : [styles.trackHorizontal, {
     height: resolvedTrackHeight,
     backgroundColor: resolvedInactiveColor
-  }], [orientation, resolvedInactiveColor, resolvedTrackHeight]);
+  }];
   const isButtonFunction = (0, _validate.isFunction)(button);
   const sharedThumb = isButtonFunction ? button({
     value: currentValue
@@ -446,21 +440,21 @@ const Slider = props => {
   const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
   const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
   const resolveThumbContent = (0, _react().useCallback)((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
-  const webGestureStyle = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'web' ? {
+  const webGestureStyle = _reactNative().Platform.OS === 'web' ? {
     touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
     userSelect: 'none'
-  } : undefined, [orientation]);
-  const baseTrackPressableStyle = (0, _react().useMemo)(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  } : undefined;
+  const baseTrackPressableStyle = [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle];
   const trackPressableStyleFn = (0, _react().useCallback)(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
-  const trackPressableStyle = (0, _react().useMemo)(() => trackAriaStyle && (0, _validate.isFunction)(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle], [baseTrackPressableStyle, trackAriaStyle, trackPressableStyleFn]);
-  const containerStyles = (0, _react().useMemo)(() => [styles.container, {
+  const trackPressableStyle = trackAriaStyle && (0, _validate.isFunction)(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle];
+  const containerStyles = [styles.container, {
     paddingVertical: tokens.spacing.containerPaddingVertical
   }, orientation === 'vertical' && [styles.verticalContainer, {
     minHeight: tokens.layout.verticalMinHeight,
     width: tokens.layout.verticalWidth
   }], disabled && {
     opacity: tokens.states.disabledOpacity
-  }, style], [disabled, orientation, style, tokens.layout.verticalMinHeight, tokens.layout.verticalWidth, tokens.spacing.containerPaddingVertical, tokens.states.disabledOpacity]);
+  }, style];
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
     style: containerStyles,
     onLayout: containerOnLayout

package/dist/cjs/{stepper → components/stepper}/Stepper.js

@@ -158,8 +158,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
             return;
           }
           commit();
-        }).catch(error => {
-          if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+        }).catch(() => {
           commit();
         }).finally(() => {
           changingRef.current = false;
@@ -172,8 +171,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
         return 'noop';
       }
       return commit();
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+    } catch {
       return commit();
     }
   }, [beforeChange, decimalLength, setInputText, setValue]);
@@ -266,15 +264,15 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
   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)(() => ({
+  const buttonBaseStyle = {
     width: resolvedButtonSize,
     height: resolvedButtonSize
-  }), [resolvedButtonSize]);
-  const inputBoxStyle = (0, _react().useMemo)(() => ({
+  };
+  const inputBoxStyle = {
     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;
@@ -413,11 +411,10 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       style: getButtonTextStyle('plus')
     }, "+"));
   }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
-  const inputNode = (0, _react().useMemo)(() => {
-    if (!showInput) return null;
+  const inputNode = !showInput ? null : (() => {
     const editable = !disabledForAll && !disableInput;
     const inputDisabled = disabledForAll || disableInput;
-    const inputBackground = theme === 'round' ? 'transparent' : inputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
+    const inputBackground = theme === 'round' ? tokens.colors.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({
@@ -425,7 +422,9 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
     }, inputProps, {
       style: [styles.input, inputBoxStyle, {
         backgroundColor: inputBackground,
-        color: inputTextColor
+        color: inputTextColor,
+        paddingHorizontal: tokens.spacing.none,
+        paddingVertical: tokens.spacing.none
       }, inputStyle],
       value: inputValue,
       placeholder: placeholder,
@@ -436,7 +435,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/_react().default.forwardRef((p, r
       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());
@@ -452,9 +451,7 @@ const styles = _reactNative().StyleSheet.create({
   },
   buttonText: {},
   input: {
-    textAlign: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0
+    textAlign: 'center'
   }
 });
 Stepper.displayName = 'Stepper';

package/dist/cjs/{stepper → components/stepper}/tokens.js

@@ -35,7 +35,8 @@ const createStepperTokens = foundations => {
       roundThemeBackground: '#ffffff',
       inputText: palette.default[900],
       inputDisabledText: palette.default[400],
-      inputDisabledBackground: palette.default[100]
+      inputDisabledBackground: palette.default[100],
+      transparent: 'transparent'
     },
     radii: {
       default: radii.md
@@ -50,7 +51,8 @@ const createStepperTokens = foundations => {
       pressed: opacity.pressed
     },
     spacing: {
-      gap: 2
+      gap: 2,
+      none: foundations.spacing.none
     }
   };
 };

package/dist/cjs/{swiper → components/swiper}/Swiper.js

@@ -91,39 +91,21 @@ const SwiperImpl = (props, ref) => {
       nativeScrollEndTimerRef.current = null;
     }
   }, []);
-  const validChildren = (0, _react().useMemo)(() => {
-    if (children) {
-      return _react().Children.toArray(children).filter(child => {
-        if (! /*#__PURE__*/(0, _react().isValidElement)(child)) return false;
-        if (child.type === _SwiperItem.default) return true;
-        const type = child.type;
-        return type.displayName === 'SwiperItem';
-      });
-    }
-    return [];
-  }, [children]);
-  const itemsData = (0, _react().useMemo)(() => {
-    if (data) {
-      return data;
-    }
-    if (validChildren.length > 0) {
-      return validChildren.map((_, idx) => ({
-        type: 'child',
-        index: idx
-      }));
-    }
-    return [];
-  }, [data, validChildren]);
+  const validChildren = children ? _react().Children.toArray(children).filter(child => {
+    if (! /*#__PURE__*/(0, _react().isValidElement)(child)) return false;
+    if (child.type === _SwiperItem.default) return true;
+    const type = child.type;
+    return type.displayName === 'SwiperItem';
+  }) : [];
+  const itemsData = data ? data : validChildren.length > 0 ? validChildren.map((_, idx) => ({
+    type: 'child',
+    index: idx
+  })) : [];
   const count = itemsData.length;
   const slideRatio = slideSizePct / 100;
   const offsetRatio = trackOffsetPct / 100;
   const shouldLoop = loop && count > 1 && slideRatio * (count - 1) >= 1;
-  const loopData = (0, _react().useMemo)(() => {
-    if (!shouldLoop || count <= 1) {
-      return itemsData;
-    }
-    return [...itemsData.slice(-1), ...itemsData, ...itemsData.slice(0, 1)];
-  }, [shouldLoop, itemsData, count]);
+  const loopData = !shouldLoop || count <= 1 ? itemsData : [...itemsData.slice(-1), ...itemsData, ...itemsData.slice(0, 1)];
   const displayData = shouldLoop ? loopData : itemsData;
   const displayCount = displayData.length;
   const getDisplayIndex = (0, _react().useCallback)(index => {
@@ -147,15 +129,12 @@ const SwiperImpl = (props, ref) => {
   const crossAxisMeasured = vertical ? containerLayout.width : containerLayout.height;
   const crossAxisSize = crossAxisMeasured > 0 ? crossAxisMeasured : undefined;
   const slideSizeValue = (vertical ? containerHeight : containerWidth) * slideRatio;
-  const itemSizeStyle = (0, _react().useMemo)(() => {
-    const style = {
-      [vertical ? 'height' : 'width']: slideSizeValue
-    };
-    if (crossAxisSize != null && !(autoHeight && !vertical)) {
-      style[vertical ? 'width' : 'height'] = crossAxisSize;
-    }
-    return style;
-  }, [vertical, slideSizeValue, crossAxisSize, autoHeight]);
+  const itemSizeStyle = {
+    [vertical ? 'height' : 'width']: slideSizeValue
+  };
+  if (crossAxisSize != null && !(autoHeight && !vertical)) {
+    itemSizeStyle[vertical ? 'width' : 'height'] = crossAxisSize;
+  }
   const mainAxisMeasured = vertical ? containerLayout.height : containerLayout.width;
   const trackOffsetPx = mainAxisMeasured > 0 ? mainAxisMeasured * offsetRatio : 0;
   const nativeTrackContentPaddingStyle = !trackOffsetPx ? undefined : vertical ? {
@@ -169,12 +148,12 @@ const SwiperImpl = (props, ref) => {
   const mainAxisSize = vertical ? containerHeight : containerWidth;
   const nonLoopMinOffset = stuckAtBoundaryEnabled ? trackOffsetPx : 0;
   const nonLoopMaxOffset = stuckAtBoundaryEnabled ? Math.max(nonLoopMinOffset, trackOffsetPx + count * slideSizeValue - mainAxisSize, 0) : Math.max(0, (count - 1) * slideSizeValue);
-  const nonLoopSnapOffsets = (0, _react().useMemo)(() => {
+  const nonLoopSnapOffsets = (() => {
     if (!stuckAtBoundaryEnabled || count <= 1) return null;
     const offsets = new Array(count);
     for (let i = 0; i < count; i += 1) offsets[i] = i === 0 ? nonLoopMinOffset : i === count - 1 ? nonLoopMaxOffset : slideSizeValue * i;
     return offsets;
-  }, [count, nonLoopMaxOffset, nonLoopMinOffset, slideSizeValue, stuckAtBoundaryEnabled]);
+  })();
   const getInitialIndex = (0, _react().useCallback)(() => {
     const initial = (0, _number.clamp)(initialSwipeValue, 0, count - 1);
     return shouldLoop ? initial + 1 : initial;
@@ -692,11 +671,11 @@ const SwiperImpl = (props, ref) => {
       index
     };
   }, [nonLoopSnapOffsets, shouldLoop, slideSizeValue]);
-  const snapToOffsets = (0, _react().useMemo)(() => {
+  const snapToOffsets = (() => {
     if (slideSizePct === 100 && trackOffsetPct === 0) return undefined;
     if (!shouldLoop && nonLoopSnapOffsets) return nonLoopSnapOffsets;
     return displayData.map((_, index) => slideSizeValue * index);
-  }, [displayData, nonLoopSnapOffsets, shouldLoop, slideSizePct, slideSizeValue, trackOffsetPct]);
+  })();
   (0, _react().useEffect)(() => {
     if (!isWeb) return;
     const initialIndex = getInitialIndex();