@janiscommerce/ui-native 1.8.1 → 1.10.0

package/dist/components/{BaseButton → atoms/BaseButton}/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pressable, StyleSheet } from 'react-native';
-import { moderateScale, scaledForDevice } from '../../scale';
+import { moderateScale, scaledForDevice } from '../../../scale';
 const BaseButton = ({ borderRadius = 0, children = null, style, pressedStyle, ...props }) => {
     if (!children) {
         return null;

package/dist/components/atoms/BaseCardList/index.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+import { ViewProps } from 'react-native';
+export interface BaseCardListProps extends ViewProps {
+    children: ReactNode;
+    isSelected?: boolean;
+}
+declare const BaseCardList: FC<BaseCardListProps>;
+export default BaseCardList;

package/dist/components/atoms/BaseCardList/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { palette } from '../../../theme/palette';
+const BaseCardList = ({ children, isSelected = false, style, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: palette.base.white,
+            borderRadius: 20,
+            width: '100%',
+            padding: 16,
+        },
+        selectedContainer: {
+            borderWidth: 2,
+            borderColor: palette.primary.main,
+        },
+    });
+    const activeStyles = [
+        styles.container,
+        isSelected && styles.selectedContainer,
+        style && style,
+    ].filter(Boolean);
+    return (<View style={activeStyles} {...props}>
+			{children}
+		</View>);
+};
+export default BaseCardList;

