react-native-system-ui 0.0.7 → 1.0.0

package/dist/es/components/avatar/Avatar.js

@@ -10,13 +10,12 @@ export const AvatarFallbackText = /*#__PURE__*/React.forwardRef(({
   style
 }, ref) => {
   const tokens = useAvatarTokens();
-  const resolvedStyle = StyleSheet.flatten([tokens.layout.text, {
-    color: color ?? tokens.colors.text,
-    fontWeight: tokens.typography.fontWeight
-  }, style]);
   return /*#__PURE__*/React.createElement(Text, {
     ref: ref,
-    style: resolvedStyle,
+    style: StyleSheet.flatten([tokens.layout.text, {
+      color: color ?? tokens.colors.text,
+      fontWeight: tokens.typography.fontWeight
+    }, style]),
     numberOfLines: 1
   }, children);
 });
@@ -37,17 +36,17 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 AvatarImage.displayName = 'Avatar.Image';
-export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
+const AvatarImpl = (props, ref) => {
   const {
     src,
     source,
     icon,
     text,
-    size,
-    width,
-    height,
-    shape,
-    fit,
+    size: sizeProp,
+    width: widthProp,
+    height: heightProp,
+    shape: shapeProp,
+    fit: fitProp,
     color,
     backgroundColor,
     style,
@@ -55,36 +54,35 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentStyle,
     children,
     tokensOverride,
-    ...pressableProps
+    ...rest
   } = props;
   const tokens = useAvatarTokens(tokensOverride);
-  const resolvedSize = size ?? tokens.defaults.size;
-  const resolvedShape = shape ?? tokens.defaults.shape;
+  const resolvedSize = sizeProp ?? tokens.defaults.size;
+  const resolvedShape = shapeProp ?? tokens.defaults.shape;
   const baseSize = isNumber(resolvedSize) ? resolvedSize : tokens.sizing.sizes[resolvedSize];
-  const avatarWidth = width ?? baseSize;
-  const avatarHeight = height ?? baseSize;
+  const avatarWidth = widthProp ?? baseSize;
+  const avatarHeight = heightProp ?? baseSize;
   const borderRadius = resolvedShape === 'circle' ? Math.min(avatarWidth, avatarHeight) / 2 : Math.max(tokens.radii.squareMin, Math.min(avatarWidth, avatarHeight) / tokens.radii.squareDivisor);
   const transparentContainerStyle = {
     backgroundColor: tokens.colors.transparent
   };
-  const fallbackText = text ? text.trim().slice(0, 2).toUpperCase() : undefined;
   const fallbackContent = icon ? /*#__PURE__*/React.createElement(View, {
     style: [tokens.layout.iconWrapper, {
       width: Math.min(avatarWidth, tokens.sizing.iconMaxSize),
       height: Math.min(avatarHeight, tokens.sizing.iconMaxSize)
     }, contentStyle]
-  }, icon) : fallbackText && /*#__PURE__*/React.createElement(AvatarFallbackText, {
+  }, icon) : text && /*#__PURE__*/React.createElement(AvatarFallbackText, {
     color: color,
     style: [{
       fontSize: Math.min(avatarWidth, avatarHeight) * tokens.typography.fallbackTextScale
     }, textStyle]
-  }, fallbackText);
+  }, text.trim().slice(0, 2).toUpperCase());
   const content = children ?? (src || source ? /*#__PURE__*/React.createElement(AvatarImage, {
     src: src,
     source: source,
     containerStyle: transparentContainerStyle,
     style: tokens.layout.image,
-    fit: fit ?? 'cover',
+    fit: fitProp ?? 'cover',
     loadingText: null,
     loadingSize: tokens.sizing.loadingSize,
     showError: true,
@@ -92,13 +90,17 @@ export const Avatar = /*#__PURE__*/React.forwardRef((props, ref) => {
   }) : fallbackContent);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: ref,
+    accessibilityRole: "image",
+    accessibilityLabel: text ?? (src ? 'avatar' : undefined),
     style: [tokens.layout.container, {
       width: avatarWidth,
       height: avatarHeight,
       borderRadius,
       backgroundColor: backgroundColor ?? tokens.colors.background
     }, style]
-  }, pressableProps), content);
-});
-Avatar.displayName = 'Avatar';
+  }, rest), content);
+};
+const AvatarForwardRef = /*#__PURE__*/React.forwardRef(AvatarImpl);
+AvatarForwardRef.displayName = 'Avatar';
+export const Avatar = /*#__PURE__*/React.memo(AvatarForwardRef);
 export default Avatar;

