@momo-kits/foundation 0.81.43-rc.4 → 0.81.43-rc.6

package/Application/BottomTab.tsx

@@ -84,7 +84,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 return (
                   <Text
                     numberOfLines={1}
-                    typography={focused ? 'label_xs' : 'description_xs'}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
                     color={color}>
                     {item.label}
                   </Text>

package/Application/Components.tsx

@@ -22,7 +22,6 @@ import {
   HeaderAnimatedProps,
   HeaderBackgroundProps,
   HeaderBackProps,
-  HeaderToolkitProps,
   NavigationButtonProps,
   TitleCustomProps,
 } from './types';
@@ -50,12 +49,17 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
     };
   }
 
+  const isNumber = (label: any) => {
+    const numberRegex = /^\d+$/;
+    return numberRegex.test(String(label));
+  };
+
   const renderBadge = useCallback(() => {
     if (badgeType === 'dot') {
       return <BadgeDot size="small" style={styles.badgeDot} />;
     }
 
-    if (badgeValue && typeof Number(badgeValue) === 'number') {
+    if (isNumber(badgeValue)) {
       return <Badge label={badgeValue} style={styles.badge} />;
     }
   }, [badgeType, badgeValue]);
@@ -240,10 +244,10 @@ const HeaderCustom: React.FC<TitleCustomProps> = ({
         )}
       </View>
       <View style={[Styles.flex, {paddingHorizontal: 8}]}>
-        <Text typography="title_xs" color={tintColor}>
+        <Text typography="action_default_bold" color={tintColor}>
           {title}
         </Text>
-        <Text typography="description_s" color={tintColor}>
+        <Text typography="description_default_regular" color={tintColor}>
           {subTitle}
         </Text>
       </View>

package/Badge/Badge.tsx

@@ -46,7 +46,7 @@ const Badge: FC<BadgeProps> = ({label = 'Label', style, backgroundColor}) => {
 
   return (
     <View style={[style, styles.badge, {backgroundColor: badgeColor}]}>
-      <Text color={Colors.black_01} typography={'action_xxs'}>
+      <Text color={Colors.black_01} typography={'action_xxs_bold'}>
         {formatTitle()}
       </Text>
     </View>

package/Badge/BadgeRibbon.tsx

@@ -54,7 +54,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
             },
           ]}
           color={Colors.black_01}
-          typography={'label_xs'}>
+          typography={'label_xs_medium'}>
           {label}
         </Text>
       </View>
@@ -87,7 +87,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
               },
             ]}
             color={Colors.black_01}
-            typography={'label_xs'}>
+            typography={'label_xs_medium'}>
             {label}
           </Text>
         </View>

package/Button/index.tsx

@@ -172,14 +172,14 @@ const Button: FC<ButtonProps> = ({
   const getTypography = (): Typography => {
     switch (size) {
       case 'large':
-        return 'action_default';
+        return 'action_default_bold';
       case 'medium':
-        return 'action_s';
+        return 'action_s_bold';
       case 'small':
-        return 'action_xs';
+        return 'action_xs_bold';
 
       default:
-        return 'action_default';
+        return 'action_default_bold';
     }
   };
 

package/CheckBox/index.tsx

@@ -54,7 +54,7 @@ const CheckBox: FC<CheckBoxProps> = ({
           />
         )}
       </View>
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Input/InputOTP.tsx

@@ -57,7 +57,7 @@ const OTPCaret: FC<CaretProps> = ({index, length}) => {
           opacity,
         }}
       />
-      <Text color={theme.colors.text.hint} typography={'paragraph_default'}>
+      <Text color={theme.colors.text.hint} typography={'body_default_regular'}>
         -
       </Text>
     </View>
@@ -135,7 +135,9 @@ const InputOTP = forwardRef(
                     ? theme.colors.text.default
                     : theme.colors.text.hint
                 }
-                typography={!!value[i] ? 'title_s' : 'paragraph_default'}>
+                typography={
+                  !!value[i] ? 'header_m_bold' : 'body_default_regular'
+                }>
                 {value[i] || '-'}
               </Text>
             )}
@@ -150,7 +152,9 @@ const InputOTP = forwardRef(
 
       if (!focused && value.length === 0 && !!placeholder) {
         return (
-          <Text color={theme.colors.text.hint} typography={'description_s'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_default_regular'}>
             {placeholder}
           </Text>
         );
@@ -167,7 +171,7 @@ const InputOTP = forwardRef(
                     marginRight: Spacing.L,
                   }
                 }
-                typography={'title_s'}>
+                typography={'header_m_bold'}>
                 {letter}
               </Text>
             );
@@ -191,7 +195,9 @@ const InputOTP = forwardRef(
                 styles.otpFloatingView,
                 {backgroundColor: theme.colors.background.surface},
               ]}>
