react-native-system-ui 0.0.2 → 0.0.4

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

@@ -115,23 +115,20 @@ const useSwiperWeb = ({
     (latest.vertical ? webTranslateXAnim : webTranslateYAnim).stopAnimation();
     webOffsetRef.current = nextOffset;
   }, []);
-  const webTrackTransform = (0, _react().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 = (0, _react().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 _reactNative().PanResponder.create({
       onStartShouldSetPanResponder: () => false,
@@ -189,7 +186,7 @@ const useSwiperWeb = ({
         panLatestRef.current.onDragEnd?.();
       }
     });
-  }, [isWeb, cancelWebRaf, stopWebSnapAnim, scheduleWebTranslate, flushWebTranslate, swipeToRef]);
+  })();
   (0, _react().useEffect)(() => {
     return () => {
       cancelWebRaf();

package/dist/cjs/{tabbar → components/tabbar}/Tabbar.js

@@ -21,6 +21,7 @@ function _reactNative() {
 var _designSystem = require("../../design-system");
 var _hooks = require("../../hooks");
 var _hairline = require("../../utils/hairline");
+var _safeAreaView = require("../safe-area-view");
 var _TabbarContext = require("./TabbarContext");
 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); }
@@ -52,19 +53,16 @@ const TabbarBase = props => {
   const placeholder = placeholderProp ?? tokens.defaults.placeholder;
   const iconSize = iconSizeProp ?? tokens.icon.size;
   const enableSafeAreaInsetBottom = safeAreaInsetBottom ?? fixed;
-  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 items = _react().default.Children.toArray(children).filter(_react().default.isValidElement);
+  const firstName = items.length ? items[0].props.name ?? 0 : undefined;
   const [activeValue, setActiveValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: firstName,
     valuePropName: 'value',
     defaultValuePropName: 'defaultValue',
     trigger: 'onChange'
   });
-  const itemNames = (0, _react().useMemo)(() => items.map((item, index) => item.props.name ?? index), [items]);
-  const currentName = (0, _react().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] = (0, _react().useState)(tokens.layout.height);
   const enablePlaceholder = fixed && placeholder;
   const handleLayout = (0, _react().useCallback)(event => {
@@ -73,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 = (0, _react().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 = (0, _react().useMemo)(() => items.map((item, index) => {
+  };
+  const clonedChildren = items.map((item, index) => {
     const name = item.props.name ?? index;
     return /*#__PURE__*/_react().default.cloneElement(item, {
       key: item.key ?? name,
@@ -90,9 +88,9 @@ const TabbarBase = props => {
       iconSize,
       tokensOverride: (0, _designSystem.mergeTokensOverride)(tokensOverride, item.props.tokensOverride)
     });
-  }), [iconSize, items, tokensOverride]);
+  });
   if (items.length === 0) return null;
-  const ContentWrapper = enableSafeAreaInsetBottom ? _reactNative().SafeAreaView : _reactNative().View;
+  const ContentWrapper = enableSafeAreaInsetBottom ? _safeAreaView.SafeAreaView : _reactNative().View;
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, enablePlaceholder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     testID: "rv-tabbar-placeholder",
     style: {

package/dist/cjs/{tabbar → components/tabbar}/TabbarItem.js

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

package/dist/cjs/{tabs → components/tabs}/Tabs.js

@@ -138,10 +138,10 @@ const TabBarItemInner = ({
     }, ellipsis && !isJumbo ? styles.ellipsis : null, titleStyle],
     numberOfLines: ellipsis && !isJumbo ? 1 : undefined
   }, renderTitle), (0, _validate.isRenderable)(renderDescription) && ((0, _validate.isText)(renderDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().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,
@@ -150,26 +150,29 @@ const TabBarItemInner = ({
     } : {
       color: descriptionColor,
       fontSize: tokens.typography.descriptionSize,
-      marginTop: 2,
+      marginTop: tokens.spacing.descriptionMarginTop,
       textAlign: 'center'
     }, descriptionStyle]
   }, renderDescription) : /*#__PURE__*/_react().default.createElement(_reactNative().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)), (0, _validate.isRenderable)(pane.badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.badge
+    style: [styles.badge, {
+      marginTop: tokens.spacing.badgeMarginTop
+    }]
   }, (0, _validate.isText)(pane.badge) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.badgeText, {
-      color: tokens.colors.badgeText
+      color: tokens.colors.badgeText,
+      fontSize: tokens.typography.badgeTextSize
     }]
   }, pane.badge) : pane.badge)));
 };
