@ovotech/element-native 5.3.0 → 5.4.1

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children } from 'react';
+import { View } from 'react-native';
+import { getValidChildren } from '../../utils';
+import { Margin } from '../Margin';
+import { Stack } from '../Stack';
+import { FlexRow, LiContent, SquareBullet, TextBullet } from './styled';
+const ListItem = ({ children, showBullets = true, prefix, }) => {
+    return (_jsxs(FlexRow, { children: [prefix ? (_jsx(TextBullet, { children: prefix })) : (_jsx(SquareBullet, { visible: showBullets })), _jsx(LiContent, { children: children })] }));
+};
+const renderList = ({ children, listType, showBullets, }) => {
+    const validChildren = getValidChildren(children);
+    return Children.map(validChildren, (child, index) => (_jsx(ListItem, { prefix: listType === 'ol' ? `${index + 1}.` : undefined, showBullets: showBullets, children: child })));
+};
+const Li = ({ children }) => {
+    return _jsx(View, { style: { flexDirection: 'column' }, children: children });
+};
+const Ul = (props) => {
+    const { children, showBullets } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ul', showBullets }) }) }));
+};
+const Ol = (props) => {
+    const { children } = props;
+    return (_jsx(Margin, { top: 2, children: _jsx(Stack, { spaceBetween: 2, children: renderList({ children, listType: 'ol' }) }) }));
+};
+export { Li, Ol, Ul };

package/dist/esm/components/List/index.js

@@ -0,0 +1 @@
+export { Ol, Ul, Li } from './List';

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

@@ -0,0 +1,40 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const SquareBullet = styled.View(({ theme: { core, semantic }, visible, smallAndUp }) => {
+    const lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    const topMargin = (lineHeight - core.space[2]) / 2;
+    return css `
+    align-self: flex-start;
+    width: ${numToPx(core.space[2])};
+    height: ${numToPx(core.space[2])};
+    margin-right: ${numToPx(core.space[2])};
+    margin-top: ${numToPx(topMargin)};
+    background-color: ${visible ? semantic.message.base : 'transparent'};
+  `;
+});
+export const TextBullet = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    const lineHeight = smallAndUp
+        ? core.lineHeight.body.large
+        : core.lineHeight.body.small;
+    return css `
+      margin-right: ${numToPx(core.space[1])};
+      min-width: ${numToPx(core.space[3])};
+      min-height: ${numToPx(core.space[3])};
+      font-size: ${numToPx(fontSize)};
+      line-height: ${numToPx(lineHeight)};
+      text-align: left;
+      color: ${semantic.message.base};
+    `;
+});
+export const FlexRow = styled.View `
+  flex-direction: row;
+`;
+export const LiContent = styled.View `
+  flex-direction: column;
+  flex: 1;
+`;

package/dist/esm/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: { core: { space }, }, mTop, mBottom, mLeft, mRight, horizontal, vertical, all, breakpoints, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    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/components/Margin/index.js

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { StyledIconButtonL, StyledIconButtonS } from './NavHeader.styles';
+export const IconButton = ({ size, animation, rightActionConfig, }) => {
+    const ButtonStyled = size === 'small' ? StyledIconButtonS : StyledIconButtonL;
+    const theme = useTheme();
+    if (!rightActionConfig || !rightActionConfig?.iconName) {
+        return null;
+    }
+    return (_jsx(Pressable, { hitSlop: theme.core.space[2], pressRetentionOffset: theme.core.space[2], onPress: rightActionConfig?.onActionPress, accessibilityRole: "button", accessibilityLabel: rightActionConfig?.accessibilityLabel, accessibilityHint: rightActionConfig?.accessibilityHint, children: ({ pressed }) => (_jsx(ButtonStyled, { entering: animation, "$pressed": pressed, children: _jsx(Icon, { name: rightActionConfig.iconName, size: size === 'small' ? 16 : 18, color: theme.semantic.inverted.message.base }) })) }));
+};

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

