@ovotech/element-native 5.5.0 → 5.7.0

package/dist/components/Radio/Radio.js

@@ -10,62 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
-const styled_native_1 = __importDefault(require("../../styled.native"));
+const styled_native_1 = require("../../styled.native");
 const HintText_1 = require("../HintText");
 const LabelText_1 = require("../LabelText");
-const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      margin-right: 10px;
-    `;
-});
-const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${(0, element_core_1.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_native_1.default.View(({ theme, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[300])};
-      height: ${(0, element_core_1.numToPx)(theme.space[300])};
-      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
+const Radio_styles_1 = require("./Radio.styles");
 const Input = (_a) => {
     var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
+    return ((0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(Radio_styles_1.StyledRadioInputDot, { checked: checked }) }) })));
 };
-const StyledWrapper = styled_native_1.default.View(({ theme }) => `
-    padding-top: ${(0, element_core_1.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 ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
+    const theme = (0, styled_native_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(Radio_styles_1.StyledWrapper, { children: [(0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexShrink: 1 }, children: [(0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { style: { fontFamily: theme.native.font.family.book }, children: label }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null] })] }) })));
 };
 exports.Radio = Radio;

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

@@ -0,0 +1,9 @@
+export declare const StyledWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StyledRadioInputDot: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    checked?: boolean;
+}, never>;
+export declare const StyledRadioInput: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    invalid?: boolean;
+    checked?: boolean;
+}, never>;
+export declare const StyledRadioInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {}, never>;

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