@@ -231,7 +234,7 @@ const TabsBaseInner = (props, ref) => {
     preventScroll: true
   };
   const isSwipeable = !!swipeableConfig;
-  const panes = (0, _react().useMemo)(() => {
+  const panes = (() => {
     const result = [];
     let paneIndex = 0;
     const walk = nodes => {
@@ -243,11 +246,6 @@ const TabsBaseInner = (props, ref) => {
           return;
         }
         if (!(0, _utils.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;
@@ -263,7 +261,7 @@ const TabsBaseInner = (props, ref) => {
     };
     walk(children);
     return result;
-  }, [children]);
+  })();
   const firstPaneName = panes[0]?.name;
   const [activeValue, setActiveValue] = (0, _hooks.useControllableValue)(props, {
     defaultValue: firstPaneName,
@@ -276,13 +274,13 @@ const TabsBaseInner = (props, ref) => {
   (0, _react().useEffect)(() => {
     currentNameRef.current = currentName;
   }, [currentName]);
-  const nameIndexMap = (0, _react().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 = (0, _react().useRef)(new Set());
   (0, _react().useEffect)(() => {
@@ -331,12 +329,7 @@ const TabsBaseInner = (props, ref) => {
       navContentSizeSyncFrameRef.current = null;
     };
   }, []);
-  const scrollable = (0, _react().useMemo)(() => {
-    if ((0, _validate.isBoolean)(scrollableProp)) {
-      return scrollableProp;
-    }
-    return panes.length > resolvedSwipeThreshold || ellipsis === false;
-  }, [ellipsis, panes.length, resolvedSwipeThreshold, scrollableProp]);
+  const scrollable = (0, _validate.isBoolean)(scrollableProp) ? scrollableProp : panes.length > resolvedSwipeThreshold || ellipsis === false;
   const indicatorColor = color ?? tokens.colors.indicator;
   const indicatorCornerRadius = resolvedLineHeight ? resolvedLineHeight / 2 : tokens.indicator.radius;
   const {
@@ -405,12 +398,8 @@ const TabsBaseInner = (props, ref) => {
   const runBeforeChange = (0, _react().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]);
@@ -509,15 +498,7 @@ const TabsBaseInner = (props, ref) => {
   }, [currentName, scrollIntoView]);
   const borderEnabled = border ?? false;
   const showIndicator = type === 'line';
-  const navHeight = (0, _react().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 = _reactNative().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) {
@@ -591,7 +572,9 @@ const TabsBaseInner = (props, ref) => {
       backgroundColor: background
     }, tabBarStyle]
   }, navLeft && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.navSide
+    style: [styles.navSide, {
+      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
+    }]
   }, navLeft), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: [styles.nav, {
       minHeight: navHeight + navPaddingBottom,
@@ -605,7 +588,9 @@ const TabsBaseInner = (props, ref) => {
     } : null],
     onLayout: handleNavContainerLayout
   }, navBody), navRight && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.navSide
+    style: [styles.navSide, {
+      paddingHorizontal: tokens.spacing.navSidePaddingHorizontal
+    }]
   }, navRight));
   const paneNodes = panes.map(pane => {
     const isActive = pane.name === currentName;
@@ -648,7 +633,9 @@ const TabsBaseInner = (props, ref) => {
     style: [styles.container, style],
     onLayout: handleContainerLayout
   }), navContent, navBottom && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.navBottom
+    style: [styles.navBottom, {
+      marginTop: tokens.spacing.navBottomMarginTop
+    }]
   }, navBottom), contentNode);
 };
 const styles = _reactNative().StyleSheet.create({
@@ -674,12 +661,8 @@ const styles = _reactNative().StyleSheet.create({
   navContentStatic: {
     flex: 1
   },
-  navSide: {
-    paddingHorizontal: 8
-  },
-  navBottom: {
-    marginTop: 8
-  },
+  navSide: {},
+  navBottom: {},
   labelWrapper: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -707,20 +690,16 @@ const styles = _reactNative().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/cjs/{tabs → components/tabs}/tokens.js

@@ -67,7 +67,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/cjs/{tabs → components/tabs}/useTabsScroll.js

@@ -87,7 +87,11 @@ 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/cjs/{toast → components/toast}/Toast.js

@@ -19,6 +19,7 @@ function _reactNative() {
   return data;
 }
 var _Portal = _interopRequireDefault(require("../portal/Portal"));
+var _safeAreaView = require("../safe-area-view");
 var _hooks = require("../../hooks");
 var _usePresenceAnimation = require("../../hooks/usePresenceAnimation");
 var _loading = _interopRequireDefault(require("../loading"));
@@ -83,7 +84,7 @@ const Toast = props => {
   });
   const prevVisibleRef = (0, _react().useRef)(visible);
   const closingRef = (0, _react().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' ? {
@@ -184,7 +185,7 @@ 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
@@ -192,23 +193,25 @@ const Toast = props => {
   if (!mounted) return null;
   const hasMessage = message !== undefined && message !== null && message !== false && message !== '';
   return /*#__PURE__*/_react().default.createElement(_Portal.default, null, /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().Pressable, {
     testID: "rv-toast-overlay",
-    style: [styles.overlay, overlay && {
+    style: [styles.overlay, {
+      backgroundColor: tokens.colors.transparent
+    }, overlay && {
       backgroundColor: colors.backdrop
     }, overlayStyle],
     pointerEvents: "auto",
     onPress: overlay && closeOnClickOverlay ? handleClose : undefined,
     onStartShouldSetResponder: () => true,
     onMoveShouldSetResponder: () => true
-  }) : null, needsSafeAreaTop && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+  }) : null, needsSafeAreaTop && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "top",
     pointerEvents: "none"
   }), /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     disabled: !closeOnClick
@@ -228,10 +231,8 @@ const Toast = props => {
     style: {
       alignItems: 'center'
     }
-  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_reactNative().SafeAreaView, {
-    style: {
-      width: '100%'
-    },
+  }, message) : null)), needsSafeAreaBottom && /*#__PURE__*/_react().default.createElement(_safeAreaView.SafeAreaView, {
+    edge: "bottom",
     pointerEvents: "none"
   })));
 };
