@momo-kits/foundation 0.80.9 → 0.81.1

package/Layout/utils.ts

@@ -1,4 +1,4 @@
-import {Alert, Dimensions} from 'react-native';
+import {Dimensions} from 'react-native';
 import React, {Fragment, ReactElement, useEffect, useState} from 'react';
 
 /**
@@ -10,23 +10,18 @@ const validateChildren = (
   children: React.ReactNode | React.ReactNode[],
   childrenTypes: Array<React.FC>,
 ) => {
-  if (!__DEV__) return children;
-
   const validateType = (child: React.ReactElement) => {
     const valid = childrenTypes.some(
       childrenType => child?.type === childrenType || child?.type == Fragment,
     );
     if (!valid) {
-      Alert.alert(
-        'Component Kits',
+      console.warn(
         `Wrong children type for this component, expected are ${childrenTypes
           .map(type => type.displayName)
           .join(', ')}.`,
       );
     }
-    return valid;
   };
-
   if (Array.isArray(children)) {
     const flattenChildren: React.ReactElement[] = children.flat();
     for (const child of flattenChildren) {

package/Pagination/PaginationDot.tsx

@@ -9,6 +9,7 @@ import {ApplicationContext} from '../Application';
 const PaginationDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const {theme} = useContext(ApplicationContext);
   const renderDots = () => {
@@ -27,7 +28,11 @@ const PaginationDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={styles.paginationPinkContainer}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationPinkContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationDot;

package/Pagination/PaginationNumber.tsx

@@ -8,12 +8,15 @@ import {Colors} from '../Consts';
 const PaginationNumber: FC<ChildPaginationProps> = ({
   activeIndex = 0,
   dataLength = 2,
+  style,
 }) => {
   return (
-    <View style={[styles.paginationNumberContainer]}>
-      <Text color={Colors.black_01} typography={'label_default'}>{`${
-        activeIndex + 1
-      }/${dataLength}`}</Text>
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationNumberContainer}>
+        <Text color={Colors.black_01} typography={'label_default'}>{`${
+          activeIndex + 1
+        }/${dataLength}`}</Text>
+      </View>
     </View>
   );
 };

package/Pagination/PaginationWhiteDot.tsx

@@ -8,6 +8,7 @@ import {Colors, Spacing} from '../Consts';
 const PaginationWhiteDot: FC<ChildPaginationProps> = ({
   dataLength = 2,
   activeIndex = 0,
+  style,
 }) => {
   const renderDots = () => {
     const dots: React.ReactElement[] = [];
@@ -24,7 +25,11 @@ const PaginationWhiteDot: FC<ChildPaginationProps> = ({
     }
     return dots;
   };
-  return <View style={[styles.paginationWhiteContainer]}>{renderDots()}</View>;
+  return (
+    <View style={[style, styles.row]}>
+      <View style={styles.paginationWhiteContainer}>{renderDots()}</View>
+    </View>
+  );
 };
 
 export default PaginationWhiteDot;

package/Pagination/styles.ts

@@ -25,6 +25,8 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.S,
     borderRadius: Radius.L,
     backgroundColor: Colors.black_20 + '33',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   scrollContainer: {
     alignItems: 'center',
@@ -44,4 +46,5 @@ export default StyleSheet.create({
     height: 4,
     borderRadius: Radius.XS,
   },
+  row: {flexDirection: 'row'},
 });

package/Pagination/types.ts

@@ -20,6 +20,8 @@ export type PaginationProps = {
    * Represents the total number of items (pages) in the Pagination component.
    */
   dataLength: number;
+
+  style?: ViewStyle | ViewStyle[];
 };
 
 export type DotProps = {

package/Radio/types.ts

@@ -5,7 +5,7 @@ export type RadioProps = {
    * `value`: Represents the value associated with the Radio component.
    * It is used to determine whether the Radio component is selected or not in comparison with the `groupValue`.
    */
-  value: string;
+  value: any;
 
   /**
    * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
@@ -28,7 +28,7 @@ export type RadioProps = {
    * `groupValue`: Represents the value of the selected Radio component within a group of Radio components.
    * The Radio component for which `value` equals `groupValue` will be selected.
    */
-  groupValue: string;
+  groupValue: any;
 
   /**
    * `style`: Optional. Used to apply custom styling to the Radio component.

package/package.json

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