package/dist/es/components/avatar/index.js

@@ -1,2 +1 @@
-export { Avatar as default } from './Avatar';
-export { Avatar } from './Avatar';
+export { Avatar, Avatar as default } from './Avatar';

package/dist/es/components/badge/Badge.js

@@ -1,9 +1,9 @@
 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 { Pressable, Text, View } from 'react-native';
-import { isNumericLike, isRenderable } from '../../utils';
+import { Pressable, View } from 'react-native';
+import { isNumericLike, isRenderable, renderTextOrNode } from '../../utils';
 import { useBadgeTokens } from './tokens';
-export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
+const BadgeImpl = (props, ref) => {
   const {
     children,
     content,
@@ -12,9 +12,9 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
     dot: dotProp,
     max,
     offset,
-    showZero,
+    showZero: showZeroProp,
     badgeStyle,
-    textStyle: userTextStyle,
+    textStyle,
     onPress,
     style,
     tokensOverride,
@@ -22,51 +22,49 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const tokens = useBadgeTokens(tokensOverride);
   const dot = dotProp ?? tokens.defaults.dot;
-  const resolvedShowZero = showZero ?? tokens.defaults.showZero;
+  const showZero = showZeroProp ?? tokens.defaults.showZero;
   const hasChildren = React.Children.count(children) > 0;
   const {
     visible,
     formattedContent
   } = useMemo(() => {
     const numericContent = isNumericLike(content) ? Number(content) : null;
-    const shouldHide = numericContent === 0 && !resolvedShowZero;
+    const shouldHide = numericContent === 0 && !showZero;
     const isVisible = dot || isRenderable(content) && !shouldHide;
     if (!isVisible || dot) return {
       visible: isVisible,
       formattedContent: null
     };
     const numericMax = isNumericLike(max) ? Number(max) : null;
-    const finalContent = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
+    const formatted = numericContent !== null && numericMax !== null && numericContent > numericMax ? `${numericMax}+` : content;
     return {
       visible: true,
-      formattedContent: finalContent
+      formattedContent: formatted
     };
-  }, [content, dot, max, resolvedShowZero]);
+  }, [content, dot, max, showZero]);
   const [size, setSize] = useState({
     width: 0,
     height: 0
   });
-  const handleLayout = useCallback(e => {
+  const handleLayout = useCallback(event => {
     const {
       width,
       height
-    } = e.nativeEvent.layout;
-    if (width !== size.width || height !== size.height) {
-      setSize({
-        width,
-        height
-      });
-    }
-  }, [size.width, size.height]);
+    } = event.nativeEvent.layout;
+    setSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
   const transformStyle = useMemo(() => {
     if (!hasChildren) return undefined;
     if (dot) {
-      const half = tokens.sizing.dotSize / 2;
+      const halfSize = tokens.sizing.dotSize / 2;
       return {
         transform: [{
-          translateX: half
+          translateX: halfSize
         }, {
-          translateY: -half
+          translateY: -halfSize
         }]
       };
     }
@@ -81,7 +79,7 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
       }]
     };
   }, [dot, hasChildren, size.height, size.width, tokens.sizing.dotSize]);