-              <Text typography={'description_s'}>{floatingValue}</Text>
+              <Text typography={'description_default_regular'}>
+                {floatingValue}
+              </Text>
             </View>
           )}
           <View style={styles.otpInputsView}>

package/Input/InputSearch.tsx

@@ -142,7 +142,7 @@ const InputSearch = forwardRef(
         </View>
         {showButtonText && (
           <TouchableOpacity onPress={onPressButtonText}>
-            <Text typography={'action_default'} style={styles.textButton}>
+            <Text typography={'action_default_bold'} style={styles.textButton}>
               {buttonText}
             </Text>
           </TouchableOpacity>

package/Input/InputTextArea.tsx

@@ -71,7 +71,9 @@ const InputTextArea = forwardRef(
     const renderCountingView = () => {
       return (
         <View style={styles.countingView}>
-          <Text color={theme.colors.text.hint} typography={'description_xs'}>
+          <Text
+            color={theme.colors.text.hint}
+            typography={'description_xs_regular'}>
             {`${inputValue.length}/${maxLength}`}
           </Text>
         </View>

package/Input/common.tsx

@@ -64,7 +64,7 @@ export const ErrorView: FC<{errorMessage?: string; errorSpacing?: boolean}> = ({
           style={Styles.flex}
           color={errorColor}
           numberOfLines={2}
-          typography={'description_s'}>
+          typography={'description_default_regular'}>
           {errorMessage}
         </Text>
       </View>
@@ -104,10 +104,12 @@ export const FloatingView: FC<FloatingViewProps> = ({
           },
           style,
         ]}>
-        <Text color={floatingTextColor} typography={'label_s'}>
+        <Text color={floatingTextColor} typography={'label_s_medium'}>
           {floatingValue}
           {required && (
-            <Text typography={'label_s'} color={theme.colors.error.primary}>
+            <Text
+              typography={'label_s_medium'}
+              color={theme.colors.error.primary}>
               *
             </Text>
           )}

package/Pagination/PaginationNumber.tsx

@@ -13,7 +13,7 @@ const PaginationNumber: FC<ChildPaginationProps> = ({
   return (
     <View style={[style, styles.row]}>
       <View style={styles.paginationNumberContainer}>
-        <Text color={Colors.black_01} typography={'label_default'}>{`${
+        <Text color={Colors.black_01} typography={'label_default_medium'}>{`${
           activeIndex + 1
         }/${dataLength}`}</Text>
       </View>

package/Popup/PopupNotify.tsx

@@ -192,12 +192,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
       ]}>
       {!!image && <Image source={{uri: image}} style={styles.image} />}
       <View style={styles.content}>
-        <Text typography={'title_xs'} numberOfLines={1}>
+        <Text typography={'action_default_bold'} numberOfLines={1}>
           {title}
         </Text>
         <Description style={[styles.description, descriptionStyle]}>
           <Text
-            typography={'paragraph_default'}
+            typography={'body_default_regular'}
             onTextLayout={({nativeEvent: {lines}}) => {
               const enableScroll = lines.length > 3;
               if (enableScroll != scrollContent) {
@@ -210,7 +210,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         {!!error && (
           <View style={styles.information}>
             <Text
-              typography={'description_xs'}
+              typography={'description_xs_regular'}
               color={theme.colors.text.hint}
               numberOfLines={1}>
               {translate?.('errorCode')}

package/Radio/index.tsx

@@ -57,7 +57,7 @@ const Radio: FC<RadioProps> = ({
           {marginRight: label ? Spacing.XS : 0},
         ]}
       />
-      {!!label && <Text typography={'description_default'}>{label}</Text>}
+      {!!label && <Text typography={'body_default_regular'}>{label}</Text>}
     </TouchableOpacity>
   );
 };

package/Tag/index.tsx

@@ -71,7 +71,7 @@ const Tag: FC<TagProps> = ({
           color={labelColor}
         />
       )}
-      <Text color={labelColor} typography={'label_s'}>
+      <Text color={labelColor} typography={'label_s_medium'}>
         {label}
       </Text>
     </View>

package/Title/index.tsx

@@ -39,7 +39,7 @@ const Title: FC<TitleProps> = ({
   const renderAction = () => {
     return !!actionTitle && titleFlex ? (
       <TouchableOpacity onPress={onPressAction}>
-        <Text typography={'action_s'} color={theme.colors.primary}>
+        <Text typography={'action_s_bold'} color={theme.colors.primary}>
           {actionTitle}
         </Text>
       </TouchableOpacity>
@@ -116,7 +116,7 @@ const Title: FC<TitleProps> = ({
           {!!description && type !== 'screen' && (
             <Text
               numberOfLines={1}
-              typography={'description_s'}
+              typography={'description_default_regular'}
               color={theme.colors.text.secondary}>
               {description}
             </Text>

package/package.json

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