react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/swiper/SwiperItem.js

@@ -3,38 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = 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;
-}
-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); }
-const SwiperItem = /*#__PURE__*/(0, _react().forwardRef)((props, ref) => {
-  const {
-    style,
-    children,
-    testID
-  } = props;
-  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    ref: ref,
-    style: [styles.item, style],
-    testID: testID
-  }, children);
-});
-SwiperItem.displayName = 'SwiperItem';
-const styles = _reactNative().StyleSheet.create({
-  item: {
-    flex: 1
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Swiper.SwiperItem;
   }
 });
-var _default = exports.default = SwiperItem;
+var _Swiper = require("./Swiper");

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSwiperTokens = void 0;
+var _designSystem = require("../../design-system");
+const createSwiperTokens = _foundations => {
+  return {};
+};
+const useSwiperTokens = exports.useSwiperTokens = (0, _designSystem.createComponentTokensHook)('swiper', createSwiperTokens);

package/dist/cjs/components/switch/Switch.js

@@ -18,18 +18,13 @@ function _reactNative() {
   };
   return data;
 }
-var _platform = require("../../platform");
 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 AnimatedHandle = _reactNative().Animated.createAnimatedComponent(_reactNative().View);
-const switchEasing = _reactNative().Easing.bezier(0.25, 0.1, 0.25, 1);
 const SwitchImpl = props => {
   const {
     disabled: disabledProp,
-    loading: loadingProp,
     size,
     activeColor,
     inactiveColor,
@@ -37,25 +32,27 @@ const SwitchImpl = props => {
     inactiveValue: inactiveValueProp,
     tokensOverride,
     onClick,
-    style,
-    ...rest
+    style
   } = props;
   const tokens = (0, _tokens.useSwitchTokens)(tokensOverride);
   const disabled = disabledProp ?? tokens.defaults.disabled;
-  const loading = loadingProp ?? tokens.defaults.loading;
-  const activeValue = activeValueProp ?? tokens.defaults.activeValue;
-  const inactiveValue = inactiveValueProp ?? tokens.defaults.inactiveValue;
-  const resolvedSize = Math.max(0, (0, _utils.parseNumber)(size, tokens.defaults.size));
-  const borderWidth = tokens.borders.width;
-  const inset = Math.max(0, tokens.spacing.inset);
-  const trackHeight = resolvedSize;
-  const trackWidth = trackHeight * 2;
-  const trackRadius = trackHeight / 2;
-  const innerHeight = Math.max(0, trackHeight - borderWidth * 2);
-  const innerWidth = Math.max(0, trackWidth - borderWidth * 2);
-  const handleSize = Math.max(0, innerHeight - inset * 2);
-  const handleRadius = handleSize / 2;
-  const translateDistance = Math.max(0, innerWidth - handleSize - inset * 2);
+  const activeValue = (0, _react().useMemo)(() => activeValueProp ?? tokens.defaults.activeValue, [activeValueProp, tokens.defaults.activeValue]);
+  const inactiveValue = (0, _react().useMemo)(() => inactiveValueProp ?? tokens.defaults.inactiveValue, [inactiveValueProp, tokens.defaults.inactiveValue]);
+  const scale = (0, _react().useMemo)(() => {
+    if (!tokens.defaults.size) return 1;
+    if (typeof size === 'string') {
+      const value = size.toLowerCase();
+      if (value === 'sm') return 0.75;
+      if (value === 'md') return 1;
+      if (value === 'lg') return 1.25;
+      const numeric = (0, _utils.parseNumber)(size, tokens.defaults.size);
+      return Math.max(0, numeric / tokens.defaults.size);
+    }
+    if (typeof size === 'number') {
+      return Math.max(0, size / tokens.defaults.size);
+    }
+    return 1;
+  }, [size, tokens.defaults.size]);
   const [value, triggerChange] = (0, _hooks.useControllableValue)(props, {
     valuePropName: 'checked',
     defaultValuePropName: 'defaultChecked',
@@ -63,93 +60,44 @@ const SwitchImpl = props => {
     trigger: 'onChange'
   });
   const isChecked = Object.is(value, activeValue);
-  const progress = (0, _react().useRef)(new (_reactNative().Animated.Value)(isChecked ? 1 : 0)).current;
-  const colorProgress = (0, _react().useRef)(new (_reactNative().Animated.Value)(isChecked ? 1 : 0)).current;
-  (0, _react().useEffect)(() => {
-    const toValue = isChecked ? 1 : 0;
-    progress.stopAnimation();
-    colorProgress.stopAnimation();
-    const animation = _reactNative().Animated.parallel([_reactNative().Animated.timing(progress, {
-      toValue,
-      duration: tokens.animation.duration,
-      easing: switchEasing,
-      useNativeDriver: _platform.nativeDriverEnabled
-    }), _reactNative().Animated.timing(colorProgress, {
-      toValue,
-      duration: tokens.animation.duration,
-      easing: switchEasing,
-      useNativeDriver: false
-    })]);
-    animation.start();
-    return () => animation.stop();
-  }, [colorProgress, isChecked, progress, tokens.animation.duration]);
-  const translateX = progress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, translateDistance]
-  });
-  const resolvedActiveColor = activeColor ?? tokens.colors.activeTrack;
-  const resolvedInactiveColor = inactiveColor ?? tokens.colors.inactiveTrack;
-  const trackColor = isChecked ? resolvedActiveColor : resolvedInactiveColor;
-  const animatedTrackColor = colorProgress.interpolate({
-    inputRange: [0, 1],
-    outputRange: [resolvedInactiveColor, resolvedActiveColor]
-  });
-  const handlePress = event => {
+  const resolvedActiveColor = (0, _react().useMemo)(() => activeColor ?? tokens.colors.activeTrack, [activeColor, tokens.colors.activeTrack]);
+  const resolvedInactiveColor = (0, _react().useMemo)(() => inactiveColor ?? tokens.colors.inactiveTrack, [inactiveColor, tokens.colors.inactiveTrack]);
+  const handleTouchEnd = (0, _react().useCallback)(event => {
     if (disabled) return;
     onClick?.(event);
-    if (loading) return;
+  }, [disabled, onClick]);
+  const handleValueChange = (0, _react().useCallback)(() => {
+    if (disabled) return;
     const next = isChecked ? inactiveValue : activeValue;
     if (Object.is(next, value)) return;
     triggerChange(next);
-  };
-  const {
-    interactionProps
-  } = (0, _hooks.useAriaPress)({
-    disabled,
-    onPress: handlePress,
-    extraProps: rest
-  });
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, interactionProps, {
+  }, [activeValue, disabled, inactiveValue, isChecked, triggerChange, value]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Switch, {
+    value: isChecked,
+    disabled: disabled,
+    trackColor: {
+      false: resolvedInactiveColor,
+      true: resolvedActiveColor
+    },
+    thumbColor: tokens.colors.handle,
+    ios_backgroundColor: resolvedInactiveColor,
+    style: [{
+      transform: [{
+        scaleX: scale
+      }, {
+        scaleY: scale
+      }]
+    }, {
+      opacity: disabled ? tokens.opacity.disabled : 1
+    }, style],
     accessibilityRole: "switch",
     accessibilityState: {
       checked: isChecked,
       disabled
     },
-    disabled: disabled,
-    style: ({
-      pressed
-    }) => [tokens.layout.container, {
-      opacity: disabled ? tokens.opacity.disabled : pressed ? tokens.opacity.pressed : 1
-    }, style]
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().Animated.View, {
-    style: [tokens.layout.track, {
-      width: trackWidth,
-      height: trackHeight,
-      borderRadius: trackRadius,
-      backgroundColor: animatedTrackColor,
-      borderWidth,
-      borderColor: tokens.colors.border
-    }, {
-      pointerEvents: 'none'
-    }]
-  }, /*#__PURE__*/_react().default.createElement(AnimatedHandle, {
-    style: [tokens.layout.handleOuter, tokens.layout.handleInner, {
-      width: handleSize,
-      height: handleSize,
-      borderRadius: handleRadius,
-      top: inset,
-      left: inset,
-      transform: [{
-        translateX
-      }],
-      backgroundColor: tokens.colors.handle,
-      borderWidth,
-      borderColor: tokens.colors.border
-    }]
-  }, loading && /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
-    size: tokens.loader.size,
-    color: trackColor
-  }))));
+    onValueChange: handleValueChange,
+    onTouchEnd: handleTouchEnd
+  });
 };
 const Switch = exports.Switch = /*#__PURE__*/_react().default.memo(SwitchImpl);
 Switch.displayName = 'Switch';

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

