@lookiero/checkout 0.3.26 → 0.4.0-beta.0

package/dist/infrastructure/ui/shared/components/layouts/column/Column.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { style } from "./Column.style";
+const Column = ({ children, style: customStyle, size = { M: "2/3", L: "1/3" } }) => {
+    const screenSize = useScreenSize();
+    const columnSizeForScreenSize = size[screenSize];
+    return (React.createElement(View, { style: [style.column, columnSizeForScreenSize && style[columnSizeForScreenSize], customStyle] }, children));
+};
+export { Column };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.style.d.ts

@@ -0,0 +1,12 @@
+import { ViewStyle } from "react-native";
+declare const style: {
+    "1/4": ViewStyle;
+    "1/3": ViewStyle;
+    "1/2": ViewStyle;
+    "2/3": ViewStyle;
+    column: {
+        flex: number;
+        width: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/column/Column.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+const stylesForColumSize = {
+    ["1/4"]: {
+        maxWidth: `${100 * (1 / 4)}%`,
+    },
+    ["1/3"]: {
+        maxWidth: `${100 * (1 / 3)}%`,
+    },
+    ["1/2"]: {
+        maxWidth: `${100 * (1 / 2)}%`,
+    },
+    ["2/3"]: {
+        maxWidth: `${100 * (2 / 3)}%`,
+    },
+};
+const style = StyleSheet.create({
+    column: {
+        flex: 1,
+        width: "100%",
+    },
+    ...stylesForColumSize,
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ScreenSize } from "../../../hooks/useScreenSize";
+declare type ColumnSize = "1/4" | "1/3" | "1/2" | "2/3";
+declare type ModalStyle = "overlay" | "row" | "modal" | "header" | "closeButton";
+interface ModalProps {
+    readonly children: ReactNode;
+    readonly visible: boolean;
+    readonly onClose: () => void;
+    readonly showCloseButton?: boolean;
+    readonly header?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly portalHostName?: string;
+    readonly scroll?: boolean;
+    readonly size?: Partial<Record<ScreenSize, ColumnSize>>;
+    readonly style?: Partial<Record<ModalStyle, StyleProp<ViewStyle>>>;
+}
+declare const Modal: FC<ModalProps>;
+export type { ColumnSize };
+export { Modal };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.js

@@ -0,0 +1,79 @@
+import { Portal } from "@gorhom/portal";
+import { useBack } from "@lookiero/aurora-next/build/hooks/useBack/useBack";
+import { animated, useTransition } from "@react-spring/native";
+import React, { useCallback, useMemo, useState } from "react";
+import { Dimensions, Platform, ScrollView, TouchableWithoutFeedback, View, } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../../../theme/theme";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { ButtonIcon } from "../../molecules/buttonIcon/ButtonIcon";
+import { Row } from "../row/Row";
+import { Sticky } from "../sticky/Sticky";
+import { style } from "./Modal.style";
+const { spaceXXL } = theme();
+const TRANSITION_MODAL_SCALE = 0.9;
+const DEFAULT_SAFEAREA_INSET_TOP = spaceXXL;
+const Modal = ({ children, visible, header, footer, portalHostName, onClose, showCloseButton = false, size = { M: "2/3", L: "1/3" }, style: customStyle, scroll = false, }) => {
+    const { height: screenHeight } = Dimensions.get(Platform.OS === "web" ? "window" : "screen");
+    const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    // On Android safeAreaInsetTop won't return the actual value.
+    const screenSizeWithoutInsets = screenHeight - (Platform.OS === "android" ? DEFAULT_SAFEAREA_INSET_TOP : safeAreaInsetTop);
+    const screenSize = useScreenSize();
+    const isSmallDevice = screenSize === "S";
+    const columnSizeForScreenSize = size[screenSize];
+    const handleHardwareBackPress = useCallback(() => {
+        if (!visible) {
+            return;
+        }
+        onClose();
+        return true; // The event will not be bubbled up
+    }, [onClose, visible]);
+    useBack(handleHardwareBackPress);
+    const [modalHeight, setModalHeight] = useState();
+    const handleOnModalLayout = useCallback(({ nativeEvent: { layout: { height }, }, }) => setModalHeight(height), []);
+    const [footerHeight, setFooterHeight] = useState(0);
+    const handleOnFooterLayout = useCallback(({ height }) => setFooterHeight(height), []);
+    const transitions = useTransition(visible, {
+        from: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        enter: { modalOpacity: 1, overlayOpacity: 1, modalTranslateY: 0, modalScale: 1 },
+        leave: isSmallDevice
+            ? {
+                modalOpacity: 1,
+                overlayOpacity: 0,
+                modalTranslateY: (modalHeight || screenHeight) + safeAreaInsetBottom,
+                modalScale: 1,
+            }
+            : { modalOpacity: 0, overlayOpacity: 0, modalTranslateY: 0, modalScale: TRANSITION_MODAL_SCALE },
+        unique: true,
+    });
+    const ModalContentView = useMemo(() => (scroll ? ScrollView : View), [scroll]);
+    return (React.createElement(Portal, { hostName: portalHostName }, transitions(({ modalOpacity, overlayOpacity, modalTranslateY, modalScale }, item) => item && (React.createElement(View, { pointerEvents: visible ? "auto" : "none", style: style.container, testID: "modal" },
+        React.createElement(TouchableWithoutFeedback, { onPress: visible ? onClose : undefined },
+            React.createElement(animated.View, { style: [style.overlay, { opacity: overlayOpacity }, customStyle?.overlay] })),
+        React.createElement(SafeAreaView, { edges: ["right", "top", "left"], pointerEvents: "box-none", style: style.safeArea },
+            React.createElement(Row, { pointerEvents: "box-none", style: [style.row, isSmallDevice && style.rowSmall, customStyle?.row] },
+                React.createElement(animated.View, { pointerEvents: visible ? "auto" : "none", style: [
+                        style.modal,
+                        columnSizeForScreenSize && style[columnSizeForScreenSize],
+                        {
+                            opacity: modalOpacity,
+                            transform: [{ translateY: modalTranslateY }, { scale: modalScale }],
+                            maxHeight: screenSizeWithoutInsets,
+                        },
+                        customStyle?.modal,
+                    ], onLayout: handleOnModalLayout },
+                    (header || showCloseButton) && (React.createElement(View, { style: [style.header, customStyle?.header] },
+                        React.createElement(View, null, header),
+                        showCloseButton && (React.createElement(ButtonIcon, { name: "close", style: { button: customStyle?.closeButton }, onPress: onClose })))),
+                    React.createElement(ModalContentView, null,
+                        React.createElement(View, { style: { paddingBottom: safeAreaInsetBottom + footerHeight } }, children)),
+                    footer && (React.createElement(Sticky, { style: style.stickyFooter, onLayout: handleOnFooterLayout }, footer))))))))));
+};
+export { Modal };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.d.ts

@@ -0,0 +1,58 @@
+import { StyleSheet, ViewStyle } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    overlay: {
+        height: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+        cursor?: string | undefined;
+        backgroundColor: string;
+    };
+    row: {
+        alignContent: "center";
+        flex: number;
+        justifyContent: "center";
+    };
+    rowSmall: {
+        justifyContent: "flex-end";
+    };
+    safeArea: {
+        flex: number;
+        zIndex: number;
+    };
+    stickyFooter: {
+        paddingHorizontal: number;
+    };
+    "1/4": ViewStyle;
+    "1/3": ViewStyle;
+    "1/2": ViewStyle;
+    "2/3": ViewStyle;
+    container: {
+        width: string;
+        height: string;
+        overflow: "hidden";
+    } | {
+        width: string;
+        position: "fixed";
+        height: string;
+        overflow: "hidden";
+    } | {
+        width: string;
+        position: "absolute";
+        height: string;
+        overflow: "hidden";
+    };
+    header: {
+        alignItems: "center";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        padding: number;
+    };
+    modal: {
+        backgroundColor: string;
+        position: "absolute";
+        width: string;
+        zIndex: number;
+    };
+}>;
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/modal/Modal.style.js

@@ -0,0 +1,70 @@
+import { Platform, StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorBase, colorOverlay, spaceM, spaceXL } = theme();
+const modalStylesForColumSize = {
+    ["1/4"]: {
+        maxWidth: `${100 * (1 / 4)}%`,
+    },
+    ["1/3"]: {
+        maxWidth: `${100 * (1 / 3)}%`,
+    },
+    ["1/2"]: {
+        maxWidth: `${100 * (1 / 2)}%`,
+    },
+    ["2/3"]: {
+        maxWidth: `${100 * (2 / 3)}%`,
+    },
+};
+const style = StyleSheet.create({
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    container: {
+        height: "100%",
+        overflow: "hidden",
+        ...Platform.select({
+            web: { position: "fixed" },
+            android: { position: "absolute" },
+            ios: { position: "absolute" },
+        }),
+        width: "100%",
+    },
+    header: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        padding: spaceM,
+    },
+    modal: {
+        backgroundColor: colorBase,
+        position: "absolute",
+        width: "100%",
+        zIndex: 3,
+    },
+    ...modalStylesForColumSize,
+    overlay: {
+        backgroundColor: colorOverlay,
+        ...Platform.select({
+            web: { cursor: "pointer" },
+        }),
+        height: "100%",
+        position: "absolute",
+        width: "100%",
+        zIndex: 1,
+    },
+    row: {
+        alignContent: "center",
+        flex: 1,
+        justifyContent: "center",
+    },
+    rowSmall: {
+        justifyContent: "flex-end",
+    },
+    safeArea: {
+        flex: 1,
+        zIndex: 2,
+    },
+    stickyFooter: {
+        paddingHorizontal: spaceXL,
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { ViewProps } from "react-native";
+interface RowProps extends ViewProps {
+}
+declare const Row: FC<RowProps>;
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { style } from "./Row.style";
+const Row = ({ children, style: customStyle, ...restProps }) => {
+    const screenSize = useScreenSize();
+    const largeStyle = screenSize !== "S" && style.rowLarge;
+    return (React.createElement(View, { style: [style.row, largeStyle, customStyle], ...restProps }, children));
+};
+export { Row };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    row: {
+        alignItems: "center";
+        flexWrap: "wrap";
+        marginHorizontal: string;
+        maxWidth: number;
+        width: string;
+    };
+    rowLarge: {
+        maxWidth: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/row/Row.style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXXL, layoutMaxWidth } = theme();
+const rowLargeMaxWidth = layoutMaxWidth - 2 * spaceXXL;
+const style = StyleSheet.create({
+    row: {
+        alignItems: "center",
+        flexWrap: "wrap",
+        marginHorizontal: "auto",
+        maxWidth: layoutMaxWidth,
+        width: "100%",
+    },
+    rowLarge: {
+        maxWidth: rowLargeMaxWidth,
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface PaginationProps {
+    readonly touchable?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly count?: number;
+    readonly activeIndex?: number;
+    readonly onChange: (index: number) => void;
+    readonly renderItem?: (index: number) => ReactNode;
+}
+declare const Pagination: FC<PaginationProps>;
+export { Pagination };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { style } from "./Pagination.style";
+const Pagination = ({ touchable = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, count = 0, activeIndex = 0, renderItem, onChange, }) => (React.createElement(View, { style: [style.paginationWrapper, paginationStyle], testID: "slider-pagination" }, Array.from(Array(count).keys()).map((index) => (React.createElement(View, { key: index, style: style.paginationContainer },
+    React.createElement(Pressable, { testID: "slider-pagination-item", style: [
+            style.paginationItem,
+            activeIndex === index && style.active,
+            paginationItemStyle,
+            activeIndex === index && paginationActiveItemStyle,
+        ], onPress: !touchable ? undefined : () => onChange(index) }, renderItem?.(index)))))));
+export { Pagination };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.style.d.ts

@@ -0,0 +1,23 @@
+declare const style: {
+    active: {
+        backgroundColor: string;
+    };
+    paginationContainer: {
+        margin: number;
+    };
+    paginationItem: {
+        backgroundColor: string;
+        borderRadius: number;
+        height: number;
+        width: number;
+    };
+    paginationWrapper: {
+        alignItems: "center";
+        bottom: number;
+        flexDirection: "row";
+        justifyContent: "center";
+        position: "absolute";
+        width: string;
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Pagination.style.js

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorGrayscaleS, colorGrayscaleXL } = theme();
+const DOT_SIZE = 8;
+const style = StyleSheet.create({
+    active: {
+        backgroundColor: colorGrayscaleXL,
+    },
+    paginationContainer: {
+        margin: 3,
+    },
+    paginationItem: {
+        backgroundColor: colorGrayscaleS,
+        borderRadius: DOT_SIZE / 2,
+        height: DOT_SIZE,
+        width: DOT_SIZE,
+    },
+    paginationWrapper: {
+        alignItems: "center",
+        bottom: 10,
+        flexDirection: "row",
+        justifyContent: "center",
+        position: "absolute",
+        width: "100%",
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Slider.d.ts

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface SliderProps {
+    readonly children: ReactNode[];
+    readonly active?: number;
+    readonly loop?: boolean;
+    readonly minDistanceToCapture?: number;
+    readonly minDistanceForAction?: number;
+    readonly gesturesEnabled?: boolean;
+    readonly paginationEnabled?: boolean;
+    readonly paginationStyle?: StyleProp<ViewStyle>;
+    readonly paginationItemStyle?: StyleProp<ViewStyle>;
+    readonly paginationActiveItemStyle?: StyleProp<ViewStyle>;
+    readonly onSliderStart?: () => void;
+    readonly onSliderEnd?: () => void;
+    readonly onChanged?: (index: number) => void;
+    readonly paginationRenderItem?: (index: number) => ReactNode;
+}
+declare const Slider: FC<SliderProps>;
+export { Slider };

package/dist/infrastructure/ui/shared/components/layouts/slider/Slider.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Animated, I18nManager, PanResponder, StyleSheet, View, } from "react-native";
+import { Pagination } from "./Pagination";
+import { style } from "./Slider.style";
+const DEFAULT_WIDTH = 200;
+const Slider = ({ children, active = 0, loop = false, minDistanceToCapture = 5, minDistanceForAction = 0.2, gesturesEnabled = true, paginationEnabled = true, paginationStyle, paginationItemStyle, paginationActiveItemStyle, onSliderStart, onSliderEnd, onChanged, paginationRenderItem, }) => {
+    const flatennedChildren = children.flat();
+    const count = flatennedChildren.length;
+    const [width, setWidth] = useState(0);
+    const widthRef = useRef(width);
+    const activeIndex = useRef(active);
+    const animatedValueX = useRef(0);
+    const animatedValueY = useRef(0);
+    const pan = useRef(new Animated.ValueXY()).current;
+    const started = useRef(false);
+    const panResponder = useRef(PanResponder.create({
+        onPanResponderTerminationRequest: () => false,
+        onMoveShouldSetPanResponder: () => gesturesEnabled,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onMoveShouldSetPanResponderCapture: (_e, gestureState) => {
+            if (!gesturesEnabled) {
+                return false;
+            }
+            startAnimation();
+            const allow = Math.abs(gestureState.dx) > minDistanceToCapture;
+            return allow;
+        },
+        onPanResponderGrant: () => fixState(),
+        onPanResponderMove: Animated.event([null, { dx: pan.x }], {
+            useNativeDriver: false,
+        }),
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        onPanResponderRelease: (_e, gesture) => {
+            const correction = gesture.moveX - gesture.x0;
+            if (Math.abs(correction) < widthRef.current * minDistanceForAction) {
+                spring({ x: 0, y: 0 });
+            }
+            else {
+                changeIndex(correction > 0 ? (I18nManager.isRTL ? 1 : -1) : I18nManager.isRTL ? -1 : 1);
+            }
+        },
+        onPanResponderEnd: () => endAnimation(),
+    })).current;
+    const startAnimation = useCallback(() => {
+        if (!started.current) {
+            onSliderStart?.();
+            started.current = true;
+        }
+    }, [onSliderStart]);
+    const endAnimation = useCallback(() => {
+        if (started.current) {
+            onSliderEnd?.();
+            started.current = false;
+        }
+    }, [onSliderEnd]);
+    const fixState = useCallback(() => {
+        animatedValueX.current = widthRef.current * activeIndex.current * (I18nManager.isRTL ? 1 : -1);
+        animatedValueY.current = 0;
+        pan.setOffset({
+            x: animatedValueX.current,
+            y: animatedValueY.current,
+        });
+        pan.setValue({ x: 0, y: 0 });
+    }, [pan]);
+    const spring = useCallback((toValue) => {
+        Animated.spring(pan, {
+            toValue,
+            useNativeDriver: false,
+        }).start();
+    }, [pan]);
+    const changeIndex = useCallback((delta = 1) => {
+        const toValue = { x: 0, y: 0 };
+        let skipChanges = !delta;
+        let calcDelta = delta;
+        if (activeIndex.current <= 0 && delta < 0) {
+            skipChanges = !loop;
+            calcDelta = count + delta;
+        }
+        else if (activeIndex.current + 1 >= count && delta > 0) {
+            skipChanges = !loop;
+            calcDelta = -1 * activeIndex.current + delta - 1;
+        }
+        if (skipChanges) {
+            return spring(toValue);
+        }
+        const index = activeIndex.current + calcDelta;
+        activeIndex.current = index;
+        toValue.x = widthRef.current * (I18nManager.isRTL ? 1 : -1) * calcDelta;
+        spring(toValue);
+        onChanged?.(index);
+    }, [count, loop, onChanged, spring]);
+    const fixAndGo = useCallback((delta) => {
+        fixState();
+        startAnimation();
+        changeIndex(delta);
+    }, [changeIndex, fixState, startAnimation]);
+    const goTo = useCallback((index = 0) => {
+        const delta = index - activeIndex.current;
+        if (delta) {
+            fixAndGo(delta);
+        }
+    }, [fixAndGo]);
+    const getActiveIndex = useCallback(() => activeIndex.current, []);
+    useEffect(() => {
+        pan.x.addListener(({ value }) => (animatedValueX.current = value));
+        pan.y.addListener(({ value }) => (animatedValueY.current = value));
+        return () => {
+            pan.x.removeAllListeners();
+            pan.y.removeAllListeners();
+        };
+    }, [pan.x, pan.y]);
+    useEffect(() => {
+        if (activeIndex.current !== active) {
+            goTo(active);
+        }
+    }, [active, goTo]);
+    const onLayoutWrapper = useCallback(({ nativeEvent: { layout: { width: wrapperWidth }, }, }) => {
+        const width = wrapperWidth || DEFAULT_WIDTH;
+        setWidth(width);
+        widthRef.current = width;
+        fixState();
+    }, [fixState]);
+    return (React.createElement(View, { style: style.container, testID: "slider", onLayout: onLayoutWrapper },
+        React.createElement(Animated.View, { style: StyleSheet.flatten([
+                {
+                    transform: [{ translateX: pan.x }, { translateY: pan.y }],
+                },
+                style.sliderAreaStyle,
+            ]), ...panResponder.panHandlers }, flatennedChildren.map((child, index) => (React.createElement(View, { key: index, style: { width }, testID: "slider-child" }, child)))),
+        paginationEnabled && (React.createElement(Pagination, { activeIndex: getActiveIndex(), count: count, paginationActiveItemStyle: paginationActiveItemStyle, paginationItemStyle: paginationItemStyle, paginationStyle: paginationStyle, renderItem: paginationRenderItem, onChange: (index) => goTo(index) }))));
+};
+export { Slider };

package/dist/infrastructure/ui/shared/components/layouts/slider/Slider.style.d.ts

@@ -0,0 +1,11 @@
+declare const style: {
+    container: {
+        flex: number;
+        overflow: "hidden";
+    };
+    sliderAreaStyle: {
+        flex: number;
+        flexDirection: "row";
+    };
+};
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/slider/Slider.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    container: {
+        flex: 1,
+        overflow: "hidden",
+    },
+    sliderAreaStyle: {
+        flex: 1,
+        flexDirection: "row",
+    },
+});
+export { style };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+interface Layout {
+    readonly width: number;
+    readonly height: number;
+}
+interface StickyProps {
+    readonly children: ReactNode;
+    readonly style?: StyleProp<ViewStyle>;
+    readonly onLayout?: ({ width, height }: Layout) => void;
+}
+declare const Sticky: FC<StickyProps>;
+export type { Layout };
+export { Sticky };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.js

@@ -0,0 +1,12 @@
+import React, { useCallback } from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { theme } from "../../../../theme/theme";
+import { style } from "./Sticky.style";
+const { spaceL } = theme();
+const Sticky = ({ children, style: customStyle, onLayout }) => {
+    const { bottom: safeAreaInsetBottom } = useSafeAreaInsets();
+    const handleOnLayout = useCallback(({ nativeEvent: { layout: { width, height }, }, }) => onLayout?.({ width, height }), [onLayout]);
+    return (React.createElement(View, { style: [style.sticky, { paddingBottom: safeAreaInsetBottom + spaceL }, customStyle], onLayout: handleOnLayout }, children));
+};
+export { Sticky };

package/dist/infrastructure/ui/shared/components/layouts/sticky/Sticky.style.d.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from "react-native";
+declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
+    sticky: {
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    } | {
+        position: "sticky";
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    } | {
+        position: "absolute";
+        backgroundColor: string;
+        bottom: number;
+        elevation: number;
+        paddingTop: number;
+        shadowColor: string;
+        shadowOffset: {
+            height: number;
+            width: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        width: string;
+    };
+}>;
+export { style };