@@ -239,12 +240,10 @@ exports.Toast = Toast;
 const styles = _reactNative().StyleSheet.create({
   backdrop: {
     flex: 1,
-    alignItems: 'center',
-    backgroundColor: 'transparent'
+    alignItems: 'center'
   },
   overlay: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    backgroundColor: 'transparent'
+    ..._reactNative().StyleSheet.absoluteFillObject
   },
   toast: {
     alignItems: 'center',

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

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

package/dist/cjs/components/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/{typography → components/typography}/Typography.js

@@ -73,21 +73,18 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
   }
   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 = (0, _react().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 = (0, _react().useCallback)(() => {
@@ -98,21 +95,15 @@ const TypographyTextBaseInner = /*#__PURE__*/_react().default.forwardRef((props,
       return next;
     });
   }, [ellipsisConfig]);
-  const actionLabel = (0, _react().useMemo)(() => {
-    if (!ellipsisConfig) return undefined;
-    return expanded ? ellipsisConfig.collapseText ?? ellipsisConfig.expandText : ellipsisConfig.expandText ?? ellipsisConfig.collapseText;
-  }, [ellipsisConfig, expanded]);
-  const actionTextStyle = (0, _react().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 = (0, _react().useMemo)(() => {
-    if (!shouldShowAction) return baseStyle;
-    return [baseStyle, FLEX_SHRINK_STYLE];
-  }, [shouldShowAction, baseStyle]);
+  };
+  const textStyle = shouldShowAction ? [baseStyle, FLEX_SHRINK_STYLE] : baseStyle;
   const textNode = /*#__PURE__*/_react().default.createElement(_reactNative().Text, _extends({
     ref: ref,
     style: textStyle,
@@ -170,11 +161,7 @@ const TypographyLink = /*#__PURE__*/_react().default.forwardRef((props, ref) =>
     if (href) {
       try {
         await _reactNative().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().default.createElement(TypographyTextBase, _extends({