@ovotech/element-native 5.5.0 → 5.7.0

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

@@ -0,0 +1,60 @@
+import styled, { css } from '../../styled.native';
+import { numToPx } from '../../theme';
+import { getShadowCSS } from '../../utils';
+import { Icon } from '../Icon';
+export const ICON_SIZE = 20;
+export const StyledInputWrapper = styled.View(({ theme, focused, hasError, isSelected }) => {
+    let borderColor = 'transparent';
+    /* prioritise error and selected states for border, even when focused */
+    if (hasError) {
+        borderColor = theme.color.alert.error;
+    }
+    else if (isSelected) {
+        borderColor = theme.color.surface.onSurface;
+    }
+    else if (focused) {
+        borderColor = theme.color.outline.outer;
+    }
+    return css `
+    align-self: stretch;
+    background-color: ${theme.color.surface.bright};
+    border-radius: ${numToPx(theme.border.radius.md)};
+    border-width: ${numToPx(theme.border.width.md)};
+    border-style: solid;
+    border-color: ${borderColor};
+    flex-direction: row;
+    ${getShadowCSS({ theme })}
+  `;
+});
+export const StyledInput = styled.TextInput(({ theme, smallAndUp, iconLeft, iconRight, hasRightSlot }) => {
+    const fontSize = smallAndUp
+        ? theme.font.size.md.mediaQuery.lg
+        : theme.font.size.md.mediaQuery.sm;
+    return css `
+    position: relative;
+    flex: 1;
+    padding: ${numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    color: ${theme.color.surface.onSurface};
+    font-family: ${theme.native.font.family.book};
+    font-size: ${numToPx(fontSize)};
+
+    /* NOTE: height being queried with design, subject to change */
+    min-height: ${numToPx(theme.space[1600])};
+
+    ${iconLeft ? `padding-left: ${numToPx(theme.space[800])};` : ''}
+    ${iconRight || hasRightSlot
+        ? `padding-right: ${numToPx(theme.space[800])};`
+        : ''}
+  `;
+});
+export const StyledIcon = styled(Icon)(({ theme, side }) => {
+    return css `
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    margin-top: -${ICON_SIZE / 2}px;
+    ${side === 'left' ? `left: ${numToPx(theme.space[200])}` : ''};
+    ${side === 'right' ? `right: ${numToPx(theme.space[200])}` : ''};
+  `;
+});

package/dist/esm/components/LargeValueReference/LargeValueReference.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from '../../styled.native';
+import { Icon } from '../Icon';
+import { LabelText } from '../LabelText';
+import { Stack } from '../Stack';
+import { LargeValue, LargeValueContainer, StyledLargeValueReferenceWrapper, } from './styles';
+export const LargeValueReference = (_a) => {
+    var { value, autoSpacing = false, autoSpacingInterval = 5, label, onCopy, theme = 'bright' } = _a, rest = __rest(_a, ["value", "autoSpacing", "autoSpacingInterval", "label", "onCopy", "theme"]);
+    if (value === undefined || value === null || String(value).length === 0)
+        return null;
+    const elementTheme = useTheme();
+    // Normalizes JS's default scientific notation
+    const valueAsString = useMemo(() => typeof value === 'number'
+        ? value.toLocaleString('fullwide', {
+            useGrouping: false,
+        })
+        : value.toString(), [value]);
+    const splitValue = useMemo(() => {
+        if (autoSpacing && valueAsString.length > autoSpacingInterval) {
+            const matches = valueAsString.match(new RegExp(`.{1,${autoSpacingInterval}}`, 'g'));
+            return matches || [];
+        }
+        return [];
+    }, [autoSpacing, valueAsString, autoSpacingInterval]);
+    const handlePress = useCallback(() => {
+        // Call onCopy callback
+        if (typeof onCopy === 'function') {
+            onCopy(valueAsString);
+        }
+    }, [valueAsString, onCopy]);
+    return (_jsxs(Stack, { spaceBetween: 2, children: [label ? _jsx(LabelText, { children: label }) : null, _jsx(StyledLargeValueReferenceWrapper, Object.assign({ backgroundTheme: theme }, rest, { children: _jsxs(LargeValueContainer, { children: [autoSpacing && splitValue.length > 0 ? (splitValue.map((val, index) => (_jsx(LargeValue, { children: val }, index)))) : (_jsx(LargeValue, { children: valueAsString })), onCopy ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: handlePress, hitSlop: 10, testID: "large-value-reference-copy-button", children: _jsx(Icon, { name: "copy", size: 20, color: elementTheme.color.surface.onSurface, testID: "large-value-reference-copy-icon" }) })) : null] }) }))] }));
+};

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

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

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

