@janiscommerce/ui-native 1.4.0 → 1.6.0

package/dist/components/FullScreenMessage/index.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactElement } from 'react';
+export declare enum animationTypes {
+    Slide = "slide",
+    Fade = "fade",
+    None = "none"
+}
+interface Props {
+    backgroundColor?: string;
+    isVisible?: boolean;
+    title?: string;
+    subtitle?: string;
+    iconName?: string;
+    textsColor?: string;
+    iconColor?: string;
+    animationType?: animationTypes;
+    duration?: number;
+    onEndDuration?: () => void;
+    children?: ReactElement | null;
+}
+declare const FullScreenMessage: FC<Props>;
+export default FullScreenMessage;

package/dist/components/FullScreenMessage/index.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { moderateScale, scaledForDevice } from '../../scale';
+import { base, primary } from '../../theme/palette';
+import Icon from '../Icon';
+import Text from '../Text';
+export var animationTypes;
+(function (animationTypes) {
+    animationTypes["Slide"] = "slide";
+    animationTypes["Fade"] = "fade";
+    animationTypes["None"] = "none";
+})(animationTypes || (animationTypes = {}));
+const FullScreenMessage = ({ backgroundColor = primary.main, title = '', isVisible = false, subtitle = '', iconName = '', textsColor = base.white, iconColor = base.white, animationType = animationTypes.Slide, duration = 3000, onEndDuration = () => { }, children = null, ...props }) => {
+    const validTitle = !!title && typeof title === 'string';
+    const validSubtitle = !!subtitle && typeof subtitle === 'string';
+    const validIconName = !!iconName && typeof iconName === 'string';
+    const validPaddingHorizontal = scaledForDevice(50, moderateScale);
+    const validMarginBottomTitle = scaledForDevice(30, moderateScale);
+    const validMarginBottomSubtitle = scaledForDevice(50, moderateScale);
+    const validFontTitle = scaledForDevice(32, moderateScale);
+    const validFontSubtitle = scaledForDevice(16, moderateScale);
+    const validLineHeightTitle = scaledForDevice(40, moderateScale);
+    const styles = StyleSheet.create({
+        container: {
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '100%',
+            height: '100%',
+            backgroundColor: backgroundColor,
+        },
+        title: {
+            fontWeight: 'bold',
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomTitle,
+            fontSize: validFontTitle,
+            lineHeight: validLineHeightTitle,
+        },
+        subtitle: {
+            textAlign: 'center',
+            color: textsColor,
+            paddingHorizontal: validPaddingHorizontal,
+            marginBottom: validMarginBottomSubtitle,
+            fontSize: validFontSubtitle,
+        },
+    });
+    useEffect(() => {
+        if (isVisible) {
+            setTimeout(() => {
+                onEndDuration();
+            }, duration);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible]);
+    return (<Modal visible={isVisible} animationType={animationType} transparent {...props}>
+			<View style={styles.container}>
+				{children ?? (<>
+						{validTitle && <Text style={styles.title}>{title}</Text>}
+						{validSubtitle && <Text style={styles.subtitle}>{subtitle}</Text>}
+						{validIconName && <Icon color={iconColor} size={130} name={iconName}/>}
+					</>)}
+			</View>
+		</Modal>);
+};
+export default FullScreenMessage;

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

@@ -20,9 +20,9 @@ interface raiseLabelProps {
     inputState: string;
 }
 export declare const getInputInitialState: (value: string) => "incomplete" | "complete";
-export declare const getBorderColor: ({ inputState, hasMessage, status, inputColor, }: getBorderColorProps) => string;
-export declare const getLabelColor: ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }: getLabelColorProps) => string;
+export declare const getBorderColor: ({ inputState, hasMessage, status, inputColor, }: getBorderColorProps) => any;
+export declare const getLabelColor: ({ disabled, readOnly, inputColor, inputState, statusMessage, status, }: getLabelColorProps) => any;
 export declare const raiseLabel: ({ disabled, hasMessage, inputState }: raiseLabelProps) => boolean;
 export declare const showStatusMessage: (hasMessage: boolean, inputState: string) => boolean;
-export declare const getStatusMessageColor: (status: Status) => string;
+export declare const getStatusMessageColor: (status: Status) => any;
 export {};

