react-native-system-ui 0.0.3 → 0.0.4

package/dist/es/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/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/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();

package/dist/es/components/swiper/useSwiperWeb.js

@@ -1,4 +1,4 @@
-import { useRef, useCallback, useMemo, useEffect } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 import { Animated, PanResponder } from 'react-native';
 import { clamp } from '../../utils';
 import { stopWebEvent } from './utils';
@@ -97,23 +97,20 @@ export const useSwiperWeb = ({
     (latest.vertical ? webTranslateXAnim : webTranslateYAnim).stopAnimation();
     webOffsetRef.current = nextOffset;
   }, []);
-  const webTrackTransform = useMemo(() => {
-    if (vertical) return trackOffsetPx ? [{
-      translateY: trackOffsetPx
-    }, {
-      translateY: webTranslateYAnim
-    }] : [{
-      translateY: webTranslateYAnim
-    }];
-    return trackOffsetPx ? [{
-      translateX: trackOffsetPx
-    }, {
-      translateX: webTranslateXAnim
-    }] : [{
-      translateX: webTranslateXAnim
-    }];
-  }, [trackOffsetPx, vertical, webTranslateXAnim, webTranslateYAnim]);
-  const panResponder = useMemo(() => {
+  const webTrackTransform = vertical ? trackOffsetPx ? [{
+    translateY: trackOffsetPx
+  }, {
+    translateY: webTranslateYAnim
+  }] : [{
+    translateY: webTranslateYAnim
+  }] : trackOffsetPx ? [{
+    translateX: trackOffsetPx
+  }, {
+    translateX: webTranslateXAnim
+  }] : [{
+    translateX: webTranslateXAnim
+  }];
+  const panResponder = (() => {
     if (!isWeb) return null;
     return PanResponder.create({
       onStartShouldSetPanResponder: () => false,
@@ -171,7 +168,7 @@ export const useSwiperWeb = ({
         panLatestRef.current.onDragEnd?.();
       }
     });
-  }, [isWeb, cancelWebRaf, stopWebSnapAnim, scheduleWebTranslate, flushWebTranslate, swipeToRef]);
+  })();
   useEffect(() => {
     return () => {
       cancelWebRaf();

package/dist/es/components/tabbar/Tabbar.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, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
@@ -34,19 +34,16 @@ const TabbarBase = props => {
   const placeholder = placeholderProp ?? tokens.defaults.placeholder;
   const iconSize = iconSizeProp ?? tokens.icon.size;
   const enableSafeAreaInsetBottom = safeAreaInsetBottom ?? fixed;
-  const items = useMemo(() => React.Children.toArray(children).filter(React.isValidElement), [children]);
-  const firstName = useMemo(() => items.length ? items[0].props.name ?? 0 : undefined, [items]);
+  const items = React.Children.toArray(children).filter(React.isValidElement);
+  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
   const [activeValue, setActiveValue] = useControllableValue(props, {
     defaultValue: firstName,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const itemNames = useMemo(() => items.map((item, index) => item.props.name ?? index), [items]);
-  const currentName = useMemo(() => {
-    if (activeValue === undefined || activeValue === null) return firstName;
-    return itemNames.some(name => name === activeValue) ? activeValue : firstName;
-  }, [activeValue, firstName, itemNames]);
+  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 [barHeight, setBarHeight] = useState(tokens.layout.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = useCallback(event => {
@@ -55,15 +52,15 @@ const TabbarBase = props => {
     setBarHeight(prev => Math.abs(prev - nextHeight) < 0.5 ? prev : nextHeight);
   }, [enablePlaceholder]);
   const onSelect = useCallback((name, index) => setActiveValue(name, index), [setActiveValue]);
-  const contextValue = useMemo(() => ({
+  const contextValue = {
     activeValue: currentName,
     activeColor: activeColor ?? tokens.colors.active,
     inactiveColor: inactiveColor ?? tokens.colors.inactive,
     fontSize: tokens.typography.fontSize,
     fontWeight: tokens.typography.fontWeight,
     onSelect
-  }), [activeColor, currentName, inactiveColor, onSelect, tokens.colors.active, tokens.colors.inactive, tokens.typography.fontSize, tokens.typography.fontWeight]);
-  const clonedChildren = useMemo(() => items.map((item, index) => {
+  };
+  const clonedChildren = items.map((item, index) => {
     const name = item.props.name ?? index;
     return /*#__PURE__*/React.cloneElement(item, {
       key: item.key ?? name,
@@ -72,7 +69,7 @@ const TabbarBase = props => {
       iconSize,
       tokensOverride: mergeTokensOverride(tokensOverride, item.props.tokensOverride)
     });
-  }), [iconSize, items, tokensOverride]);
+  });
   if (items.length === 0) return null;
   const ContentWrapper = enableSafeAreaInsetBottom ? SafeAreaView : View;
   return /*#__PURE__*/React.createElement(React.Fragment, null, enablePlaceholder && /*#__PURE__*/React.createElement(View, {

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

@@ -27,9 +27,6 @@ const TabbarItem = props => {
   const tokens = useTabbarTokens(tokensOverride);
   const context = useTabbarContext();
   if (!context) {
-    if (typeof __DEV__ !== 'undefined' && __DEV__) {
-      console.warn('[TabbarItem] 需要作为 Tabbar 的子节点使用。');
-    }
     return null;
   }
   const itemName = name ?? index ?? 0;

package/dist/es/components/tabs/Tabs.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, { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, Children, isValidElement, Fragment } from 'react';
+import React, { memo, useCallback, useEffect, useImperativeHandle, useRef, useState, Children, isValidElement, Fragment } from 'react';
 import { Animated, Pressable, StyleSheet, Text, ScrollView, View, Platform } from 'react-native';
 import { useAriaPress, useControllableValue } from '../../hooks';
 import { parseNumberLike } from '../../utils/number';
@@ -119,10 +119,10 @@ const TabBarItemInner = ({
     }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle],
     numberOfLines: ellipsis && !isJumbo ? 1 : undefined
   }, renderTitle), isRenderable(renderDescription) && (isText(renderDescription) ? /*#__PURE__*/React.createElement(Text, {
-    style: [styles.description, isJumbo ? {
+    style: [styles.descriptionText, isJumbo ? {
       color: descriptionColor,
       fontSize: tokens.typography.descriptionSize,
-      marginTop: 8,
+      marginTop: tokens.spacing.jumboDescriptionMarginTop,
       textAlign: 'center',
       backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
       paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
@@ -131,26 +131,29 @@ const TabBarItemInner = ({
     } : {
       color: descriptionColor,
       fontSize: tokens.typography.descriptionSize,
-      marginTop: 2,
+      marginTop: tokens.spacing.descriptionMarginTop,
       textAlign: 'center'
     }, descriptionStyle]
   }, renderDescription) : /*#__PURE__*/React.createElement(View, {
-    style: [styles.description, isJumbo ? {
-      marginTop: 8,
+    style: [styles.descriptionView, isJumbo ? {
+      marginTop: tokens.spacing.jumboDescriptionMarginTop,
       alignItems: 'center',
       backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
       paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
       paddingVertical: tokens.jumbo.descriptionPaddingVertical,
       borderRadius: tokens.jumbo.descriptionRadius
     } : {
-      marginTop: 2,
+      marginTop: tokens.spacing.descriptionMarginTop,
       alignItems: 'center'
     }]
   }, renderDescription)), isRenderable(pane.badge) && /*#__PURE__*/React.createElement(View, {
-    style: styles.badge
+    style: [styles.badge, {
+      marginTop: tokens.spacing.badgeMarginTop
+    }]
   }, isText(pane.badge) ? /*#__PURE__*/React.createElement(Text, {
     style: [styles.badgeText, {
-      color: tokens.colors.badgeText
+      color: tokens.colors.badgeText,
+      fontSize: tokens.typography.badgeTextSize
     }]
   }, pane.badge) : pane.badge)));
 };
@@ -212,7 +215,7 @@ const TabsBaseInner = (props, ref) => {
     preventScroll: true
   };
   const isSwipeable = !!swipeableConfig;
-  const panes = useMemo(() => {
+  const panes = (() => {
     const result = [];
     let paneIndex = 0;
     const walk = nodes => {
@@ -224,11 +227,6 @@ const TabsBaseInner = (props, ref) => {
           return;
         }
         if (!isTabPaneElement(element)) {
-          if (typeof __DEV__ !== 'undefined' && __DEV__) {
-            const type = element.type;
-            const childName = typeof type === 'string' ? type : type.displayName ?? type.name ?? 'Unknown';
-            console.warn('[Tabs] children 只能是 <Tabs.TabPane />，已忽略：', childName);
-          }
           return;
         }
         const paneProps = element.props;
@@ -244,7 +242,7 @@ const TabsBaseInner = (props, ref) => {
     };
     walk(children);
     return result;
-  }, [children]);
+  })();
   const firstPaneName = panes[0]?.name;
   const [activeValue, setActiveValue] = useControllableValue(props, {
     defaultValue: firstPaneName,
@@ -257,13 +255,13 @@ const TabsBaseInner = (props, ref) => {
   useEffect(() => {
     currentNameRef.current = currentName;
   }, [currentName]);
-  const nameIndexMap = useMemo(() => {
+  const nameIndexMap = (() => {
     const map = new Map();
     panes.forEach(pane => {
       map.set(pane.name, pane.index);
     });
     return map;
-  }, [panes]);
+  })();
   const activeIndex = currentName == null ? -1 : nameIndexMap.get(currentName) ?? -1;
   const visitedRef = useRef(new Set());
   useEffect(() => {
@@ -312,12 +310,7 @@ const TabsBaseInner = (props, ref) => {
       navContentSizeSyncFrameRef.current = null;
     };
   }, []);
-  const scrollable = useMemo(() => {
-    if (isBoolean(scrollableProp)) {
-      return scrollableProp;
-    }
-    return panes.length > resolvedSwipeThreshold || ellipsis === false;
-  }, [ellipsis, panes.length, resolvedSwipeThreshold, scrollableProp]);
+  const scrollable = isBoolean(scrollableProp) ? scrollableProp : panes.length > resolvedSwipeThreshold || ellipsis === false;
   const indicatorColor = color ?? tokens.colors.indicator;
   const indicatorCornerRadius = resolvedLineHeight ? resolvedLineHeight / 2 : tokens.indicator.radius;
   const {
@@ -386,12 +379,8 @@ const TabsBaseInner = (props, ref) => {
   const runBeforeChange = useCallback(name => {
     if (!beforeChange) return Promise.resolve(true);
     try {
-      return Promise.resolve(beforeChange(name)).then(res => res !== false).catch(error => {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Tabs] beforeChange 抛出异常：', error);
-        return false;
-      });
+      return Promise.resolve(beforeChange(name)).then(res => res !== false).catch(() => false);
     } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Tabs] beforeChange 抛出异常：', error);
       return Promise.resolve(false);
     }
   }, [beforeChange]);
@@ -490,15 +479,7 @@ const TabsBaseInner = (props, ref) => {
   }, [currentName, scrollIntoView]);
   const borderEnabled = border ?? false;
   const showIndicator = type === 'line';
-  const navHeight = useMemo(() => {
-    if (type === 'jumbo') {
-      return tokens.jumbo.height;
-    }
-    if (type === 'card') {
-      return tokens.card.height;
-    }
-    return tokens.tabList.height;
-  }, [type, tokens]);
+  const navHeight = type === 'jumbo' ? tokens.jumbo.height : type === 'card' ? tokens.card.height : tokens.tabList.height;
   const navPaddingBottom = Platform.OS === 'web' && type !== 'line' && type !== 'card' ? tokens.tabList.paddingBottom : 0;
   const indicatorBottom = showIndicator ? type === 'line' ? 0 : tokens.indicator.offset : 0;
   if (panes.length === 0) {
@@ -572,7 +553,9 @@ const TabsBaseInner = (props, ref) => {
       backgroundColor: background
     }, tabBarStyle]
   }, navLeft && /*#__PURE__*/React.createElement(View, {
-    style: styles.navSide
+    style: [styles.navSide, {
+      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
+    }]
   }, navLeft), /*#__PURE__*/React.createElement(View, {
     style: [styles.nav, {
       minHeight: navHeight + navPaddingBottom,
@@ -586,7 +569,9 @@ const TabsBaseInner = (props, ref) => {
     } : null],
     onLayout: handleNavContainerLayout
   }, navBody), navRight && /*#__PURE__*/React.createElement(View, {
-    style: styles.navSide
+    style: [styles.navSide, {
+      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
+    }]
   }, navRight));
   const paneNodes = panes.map(pane => {
     const isActive = pane.name === currentName;
@@ -629,7 +614,9 @@ const TabsBaseInner = (props, ref) => {
     style: [styles.container, style],
     onLayout: handleContainerLayout
   }), navContent, navBottom && /*#__PURE__*/React.createElement(View, {
-    style: styles.navBottom
+    style: [styles.navBottom, {
+      marginTop: tokens.spacing.navBottomMarginTop
+    }]
   }, navBottom), contentNode);
 };
 const styles = StyleSheet.create({
@@ -655,12 +642,8 @@ const styles = StyleSheet.create({
   navContentStatic: {
     flex: 1
   },
-  navSide: {
-    paddingHorizontal: 8
-  },
-  navBottom: {
-    marginTop: 8
-  },
+  navSide: {},
+  navBottom: {},
   labelWrapper: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -688,20 +671,16 @@ const styles = StyleSheet.create({
   title: {
     includeFontPadding: false
   },
-  description: {
-    marginTop: 2,
+  descriptionText: {
     includeFontPadding: false
   },
+  descriptionView: {},
   ellipsis: {
     maxWidth: '100%',
     flexShrink: 1
   },
-  badge: {
-    marginTop: 4
-  },
-  badgeText: {
-    fontSize: 10
-  },
+  badge: {},
+  badgeText: {},
   indicator: {
     position: 'absolute',
     bottom: 0,

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

@@ -61,7 +61,15 @@ const createTokens = foundations => {
       titleActiveWeight: foundations.typography.weight.semiBold,
       descriptionSize: fontSize.xs,
       jumboTitleSize: fontSize.md,
-      jumboLineHeight: Math.round(fontSize.md * 1.6)
+      jumboLineHeight: Math.round(fontSize.md * 1.6),
+      badgeTextSize: fontSize.xxs
+    },
+    spacing: {
+      navSidePaddingHorizontal: spacing.sm,
+      navBottomMarginTop: spacing.sm,
+      descriptionMarginTop: spacing.xxs,
+      jumboDescriptionMarginTop: spacing.sm,
+      badgeMarginTop: spacing.xs
     },
     indicator: {
       height: 3,

package/dist/es/components/tabs/useTabsScroll.js

@@ -69,7 +69,11 @@ export const useTabsScroll = ({
     const listenerId = navScrollX.addListener(({
       value
     }) => {
+      const prev = navLastScrollXRef.current;
       navLastScrollXRef.current = value;
+      if (Math.abs(value - prev) < 0.5) {
+        return;
+      }
       navScrollRef.current?.scrollTo({
         x: value,
         y: 0,

package/dist/es/components/toast/Toast.js

@@ -58,7 +58,7 @@ export const Toast = props => {
   });
   const prevVisibleRef = useRef(visible);
   const closingRef = useRef(false);
-  const positionOffset = windowHeight > 0 ? Math.round(windowHeight * 0.2) : 60;
+  const positionOffset = windowHeight > 0 ? Math.round(windowHeight * tokens.positionOffsetRatio) : tokens.positionOffsetMin;
   const needsSafeAreaTop = safeAreaInsetTopProp !== undefined ? safeAreaInsetTopProp : position === 'top';
   const needsSafeAreaBottom = safeAreaInsetBottomProp !== undefined ? safeAreaInsetBottomProp : position === 'bottom';
   const positionStyle = position === 'top' ? {
@@ -159,7 +159,7 @@ export const Toast = props => {
   };
   const toastStyle = {
     borderRadius: tokens.radius,
-    opacity: closeOnClick && toastPress.states.pressed ? 0.85 : animated,
+    opacity: closeOnClick && toastPress.states.pressed ? tokens.pressedOpacity : animated,
     backgroundColor: tokens.colors.variants[type],
     maxWidth: tokens.maxWidth,
     ...boxStyle
@@ -167,13 +167,17 @@ export const Toast = props => {
   if (!mounted) return null;
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
   return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(View, {
-    style: [styles.backdrop, positionStyle, stackZIndex ? {
+    style: [styles.backdrop, {
+      backgroundColor: tokens.colors.transparent
+    }, positionStyle, stackZIndex ? {
       zIndex: stackZIndex
     } : undefined],
     pointerEvents: forbidClick || overlay || closeOnClick ? 'auto' : 'none'
   }, overlay || forbidClick ? /*#__PURE__*/React.createElement(Pressable, {
     testID: "rv-toast-overlay",
-    style: [styles.overlay, overlay && {
+    style: [styles.overlay, {
+      backgroundColor: tokens.colors.transparent
+    }, overlay && {
       backgroundColor: colors.backdrop
     }, overlayStyle],
     pointerEvents: "auto",
@@ -209,12 +213,10 @@ export const Toast = props => {
 const styles = StyleSheet.create({
   backdrop: {
     flex: 1,
-    alignItems: 'center',
-    backgroundColor: 'transparent'
+    alignItems: 'center'
   },
   overlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent'
+    ...StyleSheet.absoluteFillObject
   },
   toast: {
     alignItems: 'center',

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

@@ -11,7 +11,8 @@ export const createToastTokens = foundations => {
         success: backdrop,
         fail: backdrop,
         loading: backdrop
-      }
+      },
+      transparent: 'transparent'
     },
     fontSize: foundations.fontSize.sm,
     lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
@@ -25,6 +26,9 @@ export const createToastTokens = foundations => {
     defaultPadding: foundations.spacing.lg,
     defaultWidth: 88,
     defaultMinHeight: 88,
+    pressedOpacity: 0.85,
+    positionOffsetRatio: 0.2,
+    positionOffsetMin: 60,
     animationDuration: 160
   };
 };