@@ -0,0 +1,23 @@
+import { numToPx } from '@ovotech/element-core';
+import styled from '../../styled.native';
+import { P } from '../P';
+export const StyledLargeValueReferenceWrapper = styled.View(({ theme, backgroundTheme }) => `
+  align-items: center;
+  max-width: ${'100%'};
+  gap: ${numToPx(theme.space[200])};
+  padding: ${numToPx(theme.space[400])};
+  background-color: ${theme.color.surface[backgroundTheme]};
+  border-radius: ${numToPx(theme.border.radius.lg)};
+  border: ${numToPx(theme.border.width.sm)} solid ${theme.color.surface.borderDim};
+`);
+export const LargeValueContainer = styled.View(({ theme }) => `
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: ${numToPx(theme.space[200])};
+`);
+export const LargeValue = styled(P)(() => `
+  font-family: monospace;
+  letter-spacing: 2px;
+`);

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

@@ -16,30 +16,38 @@ import { useTheme } from '../../styled.native';
 import { Icon } from '../Icon';
 import { P } from '../P';
 import { Strong } from '../Strong';
-import { ContentContainer, DismissButton, NotificationBox, NotificationContentBox, NotificationShadow, StyledIcon, TitleContainer, VariantIconBackground, VariantIconContainer, } from './Notification.styles';
+import { ContentContainer, DismissButton, NotificationBox, NotificationContentBox, NotificationShadow, StyledIcon, TappableNotification, TitleContainer, VariantIconBackground, VariantIconContainer, } from './Notification.styles';
 import { mapVariantToIconName } from './utils';
 export const Notification = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, isTappable = false, dismissible, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "isTappable", "dismissible", "onDismiss", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, onPress, dismissible = true, onDismiss, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "onPress", "dismissible", "onDismiss", "ref"]);
     const [dismissed, setDismissed] = useState(false);
     if (dismissed) {
         return null;
     }
-    if (isTappable || dismissible) {
-        return (_jsx(NotificationShadow, { children: _jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
+    const isClickable = !!onPress;
+    if (isClickable || dismissible) {
+        return (_jsx(NotificationShadow, { children: _jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: isClickable ? onPress : undefined, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })) }));
     }
-    return (_jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, isTappable: isTappable, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
+    return (_jsx(NotificationContent, Object.assign({ variant: variant, title: title, subtitle: subtitle, noMargin: noMargin, onPress: onPress, dismissible: dismissible, onDismiss: onDismiss, setDismissed: setDismissed, ref: ref }, rest, { children: children })));
 };
 const NotificationContent = (_a) => {
-    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "ref"]);
+    var { variant = 'info', children, title, subtitle, noMargin, dismissible, onDismiss, setDismissed, onPress, ref } = _a, rest = __rest(_a, ["variant", "children", "title", "subtitle", "noMargin", "dismissible", "onDismiss", "setDismissed", "onPress", "ref"]);
     const theme = useTheme();
