@momo-kits/foundation 0.169.7-beta.9 → 0.169.7

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/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/Layout/Card.tsx

@@ -1,13 +1,12 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
-import { GRID_GUTTER, GRID_MARGIN } from './constants';
-import { useGridSystem } from './useGridSystem';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import { Image } from '../Image';
 import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Radius, Shadow } from '../Consts';
+import { Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -22,7 +21,7 @@ export interface CardProps extends ViewProps {
 }
 
 /**
- * Surface card across the grid width minus 12pt margins, with its own grid for child
+ * Surface card across the content width minus 12pt margins, with its own grid for child
  * Items; optional background image and light shadow.
  */
 const Card: React.FC<CardProps> = ({
@@ -33,18 +32,19 @@ const Card: React.FC<CardProps> = ({
   ...props
 }) => {
   const { theme } = useContext(ApplicationContext);
-  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
+  const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
-  const gutterSize = GRID_GUTTER;
-  const margin = GRID_MARGIN;
-  const widthSection = gridWidth - margin * 2;
+  const gutterSize = 8;
+  const margin = 12;
+  const widthSection = contentWidth - margin * 2;
   const innerWidth = widthSection - margin * 2;
   const columnsWidth = innerWidth - gutterSize * (numberOfColumns - 1);
   const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: GRID_GUTTER,
+    gutterSize: Spacing.S,
     sizePerSpan,
     getSizeSpan: span => {
       return sizePerSpan * span + gutterSize * (span - 1);
@@ -63,7 +63,7 @@ const Card: React.FC<CardProps> = ({
           styles.card,
           {
             width: widthSection,
-            marginHorizontal: gridOffset + margin,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
           !!backgroundImage && { backgroundColor: undefined },

package/Layout/Item.tsx

@@ -7,12 +7,12 @@ import { SpanNumber } from './types';
 
 export interface ItemProps extends ViewProps {
   /**
-   * Width in grid columns (1-36, out of the grid's 12, 24 or 36). Defaults to the full row.
+   * Width in grid columns (1-12). Defaults to the full row.
    */
   widthSpan?: SpanNumber;
 
   /**
-   * Optional. Height in grid spans (1-36, out of the grid's 12, 24 or 36). Unset keeps the content height.
+   * Optional. Height in grid spans (1-12). Unset keeps the content height.
    */
   heightSpan?: SpanNumber;
 }

package/Layout/Section.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, ViewProps } from 'react-native';
-import { GRID_GUTTER, GRID_MARGIN } from './constants';
-import { useGridSystem } from './useGridSystem';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
 import { GridContext } from './index';
 import styles from './styles';
 import { Image } from '../Image';
+import { Spacing } from '../Consts';
 
 export interface SectionProps extends ViewProps {
   /**
@@ -37,21 +37,22 @@ const Section: React.FC<SectionProps> = ({
   style,
   ...props
 }) => {
-  const { numberOfColumns, gridWidth, gridOffset } = useGridSystem();
+  const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
-  const gutterSize = GRID_GUTTER;
+  const gutterSize = 12;
   let margin = 0;
   if (useMargin) {
-    margin = GRID_MARGIN;
+    margin = 12;
   }
-  const widthSection = gridWidth - margin * 2;
+  const widthSection = contentWidth - margin * 2;
 
   const columnsWidth = widthSection - gutterSize * (numberOfColumns - 1);
   const sizePerSpan = columnsWidth / numberOfColumns - 1 / numberOfColumns;
 
   const gridContext: GridContextProps = {
     numberOfColumns,
-    gutterSize: GRID_GUTTER,
+    gutterSize: Spacing.M,
     sizePerSpan,
     getSizeSpan: span => {
       return span * sizePerSpan + gutterSize * (span - 1);
@@ -69,7 +70,7 @@ const Section: React.FC<SectionProps> = ({
           styles.rowWrap,
           {
             width: widthSection,
-            marginHorizontal: gridOffset + margin,
+            marginHorizontal: margin,
             gap: gutterSize,
           },
         ]}

package/Layout/types.ts

@@ -13,43 +13,7 @@ export type ScreenRef = {
    */
   setSearchHeader: (params: SearchHeaderProps) => void;
 };
-export type SpanNumber =
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17
-  | 18
-  | 19
-  | 20
-  | 21
-  | 22
-  | 23
-  | 24
-  | 25
-  | 26
-  | 27
-  | 28
-  | 29
-  | 30
-  | 31
-  | 32
-  | 33
-  | 34
-  | 35
-  | 36;
+export type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export type GridContextProps = {
   /**

package/Layout/utils.ts

@@ -357,6 +357,13 @@ const useSideBarItemStyle = (
   };
 };
 
+/** Column count of the content grid: 24 on content wider than 600pt, otherwise 12. */
+const useGridSystem = () => {
+  const { contentWidth } = useScreenLayout();
+  const numberOfColumns = contentWidth > 600 ? 24 : 12;
+  return { numberOfColumns };
+};
+
 export type { ScreenLayout, SideBarEdge, SideBarLayout, StatusBarClearance };
 
 export {
@@ -365,6 +372,7 @@ export {
   InnerEdgeStyles,
   getHeaderMargin,
   getHeaderRowOptions,
+  useGridSystem,
   useScreenLayout,
   useSideBarItemStyle,
   validateChildren,

package/package.json

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

package/Layout/constants.ts

@@ -1,19 +0,0 @@
-const GRID_MARGIN = 12;
-const GRID_GUTTER = 12;
-const GRID_PHONE_MAX_WIDTH = 600;
-const GRID_TABLET_MIN_WIDTH = 800;
-const GRID_DESKTOP_MIN_WIDTH = 1100;
-const GRID_PHONE_COLUMNS = 12;
-const GRID_TABLET_COLUMNS = 24;
-const GRID_DESKTOP_COLUMNS = 36;
-
-export {
-  GRID_DESKTOP_COLUMNS,
-  GRID_DESKTOP_MIN_WIDTH,
-  GRID_GUTTER,
-  GRID_MARGIN,
-  GRID_PHONE_COLUMNS,
-  GRID_PHONE_MAX_WIDTH,
-  GRID_TABLET_COLUMNS,
-  GRID_TABLET_MIN_WIDTH,
-};

package/Layout/useGridSystem.ts

@@ -1,49 +0,0 @@
-import {
-  GRID_DESKTOP_COLUMNS,
-  GRID_DESKTOP_MIN_WIDTH,
-  GRID_PHONE_COLUMNS,
-  GRID_PHONE_MAX_WIDTH,
-  GRID_TABLET_COLUMNS,
-  GRID_TABLET_MIN_WIDTH,
-} from './constants';
-import { useScreenLayout } from './utils';
-
-/**
- * Column count for a content width: 12 below 800pt, 24 below 1100pt, 36 from there
- */
-const getGridColumns = (width: number) => {
-  if (width >= GRID_DESKTOP_MIN_WIDTH) {
-    return GRID_DESKTOP_COLUMNS;
-  }
-  if (width >= GRID_TABLET_MIN_WIDTH) {
-    return GRID_TABLET_COLUMNS;
-  }
-  return GRID_PHONE_COLUMNS;
-};
-
-/**
- * Grid width for a content width: the 12-column grid stops at 600pt and is centered,
- * the wider grids fill the content
- */
-const getGridWidth = (width: number) => {
-  if (width < GRID_TABLET_MIN_WIDTH) {
-    return Math.min(width, GRID_PHONE_MAX_WIDTH);
-  }
-  return width;
-};
-
-/**
- * Grid for the current content width: column count, grid width and the horizontal
- * offset that centers a grid narrower than the content
- */
-const useGridSystem = () => {
-  const { contentWidth } = useScreenLayout();
-  const gridWidth = getGridWidth(contentWidth);
-  return {
-    numberOfColumns: getGridColumns(contentWidth),
-    gridWidth,
-    gridOffset: (contentWidth - gridWidth) / 2,
-  };
-};
-
-export { useGridSystem };