package/dist/components/LayoutWithBottomButtons/index.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+import type { IlayoutButtons } from './utils';
+interface LayoutWithBottomButtonsProps extends ViewProps {
+    children: ReactElement | string;
+    buttons: Array<IlayoutButtons>;
+    variant?: string;
+    buttonBackgroundColor?: string;
+}
+declare const LayoutWithBottomButtons: ({ children, buttons, variant, buttonBackgroundColor, ...props }: LayoutWithBottomButtonsProps) => React.JSX.Element | null;
+export default LayoutWithBottomButtons;

package/dist/components/LayoutWithBottomButtons/index.js

@@ -0,0 +1,71 @@
+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 { validVariants, parseButtonsStyles, buttonWrapperVariantStyles } from './utils';
+const LayoutWithBottomButtons = ({ children, buttons, variant = '', buttonBackgroundColor, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    if (!(buttons instanceof Array) || !buttons.length) {
+        return null;
+    }
+    const selectedVariant = validVariants[variant] || validVariants.default;
+    const parsedButtons = parseButtonsStyles(buttons, selectedVariant);
+    const validBtnBgColor = buttonBackgroundColor || palette.base.white;
+    if (!(parsedButtons instanceof Array) || !parsedButtons.length) {
+        return null;
+    }
+    const styles = StyleSheet.create({
+        Container: {
+            flex: 1,
+            backgroundColor: 'transparent',
+        },
+        FullButtonsRoundedWrapper: {
+            ...buttonWrapperVariantStyles(selectedVariant),
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            backgroundColor: validBtnBgColor,
+            marginTop: 'auto',
+        },
+        TwoButtonsWrapper: {
+            marginTop: scaledForDevice(8, moderateScale),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+        },
+        ButtonsWrapper: {
+            ...buttonWrapperVariantStyles(selectedVariant),
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            backgroundColor: validBtnBgColor,
+            marginTop: 'auto',
+            flexWrap: 'wrap',
+        },
+    });
+    const ThreeButtonsLayout = () => {
+        const newBtns = [...parsedButtons];
+        const fullWidthIdx = newBtns.findIndex((btn) => btn.style?.width === '100%');
+        const fullWidthButton = newBtns[fullWidthIdx];
+        newBtns.splice(fullWidthIdx, 1);
+        return (<View style={[styles.Container]} {...props}>
+				{children}
+				<View style={[styles.FullButtonsRoundedWrapper]}>
+					<BaseButton {...fullWidthButton}/>
+					<View style={[styles.TwoButtonsWrapper]}>
+						{newBtns.map(({ ...buttonData }, index) => (<BaseButton key={index.toString()} {...buttonData}/>))}
+					</View>
+				</View>
+			</View>);
+    };
+    if (parsedButtons.length === 3 && selectedVariant === validVariants.rounded) {
+        return ThreeButtonsLayout();
+    }
+    return (<View style={[styles.Container]} {...props}>
+			{children}
+			<View style={[styles.ButtonsWrapper]}>
+				{parsedButtons.map(({ ...buttonData }, index) => (<BaseButton key={index.toString()} {...buttonData}/>))}
+			</View>
+		</View>);
+};
+export default LayoutWithBottomButtons;

package/dist/components/LayoutWithBottomButtons/utils/index.d.ts

@@ -0,0 +1,362 @@
+/// <reference types="react" />
+import { PressableProps, ViewStyle, TextStyle } from 'react-native';
+export interface IlayoutButtons extends PressableProps {
+    title?: string | null;
+    icon?: string;
+    iconRight?: boolean;
+    disabled?: boolean;
+    borderRadius?: number;
+    color?: string;
+    pressedColor?: string;
+    style?: ViewStyle;
+    iconStyle?: ViewStyle;
+    textStyle?: TextStyle;
+    width?: number | string;
+    flex?: number;
+}
+interface IvalidVariants {
+    [key: string]: string;
+    squared: string;
+    rounded: string;
+    default: string;
+}
+export declare const validVariants: IvalidVariants;
+export declare const buttonWrapperVariantStyles: (variant: string) => {
+    padding?: number | undefined;
+};
+export declare const parseButtonsStyles: (buttons: Array<IlayoutButtons>, variant: string) => {
+    pressedColor: any;
+    style: {
+        borderRadius?: number | undefined;
+        height?: string | number | undefined;
+        backgroundColor: any;
+        width: string | number;
+        backfaceVisibility?: "visible" | "hidden" | undefined;
+        borderBottomColor?: import("react-native").ColorValue | undefined;
+        borderBottomEndRadius?: number | undefined;
+        borderBottomLeftRadius?: number | undefined;
+        borderBottomRightRadius?: number | undefined;
+        borderBottomStartRadius?: number | undefined;
+        borderBottomWidth?: number | undefined;
+        borderColor?: import("react-native").ColorValue | undefined;
+        borderEndColor?: import("react-native").ColorValue | undefined;
+        borderLeftColor?: import("react-native").ColorValue | undefined;
+        borderLeftWidth?: number | undefined;
+        borderRightColor?: import("react-native").ColorValue | undefined;
+        borderRightWidth?: number | undefined;
+        borderStartColor?: import("react-native").ColorValue | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+        borderTopColor?: import("react-native").ColorValue | undefined;
+        borderTopEndRadius?: number | undefined;
+        borderTopLeftRadius?: number | undefined;
+        borderTopRightRadius?: number | undefined;
+        borderTopStartRadius?: number | undefined;
+        borderTopWidth?: number | undefined;
+        borderWidth?: number | undefined;
+        opacity?: number | undefined;
+        testID?: string | undefined;
+        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;
+        aspectRatio?: number | undefined;
+        borderEndWidth?: string | number | undefined;
+        borderStartWidth?: string | number | undefined;
+        bottom?: string | number | undefined;
+        display?: "none" | "flex" | undefined;
+        end?: string | number | undefined;
+        flex?: number | undefined;
+        flexBasis?: string | number | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: string | number | undefined;
+        margin?: string | number | undefined;
+        marginBottom?: string | number | undefined;
+        marginEnd?: string | number | undefined;
+        marginHorizontal?: string | number | undefined;
+        marginLeft?: string | number | undefined;
+        marginRight?: string | number | undefined;
+        marginStart?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        marginVertical?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: string | number | undefined;
+        paddingBottom?: string | number | undefined;
+        paddingEnd?: string | number | undefined;
+        paddingHorizontal?: string | number | undefined;
+        paddingLeft?: string | number | undefined;
+        paddingRight?: string | number | undefined;
+        paddingStart?: string | number | undefined;
+        paddingTop?: string | number | undefined;
+        paddingVertical?: string | number | undefined;
+        position?: "absolute" | "relative" | undefined;
+        right?: string | number | undefined;
+        start?: string | number | undefined;
+        top?: string | number | undefined;
+        zIndex?: number | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        shadowColor?: import("react-native").ColorValue | undefined;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transformMatrix?: number[] | undefined;
+        rotation?: number | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        translateX?: number | undefined;
+        translateY?: number | undefined;
+    };
+    title?: string | null | undefined;
+    icon?: string | undefined;
+    iconRight?: boolean | undefined;
+    disabled?: boolean | undefined;
+    borderRadius?: number | undefined;
+    color?: string | undefined;
+    iconStyle?: ViewStyle | undefined;
+    textStyle?: TextStyle | undefined;
+    width?: string | number | undefined;
+    flex?: number | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    children?: import("react").ReactNode | ((state: import("react-native").PressableStateCallbackType) => import("react").ReactNode);
+    delayLongPress?: number | null | undefined;
+    hitSlop?: number | import("react-native").Insets | null | undefined;
+    pressRetentionOffset?: number | import("react-native").Insets | null | undefined;
+    android_disableSound?: boolean | null | undefined;
+    android_ripple?: import("react-native").PressableAndroidRippleConfig | null | undefined;
+    testOnly_pressed?: boolean | null | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    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;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+}[] | {
+    flex: number;
+    pressedColor: any;
+    style: {
+        borderRadius?: number | undefined;
+        height?: string | number | undefined;
+        backgroundColor: any;
+        backfaceVisibility?: "visible" | "hidden" | undefined;
+        borderBottomColor?: import("react-native").ColorValue | undefined;
+        borderBottomEndRadius?: number | undefined;
+        borderBottomLeftRadius?: number | undefined;
+        borderBottomRightRadius?: number | undefined;
+        borderBottomStartRadius?: number | undefined;
+        borderBottomWidth?: number | undefined;
+        borderColor?: import("react-native").ColorValue | undefined;
+        borderEndColor?: import("react-native").ColorValue | undefined;
+        borderLeftColor?: import("react-native").ColorValue | undefined;
+        borderLeftWidth?: number | undefined;
+        borderRightColor?: import("react-native").ColorValue | undefined;
+        borderRightWidth?: number | undefined;
+        borderStartColor?: import("react-native").ColorValue | undefined;
+        borderStyle?: "solid" | "dotted" | "dashed" | undefined;
+        borderTopColor?: import("react-native").ColorValue | undefined;
+        borderTopEndRadius?: number | undefined;
+        borderTopLeftRadius?: number | undefined;
+        borderTopRightRadius?: number | undefined;
+        borderTopStartRadius?: number | undefined;
+        borderTopWidth?: number | undefined;
+        borderWidth?: number | undefined;
+        opacity?: number | undefined;
+        testID?: string | undefined;
+        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;
+        aspectRatio?: number | undefined;
+        borderEndWidth?: string | number | undefined;
+        borderStartWidth?: string | number | undefined;
+        bottom?: string | number | undefined;
+        display?: "none" | "flex" | undefined;
+        end?: string | number | undefined;
+        flex?: number | undefined;
+        flexBasis?: string | number | undefined;
+        flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
+        flexGrow?: number | undefined;
+        flexShrink?: number | undefined;
+        flexWrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | undefined;
+        left?: string | number | undefined;
+        margin?: string | number | undefined;
+        marginBottom?: string | number | undefined;
+        marginEnd?: string | number | undefined;
+        marginHorizontal?: string | number | undefined;
+        marginLeft?: string | number | undefined;
+        marginRight?: string | number | undefined;
+        marginStart?: string | number | undefined;
+        marginTop?: string | number | undefined;
+        marginVertical?: string | number | undefined;
+        maxHeight?: string | number | undefined;
+        maxWidth?: string | number | undefined;
+        minHeight?: string | number | undefined;
+        minWidth?: string | number | undefined;
+        overflow?: "visible" | "hidden" | "scroll" | undefined;
+        padding?: string | number | undefined;
+        paddingBottom?: string | number | undefined;
+        paddingEnd?: string | number | undefined;
+        paddingHorizontal?: string | number | undefined;
+        paddingLeft?: string | number | undefined;
+        paddingRight?: string | number | undefined;
+        paddingStart?: string | number | undefined;
+        paddingTop?: string | number | undefined;
+        paddingVertical?: string | number | undefined;
+        position?: "absolute" | "relative" | undefined;
+        right?: string | number | undefined;
+        start?: string | number | undefined;
+        top?: string | number | undefined;
+        width?: string | number | undefined;
+        zIndex?: number | undefined;
+        direction?: "ltr" | "rtl" | "inherit" | undefined;
+        shadowColor?: import("react-native").ColorValue | undefined;
+        shadowOffset?: {
+            width: number;
+            height: number;
+        } | undefined;
+        shadowOpacity?: number | undefined;
+        shadowRadius?: number | undefined;
+        transform?: (import("react-native").PerpectiveTransform | import("react-native").RotateTransform | import("react-native").RotateXTransform | import("react-native").RotateYTransform | import("react-native").RotateZTransform | import("react-native").ScaleTransform | import("react-native").ScaleXTransform | import("react-native").ScaleYTransform | import("react-native").TranslateXTransform | import("react-native").TranslateYTransform | import("react-native").SkewXTransform | import("react-native").SkewYTransform | import("react-native").MatrixTransform)[] | undefined;
+        transformMatrix?: number[] | undefined;
+        rotation?: number | undefined;
+        scaleX?: number | undefined;
+        scaleY?: number | undefined;
+        translateX?: number | undefined;
+        translateY?: number | undefined;
+    };
+    title?: string | null | undefined;
+    icon?: string | undefined;
+    iconRight?: boolean | undefined;
+    disabled?: boolean | undefined;
+    borderRadius?: number | undefined;
+    color?: string | undefined;
+    iconStyle?: ViewStyle | undefined;
+    textStyle?: TextStyle | undefined;
+    width?: string | number | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onPressIn?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onPressOut?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    onLongPress?: ((event: import("react-native").GestureResponderEvent) => void) | null | undefined;
+    children?: import("react").ReactNode | ((state: import("react-native").PressableStateCallbackType) => import("react").ReactNode);
+    delayLongPress?: number | null | undefined;
+    hitSlop?: number | import("react-native").Insets | null | undefined;
+    pressRetentionOffset?: number | import("react-native").Insets | null | undefined;
+    android_disableSound?: boolean | null | undefined;
+    android_ripple?: import("react-native").PressableAndroidRippleConfig | null | undefined;
+    testOnly_pressed?: boolean | null | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    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;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+}[];
+export {};

package/dist/components/LayoutWithBottomButtons/utils/index.js

@@ -0,0 +1,135 @@
+import { moderateScale, scaledForDevice } from '../../../scale';
+import { palette } from '../../../theme/palette';
+export const validVariants = {
+    squared: 'squared',
+    rounded: 'rounded',
+    default: 'squared',
+};
+const buttonVariantStyles = (variant) => ({
+    ...(variant === 'rounded' && {
+        borderRadius: scaledForDevice(48, moderateScale),
+        height: scaledForDevice(48, moderateScale),
+    }),
+    ...(variant === 'squared' && {
+        borderRadius: scaledForDevice(1, moderateScale),
+        height: scaledForDevice(60, moderateScale),
+    }),
+});
+const getBackgroundColor = ({ color, pressedColor: receivedPressedColor, disabled, }) => {
+    const validColor = typeof color === 'string' ? color : 'primary';
+    const validPressedColor = typeof receivedPressedColor === 'string' ? receivedPressedColor : validColor;
+    palette.grey[200];
+    const backgroundColor = disabled ? palette.grey[200] : palette[validColor]?.main || validColor;
+    const pressedColor = palette[validPressedColor]?.dark || validPressedColor;
+    return { backgroundColor, pressedColor };
+};
+export const buttonWrapperVariantStyles = (variant) => ({
+    ...(variant === 'rounded' && {
+        padding: scaledForDevice(16, moderateScale),
+    }),
+});
+const validWidth = (width) => {
+    if (typeof width === 'number' && !Number.isNaN(width)) {
+        return width;
+    }
+    if (typeof width === 'string' && width.includes('%')) {
+        return width;
+    }
+    return null;
+};
+export const parseButtonsStyles = (buttons, variant) => {
+    if (!buttons || !(buttons instanceof Array) || !buttons.length) {
+        return [];
+    }
+    const currentVariant = validVariants[variant] || validVariants.default;
+    const newButtons = [...buttons].slice(0, 3);
+    const areButtonsRounded = currentVariant === validVariants.rounded;
+    if (newButtons.length === 3 && areButtonsRounded) {
+        const parsedButtons = newButtons.map((btn, idx) => {
+            const { backgroundColor, pressedColor } = getBackgroundColor(btn);
+            if (idx === 0) {
+                return {
+                    ...btn,
+                    pressedColor,
+                    style: {
+                        ...btn?.style,
+                        backgroundColor,
+                        width: '100%',
+                        ...buttonVariantStyles(currentVariant),
+                    },
+                };
+            }
+            return {
+                ...btn,
+                pressedColor,
+                style: {
+                    ...btn?.style,
+                    backgroundColor,
+                    width: validWidth(btn.width) ?? '49%',
+                    ...buttonVariantStyles(currentVariant),
+                },
+            };
+        });
+        return parsedButtons;
+    }
+    if (newButtons.length === 2 && areButtonsRounded) {
+        const parsedButtons = newButtons.map((btn, idx) => {
+            const { backgroundColor, pressedColor } = getBackgroundColor(btn);
+            if (idx === 0 && btn.width === '100%') {
+                return {
+                    ...btn,
+                    pressedColor,
+                    style: {
+                        ...btn?.style,
+                        backgroundColor,
+                        width: btn.width,
+                        marginBottom: scaledForDevice(10, moderateScale),
+                        ...buttonVariantStyles(currentVariant),
+                    },
+                };
+            }
+            return {
+                ...btn,
+                pressedColor,
+                style: {
+                    ...btn?.style,
+                    backgroundColor,
+                    width: validWidth(btn.width) ?? '49%',
+                    ...buttonVariantStyles(currentVariant),
+                },
+            };
+        });
+        return parsedButtons;
+    }
+    if (newButtons.length === 1 && areButtonsRounded) {
+        const parsedButtons = newButtons.map((btn) => {
+            const { backgroundColor, pressedColor } = getBackgroundColor(btn);
+            return {
+                ...btn,
+                pressedColor,
+                style: {
+                    ...btn?.style,
+                    backgroundColor,
+                    width: '100%',
+                    ...buttonVariantStyles(currentVariant),
+                },
+            };
+        });
+        return parsedButtons;
+    }
+    const flex = 1 / buttons.length;
+    const parsedButtons = newButtons.map((btn) => {
+        const { backgroundColor, pressedColor } = getBackgroundColor(btn);
+        return {
+            ...btn,
+            flex,
+            pressedColor,
+            style: {
+                ...btn?.style,
+                backgroundColor,
+                ...buttonVariantStyles(currentVariant),
+            },
+        };
+    });
+    return parsedButtons;
+};

package/dist/{src/index.d.ts → index.d.ts}

@@ -17,5 +17,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import FullScreenMessage from './components/FullScreenMessage';
+import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };

