@momo-kits/foundation 0.169.7-beta.6 → 0.169.7-beta.8

package/Application/BottomTab/ActiveIndicator.tsx

@@ -5,6 +5,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { defaultTheme } from '../../Consts';
 import { ApplicationContext } from '../../Context';
 import { getIndicatorShadow, TabBarMotion } from './metrics';
 
@@ -70,7 +71,10 @@ const ActiveIndicator: React.FC<Props> = ({
         styles.indicator,
         {
           borderRadius: radius,
-          backgroundColor: theme.colors.background.tonal,
+          // a mini app's own theme may lack `tonal`; without the fallback the indicator is transparent
+          backgroundColor:
+            theme.colors.background.tonal ??
+            defaultTheme.colors.background.tonal,
           boxShadow: getIndicatorShadow(theme.colors.primary),
         },
         style,

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

@@ -181,21 +181,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'}
@@ -228,6 +224,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;
@@ -139,7 +139,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

@@ -13,7 +13,7 @@ import Animated, {
 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: {
@@ -143,7 +143,7 @@ const styles = StyleSheet.create({
     minWidth: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    gap: Spacing.XXS,
+    gap: TabBarMetrics.itemIconLabelGap,
   },
   slot: {
     height: TabBarMetrics.indicatorHeight,

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,8 +49,15 @@ const DuoFloatingTabBar: React.FC<DuoTabBarProps> = props => {
       ]}
     >
       <HorizontalTabBar
-        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

@@ -8,11 +8,18 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * 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,
@@ -25,6 +32,9 @@ const TabBarMetrics = {
   systemIndicatorHeight: 24,
   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,
   ctaIconSize: 28,
@@ -132,7 +142,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/Components/HeaderExtendHeader.tsx

@@ -17,7 +17,7 @@ import BackgroundImageView from './BackgroundImageView';
 import { type AnimatedCompatValue } from '../utils';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
+import { HeaderMetrics } from '../../Layout/utils';
 import {
   HeaderBarMetrics,
   type HeaderContentLayout,
@@ -66,17 +66,10 @@ const HeaderExtendHeader: React.FC<{
   // the stretch frame pulls the search in from both bar edges
   const frameShift = headerLayout.frameInset - sidePadding;
 
-  let backWidth = buttonSize;
-  let toolkitWidth = TOOLKIT_WIDTH;
-  // the iPhone Duo status bar row keeps side bar sized back and toolkit
-  if (layout.statusBarClearance) {
-    backWidth = DuoMetrics.controlSize;
-    toolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
-  }
-  const backLeft = backWidth + sidePadding + titleGap;
+  const backLeft = buttonSize + sidePadding + titleGap;
   const defaultLeft = layout.sideBar ? SCREEN_PADDING : backLeft;
   const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
-  const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
+  const defaultRightWidth = layout.sideBar ? 0 : TOOLKIT_WIDTH;
   const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
   const contentLeft = layout.insetLeft + SCREEN_PADDING + frameShift;
   const contentRight = layout.insetLeft + layout.contentWidth - frameShift;
@@ -92,9 +85,8 @@ const HeaderExtendHeader: React.FC<{
   const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
   const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
 
-  // the iPhone Duo side bar and status bar row keep the content search size
-  const isDuoRow = !!layout.sideBar || !!layout.statusBarClearance;
-  const searchSize = isDuoRow ? 'default' : 'header';
+  // the iPhone Duo side bar keeps the content search size
+  const searchSize = layout.sideBar ? 'default' : 'header';
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {

package/Application/Components/HeaderLeft.tsx

@@ -6,13 +6,13 @@ import { PopupNotify } from '../../Popup';
 import { NavigationButton } from './NavigationButton';
 import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
-import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
+import { useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 import { HeaderBarMetrics } from '../headerLayout';
 
 /**
  * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
+ * confirms in a popup first; the iPhone Duo side bar uses the 48pt side bar button.
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
@@ -25,7 +25,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
   const { navigator } = useContext(ApplicationContext);
   const sideBarStyle = useSideBarItemStyle('left', 0);
   const counterStyle = useSideBarCounterStyle();
-  const { statusBarClearance } = useScreenLayout();
 
   const goBack = useCallback(() => {
     const canGoBack = navigator?.ref?.current?.canGoBack?.();
@@ -98,20 +97,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.headerLeft}>
-        <SideBarButton
-          accessibilityLabel="btn_navigation_back"
-          icon="arrow-back"
-          tintColor={tintColor}
-          onPress={goBackSafe}
-        />
-      </View>
-    );
-  }
-
   return (
     <View style={styles.headerLeft}>
       <NavigationButton

package/Application/Components/HeaderRight.styles.ts

@@ -74,10 +74,6 @@ export const styles = StyleSheet.create({
   sideBarColumn: {
     gap: Spacing.M,
   },
-  sideBarRow: {
-    flexDirection: 'row',
-    gap: Spacing.M,
-  },
   headerLeft: {
     marginLeft: 12,
   },

package/Application/Components/HeaderTitle.shared.ts

@@ -23,28 +23,22 @@ const useHeaderFontFamily = (): string => {
 const HEADER_ACTIONS_WIDTH =
   sidePadding * 2 + buttonSize + titleGap * 2 + clusterWidth;
 
-/**
- * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
- */
-const STATUS_BAR_ROW_ACTIONS_EXTRA = 43;
-
 /**
  * Max header title width. The iPhone Duo side bar takes back and toolkit out of
- * the bar, so the title gets the content width; otherwise it shares the bar with them.
+ * the bar, so the title gets the content width; otherwise it shares the bar with
+ * them, minus the status bar clusters on the iPhone Duo inner portrait row.
  */
 const useTitleMaxWidth = () => {
   const layout = useScreenLayout();
   const { width, contentWidth, sideBar, statusBarClearance } = layout;
   let clearance = 0;
-  let rowActionsExtra = 0;
   if (statusBarClearance) {
     clearance = statusBarClearance.left + statusBarClearance.right;
-    rowActionsExtra = STATUS_BAR_ROW_ACTIONS_EXTRA;
   }
   if (sideBar) {
     return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
+  return width - HEADER_ACTIONS_WIDTH - clearance;
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderToolkitAction.tsx

@@ -4,7 +4,7 @@ import { NavigationButton } from './NavigationButton';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing, Styles } from '../../Consts';
 import { Icon } from '../../Icon';
-import { DuoMetrics, useScreenLayout } from '../../Layout/utils';
+import { DuoMetrics } from '../../Layout/utils';
 import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
 import { styles } from './HeaderRight.styles';
@@ -32,7 +32,6 @@ const HeaderToolkitAction: React.FC<any> = ({
   const compression = useDuoBarCompression();
   const { toolbarCompressed, toolbarHidden } = compression;
   const { expandToolbar, setToolbarHeight } = compression;
-  const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
     iconShortcut,
@@ -132,39 +131,6 @@ const HeaderToolkitAction: React.FC<any> = ({
     );
   }
 
-  // on the status bar row the controls keep the side bar size
-  if (statusBarClearance) {
-    return (
-      <View style={styles.sideBarRow}>
-        {useShortcut && (
-          <SideBarButton
-            disabled={isLoading}
-            icon={iconShortcut}
-            onPress={shortcutOnPress}
-            tintColor={tintColor}
-            showBadge={showBadge}
-          />
-        )}
-        <SideBarGroup tintColor={tintColor} horizontal>
-          {useHelpCenter && (
-            <SideBarGroupItem
-              accessibilityLabel={'btn_navigation_help_center'}
-              icon={'help_center'}
-              tintColor={tintColor}
-              onPress={onPressHelpCenter}
-            />
-          )}
-          <SideBarGroupItem
-            accessibilityLabel={'btn_navigation_close'}
-            icon={closeIcon}
-            tintColor={tintColor}
-            onPress={onClose}
-          />
-        </SideBarGroup>
-      </View>
-    );
-  }
-
   return (
     <View style={Styles.row}>
       {useShortcut && (

package/Application/Components/SearchHeader.tsx

@@ -8,13 +8,12 @@ import { ApplicationContext, MiniAppContext } from '../../Context';
 import { Text } from '../../Text';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
-import { DuoMetrics } from '../../Layout/utils';
 import { HeaderBarMetrics } from '../headerLayout';
 
 const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
 // help center | home pill and the bar padding right of it
 const TOOLKIT_WIDTH = pillWidth + sidePadding;
-// the iPhone Duo side bar and status bar row keep their right header width
+// the iPhone Duo side bar keeps its right header width
 const DUO_TOOLKIT_WIDTH = 73;
 
 /**
@@ -35,20 +34,15 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     const { theme, navigator } = useContext(ApplicationContext);
     const context = useContext<any>(MiniAppContext);
     const layout = useScreenLayout();
-    // the iPhone Duo status bar row keeps a side bar sized back button
-    let backWidth = buttonSize;
-    if (layout.statusBarClearance) {
-      backWidth = DuoMetrics.controlSize;
-    }
     let defaultRightWidth = TOOLKIT_WIDTH;
     let searchSize: InputSearchProps['size'] = 'header';
-    if (layout.sideBar || layout.statusBarClearance) {
+    if (layout.sideBar) {
       defaultRightWidth = DUO_TOOLKIT_WIDTH;
       searchSize = 'default';
     }
 
     const sharedValue = useNormalizedSharedValue(animatedValue);
-    const defaultLeft = backWidth + sidePadding + titleGap;
+    const defaultLeft = buttonSize + sidePadding + titleGap;
     const leftPosition = props?.leftPosition ?? defaultLeft;
     const headerRightWidth = props?.headerRightWidth ?? defaultRightWidth;
 

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.7-beta.6",
+    "version": "0.169.7-beta.8",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},