@ovotech/element-native 5.3.0 → 5.4.1

package/dist/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/components/ProductCarousel/ProductCarousel.d.ts

@@ -0,0 +1,14 @@
+import { type JSX } from 'react';
+interface ProductCarouselProps<T> {
+    data: T[];
+    children: (item: T) => JSX.Element;
+    width?: number;
+    height: number;
+    fullWidth?: boolean;
+    showArrows?: boolean;
+    showDots?: boolean;
+    loop?: boolean;
+    arrowsDistanceFromTop?: number;
+}
+export declare function ProductCarousel<T>({ data, children, width, height, fullWidth, showArrows, showDots, loop, arrowsDistanceFromTop, }: ProductCarouselProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/components/ProductCarousel/anchor-point.d.ts

@@ -0,0 +1,207 @@
+import type { TransformsStyle } from 'react-native';
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export declare const withAnchorPoint: (transform: TransformsStyle, anchorPoint: Point, size: Size) => TransformsStyle | {
+    transform: any[] | readonly (({
+        translateX: import("react-native").AnimatableNumericValue | `${number}%`;
+    } & {
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        translateY: import("react-native").AnimatableNumericValue | `${number}%`;
+    } & {
+        translateX?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        scale: import("react-native").AnimatableNumericValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        scaleX: import("react-native").AnimatableNumericValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        scaleY: import("react-native").AnimatableNumericValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        skewX: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        skewY: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        perspective: import("react-native").AnimatableNumericValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotate: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateX: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateY: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateZ?: undefined;
+        matrix?: undefined;
+    }) | ({
+        rotateZ: import("react-native").AnimatableStringValue;
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        matrix?: undefined;
+    }) | ({
+        matrix: import("react-native").AnimatableNumericValue[];
+    } & {
+        translateX?: undefined;
+        translateY?: undefined;
+        scale?: undefined;
+        scaleX?: undefined;
+        scaleY?: undefined;
+        skewX?: undefined;
+        skewY?: undefined;
+        perspective?: undefined;
+        rotate?: undefined;
+        rotateX?: undefined;
+        rotateY?: undefined;
+        rotateZ?: undefined;
+    }))[];
+};

package/dist/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/components/ProductCarousel/index.d.ts

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

package/dist/components/ProductCarousel/index.js

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode, Ref } from 'react';
+import { TouchableOpacityProps, View } from 'react-native';
+type Props = Omit<TouchableOpacityProps, 'children'> & {
+    label: ReactNode;
+    value: string;
+    hint?: ReactNode;
+    checked?: boolean;
+    invalid?: boolean;
+    onValueChange?: (value?: string) => void;
+    activeOpacity?: number;
+    ref?: Ref<View>;
+};
+declare const Radio: ({ label, hint, checked, invalid, value, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { Radio };

package/dist/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/components/Radio/RadioField.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactNode } from 'react';
+type Props = PropsWithChildren<{
+    label: ReactNode;
+    value: string;
+    onValueChange: (newValue: string | undefined) => void;
+    hint?: ReactNode;
+    error?: ReactNode;
+    optional?: boolean;
+}>;
+declare const RadioField: ({ label, hint, error, children, optional, value, onValueChange, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export { RadioField };

package/dist/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/components/Radio/index.d.ts

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

package/dist/components/Radio/index.js

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

package/dist/components/RadioCard/RadioCard.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, Ref } from 'react';
+import { TouchableOpacityProps, View } from 'react-native';
+type Props = Omit<TouchableOpacityProps, 'children'> & {
+    label: ReactNode;
+    checked?: boolean;
+    invalid?: boolean;
+    activeOpacity?: number;
+    hasInput?: boolean;
+    ref?: Ref<View>;
+};
+export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, hasInput, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/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/components/RadioCard/index.d.ts

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

package/dist/components/RadioCard/index.js

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

package/dist/components/SegmentedControls/SegmentedControls.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'react';
+import { ViewProps } from 'react-native';
+export type Segment = {
+    key: string;
+    label: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+};
+type SegmentedControlsProps = ViewProps & {
+    activeSegment: Segment[][number];
+    segments: Segment[];
+    setActiveSegment: (...args: any[]) => void;
+    inline?: boolean;
+    multipleRows?: boolean;
+    size?: 'small' | 'large';
+};
+export declare const SegmentedControls: ({ activeSegment, setActiveSegment, segments, inline, multipleRows, size, ...rest }: SegmentedControlsProps) => JSX.Element;
+export {};

package/dist/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;
+`);