package/dist/{src/index.js → index.js}

@@ -17,5 +17,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import FullScreenMessage from './components/FullScreenMessage';
+import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
-export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, };
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, ProgressBar, List, BaseButton, getScale, LayoutWithBottomButtons, FullScreenMessage, };

package/dist/{src/scale → scale}/index.js

@@ -1,13 +1,13 @@
 import { Dimensions, PixelRatio, Platform } from 'react-native';
-import { WEB_MODE } from '../../env.json';
 const guidelineBaseWidth = 360;
 const guidelineBaseHeight = 720;
 const isIOS = Platform.OS === 'ios';
+const isWeb = Platform.OS === 'web';
 const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
 const isSmallDevice = (minWidth = 365) => viewportWidth <= minWidth;
 const horizontalScale = (size) => PixelRatio.roundToNearestPixel((viewportWidth / guidelineBaseWidth) * size);
 const verticalScale = (size) => PixelRatio.roundToNearestPixel((viewportHeight / guidelineBaseHeight) * size);
 const moderateScale = (size, factor = 1) => size + (horizontalScale(size) - size) * factor;
 /* istanbul ignore next */
-const scaledForDevice = (size, scaleCallback) => WEB_MODE ? size : scaleCallback(size);
+const scaledForDevice = (size, scaleCallback) => isWeb ? size : scaleCallback(size);
 export { isIOS, viewportWidth, viewportHeight, isSmallDevice, horizontalScale, verticalScale, moderateScale, scaledForDevice, };

