react-native-system-ui 0.0.2 → 0.0.4

package/dist/es/{swiper → 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/{tabbar → components/tabbar}/Tabbar.js

@@ -1,9 +1,10 @@
 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 { SafeAreaView, StyleSheet, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
 import { mergeTokensOverride } from '../../design-system';
 import { useControllableValue } from '../../hooks';
 import { createHairlineBorderTop } from '../../utils/hairline';
+import { SafeAreaView } from '../safe-area-view';
 import { TabbarContext } from './TabbarContext';
 import { useTabbarTokens } from './tokens';
 const TabbarBase = props => {
@@ -33,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 => {
@@ -54,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,
@@ -71,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/{tabbar → 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/{tabs → 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/{tabs → 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/{tabs → 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/{toast → components/toast}/Toast.js

@@ -1,7 +1,8 @@
 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, useRef } from 'react';
-import { Animated, Pressable, SafeAreaView, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { Animated, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
 import Portal from '../portal/Portal';
+import { SafeAreaView } from '../safe-area-view';
 import { useAriaPress } from '../../hooks';
 import { usePresenceAnimation } from '../../hooks/usePresenceAnimation';
 import Loading from '../loading';
@@ -57,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' ? {
@@ -158,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
@@ -166,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",
@@ -180,9 +185,7 @@ export const Toast = props => {
     onStartShouldSetResponder: () => true,
     onMoveShouldSetResponder: () => true
   }) : null, needsSafeAreaTop && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+    edge: "top",
     pointerEvents: "none"
   }), /*#__PURE__*/React.createElement(Pressable, _extends({
     disabled: !closeOnClick
@@ -203,21 +206,17 @@ export const Toast = props => {
       alignItems: 'center'
     }
   }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/React.createElement(SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+    edge: "bottom",
     pointerEvents: "none"
   })));
 };
 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/{toast → 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
   };
 };

package/dist/es/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/{typography → components/typography}/Typography.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 { Linking, Text, View } from 'react-native';
 import { isBoolean, isNumber, isPlainObject } from '../../utils';
 import { isWeb as isWebPlatform } from '../../platform';
@@ -54,21 +54,18 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   const fontSize = level ? tokens.sizing.titles[level].fontSize : tokens.sizing.sizes[size];
   const lineHeight = level ? tokens.sizing.titles[level].lineHeight : fontSize * tokens.sizing.lineHeightMultiplier;
-  const baseStyle = useMemo(() => {
-    const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
-    const computedStyle = {
-      color: resolvedColor,
-      fontSize,
-      lineHeight,
-      fontFamily: tokens.typography.fontFamily,
-      fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
-      includeFontPadding: false,
-      textDecorationLine,
-      textAlign: center ? 'center' : undefined,
-      opacity: disabled ? tokens.opacity.disabled : 1
-    };
-    return [computedStyle, style];
-  }, [resolvedColor, fontSize, lineHeight, tokens.typography.fontFamily, tokens.opacity.disabled, tokens.typography.weight.regular, tokens.typography.weight.strong, strong, center, disabled, underline, deleted, style]);
+  const textDecorationLine = underline && deleted ? 'underline line-through' : underline ? 'underline' : deleted ? 'line-through' : undefined;
+  const baseStyle = [{
+    color: resolvedColor,
+    fontSize,
+    lineHeight,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: strong ? tokens.typography.weight.strong : tokens.typography.weight.regular,
+    includeFontPadding: false,
+    textDecorationLine,
+    textAlign: center ? 'center' : undefined,
+    opacity: disabled ? tokens.opacity.disabled : 1
+  }, style];
   const hasActionText = !!ellipsisConfig && (ellipsisConfig.expandText || ellipsisConfig.collapseText);
   const shouldShowAction = hasActionText && (isTruncated || expanded || isWeb);
   const handleToggleEllipsis = useCallback(() => {
@@ -79,21 +76,15 @@ const TypographyTextBaseInner = /*#__PURE__*/React.forwardRef((props, ref) => {
       return next;
     });
   }, [ellipsisConfig]);
-  const actionLabel = useMemo(() => {
-    if (!ellipsisConfig) return undefined;
-    return expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  }, [ellipsisConfig, expanded]);
-  const actionTextStyle = useMemo(() => ({
+  const actionLabel = !ellipsisConfig ? undefined : expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
+  const actionTextStyle = {
     color: tokens.colors.primary,
     fontSize: tokens.sizing.sizes.sm,
     fontWeight: tokens.typography.weight.medium,
     marginLeft: tokens.sizing.actionMarginLeft,
     includeFontPadding: false
-  }), [tokens.colors.primary, tokens.sizing.sizes.sm, tokens.typography.weight.medium, tokens.sizing.actionMarginLeft]);
-  const textStyle = useMemo(() => {
-    if (!shouldShowAction) return baseStyle;
-    return [baseStyle, FLEX_SHRINK_STYLE];
-  }, [shouldShowAction, baseStyle]);
+  };
+  const textStyle = shouldShowAction ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
   const textNode = /*#__PURE__*/React.createElement(Text, _extends({
     ref: ref,
     style: textStyle,
@@ -151,11 +142,7 @@ const TypographyLink = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (href) {
       try {
         await Linking.openURL(href);
-      } catch (error) {
-        if (typeof __DEV__ !== 'undefined' && __DEV__) {
-          console.warn('[Typography.Link] Failed to open url', error);
-        }
-      }
+      } catch {}
     }
   }, [onPress, href]);
   return /*#__PURE__*/React.createElement(TypographyTextBase, _extends({