@ovotech/element-native 5.2.1 → 5.3.0-canary-9e22bfd-413

package/dist/esm/src/components/List/styled.js

@@ -0,0 +1,42 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const SquareBullet = styled.View(({ theme, visible, smallAndUp }) => {
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    const topMargin = (lineHeight - theme.space[200]) / 2;
+    return css `
+    align-self: flex-start;
+    width: ${numToPx(theme.space[200])};
+    height: ${numToPx(theme.space[200])};
+    margin-right: 10px;
+    margin-top: ${numToPx(topMargin)};
+    background-color: ${visible ? theme.color.brand.brand : 'transparent'};
+    transform: rotate(-15deg);
+  `;
+});
+export const TextBullet = styled.Text(({ theme, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    const lineHeight = smallAndUp
+        ? theme.font.lineHeight.md.mediaQuery.lg
+        : theme.font.lineHeight.md.mediaQuery.sm;
+    return css `
+    min-width: ${numToPx(theme.space[300])};
+    min-height: ${numToPx(theme.space[300])};
+    margin-right: ${numToPx(theme.space[100])};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(lineHeight)};
+    text-align: left;
+    color: ${theme.color.surface.onSurface};
+  `;
+});
+export const FlexRow = styled.View `
+  flex-direction: row;
+`;
+export const LiContent = styled.View `
+  flex-direction: column;
+  flex: 1;
+`;

package/dist/esm/src/components/Margin/Margin.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { responsiveStyle } from '../../utils';
+const StyledMargin = styled.View(({ theme, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => numToPx(theme.space[String(spaceKey * 100)]);
+    return `
+    ${horizontal
+        ? `
+            ${responsiveStyle('margin-left', horizontal, breakpoints, formatter)}
+            ${responsiveStyle('margin-right', horizontal, breakpoints, formatter)}
+          `
+        : ''}
+    ${vertical
+        ? `
+            ${responsiveStyle('margin-top', vertical, breakpoints, formatter)}
+            ${responsiveStyle('margin-bottom', vertical, breakpoints, formatter)}
+          `
+        : ''}
+    ${mTop ? responsiveStyle('margin-top', mTop, breakpoints, formatter) : ''}
+    ${mBottom
+        ? responsiveStyle('margin-bottom', mBottom, breakpoints, formatter)
+        : ''}
+    ${mLeft ? responsiveStyle('margin-left', mLeft, breakpoints, formatter) : ''}
+    ${mRight
+        ? responsiveStyle('margin-right', mRight, breakpoints, formatter)
+        : ''}
+    ${all ? responsiveStyle('margin', all, breakpoints, formatter) : ''}
+  `;
+});
+const Margin = ({ top, bottom, left, right, ...rest }) => {
+    const breakpoints = useBreakpoint();
+    return (_jsx(StyledMargin, { ...rest, breakpoints: breakpoints, mTop: top, mBottom: bottom, mLeft: left, mRight: right }));
+};
+export { Margin };

package/dist/esm/src/components/NavHeader/NavHeader.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { Easing, FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { Action } from '../ActionList';
+import { Button } from '../Button';
+import { BackActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, HeaderGap, NavContainer, NavWrapper, } from './NavHeader.styles';
+const FADE_ANIMATION_DURATION = 200;
+export const NavHeader = ({ title, scrolled, canGoBack, rightActionConfig, topOffset = 0, backButtonText = 'Back', onHeaderHeightChange, onBackButtonPress, }) => {
+    const hasRightAction = !!rightActionConfig;
+    const hasTitle = title !== undefined && title?.length > 0;
+    const layoutHeight = useSharedValue(0);
+    const animatedHeightStyle = useAnimatedStyle(() => {
+        return {
+            height: layoutHeight.value,
+        };
+    });
+    const onLayout = (e) => {
+        const { height } = e.nativeEvent.layout;
+        if (height === layoutHeight.value) {
+            return;
+        }
+        // we want to only update height of the expanded header to set content offset on the client side
+        if (!scrolled) {
+            onHeaderHeightChange?.(height);
+        }
+        layoutHeight.value = withTiming(height, {
+            duration: FADE_ANIMATION_DURATION,
+            easing: Easing.linear,
+        });
+    };
+    // NavWrapper will recieve height of the NavContainer and animate it
+    // content inside NavContainer is the only dynamic part of NavHeader
+    return (_jsx(NavWrapper, { collapsed: scrolled, style: animatedHeightStyle, children: _jsxs(NavContainer, { topOffset: topOffset, hasTitle: hasTitle, onLayout: onLayout, children: [_jsx(BackActionWrapper, { collapsed: scrolled, hasBackButton: canGoBack, children: canGoBack && (_jsx(Action, { standalone: true, iconLeft: "chevron-left-small", onPress: onBackButtonPress, children: backButtonText })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", children: title }) }), _jsx(HeaderGap, { hasRightAction: hasRightAction }), hasRightAction && (_jsx(_Fragment, { children: _jsx(Animated.View, { entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle, { hasRightAction: !hasRightAction, hasTitle: hasTitle, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), hasRightAction && (_jsx(Animated.View, { entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: _jsx(Button, { iconRight: rightActionConfig.iconName, onPress: rightActionConfig.onActionPress }) }))] }))] }) }));
+};

package/dist/esm/src/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,67 @@
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+const Z_INDEX = 1000;
+export const NavWrapper = styled(Animated.View)(({ theme, collapsed }) => css `
+    width: 100%;
+    position: absolute;
+
+    /* yes, it is not a good move, but we want header to be the topmost element on the screen and we can't control app zIndex */
+    z-index: ${Z_INDEX};
+    background-color: ${theme.color.surface.surface};
+
+    ${collapsed
+    ? css `
+          border-bottom-width: ${numToPx(theme.border.width.sm)};
+          border-bottom-style: solid;
+          border-bottom-color: ${theme.color.input.borderDim};
+        `
+    : ''}
+  `);
+export const NavContainer = styled.View(({ theme, topOffset, hasTitle }) => css `
+    position: absolute;
+
+    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
+    z-index: ${Z_INDEX + 1};
+    width: 100%;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: ${topOffset
+    ? numToPx(topOffset)
+    : numToPx(theme.space[hasTitle ? 200 : 400])};
+    padding-bottom: ${numToPx(theme.space[hasTitle ? 200 : 400])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${numToPx(theme.space[400])};
+  `);
+export const ExpandedTitle = styled(Animated.Text)(({ theme, hasBackButton, hasRightAction, hasTitle }) => css `
+    width: ${hasRightAction ? '100%' : '65%'};
+    font-family: ${theme.native.font.family.bold};
+    font-size: ${numToPx(theme.font.size['4xl'].mediaQuery[hasBackButton ? 'sm' : 'lg'])};
+    line-height: ${numToPx(hasBackButton
+    ? theme.font.lineHeight['4xl'].mediaQuery.sm
+    : theme.space[1300])};
+    color: ${theme.color.brand.brand};
+    ${!hasTitle && 'height: 0;'};
+  `);
+export const CollapsedTitleWrapper = styled(Animated.View) `
+  width: 33.3%;
+  align-items: center;
+`;
+export const CollapsedTitle = styled.Text(({ theme }) => css `
+    font-family: ${theme.native.font.family.bold};
+    font-size: ${numToPx(theme.font.size.xl.mediaQuery.sm)};
+    line-height: ${numToPx(theme.font.lineHeight.xl.mediaQuery.sm)};
+    color: ${theme.color.brand.brand};
+  `);
+export const HeaderGap = styled.View(({ hasRightAction }) => css `
+    width: ${hasRightAction ? '20%' : '33.3%'};
+  `);
+export const BackActionWrapper = styled(Animated.View)(({ theme, collapsed, hasBackButton }) => css `
+    margin-bottom: ${collapsed ? '0' : numToPx(theme.space[400])};
+    width: ${collapsed ? '33.3%' : '100%'};
+
+    /* Important for maintaining white space above the title on main app screens */
+    height: ${hasBackButton ? numToPx(theme.space[1000]) : undefined};
+  `);

package/dist/esm/src/components/NavigationIcon/NavigationIcon.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TouchableWithoutFeedback, View, } from 'react-native';
+import styled, { css, useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { Strong } from '../Strong';
+const RedDot = styled.View(({ theme }) => css `
+    position: absolute;
+    top: -4px;
+    left: 0;
+    width: ${theme.space[300]};
+    height: ${theme.space[300]};
+    border: 1px solid ${theme.color.surface.surface};
+    background-color: ${theme.color.red[50]};
+    border-radius: ${theme.border.radius['2xl']}px;
+    z-index: 1;
+  `);
+const RedDotContainer = styled.View `
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 50%;
+  height: 0;
+  z-index: 1;
+`;
+export const NavigationIcon = ({ label, iconName, focused, isStatusDotEnabled = false, onPress, size = 24, tintColor, style, accessibilityState, }) => {
+    const isFocused = focused ?? accessibilityState?.selected ?? false;
+    const testID = `${label.toLowerCase()}-tab`;
+    const theme = useTheme();
+    return (_jsx(View, { style: [
+            { flex: 1, alignItems: 'center', justifyContent: 'center' },
+            style,
+        ], children: _jsx(TouchableWithoutFeedback, { onPress: onPress, accessibilityLabel: `${label} Tab`, testID: testID, children: _jsxs(View, { style: [
+                    style,
+                    {
+                        alignItems: 'center',
+                        maxWidth: 550,
+                        width: '100%',
+                    },
+                ], children: [isStatusDotEnabled && (_jsx(RedDotContainer, { children: _jsx(RedDot, {}) })), _jsx(Icon, { size: size, color: isFocused
+                            ? tintColor || theme.color.brand.brand
+                            : theme.color.surface.onSurface, name: iconName }), _jsx(P, { size: "sm", style: {
+                            minWidth: 60,
+                            textAlign: 'center',
+                        }, children: _jsx(Strong, { children: label }) })] }) }) }));
+};

package/dist/esm/src/components/NavigationIcon/index.js

@@ -0,0 +1 @@
+export { NavigationIcon } from './NavigationIcon';

package/dist/esm/src/components/Notification/Notification.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useState } from 'react';
+import { View } from 'react-native';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+const NotificationBox = styled.View(({ theme, noMargin, variant }) => {
+    return css `
+    position: relative;
+    margin-bottom: ${noMargin ? 0 : numToPx(theme.space[400])};
+    border: ${numToPx(theme.border.width.sm)} solid
+      ${theme.color.alert[variant]};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+    overflow: hidden;
+  `;
+});
+export const NotificationContentBox = styled.View(({ theme }) => {
+    return css `
+    background-color: ${theme.color.surface.bright};
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[300])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${numToPx(theme.space[400])};
+  `;
+});
+export const NotificationTitleBox = styled.View(({ theme, variant, dismissible }) => {
+    const currentVariant = theme.color.alert[`${variant}Tint`];
+    return css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: ${currentVariant};
+    padding-top: ${numToPx(theme.space[200])};
+    padding-bottom: ${numToPx(theme.space[200])};
+    padding-left: ${numToPx(theme.space[400])};
+    padding-right: ${dismissible
+        ? numToPx(theme.space[300])
+        : numToPx(theme.space[400])};
+    min-height: 44px;
+  `;
+});
+const NotificationTitleText = styled.Text(({ theme, variant }) => {
+    const currentVariant = theme.color.alert[variant];
+    return css `
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+    font-family: ${theme.native.font.family.bold};
+    color: ${currentVariant};
+  `;
+});
+const DismissButton = styled.TouchableOpacity(({ theme }) => {
+    return css `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 28px;
+    height: 28px;
+    background: ${theme.button.surface.color.bg};
+    border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.link};
+    border-radius: ${numToPx(theme.border.radius['2xl'])};
+  `;
+});
+const StyledIcon = styled(Icon)(({ theme }) => `
+    color: ${theme.color.surface.bright};
+  `);
+export const Notification = ({ variant = 'info', children, title, noMargin, dismissible, onDismiss, ref, ...rest }) => {
+    const [dismissed, setDismissed] = useState(false);
+    if (dismissed || (!title && !children)) {
+        return null;
+    }
+    return (_jsx(View, { ref: ref, ...rest, children: _jsxs(NotificationBox, { variant: variant, noMargin: noMargin, testID: "nb-notification", children: [_jsxs(NotificationTitleBox, { variant: variant, dismissible: dismissible, children: [_jsx(NotificationTitleText, { variant: variant, children: title }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
+                                setDismissed(true);
+                                if (onDismiss) {
+                                    onDismiss();
+                                }
+                            }, children: _jsx(StyledIcon, { name: "cross", size: "16" }) })) : null] }), children ? (_jsx(NotificationContentBox, { "data-testid": "el-notification-box", children: children })) : null] }) }));
+};
+export const ErrorNotification = (props) => (_jsx(Notification, { variant: "error", ...props }));
+export const SuccessNotification = (props) => (_jsx(Notification, { variant: "success", ...props }));
+export const InfoNotification = (props) => (_jsx(Notification, { variant: "info", ...props }));
+export const WarningNotification = (props) => (_jsx(Notification, { variant: "warning", ...props }));

package/dist/esm/src/components/Notification/index.js

@@ -0,0 +1 @@
+export { ErrorNotification, InfoNotification, Notification, SuccessNotification, WarningNotification, } from './Notification';

package/dist/esm/src/components/NumberField/NumberField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { NumberInput } from '../NumberInput';
+export const NumberField = ({ ref, ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(NumberInput, { ref: ref }) }));
+};

package/dist/esm/src/components/NumberInput/NumberInput.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+const NumberInput = (props) => (_jsx(Input, { keyboardType: "numeric", autoCapitalize: "none", autoCorrect: false, ...props }));
+export { NumberInput };

package/dist/esm/src/components/P/P.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const StyledText = styled.Text(({ theme, smallAndUp, inverted, size = 'md' }) => {
+    return css `
+      font-family: ${theme.native.font.family.book};
+      font-size: ${numToPx(theme.font.size[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      line-height: ${numToPx(theme.font.lineHeight[size].mediaQuery[smallAndUp ? 'lg' : 'sm'])};
+      color: ${inverted
+        ? theme.color.surface.surface
+        : theme.color.surface.onSurface};
+    `;
+});
+export const P = (props) => {
+    const breakpoints = useBreakpoint();
+    return _jsx(StyledText, { ...props, ...breakpoints });
+};

package/dist/esm/src/components/PasswordField/PasswordField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { PasswordInput } from '../PasswordInput';
+export const PasswordField = ({ hasVisibilityToggle, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle }) }));
+};

package/dist/esm/src/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+import { PasswordVisibilityToggle, useTogglePasswordVisibility, } from './PasswordVisibilityToggle';
+const PasswordInput = (props) => {
+    const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
+    return (_jsx(Input, { rightSlot: props.hasVisibilityToggle ? (_jsx(PasswordVisibilityToggle, { iconName: isPasswordVisible ? 'hide' : 'show', visibilityToggleLabel: isPasswordVisible ? 'Hide password' : 'Show password', handlePasswordVisibility: handlePasswordVisibility })) : null, keyboardType: "default", autoCapitalize: "none", autoCorrect: false, blurOnSubmit: false, secureTextEntry: !isPasswordVisible, ...props }));
+};
+export { PasswordInput };

package/dist/esm/src/components/PasswordInput/PasswordInput.styled.js

@@ -0,0 +1,14 @@
+import { numToPx } from '@ovotech/element-core';
+import { Pressable } from 'react-native';
+import styled, { css } from '../../styled.native';
+export const StyledPressable = styled(Pressable)(({ theme, focused, }) => {
+    return css `
+    display: flex;
+    align-items: center;
+    position: absolute;
+    width: ${numToPx(theme.space[400])};
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    right: ${numToPx(theme.space[300])};
+  `;
+});

package/dist/esm/src/components/PasswordInput/PasswordVisibilityToggle.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../Icon';
+import { StyledPressable } from './PasswordInput.styled';
+export const useTogglePasswordVisibility = () => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const handlePasswordVisibility = () => {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+    return {
+        isPasswordVisible,
+        handlePasswordVisibility,
+    };
+};
+export const PasswordVisibilityToggle = ({ iconName, visibilityToggleLabel, handlePasswordVisibility, }) => {
+    const [focused, setFocused] = useState(false);
+    return (_jsx(StyledPressable, { testID: "password-input-visibility-toggle", focused: focused, accessible: true, accessibilityRole: "button", accessibilityLabel: visibilityToggleLabel, onPress: handlePasswordVisibility, hitSlop: 16, onFocus: () => {
+            setFocused(true);
+        }, onBlur: () => {
+            setFocused(false);
+        }, children: _jsx(Icon, { name: iconName, size: 16, pointerEvents: "none" }) }));
+};

package/dist/esm/src/components/PhoneField/PhoneField.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { PhoneInput } from '../PhoneInput';
+export const PhoneField = ({ ...props }) => {
+    return (_jsx(Field, { ...props, children: _jsx(PhoneInput, {}) }));
+};

package/dist/esm/src/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../Input/Input';
+export const PhoneInput = (props) => (_jsx(Input, { ...props, keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false }));

package/dist/esm/src/components/Pictogram/Pictogram.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { usePictograms } from '../../providers';
+import { ThemeContext } from '../../styled.native';
+export const Pictogram = ({ name, size = '64', color, testID, ...rest }) => {
+    const pictograms = usePictograms();
+    const theme = useContext(ThemeContext);
+    // @ts-ignore to support additional pictograms.
+    const Svg = name && pictograms[name];
+    return Svg ? (_jsx(Svg, { testID: testID ? testID : `element-icon${name ? `-${name}` : ''}`, color: color ?? theme.color.brand.brand, width: size, height: size, ...rest })) : null;
+};

package/dist/esm/src/components/ProductCarousel/NavigationDots.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+export function NavigationDots({ data, animatedValue, }) {
+    return (_jsx(SDotsContainer, { children: data.map((_, index) => (_jsx(Dot, { index: index, length: data.length, animatedValue: animatedValue }, index))) }));
+}
+const Dot = ({ animatedValue, index, length, width = 10 }) => {
+    const theme = useTheme();
+    const animatedStyle = useAnimatedStyle(() => {
+        let inputRange = [index - 1, index, index + 1];
+        let outputRange = [-width, 0, width];
+        if (index === 0 && animatedValue?.value > length - 1) {
+            inputRange = [length - 1, length, length + 1];
+            outputRange = [-width, 0, width];
+        }
+        const backgroundColor = interpolateColor(animatedValue?.value, inputRange, [
+            theme.color.brand.dim,
+            theme.color.brand.bold,
+            theme.color.brand.dim,
+        ]);
+        return {
+            transform: [
+                {
+                    translateX: interpolate(animatedValue?.value, inputRange, outputRange, Extrapolate.CLAMP),
+                },
+            ],
+            backgroundColor,
+        };
+    }, [animatedValue, index, length]);
+    return (_jsx(SDot, { "$width": width, children: _jsx(SAnimatedDot, { style: animatedStyle }) }));
+};
+const SDotsContainer = styled.View `
+  position: absolute;
+  bottom: 20px;
+  flex-direction: row;
+  gap: 10px;
+`;
+const SDot = styled.View `
+  background-color: ${({ theme }) => theme.color.brand.dim};
+  width: ${({ $width }) => $width}px;
+  height: ${({ $width }) => $width}px;
+  border-radius: 50px;
+  overflow: hidden;
+`;
+const SAnimatedDot = styled(Animated.View) `
+  border-radius: 20px;
+  flex: 1;
+`;

package/dist/esm/src/components/ProductCarousel/ProductCarousel.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useRef } from 'react';
+import { View, useWindowDimensions } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue, } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import Svg, { Path } from 'react-native-svg';
+import { useBreakpoint } from '../../hooks';
+import styled, { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { NavigationDots } from './NavigationDots';
+import { withAnchorPoint } from './anchor-point';
+export function ProductCarousel({ data, children, width, height, fullWidth, showArrows = true, showDots = false, loop = true, arrowsDistanceFromTop, }) {
+    const theme = useTheme();
+    const { mediumAndUp } = useBreakpoint();
+    const carouselRef = useRef(null);
+    const progressValue = useSharedValue(0);
+    const windowWidth = useWindowDimensions().width;
+    const carouselWidth = fullWidth ? windowWidth : width || windowWidth;
+    return (_jsxs(View, { children: [mediumAndUp ? null : _jsx(SkewLine, {}), _jsxs(SCarouselContainer, { children: [_jsx(Carousel, { ref: carouselRef, data: data, renderItem: ({ item, animationValue }) => (_jsx(Card, { animationValue: animationValue, height: height, width: carouselWidth, children: children(item) })), vertical: false, width: carouselWidth, height: height, onProgressChange: (_, absoluteProgress) => (progressValue.value = absoluteProgress), panGestureHandlerProps: {
+                            activeOffsetX: [-20, 20],
+                        }, loop: loop, testID: "carousel", scrollAnimationDuration: 700 }), showArrows && data.length > 1 && (_jsxs(_Fragment, { children: [_jsx(SActionPressable, { onPress: () => carouselRef.current?.prev(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                }, children: _jsx(Icon, { name: "arrow-left", size: 32, color: theme.color.brand.onBrand }) }), _jsx(SActionPressable, { "$next": true, onPress: () => carouselRef.current?.next(), "$top": arrowsDistanceFromTop, mediumAndUp: mediumAndUp, hitSlop: {
+                                    top: 32,
+                                    bottom: 32,
+                                    left: 16,
+                                    right: 16,
+                                }, children: _jsx(Icon, { name: "arrow-right", size: 32, color: theme.color.brand.onBrand }) })] })), showDots && data.length > 1 && (_jsx(NavigationDots, { data: data, animatedValue: progressValue }))] })] }));
+}
+const Card = ({ children, animationValue, height, width, }) => {
+    const WIDTH = width / 1.3;
+    const HEIGHT = height / 1.3;
+    const cardStyle = useAnimatedStyle(() => {
+        const scale = interpolate(animationValue.value, [-0.1, 0, 1], [0.95, 1, 1], Extrapolation.CLAMP);
+        const opacity = interpolate(animationValue.value, [-0.75, 0, 1], [0, 1, 0]);
+        const translateX = interpolate(animationValue.value, [-1, -0.2, 0, 1], [0, WIDTH * 0.3, 0, 0]);
+        const transform = {
+            transform: [
+                { scale },
+                { translateX },
+                { perspective: 200 },
+                {
+                    rotateY: `${interpolate(animationValue.value, [-1, 0, 0.4, 1], [30, 0, -25, -25], Extrapolation.CLAMP)}deg`,
+                },
+            ],
+        };
+        return {
+            ...withAnchorPoint(transform, { x: 0.5, y: 0.5 }, { width: WIDTH, height: HEIGHT }),
+            opacity,
+        };
+    }, []);
+    return (_jsx(Animated.View, { style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        }, children: _jsx(Animated.View, { style: [
+                {
+                    width: WIDTH,
+                    height: HEIGHT,
+                },
+                cardStyle,
+            ], children: children }) }));
+};
+const SCarouselContainer = styled.View `
+  align-items: center;
+  background-color: #0a9828;
+  overflow: hidden;
+  margin-top: -0.5px;
+`;
+const SActionPressable = styled.Pressable `
+  position: absolute;
+  top: ${({ $top }) => ($top ? `${$top}px` : '30%')};
+  ${({ theme, $next, mediumAndUp }) => $next
+    ? `right: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`
+    : `left: ${mediumAndUp ? '25%' : numToPx(theme.space[1400])}`};
+`;
+const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));

package/dist/esm/src/components/ProductCarousel/anchor-point.js

@@ -0,0 +1,43 @@
+const isValidSize = (size) => {
+    'worklet';
+    return size && size.width > 0 && size.height > 0;
+};
+const defaultAnchorPoint = { x: 0.5, y: 0.5 };
+export const withAnchorPoint = (transform, anchorPoint, size) => {
+    'worklet';
+    if (!isValidSize(size))
+        return transform;
+    let injectedTransform = transform.transform;
+    if (!injectedTransform)
+        return transform;
+    if (anchorPoint.x !== defaultAnchorPoint.x && size.width) {
+        const shiftTranslateX = [];
+        // shift before rotation
+        shiftTranslateX.push({
+            translateX: size.width * (anchorPoint.x - defaultAnchorPoint.x),
+        });
+        injectedTransform = [
+            ...shiftTranslateX,
+            ...injectedTransform,
+        ];
+        // shift after rotation
+        injectedTransform.push({
+            translateX: size.width * (defaultAnchorPoint.x - anchorPoint.x),
+        });
+    }
+    if (!Array.isArray(injectedTransform))
+        return { transform: injectedTransform };
+    if (anchorPoint.y !== defaultAnchorPoint.y && size.height) {
+        const shiftTranslateY = [];
+        // shift before rotation
+        shiftTranslateY.push({
+            translateY: size.height * (anchorPoint.y - defaultAnchorPoint.y),
+        });
+        injectedTransform = [...shiftTranslateY, ...injectedTransform];
+        // shift after rotation - injectedTransform is already an array here
+        injectedTransform.push({
+            translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+        });
+    }
+    return { transform: injectedTransform };
+};