@momo-kits/foundation 0.169.5-beta.1 → 0.169.6-beta.1

package/Application/BottomSheet.tsx

@@ -18,7 +18,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
-import { AdoptionProbe } from './KitAdoption';
 import {
   useBottomSheetLayout,
   useDuoKeyboardLift,
@@ -174,16 +173,11 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <AdoptionProbe
-      screenName={Screen?.name || 'Invalid'}
-      navigation={props.navigation}
-    >
-      <Screen
-        {...props}
-        {...props.route.params}
-        onRequestClose={onRequestClose}
-      />
-    </AdoptionProbe>
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
   );
 
   return (

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -2,6 +2,20 @@ import { StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { CTA_SHADOW, TabBarMetrics } from './metrics';
 
+const ITEM_HEIGHT =
+  TabBarMetrics.indicatorHeight +
+  TabBarMetrics.itemIconLabelGap +
+  TabBarMetrics.labelHeight;
+const CONTENT_HEIGHT = TabBarMetrics.height - 2 * TabBarMetrics.paddingVertical;
+// the items are centered in the content, so their label starts this far below the content top
+const ITEM_LABEL_TOP =
+  (CONTENT_HEIGHT - ITEM_HEIGHT) / 2 +
+  TabBarMetrics.indicatorHeight +
+  TabBarMetrics.itemIconLabelGap;
+// the center action column is placed so its label starts on the same line as the tab labels
+const CTA_TOP =
+  ITEM_LABEL_TOP - TabBarMetrics.ctaLabelGap - TabBarMetrics.ctaSize;
+
 export const styles = StyleSheet.create({
   bar: {
     position: 'absolute',
@@ -37,7 +51,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
-    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
+    top: CTA_TOP,
     alignItems: 'center',
     gap: TabBarMetrics.ctaLabelGap,
   },
@@ -46,6 +60,9 @@ 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,6 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -68,8 +67,7 @@ const useCenterActionPress = () => {
  */
 const CenterAction: React.FC<{
   floatingButton: FloatingButtonProps;
-  fixedFontScale?: boolean;
-}> = ({ floatingButton, fixedFontScale }) => {
+}> = ({ floatingButton }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
@@ -113,11 +111,7 @@ const CenterAction: React.FC<{
           )}
         </Animated.View>
         <View style={styles.ctaLabel}>
-          {fixedFontScale ? (
-            <FixedScaleText>{labelText}</FixedScaleText>
-          ) : (
-            labelText
-          )}
+          {labelText}
           {labelContent && (
             <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
               {labelContent}
@@ -139,14 +133,12 @@ const HorizontalTabBar: React.FC<{
   activeTintColor: string;
   inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
-  fixedFontScale?: boolean;
 }> = ({
   items,
   width,
   activeTintColor,
   inactiveTintColor,
   floatingButton,
-  fixedFontScale,
 }) => {
   const withCta = hasCenterAction(floatingButton, items.length);
   const [layouts, setLayouts] = useState<
@@ -173,7 +165,6 @@ const HorizontalTabBar: React.FC<{
         onLongPress={item.onLongPress}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
-        fixedFontScale={fixedFontScale}
       />
     ));
 
@@ -183,10 +174,7 @@ const HorizontalTabBar: React.FC<{
       return (
         <>
           {renderItems(items.slice(0, middle))}
-          <CenterAction
-            floatingButton={floatingButton}
-            fixedFontScale={fixedFontScale}
-          />
+          <CenterAction floatingButton={floatingButton} />
           {renderItems(items.slice(middle))}
         </>
       );
@@ -194,21 +182,17 @@ const HorizontalTabBar: React.FC<{
     return renderItems(items);
   };
 
-  const customContainer = withCta && floatingButton?.container;
-
   return (
     <View
       style={[styles.container, { width }]}
       accessibilityLabel={'bottom_tab_bar'}
     >
-      {customContainer || (
-        <CurvedContainer
-          width={width}
-          height={TabBarMetrics.height}
-          radius={TabBarMetrics.height / 2}
-          notchCenterX={withCta ? width / 2 : undefined}
-        />
-      )}
+      <CurvedContainer
+        width={width}
+        height={TabBarMetrics.height}
+        radius={TabBarMetrics.height / 2}
+        notchCenterX={withCta ? width / 2 : undefined}
+      />
       <View style={styles.content}>
         <ActiveIndicator
           axis={'x'}
@@ -241,6 +225,8 @@ export default function BottomTabBar(props: Props) {
     window.height,
     insets.left,
     insets.right,
+    state.routes.length,
+    withCta,
   );
 
   return (

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 } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH, TabBarMetrics } from './metrics';
 
 type Props = {
   width: number;
@@ -137,7 +137,13 @@ const CurvedContainer: React.FC<Props> = ({
           filter={'url(#keyShadow)'}
         />
       )}
-      <Path d={path} fill={theme.colors.background.surface} />
+      <Path
+        d={path}
+        fill={theme.colors.background.surface}
+        fillOpacity={TabBarMetrics.backgroundOpacity}
+        stroke={theme.colors.border.default}
+        strokeWidth={1}
+      />
     </Svg>
   );
 };

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,10 +10,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { FixedScaleText, TabBarIcon } from './TabBarIcon';
+import { TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
-import { Colors, Spacing } from '../../Consts';
+import { Colors } from '../../Consts';
 import { TabBarMetrics, TabBarMotion } from './metrics';
 
 type IconRenderer = (props: {
@@ -31,8 +31,6 @@ type TabItemContentProps = {
   badge?: string | number;
   // rail item (.Nav/Duo/Item) instead of the horizontal one (.Nav/itemTab)
   vertical?: boolean;
-  // keep the label at its design size, the Duo displays otherwise scale it up
-  fixedFontScale?: boolean;
   hideLabel?: boolean;
 };
 
@@ -48,7 +46,6 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
   icon,
   badge,
   vertical,
-  fixedFontScale,
   hideLabel,
 }) => {
   const progress = useSharedValue(focused ? 1 : 0);
@@ -97,8 +94,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
           renderIcon={icon}
         />
       </View>
-      {!hideLabel &&
-        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
+      {!hideLabel && text}
     </>
   );
 };
@@ -147,7 +143,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: Spacing.XXS,
+    gap: TabBarMetrics.itemIconLabelGap,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,
@@ -166,6 +162,11 @@ 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,6 @@ import { TabItemContent } from './CustomBottomTabItem';
 import { CurvedContainer } from './CurvedContainer';
 import { TabBarMetrics } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
-import { FixedScaleText } from './TabBarIcon';
 import { usePressLift } from './usePressLift';
 import { ActiveIndicator } from './ActiveIndicator';
 import {
@@ -76,7 +75,6 @@ const Rail: React.FC<{
       >
         <TabItemContent
           vertical
-          fixedFontScale
           label={item.label}
           focused={item.focused}
           icon={item.icon}
@@ -116,7 +114,6 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
         <CtaIcon icon={floatingButton.icon} />
       </Animated.View>
       <View style={styles.railCtaLabel}>
-        <FixedScaleText>
           <Text
             numberOfLines={1}
             typography={'label_xs_medium'}
@@ -124,7 +121,6 @@ const RailCenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
           >
             {floatingButton.label}
           </Text>
-        </FixedScaleText>
         {floatingButton.labelContent && (
           <View pointerEvents={'none'} style={styles.railCtaLabelOverlay}>
             {floatingButton.labelContent}

package/Application/BottomTab/DuoTabBar.tsx

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

package/Application/BottomTab/metrics.ts

@@ -9,23 +9,36 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * - vertical: iPhone Duo rail, center action under the container
  */
 const TabBarMetrics = {
-  height: 68,
+  height: 60,
   margin: Spacing.S,
-  paddingVertical: Spacing.S,
+  paddingVertical: Spacing.XS,
   paddingHorizontal: Spacing.M,
-  itemGap: Spacing.XS,
+  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,
   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
@@ -136,7 +149,17 @@ 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/ModalScreen.tsx

@@ -24,7 +24,6 @@ import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
 import { isIPhoneDuo } from './utils';
-import { AdoptionProbe } from './KitAdoption';
 import { useModalLayout } from './modalLayout';
 import { scheduleOnRN } from 'react-native-worklets';
 
@@ -183,12 +182,7 @@ const Modal: React.FC<ModalParams> = props => {
             modalStyle,
           ]}
         >
-          <AdoptionProbe
-            screenName={Component?.name || Component?.type?.name || 'Invalid'}
-            navigation={props.navigation}
-          >
-            <Component {...params} onRequestClose={onDismiss} />
-          </AdoptionProbe>
+          <Component {...params} onRequestClose={onDismiss} />
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>

package/Application/NavigationContainer.tsx

@@ -30,7 +30,6 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { useScreenLayout } from '../Layout';
 import { getHeaderRowOptions } from '../Layout/utils';
 import { ReservedRegionsProvider } from '../Layout/ReservedRegions';
-import { AdoptionBadge } from './KitAdoption';
 
 const Stack = createStackNavigator();
 
@@ -87,7 +86,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
             initialParams={initialParams}
             localize={localize}
           />
-          <AdoptionBadge />
         </MiniAppContext.Provider>
       </ReservedRegionsProvider>
     </SafeAreaProvider>

package/Application/StackScreen.tsx

@@ -8,7 +8,6 @@ import { SwipeBackHaptic } from './Components/SwipeBackHaptic';
 import { useAppState } from './hooks';
 import { createScreenTracking } from './StackScreen.tracking';
 import { TooltipPortalHost, TooltipPortalProvider } from './TooltipPortal';
-import { AdoptionProbe } from './KitAdoption';
 
 const runAfterInteractions = InteractionManager.runAfterInteractions;
 
@@ -284,9 +283,7 @@ const StackScreen: React.FC<any> = props => {
       }}
     >
       <TooltipPortalProvider>
-        <AdoptionProbe screenName={screenName} navigation={props.navigation}>
-          <Component heightHeader={heightHeader} {...data} />
-        </AdoptionProbe>
+        <Component heightHeader={heightHeader} {...data} />
         <TooltipPortalHost />
         <SwipeBackHaptic />
       </TooltipPortalProvider>

package/Application/types.tabs.ts

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

package/package.json

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

package/Application/KitAdoption/AdoptionBadge.tsx

@@ -1,119 +0,0 @@
-import React, { useState, useSyncExternalStore } from 'react';
-import { Share, TouchableOpacity, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-
-import { Colors, Spacing } from '../../Consts';
-import { Text } from '../../Text';
-import { adoptionStore } from './AdoptionStore';
-import { styles } from './styles';
-import type { ScreenSnapshot } from './types';
-
-/** Subscribes a React listener to the adoption store. Stable identity for useSyncExternalStore. */
-const subscribeToStore = (listener: () => void): (() => void) =>
-  adoptionStore.subscribe(listener);
-
-const getLatestSnapshot = (): ScreenSnapshot | undefined =>
-  adoptionStore.getLatest();
-
-const getScreenCount = (): number => adoptionStore.getAll().length;
-
-/** Share of classified nodes that are app-authored kit: K / (K + R + O). */
-const getAdoptionRate = (snapshot: ScreenSnapshot): number => {
-  const { K, R, O } = snapshot.counts;
-  const total = K + R + O;
-  return total === 0 ? 0 : K / total;
-};
-
-const formatSummary = (snapshot: ScreenSnapshot | undefined): string => {
-  if (!snapshot) return 'Kit adoption: chưa có dữ liệu';
-  const { K, R, O } = snapshot.counts;
-  const percent = Math.round(getAdoptionRate(snapshot) * 100);
-  return `Kit ${percent}% · K${K} R${R} O${O}`;
-};
-
-const handleRemeasure = (): void => {
-  adoptionStore.remeasureActive();
-};
-
-const handleShare = (): void => {
-  Share.share({ message: JSON.stringify(adoptionStore.getAll()) }).catch(
-    () => undefined,
-  );
-};
-
-const handleClear = (): void => {
-  adoptionStore.clear();
-};
-
-/**
- * Dev-only floating badge showing the latest screen's kit adoption. Tap to
- * expand actions (re-measure, share JSON, clear). Renders nothing in release builds.
- */
-const AdoptionBadge: React.FC = () => {
-  const insets = useSafeAreaInsets();
-  const [isExpanded, setExpanded] = useState(false);
-  const latest = useSyncExternalStore(subscribeToStore, getLatestSnapshot);
-  const screenCount = useSyncExternalStore(subscribeToStore, getScreenCount);
-
-  if (!__DEV__) return null;
-
-  const handleToggle = (): void => setExpanded(prev => !prev);
-
-  return (
-    <View
-      pointerEvents="box-none"
-      style={[styles.wrapper, { top: insets.top + Spacing.S }]}
-    >
-      <TouchableOpacity
-        accessibilityRole="button"
-        onPress={handleToggle}
-        style={styles.badge}
-      >
-        <Text typography="label_xs_medium" color={Colors.black_01}>
-          {formatSummary(latest)}
-        </Text>
-        {latest ? (
-          <Text typography="description_xs_regular" color={Colors.black_01}>
-            {latest.screen_name}
-          </Text>
-        ) : null}
-      </TouchableOpacity>
-      {isExpanded ? (
-        <View style={styles.panel}>
-          <Text typography="label_xs_medium" color={Colors.black_17}>
-            {`Đã đo ${screenCount} màn hình`}
-          </Text>
-          <TouchableOpacity
-            accessibilityRole="button"
-            onPress={handleRemeasure}
-            style={styles.action}
-          >
-            <Text typography="label_xs_medium" color={Colors.blue_03}>
-              Đo lại
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            accessibilityRole="button"
-            onPress={handleShare}
-            style={styles.action}
-          >
-            <Text typography="label_xs_medium" color={Colors.blue_03}>
-              Share JSON
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            accessibilityRole="button"
-            onPress={handleClear}
-            style={styles.actionOutline}
-          >
-            <Text typography="label_xs_medium" color={Colors.black_17}>
-              Xoá
-            </Text>
-          </TouchableOpacity>
-        </View>
-      ) : null}
-    </View>
-  );
-};
-
-export { AdoptionBadge };