@momo-kits/foundation 0.169.7-beta.1 → 0.169.7-beta.2

package/Application/BottomTab/BottomTabBar.styles.ts

@@ -2,20 +2,6 @@ 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',
@@ -51,7 +37,7 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: 0,
     right: 0,
-    top: CTA_TOP,
+    top: -TabBarMetrics.ctaLift - TabBarMetrics.paddingVertical,
     alignItems: 'center',
     gap: TabBarMetrics.ctaLabelGap,
   },
@@ -60,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

@@ -181,17 +181,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'}
@@ -224,8 +228,6 @@ 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, TabBarMetrics } from './metrics';
+import { NOTCH_CURVES, NOTCH_HALF_WIDTH } from './metrics';
 
 type Props = {
   width: number;
@@ -139,13 +139,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

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

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

@@ -8,18 +8,11 @@ import { Colors, Radius, Spacing } from '../../Consts';
  * 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,
@@ -32,9 +25,6 @@ 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,
@@ -142,17 +132,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/modalLayout.ts

@@ -73,6 +73,9 @@ type ModalLayoutInput = {
   hinge?: ReservedRegion;
 };
 
+/**
+ * `value` limited to the `[min, max]` range.
+ */
 const clamp = (value: number, min: number, max: number) => {
   return Math.min(Math.max(value, min), max);
 };

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/package.json

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