@momo-kits/foundation 0.81.23 → 0.81.25

package/Application/BottomTab.tsx

@@ -41,6 +41,7 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 return (
                   <View style={{paddingHorizontal: 16}}>
                     <Text
+                      numberOfLines={1}
                       typography={focused ? 'label_xs' : 'description_xs'}
                       color={color}>
                       {item.label}

package/Application/Components.tsx

@@ -1,4 +1,10 @@
-import React, {Fragment, useContext, useEffect, useState} from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Animated,
   BackHandler,
@@ -23,6 +29,7 @@ import {
 import {scaleSize, Text} from '../Text';
 import {Icon} from '../Icon';
 import {PopupNotify} from '../Popup';
+import {Badge, BadgeDot} from '../Badge';
 
 const styles = StyleSheet.create({
   navigationButton: {
@@ -58,7 +65,6 @@ const styles = StyleSheet.create({
   headerButton: {paddingHorizontal: 4},
   headerRightButton: {
     flexDirection: 'row',
-    overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
     paddingRight: Spacing.S,
@@ -86,6 +92,11 @@ const styles = StyleSheet.create({
     lineHeight: scaleSize(22),
     fontWeight: 'bold',
   },
+  badge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+  },
 });
 
 const NavigationButton: React.FC<NavigationButtonProps> = ({
@@ -94,6 +105,8 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
   onPress,
   useBorder = true,
   accessibilityLabel,
+  badgeType,
+  badgeValue,
 }) => {
   const {theme} = useContext(ApplicationContext);
   let buttonStyle: ViewStyle = {backgroundColor: '#00000066'};
@@ -105,6 +118,14 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     };
   }
 
+  const renderBadge = useCallback(() => {
+    if (!badgeValue && !badgeType) return null;
+    if (badgeType === 'dot') {
+      return <BadgeDot size="small" style={styles.badge} />;
+    }
+    return <Badge label={badgeValue} style={styles.badge} />;
+  }, [badgeType, badgeValue]);
+
   return (
     <TouchableOpacity
       accessibilityLabel={`NavigationButton/${accessibilityLabel}`}
@@ -115,6 +136,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         color={tintColor ?? theme.colors.text.default}
         size={20}
       />
+      {renderBadge()}
     </TouchableOpacity>
   );
 };
@@ -159,9 +181,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
-    const currentRoute = navigator?.ref?.current.getCurrentRoute();
-
-    if (navigator?.trackingInfo) {
+    if (!canGoBack && navigator?.trackingInfo) {
+      const currentRoute = navigator?.ref?.current.getCurrentRoute();
       navigator?.maxApi?.trackEvent('service_icon_clicked', {
         feature_code: navigator.trackingInfo.code,
         app_id: navigator.trackingInfo.appId,
@@ -172,7 +193,6 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
         icon_name: 'back',
       });
     }
-
     if (canGoBack) {
       if (preventBack) {
         navigator?.showModal({
@@ -247,6 +267,8 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       ]}>
       <StatusBar
         barStyle={headerImage || theme.dark ? 'light-content' : 'dark-content'}
+        translucent={true}
+        backgroundColor={'transparent'}
       />
       {!!headerImage && (
         <Image

package/Application/StackScreen.tsx

@@ -32,21 +32,34 @@ const StackScreen: React.FC<ScreenParams> = props => {
    */
   useEffect(() => {
     if (navigator?.trackingInfo) {
+      const tracking = {
+        feature_code: navigator.trackingInfo.code,
+        app_id: navigator.trackingInfo.appId,
+        miniapp_version: navigator.trackingInfo.buildNumber,
+        flow_partner_id: navigator.trackingInfo.flowPartnerId,
+        screen_name: Component.name,
+      };
+
       const routes = props.navigation.getState()?.routes || [];
       const routesLength = routes.length;
       let pre_screen_name = '';
       if (routesLength > 1) {
         pre_screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
+
       navigator?.maxApi?.trackEvent('service_frame_displayed', {
-        feature_code: navigator.trackingInfo.code,
-        app_id: navigator.trackingInfo.appId,
-        miniapp_version: navigator.trackingInfo.buildNumber,
-        flow_partner_id: navigator.trackingInfo.flowPartnerId,
-        screen_name: Component.name,
+        ...tracking,
         pre_screen_name,
         trigger_id: '111378000000000000',
       });
+
+      return props.navigation.addListener('beforeRemove', () => {
+        navigator?.maxApi?.trackEvent('service_icon_clicked', {
+          ...tracking,
+          trigger_id: '111154000000000000',
+          icon_name: 'back',
+        });
+      });
     }
   }, []);
 

package/Application/types.ts

@@ -126,6 +126,8 @@ export type NavigationButtonProps = {
   useBorder?: boolean;
   onPress: () => void;
   accessibilityLabel?: string;
+  badgeType?: 'dot' | 'number' | 'string';
+  badgeValue?: number | string;
 };
 
 export interface NavigationOptions extends StackNavigationOptions {

package/Badge/Badge.tsx

@@ -0,0 +1,56 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+
+import {ApplicationContext} from '../Application';
+import {BadgeProps} from './types';
+import styles from './styles';
+import {Colors} from '../Consts';
+import {Text} from '../Text';
+
+const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
+  const {theme} = useContext(ApplicationContext);
+
+  const isValidatedColor = () => {
+    const colorKeys = Object.keys(Colors);
+    const colorValue = Object.values(Colors);
+    if (backgroundColor) {
+      const colorIndex = colorValue.indexOf(backgroundColor);
+      if (colorIndex !== -1) {
+        if (colorKeys[colorIndex]?.includes('_03')) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
+  const isNumber = () => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
+  const formatTitle = () => {
+    if (isNumber() && Number(label) > 99) {
+      return '99+';
+    }
+    return label.toString();
+  };
+
+  let badgeColor = isNumber()
+    ? theme.colors.error.primary
+    : theme.colors.warning.primary;
+
+  if (backgroundColor && isValidatedColor()) {
+    badgeColor = backgroundColor;
+  }
+
+  return (
+    <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
+      <Text color={Colors.black_01} typography={'action_xxs'}>
+        {formatTitle()}
+      </Text>
+    </View>
+  );
+};
+
+export default Badge;

package/Badge/BadgeDot.tsx

@@ -0,0 +1,11 @@
+import React, {FC} from 'react';
+import {View} from 'react-native';
+import {BadgeDotProps} from './types';
+import styles from './styles';
+
+const BadgeDot: FC<BadgeDotProps> = ({size = 'large', style}) => {
+  const dotStyle = size === 'small' ? styles.dotSmall : styles.dot;
+  return <View style={[style, dotStyle]} />;
+};
+
+export default BadgeDot;

package/Badge/BadgeRibbon.tsx

@@ -0,0 +1,125 @@
+import React, {FC, useContext} from 'react';
+import {View} from 'react-native';
+import {DownTail, UpTail} from './Shape';
+import styles from './styles';
+import {BadgeRibbonProps} from './types';
+import {ApplicationContext} from '../Application';
+import {Text} from '../Text';
+import {Colors} from '../Consts';
+import {Image} from '../Image';
+
+const BadgeRibbon: FC<BadgeRibbonProps> = ({
+  position = 'top_right',
+  label = 'Label',
+  isRound = false,
+  style = {},
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  let ribbonRotate = '0deg';
+  let textRotate = '0deg';
+  let ribbonTail = <DownTail />;
+  let textMargin = 0;
+  let skewMargin = 0;
+
+  if (position === 'top_right' || position === 'bottom_right') {
+    ribbonRotate = '180deg';
+    textRotate = '180deg';
+  }
+
+  if (position === 'bottom_left' || position === 'top_right') {
+    textMargin = 4;
+    ribbonTail = <UpTail />;
+    skewMargin = 4;
+  }
+
+  const renderRoundContent = () => {
+    return (
+      <View
+        style={[
+          styles.ribbonContent,
+          {
+            backgroundColor: theme.colors.warning.primary,
+            marginTop: textMargin,
+          },
+        ]}>
+        <Text
+          style={[
+            styles.ribbonLabel,
+            {
+              transform: [
+                {
+                  rotate: textRotate,
+                },
+              ],
+            },
+          ]}
+          color={Colors.black_01}
+          typography={'label_xs'}>
+          {label}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderSkewContent = () => {
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          marginTop: skewMargin,
+        }}>
+        <View
+          style={[
+            styles.ribbonSkewContent,
+            {
+              backgroundColor: theme.colors.warning.primary,
+            },
+          ]}>
+          <Text
+            style={[
+              styles.ribbonLabel,
+              {
+                transform: [
+                  {
+                    rotate: textRotate,
+                  },
+                ],
+              },
+            ]}
+            color={Colors.black_01}
+            typography={'label_xs'}>
+            {label}
+          </Text>
+        </View>
+        <Image
+          source={{
+            uri: 'https://static.momocdn.net/app/img/kits/utils/Tail_4x.png',
+          }}
+          style={styles.skew}
+        />
+      </View>
+    );
+  };
+
+  const content = isRound ? renderRoundContent() : renderSkewContent();
+
+  return (
+    <View
+      style={[
+        style,
+        styles.ribbon,
+        {
+          transform: [
+            {
+              rotate: ribbonRotate,
+            },
+          ],
+        },
+      ]}>
+      {ribbonTail}
+      {content}
+    </View>
+  );
+};
+
+export default BadgeRibbon;

package/Badge/Shape.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styles from './styles';
+import {Image} from '../Image';
+
+const UpTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_down_4x.png',
+      }}
+      style={[styles.tail, {transform: [{rotate: '180deg'}]}]}
+    />
+  );
+};
+
+const DownTail = () => {
+  return (
+    <Image
+      resizeMode={'stretch'}
+      source={{
+        uri: 'https://static.momocdn.net/app/img/kits/utils/Head_4x.png',
+      }}
+      style={styles.tail}
+    />
+  );
+};
+
+export {UpTail, DownTail};

package/Badge/index.tsx

@@ -0,0 +1,7 @@
+import Badge from './Badge';
+import BadgeDot from './BadgeDot';
+import BadgeRibbon from './BadgeRibbon';
+import {BadgeProps, BadgeDotProps, BadgeRibbonProps} from './types';
+
+export {Badge, BadgeRibbon, BadgeDot};
+export type {BadgeProps, BadgeDotProps, BadgeRibbonProps};

package/Badge/styles.ts

@@ -0,0 +1,57 @@
+import {StyleSheet} from 'react-native';
+import {Colors, Radius, Spacing} from '../Consts';
+import {scaleSize} from '../Text';
+
+export default StyleSheet.create({
+  badge: {
+    paddingHorizontal: Spacing.XS,
+    borderRadius: Radius.M,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: scaleSize(16),
+    flexDirection: 'row',
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    alignSelf: 'baseline',
+  },
+  dot: {
+    width: 16,
+    height: 16,
+    borderWidth: 2,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 8,
+  },
+  dotSmall: {
+    width: 10,
+    height: 10,
+    borderWidth: 1,
+    borderColor: Colors.black_01,
+    backgroundColor: Colors.red_03,
+    borderRadius: 5,
+  },
+  ribbon: {
+    alignSelf: 'baseline',
+    flexDirection: 'row',
+    height: 20,
+    overflow: 'hidden',
+  },
+  ribbonContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomRightRadius: 12,
+    borderTopRightRadius: 12,
+    paddingRight: 6,
+  },
+  ribbonSkewContent: {
+    height: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ribbonLabel: {
+    color: Colors.black_01,
+  },
+  skew: {width: 8, height: 16},
+  tail: {width: 5, height: 20},
+});

package/Badge/types.ts

@@ -0,0 +1,65 @@
+import {ViewStyle} from 'react-native';
+
+/**
+ * Defines the types of badges that can be used. This helps in rendering the appropriate badge style.
+ */
+export type BadgeType = 'badge' | 'badge_number' | 'dot' | 'dot_small';
+
+/**
+ * Props for a general Badge component. It can display a wide range of badges including simple labels, numbers, or dots.
+ */
+export type BadgeProps = {
+  /**
+   * Optional. The text to display on the badge. This could be a number or string, depending on the badge's purpose.
+   */
+  label?: string | number;
+
+  /**
+   * Optional. Custom styles to apply to the badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+
+  backgroundColor?: string;
+};
+
+/**
+ * Props for a BadgeDot component. It specifically represents a dot-style badge, typically used for notification indicators.
+ */
+export type BadgeDotProps = {
+  /**
+   * Optional. The size of the dot, either 'small' or 'large'. This allows for better visual alignment with different UI elements.
+   */
+  size?: 'small' | 'large';
+
+  /**
+   * Optional. Custom styles to apply to the badge dot component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};
+
+/**
+ * Props for a BadgeRibbon component. It represents a more specialized badge in the shape of a ribbon, allowing for placement around containers.
+ */
+export type BadgeRibbonProps = {
+  /**
+   * The text to display on the ribbon-style badge. Unlike other badges, ribbons typically carry more descriptive text.
+   */
+  label: string;
+
+  /**
+   * Optional. Determines the placement of the ribbon on its parent container. The position can be any corner of the container.
+   * Defaults to 'top_right' if not specified.
+   */
+  position?: 'top_right' | 'top_left' | 'bottom_right' | 'bottom_left';
+
+  /**
+   * Optional. If true, the edges of the ribbon badge will be rounded. This is purely a stylistic choice.
+   * Defaults to `false` if not provided, resulting in a flat-edged ribbon.
+   */
+  isRound?: boolean;
+
+  /**
+   * Optional. Custom styles to apply to the ribbon badge component. Can be a single style or an array of styles.
+   */
+  style?: ViewStyle | ViewStyle[];
+};

package/Image/styles.ts

@@ -1,8 +1,5 @@
 import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
-  container: {
-    width: '100%',
-    height: '100%',
-  },
+  container: {},
 });

package/Layout/Card.tsx

@@ -7,7 +7,7 @@ import Item from './Item';
 import {Image} from '../Image';
 import {ApplicationContext} from '../Application';
 import styles from './styles';
-import {Colors, Shadow, Spacing} from '../Consts';
+import {Colors, Radius, Shadow, Spacing} from '../Consts';
 import ItemList from './ItemList';
 
 export interface CardProps extends ViewProps {
@@ -149,14 +149,22 @@ const Card: React.FC<CardProps> = ({
           {
             width: widthSection,
             marginHorizontal: margin,
-            backgroundColor: theme.colors.background.surface,
+            backgroundColor: backgroundImage
+              ? undefined
+              : theme.colors.background.surface,
           },
           useShadow && Shadow.Light,
         ]}>
         {!!backgroundImage && (
           <Image
             source={{uri: backgroundImage}}
-            style={styles.imageBackground}
+            style={[
+              styles.imageBackground,
+              {
+                width: widthSection,
+                borderRadius: Radius.M,
+              },
+            ]}
           />
         )}
         {renderView(validateChildren(children, [Item, ItemList]))}

package/Layout/styles.ts

@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import {Radius, Spacing} from '../Consts';
+import {Radius} from '../Consts';
 
 export default StyleSheet.create({
   extendedHeader: {
@@ -45,6 +45,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     borderRadius: Radius.M,
+
     padding: 12,
   },
   item: {
@@ -63,7 +64,6 @@ export default StyleSheet.create({
     bottom: 0,
     left: 0,
     right: 0,
-    borderRadius: Spacing.M,
   },
   protectedStyle: {
     marginTop: undefined,

package/Popup/PopupNotify.tsx

@@ -9,6 +9,7 @@ import {Button} from '../Button';
 import {Icon} from '../Icon';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
+  id,
   image,
   title = 'Title',
   description = 'Description',
@@ -33,29 +34,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * tracking
    */
   useEffect(() => {
-    onTracking('service_component_displayed', undefined, '111012100000000000');
-    return () => {
-      onTracking(
-        'service_popup_dismissed',
-        closeAction.current,
-        '111154100000000001',
-      );
-    };
-  }, []);
-  /**
-   * on action popup
-   * @param callback
-   */
-  const onAction = (callback?: () => void) => {
-    navigator?.pop();
-    callback?.();
-  };
-
-  const onTracking = (
-    event: string,
-    actionType: string | undefined,
-    trigger_id: string,
-  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -63,19 +41,37 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent(event, {
+      const tracking = {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
         flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
         screen_name,
         component_type: 'popup',
-        component_name: 'PopupNotify',
-        error_code: error,
-        trigger_id,
-        action_type: actionType,
+        component_name: id,
+        error_code: error ? error : undefined,
+      };
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...tracking,
+        trigger_id: '111012100000000000',
       });
+      return () => {
+        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+          ...tracking,
+          trigger_id: '111154100000000001',
+          action_type: closeAction.current,
+        });
+      };
     }
+  }, []);
+
+  /**
+   * on action popup
+   * @param callback
+   */
+  const onAction = (callback?: () => void) => {
+    navigator?.pop();
+    callback?.();
   };
 
   /**
@@ -194,11 +190,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         styles.container,
         {backgroundColor: theme.colors.background.surface},
       ]}>
-      {!!image && (
-        <View style={styles.image}>
-          <Image source={{uri: image}} />
-        </View>
-      )}
+      {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
         <Text typography={'title_xs'} numberOfLines={1}>
           {title}
@@ -206,7 +198,6 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         <Description style={[styles.description, descriptionStyle]}>
           <Text
             typography={'paragraph_default'}
-            numberOfLines={4}
             onTextLayout={({nativeEvent: {lines}}) => {
               const enableScroll = lines.length > 3;
               if (enableScroll != scrollContent) {

package/Popup/PopupPromotion.tsx

@@ -7,6 +7,7 @@ import {Radius, Spacing} from '../Consts';
 import {Icon} from '../Icon';
 
 const PopupPromotion: React.FC<PopupPromotionProps> = ({
+  id,
   image,
   onIconClose,
 }) => {
@@ -17,21 +18,6 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
    * tracking
    */
   useEffect(() => {
-    onTracking('service_component_displayed', undefined, '111012100000000000');
-    return () => {
-      onTracking(
-        'service_popup_dismissed',
-        closeAction.current,
-        '111154100000000001',
-      );
-    };
-  }, []);
-
-  const onTracking = (
-    event: string,
-    actionType: string | undefined,
-    trigger_id: string,
-  ) => {
     if (navigator?.trackingInfo) {
       const routes = navigator.ref.current?.getRootState()?.routes || [];
       const routesLength = routes.length;
@@ -39,19 +25,28 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       if (routesLength > 1) {
         screen_name = routes[routesLength - 2]?.params?.screen?.name;
       }
-      navigator?.maxApi?.trackEvent(event, {
+      const tracking = {
         feature_code: navigator?.trackingInfo?.code,
         app_id: navigator?.trackingInfo?.appId,
         miniapp_version: navigator?.trackingInfo?.buildNumber,
         flow_partner_id: navigator?.trackingInfo?.flowPartnerId,
         screen_name,
         component_type: 'popup',
-        component_name: 'PopupPromotion',
-        trigger_id,
-        action_type: actionType,
+        component_name: id,
+      };
+      navigator?.maxApi?.trackEvent('service_component_displayed', {
+        ...tracking,
+        trigger_id: '111012100000000000',
       });
+      return () => {
+        navigator?.maxApi?.trackEvent('service_popup_dismissed', {
+          ...tracking,
+          trigger_id: '111154100000000001',
+          action_type: closeAction.current,
+        });
+      };
     }
-  };
+  }, []);
 
   /**
    * build close action
@@ -87,13 +82,12 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   return (
     <View accessibilityLabel={'PopupPromotion'}>
-      <View style={styles.container}>
-        <Image
-          source={{
-            uri: image,
-          }}
-        />
-      </View>
+      <Image
+        source={{
+          uri: image,
+        }}
+        style={styles.container}
+      />
       {buildCloseIcon()}
     </View>
   );
@@ -102,6 +96,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 const styles = StyleSheet.create({
   container: {
     aspectRatio: 0.72,
+    width: '100%',
   },
   iconCloseContainer: {
     width: '100%',

package/Popup/types.ts

@@ -2,6 +2,10 @@ import {TextStyle} from 'react-native';
 import React from 'react';
 
 export type PopupNotifyProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
   /**
    * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
    */
@@ -47,6 +51,11 @@ export type PopupNotifyProps = {
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `id`: Optional. id component_name for tracking component.
+   */
+  id?: string;
+
   /**
    * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
    */

package/Text/index.tsx

@@ -88,6 +88,7 @@ const Text: React.FC<TextProps> = ({
       fontSize: scaleSize(fontSize),
       lineHeight: scaleSize(lineHeight),
       fontStyle,
+      fontWeight,
     };
   };
 

package/index.ts

@@ -47,3 +47,5 @@ export * from './Loader';
 export * from './Loader/types';
 export * from './Title';
 export * from './Title/types';
+export * from './Badge';
+export * from './Badge/types';

package/package.json

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