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

package/dist/d.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+    const value: any;
+    export = value;
+}

package/dist/d.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/d.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import Animated, { interpolateColor, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { useLayout } from '../../hooks/use-layout';
+import { useTheme } from '../../styled.native';
+import { Heading4 } from '../Heading';
+import { AccordionGroupContext } from './Group';
+import { AccordionIcon } from './Icon';
+import { StyledAccordion, StyledAccordionHeader, StyledContainer, } from './styles';
+export function withAnimated(WrappedComponent) {
+    const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    // eslint-disable-next-line react/prefer-stateless-function
+    class WithAnimated extends Component {
+        render() {
+            return _jsx(WrappedComponent, { ...this.props });
+        }
+    }
+    WithAnimated.displayName = `WithAnimated(${displayName})`;
+    // @ts-ignore
+    return Animated.createAnimatedComponent(WithAnimated);
+}
+export const Accordion = ({ expanded = false, first, last, title, children, onToggle, variant = 'default', }) => {
+    const theme = useTheme();
+    const { Header } = useContext(AccordionGroupContext);
+    const AccordionHeading = Header ?? Heading4;
+    const AnimatedHeading = useMemo(() => withAnimated(AccordionHeading), [AccordionHeading]);
+    const [layout, onLayout] = useLayout(0);
+    const [open, setOpen] = useState(expanded);
+    const initialHeadingColor = variant === 'default'
+        ? theme.color.brand.brand
+        : theme.color.surface.onSurface;
+    const handleHeightContent = useMemo(() => layout.height || 100, [layout.height]);
+    const size = useSharedValue(handleHeightContent);
+    useEffect(() => {
+        if (expanded && handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, expanded, size]);
+    useEffect(() => {
+        if (handleHeightContent) {
+            size.value = handleHeightContent;
+        }
+    }, [handleHeightContent, size]);
+    const progress = useDerivedValue(() => withTiming(open ? 1 : 0));
+    const style = useAnimatedStyle(() => ({
+        height: size.value * progress.value + 1,
+    }), [progress, size]);
+    const toggleOpen = useCallback(() => {
+        onToggle?.(!open);
+        if (size.value === 0) {
+            size.value = handleHeightContent;
+        }
+        setOpen(o => !o);
+    }, [handleHeightContent, open, size]);
+    const containerAnimatedStyle = useMemo(() => [{ overflow: 'hidden' }, style], [style]);
+    const headerStyle = useAnimatedStyle(() => ({
+        color: interpolateColor(progress.value, [0, 1], [initialHeadingColor, theme.color.surface.onSurface]),
+    }), [progress]);
+    return (_jsxs(StyledAccordion, { first: first, last: last, isExpanded: open, "$variant": variant, children: [_jsxs(StyledAccordionHeader, { accessibilityState: { expanded: open }, onPress: toggleOpen, testID: "accordionTitle", children: [_jsx(AnimatedHeading, { style: [
+                            headerStyle,
+                            {
+                                paddingRight: theme.space[300],
+                                marginTop: 0,
+                                marginBottom: 0,
+                                flexShrink: 1,
+                            },
+                        ], children: title }), _jsx(AccordionIcon, { animationTiming: progress, "$variant": variant })] }), _jsx(Animated.View, { style: containerAnimatedStyle, children: _jsx(StyledContainer, { onLayout: onLayout, children: children }) })] }));
+};

package/dist/esm/src/components/Accordion/Group.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, createContext, isValidElement, } from 'react';
+import { View } from 'react-native';
+export const AccordionGroupContext = createContext({
+    Header: undefined,
+});
+export const AccordionGroup = ({ children, headingComponent, }) => {
+    const childCount = Children.count(children);
+    return (_jsx(AccordionGroupContext.Provider, { value: { Header: headingComponent }, children: _jsx(View, { children: Children.map(children, (child, i) => isValidElement(child)
+                ? cloneElement(child, {
+                    first: i === 0,
+                    last: i === childCount - 1,
+                })
+                : child) }) }));
+};

package/dist/esm/src/components/Accordion/Icon.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import Animated, { interpolateColor, useAnimatedProps, useAnimatedStyle, } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { ThemeContext } from '../../styled.native';
+const OVO_LOGO_ANGLE = 105;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+export function AccordionIcon({ animationTiming, $variant, }) {
+    const { color } = useContext(ThemeContext);
+    const initialBgColor = $variant === 'default' ? color.surface.borderDim : color.brand.dark;
+    const expandedBgColor = $variant === 'default' ? color.brand.brand : color.brand.dark;
+    const initialIconColor = $variant === 'default' ? color.surface.onSurface : color.brand.onBrand;
+    const outerAnimatedStyles = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(animationTiming.value, [0, 1], [initialBgColor, expandedBgColor]),
+        height: 32 - animationTiming.value,
+        margin: 2 * animationTiming.value,
+        transform: [{ rotateZ: animationTiming.value * -OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const innerAnimatedStyles = useAnimatedStyle(() => ({
+        transform: [{ rotateZ: animationTiming.value * OVO_LOGO_ANGLE + 'deg' }],
+    }), [animationTiming]);
+    const plusAnimatedProps = useAnimatedProps(() => ({
+        opacity: 1 - animationTiming.value,
+    }), [animationTiming]);
+    const minusAnimatedProps = useAnimatedProps(() => ({
+        opacity: animationTiming.value,
+    }), [animationTiming]);
+    return (_jsx(Animated.View, { style: [
+            {
+                backgroundColor: color.surface.dim,
+                aspectRatio: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            outerAnimatedStyles,
+        ], children: _jsx(Animated.View, { style: innerAnimatedStyles, children: _jsxs(Svg, { width: "14", height: "14", viewBox: "0 0 16 16", children: [_jsx(AnimatedPath, { animatedProps: plusAnimatedProps, d: "M9 9H16V6.99H9V0H6.99V7H0V9.01H7V16.01H9.01V9.01L9 9Z", fill: initialIconColor }), _jsx(AnimatedPath, { animatedProps: minusAnimatedProps, d: "M16.3826 9.66663V7.66663H0.462646V9.66663H16.3826Z", fill: color.brand.onBrand })] }) }) }));
+}

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

@@ -0,0 +1,51 @@
+import { numToPx } from '@ovotech/element-core';
+import Animated from 'react-native-reanimated';
+import styled, { css } from '../../styled.native';
+export const StyledAccordion = styled(Animated.View)(({ theme, first, last, isExpanded, $variant }) => css `
+    width: 100%;
+    border-width: ${numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md'])};
+    border-color: ${$variant === 'brand'
+    ? theme.color.brand.brand
+    : theme.color.surface.borderDim};
+    border-bottom-width: 0;
+    background-color: ${$variant === 'brand'
+    ? theme.color.brand.bright
+    : isExpanded
+        ? theme.color.brand.onBrand
+        : 'transparent'};
+    transition: background-color ${theme.transition.duration.fast}ms;
+
+    ${first
+    ? {
+        borderTopLeftRadius: theme.border.radius.md,
+        borderTopRightRadius: theme.border.radius.md,
+    }
+    : null}
+
+    ${last
+    ? {
+        borderBottomLeftRadius: theme.border.radius.md,
+        borderBottomRightRadius: theme.border.radius.md,
+        borderBottomWidth: numToPx(theme.border.width[$variant === 'default' ? 'sm' : 'md']),
+    }
+    : null}
+  `);
+export const StyledAccordionHeader = styled.TouchableOpacity(({ theme }) => css `
+    padding-top: ${numToPx(theme.space[500])};
+    padding-left: ${numToPx(theme.space[300])};
+    padding-right: 18px;
+    padding-bottom: 18px;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+  `);
+export const StyledContainer = styled.View(({ theme }) => css `
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding-top: 0;
+    padding-right: ${numToPx(theme.space[1200])};
+    padding-bottom: ${numToPx(theme.space[600])};
+    padding-left: ${numToPx(theme.space[300])};
+  `);

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { useEffect } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { Action, Button, Heading2, Heading3, Icon, Margin, Stack } from '../';
+import styled, { useTheme } from '../../styled.native';
+import { P } from '../P';
+import { IndicatorIconShape } from './IndicatorIconShape';
+const StyledPressableCard = styled.Pressable(({ theme, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? theme.space[400] : theme.space[600];
+    const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return `
+      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
+      background-color: ${inverted ? theme.color.surface.dim : theme.color.surface.bright};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
+});
+const StyledCard = styled.View(({ theme, inline, inverted, reducedBottomPadding }) => {
+    const paddingVal = inline ? theme.space[400] : theme.space[600];
+    const reducedBottomPaddingVal = inline ? theme.space[300] : theme.space[500];
+    return `
+      border-radius: ${inline ? numToPx(theme.space[600]) : 0};
+      background-color: ${inverted ? theme.color.surface.onSurface : theme.color.surface.bright};
+      padding: ${numToPx(paddingVal)};
+      padding-bottom: ${numToPx(reducedBottomPadding ? reducedBottomPaddingVal : paddingVal)};
+      overflow: hidden;
+      border-width: 0;
+      width: 100%;
+    `;
+});
+const StyledP = styled(P)(({ theme, inverted }) => `
+    color: ${inverted ? theme.color.surface.bright : theme.color.surface.onSurface};
+`);
+const CloseIconWrapper = styled.View(({ theme }) => `
+    padding: ${numToPx(theme.space[200])};
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${numToPx(theme.space[600])};
+`);
+export const ActionCard = ({ accessibilityLabel = 'image', actionIconName = 'chevron-right-small', body, buttonTitle, ctaVariant, image, inline = false, inverted = false, onMount, onPressCloseButton, onPressActionButton, onPressIndicator, testID, title, }) => {
+    const theme = useTheme();
+    const hasSingleAction = (onPressActionButton && !onPressIndicator && !onPressCloseButton) ||
+        (onPressIndicator && !onPressActionButton && !onPressCloseButton);
+    const cardAction = hasSingleAction
+        ? onPressActionButton || onPressIndicator
+        : null;
+    const RootContainer = hasSingleAction
+        ? StyledPressableCard
+        : StyledCard;
+    useEffect(() => {
+        if (onMount) {
+            onMount();
+        }
+    }, []);
+    const Heading = inline ? Heading3 : Heading2;
+    const cardPadding = theme.space[inline ? 400 : 600];
+    const negativeMarginAdjustment = -cardPadding;
+    return (_jsxs(RootContainer, { ...(cardAction ? { onPress: cardAction } : {}), inline: inline, inverted: inverted, reducedBottomPadding: Boolean(buttonTitle && !ctaVariant), testID: `${testID}-card`, accessibilityRole: cardAction ? 'button' : 'none', children: [_jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(View, { style: { flex: 1 }, children: _jsxs(Stack, { spaceBetween: 2, children: [_jsx(Heading, { style: {
+                                        color: inverted
+                                            ? theme.color.surface.bright
+                                            : theme.color.brand.brand,
+                                        paddingRight: image || !onPressCloseButton ? 0 : cardPadding,
+                                    }, testID: `${testID}-heading`, children: title }), _jsxs(View, { children: [typeof body === 'string' ? (_jsx(View, { style: {
+                                                paddingRight: !image && !title && onPressCloseButton ? cardPadding : 0,
+                                            }, children: _jsx(StyledP, { inverted: inverted, children: body }) })) : (body), buttonTitle && onPressActionButton && !onPressIndicator ? (!ctaVariant ? (_jsx(Margin, { top: 2, children: _jsx(Action, { standalone: true, onPress: onPressActionButton, testID: `${testID}-button`, iconRight: actionIconName, inverted: inverted, children: buttonTitle }) })) : (_jsx(Margin, { top: 4, children: _jsx(Button, { onPress: onPressActionButton, testID: `${testID}-button`, variant: ctaVariant, inverted: inverted, children: buttonTitle }) }))) : null] })] }) }), image ? (_jsx(MaskedView, { style: {
+                            flex: 1,
+                            flexDirection: 'row',
+                            height: '100%',
+                            marginTop: negativeMarginAdjustment,
+                            marginRight: negativeMarginAdjustment,
+                        }, maskElement: _jsx(View, { style: {
+                                width: '100%',
+                                height: 165,
+                                backgroundColor: 'olive',
+                                transform: [
+                                    { rotate: '-16deg' },
+                                    { translateX: 40 },
+                                    { translateY: 25 },
+                                ],
+                            } }), children: _jsx(Image, { resizeMode: "cover", source: image, style: {
+                                width: '100%',
+                                height: 200,
+                                position: 'absolute',
+                                top: 0,
+                                right: 0,
+                            }, accessible: true, accessibilityRole: "image", accessibilityLabel: accessibilityLabel }) })) : null, onPressIndicator ? (_jsxs(Pressable, { style: {
+                            position: 'absolute',
+                            right: negativeMarginAdjustment,
+                            bottom: negativeMarginAdjustment,
+                        }, onPress: onPressIndicator, testID: `${testID}-indicator-button`, children: [_jsx(IndicatorIconShape, {}), _jsx(Icon, { size: 14, style: {
+                                    position: 'absolute',
+                                    right: inline ? 8 : 6,
+                                    bottom: 16,
+                                }, color: theme.color.surface.bright, name: "chevron-right", accessibilityLabel: "chevron-right" })] })) : null] }), onPressCloseButton && !onPressIndicator ? (_jsx(Pressable, { style: {
+                    position: 'absolute',
+                    right: theme.space[200],
+                    top: theme.space[200],
+                }, onPress: onPressCloseButton, testID: `${testID}-close-button`, children: _jsx(CloseIconWrapper, { inverted: inverted, children: _jsx(Icon, { name: "cross", size: "16", color: theme.color.surface.onSurface }) }) })) : null] }));
+};

package/dist/esm/src/components/ActionCard/CloseIconShape.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Svg, { ClipPath, Defs, Path } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme, color }) => `
+  fill: ${color ?? theme.color.brand.brand}
+`);
+export const CloseIconShape = ({ color }) => (_jsxs(Svg, { width: 44, height: 44, children: [_jsx(StyledPath, { color: color, d: "M11.632 44 0 0h44v35.402L11.632 44Z" }), _jsx(Defs, { children: _jsx(ClipPath, { id: "a", children: _jsx(Path, { fill: "#fff", d: "M16 16h12v12H16z" }) }) })] }));

package/dist/esm/src/components/ActionCard/IndicatorIconShape.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Svg, { Path } from 'react-native-svg';
+import styled from '../../styled.native';
+const StyledPath = styled(Path)(({ theme, color }) => `
+  fill: ${color ?? theme.color.brand.brand}
+`);
+export const IndicatorIconShape = ({ color }) => (_jsx(Svg, { width: 32, height: 48, children: _jsx(StyledPath, { color: color, d: "M0 9.5 32 1v47H10.5L0 9.5Z" }) }));

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, } from 'react';
+import { TouchableOpacity, View, } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { getValidChildren } from '../../utils';
+import { Badge } from '../Badge';
+import { StyledActionInner, StyledActionList, StyledActionNodeWrapper, StyledActionText, StyledActionWrapper, StyledHintText, StyledLeftIcon, StyledRightIcon, StyledTextWrapper, } from './styled';
+const ActionList = ({ children, inverted, borderBottom, ...rest }) => {
+    const validChildren = getValidChildren(children);
+    const childCount = Children.count(validChildren);
+    return (_jsx(StyledActionList, { ...rest, children: Children.map(validChildren, (child, index) => cloneElement(child, {
+            fullWidth: true,
+            index,
+            hasBorder: (childCount > 1 && index !== childCount - 1) || borderBottom,
+            inverted: child.props.inverted ?? inverted, // prioritise child prop
+            inList: true,
+            iconRight: child.props.iconRight ?? 'chevron-right-small',
+        })) }));
+};
+const ActionWrapper = ({ children, accessibilityRole, accessibilityLabel, accessibilityHint, activeOpacity = 0.75, fullWidth, hasBorder = false, inverted = false, inList, onPress, testID, standalone = false, ref, ...rest }) => (_jsx(StyledActionWrapper, { ref: ref, hasBorder: hasBorder, inverted: inverted, testID: testID, inList: inList, ...rest, children: _jsx(TouchableOpacity, { activeOpacity: activeOpacity, accessible: true, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, onPress: onPress, children: _jsx(StyledActionInner, { fullWidth: fullWidth, inList: inList, standalone: standalone, children: children }) }) }));
+const Action = ({ accessibilityRole = 'link', accessibilityLabel, accessibilityHint, children, fullWidth = false, inverted = false, onPress, testID, iconLeft, iconRight, standalone = false, badgeVariant = 'info', badgeText, hint, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    return (_jsxs(ActionWrapper, { ref: ref, accessibilityRole: accessibilityRole, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint, fullWidth: fullWidth, inverted: inverted, onPress: onPress, testID: testID, standalone: standalone, hint: hint, badgeText: badgeText, ...rest, children: [iconLeft ? (_jsx(StyledLeftIcon, { inverted: inverted, name: iconLeft, size: 16 })) : null, _jsxs(View, { children: [typeof children === 'string' ? (_jsxs(StyledTextWrapper, { children: [_jsx(StyledActionText, { smallAndUp: smallAndUp, inverted: inverted, children: children }), badgeText ? (_jsx(Badge, { variant: badgeVariant, children: badgeText })) : null] })) : (_jsx(StyledActionNodeWrapper, { children: children })), hint ? (_jsx(StyledHintText, { inverted: inverted, children: hint })) : null] }), iconRight ? (_jsx(StyledRightIcon, { inverted: inverted, name: iconRight, size: 16 })) : null] }));
+};
+export { Action, ActionList };

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

@@ -0,0 +1,74 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { styledComponentWithBreakpoints } from '../../utils';
+import { HintText } from '../HintText';
+import { Icon } from '../Icon';
+const StyledList = styled.View(({ theme, smallAndUp }) => css `
+    flex-direction: column;
+    margin-top: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
+    margin-bottom: ${numToPx(smallAndUp ? theme.space[300] : theme.space[200])};
+  `);
+export const StyledActionList = styledComponentWithBreakpoints(StyledList);
+export const StyledActionWrapper = styled.View(({ theme, hasBorder, inverted, inList, hint, badgeText }) => css `
+    width: 100%;
+    align-self: flex-start;
+    border-bottom-width: ${hasBorder ? numToPx(theme.border.width.sm) : 0};
+    border-bottom-style: solid;
+    border-bottom-color: ${inverted
+    ? theme.color.surface.dim
+    : theme.color.brand.fixed.onBrand};
+    padding: ${inList && (hint || badgeText) ? numToPx(theme.space[200]) : 0} 0;
+  `);
+export const StyledActionInner = styled.View(({ fullWidth, standalone }) => css `
+    flex-direction: row;
+    justify-content: ${fullWidth ? 'space-between' : 'flex-start'};
+    align-items: center;
+    min-height: ${standalone ? '' : '44px'};
+  `);
+export const StyledActionText = styled.Text(({ theme, smallAndUp, inverted = false }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    color: ${inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.bold};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+  `;
+});
+export const StyledActionNodeWrapper = styled.View `
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+`;
+export const StyledRightIcon = styled(Icon)(({ theme, inverted }) => {
+    return css `
+    color: ${inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface};
+    margin-left: ${numToPx(theme.space[100])};
+    margin-top: 2px; /* compensation for the line-height of the text */
+  `;
+});
+export const StyledLeftIcon = styled(Icon)(({ theme, inverted, }) => {
+    return css `
+    color: ${inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurface};
+    margin-right: ${numToPx(theme.space[100])};
+  `;
+});
+export const StyledTextWrapper = styled.View(({ theme }) => css `
+    flex-direction: row;
+    align-items: center;
+    gap: ${numToPx(theme.space[200])};
+  `);
+export const StyledHintText = styled(HintText)(({ theme, inverted = false }) => {
+    return css `
+    color: ${inverted
+        ? theme.color.surface.bright
+        : theme.color.surface.onSurfaceVariant};
+  `;
+});

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numToPx } from '@ovotech/element-core';
+import styled, { css, useTheme } from '../../styled.native';
+const StyledBadge = styled.View(({ inverted, theme, $surface, $message }) => css `
+    padding: ${numToPx(theme.space[50])} ${numToPx(theme.space[200])}
+      ${numToPx(theme.space[100])} ${numToPx(theme.space[200])};
+    border-radius: 16px;
+    border: ${numToPx(theme.border.width.md)} solid ${theme.color.brand.onBrand};
+    background-color: ${inverted ? $message : $surface};
+    align-self: flex-start;
+  `);
+const StyledBadgeText = styled.Text(({ inverted, theme, $surface, $message }) => css `
+    font-family: ${theme.native.font.family.bold};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    color: ${inverted ? $surface : $message};
+    font-size: ${numToPx(theme.font.size.md.mediaQuery.sm)};
+  `);
+export const Badge = ({ children, variant = 'neutral', inverted = false, customVariant, ...rest }) => {
+    const theme = useTheme();
+    // check if variant is primitive, otherwise use alert colours
+    const isPrimitive = Object.keys(theme.color).includes(variant);
+    let message = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['70']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert[variant];
+    let surface = isPrimitive
+        ? // @ts-ignore we're checking the variants above...
+            theme.color[variant]['20']
+        : // @ts-ignore we're checking the variants above...
+            theme.color.alert[`${variant}Tint`];
+    if (customVariant?.backgroundColor !== undefined &&
+        customVariant?.color !== undefined) {
+        message = customVariant.color;
+        surface = customVariant.backgroundColor;
+    }
+    return (_jsx(StyledBadge, { inverted: inverted, "$surface": surface, "$message": message, ...rest, children: _jsx(StyledBadgeText, { inverted: inverted, "$surface": surface, "$message": message, children: children }) }));
+};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBreakpoint } from '../../hooks';
+import { StyledButtonIcon, StyledButtonText, StyledButtonWrapper, StyledInner, } from './Button.styles';
+const Button = ({ iconLeft, iconRight, children, fullWidth = false, variant = 'surface', inverted = false, size = 'default', accessibilityRole = 'button', activeOpacity = 0.8, ref, ...rest }) => {
+    const { smallAndUp } = useBreakpoint();
+    const isIconOnly = !children;
+    const iconSizes = {
+        small: 14,
+        default: 16,
+        large: 20,
+    };
+    const iconSize = iconSizes[size];
+    return (_jsx(StyledButtonWrapper, { accessible: true, accessibilityRole: accessibilityRole, activeOpacity: activeOpacity, ...rest, ref: ref, children: _jsxs(StyledInner, { fullWidth: fullWidth, variant: variant, inverted: inverted, size: size, iconLeft: iconLeft, iconRight: iconRight, iconOnly: isIconOnly, children: [iconLeft && (_jsx(StyledButtonIcon, { iconLeft: true, iconOnly: isIconOnly, name: iconLeft, inverted: inverted, variant: variant, size: iconSize })), children ? (_jsx(StyledButtonText, { smallAndUp: smallAndUp, variant: variant, inverted: inverted, size: size, children: children })) : null, iconRight && (_jsx(StyledButtonIcon, { iconRight: true, iconOnly: isIconOnly, name: iconRight, inverted: inverted, variant: variant, size: iconSize }))] }) }));
+};
+const ButtonDestructive = (props) => (_jsx(Button, { variant: "destructive", ...props }));
+export { Button, ButtonDestructive };

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

@@ -0,0 +1,112 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+import { Icon } from '../Icon/Icon';
+export const StyledButtonWrapper = styled.TouchableOpacity `
+  align-self: flex-start;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+export const StyledInner = styled.View(({ theme, fullWidth, inverted, variant, size, iconOnly, iconRight, iconLeft, }) => {
+    const borderRadius = numToPx(theme.border.radius['3xl']);
+    const backgroundColor = getBackgroundColor(theme, variant, inverted);
+    const borderColor = getBorderColor(theme, variant, inverted);
+    const minHeights = {
+        default: theme.space[1100],
+        small: theme.space[800],
+        large: theme.border.radius['3xl'] * 2 - theme.border.width.sm * 2,
+    };
+    const minHeight = minHeights[size];
+    let top, right, bottom, left;
+    if (size === 'default') {
+        top = numToPx(theme.space[100]);
+        bottom = numToPx(theme.space[100]);
+        right = numToPx(theme.space[iconRight ? 300 : 500]);
+        left = numToPx(theme.space[iconLeft ? 300 : 500]);
+    }
+    else if (size === 'small') {
+        top = numToPx(theme.space[50]);
+        bottom = numToPx(theme.space[50]);
+        right = numToPx(theme.space[iconRight ? 200 : 300]);
+        left = numToPx(theme.space[iconLeft ? 200 : 300]);
+    }
+    else {
+        top = numToPx(theme.space[200]);
+        bottom = numToPx(theme.space[200]);
+        right = numToPx(theme.space[iconRight ? 500 : 800]);
+        left = numToPx(theme.space[iconLeft ? 500 : 800]);
+    }
+    const padding = `${top} ${right} ${bottom} ${left}`;
+    return css `
+      padding: ${iconOnly ? '0' : padding};
+      background-color: ${backgroundColor};
+      border-radius: ${borderRadius};
+      min-height: ${minHeight};
+      border-style: solid;
+      border-width: ${numToPx(theme.border.width.md)};
+      border-color: ${borderColor};
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      flex-grow: ${fullWidth ? '1' : '0'};
+      min-width: ${iconOnly ? minHeight : 'auto'};
+    `;
+});
+export const StyledButtonIcon = styled(Icon)(({ theme, inverted, variant, iconLeft, iconRight, iconOnly }) => {
+    const color = getIconColor(theme, inverted, variant);
+    return css `
+    margin-left: ${iconRight && !iconOnly ? numToPx(theme.space[100]) : '0'};
+    margin-right: ${iconLeft && !iconOnly ? numToPx(theme.space[100]) : '0'};
+    color: ${color};
+  `;
+});
+export const StyledButtonText = styled.Text(({ theme, smallAndUp, inverted, variant, size }) => {
+    const fontSizes = {
+        default: smallAndUp
+            ? theme.font.size.lg.mediaQuery.sm
+            : theme.font.size.md.mediaQuery.sm,
+        small: theme.font.size.sm.mediaQuery.lg,
+        large: theme.font.size.lg.mediaQuery.sm,
+    };
+    const fontSize = fontSizes[size];
+    const color = getTextColor(theme, inverted, variant);
+    return css `
+    color: ${color};
+    font-family: ${theme.native.font.family.bold};
+    font-size: ${numToPx(fontSize)};
+    line-height: ${numToPx(theme.font.lineHeight.md.mediaQuery.sm)};
+    text-align: center;
+    flex-shrink: 2;
+  `;
+});
+// Helper functions
+const getBackgroundColor = (theme, variant, inverted) => {
+    const button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return 'transparent';
+    }
+    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
+};
+const getBorderColor = (theme, variant, inverted) => {
+    const button = theme.button;
+    if (variant === 'outline') {
+        return inverted ? button.surface.color.bgVariant : button.surface.color.bg;
+    }
+    if (variant === 'outline-variant') {
+        return button.surface.color.bgVariant;
+    }
+    return inverted ? button.surface.color.bgInverted : button[variant].color.bg;
+};
+const getIconColor = (theme, inverted, variant) => {
+    const button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};
+const getTextColor = (theme, inverted, variant) => {
+    const button = theme.button;
+    if (variant === 'outline' || variant === 'outline-variant') {
+        return inverted ? button.surface.color.bgInverted : button.surface.color.bg;
+    }
+    return inverted ? button.surface.color.fgInverted : button[variant].color.fg;
+};

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+import { useBreakpoint } from '../../hooks';
+import { useTheme } from '../../styled.native';
+import { AnimatedStyledCard, BackgroundImage, TappableWrapper, } from './Card.styles';
+export const getCardFlags = (props) => {
+    const { background, onPress, displayStyle } = props;
+    const hasBgImage = !!background && typeof background !== 'string';
+    const tappable = Boolean(onPress);
+    const isDefault = displayStyle === 'default';
+    const isOutline = displayStyle === 'outline';
+    return { hasBgImage, tappable, isDefault, isOutline };
+};
+function useAnimatedBorder(baseColor, selectedColor, isSelected, duration) {
+    const borderAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(borderAnim, {
+            toValue: isSelected ? 1 : 0,
+            duration,
+            useNativeDriver: false,
+        }).start();
+    }, [isSelected, duration]);
+    return borderAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [baseColor, selectedColor],
+    });
+}
+export const Card = ({ children, displayStyle = 'default', background, onPress, ...rest }) => {
+    const theme = useTheme();
+    const [isFocused, setFocused] = useState(false);
+    const [isSelected, setSelected] = useState(false);
+    const { largeAndUp } = useBreakpoint();
+    const { hasBgImage, tappable, isDefault, isOutline } = getCardFlags({
+        background,
+        onPress,
+        displayStyle,
+    });
+    let baseBorderColor = theme.color.surface.bright;
+    if (isOutline) {
+        baseBorderColor = theme.color.surface.bright;
+    }
+    else if (isDefault) {
+        if (hasBgImage)
+            baseBorderColor = 'transparent';
+        else if (typeof background === 'string')
+            baseBorderColor = background;
+        else
+            baseBorderColor = theme.color.surface.bright;
+    }
+    const selectedBorderColor = theme.color.surface.onSurface;
+    const animatedBorderColor = useAnimatedBorder(baseBorderColor, selectedBorderColor, isSelected, theme.transition.duration.fast);
+    const handlePress = () => {
+        setSelected(prev => !prev);
+        onPress?.();
+    };
+    const CardContent = (_jsxs(AnimatedStyledCard, { displayStyle: displayStyle, background: background, largeAndUp: largeAndUp, ...rest, style: [rest?.style, { borderColor: animatedBorderColor }], children: [hasBgImage && (_jsx(BackgroundImage, { source: background, resizeMode: "cover", largeAndUp: largeAndUp })), children] }));
+    if (!tappable)
+        return CardContent;
+    return (_jsx(TappableWrapper, { onPress: handlePress, onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", focused: isFocused, largeAndUp: largeAndUp, style: ({ pressed }) => ({
+            opacity: pressed ? 0.9 : 1,
+        }), children: CardContent }));
+};