-  const baseBadgeStyle = useMemo(() => dot ? {
+  const badgeBoxStyle = useMemo(() => dot ? {
     width: tokens.sizing.dotSize,
     height: tokens.sizing.dotSize,
     borderRadius: tokens.radii.dot,
@@ -96,13 +94,13 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
     borderColor: tokens.colors.border,
     backgroundColor: color ?? tokens.colors.background
   }, [color, dot, tokens.borders.width, tokens.colors.background, tokens.colors.border, tokens.colors.dot, tokens.radii.badge, tokens.radii.dot, tokens.sizing.dotSize, tokens.sizing.height, tokens.sizing.minWidth, tokens.sizing.paddingHorizontal, tokens.sizing.paddingVertical]);
-  const mergedTextStyle = useMemo(() => [tokens.layout.text, {
+  const mergedTextStyle = [tokens.layout.text, {
     color: textColor ?? tokens.colors.text,
     fontSize: tokens.typography.fontSize,
     lineHeight: tokens.typography.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
-  }, userTextStyle], [textColor, tokens.colors.text, tokens.layout.text, tokens.typography.fontFamily, tokens.typography.fontSize, tokens.typography.fontWeight, tokens.typography.lineHeight, userTextStyle]);
+  }, textStyle];
   const offsetStyle = useMemo(() => {
     if (!offset) return undefined;
     const [x, y] = offset;
@@ -117,14 +115,14 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
   const badgeElement = !visible ? null : /*#__PURE__*/React.createElement(View, {
     pointerEvents: hasChildren ? 'none' : 'auto',
     onLayout: hasChildren && !dot ? handleLayout : undefined,
-    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, baseBadgeStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
-  }, !dot && (/*#__PURE__*/React.isValidElement(formattedContent) ? formattedContent : /*#__PURE__*/React.createElement(Text, {
-    style: mergedTextStyle
-  }, formattedContent)));
+    style: [hasChildren ? tokens.layout.badgeAbsolute : tokens.layout.badgeStandalone, badgeBoxStyle, transformStyle, offsetStyle, badgeStyle, !hasChildren ? style : undefined]
+  }, !dot && renderTextOrNode(formattedContent, mergedTextStyle));
+  const accessibilityLabel = visible ? dot ? 'has new content' : `${formattedContent}` : undefined;
   if (hasChildren) {
     return onPress ? /*#__PURE__*/React.createElement(Pressable, _extends({
       ref: ref,
       onPress: onPress,
+      accessibilityLabel: accessibilityLabel,
       style: ({
         pressed
       }) => [tokens.layout.wrapper, style, pressed && {
@@ -144,9 +142,11 @@ export const Badge = /*#__PURE__*/React.forwardRef((props, ref) => {
     }) => [tokens.layout.pressableStandalone, pressed && {
       opacity: tokens.defaults.pressedOpacity
     }]
-  }, rest), badgeElement) : (/*#__PURE__*/React.cloneElement(badgeElement, {
+  }, rest), badgeElement) : /*#__PURE__*/React.cloneElement(badgeElement, {
     ref,
     ...rest
-  }));
-});
-Badge.displayName = 'Badge';
+  });
+};
+const BadgeForwardRef = /*#__PURE__*/React.forwardRef(BadgeImpl);
+BadgeForwardRef.displayName = 'Badge';
+export const Badge = /*#__PURE__*/React.memo(BadgeForwardRef);

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

@@ -1,4 +1,8 @@
 import { createComponentTokensHook } from '../../design-system';