package/dist/{src/theme → theme}/palette.d.ts

@@ -1,4 +1,4 @@
-import { Alert, Base, Black, Env, Error, GreyScale, Primary, Success, Warning, White } from '../ts/interfaces/colors';
+import { Alert, Base, Black, Env, Error, GreyScale, Primary, Success, Warning, White, Palette } from '../ts/interfaces/colors';
 declare const primary: Primary;
 declare const black: Black;
 declare const white: White;
@@ -9,16 +9,5 @@ declare const error: Error;
 declare const warning: Warning;
 declare const alert: Alert;
 declare const environment: Env;
-declare const palette: {
-    primary: Primary;
-    black: Black;
-    white: White;
-    grey: GreyScale;
-    base: Base;
-    success: Success;
-    error: Error;
-    warning: Warning;
-    alert: Alert;
-    environment: Env;
-};
+declare const palette: Palette;
 export { primary, black, white, grey, base, success, error, warning, alert, environment, palette };

package/dist/{src/ts → ts}/interfaces/colors.d.ts

@@ -1,4 +1,5 @@
 export interface GreyScale {
+    [key: string]: string;
     100: string;
     200: string;
     300: string;
@@ -8,14 +9,17 @@ export interface GreyScale {
     700: string;
 }
 export interface Env {
+    [key: string]: string;
     qa: string;
     beta: string;
 }
 export interface Base {
+    [key: string]: string;
     black: string;
     white: string;
 }
 export interface gamaColor {
+    [key: string]: string;
     main: string;
     dark: string;
 }
@@ -36,3 +40,16 @@ export interface White extends Primary {
 export interface Black extends gamaColor {
     semiTransparent: string;
 }
+export interface Palette {
+    [key: string]: any;
+    primary: Primary;
+    black: Black;
+    white: White;
+    grey: GreyScale;
+    base: Base;
+    success: Success;
+    error: Error;
+    warning: Warning;
+    alert: Alert;
+    environment: Env;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",
@@ -43,9 +43,9 @@
 	},
 	"homepage": "https://github.com/janis-commerce/ui-native#readme",
 	"peerDependencies": {
-		"react": ">=17.0.2 <=18.2.0",
-		"react-native": ">=0.67.5 <=0.71.7",
-		"react-native-gesture-handler": ">=2.9.0 <=2.13.4",
+		"react": ">=17.0.2",
+		"react-native": ">=0.67.5",
+		"react-native-gesture-handler": ">=2.9.0",
 		"react-native-reanimated": "2.17.0"
 	},
 	"devDependencies": {

package/dist/env.json

@@ -1 +0,0 @@
-{ "LOAD_STORYBOOK": true, "WEB_MODE": false }