@momo-kits/foundation 0.75.1-beta.3 → 0.75.1-beta.6

package/Button/index.tsx

@@ -13,6 +13,9 @@ import styles from './styles';
 import {Icon} from '../Icon';
 
 export interface ButtonProps extends TouchableOpacityProps {
+  /**
+   * Defines the visual style of the button.
+   */
   type?:
     | 'primary'
     | 'secondary'
@@ -21,12 +24,40 @@ export interface ButtonProps extends TouchableOpacityProps {
     | 'danger'
     | 'text'
     | 'disabled';
+
+  /**
+   *  Defines the size of the button.
+   */
   size?: 'large' | 'medium' | 'small';
+
+  /**
+   * If true, the button will take the full width of its container.
+   */
   full?: boolean;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the right side of the button.
+   */
   iconRight?: string;
+
+  /**
+   *  Specifies the name of the icon that should be placed on the left side of the button.
+   */
   iconLeft?: string;
+
+  /**
+   * Represents the text that will be displayed on the button.
+   */
   title: string;
+
+  /**
+   *  If true, the icon of button will use the tint color provided by its container.
+   */
   useTintColor?: boolean;
+
+  /**
+   *  A callback function that is called when the button is pressed.
+   */
   onPress: () => void;
 }
 

package/CheckBox/types.ts

@@ -1,10 +1,38 @@
 import {ViewStyle} from 'react-native';
 
 export type CheckBoxProps = {
+  /**
+   * Represents whether the CheckBox is currently checked (`true`) or unchecked (`false`).
+   */
   value: boolean;
+
+  /**
+   *  Optional. If `true`, the user won't be able to interact with the CheckBox.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   *  Optional. Represents the text label displayed next to the CheckBox.
+   */
   label?: string;
+
+  /**
+   *  A callback function that is called when the value of the CheckBox changes.
+   * Receives the new value of the CheckBox as a parameter.
+   */
   onChange: (value: boolean) => void;
+
+  /**
+   *  Optional. If `true`, the CheckBox will be in an indeterminate state,
+   * which is typically used to represent a "mixed" or "partial" selection state.
+   * Defaults to `false` if not provided.
+   */
   indeterminated?: boolean;
+
+  /**
+   * Optional. Used to apply custom styling to the CheckBox component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Consts/index.ts

@@ -1,3 +1,4 @@
 export * from './colors+spacing+radius';
 export * from './theme';
 export * from './styles';
+export const GRIDVIEW = false;

package/Icon/types.ts

@@ -1,8 +1,27 @@
 import {ViewStyle} from 'react-native';
 
 export type IconProps = {
+  /**
+   * Represents the identifier or the path for the icon image source.
+   * It is a required property.
+   */
   source: string;
+
+  /**
+   * Optional. Represents the size of the icon.
+   * It can be used to set the width and height of the icon.
+   */
   size?: number;
+
+  /**
+   *  Optional. Represents the color of the icon.
+   * It can be any valid color in @momo-kits/foundation.
+   */
   color?: string;
+
+  /**
+   *  Optional. Used to apply custom styling to the Icon component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/IconButton/index.tsx

@@ -11,8 +11,20 @@ import {Icon} from '../Icon';
 import styles from './styles';
 
 export interface IconButtonProps extends TouchableOpacityProps {
+  /**
+   * Represents the name or key of the icon to be displayed on the IconButton.
+   * It is a required property.
+   */
   icon: string;
+
+  /**
+   * Optional. Defines the visual style of the IconButton.
+   */
   type?: 'primary' | 'tonal' | 'secondary' | 'danger' | 'outline' | 'disabled';
+
+  /**
+   * Optional. Defines the size of the IconButton.
+   */
   size?: 'large' | 'small';
 }
 

package/Input/Input.tsx

@@ -8,15 +8,10 @@ import {
 } from 'react-native';
 import {ApplicationContext} from '../Navigation';
 import styles from './styles';
-import {
-  checkTyping,
-  ErrorView,
-  FloatingView,
-  getBorderColor,
-  getSizeStyle,
-} from './common';
+import {ErrorView, FloatingView, getBorderColor, getSizeStyle} from './common';
 import {InputProps} from './index';
 import {Icon} from '../Icon';
+import {checkTyping} from './utils';
 
 const Input: FC<InputProps> = ({
   value,
@@ -33,12 +28,11 @@ const Input: FC<InputProps> = ({
   floatingIconColor,
   iconColor,
   required,
-  defaultValue,
   ...props
 }) => {
   const {theme} = useContext(ApplicationContext);
   const [focused, setFocused] = useState(false);
-  const [haveValue, setHaveValue] = useState(!!value || !!defaultValue);
+  const [haveValue, setHaveValue] = useState(!!value || !!props.defaultValue);
 
   const inputRef = useRef<any>(null);
 

package/Input/InputSearch.tsx

@@ -11,7 +11,7 @@ import {ApplicationContext} from '../Navigation';
 import styles from './styles';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
-import {checkTyping} from './common';
+import {checkTyping} from './utils';
 
 const InputSearch: FC<InputSearchProps> = ({
   placeholder,

package/Input/common.tsx

@@ -116,10 +116,3 @@ export const FloatingView: FC<FloatingViewProps> = ({
   }
   return null;
 };
-
-export const checkTyping = (text: string, value: boolean, setValue: any) => {
-  let typing = text?.length > 0;
-  if (typing != value) {
-    setValue(typing);
-  }
-};

package/Input/index.tsx

@@ -5,14 +5,52 @@ import InputMoney from './InputMoney';
 import {TextInputProps} from 'react-native';
 
 export interface InputProps extends TextInputProps {
+  /**
+   *  Optional. Defines the size of the Input component.
+   */
   size?: 'small' | 'large';
+
+  /**
+   * Optional. Represents the value for the floating title in the Input component.
+   */
   floatingValue?: string;
+
+  /**
+   * Optional. Represents the name or key of the floating icon to be displayed in the Input component.
+   */
   floatingIcon?: string;
+
+  /**
+   * Optional. Represents the error message to be displayed below the Input component when there is an error.
+   */
   errorMessage?: string;
+
+  /**
+   * Optional. Represents the name or key of the icon to be displayed in the Input component.
+   */
   icon?: string;
+
+  /**
+   * Optional. If `true`, the user won't be able to interact with the Input component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * Optional. Represents the color of the floating icon in the Input component.
+   */
   floatingIconColor?: string;
+
+  /**
+   * Optional. Represents the color of the icon in the Input component.
+   */
   iconColor?: string;
+
+  /**
+   * Optional. If `true`, the Input component is marked as required,
+   * indicating that the user must provide a value before submitting a form.
+   * Defaults to `false` if not provided.
+   */
   required?: boolean;
 }
 
@@ -27,12 +65,29 @@ type InputPropsOmitForSearch = Omit<
 type InputPropsWithoutPlaceholder = Omit<InputProps, 'placeholder'>;
 
 export interface InputTextAreaProps extends InputPropsWithoutSizeAndIcon {
+  /**
+   * Optional. Defines the height of the InputTextArea component.
+   * It can be used to set a specific height for the text area.
+   */
   height?: number;
 }
 
 export interface InputSearchProps extends InputPropsOmitForSearch {
+  /**
+   * Optional. Represents the text to be displayed on the search button within the InputSearch component.
+   */
   buttonText?: string;
+
+  /**
+   * Optional. If `true`, the text on the search button will be displayed.
+   * Defaults to `false` if not provided.
+   */
   showButtonText?: boolean;
+
+  /**
+   * Optional. If `true`, a border will be displayed around the InputSearch component.
+   * Defaults to `true` if not provided.
+   */
   showBorder?: boolean;
 }
 

package/Input/utils.ts

@@ -59,5 +59,11 @@ const formatMoneyToNumber = (money: string, currencyUnit: string) => {
 
   return Number(money);
 };
+const checkTyping = (text: string, value: boolean, setValue: any) => {
+  let typing = text?.length > 0;
+  if (typing != value) {
+    setValue(typing);
+  }
+};
 
-export {formatMoneyToNumber, formatNumberToMoney};
+export {formatMoneyToNumber, formatNumberToMoney, checkTyping};

package/Layout/Card.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native';
 
 import {CardProps, GridContextProps} from './types';
 import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
 
 const Card: React.FC<CardProps> = ({
   widthSpan = 12,
@@ -72,7 +73,7 @@ const Card: React.FC<CardProps> = ({
       <GridContext.Provider value={gridContext}>
         {children}
       </GridContext.Provider>
-      {__DEV__ && renderOverlay()}
+      {GRIDVIEW && renderOverlay()}
     </View>
   );
 };

package/Layout/Section.tsx

@@ -4,6 +4,7 @@ import {validateChildren} from './utils';
 import Card from './Card';
 import {GridContextProps, SectionProps} from './types';
 import {GridContext} from './index';
+import {GRIDVIEW} from '../Consts';
 
 const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
   const numberOfColumns = 12;
@@ -129,7 +130,7 @@ const Section: React.FC<SectionProps> = ({children, useMargin = true}) => {
           flexWrap: 'wrap',
         }}>
         {renderView(validateChildren(children, Card))}
-        {__DEV__ && renderOverlay()}
+        {GRIDVIEW && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/types.ts

@@ -3,19 +3,59 @@ import {ViewProps} from 'react-native';
 type SpanNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
 export type GridContextProps = {
+  /**
+   * Represents the number of columns in the grid.
+   */
   numberOfColumns: number;
+
+  /**
+   * Represents the size of the gutter between grid items.
+   */
   gutterSize: number;
+
+  /**
+   * Optional. Represents the margin around the grid.
+   */
   margin?: number;
+
+  /**
+   * Represents the size (width or height) per span number.
+   */
   sizePerSpan: number;
+
+  /**
+   * A function that receives a span number and returns the calculated size for that span.
+   */
   getSizeSpan: (span: number) => number;
 };
 export interface SectionProps extends ViewProps {
+  /**
+   * Optional. If `true`, the Section component will be displayed in an expanded state.
+   * Defaults to `false` if not provided.
+   */
   expanded?: boolean;
+
+  /**
+   * Optional. If `true`, margin will be applied to the Section component.
+   * Defaults to `false` if not provided.
+   */
   useMargin?: boolean;
 }
 
 export interface CardProps extends ViewProps {
+  /**
+   * Represents the width of the Card component in terms of span numbers (1-12).
+   */
   widthSpan: SpanNumber;
+
+  /**
+   * Optional. Represents the height of the Card component in terms of span numbers (1-12).
+   */
   heightSpan?: SpanNumber;
+
+  /**
+   * Optional. If `true`, padding will be applied to the Card component.
+   * Defaults to `false` if not provided.
+   */
   usePadding?: boolean;
 }

package/Navigation/Components.tsx

@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
 });
 
 const HeaderTitle: React.FC<any> = props => {
+  const {theme} = useContext(ApplicationContext);
   const opacity = props.animatedValue?.interpolate({
     inputRange: [0, 200],
     outputRange: [0, 1],
@@ -83,12 +84,20 @@ const HeaderTitle: React.FC<any> = props => {
     <Animated.Text
       {...props}
       accessibilityLabel={`HeaderTitle/${props.children}`}
-      style={[styles.title, {opacity, color: props.tintColor}]}
+      style={[
+        styles.title,
+        {fontFamily: `${theme.font}-Bold`, opacity, color: props.tintColor},
+      ]}
     />
   );
 };
 
-const HeaderLeft: React.FC<HeaderBackProps> = ({tintColor, preventBack}) => {
+const HeaderLeft: React.FC<HeaderBackProps> = ({
+  tintColor,
+  preventBack,
+  useBorder,
+  backgroundColor,
+}) => {
   const {navigator} = useContext(ApplicationContext);
   const goBack = () => {
     const canGoBack = navigator?.ref.current?.canGoBack();
@@ -125,6 +134,8 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({tintColor, preventBack}) => {
         tintColor={tintColor}
         onPress={goBack}
         accessibilityLabel={'Back'}
+        useBorder={useBorder}
+        backgroundColor={backgroundColor}
       />
     </View>
   );
@@ -137,9 +148,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
 }) => {
   const {theme} = useContext(ApplicationContext);
   let headerImage = theme.assets?.headerBackground;
-  let borderBottomWidth = 0;
   if (image === null) {
-    borderBottomWidth = 1;
     headerImage = undefined;
   }
   const opacity = animatedValue?.interpolate({
@@ -155,7 +164,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
         {
           backgroundColor: backgroundColor ?? theme.colors.background.default,
           overflow: 'hidden',
-          borderBottomWidth: borderBottomWidth,
+          borderBottomWidth: headerImage ? 0 : 1,
           borderColor: theme.colors.border.default,
           opacity,
         },

package/Navigation/ModalScreen.tsx

@@ -18,6 +18,7 @@ import {
   NavigationButton,
   NavigationContainer,
 } from './index';
+import {HeaderBackground, HeaderLeft} from './Components';
 
 const ModalScreen: React.FC<any> = props => {
   useEffect(() => {
@@ -114,7 +115,6 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
   if (options?.surface) {
     backgroundColor = theme.colors.background.surface;
   }
-  const sheetTheme = {...theme, assets: undefined};
 
   return (
     <SafeAreaView style={Styles.flex}>
@@ -141,11 +141,30 @@ const BottomSheet: React.FC<BottomSheetParams> = ({navigation, route}) => {
               />
             </View>
             <NavigationContainer
-              theme={sheetTheme}
+              theme={{
+                ...theme,
+                assets: {...theme.assets, headerBackground: undefined},
+              }}
               screen={props => <Component {...props} {...params} />}
               options={{
                 ...options,
-                ...{headerLeft: null, headerTransparent: false},
+                ...{
+                  headerLeft: (props: any) => {
+                    if (props.canGoBack) {
+                      return (
+                        <HeaderLeft
+                          {...props}
+                          useBorder={false}
+                          backgroundColor="transparent"
+                        />
+                      );
+                    }
+                  },
+                  headerBackground: () => (
+                    <HeaderBackground backgroundColor={backgroundColor} />
+                  ),
+                  headerTransparent: false,
+                },
                 headerTitleAlign: 'center',
                 headerRight: props => (
                   <HeaderRightAction>

package/Navigation/NavigationContainer.tsx

@@ -11,7 +11,7 @@ import ModalScreen from './ModalScreen';
 import Navigator from './Navigator';
 import {getDialogOptions, getModalOptions, getStackOptions} from './utils';
 import {GridSystem} from '../Layout';
-import {defaultContext} from '../Consts';
+import {defaultContext, GRIDVIEW} from '../Consts';
 import {NavigationContainerProps} from './types';
 
 const Stack = createStackNavigator();
@@ -25,12 +25,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const navigationRef = React.useRef<NavigationContainerRef>(null);
   const navigator = useRef(new Navigator(navigationRef));
 
-  useEffect(() => {
-    if (options) {
-      navigationRef.current?.setParams({options: options});
-    }
-  }, []);
-
   return (
     <SafeAreaProvider>
       <BottomSheetModalProvider>
@@ -39,7 +33,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           <ReactNavigationContainer
             theme={{
               ...theme,
-              dark: false,
               colors: {
                 ...theme.colors,
                 background: theme.colors.background.default,
@@ -56,7 +49,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
                 name="Stack"
                 component={StackScreen}
                 initialParams={{screen}}
-                options={getStackOptions(theme)}
+                options={{...getStackOptions(theme), ...options}}
               />
               <Stack.Screen
                 name="Dialog"
@@ -74,7 +67,7 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
           </ReactNavigationContainer>
         </ApplicationContext.Provider>
       </BottomSheetModalProvider>
-      {__DEV__ && <GridSystem />}
+      {GRIDVIEW && <GridSystem />}
     </SafeAreaProvider>
   );
 };

package/Navigation/types.ts

@@ -115,10 +115,9 @@ export type NavigationOptions = {
   animatedValue?: Animated.Value;
 };
 
-export type HeaderBackProps = {
-  tintColor?: string;
+export interface HeaderBackProps extends NavigationButtonProps {
   preventBack?: PopupNotifyProps;
-};
+}
 
 export type HeaderBackgroundProps = {
   image?: string | null;

package/Pagination/types.ts

@@ -2,8 +2,23 @@ import {ScrollView, ScrollViewProps, ViewStyle} from 'react-native';
 import {Ref} from 'react';
 
 export type PaginationProps = {
+  /**
+   * Optional. Defines the visual style of the Pagination component.
+   * - 'default': Represents the default style.
+   * - 'black_white': Represents a pagination that have black background.
+   * - 'number': Represents a style where pages are represented by numbers.
+   * - 'scroll': Represents a scrollable style.
+   */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
+
+  /**
+   * Represents the currently active (selected) index in the Pagination component.
+   */
   activeIndex: number;
+
+  /**
+   * Represents the total number of items (pages) in the Pagination component.
+   */
   dataLength: number;
 };
 
@@ -13,6 +28,10 @@ export type DotProps = {
 };
 
 export interface ScrollIndicatorProps extends ScrollViewProps {
+  /**
+   * Optional. Represents a reference to the ScrollView component.
+   * It can be used to access the instance methods of the ScrollView.
+   */
   scrollViewRef?: Ref<ScrollView>;
 }
 

package/Popup/PopupNotify.tsx

@@ -183,7 +183,7 @@ const styles = StyleSheet.create({
   },
   contentAction: {
     paddingHorizontal: Spacing.XL,
-    paddingBottom: Spacing.L,
+    paddingBottom: Spacing.XL,
   },
   buttonSpace: {
     width: Spacing.S,

package/Popup/types.ts

@@ -1,21 +1,69 @@
 export type PopupNotifyProps = {
+  /**
+   * `image`: Optional. Represents the URL or path of the image to be displayed in the PopupNotify component.
+   */
   image?: string;
+
+  /**
+   * `title`: Represents the title text to be displayed in the PopupNotify component.
+   */
   title: string;
+
+  /**
+   * `description`: Represents the description text to be displayed in the PopupNotify component.
+   */
   description: string;
+
+  /**
+   * `information`: Optional. Represents additional information text to be displayed in the PopupNotify component.
+   */
   information?: string;
+
+  /**
+   * `secondary`: Optional. Represents the secondary action that can be performed from the PopupNotify component.
+   */
   secondary?: PopupAction;
+
+  /**
+   * `primary`: Represents the primary action that can be performed from the PopupNotify component.
+   */
   primary: PopupAction;
+
+  /**
+   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
+   * - 'row': Buttons are laid out horizontally.
+   * - 'column': Buttons are laid out vertically.
+   * - 'auto': The layout is automatically determined by title length.
+   */
   buttonDirection?: PopupActionDirection;
+
+  /**
+   * `onIconClose`: Optional. A callback function that is called when the close icon in the PopupNotify component is pressed.
+   */
   onIconClose?: () => void;
 };
 
 export type PopupPromotionProps = {
+  /**
+   * `image`: Represents the URL or path of the image to be displayed in the PopupPromotion component.
+   */
   image: string;
+
+  /**
+   * `onClose`: Optional. A callback function that is called when the PopupPromotion component is closed.
+   */
   onClose?: () => void;
 };
 
 type PopupAction = {
+  /**
+   * `title`: Represents the title text of the action button.
+   */
   title: string;
+
+  /**
+   * `onPress`: A callback function that is called when the action button is pressed.
+   */
   onPress: () => void;
 };
 

package/Radio/types.ts

@@ -1,10 +1,38 @@
 import {ViewStyle} from 'react-native';
 
 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;
+
+  /**
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Radio component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * `label`: Optional. Represents the text label displayed next to the Radio component.
+   */
   label?: string;
+
+  /**
+   * `onChange`: A callback function that is called when the value of the Radio component changes.
+   * It is triggered when the user interacts with the Radio component.
+   */
   onChange: () => void;
+
+  /**
+   * `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;
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Radio component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Switch/types.ts

@@ -1,8 +1,26 @@
 import {ViewStyle} from 'react-native';
 
 export type SwitchProps = {
+  /**
+   * `value`: Represents whether the Switch component is currently in the 'on' (`true`) or 'off' (`false`) state.
+   */
   value: boolean;
+
+  /**
+   * `onChange`: A callback function that is called when the value of the Switch component changes.
+   * It receives the new value of the Switch as a parameter.
+   */
   onChange: (value: boolean) => void;
+
+  /**
+   * `disabled`: Optional. If `true`, the user won't be able to interact with the Switch component.
+   * Defaults to `false` if not provided.
+   */
   disabled?: boolean;
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Switch component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
 };

package/Tag/types.ts

@@ -1,10 +1,36 @@
 import {ViewStyle} from 'react-native';
 
 export type TagProps = {
+  /**
+   * `label`: Represents the text label displayed on the Tag component.
+   */
   label: string;
+
+  /**
+   * `size`: Optional. Defines the size of the Tag component.
+   * Defaults to 'medium' if not provided.
+   */
   size?: 'medium' | 'large';
+
+  /**
+   * `icon`: Optional. Represents the name or key of the icon to be displayed in the Tag component.
+   */
   icon?: string;
+
+  /**
+   * `color`: Optional. Defines the color style of the Tag component.
+   */
   color?: 'default' | 'orange' | 'green' | 'red' | 'blue' | 'grey';
+
+  /**
+   * `style`: Optional. Used to apply custom styling to the Tag component.
+   * Accepts an object of style properties.
+   */
   style?: ViewStyle;
+
+  /**
+   * `customColor`: Optional. Represents a custom color string (e.g., hex, rgb, rgba, etc.)
+   * that can be applied to the Tag component.
+   */
   customColor?: string;
 };

package/Text/index.tsx

@@ -39,11 +39,24 @@ const FontStyle: {[key: string]: string} = {
 };
 
 export interface TextProps extends RNTextProps {
+  /**
+   * Represents the typography style applied to the Text component.
+   * It defines the appearance of the text in terms of font size, weight, line height etc.
+   */
   typography: Typography;
+
+  /**
+   * Optional. Represents the color of the text in the Text component.
+   * It can be any valid color string (e.g., hex, rgb, rgba, etc.).
+   */
   color?: string;
+
+  /**
+   * Optional. Represents the width of the Text component in terms of span numbers.
+   * It can be used to set a specific width for the text based on a predefined grid system.
+   */
   widthSpan?: number;
 }
-
 const Text: React.FC<TextProps> = ({
   typography,
   color,

package/package.json

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