@@ -5,80 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSwitchTokens = void 0;
 var _designSystem = require("../../design-system");
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
 const createSwitchTokens = foundations => {
   const {
     palette,
     opacity
   } = foundations;
-  const borderWidth = _reactNative().StyleSheet.hairlineWidth;
   return {
     defaults: {
       size: 28,
       disabled: false,
-      loading: false,
       activeValue: true,
       inactiveValue: false
     },
-    spacing: {
-      inset: 1
-    },
-    layout: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      track: {
-        position: 'relative'
-      },
-      handleOuter: {
-        position: 'absolute'
-      },
-      handleInner: {
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    },
     colors: {
       activeTrack: palette.primary[500],
       inactiveTrack: palette.default[200],
-      handle: '#ffffff',
-      border: palette.default[300]
-    },
-    borders: {
-      width: borderWidth
+      handle: '#ffffff'
     },
     opacity: {
       disabled: opacity.disabled,
       pressed: opacity.pressed
-    },
-    animation: {
-      duration: 200
-    },
-    shadow: {
-      outer: {
-        color: '#000000',
-        opacity: 0.06,
-        radius: 3,
-        offsetY: 3,
-        elevation: 3
-      },
-      inner: {
-        color: '#000000',
-        opacity: 0.12,
-        radius: 2,
-        offsetY: 2,
-        elevation: 2
-      }
-    },
-    loader: {
-      size: 12
     }
   };
 };