@@ -0,0 +1,43 @@
+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 { useTheme } from '../../styled.native';
+import { Action } from '../ActionList';
+import { IconButton } from './IconButton';
+import { ActionWrapper, CollapsedTitle, CollapsedTitleWrapper, ExpandedTitle, IconButtonWrapper, 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 theme = useTheme();
+    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, onLayout: onLayout, titleVisible: hasTitle, children: [_jsx(Animated.View, { style: {
+                        width: scrolled ? '33.3%' : '100%',
+                        // Important for maintaining white space above the title on main app screens.
+                        height: !canGoBack ? theme.core.space[10] : undefined,
+                    }, children: canGoBack && (_jsx(ActionWrapper, { collapsed: scrolled, children: _jsx(Action, { iconLeft: "chevron-left-small", inline: true, onPress: onBackButtonPress, children: backButtonText }) })) }), scrolled ? (_jsxs(_Fragment, { children: [_jsx(CollapsedTitleWrapper, { titleVisible: hasTitle, children: _jsx(CollapsedTitle, { numberOfLines: 1, ellipsizeMode: "tail", entering: FadeInDown.delay(FADE_ANIMATION_DURATION), exiting: FadeOutDown.duration(FADE_ANIMATION_DURATION), children: title }) }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "small", animation: FadeInDown.delay(FADE_ANIMATION_DURATION) }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ExpandedTitle
+                        // if we don't have right action leave more space for the title text in expanded state
+                        , { 
+                            // if we don't have right action leave more space for the title text in expanded state
+                            fullWidth: !scrolled && !hasRightAction, numberOfLines: 2, ellipsizeMode: "tail", hasBackButton: canGoBack, titleVisible: hasTitle, entering: FadeInUp.delay(FADE_ANIMATION_DURATION), exiting: FadeOutUp.duration(FADE_ANIMATION_DURATION), children: title }), _jsx(IconButtonWrapper, { children: _jsx(IconButton, { rightActionConfig: rightActionConfig, size: "large", animation: FadeInUp.delay(FADE_ANIMATION_DURATION) }) })] }))] }) }));
+};

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

@@ -0,0 +1,82 @@
+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: { semantic, core }, 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: ${semantic.surface.base};
+
+    ${collapsed
+    ? css `
+          border-bottom-width: ${numToPx(core.borderWidth.small)};
+          border-bottom-style: solid;
+          border-bottom-color: ${semantic.border.differentiated};
+        `
+    : ''}
+  `);
+export const NavContainer = styled.View(({ theme: { core }, topOffset, titleVisible }) => css `
+    position: absolute;
+
+    /* NavWrapper zIndex + 1 so it is always on top of the wrapper */
+    z-index: ${Z_INDEX + 1};
+    width: ${titleVisible ? '100%' : '50%'};
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    padding-top: ${topOffset
+    ? topOffset
+    : numToPx(core.space[titleVisible ? 2 : 4])};
+    padding-bottom: ${numToPx(core.space[titleVisible ? 2 : 4])};
+    padding-left: ${numToPx(core.space[4])};
+    padding-right: ${numToPx(core.space[4])};
+  `);
+export const ExpandedTitle = styled(Animated.Text)(({ theme: { core, semantic }, hasBackButton, fullWidth, titleVisible, }) => css `
+    width: ${fullWidth ? '100%' : '65%'};
+    font-family: ${core.fontFamily.heading.native};
+    font-size: ${numToPx(core.fontSize.heading1[hasBackButton ? 'small' : 'large'])};
+    line-height: ${numToPx(hasBackButton ? core.lineHeight.heading1.small : core.space[13])};
+    color: ${semantic.message.branded};
+    ${!titleVisible && 'height: 0;'};
+  `);
+export const CollapsedTitleWrapper = styled(Animated.View)(({ titleVisible }) => `
+  width: ${titleVisible ? '33.3%' : '0'};
+  align-items: center;
+  justify-content: center;
+`);
+export const CollapsedTitle = styled(Animated.Text)(({ theme: { core, semantic } }) => css `
+    font-family: ${core.fontFamily.heading.native};
+    font-size: ${numToPx(core.fontSize.heading4.small)};
+    line-height: ${numToPx(core.lineHeight.heading4.small)};
+    color: ${semantic.message.branded};
+  `);
+export const IconButtonWrapper = styled.View `
+  width: 33.3%;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+const iconButtonSharedStyles = css(({ theme: { semantic } }) => `
+    border-radius: 100px;
+    background-color: ${semantic.inverted.surface};
+    align-items: center;
+    justify-content: center;
+`);
+export const StyledIconButtonS = styled(Animated.View) `
+  width: 28px;
+  height: 28px;
+  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
+  ${iconButtonSharedStyles};
+`;
+export const StyledIconButtonL = styled(Animated.View) `
+  width: 36px;
+  height: 36px;
+  opacity: ${({ $pressed }) => ($pressed ? 0.8 : 1)};
+  ${iconButtonSharedStyles};
+`;
+export const ActionWrapper = styled.View(({ theme: { core }, collapsed }) => css `
+    margin-bottom: ${collapsed ? '0' : numToPx(core.space[2])};
+  `);

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

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

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

