@momo-kits/foundation 0.169.4-beta.7 → 0.169.4

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -46,9 +46,6 @@ export const styles = StyleSheet.create({
     width: TabBarMetrics.ctaSize,
     height: TabBarMetrics.ctaSize,
     borderRadius: TabBarMetrics.ctaSize / 2,
-    // Figma Icon Button border: white 60% hairline
-    borderWidth: 1,
-    borderColor: `rgba(255, 255, 255, ${TabBarMetrics.ctaBorderOpacity})`,
     alignItems: 'center',
     justifyContent: 'center',
   },

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,7 +17,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -114,7 +114,7 @@ const CenterAction: React.FC<{
         </Animated.View>
         <View style={styles.ctaLabel}>
           {fixedFontScale ? (
-            <CappedScaleText>{labelText}</CappedScaleText>
+            <FixedScaleText>{labelText}</FixedScaleText>
           ) : (
             labelText
           )}
@@ -194,17 +194,21 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
+  const customContainer = withCta && floatingButton?.container;
+
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      <CurvedContainer
-        width={width}
-        height={TabBarMetrics.height}
-        radius={TabBarMetrics.height / 2}
-        notchCenterX={withCta ? width / 2 : undefined}
-      />
+      {customContainer || (
+        <CurvedContainer
+          width={width}
+          height={TabBarMetrics.height}
+          radius={TabBarMetrics.height / 2}
+          notchCenterX={withCta ? width / 2 : undefined}
+        />
+      )}
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -237,8 +241,6 @@ export default function BottomTabBar(props: Props) {
     window.height,
     insets.left,
     insets.right,
-    state.routes.length,
-    withCta,
   );
 
   return (
@@ -256,7 +258,6 @@ export default function BottomTabBar(props: Props) {
       ]}
     >
       <HorizontalTabBar
-        fixedFontScale
         items={getTabItems(props)}
         width={width}
         floatingButton={floatingButton}

package/Application/BottomTab/CurvedContainer.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import Svg, { Defs, FeGaussianBlur, Filter, Path } from 'react-native-svg';
 import { Colors } from '../../Consts';
 import { ApplicationContext } from '../../Context';
-import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
 
 type Props = {
   width: number;
@@ -137,13 +137,7 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path
-        d={path}
-        fill={theme.colors.background.surface}
-        fillOpacity={TabBarMetrics.backgroundOpacity}
-        stroke={theme.colors.border.default}
-        strokeWidth={1}
-      />
+      <Path d={path} fill={theme.colors.background.surface} />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,10 +10,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { CappedScaleText, TabBarIcon } from './TabBarIcon';
+import { FixedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors } from '../../Consts';
+import { Colors, Spacing } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -98,7 +98,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
         />
       </View>
       {!hideLabel &&
-        (fixedFontScale ? <CappedScaleText>{text}</CappedScaleText> : text)}
+        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
     </>
   );
 };
@@ -147,7 +147,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: TabBarMetrics.itemIconLabelGap,
+    gap: Spacing.XXS,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,
@@ -166,11 +166,6 @@ const styles = StyleSheet.create({
   },
   labelBox: {
     alignSelf: 'stretch',
-    // fixed to the design line height so a capped-scale label overflows downward and the
-    // icon above it stays put
-    height: TabBarMetrics.labelHeight,
-    justifyContent: 'flex-start',
-    overflow: 'visible',
   },
   label: {
     textAlign: 'center',

package/Application/BottomTab/DuoRailTabBar.tsx

@@ -13,7 +13,7 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { CappedScaleText } from './TabBarIcon';
+import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -116,7 +116,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <CappedScaleText>
+        <FixedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
@@ -124,7 +124,7 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
           >
             {floatingButton.label}
           </Text>
-        </CappedScaleText>
+        </FixedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/DuoTabBar.tsx

@@ -3,11 +3,7 @@ import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
 import { useScreenLayout } from '../../Layout/utils';
 import { FloatingButtonProps } from '../types';
-import {
-  getSystemIndicatorHeight,
-  hasCenterAction,
-  HorizontalTabBar,
-} from './BottomTabBar';
+import { getSystemIndicatorHeight, HorizontalTabBar } from './BottomTabBar';
 import { getHorizontalBarWidth, TabBarMetrics } from './metrics';
 import { getTabItems } from './tabItems';
 import { DuoRailTabBar } from './DuoRailTabBar';
@@ -38,7 +34,6 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
   const { insets } = useScreenLayout();
   const { width, height } = useWindowDimensions();
   const { floatingButton, activeTintColor, inactiveTintColor } = props;
-  const tabItems = getTabItems(props);
 
   return (
     <View
@@ -50,15 +45,8 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
     >
       <HorizontalTabBar
         fixedFontScale
-        items={tabItems}
-        width={getHorizontalBarWidth(
-          width,
-          height,
-          insets.left,
-          insets.right,
-          tabItems.length,
-          hasCenterAction(floatingButton, tabItems.length),
-        )}
+        items={getTabItems(props)}
+        width={getHorizontalBarWidth(width, height, insets.left, insets.right)}
         floatingButton={floatingButton}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}

package/Application/BottomTab/TabBarIcon.tsx

@@ -71,30 +71,6 @@ export const FixedScaleText: React.FC<{ children: React.ReactNode }> = ({
   );
 };
 
-// the tab labels follow the OS/host font scale but never grow past this, so the fixed-height
-// container and the notch stay aligned
-const TAB_LABEL_MAX_SCALE = 1.2;
-
-/**
- * caps the label scale at `TAB_LABEL_MAX_SCALE`: it keeps following the host/OS font scale but
- * stops growing past 1.2× so it fits the fixed bar geometry
- */
-export const CappedScaleText: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const context = useContext<any>(MiniAppContext);
-  return (
-    <MiniAppContext.Provider
-      value={{
-        ...context,
-        fontScale: { ...context?.fontScale, maxScaleRate: TAB_LABEL_MAX_SCALE },
-      }}
-    >
-      {children}
-    </MiniAppContext.Provider>
-  );
-};
-
 /**
  * numbers use the error color, text the warning color (Figma Badge round numeric / text)
  */

package/Application/BottomTab/metrics.ts

@@ -9,36 +9,23 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * - vertical: iPhone Duo rail, center action under the container
  */
 const TabBarMetrics = {
-  height: 60,
+  height: 68,
   margin: Spacing.S,
-  paddingVertical: Spacing.XS,
+  paddingVertical: Spacing.S,
   paddingHorizontal: Spacing.M,
-  itemGap: 1,
-  // gap between the icon slot and the label inside a tab (Figma: none)
-  itemIconLabelGap: 0,
-  // .Nav/Background: no backdrop blur, so use the Figma Blur=Off spec (opacity 95%, no blur) plus the 1px
-  // border — nearly solid, matching the frosted sample; surface keeps dark-mode support
-  backgroundOpacity: 0.95,
-  // white 60% hairline around the center action button (Figma Icon Button border)
-  ctaBorderOpacity: 0.6,
+  itemGap: Spacing.XS,
   iconSize: 24,
   // active indicator behind the icon: 24 icon + XS·M padding
   indicatorPaddingVertical: Spacing.XS,
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  // label_s_medium line height: the label box keeps this height so a scaled label grows
-  // downward instead of pushing the icon up
-  labelHeight: 18,
   // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
   // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short
   // side, centered; phones and folded outer displays fill the window
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
-  // a 2-tab bar doesn't stretch to the full width: each item is this fixed width and the bar is
-  // sized to its content, centered (Figma Navigation · 2 Tab: item 100, bar ~225)
-  twoTabItemWidth: 100,
   ctaSlotWidth: 92,
   ctaSize: 48,
   // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
@@ -149,17 +136,7 @@ const getHorizontalBarWidth = (
   height: number,
   insetLeft: number,
   insetRight: number,
-  itemCount: number,
-  hasCta: boolean,
 ) => {
-  // 2 tabs (no center action) stay content-sized and centered instead of filling the window
-  if (itemCount === 2 && !hasCta) {
-    return (
-      TabBarMetrics.twoTabItemWidth * 2 +
-      TabBarMetrics.paddingHorizontal * 2 +
-      TabBarMetrics.itemGap
-    );
-  }
   const shortSide = Math.min(width, height);
   if (shortSide >= TabBarMetrics.foldableMinShortSide) {
     return shortSide * TabBarMetrics.foldableWidthRatio;

package/Application/__tests__/modalLayout.test.ts

@@ -16,10 +16,10 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(342);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
+    expect(layout.popup.radius).toBe(24);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.sheet.maxHeight).toBeUndefined();
-    expect(layout.sheet.radius).toBe(12);
+    expect(layout.sheet.radius).toBe(24);
     expect(layout.scrimOpacity).toBe(0.6);
   });
 
@@ -33,7 +33,7 @@ describe('getModalLayout', () => {
     expect(layout.isFoldable).toBe(false);
     expect(layout.popup.width).toBe(844 - 48);
     expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
+    expect(layout.popup.radius).toBe(24);
     expect(layout.sheet.width).toBeUndefined();
     expect(layout.scrimOpacity).toBe(0.6);
   });

package/Application/modalLayout.ts

@@ -112,9 +112,9 @@ const getModalLayout = ({
         minWidth: popupWidth,
         maxWidth: popupWidth,
         margin: Spacing.XL,
-        radius: Radius.L,
+        radius: Radius.XL,
       },
-      sheet: { margin: 0, radius: Radius.M },
+      sheet: { margin: 0, radius: Radius.XL },
       scrimOpacity: SCRIM_OPACITY,
     };
   }

package/Application/types.tabs.ts

@@ -36,6 +36,7 @@ export type BottomTabProps = {
 };
 
 export type FloatingButtonProps = {
+  container?: React.ReactNode;
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;

package/Popup/PopupNotify.tsx

@@ -183,18 +183,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const body = (
     <>
       {!!image && (
-        <Image
-          source={{ uri: image }}
-          style={[
-            styles.image,
-            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
-          ]}
-        />
+        <Image source={{ uri: image }} style={styles.image} />
       )}
       <View style={[styles.content, isFoldable && styles.shrink]}>
         <Text
           typography={'header_default_bold'}
-          numberOfLines={3}
+          numberOfLines={2}
           accessibilityLabel={'title_popup_notify'}
           // keeps the title clear of the close button on a text only popup
           style={
@@ -250,6 +244,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           width: popupWidth,
           maxHeight,
         },
+        styles.card,
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
@@ -262,9 +257,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 
 const styles = StyleSheet.create({
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
+  // clips the image and content to the card radius
+  card: { overflow: 'hidden' },
   image: {
     aspectRatio: 1.7777,
-    overflow: 'hidden',
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/Text/utils.ts

@@ -9,18 +9,13 @@ const MAX_DEVICE_SCALE = 5;
 const useScaleSize = (size: number, scaleRate?: number) => {
   const { width } = useWindowDimensions();
   const context = useContext<any>(MiniAppContext);
-  // opt-in ceiling: when set (arg or context), the final size never exceeds size × capRate,
-  // in both the mini-app userScaleRate path and the OS path. Undefined keeps the old behavior.
-  const capRate = scaleRate ?? context?.fontScale?.maxScaleRate;
-  const cap = (scaled: number) =>
-    capRate != null ? Math.min(scaled, size * capRate) : scaled;
   if (context?.fontScale?.useOSScaleRate === false) {
-    return cap(size * (context.fontScale.userScaleRate ?? 1));
+    return size * (context.fontScale.userScaleRate ?? 1);
   }
   const fontScale = PixelRatio.getFontScale();
   const deviceScale = width / DEFAULT_SCREEN_SIZE;
 
-  const maxScaleRate = capRate ?? MAX_FONT_SCALE;
+  const maxScaleRate = scaleRate ?? MAX_FONT_SCALE;
 
   let fontSizeDeviceScale = size;
   let fontSizeOSScale = size;
@@ -39,7 +34,7 @@ const useScaleSize = (size: number, scaleRate?: number) => {
     );
   }
 
-  return cap(Math.max(fontSizeDeviceScale, fontSizeOSScale));
+  return Math.max(fontSizeDeviceScale, fontSizeOSScale);
 };
 
 const scaleSize = (size: number) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.4-beta.7",
+    "version": "0.169.4",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},