package/dist/cjs/components/tabbar/Tabbar.js

@@ -53,16 +53,16 @@ const TabbarBase = props => {
   const placeholder = placeholderProp ?? tokens.defaults.placeholder;
   const iconSize = iconSizeProp ?? tokens.icon.size;
   const enableSafeAreaInsetBottom = safeAreaInsetBottom ?? fixed;
-  const items = _react().default.Children.toArray(children).filter(_react().default.isValidElement);
-  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
+  const items = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(_react().default.isValidElement), [children]);
+  const firstName = (0, _react().useMemo)(() => items.length ? items[0].props.name ?? 0 : undefined, [items]);
   const [activeValue, setActiveValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: firstName,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const itemNames = items.map((item, index) => item.props.name ?? index);
-  const currentName = activeValue === undefined || activeValue === null ? firstName : itemNames.some(name => name === activeValue) ? activeValue : firstName;
+  const itemNames = (0, _react().useMemo)(() => items.map((item, index) => item.props.name ?? index), [items]);
+  const currentName = (0, _react().useMemo)(() => activeValue === undefined || activeValue === null ? firstName : itemNames.some(name => name === activeValue) ? activeValue : firstName, [activeValue, firstName, itemNames]);
   const [barHeight, setBarHeight] = (0, _react().useState)(tokens.layout.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = (0, _react().useCallback)(event => {
@@ -71,15 +71,15 @@ const TabbarBase = props => {
     setBarHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
   }, [enablePlaceholder]);
   const onSelect = (0, _react().useCallback)((name, index) => setActiveValue(name, index), [setActiveValue]);
-  const contextValue = {
+  const contextValue = (0, _react().useMemo)(() => ({
     activeValue: currentName,
     activeColor: activeColor ?? tokens.colors.active,
     inactiveColor: inactiveColor ?? tokens.colors.inactive,
     fontSize: tokens.typography.fontSize,
     fontWeight: tokens.typography.fontWeight,
     onSelect
-  };
-  const clonedChildren = items.map((item, index) => {
+  }), [activeColor, currentName, inactiveColor, onSelect, tokens.colors.active, tokens.colors.inactive, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  const clonedChildren = (0, _react().useMemo)(() => items.map((item, index) => {
     const name = item.props.name ?? index;
     return /*#__PURE__*/_react().default.cloneElement(item, {
       key: item.key ?? name,
@@ -88,31 +88,35 @@ const TabbarBase = props => {
       iconSize,
       tokensOverride: (0, _designSystem.mergeTokensOverride)(tokensOverride, item.props.tokensOverride)
     });
-  });
+  }), [iconSize, items, tokensOverride]);
   if (items.length === 0) return null;
   const ContentWrapper = enableSafeAreaInsetBottom ? _safeAreaView.SafeAreaView : _reactNative().View;
+  const placeholderStyle = (0, _react().useMemo)(() => ({
+    height: barHeight
+  }), [barHeight]);
+  const containerStyle = (0, _react().useMemo)(() => [styles.container, fixed && [styles.fixed, {
+    zIndex
+  }], style], [fixed, style, zIndex]);
+  const barStyle = (0, _react().useMemo)(() => [styles.bar, {
+    backgroundColor: background,
+    paddingHorizontal: tokens.layout.paddingHorizontal,
+    minHeight: tokens.layout.height
+  }, border ? (0, _hairline.createHairlineBorderTop)(tokens.colors.border) : null, contentStyle], [background, border, contentStyle, tokens.colors.border, tokens.layout.height, tokens.layout.paddingHorizontal]);
+  const rowStyle = (0, _react().useMemo)(() => [styles.row, {
+    minHeight: tokens.layout.height
+  }], [tokens.layout.height]);
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, enablePlaceholder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     testID: "rv-tabbar-placeholder",
-    style: {
-      height: barHeight
-    }
+    style: placeholderStyle
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({}, rest, {
-    style: [styles.container, fixed && [styles.fixed, {
-      zIndex
-    }], style],
+    style: containerStyle,
     onLayout: handleLayout
   }), /*#__PURE__*/_react().default.createElement(ContentWrapper, {
-    style: [styles.bar, {
-      backgroundColor: background,
-      paddingHorizontal: tokens.layout.paddingHorizontal,
-      minHeight: tokens.layout.height
-    }, border ? (0, _hairline.createHairlineBorderTop)(tokens.colors.border) : null, contentStyle]
+    style: barStyle
   }, /*#__PURE__*/_react().default.createElement(_TabbarContext.TabbarContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.row, {
-      minHeight: tokens.layout.height
-    }],
+    style: rowStyle,
     accessibilityRole: "tablist"
   }, clonedChildren)))));
 };