@@ -0,0 +1,74 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledRadioInputWrapper = exports.StyledRadioInput = exports.StyledRadioInputDot = exports.StyledWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledWrapper = styled_native_1.default.View(({ theme }) => (0, styled_native_1.css) `
+    padding-top: ${(0, element_core_1.numToPx)(theme.space[300])};
+    flex-direction: row;
+  `);
+exports.StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
+    return (0, styled_native_1.css) `
+      width: ${(0, element_core_1.numToPx)(theme.space[300])};
+      height: ${(0, element_core_1.numToPx)(theme.space[300])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+exports.StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
+    return (0, styled_native_1.css) `
+    width: ${(0, element_core_1.numToPx)(theme.space[600])};
+    height: ${(0, element_core_1.numToPx)(theme.space[600])};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+    align-items: center;
+    justify-content: center;
+    border-radius: ${(0, element_core_1.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'};
+  `;
+});
+exports.StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
+    return (0, styled_native_1.css) `
+    width: ${(0, element_core_1.numToPx)(theme.space[600])};
+    height: ${(0, element_core_1.numToPx)(theme.space[600])};
+    margin-right: 10px;
+  `;
+});

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

@@ -6,6 +6,7 @@ type Props = Omit<TouchableOpacityProps, 'children'> & {
     invalid?: boolean;
     activeOpacity?: number;
     ref?: React.Ref<View>;
+    alignment?: 'center' | 'left' | 'right';
 };
-export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCard: ({ label, checked, invalid, activeOpacity, testID, alignment, ref, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/RadioCard/RadioCard.js

@@ -10,68 +10,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RadioCard = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const element_core_1 = require("@ovotech/element-core");
 const react_native_1 = require("react-native");
-const styled_components_1 = require("styled-components");
-const styled_native_1 = __importDefault(require("../../styled.native"));
 const LabelText_1 = require("../LabelText");
-const StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      margin-top: ${(0, element_core_1.numToPx)(theme.space[200])};
-    `;
-});
-const StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[600])};
-      height: ${(0, element_core_1.numToPx)(theme.space[600])};
-      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-      align-items: center;
-      justify-content: center;
-      border-radius: ${(0, element_core_1.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_native_1.default.View(({ theme, checked }) => {
-    return `
-      width: ${(0, element_core_1.numToPx)(theme.space[300])};
-      height: ${(0, element_core_1.numToPx)(theme.space[300])};
-      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
-      background: ${theme.input.color.selected};
-      opacity: ${checked ? 1 : 0};
-    `;
-});
-const Input = (_a) => {
-    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
-    return ((0, jsx_runtime_1.jsx)(StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(StyledRadioInputDot, { checked: checked }) }) })));
-};
-const StyledWrapper = styled_native_1.default.View(({ theme, checked, invalid }) => (0, styled_components_1.css) `
-    align-items: center;
-    background: ${theme.color.surface.bright};
-    padding: ${(0, element_core_1.numToPx)(theme.space[200])};
-    min-width: 82px;
-    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
-    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
-    border-color: ${invalid
-    ? theme.input.color.borderError
-    : checked
-        ? theme.input.color.selected
-        : 'transparent'};
-  `);
+const RadioCard_styles_1 = require("./RadioCard.styles");
 const RadioCard = (_a) => {
-    var { label, checked, invalid, activeOpacity = 0.8, testID, ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "ref"]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(StyledWrapper, { checked: checked, invalid: invalid, children: [typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label, (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
+    var { label, checked, invalid, activeOpacity = 0.8, testID, alignment = 'center', ref } = _a, rest = __rest(_a, ["label", "checked", "invalid", "activeOpacity", "testID", "alignment", "ref"]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, Object.assign({ ref: ref, accessible: true, accessibilityRole: "radio", activeOpacity: activeOpacity, accessibilityState: { checked } }, rest, { children: (0, jsx_runtime_1.jsxs)(RadioCard_styles_1.StyledWrapper, { checked: checked, invalid: invalid, alignment: alignment, children: [(0, jsx_runtime_1.jsx)(RadioCard_styles_1.TextContainer, { children: typeof label === 'string' ? (0, jsx_runtime_1.jsx)(LabelText_1.LabelText, { children: label }) : label }), (0, jsx_runtime_1.jsx)(Input, { checked: checked, invalid: invalid, testID: testID })] }) })));
 };
 exports.RadioCard = RadioCard;
+const Input = (_a) => {
+    var { checked, invalid, testID } = _a, rest = __rest(_a, ["checked", "invalid", "testID"]);
+    return ((0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInputWrapper, Object.assign({}, rest, { children: (0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInput, { invalid: invalid, checked: checked, testID: testID, children: (0, jsx_runtime_1.jsx)(RadioCard_styles_1.StyledRadioInputDot, { checked: checked }) }) })));
+};

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

@@ -0,0 +1,16 @@
+export declare const StyledRadioInputWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {}, never>;
+export declare const StyledRadioInput: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    invalid?: boolean;
+    checked?: boolean;
+}, never>;
+export declare const StyledRadioInputDot: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    checked?: boolean;
+}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    checked: boolean;
+    invalid: boolean;
+    alignment: "center" | "left" | "right";
+}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core").ThemeNative, {
+    alignment: "center" | "left" | "right";
+}, never>;

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

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContainer = exports.StyledWrapper = exports.StyledRadioInputDot = exports.StyledRadioInput = exports.StyledRadioInputWrapper = void 0;
+const element_core_1 = require("@ovotech/element-core");
+const styled_native_1 = __importStar(require("../../styled.native"));
+exports.StyledRadioInputWrapper = styled_native_1.default.View(({ theme }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      margin-top: ${(0, element_core_1.numToPx)(theme.space[200])};
+    `;
+});
+exports.StyledRadioInput = styled_native_1.default.View(({ theme, invalid, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[600])};
+      height: ${(0, element_core_1.numToPx)(theme.space[600])};
+      border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+      align-items: center;
+      justify-content: center;
+      border-radius: ${(0, element_core_1.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'};
+    `;
+});
+exports.StyledRadioInputDot = styled_native_1.default.View(({ theme, checked }) => {
+    return `
+      width: ${(0, element_core_1.numToPx)(theme.space[300])};
+      height: ${(0, element_core_1.numToPx)(theme.space[300])};
+      border-radius: ${(0, element_core_1.numToPx)(theme.space[300])};
+      background: ${theme.input.color.selected};
+      opacity: ${checked ? 1 : 0};
+    `;
+});
+exports.StyledWrapper = styled_native_1.default.View(({ theme, checked, invalid, alignment }) => (0, styled_native_1.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'
+    ? (0, element_core_1.numToPx)(theme.space[200])
+    : (0, element_core_1.numToPx)(theme.space[400])};
+    border-radius: ${(0, element_core_1.numToPx)(theme.border.radius.lg)};
+    border: ${(0, element_core_1.numToPx)(theme.border.width.md)} solid;
+    border-color: ${invalid
+    ? theme.input.color.borderError
+    : checked
+        ? theme.input.color.selected
+        : 'transparent'};
+    gap: ${alignment === 'center' ? 0 : (0, element_core_1.numToPx)(theme.space[400])};
+  `);
+exports.TextContainer = styled_native_1.default.View(({ alignment }) => (0, styled_native_1.css) `
+    flex-direction: column;
+    flex-grow: 1;
+    text-align: ${alignment === 'center' ? 'center' : 'left'};
+  `);

package/dist/components/Rail/Rail.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconNameExtended } from '../../providers';
+type Props = {
+    children: React.ReactNode;
+    indicator?: boolean;
+    heading?: string;
+    subHeading?: string;
+    icon?: IconNameExtended;
+    maxChildren?: number;
+};
+export declare const Rail: ({ children, indicator, icon, heading, subHeading, maxChildren, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Rail/Rail.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rail = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const Icon_1 = require("../Icon");
+const P_1 = require("../P");
+const Strong_1 = require("../Strong");
+const RailIndicator_1 = require("./RailIndicator");
+const styles_1 = require("./styles");
+const useRailPaging_1 = require("./useRailPaging");
+const DEFAULT_MAX_CHILDREN = 6;
+const Rail = ({ children, indicator = true, icon, heading, subHeading, maxChildren = DEFAULT_MAX_CHILDREN, }) => {
+    const allItems = (0, react_1.useMemo)(() => react_1.default.Children.toArray(children), [children]);
+    const items = (0, react_1.useMemo)(() => allItems.slice(0, Math.max(0, maxChildren)), [allItems, maxChildren]);
+    const paging = (0, useRailPaging_1.useRailPaging)({ itemCount: items.length });
+    const hasIndicator = indicator && paging.isScrollable;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { children: [icon && ((0, jsx_runtime_1.jsx)(styles_1.IconContainer, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: icon, size: 24 }) })), (heading || subHeading) && ((0, jsx_runtime_1.jsxs)(styles_1.HeadingText, { children: [heading && ((0, jsx_runtime_1.jsx)(P_1.P, { size: "lg", children: (0, jsx_runtime_1.jsx)(Strong_1.Strong, { children: heading }) })), subHeading && (0, jsx_runtime_1.jsx)(P_1.P, { size: "sm", children: subHeading })] }))] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: e => paging.onContainerLayout(e.nativeEvent.layout.width), children: [(0, jsx_runtime_1.jsx)(styles_1.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) => ((0, jsx_runtime_1.jsx)(styles_1.RailItemWrapper, { onLayout: (e) => {
+                                if (index !== 0)
+                                    return;
+                                paging.onItemLayout(e.nativeEvent.layout.width);
+                            }, children: child }, `Rail-item-${index}`))) }), hasIndicator && ((0, jsx_runtime_1.jsx)(RailIndicator_1.RailIndicator, { dotCount: items.length, activeStartIndex: paging.activeStartIndex, visibleCount: paging.visibleCount }))] })] }));
+};
+exports.Rail = Rail;

package/dist/components/Rail/RailIndicator.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    dotCount: number;
+    activeStartIndex: number;
+    visibleCount: number;
+};
+export declare const RailIndicator: ({ dotCount, activeStartIndex, visibleCount, }: Props) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/Rail/RailIndicator.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RailIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const styled_native_1 = require("../../styled.native");
+const styles_1 = require("./styles");
+const RailIndicator = ({ dotCount, activeStartIndex, visibleCount, }) => {
+    const theme = (0, styled_native_1.useTheme)();
+    const DOT = theme.space[200];
+    const GAP = theme.space[200];
+    const PADDING = theme.space[350];
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
+    const onContainerLayout = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        return dotCount * DOT + (dotCount - 1) * GAP;
+    }, [dotCount, DOT, GAP]);
+    const step = DOT + GAP;
+    const animatedLeft = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        if (containerWidth <= 0)
+            return 0;
+        const innerWidth = Math.max(0, containerWidth - 2 * PADDING);
+        const rowLeft = PADDING + Math.max(0, (innerWidth - rowWidth) / 2);
+        return (0, react_native_reanimated_1.withTiming)(rowLeft + start * step, { duration: 150 });
+    }, [containerWidth, PADDING, rowWidth, start, step]);
+    const animatedWidth = (0, react_native_reanimated_1.useDerivedValue)(() => {
+        const w = visible * DOT + Math.max(0, visible - 1) * GAP;
+        return (0, react_native_reanimated_1.withTiming)(w, { duration: 150 });
+    }, [visible, DOT, GAP]);
+    const pillStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        position: 'absolute',
+        left: animatedLeft.value,
+        width: animatedWidth.value,
+        opacity: containerWidth > 0 ? 1 : 0,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.RailIndicatorContainer, { onLayout: onContainerLayout, children: [Array.from({ length: dotCount }).map((_, index) => ((0, jsx_runtime_1.jsx)(styles_1.DotContainer, { isActive: false }, `dot-${index}`))), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: pillStyle, children: (0, jsx_runtime_1.jsx)(styles_1.DotContainer, { isActive: true, style: { width: '100%' } }) })] }));
+};
+exports.RailIndicator = RailIndicator;

package/dist/components/Rail/index.d.ts

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

package/dist/components/Rail/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rail = void 0;
+var Rail_1 = require("./Rail");
+Object.defineProperty(exports, "Rail", { enumerable: true, get: function () { return Rail_1.Rail; } });

package/dist/components/Rail/styles.d.ts

@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+export declare const StyledRail: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-native-reanimated").AnimatedScrollViewProps & import("react").RefAttributes<Animated.ScrollView>>, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    hasIndicator: boolean;
+}, never>;
+export declare const RailItemWrapper: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const RailIndicatorContainer: import("styled-components").StyledComponent<typeof import("react-native").View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const DotContainer: import("styled-components").StyledComponent<import("react").ComponentClass<import("react-native-reanimated").AnimateProps<import("react-native").ViewProps>, any>, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {
+    isActive: boolean;
+}, never>;
+export declare const Header: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const HeadingText: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<typeof View, import("@ovotech/element-core/dist/tokens-build/theme-native.types").ThemeNative, {}, never>;

package/dist/components/Rail/styles.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconContainer = exports.HeadingText = exports.Header = exports.DotContainer = exports.RailIndicatorContainer = exports.RailItemWrapper = exports.StyledRail = void 0;
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importDefault(require("react-native-reanimated"));
+const styled_native_1 = __importDefault(require("../../styled.native"));
+exports.StyledRail = (0, styled_native_1.default)(react_native_reanimated_1.default.ScrollView)(({ theme, hasIndicator }) => ({
+    paddingVertical: theme.space[350],
+    paddingHorizontal: theme.space[50],
+    marginBottom: hasIndicator ? 0 : theme.space[900],
+}));
+exports.RailItemWrapper = styled_native_1.default.View(({ theme }) => ({
+    paddingHorizontal: theme.space[100],
+}));
+exports.RailIndicatorContainer = styled_native_1.default.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],
+}));
+exports.DotContainer = (0, styled_native_1.default)(react_native_reanimated_1.default.View)(({ theme, isActive }) => ({
+    height: theme.space[200],
+    width: theme.space[200],
+    borderRadius: 9999,
+    backgroundColor: isActive
+        ? theme.color.surface.onSurface
+        : theme.color.surface.onSurfaceVariant,
+}));
+exports.Header = (0, styled_native_1.default)(react_native_1.View)(({ theme }) => ({
+    flexDirection: 'row',
+    gap: theme.space[300],
+    marginBottom: -theme.space[100],
+    marginLeft: theme.space[100],
+}));
+exports.HeadingText = (0, styled_native_1.default)(react_native_1.View)({
+    flex: 1,
+    flexShrink: 1,
+});
+exports.IconContainer = (0, styled_native_1.default)(react_native_1.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',
+}));

package/dist/components/Rail/useRailPaging.d.ts

@@ -0,0 +1,13 @@
+export type UseRailPagingArgs = {
+    itemCount: number;
+};
+export declare function useRailPaging({ itemCount }: UseRailPagingArgs): {
+    snapOffsets: number[];
+    isScrollable: boolean;
+    activeStartIndex: number;
+    visibleCount: number;
+    onContainerLayout: (width: number) => void;
+    onContentSizeChange: (width: number) => void;
+    onItemLayout: (width: number) => void;
+    onMomentumEnd: (offsetX: number) => void;
+};