react-native-system-ui 1.0.0 → 1.0.1

package/dist/cjs/components/tabs/Tabs.js

@@ -52,52 +52,52 @@ const useTabsAnimation = ({
   layoutMap,
   navContainerWidthRef
 }) => {
-  const indicatorX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const indicatorWidth = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const indicatorInitializedRef = (0, _react().useRef)(false);
-  const indicatorAnimRef = (0, _react().useRef)(null);
+  const indX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indW = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const indInitRef = (0, _react().useRef)(false);
+  const animRef = (0, _react().useRef)(null);
   const animateIndicator = (0, _react().useCallback)((name, immediate) => {
     if (name == null || type !== 'line') return false;
-    const shouldUseEqualWidth = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
-    const index = nameIndexMap.get(name) ?? -1;
-    const equalTabWidth = shouldUseEqualWidth ? navContainerWidthRef.current / panes.length : 0;
-    const layout = shouldUseEqualWidth ? {
-      x: Math.max(index, 0) * equalTabWidth,
-      width: equalTabWidth
+    const eqW = !scrollable && align !== 'start' && navContainerWidthRef.current > 0 && panes.length > 0;
+    const idx = nameIndexMap.get(name) ?? -1;
+    const eqTabW = eqW ? navContainerWidthRef.current / panes.length : 0;
+    const lay = eqW ? {
+      x: Math.max(idx, 0) * eqTabW,
+      width: eqTabW
     } : layoutMap.current.get(name);
-    if (!layout || index < 0) return false;
-    indicatorAnimRef.current?.stop();
-    const timing = (value, toValue) => _reactNative().Animated.timing(value, {
-      toValue,
+    if (!lay || idx < 0) return false;
+    animRef.current?.stop();
+    const timing = (v, to) => _reactNative().Animated.timing(v, {
+      toValue: to,
       duration: immediate || !animated ? 0 : resolvedDuration,
       useNativeDriver: false,
       isInteraction: false
     });
-    const targetWidth = resolvedLineWidth ?? layout.width;
-    const targetX = resolvedLineWidth ? layout.x + (layout.width - targetWidth) / 2 : layout.x;
-    const anim = _reactNative().Animated.parallel([timing(indicatorX, targetX), timing(indicatorWidth, targetWidth)]);
-    indicatorAnimRef.current = anim;
+    const tW = resolvedLineWidth ?? lay.width;
+    const tX = resolvedLineWidth ? lay.x + (lay.width - tW) / 2 : lay.x;
+    const anim = _reactNative().Animated.parallel([timing(indX, tX), timing(indW, tW)]);
+    animRef.current = anim;
     anim.start(({
       finished
     }) => {
-      if (finished) indicatorAnimRef.current = null;
+      if (finished) animRef.current = null;
     });
     return true;
-  }, [align, animated, indicatorWidth, indicatorX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
+  }, [align, animated, indW, indX, nameIndexMap, panes.length, resolvedDuration, resolvedLineWidth, scrollable, type, layoutMap, navContainerWidthRef]);
   (0, _react().useEffect)(() => {
     if (currentName == null) return;
-    const shouldAnimate = indicatorInitializedRef.current;
-    const didAnimate = animateIndicator(currentName, !shouldAnimate);
-    if (didAnimate && !indicatorInitializedRef.current) indicatorInitializedRef.current = true;
+    const should = indInitRef.current;
+    const did = animateIndicator(currentName, !should);
+    if (did && !indInitRef.current) indInitRef.current = true;
   }, [animateIndicator, currentName]);
   (0, _react().useEffect)(() => () => {
-    indicatorAnimRef.current?.stop();
-    indicatorAnimRef.current = null;
+    animRef.current?.stop();
+    animRef.current = null;
   }, []);
   return {
-    indicatorX,
-    indicatorWidth,
-    indicatorInitializedRef,
+    indicatorX: indX,
+    indicatorWidth: indW,
+    indicatorInitializedRef: indInitRef,
     animateIndicator
   };
 };
@@ -110,97 +110,86 @@ const useTabsScroll = ({
   navContainerWidthRef,
   navContentWidthRef
 }) => {
-  const navScrollRef = (0, _react().useRef)(null);
-  const navScrollX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
-  const navScrollAnimRef = (0, _react().useRef)(null);
-  const navAutoScrollingRef = (0, _react().useRef)(false);
-  const navLastScrollXRef = (0, _react().useRef)(0);
-  const navAutoScrollFrameRef = (0, _react().useRef)(null);
+  const navScrRef = (0, _react().useRef)(null);
+  const navX = (0, _react().useRef)(new (_reactNative().Animated.Value)(0)).current;
+  const navAnimRef = (0, _react().useRef)(null);
+  const autoScrRef = (0, _react().useRef)(false);
+  const lastXRef = (0, _react().useRef)(0);
+  const frameRef = (0, _react().useRef)(null);
   const scrollIntoView = (0, _react().useCallback)(immediate => {
     if (!scrollable || currentName == null) return;
-    const layout = layoutMap.current.get(currentName);
-    const containerWidth = navContainerWidthRef.current;
-    if (!layout || !containerWidth) return;
-    const contentWidth = navContentWidthRef.current;
-    const targetX = layout.x - (containerWidth - layout.width) / 2;
-    const maxScroll = Math.max(contentWidth - containerWidth, 0);
-    const clampedX = Math.max(0, Math.min(targetX, maxScroll));
-    if (maxScroll <= 0) return;
-    if (Math.abs(clampedX - navLastScrollXRef.current) < 1) return;
-    if (navScrollAnimRef.current) {
-      navScrollAnimRef.current.stop();
-      navScrollAnimRef.current = null;
-    }
-    cancelFrame(navAutoScrollFrameRef.current);
-    navAutoScrollFrameRef.current = null;
+    const lay = layoutMap.current.get(currentName);
+    const ctrW = navContainerWidthRef.current;
+    if (!lay || !ctrW) return;
+    const cntW = navContentWidthRef.current;
+    const tX = lay.x - (ctrW - lay.width) / 2;
+    const maxS = Math.max(cntW - ctrW, 0);
+    const clampX = Math.max(0, Math.min(tX, maxS));
+    if (maxS <= 0 || Math.abs(clampX - lastXRef.current) < 1) return;
+    navAnimRef.current?.stop();
+    navAnimRef.current = null;
+    cancelFrame(frameRef.current);
+    frameRef.current = null;
     if (immediate || !animated) {
-      navAutoScrollingRef.current = true;
-      navScrollX.setValue(clampedX);
-      navAutoScrollFrameRef.current = requestFrame(() => {
-        navAutoScrollFrameRef.current = null;
-        navAutoScrollingRef.current = false;
+      autoScrRef.current = true;
+      navX.setValue(clampX);
+      frameRef.current = requestFrame(() => {
+        frameRef.current = null;
+        autoScrRef.current = false;
       });
       return;
     }
-    navScrollX.setValue(navLastScrollXRef.current);
-    navAutoScrollingRef.current = true;
-    navScrollAnimRef.current = _reactNative().Animated.timing(navScrollX, {
-      toValue: clampedX,
+    navX.setValue(lastXRef.current);
+    autoScrRef.current = true;
+    navAnimRef.current = _reactNative().Animated.timing(navX, {
+      toValue: clampX,
       duration: resolvedDuration,
       useNativeDriver: false,
       isInteraction: false
     });
-    navScrollAnimRef.current.start(({
+    navAnimRef.current.start(({
       finished
     }) => {
-      navScrollAnimRef.current = null;
-      navAutoScrollingRef.current = false;
-      if (!finished) return;
-      navLastScrollXRef.current = clampedX;
+      navAnimRef.current = null;
+      autoScrRef.current = false;
+      if (finished) lastXRef.current = clampX;
     });
-  }, [animated, currentName, navScrollX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
+  }, [animated, currentName, navX, resolvedDuration, scrollable, layoutMap, navContainerWidthRef, navContentWidthRef]);
   (0, _react().useEffect)(() => {
     if (!scrollable) return;
-    const listenerId = navScrollX.addListener(({
+    const id = navX.addListener(({
       value
     }) => {
-      const prev = navLastScrollXRef.current;
-      navLastScrollXRef.current = value;
-      if (Math.abs(value - prev) < 0.5) return;
-      navScrollRef.current?.scrollTo({
+      const prev = lastXRef.current;
+      lastXRef.current = value;
+      if (Math.abs(value - prev) >= 0.5) navScrRef.current?.scrollTo({
         x: value,
         y: 0,
         animated: false
       });
     });
-    return () => {
-      navScrollX.removeListener(listenerId);
-    };
-  }, [navScrollX, scrollable]);
-  (0, _react().useEffect)(() => {
-    return () => {
-      cancelFrame(navAutoScrollFrameRef.current);
-      navAutoScrollFrameRef.current = null;
-    };
+    return () => navX.removeListener(id);
+  }, [navX, scrollable]);
+  (0, _react().useEffect)(() => () => {
+    cancelFrame(frameRef.current);
+    frameRef.current = null;
   }, []);
-  const handleNavScrollBeginDrag = (0, _react().useCallback)(event => {
-    navAutoScrollingRef.current = false;
-    if (navScrollAnimRef.current) {
-      navScrollAnimRef.current.stop();
-      navScrollAnimRef.current = null;
-    }
-    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  const onNavBeginDrag = (0, _react().useCallback)(e => {
+    autoScrRef.current = false;
+    navAnimRef.current?.stop();
+    navAnimRef.current = null;
+    lastXRef.current = e.nativeEvent.contentOffset.x;
   }, []);
-  const handleNavScroll = (0, _react().useCallback)(event => {
-    if (navAutoScrollingRef.current) return;
-    navLastScrollXRef.current = event.nativeEvent.contentOffset.x;
+  const onNavScroll = (0, _react().useCallback)(e => {
+    if (autoScrRef.current) return;
+    lastXRef.current = e.nativeEvent.contentOffset.x;
   }, []);
   return {
-    navScrollRef,
-    navScrollX,
+    navScrollRef: navScrRef,
+    navScrollX: navX,
     scrollIntoView,
-    handleNavScrollBeginDrag,
-    handleNavScroll
+    handleNavScrollBeginDrag: onNavBeginDrag,
+    handleNavScroll: onNavScroll
   };
 };
 const TabBarItemInner = ({
@@ -221,45 +210,45 @@ const TabBarItemInner = ({
   onLayout,
   isLast
 }) => {
-  const isDisabled = !!pane.disabled;
-  const ariaPress = (0, _hooks.useAriaPress)({
-    onPress: event => onSelect(pane, pane.index, event),
+  const dis = !!pane.disabled;
+  const aria = (0, _hooks.useAriaPress)({
+    onPress: e => onSelect(pane, pane.index, e),
     extraProps: {
       accessibilityRole: 'tab',
       accessibilityState: {
         selected: isActive,
-        disabled: isDisabled
+        disabled: dis
       },
       testID: `rv-tabs-item-${pane.name}`
     }
   });
-  const isCapsule = type === 'capsule';
-  const isJumbo = type === 'jumbo';
-  const isCard = type === 'card';
-  const renderTitle = (0, _validate.isFunction)(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
-  const renderDescription = (0, _validate.isFunction)(pane.description) ? pane.description(isActive) : pane.description;
-  const activeTitleColor = titleActiveColor ?? (isCard ? tokens.colors.cardActiveText : isCapsule ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
-  const inactiveTitleColor = titleInactiveColor ?? (isCard ? color ?? tokens.colors.cardBorder : isCapsule ? tokens.colors.capsuleText : tokens.colors.text);
-  const textColor = pane.disabled ? tokens.colors.textDisabled : isActive ? activeTitleColor : inactiveTitleColor;
-  const descriptionColor = isDisabled ? tokens.colors.textDisabled : isJumbo ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
-  const shouldFlex = !scrollable && (align !== 'start' || isCard);
-  const isCompactType = isCard || isJumbo || isCapsule;
-  const horizontalPadding = isCompactType ? 0 : tokens.tabList.paddingHorizontal;
-  const verticalPadding = isCompactType ? 0 : tokens.tabList.paddingVertical;
-  const labelWrapperStyles = [S.lblW, isJumbo && S.lblWJ, isCard && S.cardLbl, isCard && {
+  const isCap = type === 'capsule';
+  const isJ = type === 'jumbo';
+  const isC = type === 'card';
+  const rTitle = (0, _validate.isFunction)(pane.title) ? pane.title(isActive) : pane.title ?? pane.name;
+  const rDesc = (0, _validate.isFunction)(pane.description) ? pane.description(isActive) : pane.description;
+  const actClr = titleActiveColor ?? (isC ? tokens.colors.cardActiveText : isCap ? tokens.colors.capsuleActiveText : color ?? tokens.colors.textActive);
+  const inactClr = titleInactiveColor ?? (isC ? color ?? tokens.colors.cardBorder : isCap ? tokens.colors.capsuleText : tokens.colors.text);
+  const txtClr = pane.disabled ? tokens.colors.textDisabled : isActive ? actClr : inactClr;
+  const descClr = dis ? tokens.colors.textDisabled : isJ ? isActive ? tokens.colors.jumboDescriptionActive : tokens.colors.jumboDescription : isActive ? tokens.colors.descriptionActive : tokens.colors.description;
+  const flex = !scrollable && (align !== 'start' || isC);
+  const compact = isC || isJ || isCap;
+  const hPad = compact ? 0 : tokens.tabList.paddingHorizontal;
+  const vPad = compact ? 0 : tokens.tabList.paddingVertical;
+  const lblWrap = [S.lblW, isJ && S.lblWJ, isC && S.cardLbl, isC && {
     paddingHorizontal: tokens.card.paddingHorizontal,
     paddingVertical: tokens.card.paddingVertical
-  }, isCapsule && {
+  }, isCap && {
     flex: 1,
     alignSelf: 'stretch',
     paddingHorizontal: tokens.capsule.paddingHorizontal,
     paddingVertical: tokens.capsule.paddingVertical
-  }, isJumbo && {
+  }, isJ && {
     paddingHorizontal: tokens.jumbo.paddingHorizontal,
     paddingVertical: tokens.jumbo.paddingVertical,
     alignItems: 'center'
   }].filter(Boolean);
-  const labelTextWrapperStyles = isCapsule ? [{
+  const lblTxtWrap = isCap ? [{
     flex: 1,
     alignSelf: 'stretch',
     justifyContent: 'center',
@@ -267,63 +256,64 @@ const TabBarItemInner = ({
     borderRadius: tokens.capsule.radius,
     backgroundColor: isActive ? color ?? tokens.colors.capsuleActiveBackground : tokens.colors.capsuleBackground
   }] : null;
-  const titleTextStyle = [S.title, {
-    color: textColor,
-    fontSize: isJumbo ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
+  const titleStyleArr = [S.title, {
+    color: txtClr,
+    fontFamily: tokens.typography.fontFamily,
+    fontSize: isJ ? tokens.typography.jumboTitleSize : tokens.typography.titleSize,
     fontWeight: isActive ? tokens.typography.titleActiveWeight : tokens.typography.titleWeight,
-    lineHeight: isJumbo ? tokens.typography.jumboLineHeight : undefined,
+    lineHeight: isJ ? tokens.typography.jumboLineHeight : undefined,
     textAlign: 'center'
-  }, ellipsis && !isJumbo ? S.ellipsis : null, titleStyle];
-  const titleNode = /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: titleTextStyle,
-    numberOfLines: ellipsis && !isJumbo ? 1 : undefined
-  }, renderTitle);
-  const descriptionMarginTop = isJumbo ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
-  const descriptionJumboStyle = isJumbo ? {
+  }, ellipsis && !isJ ? S.ellipsis : null, titleStyle];
+  const descMT = isJ ? tokens.spacing.jumboDescriptionMarginTop : tokens.spacing.descriptionMarginTop;
+  const descJStyle = isJ ? {
     backgroundColor: isActive ? tokens.colors.jumboDescriptionActiveBackground : tokens.colors.jumboDescriptionBackground,
     paddingHorizontal: tokens.jumbo.descriptionPaddingHorizontal,
     paddingVertical: tokens.jumbo.descriptionPaddingVertical,
     borderRadius: tokens.jumbo.descriptionRadius
   } : null;
-  const descriptionTextStyle = [S.descTxt, {
-    color: descriptionColor,
-    fontSize: tokens.typography.descriptionSize,
-    marginTop: descriptionMarginTop,
-    textAlign: 'center'
-  }, descriptionJumboStyle, descriptionStyle];
-  const descriptionViewStyle = [{
-    marginTop: descriptionMarginTop,
-    alignItems: 'center'
-  }, descriptionJumboStyle];
-  const handleLayout = (0, _react().useCallback)(event => {
-    onLayout(pane.name, event);
-  }, [onLayout, pane.name]);
-  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, ariaPress.interactionProps, {
-    onLayout: handleLayout,
-    style: [S.tabI, shouldFlex ? S.flexI : null, {
-      paddingHorizontal: horizontalPadding,
-      paddingVertical: verticalPadding
-    }, isCard ? {
+  const onLay = (0, _react().useCallback)(e => onLayout(pane.name, e), [onLayout, pane.name]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, aria.interactionProps, {
+    onLayout: onLay,
+    style: [S.tabI, flex ? S.flexI : null, {
+      paddingHorizontal: hPad,
+      paddingVertical: vPad
+    }, isC ? {
       backgroundColor: isActive ? color ?? tokens.colors.cardActiveBackground : tokens.colors.cardBackground
     } : null, tabStyle]
   }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: labelWrapperStyles
-  }, labelTextWrapperStyles ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: labelTextWrapperStyles
-  }, titleNode) : titleNode, (0, _validate.isRenderable)(renderDescription) && ((0, _validate.isText)(renderDescription) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: descriptionTextStyle
-  }, renderDescription) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: descriptionViewStyle
-  }, renderDescription)), (0, _validate.isRenderable)(pane.badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: lblWrap
+  }, lblTxtWrap ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: lblTxtWrap
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: titleStyleArr,
+    numberOfLines: ellipsis && !isJ ? 1 : undefined
+  }, rTitle)) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: titleStyleArr,
+    numberOfLines: ellipsis && !isJ ? 1 : undefined
+  }, rTitle), (0, _validate.isRenderable)(rDesc) && ((0, _validate.isText)(rDesc) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [S.descTxt, {
+      color: descClr,
+      fontFamily: tokens.typography.fontFamily,
+      fontSize: tokens.typography.descriptionSize,
+      marginTop: descMT,
+      textAlign: 'center'
+    }, descJStyle, descriptionStyle]
+  }, rDesc) : /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [{
+      marginTop: descMT,
+      alignItems: 'center'
+    }, descJStyle]
+  }, rDesc)), (0, _validate.isRenderable)(pane.badge) && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: {
       marginTop: tokens.spacing.badgeMarginTop
     }
   }, (0, _validate.isText)(pane.badge) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
     style: {
       color: tokens.colors.badgeText,
+      fontFamily: tokens.typography.fontFamily,
       fontSize: tokens.typography.badgeTextSize
     }
-  }, pane.badge) : pane.badge)), isCard && !isLast && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  }, pane.badge) : pane.badge)), isC && !isLast && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: (0, _hairline.createHairlineView)({
       position: 'right',
       color: color ?? tokens.colors.cardBorder,
@@ -398,7 +388,7 @@ const TabsBaseInner = (props, ref) => {
       _react().Children.forEach(nodes, node => {
         if (! /*#__PURE__*/(0, _react().isValidElement)(node)) return;
         const element = node;
-        if (element.type === _react().Fragment) {
+        if (element.type === _react().default.Fragment) {
           walk(element.props.children);
           return;
         }

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

@@ -10,7 +10,8 @@ const createTokens = foundations => {
     palette,
     spacing,
     fontSize,
-    radii
+    radii,
+    typography
   } = foundations;
   const onPrimary = palette.primary.foreground ?? '#ffffff';
   return {
@@ -62,6 +63,7 @@ const createTokens = foundations => {
       background: '#ffffff'
     },
     typography: {
+      fontFamily: typography.fontFamily,
       titleSize: fontSize.sm,
       titleWeight: foundations.typography.weight.medium,
       titleActiveWeight: foundations.typography.weight.semiBold,

package/dist/cjs/components/tag/Tag.js

@@ -35,14 +35,14 @@ const TagImpl = props => {
   const {
     tokensOverride,
     children,
-    type: typeProp,
-    size: sizeProp,
-    plain: plainProp,
-    round: roundProp,
-    mark: markProp,
+    type: typeP,
+    size: sizeP,
+    plain: plainP,
+    round: roundP,
+    mark: markP,
     color,
     textColor,
-    show: showProp,
+    show: showP,
     closeable,
     closeIcon,
     onClose,
@@ -53,20 +53,20 @@ const TagImpl = props => {
   } = props;
   const tokens = (0, _tokens.useTagTokens)(tokensOverride);
   const dir = (0, _useDirection.useDirection)();
-  const type = typeProp ?? tokens.defaults.type;
-  const size = sizeProp ?? tokens.defaults.size;
-  const plain = plainProp ?? tokens.defaults.plain;
-  const round = roundProp ?? tokens.defaults.round;
-  const mark = markProp ?? tokens.defaults.mark;
-  const show = showProp ?? tokens.defaults.show;
+  const type = typeP ?? tokens.defaults.type;
+  const size = sizeP ?? tokens.defaults.size;
+  const plain = plainP ?? tokens.defaults.plain;
+  const round = roundP ?? tokens.defaults.round;
+  const mark = markP ?? tokens.defaults.mark;
+  const show = showP ?? tokens.defaults.show;
   if (!show) return null;
   const tone = tokens.colors.toneMap[type] ?? tokens.colors.toneMap.default;
-  const sizeTokens = tokens.sizing.sizes[size];
-  const backgroundColor = plain ? tokens.colors.plainBackground : color ?? tone.background;
-  const resolvedTextColor = textColor ?? (plain ? color ?? tone.background : tone.text);
-  const borderColor = plain ? color ?? tone.background : 'transparent';
-  const borderRadius = round ? tokens.radii.round : sizeTokens.borderRadius;
-  const markRadii = mark ? dir === 'rtl' ? {
+  const szTok = tokens.sizing.sizes[size];
+  const bgClr = plain ? tokens.colors.plainBackground : color ?? tone.background;
+  const txtClr = textColor ?? (plain ? color ?? tone.background : tone.text);
+  const borderClr = plain ? color ?? tone.background : 'transparent';
+  const radius = round ? tokens.radii.round : szTok.borderRadius;
+  const markR = mark ? dir === 'rtl' ? {
     borderTopRightRadius: tokens.radii.markLeading,
     borderBottomRightRadius: tokens.radii.markLeading,
     borderTopLeftRadius: tokens.radii.round,
@@ -77,17 +77,17 @@ const TagImpl = props => {
     borderTopRightRadius: tokens.radii.round,
     borderBottomRightRadius: tokens.radii.round
   } : null;
-  const resolvedRadius = mark ? tokens.radii.round : borderRadius;
-  const containerStyle = [tokens.layout.container, {
-    backgroundColor,
-    paddingHorizontal: sizeTokens.paddingHorizontal,
-    paddingVertical: sizeTokens.paddingVertical,
-    borderRadius
-  }, markRadii, style];
+  const resRadius = mark ? tokens.radii.round : radius;
+  const ctrStyle = [tokens.layout.container, {
+    backgroundColor: bgClr,
+    paddingHorizontal: szTok.paddingHorizontal,
+    paddingVertical: szTok.paddingVertical,
+    borderRadius: radius
+  }, markR, style];
   const label = !(0, _validate.isRenderable)(children) ? null : (0, _utils.renderTextOrNode)(children, [{
-    color: resolvedTextColor,
-    fontSize: sizeTokens.fontSize,
-    lineHeight: sizeTokens.lineHeight,
+    color: txtClr,
+    fontSize: szTok.fontSize,
+    lineHeight: szTok.lineHeight,
     fontFamily: tokens.typography.fontFamily,
     fontWeight: tokens.typography.fontWeight
   }, textStyle].filter(Boolean));
@@ -97,33 +97,33 @@ const TagImpl = props => {
     style: [tokens.layout.close, {
       marginLeft: tokens.spacing.closeGap
     }],
-    onPress: event => {
-      event.stopPropagation?.();
+    onPress: e => {
+      e.stopPropagation?.();
       onClose?.();
     }
-  }, (0, _utils.isFunction)(closeIcon) ? closeIcon(resolvedTextColor, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
-    color: resolvedTextColor,
+  }, (0, _utils.isFunction)(closeIcon) ? closeIcon(txtClr, tokens.sizing.closeIconSize) : closeIcon ?? /*#__PURE__*/_react().default.createElement(_reactNativeSystemIcon().Close, {
+    color: txtClr,
     size: tokens.sizing.closeIconSize
   }));
-  const hairlineOverlay = plain ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+  const hlOverlay = plain ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
     style: (0, _utils.createHairlineView)({
       position: 'all',
-      color: borderColor,
-      borderRadius: resolvedRadius
+      color: borderClr,
+      borderRadius: resRadius
     })
   }) : null;
-  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, label, close, hairlineOverlay);
+  const content = /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, label, close, hlOverlay);
   if (onPress) return /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({
     accessibilityRole: "button",
     onPress: onPress,
     style: ({
       pressed
-    }) => [containerStyle, pressed && {
+    }) => [ctrStyle, pressed && {
       opacity: tokens.defaults.pressedOpacity
     }]
   }, rest), content);
   return /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
-    style: containerStyle
+    style: ctrStyle
   }, rest), content);
 };
 const Tag = exports.Tag = /*#__PURE__*/_react().default.memo(TagImpl);

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

@@ -219,8 +219,9 @@ const ToastContentImpl = props => {
   const messageStyle = (0, _react().useMemo)(() => ({
     color: colors.text,
     fontSize: tokens.fontSize,
-    lineHeight: tokens.lineHeight
-  }), [colors.text, tokens.fontSize, tokens.lineHeight]);
+    lineHeight: tokens.lineHeight,
+    fontFamily: tokens.fontFamily
+  }), [colors.text, tokens.fontSize, tokens.fontFamily, tokens.lineHeight]);
   const isTextOnly = type === 'info' && !iconNode;
   const baseStyle = (0, _react().useMemo)(() => isTextOnly ? {
     minWidth: tokens.textMinWidth,

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

@@ -22,6 +22,7 @@ const createToastTokens = foundations => {
     },
     fontSize: foundations.fontSize.sm,
     lineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
+    fontFamily: foundations.typography.fontFamily,
     radius: foundations.radii.md,
     gap: foundations.spacing.sm,
     iconSize: 36,