+const centered = {
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 const createBadgeTokens = ({
   palette,
   spacing,
@@ -22,15 +26,13 @@ const createBadgeTokens = ({
         position: 'absolute',
         top: 0,
         right: 0,
-        alignItems: 'center',
-        justifyContent: 'center',
+        ...centered,
         zIndex: 1
       },
       badgeStandalone: {
         alignSelf: 'flex-start',
         flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center'
+        ...centered
       },
       pressableStandalone: {
         alignSelf: 'flex-start',
@@ -40,10 +42,6 @@ const createBadgeTokens = ({
         textAlign: 'center',
         includeFontPadding: false,
         textAlignVertical: 'center'
-      },
-      icon: {
-        alignItems: 'center',
-        justifyContent: 'center'
       }
     },
     colors: {

package/dist/es/components/button/Button.js

@@ -1,29 +1,19 @@
 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, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { ActivityIndicator, Platform, Pressable, Text, View } from 'react-native';
 import { withAlpha } from '../../utils/color';
 import { createPlatformShadow } from '../../utils/createPlatformShadow';
+import { createHairlineView } from '../../utils/hairline';
 import { ensureSpace } from '../../utils/string';
-import { isFiniteNumber, isFunction, isNumber, isString, isText } from '../../utils/validate';
+import { isFiniteNumber, isFunction, isString } from '../../utils';
 import { useAriaPress } from '../../hooks';
 import { ButtonGroupContext } from './ButtonContext';
 import { useButtonTokens } from './tokens';
-const clampShadowLevel = level => {
-  if (level <= 1) return 1;
-  if (level >= 3) return 3;
-  return level;
+const clampShadowLevel = level => level <= 1 ? 1 : level >= 3 ? 3 : level;
+const ROUND_CORNER_STYLE = {
+  overflow: 'hidden'
 };
-const resolveSpinnerSize = (loadingSize, iconSize) => {
-  if (isNumber(loadingSize)) {
-    return loadingSize;
-  }
-  const base = Math.max(iconSize, 16);
-  if (loadingSize === 'large') {
-    return base * 1.25;
-  }
-  return base;
-};
-export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
+const ButtonImpl = (props, forwardedRef) => {
   const group = useContext(ButtonGroupContext);
   const {
     text,
@@ -33,7 +23,7 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     type: typeProp,
     size: sizeProp,
     color,
-    textColor,
+    textColor: textColorProp,
     plain: plainProp,
     block: blockProp,
     round: roundProp,
@@ -54,116 +44,36 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     style,
     ...pressableProps
   } = props;
-  const buttonTokens = useButtonTokens(tokensOverride);
-  const type = typeProp ?? group?.type ?? buttonTokens.defaults.type;
-  const size = sizeProp ?? group?.size ?? buttonTokens.defaults.size;
-  const plain = plainProp ?? group?.plain ?? buttonTokens.defaults.plain;
-  const block = blockProp ?? group?.block ?? buttonTokens.defaults.block;
-  const round = roundProp ?? group?.round ?? buttonTokens.defaults.round;
-  const square = squareProp ?? group?.square ?? buttonTokens.defaults.square;
-  const hairline = hairlineProp ?? group?.hairline ?? buttonTokens.defaults.hairline;
-  const iconPosition = iconPositionProp ?? group?.iconPosition ?? buttonTokens.defaults.iconPosition;
-  const groupShadow = group?.shadow;
-  const shadowValue = shadowProp ?? groupShadow;
-  const disabled = disabledProp ?? group?.disabled ?? buttonTokens.defaults.disabled;
-  const loading = loadingProp ?? buttonTokens.defaults.loading;
-  const loadingSize = loadingSizeProp ?? buttonTokens.defaults.loadingSize;
-  const allowFontScaling = allowFontScalingProp ?? buttonTokens.defaults.allowFontScaling;
-  const isPlain = plain;
-  const tone = buttonTokens.colors.tones[type] ?? buttonTokens.colors.tones.default;
-  const sizeTokens = buttonTokens.sizing.sizes[size];
-  const normalizedColor = color;
-  let backgroundColor = normalizedColor ?? tone.background;
-  let borderColor = normalizedColor ?? tone.border;
-  let resolvedTextColor = textColor;
-  if (!resolvedTextColor) {
-    resolvedTextColor = normalizedColor ? '#ffffff' : tone.text;
-  }
-  if (isPlain) {
-    backgroundColor = buttonTokens.colors.backgroundPlain;
-    borderColor = normalizedColor ?? tone.border;
-    const fallbackTextColor = type === 'default' && !normalizedColor ? tone.text : normalizedColor ?? tone.border;
-    resolvedTextColor = textColor ?? fallbackTextColor;
-  }
-  const shouldRenderBorder = isPlain || type === 'default';
-  const resolvedBorderWidth = shouldRenderBorder ? hairline ? buttonTokens.borders.hairlineWidth : buttonTokens.borders.width : 0;
-  const borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
+  const tokens = useButtonTokens(tokensOverride);
+  const type = typeProp ?? group?.type ?? tokens.defaults.type;
+  const size = sizeProp ?? group?.size ?? tokens.defaults.size;
+  const plain = plainProp ?? group?.plain ?? tokens.defaults.plain;
+  const block = blockProp ?? group?.block ?? tokens.defaults.block;
+  const round = roundProp ?? group?.round ?? tokens.defaults.round;
+  const square = squareProp ?? group?.square ?? tokens.defaults.square;
+  const hairline = hairlineProp ?? group?.hairline ?? tokens.defaults.hairline;
+  const iconPosition = iconPositionProp ?? group?.iconPosition ?? tokens.defaults.iconPosition;
+  const disabled = disabledProp ?? group?.disabled ?? tokens.defaults.disabled;
+  const loading = loadingProp ?? tokens.defaults.loading;
+  const loadingSize = loadingSizeProp ?? tokens.defaults.loadingSize;
+  const allowFontScaling = allowFontScalingProp ?? tokens.defaults.allowFontScaling;
+  const shadowValue = shadowProp ?? group?.shadow;
   const isDisabled = disabled || loading;
-  let resolvedShadowLevel;
-  if (isFiniteNumber(shadowValue)) {
-    resolvedShadowLevel = clampShadowLevel(shadowValue);
-  } else if (shadowValue === true) {
-    resolvedShadowLevel = clampShadowLevel(2);
-  }
-  const shouldShowShadow = !!resolvedShadowLevel && !isPlain;
-  const shadowTokens = resolvedShadowLevel ? buttonTokens.shadows[resolvedShadowLevel] : undefined;
-  const shadowStyle = shouldShowShadow && shadowTokens ? createPlatformShadow({
-    color: shadowTokens.color,
-    opacity: shadowTokens.opacity,
-    radius: shadowTokens.radius,
-    offsetY: shadowTokens.offsetY,
-    elevation: shadowTokens.elevation
-  }) : undefined;
-  const iconWrapperStyle = iconPosition === 'left' ? {
-    marginRight: buttonTokens.spacing.iconGap
-  } : {
-    marginLeft: buttonTokens.spacing.iconGap
-  };
-  const loadingIconWrapperStyle = {
-    marginRight: buttonTokens.spacing.iconGap
-  };
-  const renderIcon = () => {
-    if (!icon) return null;
-    try {
-      const iconElement = isFunction(icon) ? icon(resolvedTextColor, sizeTokens.iconSize) : icon;
-      return /*#__PURE__*/React.createElement(View, {
-        style: [buttonTokens.layout.iconWrapper, iconWrapperStyle]
-      }, iconElement);
-    } catch (error) {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) {
-        console.warn('[Button] Failed to render icon:', error);
-      }
-      return null;
-    }
-  };
-  const renderLoading = () => {
-    const spinnerSize = resolveSpinnerSize(loadingSize, sizeTokens.iconSize);
-    const indicatorSize = isNumber(loadingSize) ? spinnerSize : loadingSize;
-    const defaultIndicator = /*#__PURE__*/React.createElement(ActivityIndicator, {
-      size: indicatorSize,
-      color: resolvedTextColor
-    });
-    return /*#__PURE__*/React.createElement(View, {
-      style: [buttonTokens.layout.iconWrapper, loadingIconWrapperStyle]
-    }, loadingIndicator ?? defaultIndicator);
-  };
-  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
-  const sharedLabelTextStyle = {
-    fontFamily: buttonTokens.typography.fontFamily,
-    fontWeight: buttonTokens.typography.fontWeight,
-    fontSize: sizeTokens.fontSize,
-    lineHeight: sizeTokens.fontSize * buttonTokens.typography.lineHeightMultiplier,
-    color: resolvedTextColor
-  };
-  const renderText = () => {
-    if (label === undefined || label === null) {
-      return null;
-    }
-    const sharedTextStyle = sharedLabelTextStyle;
-    if (isText(label)) {
-      const content = isString(label) ? ensureSpace(label, true) : String(label);
-      return /*#__PURE__*/React.createElement(Text, {
-        style: [buttonTokens.layout.text, sharedTextStyle, textStyle],
-        numberOfLines: 1,
-        allowFontScaling: allowFontScaling,
-        maxFontSizeMultiplier: maxFontSizeMultiplier
-      }, content);
-    }
-    return label;
-  };
-  const content = /*#__PURE__*/React.createElement(View, {
-    style: [buttonTokens.layout.content, contentStyle]
-  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, renderLoading(), renderText()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderText(), icon && iconPosition === 'right' && renderIcon()));
+  const tone = tokens.colors.tones[type] ?? tokens.colors.tones.default;
+  const sizeTokens = tokens.sizing.sizes[size];
+  const [backgroundColor, borderColor, textColor] = useMemo(() => {
+    if (plain) return [tokens.colors.backgroundPlain, color ?? tone.border, textColorProp ?? (type === 'default' && !color ? tone.text : color ?? tone.border)];
+    return [color ?? tone.background, color ?? tone.border, textColorProp ?? (color ? '#ffffff' : tone.text)];
+  }, [color, textColorProp, plain, type, tone, tokens.colors.backgroundPlain]);
+  const hasBorder = plain || type === 'default';
+  const useHairlineOverlay = hasBorder && hairline;
+  const borderWidth = hasBorder && !hairline ? tokens.borders.width : 0;
+  const borderRadius = square ? 0 : round ? sizeTokens.height / 2 : sizeTokens.radius;
+  const shadowStyle = useMemo(() => {
+    if (plain) return undefined;
+    const level = isFiniteNumber(shadowValue) ? clampShadowLevel(shadowValue) : shadowValue === true ? 2 : undefined;
+    return level ? createPlatformShadow(tokens.shadows[level]) : undefined;
+  }, [shadowValue, plain, tokens.shadows]);
   const {
     onPress,
     onPressIn,
@@ -175,7 +85,6 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     android_ripple: androidRippleProp,
     ...viewProps
   } = pressableProps;
-  const resolvedAccessibilityLabel = accessibilityLabel ?? (isText(label) ? String(label) : undefined);
   const {
     interactionProps,
     states
@@ -185,41 +94,96 @@ export const Button = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     onPressStart: onPressIn || undefined,
     onPressEnd: onPressOut || undefined
   });
-  const resolvedOpacity = disabled ? buttonTokens.states.disabledOpacity : loading ? buttonTokens.states.loadingOpacity : states.pressed ? buttonTokens.states.pressedOpacity : 1;
-  const containerStyle = {
-    minHeight: sizeTokens.height,
-    paddingHorizontal: sizeTokens.paddingHorizontal,
-    borderRadius,
-    backgroundColor,
-    borderColor,
-    borderWidth: resolvedBorderWidth,
-    opacity: resolvedOpacity
+  const opacity = disabled ? tokens.states.disabledOpacity : loading ? tokens.states.loadingOpacity : states.pressed ? tokens.states.pressedOpacity : 1;
+  const computedTextStyle = useMemo(() => ({
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.fontWeight,
+    fontSize: sizeTokens.fontSize,
+    lineHeight: sizeTokens.fontSize * tokens.typography.lineHeightMultiplier,
+    color: textColor
+  }), [tokens.typography, sizeTokens.fontSize, textColor]);
+  const iconGap = tokens.spacing.iconGap;
+  const renderIcon = () => {
+    if (!icon) return null;
+    try {
+      const element = isFunction(icon) ? icon(textColor, sizeTokens.iconSize) : icon;
+      const margin = iconPosition === 'left' ? {
+        marginRight: iconGap
+      } : {
+        marginLeft: iconGap
+      };
+      return /*#__PURE__*/React.createElement(View, {
+        style: [tokens.layout.iconWrapper, margin]
+      }, element);
+    } catch (err) {
+      if (__DEV__) console.warn('[Button] Failed to render icon:', err);
+      return null;
+    }
   };
-  const rippleClipStyle = Platform.OS === 'android' && borderRadius > 0 && !shouldShowShadow ? {
-    overflow: 'hidden'
-  } : null;
-  const baseContainerStyle = [buttonTokens.layout.base, containerStyle, rippleClipStyle, block ? buttonTokens.layout.block : null, shadowStyle, style];
-  const mergedAccessibilityState = {
+  const renderLoading = () => /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.iconWrapper, {
+      marginRight: iconGap
+    }]
+  }, loadingIndicator ?? /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: loadingSize,
+    color: textColor
+  }));
+  const label = loading && loadingText !== undefined ? loadingText : text !== undefined ? text : children;
+  const renderLabel = () => {
+    if (label == null) return null;
+    if (typeof label === 'string' || typeof label === 'number') {
+      return /*#__PURE__*/React.createElement(Text, {
+        style: [tokens.layout.text, computedTextStyle, textStyle],
+        numberOfLines: 1,
+        allowFontScaling: allowFontScaling,
+        maxFontSizeMultiplier: maxFontSizeMultiplier
+      }, isString(label) ? ensureSpace(label, true) : String(label));
+    }
+    return label;
+  };
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === 'string' || typeof label === 'number' ? String(label) : undefined);
+  const mergedAccessibilityState = useMemo(() => ({
     ...accessibilityState,
     disabled: isDisabled,
     busy: loading
-  };
-  const defaultRippleColor = rippleColorProp ?? (isPlain ? resolvedTextColor : type === 'default' && !normalizedColor ? withAlpha(resolvedTextColor, 0.15) : buttonTokens.colors.ripple);
-  const resolvedAndroidRipple = Platform.OS === 'android' ? androidRippleProp ?? {
-    color: defaultRippleColor,
-    borderless: false
-  } : androidRippleProp;
+  }), [accessibilityState, isDisabled, loading]);
+  const resolvedAndroidRipple = useMemo(() => {
+    if (Platform.OS !== 'android') return androidRippleProp;
+    if (androidRippleProp) return androidRippleProp;
+    const rippleColor = rippleColorProp ?? (plain ? textColor : type === 'default' && !color ? withAlpha(textColor, 0.15) : tokens.colors.ripple);
+    return {
+      color: rippleColor,
+      borderless: false
+    };
+  }, [androidRippleProp, rippleColorProp, plain, textColor, type, color, tokens.colors.ripple]);
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     ref: forwardedRef,
     disabled: isDisabled,
-    style: baseContainerStyle,
+    style: [tokens.layout.base, {
+      minHeight: sizeTokens.height,
+      paddingHorizontal: sizeTokens.paddingHorizontal,
+      borderRadius: borderRadius,
+      backgroundColor: backgroundColor,
+      borderColor: useHairlineOverlay ? 'transparent' : borderColor,
+      borderWidth: borderWidth,
+      opacity: opacity
+    }, Platform.OS === 'android' && borderRadius > 0 && !shadowStyle ? ROUND_CORNER_STYLE : null, block ? tokens.layout.block : null, shadowStyle, style],
     android_ripple: resolvedAndroidRipple
   }, interactionProps, {
     accessibilityState: mergedAccessibilityState,
     accessibilityRole: accessibilityRole ?? 'button',
     accessibilityLabel: resolvedAccessibilityLabel,
     accessibilityHint: accessibilityHint
-  }, viewProps), content);
-});
-Button.displayName = 'Button';
+  }, viewProps), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.content, contentStyle]
+  }, loading ? /*#__PURE__*/React.createElement(React.Fragment, null, renderLoading(), renderLabel()) : /*#__PURE__*/React.createElement(React.Fragment, null, icon && iconPosition === 'left' && renderIcon(), renderLabel(), icon && iconPosition === 'right' && renderIcon())), useHairlineOverlay && /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'all',
+      color: borderColor,
+      borderRadius
+    })
+  }));
+};
+const ButtonForwardRef = /*#__PURE__*/React.forwardRef(ButtonImpl);
+export const Button = /*#__PURE__*/React.memo(ButtonForwardRef);
 export default Button;