react-native-system-ui 0.0.2 → 0.0.4

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

@@ -18,7 +18,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
@@ -27,7 +39,8 @@ const createTokens = foundations => {
       title: fontSize.md,
       description: fontSize.xs,
       option: fontSize.xs,
-      optionDesc: fontSize.xxs
+      optionDesc: fontSize.xxs,
+      cancel: fontSize.md
     }
   };
 };

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

@@ -1,5 +1,5 @@
 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, { useMemo } from 'react';
+import React from 'react';
 import { Text, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -15,7 +15,7 @@ const SidebarBase = props => {
     ...rest
   } = props;
   const tokens = useSidebarTokens(tokensOverride);
-  const items = useMemo(() => {
+  const items = (() => {
     const out = [];
     const list = React.Children.toArray(children);
     for (let i = 0; i < list.length; i++) {
@@ -27,7 +27,7 @@ const SidebarBase = props => {
       });
     }
     return out;
-  }, [children]);
+  })();
   const firstIndex = items[0]?.index ?? 0;
   const [activeIndex, setActiveIndex] = useControllableValue(props, {
     defaultValue: firstIndex,
@@ -42,24 +42,20 @@ const SidebarBase = props => {
       break;
     }
   }
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeIndex: currentIndex,
     onSelect: setActiveIndex
-  }), [currentIndex, setActiveIndex]);
-  const clonedItems = useMemo(() => {
-    return items.map(item => {
-      const key = item.element.key ?? item.index;
-      const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
-      return /*#__PURE__*/React.cloneElement(item.element, {
-        key,
-        index: item.index,
-        tokensOverride: merged
-      });
+  };
+  const clonedItems = items.map(item => {
+    const key = item.element.key ?? item.index;
+    const merged = mergeTokensOverride(tokensOverride, item.element.props.tokensOverride);
+    return /*#__PURE__*/React.cloneElement(item.element, {
+      key,
+      index: item.index,
+      tokensOverride: merged
     });
-  }, [items, tokensOverride]);
-  const activeItem = 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 : isText(activeContent) ? /*#__PURE__*/React.createElement(Text, null, activeContent) : activeContent;

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

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

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

@@ -1,5 +1,5 @@
 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, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 import { nativeDriverEnabled } from '../../platform';
 import { isFiniteNumber, isString } from '../../utils';
@@ -39,18 +39,18 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
   const row = rowProp ?? tokens.defaults.rowCount;
   const rowWidth = rowWidthProp ?? tokens.defaults.rowWidth;
   const round = roundProp ?? false;
-  const rows = useMemo(() => isFiniteNumber(row) ? Math.max(0, Math.floor(row)) : 0, [row]);
-  const rowWidths = useMemo(() => {
+  const rows = 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 || 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 = useMemo(() => resolveSeries(rows, rowHeight, tokens.defaults.rowHeight), [rowHeight, rows, tokens.defaults.rowHeight]);
-  const titleHeight = useMemo(() => rowHeights[0] ?? tokens.defaults.rowHeight, [rowHeights, tokens.defaults.rowHeight]);
-  const resolvedAvatarSize = useMemo(() => normalize(avatarSize, tokens.defaults.avatarSize), [avatarSize, tokens.defaults.avatarSize]);
-  const resolvedTitleWidth = 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 = useRef(new Animated.Value(0)).current;
   useEffect(() => {
     if (!loading || !animate || tokens.animation.duration <= 0) {
@@ -69,56 +69,44 @@ const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
     loop.start();
     return () => loop.stop();
   }, [animate, animated, loading, tokens.animation.duration]);
-  const animatedStyle = 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 = 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 = useMemo(() => {
-    if (!avatar) return null;
-    return /*#__PURE__*/React.createElement(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 = useMemo(() => {
-    if (!title) return null;
-    return /*#__PURE__*/React.createElement(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 = useMemo(() => {
-    if (rows <= 0) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      style: styles.rows
-    }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(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.createElement(Animated.View, {
+    style: [{
+      width: resolvedAvatarSize,
+      height: resolvedAvatarSize,
+      borderRadius: avatarShape === 'round' ? 999 : tokens.radius,
+      backgroundColor: tokens.colors.block
+    }, animatedStyle]
+  });
+  const titleNode = !title ? null : /*#__PURE__*/React.createElement(Animated.View, {
+    style: [{
+      width: resolvedTitleWidth,
+      height: titleHeight,
+      backgroundColor: tokens.colors.block,
+      borderRadius: round ? tokens.radius : 0
+    }, animatedStyle]
+  });
+  const rowNodes = rows <= 0 ? null : /*#__PURE__*/React.createElement(View, {
+    style: styles.rows
+  }, rowWidths.map((width, index) => /*#__PURE__*/React.createElement(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.createElement(View, _extends({
       ref: ref,

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

@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import { useSlider, useSliderThumb } from '@react-native-aria/slider';
 import { isRTL } from '@react-native-aria/utils';
 import { useSliderState } from '@react-stately/slider';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { useSliderTokens } from './tokens';
 import { parseNumber } from '../../utils/number';
@@ -43,38 +43,35 @@ const ThumbNode = /*#__PURE__*/React.memo(({
   }, state, ariaReverse);
   const rawThumbViewProps = thumbProps;
   const handlers = enhanceHandlers(rawThumbViewProps, index) ?? rawThumbViewProps ?? {};
-  const translate = useMemo(() => -size / 2, [size]);
-  const thumbStyle = 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 = 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 = createAccessibilityProps(inputProps);
   return /*#__PURE__*/React.createElement(View, _extends({}, handlers, accessibilityProps, {
     pointerEvents: isDisabled ? 'none' : 'auto',
@@ -131,7 +128,7 @@ export 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 = useMemo(() => normalizeValue(valueProp, range, resolvedMin, resolvedMax), [valueProp, range, resolvedMin, resolvedMax]);
+  const normalized = normalizeValue(valueProp, range, resolvedMin, resolvedMax);
   const isControlled = valueProp !== undefined;
   const formatOutput = useCallback(values => toSliderValue(values, range, resolvedMin), [range, resolvedMin]);
   const handleStateChange = useCallback(values => {
@@ -140,7 +137,7 @@ export const Slider = props => {
   const handleStateChangeEnd = useCallback(values => {
     onChangeAfter?.(formatOutput(values));
   }, [formatOutput, onChangeAfter]);
-  const sliderStateOptions = useMemo(() => ({
+  const sliderStateOptions = {
     minValue: resolvedMin,
     maxValue: resolvedMax,
     step: resolvedStep,
@@ -151,7 +148,7 @@ export const Slider = props => {
     defaultValue: !isControlled ? normalized : undefined,
     onChange: handleStateChange,
     onChangeEnd: handleStateChangeEnd
-  }), [ariaDisabled, handleStateChange, handleStateChangeEnd, isControlled, normalized, orientation, resolvedMax, resolvedMin, resolvedStep]);
+  };
   const state = useSliderState(sliderStateOptions);
   const [trackLayout, setTrackLayout] = useState({
     width: 0,
@@ -360,9 +357,9 @@ export const Slider = props => {
     return wrapped;
   }, [onDragStart, onDragEnd]);
   const values = state.values;
-  const thumbPercents = useMemo(() => values.map(value => ((value ?? resolvedMin) - resolvedMin) / scope * 100), [resolvedMin, scope, values]);
-  const thumbVisualPercents = useMemo(() => thumbPercents.map(percent => orientation === 'vertical' ? reverse ? percent : 100 - percent : reverseX ? 100 - percent : percent), [orientation, reverse, reverseX, thumbPercents]);
-  const activeRange = 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 ? {
@@ -375,33 +372,30 @@ export const Slider = props => {
       offset: first,
       size: 100 - first
     };
-  }, [orientation, range, reverse, reverseX, thumbVisualPercents]);
-  const activeTrackStyle = 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 = 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 = isFunction(button);
   const sharedThumb = isButtonFunction ? button({
     value: currentValue
@@ -409,21 +403,21 @@ export const Slider = props => {
   const leftThumbContent = leftButton ?? leftThumb ?? sharedThumb;
   const rightThumbContent = rightButton ?? rightThumb ?? sharedThumb;
   const resolveThumbContent = useCallback((index, total) => total > 1 ? index === 0 ? leftThumbContent : rightThumbContent : sharedThumb, [leftThumbContent, rightThumbContent, sharedThumb]);
-  const webGestureStyle = useMemo(() => Platform.OS === 'web' ? {
+  const webGestureStyle = Platform.OS === 'web' ? {
     touchAction: orientation === 'horizontal' ? 'pan-y' : 'none',
     userSelect: 'none'
-  } : undefined, [orientation]);
-  const baseTrackPressableStyle = useMemo(() => [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle], [orientation, webGestureStyle]);
+  } : undefined;
+  const baseTrackPressableStyle = [styles.trackPressable, orientation === 'vertical' ? styles.trackPressableVertical : null, webGestureStyle];
   const trackPressableStyleFn = useCallback(pressableState => [baseTrackPressableStyle, trackAriaStyle(pressableState)], [baseTrackPressableStyle, trackAriaStyle]);
-  const trackPressableStyle = useMemo(() => trackAriaStyle && isFunction(trackAriaStyle) ? trackPressableStyleFn : [baseTrackPressableStyle, trackAriaStyle], [baseTrackPressableStyle, trackAriaStyle, trackPressableStyleFn]);
-  const containerStyles = useMemo(() => [styles.container, {
+  const trackPressableStyle = trackAriaStyle && 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.createElement(View, _extends({
     style: containerStyles,
     onLayout: containerOnLayout

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

@@ -1,5 +1,5 @@
 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 React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
 import { useControllableValue } from '../../hooks';
 import { parseNumber, addNumber as add, clampValue, formatNumber as formatValue, numberToString as valueToString, parseDecimalLength, isFiniteNumber, isPromiseLike } from '../../utils';
@@ -139,8 +139,7 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
             return;
           }
           commit();
-        }).catch(error => {
-          if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+        }).catch(() => {
           commit();
         }).finally(() => {
           changingRef.current = false;
@@ -153,8 +152,7 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
         return 'noop';
       }
       return commit();
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+    } catch {
       return commit();
     }
   }, [beforeChange, decimalLength, setInputText, setValue]);
@@ -247,15 +245,15 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
   const minusDisabled = disabledForAll || disableMinus || minNumber !== undefined && currentForCompare <= minNumber;
   const plusDisabled = disabledForAll || disablePlus || maxNumber !== undefined && currentForCompare >= maxNumber;
   const radius = tokens.radii.default;
-  const buttonBaseStyle = useMemo(() => ({
+  const buttonBaseStyle = {
     width: resolvedButtonSize,
     height: resolvedButtonSize
-  }), [resolvedButtonSize]);
-  const inputBoxStyle = useMemo(() => ({
+  };
+  const inputBoxStyle = {
     width: resolvedInputWidth,
     height: resolvedButtonSize,
     marginHorizontal: tokens.spacing.gap
-  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
+  };
   const getButtonStyle = useCallback((type, state) => {
     const isPlus = type === 'plus';
     const disabledState = isPlus ? plusDisabled : minusDisabled;
@@ -394,11 +392,10 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       style: getButtonTextStyle('plus')
     }, "+"));
   }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
-  const inputNode = 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.createElement(TextInput, _extends({
@@ -406,7 +403,9 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
     }, inputProps, {
       style: [styles.input, inputBoxStyle, {
         backgroundColor: inputBackground,
-        color: inputTextColor
+        color: inputTextColor,
+        paddingHorizontal: tokens.spacing.none,
+        paddingVertical: tokens.spacing.none
       }, inputStyle],
       value: inputValue,
       placeholder: placeholder,
@@ -417,7 +416,7 @@ export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
       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.createElement(View, _extends({}, rest, {
     style: [styles.container, style]
   }), renderMinusButton(), inputNode, renderPlusButton());
@@ -433,9 +432,7 @@ const styles = StyleSheet.create({
   },
   buttonText: {},
   input: {
-    textAlign: 'center',
-    paddingHorizontal: 0,
-    paddingVertical: 0
+    textAlign: 'center'
   }
 });
 Stepper.displayName = 'Stepper';

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

@@ -29,7 +29,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
@@ -44,7 +45,8 @@ const createStepperTokens = foundations => {
       pressed: opacity.pressed
     },
     spacing: {
-      gap: 2
+      gap: 2,
+      none: foundations.spacing.none
     }
   };
 };

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

@@ -1,5 +1,5 @@
 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, { useRef, useState, useCallback, useEffect, useMemo, useImperativeHandle, forwardRef, cloneElement, Children, isValidElement } from 'react';
+import React, { useRef, useState, useCallback, useEffect, useImperativeHandle, forwardRef, cloneElement, Children, isValidElement } from 'react';
 import { FlatList, View, StyleSheet, Platform, Animated, Easing, useWindowDimensions } from 'react-native';
 import { clamp } from '../../utils/number';
 import { isFiniteNumber } from '../../utils/validate';
@@ -71,39 +71,21 @@ const SwiperImpl = (props, ref) => {
       nativeScrollEndTimerRef.current = null;
     }
   }, []);
-  const validChildren = useMemo(() => {
-    if (children) {
-      return Children.toArray(children).filter(child => {
-        if (! /*#__PURE__*/isValidElement(child)) return false;
-        if (child.type === SwiperItem) return true;
-        const type = child.type;
-        return type.displayName === 'SwiperItem';
-      });
-    }
-    return [];
-  }, [children]);
-  const itemsData = useMemo(() => {
-    if (data) {
-      return data;
-    }
-    if (validChildren.length > 0) {
-      return validChildren.map((_, idx) => ({
-        type: 'child',
-        index: idx
-      }));
-    }
-    return [];
-  }, [data, validChildren]);
+  const validChildren = children ? Children.toArray(children).filter(child => {
+    if (! /*#__PURE__*/isValidElement(child)) return false;
+    if (child.type === SwiperItem) 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 = 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 = useCallback(index => {
@@ -127,15 +109,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 = 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 ? {
@@ -149,12 +128,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 = 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 = useCallback(() => {
     const initial = clamp(initialSwipeValue, 0, count - 1);
     return shouldLoop ? initial + 1 : initial;
@@ -672,11 +651,11 @@ const SwiperImpl = (props, ref) => {
       index
     };
   }, [nonLoopSnapOffsets, shouldLoop, slideSizeValue]);
-  const snapToOffsets = 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]);
+  })();
   useEffect(() => {
     if (!isWeb) return;
     const initialIndex = getInitialIndex();