@@ -0,0 +1,81 @@
+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: { core, semantic }, noMargin }) => {
+    return css `
+    position: relative;
+    margin-bottom: ${noMargin ? 0 : numToPx(core.space[4])};
+    border: ${numToPx(core.borderWidth.small)} solid
+      ${semantic.surface.elevated};
+    border-radius: ${numToPx(core.radius.max)};
+    overflow: hidden;
+  `;
+});
+export const NotificationContentBox = styled.View(({ theme: { core, semantic } }) => {
+    return css `
+      background-color: ${semantic.surface.elevated};
+      padding-top: ${numToPx(core.space[2])};
+      padding-bottom: ${numToPx(core.space[3])};
+      padding-left: ${numToPx(core.space[4])};
+      padding-right: ${numToPx(core.space[4])};
+    `;
+});
+export const NotificationTitleBox = styled.View(({ theme: { core, semantic }, variant, dismissible }) => {
+    const currentVariant = semantic[variant];
+    return css `
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: ${currentVariant.surface};
+    padding-top: ${numToPx(core.space[2])};
+    padding-bottom: ${numToPx(core.space[2])};
+    padding-left: ${numToPx(core.space[4])};
+    padding-right: ${dismissible
+        ? numToPx(core.space[3])
+        : numToPx(core.space[4])};
+    min-height: 44px;
+  `;
+});
+const NotificationTitleText = styled.Text(({ theme: { core, semantic }, variant }) => {
+    const currentVariant = semantic[variant];
+    return css `
+    font-size: ${numToPx(core.fontSize.body.small)};
+    font-family: ${core.fontFamily.bodyBold.native};
+    color: ${currentVariant.message};
+  `;
+});
+const DismissButton = styled.TouchableOpacity(({ theme: { core, semantic } }) => {
+    return css `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 28px;
+      height: 28px;
+      background: ${semantic.inverted.surface};
+      border: ${numToPx(core.borderWidth.small)} solid
+        ${core.color.brand.forest};
+      border-radius: ${numToPx(core.radius.max)};
+    `;
+});
+const StyledIcon = styled(Icon)(({ theme: { semantic } }) => `
+    color: ${semantic.inverted.message.base};
+  `);
+export const Notification = ({ variant = 'neutral', 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, { 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/components/Notification/index.js

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

package/dist/esm/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, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(NumberInput, { ref: ref }) }));
+};

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

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

package/dist/esm/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/components/NumberInput/index.js

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

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

@@ -0,0 +1,14 @@
+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 StyledP = styled.Text(({ theme: { core, semantic }, smallAndUp, inverted }) => css `
+    font-family: ${core.fontFamily.body.native};
+    font-size: ${numToPx(core.fontSize.body[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.body[smallAndUp ? 'large' : 'small'])};
+    color: ${inverted ? semantic.inverted.message.base : semantic.message.base};
+  `);
+export const P = (props) => {
+    const breakpoints = useBreakpoint();
+    return _jsx(StyledP, { ...props, ...breakpoints });
+};

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

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

package/dist/esm/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, ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(PasswordInput, { hasVisibilityToggle: hasVisibilityToggle, ref: ref }) }));
+};

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

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

package/dist/esm/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 = ({ hasVisibilityToggle, ...props }) => {
+    const { isPasswordVisible, handlePasswordVisibility } = useTogglePasswordVisibility();
+    return (_jsx(Input, { rightSlot: 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/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: { core }, focused, }) => {
+    return css `
+    display: flex;
+    align-items: center;
+    position: absolute;
+    width: ${numToPx(core.space[4])};
+    z-index: 1;
+    top: ${focused ? '16px' : '14px'};
+    right: ${numToPx(core.space[3])};
+  `;
+});

package/dist/esm/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/components/PasswordInput/index.js

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

package/dist/esm/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 = ({ ref, ...rest }) => {
+    return (_jsx(Field, { ...rest, children: _jsx(PhoneInput, { ref: ref }) }));
+};

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

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

package/dist/esm/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, { keyboardType: "phone-pad", autoCapitalize: "none", autoCorrect: false, ...props }));

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

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

package/dist/esm/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.core.color.brand.forest,
+            theme.core.color.brand.energised,
+            theme.core.color.brand.forest,
+        ]);
+        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.core.color.brand.forest};
+  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/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 { useWindowDimensions, View } 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.core.color.brand.white }) }), _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.core.color.brand.white }) })] })), 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.core.space[14])}`
+    : `left: ${mediumAndUp ? '25%' : numToPx(theme.core.space[14])}`};
+`;
+const SkewLine = (props) => (_jsx(Svg, { width: "100%", height: 69, ...props, children: _jsx(Path, { fill: "#0A9828", d: "M768 0 0 68.776h768V0Z" }) }));

package/dist/esm/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.push({
+            translateY: size.height * (defaultAnchorPoint.y - anchorPoint.y),
+        });
+    }
+    return { transform: injectedTransform };
+};

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

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