package/dist/components/{BaseToast → atoms/BaseToast}/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { black, palette } from '../../theme/palette';
+import { black, palette } from '../../../theme/palette';
 import { parseType } from './utils';
 export var Types;
 (function (Types) {

package/dist/components/{CheckBox → atoms/CheckBox}/icon/CheckedIcon.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { base } from '../../../theme/palette';
+import { base } from '../../../../theme/palette';
 import Svg, { Path } from 'react-native-svg';
 const CheckedIcon = ({ color, size }) => (<View>
 		<Svg width={size} height={size} viewBox="0 0 16 16" fill="none">

package/dist/components/{CheckBox → atoms/CheckBox}/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { base, grey, primary } from '../../theme/palette';
-import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+import { base, grey, primary } from '../../../theme/palette';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../../scale';
 import Icon from './icon/CheckedIcon';
 const getCheckBoxScale = (size, divisor) => size / divisor;
 const CheckBox = ({ checked, customSize = 16, checkOnColor = primary.main, checkOffColor = grey[500], iconCheckColor = base.white, borderRadius, disabled = false, style, ...props }) => {

package/dist/components/{Icon → atoms/Icon}/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import icoMoonConfig from './assets/fonts/selection.json';
-import { primary } from '../../theme/palette';
-import { moderateScale, scaledForDevice } from '../../scale';
+import { primary } from '../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../scale';
 const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
 const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
     if (!name) {

package/dist/components/{Input → atoms/Input}/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { TextInput, StyleSheet, View, Text, } from 'react-native';
 import { getBorderColor, getInputInitialState, getLabelColor, getStatusMessageColor, raiseLabel, showStatusMessage, } from './utils';
-import { moderateScale, horizontalScale, scaledForDevice } from '../../scale';
+import { moderateScale, horizontalScale, scaledForDevice } from '../../../scale';
 export var keyboardTypes;
 (function (keyboardTypes) {
     keyboardTypes["default"] = "default";

package/dist/components/{Input → atoms/Input}/utils/index.d.ts

@@ -1,4 +1,4 @@
-import { palette } from '../../../theme/palette';
+import { palette } from '../../../../theme/palette';
 export type Status = keyof typeof palette;
 interface getBorderColorProps {
     inputState: string;

package/dist/components/{Input → atoms/Input}/utils/index.js

@@ -1,4 +1,4 @@
-import { palette } from '../../../theme/palette';
+import { palette } from '../../../../theme/palette';
 export const getInputInitialState = (value) => {
     if (!value) {
         return 'incomplete';

package/dist/components/{Loading → atoms/Loading}/LoadingSvg/index.js

@@ -1,7 +1,7 @@
 import Svg, { Path } from 'react-native-svg';
 import React from 'react';
 import { Animated } from 'react-native';
-import { white } from '../../../theme/palette';
+import { white } from '../../../../theme/palette';
 const LoadingSvg = ({ size, color, ...props }) => {
     return (<Animated.View {...props}>
 			<Svg x="0px" y="0px" width={size} height={size} viewBox="0 0 163 163">

package/dist/components/{Loading → atoms/Loading}/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 import { StyleSheet, View, Animated, Easing } from 'react-native';
 import LoadingSvg from './LoadingSvg';
-import { primary } from '../../theme/palette';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import { primary } from '../../../theme/palette';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const startRotationAnimation = ({ duration, rotationDegree, timingAnimation }) => Animated.loop(Animated.timing(rotationDegree, {
     duration,
     toValue: 360,

package/dist/components/{RadioButton → atoms/RadioButton}/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
 import Text from '../Text';
 import CheckBox from '../CheckBox';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const checkLocation = ['left', 'right'];
 const CheckSizeValues = {
     sm: 16,
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
     },
     row: {
         flexDirection: 'row',
-        justifyContent: 'flex-start',
+        justifyContent: 'space-between',
     },
     reverseRow: {
         flexDirection: 'row-reverse',

package/dist/components/{StatusChip → atoms/StatusChip}/index.js

@@ -1,8 +1,8 @@
 import React, { isValidElement } from 'react';
 import { StyleSheet, View } from 'react-native';
-import { base, grey, primary } from '../../theme/palette';
+import { base, grey, primary } from '../../../theme/palette';
 import Text from '../Text';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const validHeight = scaledForDevice(24, moderateScale);
 const validPadding = scaledForDevice(12, horizontalScale);
 const validBorderRadius = scaledForDevice(12, moderateScale);

package/dist/components/{Svg → atoms/Svg}/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { Isvg } from '../../ts/interfaces/svgs';
+import { Isvg } from '../../../ts/interfaces/svgs';
 declare const Svg: ({ name, width, height, size, ...props }: Isvg) => React.JSX.Element | null;
 export default Svg;

package/dist/components/{Svg → atoms/Svg}/index.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { View } from 'react-native';
-import { svgsNames } from '../../ts/interfaces/svgs';
+import { svgsNames } from '../../../ts/interfaces/svgs';
 import EmptyIllustration from './svgs/EmptyIllustration';
 import EmptyListIllustration from './svgs/EmptyListIllustration';
 import JanisLogo from './svgs/JanisLogo';
 import JanisLogoColor from './svgs/JanisLogoColor';
 import LoginIllustration from './svgs/LoginIllustration';
 import NoNotifications from './svgs/NoNotifications';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 const svgs = {
     'empty-illustration': EmptyIllustration,
     'empty-list-illustration': EmptyListIllustration,

package/dist/components/{Svg → atoms/Svg}/svgs/EmptyIllustration/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const EmptyIllustration: ({ ...props }: Isvg) => React.JSX.Element;
 export default EmptyIllustration;

package/dist/components/{Svg → atoms/Svg}/svgs/EmptyListIllustration/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const EmptyListIllustration: ({ ...props }: Isvg) => React.JSX.Element;
 export default EmptyListIllustration;

package/dist/components/{Svg → atoms/Svg}/svgs/JanisLogo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const JanisLogo: ({ ...props }: Isvg) => React.JSX.Element;
 export default JanisLogo;

package/dist/components/{Svg → atoms/Svg}/svgs/JanisLogoColor/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const JanisLogoColor: ({ ...props }: Isvg) => React.JSX.Element;
 export default JanisLogoColor;

package/dist/components/{Svg → atoms/Svg}/svgs/LoginIllustration/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const LoginIllustration: ({ ...props }: Isvg) => React.JSX.Element;
 export default LoginIllustration;

package/dist/components/{Svg → atoms/Svg}/svgs/NoNotifications/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { Isvg } from '../../../../ts/interfaces/svgs';
+import type { Isvg } from '../../../../../ts/interfaces/svgs';
 declare const Notification: ({ ...props }: Isvg) => React.JSX.Element;
 export default Notification;

package/dist/components/{Text → atoms/Text}/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text as TextComponent, } from 'react-native';
-import { moderateScale, scaledForDevice } from '../../scale';
+import { moderateScale, scaledForDevice } from '../../../scale';
 const Text = ({ children, style, ...props }) => {
     if (!children) {
         return null;

package/dist/components/{Avatar → molecules/Avatar}/index.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Image from '../Image';
-import Text from '../Text';
+import Image from '../../atoms/Image';
+import Text from '../../atoms/Text';
 import { formatPlaceholder } from './utils/formatPlaceholder/index';
-import { horizontalScale, moderateScale, scaledForDevice } from '../../scale';
+import { horizontalScale, moderateScale, scaledForDevice } from '../../../scale';
 export const sizeValues = {
     sm: 24,
     md: 36,

package/dist/components/{Button → molecules/Button}/index.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ViewStyle, TextStyle } from 'react-native';
-import { BaseButtonProps } from '../BaseButton';
+import { BaseButtonProps } from '../../atoms/BaseButton';
 export declare const types: {
     main: string;
     secondary: string;
@@ -32,7 +32,7 @@ export type buttonColor = typeof color;
 export type keyColor = keyof buttonColor;
 export type buttonIconPosition = typeof iconPosition;
 export type keyIconPosition = keyof buttonIconPosition;
-interface ButtonProps extends BaseButtonProps {
+export interface ButtonProps extends BaseButtonProps {
     type?: keyType;
     variant?: keyVariant;
     color?: keyColor;

package/dist/components/{Button → molecules/Button}/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import BaseButton from '../BaseButton';
+import BaseButton from '../../atoms/BaseButton';
 import getButtonStyles from './utils/getButtonStyles';
-import Loading from '../Loading';
-import Text from '../Text';
-import Icon from '../Icon';
+import Loading from '../../atoms/Loading';
+import Text from '../../atoms/Text';
+import Icon from '../../atoms/Icon';
 export const types = {
     main: 'main',
     secondary: 'secondary',
@@ -28,7 +28,10 @@ export const iconPosition = {
     left: 'left',
     right: 'right',
 };
-const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconPosition = 'left', isLoading = false, value = 'Button', icon = null, disabled = false, style, iconStyle, textStyle, ...props }) => {
+const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconPosition = 'left', isLoading = false, value = '', icon = null, disabled = false, style, iconStyle, textStyle, ...props }) => {
+    if (!value && !icon) {
+        return null;
+    }
     const validDisabled = disabled || isLoading;
     const hasIconAndText = !!icon && !!value;
     const borderRadius = variant === 'text' ? 6 : 50;
@@ -42,13 +45,13 @@ const Button = ({ type = 'main', variant = 'contained', color = 'primary', iconP
         hasIconAndText,
     });
     const styles = StyleSheet.create(buttonStyles);
-    const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24}/>;
+    const LoadingComponent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24}/>;
     const WrapperComponent = (<View style={styles.direction}>
 			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24}/>}
-			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+			{!!value && <Text style={[styles.text, textStyle]}>{value}</Text>}
 		</View>);
     return (<BaseButton style={[styles.container, style]} pressedStyle={!validDisabled && styles.pressed} borderRadius={borderRadius} disabled={validDisabled} {...props}>
-			{isLoading ? LoadingCompontent : WrapperComponent}
+			{isLoading ? LoadingComponent : WrapperComponent}
 		</BaseButton>);
 };
 export default Button;

package/dist/components/{Button → molecules/Button}/utils/getButtonStyles/index.js

@@ -1,5 +1,5 @@
-import { moderateScale, scaledForDevice } from '../../../../scale';
-import { palette } from '../../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../../../scale';
+import { palette } from '../../../../../theme/palette';
 import { colorConfig, styleConfig } from './utils/styleConfigs';
 import { validTypes, validVariants, validIconPositions, verticalHeights } from './utils/constants';
 import { defaultColor, defaultIconPosition, defaultType, defaultVariant, } from './utils/defaultValues';

package/dist/components/{Button → molecules/Button}/utils/getButtonStyles/utils/styleConfigs/index.d.ts

@@ -102,6 +102,8 @@ export declare const styleConfig: {
     text: {
         fontWeight: string;
         textAlign: string;
+        fontFamily: string;
+        letterSpacing: number;
     };
     icon: {
         margin: {

package/dist/components/{Button → molecules/Button}/utils/getButtonStyles/utils/styleConfigs/index.js

@@ -1,5 +1,5 @@
-import { moderateScale, scaledForDevice } from '../../../../../../scale';
-import { base, black, grey, white } from '../../../../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../../../../../scale';
+import { base, black, grey, white } from '../../../../../../../theme/palette';
 export const colorConfig = (selectedColor) => {
     return {
         main: {
@@ -105,6 +105,8 @@ export const styleConfig = {
     text: {
         fontWeight: '500',
         textAlign: 'center',
+        fontFamily: 'Roboto-Medium',
+        letterSpacing: 0,
     },
     icon: {
         margin: {

package/dist/components/{Carousel → molecules/Carousel}/utils/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { NativeScrollEvent, NativeSyntheticEvent, ScrollView } from 'react-native';
-import { CarouselProps } from '..';
+import { CarouselProps } from '../';
 declare const useCarouselControls: ({ pages, isLoop, autoplay, autoPlayReverse, intervalTime, customWidth, buttonsCallback, pagesCallback, }: CarouselProps) => {
     activePage: number;
     slider: import("react").MutableRefObject<ScrollView | null>;

package/dist/components/molecules/ItemSelectionButton/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ItemSelectionButtonProps {
+    name: string;
+    selected?: boolean;
+    radioButton?: boolean;
+    leftSelection?: boolean;
+    rightSelection?: boolean;
+    onSelection?: () => {};
+}
+declare const ItemSelectionButton: React.FC<ItemSelectionButtonProps>;
+export default ItemSelectionButton;

package/dist/components/molecules/ItemSelectionButton/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import RadioButton from '../../atoms/RadioButton';
+import CheckBox from '../../atoms/CheckBox';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Text from '../../atoms/Text';
+import { palette } from '../../../theme/palette';
+import { horizontalScale, moderateScale, scaledForDevice, verticalScale } from '../../../scale';
+const validPaddingHorizontal = scaledForDevice(16, horizontalScale);
+const validMarginVertical = scaledForDevice(13, moderateScale);
+const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+    },
+    radioButtonContainer: {
+        display: 'flex',
+        height: verticalScale(48),
+        borderRadius: verticalScale(4),
+    },
+    checkBoxContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: validPaddingHorizontal,
+        marginVertical: validMarginVertical,
+        alignItems: 'center',
+        height: 'auto',
+    },
+    text: {
+        fontSize: 16,
+        fontWeight: '400',
+        color: palette.black.main,
+        textTransform: 'capitalize',
+    },
+    separator: {
+        alignSelf: 'center',
+        borderBottomColor: palette.grey[200],
+        borderBottomWidth: verticalScale(1),
+        width: '90%',
+    },
+});
+const ItemSelectionButton = ({ name, selected = false, radioButton = false, leftSelection = false, rightSelection = false, onSelection = () => { }, }) => {
+    if (!name) {
+        return null;
+    }
+    const checkPosition = rightSelection || (!rightSelection && !leftSelection) ? 'right' : 'left';
+    const renderSelectionComponent = () => {
+        if (!radioButton) {
+            return <CheckBox onPress={onSelection} checked={selected} customSize={24}/>;
+        }
+        return (<RadioButton onPress={onSelection} selected={selected} checkPosition={checkPosition} checkSize="md">
+				<Text style={styles.text}>{name}</Text>
+			</RadioButton>);
+    };
+    return (<View style={styles.container}>
+			<TouchableOpacity style={[
+            radioButton && styles.radioButtonContainer,
+            !radioButton && styles.checkBoxContainer,
+        ]} onPress={onSelection}>
+				{leftSelection && !rightSelection && renderSelectionComponent()}
+				{!radioButton && <Text style={styles.text}>{name}</Text>}
+				{((rightSelection && !leftSelection) || (!rightSelection && !leftSelection)) &&
+            renderSelectionComponent()}
+			</TouchableOpacity>
+			<View style={styles.separator}/>
+		</View>);
+};
+export default ItemSelectionButton;

package/dist/components/{LayoutWithBottomButtons → molecules/LayoutWithBottomButtons}/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import BaseButton from '../BaseButton';
-import { palette } from '../../theme/palette';
-import { moderateScale, scaledForDevice } from '../../scale';
+import { palette } from '../../../theme/palette';
+import { moderateScale, scaledForDevice } from '../../../scale';
 import { validVariants, parseButtonsStyles, buttonWrapperVariantStyles } from './utils';
+import Button from '../Button';
 const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgroundColor, ...props }) => {
     if (!children) {
         return null;
@@ -17,6 +17,7 @@ const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgr
     if (!(parsedButtons instanceof Array) || !parsedButtons.length) {
         return null;
     }
+    const isRoundedOnTopVariant = selectedVariant === validVariants.roundedOnTop;
     const styles = StyleSheet.create({
         Container: {
             flex: 1,
@@ -36,7 +37,7 @@ const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgr
         },
         ButtonsWrapper: {
             ...buttonWrapperVariantStyles(selectedVariant),
-            flexDirection: 'row',
+            flexDirection: isRoundedOnTopVariant ? 'column' : 'row',
             justifyContent: 'space-between',
             backgroundColor: validBtnBgColor,
             marginTop: 'auto',
@@ -51,9 +52,9 @@ const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgr
         return (<View style={[styles.Container]} {...props}>
 				{children}
 				<View style={[styles.FullButtonsRoundedWrapper]}>
-					<BaseButton {...fullWidthButton}/>
+					<Button {...fullWidthButton}/>
 					<View style={[styles.TwoButtonsWrapper]}>
-						{newBtns.map(({ ...buttonData }, index) => (<BaseButton key={index.toString()} {...buttonData}/>))}
+						{newBtns.map(({ ...buttonData }, index) => (<Button key={index.toString()} {...buttonData}/>))}
 					</View>
 				</View>
 			</View>);
@@ -64,7 +65,7 @@ const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgr
     return (<View style={[styles.Container]} {...props}>
 			{children}
 			<View style={[styles.ButtonsWrapper]}>
-				{parsedButtons.map(({ ...buttonData }, index) => (<BaseButton key={index.toString()} {...buttonData}/>))}
+				{parsedButtons.map(({ ...buttonData }, index) => (<Button key={index.toString()} {...buttonData}/>))}
 			</View>
 		</View>);
 };

package/dist/components/{LayoutWithBottomButtons → molecules/LayoutWithBottomButtons}/utils/index.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
+import { keyColor } from '../../Button';
 import { PressableProps, ViewStyle, TextStyle } from 'react-native';
 export interface IlayoutButtons extends PressableProps {
-    title?: string | null;
+    value?: string | null;
     icon?: string;
     iconRight?: boolean;
     disabled?: boolean;
     borderRadius?: number;
-    color?: string;
+    color?: keyColor;
     pressedColor?: string;
     style?: ViewStyle;
     iconStyle?: ViewStyle;
@@ -18,6 +19,7 @@ interface IvalidVariants {
     [key: string]: string;
     squared: string;
     rounded: string;
+    roundedOnTop: string;
     default: string;
 }
 export declare const validVariants: IvalidVariants;
@@ -29,7 +31,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
     style: {
         borderRadius?: number | undefined;
         height?: string | number | undefined;
-        backgroundColor: any;
+        backgroundColor: string;
         width: string | number;
         backfaceVisibility?: "visible" | "hidden" | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
@@ -58,7 +60,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         elevation?: number | undefined;
         alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
-        alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
+        alignSelf?: import("react-native").FlexAlignType | "auto" | undefined;
         aspectRatio?: number | undefined;
         borderEndWidth?: string | number | undefined;
         borderStartWidth?: string | number | undefined;
@@ -101,7 +103,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         start?: string | number | undefined;
         top?: string | number | undefined;
         zIndex?: number | undefined;
-        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        direction?: "inherit" | "ltr" | "rtl" | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: {
             width: number;
@@ -117,12 +119,12 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         translateX?: number | undefined;
         translateY?: number | undefined;
     };
-    title?: string | null | undefined;
+    value?: string | null | undefined;
     icon?: string | undefined;
     iconRight?: boolean | undefined;
     disabled?: boolean | undefined;
     borderRadius?: number | undefined;
-    color?: string | undefined;
+    color?: "black" | "primary" | "success" | "error" | "warning" | "alert" | undefined;
     iconStyle?: ViewStyle | undefined;
     textStyle?: TextStyle | undefined;
     width?: string | number | undefined;
@@ -158,10 +160,10 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
     onMagicTap?: (() => void) | undefined;
     accessibilityIgnoresInvertColors?: boolean | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
-    testID?: string | undefined;
-    nativeID?: string | undefined;
     pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
     removeClippedSubviews?: boolean | undefined;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
     collapsable?: boolean | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined;
     renderToHardwareTextureAndroid?: boolean | undefined;
@@ -197,7 +199,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
     style: {
         borderRadius?: number | undefined;
         height?: string | number | undefined;
-        backgroundColor: any;
+        backgroundColor: string;
         backfaceVisibility?: "visible" | "hidden" | undefined;
         borderBottomColor?: import("react-native").ColorValue | undefined;
         borderBottomEndRadius?: number | undefined;
@@ -225,7 +227,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         elevation?: number | undefined;
         alignContent?: "center" | "flex-start" | "flex-end" | "stretch" | "space-between" | "space-around" | undefined;
         alignItems?: import("react-native").FlexAlignType | undefined;
-        alignSelf?: "auto" | import("react-native").FlexAlignType | undefined;
+        alignSelf?: import("react-native").FlexAlignType | "auto" | undefined;
         aspectRatio?: number | undefined;
         borderEndWidth?: string | number | undefined;
         borderStartWidth?: string | number | undefined;
@@ -269,7 +271,7 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         top?: string | number | undefined;
         width?: string | number | undefined;
         zIndex?: number | undefined;
-        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        direction?: "inherit" | "ltr" | "rtl" | undefined;
         shadowColor?: import("react-native").ColorValue | undefined;
         shadowOffset?: {
             width: number;
@@ -285,12 +287,12 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
         translateX?: number | undefined;
         translateY?: number | undefined;
     };
-    title?: string | null | undefined;
+    value?: string | null | undefined;
     icon?: string | undefined;
     iconRight?: boolean | undefined;
     disabled?: boolean | undefined;
     borderRadius?: number | undefined;
-    color?: string | undefined;
+    color?: "black" | "primary" | "success" | "error" | "warning" | "alert" | undefined;
     iconStyle?: ViewStyle | undefined;
     textStyle?: TextStyle | undefined;
     width?: string | number | undefined;
@@ -325,10 +327,10 @@ export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, varian
     onMagicTap?: (() => void) | undefined;
     accessibilityIgnoresInvertColors?: boolean | undefined;
     onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
-    testID?: string | undefined;
-    nativeID?: string | undefined;
     pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
     removeClippedSubviews?: boolean | undefined;
+    testID?: string | undefined;
+    nativeID?: string | undefined;
     collapsable?: boolean | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined;
     renderToHardwareTextureAndroid?: boolean | undefined;