-    return (_jsx(View, Object.assign({ ref: ref }, rest, { children: _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsx(VariantIconBackground, { variant: variant, children: _jsx(VariantIconContainer, { children: _jsx(StyledIcon, { variant: variant, size: theme.unit[800], name: mapVariantToIconName(variant) }) }) }), _jsxs(ContentContainer, { children: [_jsxs(TitleContainer, { children: [title && (_jsx(P, { size: "md", children: _jsx(Strong, { children: title }) })), subtitle && _jsx(P, { size: "sm", children: subtitle }), children && (_jsx(NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", onPress: () => {
-                                setDismissed(true);
-                                if (onDismiss) {
-                                    onDismiss();
-                                }
-                            }, children: _jsx(Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] }) })));
+    const hasChildren = !!children;
+    const handleDismiss = () => {
+        if (onDismiss) {
+            onDismiss();
+        }
+        setDismissed(true);
+    };
+    return (_jsxs(View, Object.assign({ ref: ref }, rest, { children: [!!onPress && (_jsx(TappableNotification, { dismissible: dismissible, hasChildren: hasChildren, onPress: onPress })), _jsxs(NotificationBox, { noMargin: noMargin, testID: "nb-notification", children: [_jsx(VariantIconBackground, { variant: variant, children: _jsx(VariantIconContainer, { children: _jsx(StyledIcon, { variant: variant, size: theme.unit[800], name: mapVariantToIconName(variant) }) }) }), _jsxs(ContentContainer, { children: [_jsxs(TitleContainer, { children: [title && (_jsx(P, { size: "md", children: _jsx(Strong, { children: title }) })), subtitle && _jsx(P, { size: "sm", children: subtitle }), children && (_jsx(NotificationContentBox, { testID: "el-notification-box", children: children }))] }), dismissible ? (_jsx(DismissButton, { accessible: true, accessibilityLabel: "Dismiss", testID: "nb-notification-dismiss", hitSlop: {
+                                    top: theme.space[300],
+                                    right: theme.space[400],
+                                    bottom: theme.space[100],
+                                    left: theme.space[100],
+                                }, onPress: handleDismiss, children: _jsx(Icon, { color: theme.button.surface.color.fgInverted, name: "cross", size: theme.space[400] }) })) : null] })] })] })));
 };
 export const SuccessNotification = (props) => (_jsx(Notification, Object.assign({ variant: "success" }, props)));
 export const InfoNotification = (props) => (_jsx(Notification, Object.assign({ variant: "info" }, props)));
 export const WarningNotification = (props) => (_jsx(Notification, Object.assign({ variant: "warning" }, props)));
-export const ErrorNotification = (props) => (_jsx(Notification, Object.assign({ variant: "error" }, props)));
+export const ErrorNotification = (props) => (_jsx(Notification, Object.assign({ variant: "error", dismissible: false }, props)));

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

@@ -7,7 +7,7 @@ export const NotificationShadow = styled(View)(({ theme }) => {
     return css `
     shadow-color: ${theme.color.brand.dark};
     shadow-offset: 0 ${numToPx(theme.space[100])};
-    shadow-opacity: ${theme.opacity.transparent};
+    shadow-opacity: 0.1;
     shadow-radius: ${numToPx(theme.space[100])};
     elevation: 6;
   `;
@@ -27,6 +27,25 @@ export const NotificationContentBox = styled.View(({ theme }) => {
     padding-right: ${numToPx(theme.space[300])};
   `;
 });
+export const TappableNotification = styled.TouchableOpacity(({ dismissible, hasChildren, theme }) => {
+    return css `
+    position: absolute;
+    left: 0;
+    height: ${hasChildren ? numToPx(theme.space[1200]) : '80%'};
+    width: ${dismissible ? '86%' : '100%'};
+    z-index: 1;
+    border-top-left-radius: ${numToPx(theme.border.radius.md)};
+    border-top-right-radius: ${dismissible
+        ? 0
+        : numToPx(theme.border.radius.md)};
+    border-bottom-right-radius: ${dismissible
+        ? numToPx(theme.border.radius.md)
+        : 0};
+    border-bottom-left-radius: ${hasChildren
+        ? 0
+        : numToPx(theme.border.radius.md)};
+  `;
+});
 export const DismissButton = styled.TouchableOpacity(({ theme }) => {
     return css `
     display: flex;

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

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

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

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

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

@@ -10,56 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 { useTheme } from '../../styled.native';
 import { HintText } from '../HintText';
 import { LabelText } from '../LabelText';
-const StyledRadioInputWrapper = styled.View(({ theme }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      margin-right: 10px;
-    `;
-});
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
-    return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+import { StyledRadioInput, StyledRadioInputDot, StyledRadioInputWrapper, StyledWrapper, } from './Radio.styles';
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme }) => `
-    padding-top: ${numToPx(theme.space[300])};
-    flex-direction: row;
-  `);
 const Radio = (_a) => {
     var { 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 } = _a, rest = __rest(_a, ["label", "hint", "checked", "invalid", "value", "activeOpacity", "testID", "ref"]);
-    return (_jsx(TouchableOpacity, Object.assign({ 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] })] }) })));
+    const theme = useTheme();
+    return (_jsx(TouchableOpacity, Object.assign({ 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, { style: { fontFamily: theme.native.font.family.book }, children: label }), hint ? _jsx(HintText, { children: hint }) : null] })] }) })));
 };
 export { Radio };

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

@@ -0,0 +1,38 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledWrapper = styled.View(({ theme }) => css `
+    padding-top: ${numToPx(theme.space[300])};
+    flex-direction: row;
+  `);
+export const StyledRadioInputDot = styled.View(({ theme, checked }) => {
+    return css `
+      width: ${numToPx(theme.space[300])};
+      height: ${numToPx(theme.space[300])};
+      border-radius: ${numToPx(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+    return css `
+    width: ${numToPx(theme.space[600])};
+    height: ${numToPx(theme.space[600])};
+    border: ${numToPx(theme.border.width.md)} solid;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${numToPx(theme.space[600])};
+    border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+    background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+  `;
+});
+export const StyledRadioInputWrapper = styled.View(({ theme }) => {
+    return css `
+    width: ${numToPx(theme.space[600])};
+    height: ${numToPx(theme.space[600])};
+    margin-right: 10px;
+  `;
+});

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

@@ -10,61 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 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 }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      margin-top: ${numToPx(theme.space[200])};
-    `;
-});
-const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${numToPx(theme.space[600])};
-      height: ${numToPx(theme.space[600])};
-      border: ${numToPx(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${numToPx(theme.space[600])};
-      border-color: ${invalid
-        ? theme.input.color.borderError
-        : checked
-            ? theme.input.color.selected
-            : theme.input.color.border};
-      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
-    `;
-});
-const StyledRadioInputDot = styled.View(({ theme, checked }) => {
-    return `
-      width: ${numToPx(theme.space[300])};
-      height: ${numToPx(theme.space[300])};
-      border-radius: ${numToPx(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+import { StyledRadioInput, StyledRadioInputDot, StyledRadioInputWrapper, StyledWrapper, TextContainer, } from './RadioCard.styles';
+export const RadioCard = (_a) => {
+    var { label, checked, invalid, activeOpacity = 0.8, testID, alignment = 'center', ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "alignment", "ref"]);
+    return (_jsx(TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: _jsxs(StyledWrapper, { checked: checked, invalid: invalid, alignment: alignment, children: [_jsx(TextContainer, { children: typeof label === 'string' ? _jsx(LabelText, { children: label }) : label }), _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
+};
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
     return (_jsx(StyledRadioInputWrapper, Object.assign({}, rest, { children: _jsx(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: _jsx(StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled.View(({ theme, checked, invalid }) => css `
-    align-items: center;
-    background: ${theme.color.surface.bright};
-    padding: ${numToPx(theme.space[200])};
-    min-width: 82px;
-    border-radius: ${numToPx(theme.border.radius.lg)};
-    border: ${numToPx(theme.border.width.md)} solid;
-    border-color: ${invalid
-    ? theme.input.color.borderError
-    : checked
-        ? theme.input.color.selected
-        : 'transparent'};
-  `);
-export const RadioCard = (_a) => {
-    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
-    return (_jsx(TouchableOpacity, Object.assign({ 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, _jsx(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
-};

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

@@ -0,0 +1,61 @@
+import { numToPx } from '@ovotech/element-core';
+import styled, { css } from '../../styled.native';
+export const StyledRadioInputWrapper = styled.View(({ theme }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      margin-top: ${numToPx(theme.space[200])};
+    `;
+});
+export const StyledRadioInput = styled.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${numToPx(theme.space[600])};
+      height: ${numToPx(theme.space[600])};
+      border: ${numToPx(theme.border.width.md)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${numToPx(theme.space[600])};
+      border-color: ${invalid
+        ? theme.input.color.borderError
+        : checked
+            ? theme.input.color.selected
+            : theme.input.color.border};
+      background: ${checked ? theme.input.color.selectedTint : 'transparent'};
+    `;
+});
+export const StyledRadioInputDot = styled.View(({ theme, checked }) => {
+    return `
+      width: ${numToPx(theme.space[300])};
+      height: ${numToPx(theme.space[300])};
+      border-radius: ${numToPx(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+export const StyledWrapper = styled.View(({ theme, checked, invalid, alignment }) => css `
+    align-items: center;
+    text-align: center;
+    justify-content: ${alignment === 'center' ? 'center' : 'flex-end'};
+    flex-direction: ${alignment === 'left'
+    ? 'row-reverse'
+    : alignment === 'right'
+        ? 'row'
+        : 'column'};
+    background: ${theme.color.surface.bright};
+    padding: ${alignment === 'center'
+    ? numToPx(theme.space[200])
+    : numToPx(theme.space[400])};
+    border-radius: ${numToPx(theme.border.radius.lg)};
+    border: ${numToPx(theme.border.width.md)} solid;
+    border-color: ${invalid
+    ? theme.input.color.borderError
+    : checked
+        ? theme.input.color.selected
+        : 'transparent'};
+    gap: ${alignment === 'center' ? 0 : numToPx(theme.space[400])};
+  `);
+export const TextContainer = styled.View(({ alignment }) => css `
+    flex-direction: column;
+    flex-grow: 1;
+    text-align: ${alignment === 'center' ? 'center' : 'left'};
+  `);

package/dist/esm/components/Rail/Rail.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { View, } from 'react-native';
+import { Icon } from '../Icon';
+import { P } from '../P';
+import { Strong } from '../Strong';
+import { RailIndicator } from './RailIndicator';
+import { Header, HeadingText, IconContainer, RailItemWrapper, StyledRail, } from './styles';
+import { useRailPaging } from './useRailPaging';
+const DEFAULT_MAX_CHILDREN = 6;
+export const Rail = ({ children, indicator = true, icon, heading, subHeading, maxChildren = DEFAULT_MAX_CHILDREN, }) => {
+    const allItems = useMemo(() => React.Children.toArray(children), [children]);
+    const items = useMemo(() => allItems.slice(0, Math.max(0, maxChildren)), [allItems, maxChildren]);
+    const paging = useRailPaging({ itemCount: items.length });
+    const hasIndicator = indicator && paging.isScrollable;
+    return (_jsxs(View, { children: [_jsxs(Header, { children: [icon && (_jsx(IconContainer, { children: _jsx(Icon, { name: icon, size: 24 }) })), (heading || subHeading) && (_jsxs(HeadingText, { children: [heading && (_jsx(P, { size: "lg", children: _jsx(Strong, { children: heading }) })), subHeading && _jsx(P, { size: "sm", children: subHeading })] }))] }), _jsxs(View, { onLayout: e => paging.onContainerLayout(e.nativeEvent.layout.width), children: [_jsx(StyledRail, { horizontal: true, hasIndicator: hasIndicator, showsHorizontalScrollIndicator: false, contentContainerStyle: { flexDirection: 'row' }, decelerationRate: "fast", snapToOffsets: paging.snapOffsets, snapToAlignment: "start", disableIntervalMomentum: true, scrollEventThrottle: 16, onMomentumScrollEnd: (e) => paging.onMomentumEnd(e.nativeEvent.contentOffset.x), onContentSizeChange: w => paging.onContentSizeChange(w), children: items.map((child, index) => (_jsx(RailItemWrapper, { onLayout: (e) => {
+                                if (index !== 0)
+                                    return;
+                                paging.onItemLayout(e.nativeEvent.layout.width);
+                            }, children: child }, `Rail-item-${index}`))) }), hasIndicator && (_jsx(RailIndicator, { dotCount: items.length, activeStartIndex: paging.activeStartIndex, visibleCount: paging.visibleCount }))] })] }));
+};

package/dist/esm/components/Rail/RailIndicator.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import Animated, { useAnimatedStyle, useDerivedValue, withTiming, } from 'react-native-reanimated';
+import { useTheme } from '../../styled.native';
+import { DotContainer, RailIndicatorContainer } from './styles';
+export const RailIndicator = ({ dotCount, activeStartIndex, visibleCount, }) => {
+    const theme = useTheme();
+    const DOT = theme.space[200];
+    const GAP = theme.space[200];
+    const PADDING = theme.space[350];
+    const [containerWidth, setContainerWidth] = useState(0);
+    const onContainerLayout = useCallback((e) => {
+        var _a, _b, _c;
+        const w = (_c = (_b = (_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 0;
+        if (w > 0)
+            setContainerWidth(w);
+    }, []);
+    if (dotCount <= 0)
+        return null;
+    const start = Math.min(Math.max(0, activeStartIndex), dotCount - 1);
+    const visible = Math.max(1, Math.min(visibleCount, dotCount - start));
+    const rowWidth = useMemo(() => {
+        return dotCount * DOT + (dotCount - 1) * GAP;
+    }, [dotCount, DOT, GAP]);
+    const step = DOT + GAP;
+    const animatedLeft = useDerivedValue(() => {
+        if (containerWidth <= 0)
+            return 0;
+        const innerWidth = Math.max(0, containerWidth - 2 * PADDING);
+        const rowLeft = PADDING + Math.max(0, (innerWidth - rowWidth) / 2);
+        return withTiming(rowLeft + start * step, { duration: 150 });
+    }, [containerWidth, PADDING, rowWidth, start, step]);
+    const animatedWidth = useDerivedValue(() => {
+        const w = visible * DOT + Math.max(0, visible - 1) * GAP;
+        return withTiming(w, { duration: 150 });
+    }, [visible, DOT, GAP]);
+    const pillStyle = useAnimatedStyle(() => ({
+        position: 'absolute',
+        left: animatedLeft.value,
+        width: animatedWidth.value,
+        opacity: containerWidth > 0 ? 1 : 0,
+    }));
+    return (_jsxs(RailIndicatorContainer, { onLayout: onContainerLayout, children: [Array.from({ length: dotCount }).map((_, index) => (_jsx(DotContainer, { isActive: false }, `dot-${index}`))), _jsx(Animated.View, { pointerEvents: "none", style: pillStyle, children: _jsx(DotContainer, { isActive: true, style: { width: '100%' } }) })] }));
+};

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

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

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

@@ -0,0 +1,49 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import styled from '../../styled.native';
+export const StyledRail = styled(Animated.ScrollView)(({ theme, hasIndicator }) => ({
+    paddingVertical: theme.space[350],
+    paddingHorizontal: theme.space[50],
+    marginBottom: hasIndicator ? 0 : theme.space[900],
+}));
+export const RailItemWrapper = styled.View(({ theme }) => ({
+    paddingHorizontal: theme.space[100],
+}));
+export const RailIndicatorContainer = styled.View(({ theme }) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    backgroundColor: theme.color.surface.dim,
+    borderRadius: theme.border.radius['2xl'],
+    padding: theme.space[350],
+    gap: theme.space[200],
+}));
+export const DotContainer = styled(Animated.View)(({ theme, isActive }) => ({
+    height: theme.space[200],
+    width: theme.space[200],
+    borderRadius: 9999,
+    backgroundColor: isActive
+        ? theme.color.surface.onSurface
+        : theme.color.surface.onSurfaceVariant,
+}));
+export const Header = styled(View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+    marginBottom: -theme.space[100],
+    marginLeft: theme.space[100],
+}));
+export const HeadingText = styled(View)({
+    flex: 1,
+    flexShrink: 1,
+});
+export const IconContainer = styled(View)(({ theme }) => ({
+    borderRadius: theme.border.radius['2xl'],
+    backgroundColor: theme.color.surface.bright,
+    borderWidth: 0,
+    padding: theme.space[200],
+    width: theme.space[1100],
+    height: theme.space[1100],
+    alignItems: 'center',
+    justifyContent: 'center',
+}));