react-native-system-ui 0.0.3 → 0.0.4

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

@@ -53,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 => {
@@ -74,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,
@@ -91,7 +88,7 @@ const TabbarBase = props => {
       iconSize,
       tokensOverride: (0, _designSystem.mergeTokensOverride)(tokensOverride, item.props.tokensOverride)
     });
-  }), [iconSize, items, tokensOverride]);
+  });
   if (items.length === 0) return null;
   const ContentWrapper = enableSafeAreaInsetBottom ? _safeAreaView.SafeAreaView : _reactNative().View;
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, enablePlaceholder && /*#__PURE__*/_react().default.createElement(_reactNative().View, {

package/dist/cjs/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/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/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/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/components/toast/Toast.js

@@ -84,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' ? {
@@ -185,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
@@ -193,13 +193,17 @@ 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",
@@ -236,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/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/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({

package/dist/cjs/components/uploader/Uploader.js

@@ -278,9 +278,7 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         if (available <= 0) return prev;
         return [...prev, ...next.slice(0, available).map(item => normalizeItem(item))];
       });
-    }).catch(error => {
-      if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Uploader] onUpload rejected:', error);
-    });
+    }).catch(() => {});
   };
   const closeImagePreview = () => setPreviewVisible(false);
   (0, _react().useImperativeHandle)(ref, () => ({
@@ -326,7 +324,7 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   };
   const renderStatus = status => {
     if (!status) return null;
-    const baseStyle = [styles.status, {
+    const baseStyle = [statusStyle, {
       backgroundColor: tokens.colors.maskBackground
     }];
     if (status === 'pending') {
@@ -337,7 +335,8 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         color: tokens.colors.maskText
       }), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.statusText, {
-          color: tokens.colors.maskText
+          color: tokens.colors.maskText,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.pending));
     }
@@ -347,7 +346,8 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
         testID: "rv-uploader-status-failed"
       }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
         style: [styles.statusText, {
-          color: tokens.colors.failed
+          color: tokens.colors.failed,
+          fontSize: tokens.typography.statusTextSize
         }]
       }, statusTextRender?.(status) ?? statusDefaults.failed));
     }
@@ -364,19 +364,38 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     backgroundColor: tokens.colors.background,
     borderColor: tokens.colors.border
   };
+  const placeholderStyle = [styles.placeholder, {
+    paddingHorizontal: tokens.spacing.placeholderPaddingHorizontal
+  }];
   const placeholderNameStyle = [styles.placeholderName, {
-    color: tokens.colors.text
+    color: tokens.colors.text,
+    fontSize: tokens.typography.placeholderNameSize,
+    marginTop: tokens.spacing.placeholderNameMarginTop
   }];
   const deleteStyle = [styles.delete, {
-    backgroundColor: tokens.colors.deleteBackground
+    backgroundColor: tokens.colors.deleteBackground,
+    borderRadius: tokens.radii.deleteButton,
+    top: tokens.spacing.deleteOffset,
+    right: tokens.spacing.deleteOffset,
+    minWidth: tokens.sizing.deleteMinSize,
+    minHeight: tokens.sizing.deleteMinSize,
+    paddingHorizontal: tokens.spacing.deletePaddingHorizontal
   }];
   const deleteIconStyle = {
     color: tokens.colors.deleteIcon
   };
+  const statusStyle = [styles.status, {
+    gap: tokens.spacing.statusGap
+  }];
+  const uploadContentStyle = [styles.uploadContent, {
+    gap: tokens.spacing.uploadContentGap
+  }];
   const renderPlaceholder = name => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.placeholder
+    style: placeholderStyle
   }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: styles.placeholderIcon
+    style: [styles.placeholderIcon, {
+      fontSize: tokens.typography.placeholderIconSize
+    }]
   }, "FILE"), name && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: placeholderNameStyle,
     numberOfLines: 1
@@ -414,7 +433,9 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
     }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
       style: ({
         pressed
-      }) => [styles.preview, frameStyle, pressed && styles.pressed],
+      }) => [styles.preview, frameStyle, pressed && {
+        opacity: tokens.opacity.pressed
+      }],
       onPress: () => handlePreview(item, index),
       testID: `rv-uploader-preview-${index}`
     }, source ? /*#__PURE__*/_react().default.createElement(_image.default, {
@@ -444,19 +465,25 @@ const Uploader = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
   }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
     style: ({
       pressed
-    }) => [styles.upload, boxStyle, frameStyle, pressed && styles.pressed, uploadDisabled && styles.disabled],
+    }) => [styles.upload, boxStyle, frameStyle, pressed && {
+      opacity: tokens.opacity.pressed
+    }, uploadDisabled && {
+      opacity: tokens.opacity.disabled
+    }],
     onPress: handleUploadPress,
     disabled: uploadDisabled,
     testID: "rv-uploader-upload"
   }, children ?? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.uploadContent
+    style: uploadContentStyle
   }, uploadIcon ?? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.uploadIcon, {
-      color: tokens.colors.icon
+      color: tokens.colors.icon,
+      fontSize: tokens.typography.uploadIconSize
     }]
   }, "+"), uploadText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: [styles.uploadText, {
-      color: tokens.colors.text
+      color: tokens.colors.text,
+      fontSize: tokens.typography.uploadTextSize
     }]
   }, uploadText) : null)) : null), previewFullImage ? /*#__PURE__*/_react().default.createElement(_imagePreview.default, _extends({}, previewOptions, {
     visible: previewVisible,
@@ -483,12 +510,6 @@ const styles = _reactNative().StyleSheet.create({
     borderWidth: _reactNative().StyleSheet.hairlineWidth,
     overflow: 'hidden'
   },
-  pressed: {
-    opacity: 0.85
-  },
-  disabled: {
-    opacity: 0.65
-  },
   image: {
     width: '100%',
     height: '100%'
@@ -496,17 +517,12 @@ const styles = _reactNative().StyleSheet.create({
   placeholder: {
     flex: 1,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 6
+    alignItems: 'center'
   },
   placeholderIcon: {
-    fontSize: 20,
     fontWeight: '600'
   },
-  placeholderName: {
-    marginTop: 6,
-    fontSize: 11
-  },
+  placeholderName: {},
   cover: {
     ..._reactNative().StyleSheet.absoluteFillObject,
     justifyContent: 'center',
@@ -515,22 +531,13 @@ const styles = _reactNative().StyleSheet.create({
   status: {
     ..._reactNative().StyleSheet.absoluteFillObject,
     justifyContent: 'center',
-    alignItems: 'center',
-    gap: 4
-  },
-  statusText: {
-    fontSize: 12
+    alignItems: 'center'
   },
+  statusText: {},
   delete: {
     position: 'absolute',
-    top: 4,
-    right: 4,
-    minWidth: 20,
-    minHeight: 20,
-    borderRadius: 12,
     justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: 4
+    alignItems: 'center'
   },
   upload: {
     borderWidth: _reactNative().StyleSheet.hairlineWidth,
@@ -539,16 +546,12 @@ const styles = _reactNative().StyleSheet.create({
   },
   uploadContent: {
     justifyContent: 'center',
-    alignItems: 'center',
-    gap: 4
+    alignItems: 'center'
   },
   uploadIcon: {
-    fontSize: 24,
     fontWeight: '600'
   },
-  uploadText: {
-    fontSize: 12
-  }
+  uploadText: {}
 });
 Uploader.displayName = 'Uploader';
 var _default = exports.default = Uploader;