package/dist/cjs/components/tabbar/TabbarItem.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 function _react() {
-  const data = _interopRequireDefault(require("react"));
+  const data = _interopRequireWildcard(require("react"));
   _react = function () {
     return data;
   };
@@ -24,6 +24,7 @@ var _badge = _interopRequireDefault(require("../badge"));
 var _TabbarContext = require("./TabbarContext");
 var _tokens = require("./tokens");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 TabbarItem = props => {
   const {
@@ -52,7 +53,7 @@ const TabbarItem = props => {
   const isActive = context.activeValue === itemName;
   const color = isActive ? context.activeColor : context.inactiveColor;
   const resolvedIconSize = iconSize ?? tokens.icon.size;
-  const applyIconTheme = node => {
+  const applyIconTheme = (0, _react().useCallback)(node => {
     if (! /*#__PURE__*/_react().default.isValidElement(node)) return node;
     const element = node;
     const nextProps = {};
@@ -66,15 +67,13 @@ const TabbarItem = props => {
       }];
     }
     return /*#__PURE__*/_react().default.cloneElement(element, nextProps);
-  };
-  const renderIcon = () => {
+  }, [color, resolvedIconSize]);
+  const renderIcon = (0, _react().useCallback)(() => {
     if (!icon) return null;
     const raw = (0, _validate.isFunction)(icon) ? icon(isActive) : icon;
     return applyIconTheme(raw);
-  };
-  const renderLabel = () => {
-    return (0, _validate.isFunction)(children) ? children(isActive) : children;
-  };
+  }, [applyIconTheme, icon, isActive]);
+  const renderLabel = (0, _react().useCallback)(() => (0, _validate.isFunction)(children) ? children(isActive) : children, [children, isActive]);
   const ariaPress = (0, _hooks.useAriaPress)({
     disabled,
     onPress: () => {
@@ -92,8 +91,8 @@ const TabbarItem = props => {
       testID: testID ?? `rv-tabbar-item-${itemName}`
     }
   });
-  const shouldRenderBadge = dot || (0, _validate.isRenderable)(badge);
-  const renderBadge = () => {
+  const shouldRenderBadge = (0, _react().useMemo)(() => dot || (0, _validate.isRenderable)(badge), [badge, dot]);
+  const renderBadge = (0, _react().useCallback)(() => {
     if ((0, _validate.isRenderable)(badge)) {
       if ((0, _validate.isText)(badge)) {
         return /*#__PURE__*/_react().default.createElement(_badge.default, {
@@ -111,24 +110,26 @@ const TabbarItem = props => {
     return /*#__PURE__*/_react().default.createElement(_badge.default, {
       dot: true
     });
-  };
+  }, [badge, dot]);
+  const itemStyle = (0, _react().useMemo)(() => [styles.item, {
+    height: tokens.layout.height,
+    paddingVertical: tokens.layout.paddingVertical,
+    opacity: disabled ? 0.5 : 1
+  }, style], [disabled, style, tokens.layout.height, tokens.layout.paddingVertical]);
+  const labelStyle = (0, _react().useMemo)(() => [styles.label, {
+    color,
+    fontSize: context.fontSize,
+    fontWeight: context.fontWeight,
+    lineHeight: context.fontSize
+  }, textStyle], [color, context.fontSize, context.fontWeight, textStyle]);
   return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, ariaPress.interactionProps, {
-    style: [styles.item, {
-      height: tokens.layout.height,
-      paddingVertical: tokens.layout.paddingVertical,
-      opacity: disabled ? 0.5 : 1
-    }, style]
+    style: itemStyle
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.iconWrapper, iconStyle]
   }, renderIcon(), shouldRenderBadge && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: styles.badge
   }, renderBadge())), (0, _validate.isRenderable)(children) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.label, {
-      color,
-      fontSize: context.fontSize,
-      fontWeight: context.fontWeight,
-      lineHeight: context.fontSize
-    }, textStyle]
+    style: labelStyle
   }, renderLabel()) : null);
 };
 const styles = _reactNative().StyleSheet.create({

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

@@ -15,7 +15,6 @@ const createTokens = foundations => {
     defaults: {
       fixed: true,
       border: true,
-      // 与 Vant 默认一致：placeholder 默认关闭；safe-area 由 Tabbar 在 fixed 时默认开启
       placeholder: false,
       safeAreaInsetBottom: false
     },
@@ -26,7 +25,6 @@ const createTokens = foundations => {
       inactive: palette.default[600]
     },
     layout: {
-      // 对齐官方默认观感（Vant Tabbar）：50 高度、无左右 padding
       height: 50,
       paddingHorizontal: 0,
       paddingVertical: spacing.xs