@ovotech/element-native 5.4.0 → 5.4.1

package/dist/esm/components/Radio/Radio.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { TouchableOpacity, View, } from 'react-native';
+import styled from '../../styled.native';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+const StyledRadioInputWrapper = styled.View(({ theme: { core } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-right: 10px;
+    `;
+});
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
+});
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+};
+const StyledWrapper = styled.View(({ theme: { core } }) => `
+    padding-top: ${numToPx(core.space[3])};
+    flex-direction: row;
+  `);
+const Radio = ({ label, hint, checked, invalid, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+value, // "value" is needed for RadioGroup, but isn't actually used in the radio anywhere
+activeOpacity = 0.8, testID, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { children: [_jsx(Input, { checked: checked, invalid: invalid, testID: testID }), _jsxs(View, { style: { flexShrink: 1 }, children: [_jsx(LabelText, { children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) }));
+};
+export { Radio };

package/dist/esm/components/Radio/RadioField.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import { View } from 'react-native';
+import { callAll, getValidChildren } from '../../utils';
+import { ErrorText } from '../ErrorText';
+import { FormGroup } from '../FormGroup';
+import { HintText } from '../HintText';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+const RadioField = ({ label, hint, error, children, optional = false, value, onValueChange, ...rest }) => {
+    const hasError = !!error;
+    const validChildren = getValidChildren(children);
+    return (_jsx(FormGroup, { ...rest, error: hasError, children: _jsxs(Stack, { spaceBetween: 1, children: [_jsxs(View, { children: [_jsxs(LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? _jsx(HintText, { children: hint }) : null, error ? _jsx(ErrorText, { children: error }) : null] }), _jsx(View, { accessible: true, accessibilityRole: "radiogroup", children: Children.map(validChildren, child => cloneElement(child, {
+                        invalid: hasError ? true : child.props.invalid,
+                        checked: child.props.checked != null
+                            ? child.props.checked
+                            : value && (value === child.props.value ? true : false),
+                        onPress: callAll(onValueChange && (() => onValueChange(child.props.value)), child.props.onPress),
+                    })) })] }) }));
+};
+export { RadioField };

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

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export { RadioField } from './RadioField';

package/dist/esm/components/RadioCard/RadioCard.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { TouchableOpacity, } from 'react-native';
+import { css } from 'styled-components';
+import styled from '../../styled.native';
+import { LabelText } from '../LabelText';
+const StyledRadioInputWrapper = styled.View(({ theme: { core } }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      margin-top: ${numToPx(core.space[2])};
+    `;
+});
+const StyledRadioInput = styled.View(({ theme: { core, semantic }, invalid, checked }) => {
+    return `
+      width: ${numToPx(core.space[6])};
+      height: ${numToPx(core.space[6])};
+      border: ${numToPx(core.borderWidth.small)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(core.space[6])};
+      border-color: ${invalid
+        ? semantic.message.error
+        : checked
+            ? core.color.blue.dark
+            : semantic.border.functional};
+      background: ${checked ? core.color.blue.lightest : 'transparent'};
+    `;
+});
+const StyledRadioInputDot = styled.View(({ theme: { core }, checked }) => {
+    return `
+      width: ${numToPx(core.space[3])};
+      height: ${numToPx(core.space[3])};
+      border-radius: ${numToPx(core.space[3])};
+      background: ${core.color.blue.dark};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+const Input = ({ checked, invalid, testID, ...rest }) => {
+    return (_jsx(StyledRadioInputWrapper, { ...rest, children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) }));
+};
+const StyledWrapper = styled.View(({ theme: { core, semantic }, checked, invalid }) => css `
+    align-items: center;
+    background: ${semantic.surface.elevated};
+    padding: ${numToPx(core.space[2])};
+    min-width: 82px;
+    border-radius: ${numToPx(core.radius.small)};
+    border: ${numToPx(core.borderWidth.medium)} solid;
+    border-color: ${invalid
+    ? semantic.message.error
+    : checked
+        ? core.color.blue.dark
+        : 'transparent'};
+  `);
+export const RadioCard = ({ label, checked, invalid, activeOpacity = 0.8, testID, hasInput = true, ref, ...rest }) => {
+    return (_jsx(TouchableOpacity, { ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked }, ...rest, children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? _jsx(LabelText, { children: label }) : label, hasInput ? (_jsx(Input, { checked: checked, invalid: invalid, testID: testID })) : null] }) }));
+};

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

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

package/dist/esm/components/SegmentedControls/SegmentedControls.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Animated, { useAnimatedStyle, useSharedValue, withSpring, } from 'react-native-reanimated';
+import styled, { useTheme } from '../../styled.native';
+import { SegmentButton } from './components/SegmentButton';
+/* These settings were found to be nice and fast whilst maintaining spring */
+const springSettings = {
+    damping: 25,
+    mass: 0.25,
+};
+export const SegmentedControls = ({ activeSegment, setActiveSegment, segments, inline = false, multipleRows, size = 'large', ...rest }) => {
+    const animatedX = useSharedValue(0);
+    const animatedY = useSharedValue(0);
+    const animatedHeight = useSharedValue(0);
+    const animatedWidth = useSharedValue(0);
+    const theme = useTheme();
+    const animatedBackgroundStyle = useAnimatedStyle(() => ({
+        left: animatedX.value,
+        top: animatedY.value + theme.core.space[size === 'small' ? 2 : 3],
+        width: animatedWidth.value,
+        height: animatedHeight.value,
+        position: 'absolute',
+        borderRadius: theme.core.radius.max,
+        backgroundColor: theme.semantic.surface.elevated,
+    }), [animatedX, animatedY, animatedWidth, animatedHeight]);
+    return (_jsxs(SegmentsContainer, { "$inline": inline, "$multipleRows": multipleRows, ...rest, children: [_jsx(Animated.View, { style: animatedBackgroundStyle }), segments.map(segment => (_jsx(SegmentButton, { isSelected: activeSegment.key === segment.key, label: segment.label, accessibilityLabel: segment.accessibilityLabel, accessibilityHint: segment.accessibilityHint, setAnimatedValues: (x, y, width) => {
+                    animatedX.value = withSpring(x, springSettings);
+                    animatedY.value = withSpring(y, springSettings);
+                    animatedWidth.value = width;
+                }, onPress: () => setActiveSegment(segment), onLayout: (width, height, x, y) => {
+                    if (activeSegment.key === segment.key) {
+                        animatedX.value = x;
+                        animatedY.value = y;
+                        animatedHeight.value = height;
+                        animatedWidth.value = width;
+                    }
+                }, multipleRows: multipleRows, size: size, inline: inline, testID: `${rest.testID ?? 'segment'}-${segment.key}`, segmentCount: segments.length ?? 0 }, segment.key)))] }));
+};
+const SegmentsContainer = styled.View(({ theme: { core, semantic }, $inline, $multipleRows }) => `
+  flex-direction: row;
+  flex-wrap: ${$multipleRows ? '' : 'no-'}wrap;
+  justify-content: ${$multipleRows ? 'space-between' : 'space-around'};
+  align-items: center;
+  width: ${$inline ? 'auto' : '100%'};
+  align-self: ${$inline ? 'flex-start' : 'stretch'};
+  padding: ${core.space[1]}px;
+  background-color: ${semantic.surface.cutout};
+  border-radius: ${core.radius.max}px;
+`);

package/dist/esm/components/SegmentedControls/components/SegmentButton.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { Pressable, useWindowDimensions, } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import styled from '../../../styled.native';
+import { P } from '../../P';
+const AnimatedP = Animated.createAnimatedComponent(P);
+const textSizeProps = {
+    numberOfLines: 1,
+    adjustsFontSizeToFit: true,
+    minimumFontScale: 0.95,
+    maxFontSizeMultiplier: 1.75,
+};
+export const SegmentButton = ({ accessibilityLabel, accessibilityHint, inline, isSelected, label, multipleRows, onLayout, onPress, setAnimatedValues, segmentCount, size = 'large', testID, }) => {
+    const xRef = useRef(0);
+    const yRef = useRef(0);
+    const widthRef = useRef(0);
+    const heightRef = useRef(0);
+    const hitslopVal = size === 'small' ? 8 : 4;
+    const fontScale = useWindowDimensions().fontScale;
+    const fontWeightAnim = useSharedValue(isSelected ? 1 : 0);
+    const animatedStyleNormal = useAnimatedStyle(() => {
+        return {
+            opacity: 1 - fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    const animatedStyleBold = useAnimatedStyle(() => {
+        return {
+            opacity: fontWeightAnim.value,
+            position: 'absolute',
+        };
+    }, [fontWeightAnim]);
+    useEffect(() => {
+        fontWeightAnim.value = withTiming(isSelected ? 1 : 0);
+    }, [fontWeightAnim, isSelected]);
+    useEffect(() => {
+        if (!isSelected) {
+            return;
+        }
+        setAnimatedValues(xRef.current, yRef.current, widthRef.current);
+    }, [isSelected]);
+    const handleLayout = (event) => {
+        const { width, height, x, y } = event.nativeEvent.layout;
+        xRef.current = x;
+        // (adrian.pop) - I couldn't figure out how to make the positioning work once the
+        // choices go on the second row. The only way I could get it to work
+        // was to hardcode the denominator to 3 for the single row ones
+        // and 1.1 for the multiple row ones.
+        yRef.current = y - height / ((multipleRows ? 2.5 : 3) * fontScale);
+        heightRef.current = height;
+        widthRef.current = width;
+        onLayout(width, height, x, yRef.current);
+    };
+    return (_jsx(Pressable, { onLayout: handleLayout, onPress: onPress, accessible: true, accessibilityRole: "checkbox", accessibilityState: { checked: isSelected }, accessibilityLabel: accessibilityLabel || label, accessibilityHint: accessibilityHint, hitSlop: {
+            top: hitslopVal,
+            bottom: hitslopVal,
+        }, style: {
+            flexGrow: inline || multipleRows ? undefined : 1,
+            width: inline || multipleRows ? 'auto' : `${100 / segmentCount}%`,
+        }, testID: testID, children: _jsxs(SSegmentsWrapper, { "$isSelected": isSelected, "$size": size, multiline: multipleRows, children: [_jsx(SSegmentText, { style: {
+                        opacity: 0,
+                        fontWeight: '900',
+                    }, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleNormal, "$isSelected": false, ...textSizeProps, children: label }), _jsx(SSegmentText, { style: animatedStyleBold, "$isSelected": true, ...textSizeProps, children: label })] }) }));
+};
+const SSegmentsWrapper = styled.View(({ theme, $size, multiline }) => `
+  ${multiline
+    ? `padding: 4px ${theme.core.space[$size === 'small' ? 4 : 6]}px;`
+    : `padding: ${$size === 'small' ? 2 : 8}px ${theme.core.space[$size === 'small' ? 3 : 4]}px;`}
+  align-items: center;
+  justify-content: center;
+`);
+const SSegmentText = styled(AnimatedP)(({ $isSelected, theme }) => `
+    font-family: ${$isSelected
+    ? theme.core.fontFamily.bodyBold.native
+    : theme.core.fontFamily.body.native};
+    color: ${theme.semantic.message.base};
+  `);

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

@@ -0,0 +1,2 @@
+import { SegmentedControls } from './SegmentedControls';
+export { SegmentedControls };

package/dist/esm/components/SelectField/Select.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import groupBy from 'lodash.groupby';
+import { Fragment, useState } from 'react';
+import { Dimensions, Modal, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { Strong } from '../Strong';
+const SelectInput = styled.TouchableOpacity(({ theme: { semantic, core }, hasError }) => {
+    return css `
+      flex-direction: row;
+      align-items: center;
+      background-color: transparent;
+      border-color: ${hasError
+        ? semantic.error.message
+        : semantic.border.functional};
+      border-width: ${numToPx(core.borderWidth.small)};
+      border-radius: ${numToPx(core.radius.small)};
+      padding: ${numToPx(core.space[2])};
+      padding-right: 14px;
+      height: 44px;
+    `;
+});
+const DropdownWrapper = styled.View(({ theme: { core } }) => css `
+    flex: 1;
+    justify-content: center;
+    align-items: center;
+
+    /* 40 is an opacity for hex https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 */
+    background-color: ${core.color.neutral.darkest}40;
+  `);
+const DropdownContainer = styled(SafeAreaView)(({ theme: { core } }) => css `
+    width: 95%;
+    max-height: 70%;
+    border-radius: ${numToPx(core.radius.small)};
+    background-color: ${core.color.brand.white};
+  `);
+const SelectOption = styled.TouchableOpacity(({ theme: { semantic, core }, isLastOption }) => css `
+    flex-direction: row;
+    align-items: center;
+    border-bottom-color: ${semantic.border.differentiated};
+    border-bottom-width: ${isLastOption ? 0 : 1}px;
+    padding: 0 ${numToPx(core.space[4])};
+  `);
+const Radio = styled.View(({ theme: { core, semantic }, isChecked }) => css `
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+    border-radius: 24px;
+    border-width: ${numToPx(core.borderWidth.small)};
+    border-color: ${isChecked
+    ? semantic.focus.outline
+    : semantic.border.functional};
+  `);
+const RadioDot = styled.View(({ theme: { semantic }, isChecked }) => css `
+    background-color: ${semantic.focus.outline};
+    position: absolute;
+    top: 5px;
+    width: 12px;
+    height: 12px;
+    border-radius: 12px;
+    align-self: center;
+    opacity: ${isChecked ? 1 : 0};
+  `);
+const StyledP = styled(P)(({ theme: { core } }) => css `
+    margin-top: ${numToPx(core.space[3])};
+    margin-bottom: ${numToPx(core.space[3])};
+  `);
+const StyledCategory = styled(P)(({ theme: { core, semantic } }) => css `
+    font-size: ${numToPx(core.fontSize.label.large)};
+    color: ${semantic.message.secondary};
+    background-color: ${semantic.surface.cutout};
+    padding: ${numToPx(core.space[1])} ${numToPx(core.space[4])};
+  `);
+export const Select = ({ options = [], defaultSelected = { label: '', value: 'default' }, noOptionMessage = 'No option selected', onSelected = () => null, hasError = false, testID = 'select', }) => {
+    const [isOpen, setOpen] = useState(false);
+    const [selected, setSelected] = useState(defaultSelected);
+    const height = Dimensions.get('window').height;
+    const dropdownContainerMaxHeight = height * 0.7;
+    const handleOptionPress = (val) => {
+        onSelected(val);
+        setOpen(false);
+        setSelected(val);
+    };
+    const optionsByCategories = groupBy(options, 'category');
+    const requiredOption = {
+        label: `-- ${noOptionMessage} --`,
+        value: 'default',
+    };
+    return (_jsxs(View, { children: [_jsxs(SelectInput, { testID: testID, hasError: hasError, onPress: () => setOpen(!isOpen), children: [_jsx(P, { style: { marginTop: 0, marginBottom: 0 }, children: selected.value === 'default' ? '' : selected.label }), _jsx(Icon, { name: "chevron-down", size: 16, style: { marginLeft: 'auto' } })] }), _jsx(Modal, { transparent: true, visible: isOpen, animationType: "fade", onRequestClose: () => setOpen(false), children: _jsx(DropdownWrapper, { children: _jsx(DropdownContainer, { style: { maxHeight: dropdownContainerMaxHeight }, children: _jsxs(ScrollView, { nestedScrollEnabled: true, testID: `${testID}-OptionsScrollView`, children: [_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", onPress: () => handleOptionPress(requiredOption), children: [_jsx(StyledP, { children: _jsx(Strong, { children: requiredOption.label }) }), _jsx(Radio, { isChecked: selected.value === requiredOption.value, children: _jsx(RadioDot, { isChecked: selected.value === requiredOption.value }) })] }), Object.keys(optionsByCategories).map(category => (_jsxs(Fragment, { children: [category !== 'undefined' ? (_jsx(StyledCategory, { children: category })) : null, optionsByCategories[category].map((option, i) => (_jsxs(SelectOption, { accessible: true, accessibilityRole: "radio", isLastOption: i === optionsByCategories[category].length - 1, onPress: () => handleOptionPress(option), children: [_jsx(StyledP, { children: _jsx(Strong, { children: option.label }) }), _jsx(Radio, { isChecked: selected.value === option.value, children: _jsx(RadioDot, { isChecked: selected.value === option.value }) })] }, option.label)))] }, category)))] }) }) }) })] }));
+};

package/dist/esm/components/SelectField/SelectField.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Field } from '../Field';
+import { Select } from './Select';
+export const SelectField = ({ error, options, onSelected, noOptionMessage, defaultSelected, testID, ...rest }) => (_jsx(Field, { affixWidth: 20, error: error, ...rest, children: _jsx(_Fragment, { children: _jsx(Select, { onSelected: onSelected, options: options, noOptionMessage: noOptionMessage, defaultSelected: defaultSelected, hasError: Boolean(error), testID: testID }) }) }));

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

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

package/dist/esm/components/SkeletonAnimation/SkeletonAnimation.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { View, Animated, Platform } from 'react-native';
+export const SkeletonAnimation = ({ children, animation = 'pulse', testID, }) => {
+    const animationRef = useRef(new Animated.Value(0));
+    const animationLoop = useRef(undefined);
+    useEffect(() => {
+        animationLoop.current = Animated.timing(animationRef.current, {
+            toValue: 2,
+            delay: 400,
+            duration: 1500,
+            useNativeDriver: !!Platform.select({
+                web: false,
+                native: true,
+            }),
+        });
+        animationRef.current.setValue(0);
+        Animated.loop(animationLoop.current).start();
+    }, []);
+    return (_jsx(View, { accessible: false, accessibilityRole: "none", accessibilityLabel: "loading...", testID: testID, children: animation === 'pulse' ? (_jsx(Animated.View, { style: [
+                {
+                    height: '100%',
+                    width: '100%',
+                    opacity: animationRef.current.interpolate({
+                        inputRange: [0.25, 1, 2],
+                        outputRange: [1, 0.25, 1],
+                    }),
+                },
+            ], children: children })) : (_jsx(View, { children: children })) }));
+};

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

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

package/dist/esm/components/SkeletonCTA/SkeletonCTA.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { P } from '../P';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonCTA = styled.View(({ theme: { core }, size }) => `
+    background-color: ${core.color.neutral.light};
+    width: ${size};
+    height: ${numToPx(core.space[12])};
+  `);
+export const SkeletonCTA = ({ size = '250px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCTA, { as: P, size: size, ...rest }) }));

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

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

package/dist/esm/components/SkeletonCircle/SkeletonCircle.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { pxToNumber } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonCircleWrapper = styled.View(({ size }) => `width: ${size}; max-width: 100%;`);
+const StyledSkeletonCircle = styled.View(({ theme: { core }, size }) => `
+    background-color: ${core.color.neutral.light};
+    height: 0;
+    padding-bottom: 100%;
+    border-radius: ${pxToNumber(size) / 2}px;
+  `);
+export const SkeletonCircle = ({ size = '120px', ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonCircleWrapper, { size: size, ...rest, children: _jsx(StyledSkeletonCircle, { size: size }) }) }));

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

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

package/dist/esm/components/SkeletonHeading/SkeletonHeading.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '../../styled.native';
+import { Heading3 } from '../Heading3';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonHeading = styled.View(({ theme: { core }, size }) => `
+    background-color: ${core.color.neutral.light};
+    width: ${size};
+  `);
+export const SkeletonHeading = ({ size = '70%', headingComponent: Heading = Heading3, ...rest }) => (_jsx(SkeletonAnimation, { children: _jsx(StyledSkeletonHeading, { "aria-hidden": "true", size: size, as: Heading, ...rest, children: "\u00A0" }) }));

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

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

package/dist/esm/components/SkeletonText/SkeletonText.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { useBreakpoint } from '../../hooks';
+import styled from '../../styled.native';
+import { P } from '../P';
+import { SkeletonAnimation } from '../SkeletonAnimation';
+const StyledSkeletonText = styled.View(({ theme: { core }, aboveSmallBreakpoint, short }) => {
+    return `
+    background-color: ${core.color.neutral.light};
+    margin-bottom: ${numToPx(core.space[2])};
+    height: ${aboveSmallBreakpoint
+        ? numToPx(core.fontSize.body.large)
+        : numToPx(core.fontSize.body.small)};
+
+    ${short ? 'width: 50%' : ''};
+  `;
+});
+export const SkeletonText = ({ lines = 1, ...rest }) => {
+    const generatedLines = [];
+    const { smallAndUp } = useBreakpoint();
+    for (let i = 1; i <= lines; i++) {
+        generatedLines.push(_jsx(StyledSkeletonText, { short: i === lines, aboveSmallBreakpoint: smallAndUp }, `line-${i}`));
+    }
+    return (
+    // @ts-ignore styled components stuff
+    _jsx(P, { as: SkeletonAnimation, ...rest, children: generatedLines }));
+};

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

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

package/dist/esm/components/Small/Small.js

@@ -0,0 +1,8 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledSmall = styled.Text(({ theme: { core }, smallAndUp }) => css `
+    font-size: ${numToPx(core.fontSize.small[smallAndUp ? 'large' : 'small'])};
+    line-height: ${numToPx(core.lineHeight.small[smallAndUp ? 'large' : 'small'])};
+  `);
+export const Small = styledComponentWithBreakpoints(StyledSmall);

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

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

package/dist/esm/components/Spinner/Spinner.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import Animated, { cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated';
+import { ThemeContext } from '../../styled.native';
+const semanticSizes = {
+    large: 65,
+    small: 32,
+};
+export const Spinner = ({ inverted = false, size = 'small', accessibilityLabel = 'Loading', }) => {
+    const { core } = useContext(ThemeContext);
+    const rotation = useSharedValue(0);
+    const rectSize = size in semanticSizes
+        ? semanticSizes[size]
+        : size;
+    const halfRectSize = rectSize / 2;
+    const containerStyle = useMemo(() => ({
+        width: rectSize,
+        height: rectSize,
+    }), [rectSize]);
+    const rectStyles = useMemo(() => ({
+        width: rectSize,
+        height: rectSize,
+        backgroundColor: core.color.brand[inverted ? 'white' : 'ovo'],
+        transform: [{ rotate: '-15deg' }],
+    }), [rectSize]);
+    const animatedStyles = useAnimatedStyle(() => ({
+        transform: [{ rotateY: `${rotation.value}deg` }],
+        transformOrigin: [halfRectSize, halfRectSize, 0],
+    }));
+    useEffect(() => {
+        cancelAnimation(rotation);
+        // rotate svg from right to left on 360deg during 2 seconds and repeat that 200 times
+        rotation.value = withRepeat(withTiming(-360, {
+            duration: 2000,
+            easing: Easing.linear,
+        }), 200, // number of repeats, don't want to set infinite cause it might affect performance
+        false);
+        // cancel animation if component is unmounted
+        return () => cancelAnimation(rotation);
+    }, []);
+    return (_jsx(View, { style: [containerStyle], accessible: true, accessibilityLabel: accessibilityLabel, children: _jsx(Animated.View, { style: animatedStyles, children: _jsx(View, { style: rectStyles }) }) }));
+};

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

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

package/dist/esm/components/Stack/Stack.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import { Children } from 'react';
+import { View } from 'react-native';
+import styled from '../../styled.native';
+import { getValidChildren, responsiveStyle, styledComponentWithBreakpoints, } from '../../utils';
+const Stack = ({ children, spaceBetween, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    return (_jsx(View, { ...rest, children: Children.map(validChildren, (child, index) => index === 0 ? (child) : (_jsx(StackItem, { spaceBetween: spaceBetween, children: child }))) }));
+};
+const StyledStackItem = styled.View(({ theme: { core: { space }, }, spaceBetween, smallAndUp, mediumAndUp, largeAndUp, }) => {
+    const formatter = (spaceKey) => numToPx(space[spaceKey]);
+    const breakpoints = { smallAndUp, mediumAndUp, largeAndUp };
+    return responsiveStyle('margin-top', spaceBetween, breakpoints, formatter);
+});
+const StackItem = styledComponentWithBreakpoints(StyledStackItem);
+export { Stack };

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

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

package/dist/esm/components/Stretch/Stretch.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBreakpoint } from '../../hooks';
+import styled, { css } from '../../styled.native';
+const StyledStretch = styled.View(
+// full width on small, default width on tablet or if fullWidth is false
+({ smallAndUp, fullWidth = true, defaultWidth }) => css `
+    width: ${!fullWidth || smallAndUp ? defaultWidth : '100%'};
+    ${defaultWidth && !fullWidth ? 'max-width: 100%;' : ''}
+  `);
+export const Stretch = (props) => {
+    const { smallAndUp } = useBreakpoint();
+    return _jsx(StyledStretch, { smallAndUp: smallAndUp, ...props });
+};

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

@@ -0,0 +1 @@
+export * from './Stretch';

package/dist/esm/components/Strong/Strong.js

@@ -0,0 +1,4 @@
+import styled from '../../styled.native';
+export const Strong = styled.Text(({ theme: { core } }) => `
+    font-family: ${core.fontFamily.bodyBold.native};
+  `);

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

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

package/dist/esm/components/SubLabelText/SubLabelText.js

@@ -0,0 +1,16 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+const StyledSubLabelText = styled.Text(({ theme: { core, semantic }, smallAndUp }) => {
+    const fontSize = smallAndUp
+        ? core.fontSize.body.large
+        : core.fontSize.body.small;
+    return css `
+      font-family: ${core.fontFamily.body.native};
+      line-height: ${numToPx(core.lineHeight.body.small)};
+      color: ${semantic.message.secondary};
+      font-size: ${numToPx(fontSize)};
+    `;
+});
+const SubLabelText = styledComponentWithBreakpoints(StyledSubLabelText);
+export { SubLabelText };

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

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