@utilitywarehouse/hearth-react-native 0.27.3 → 0.28.0

package/build/components/Table/Table.context.d.ts

@@ -0,0 +1,12 @@
+import type { TableProps } from './Table.props';
+type TableContainer = TableProps['container'];
+type TableColumnWidths = NonNullable<TableProps['columnWidths']>;
+interface TableContextValue {
+    columnWidths: TableColumnWidths;
+    container: TableContainer;
+    columnCount: number;
+    hasPagination: boolean;
+}
+export declare const TableContextProvider: import("react").Provider<TableContextValue>;
+export declare const useTableContext: () => TableContextValue;
+export {};

package/build/components/Table/Table.context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+const TableContext = createContext({
+    columnWidths: [],
+    container: 'none',
+    columnCount: 1,
+    hasPagination: false,
+});
+export const TableContextProvider = TableContext.Provider;
+export const useTableContext = () => useContext(TableContext);

package/build/components/Table/Table.d.ts

@@ -0,0 +1,6 @@
+import type { TableProps } from './Table.props';
+declare const Table: {
+    ({ children, columnWidths, container, pagination, style, ...props }: TableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Table;

package/build/components/Table/Table.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useState } from 'react';
+import { View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native-unistyles';
+import { Card } from '../Card';
+import { TableContextProvider } from './Table.context';
+import { getMinTableWidth } from './Table.utils';
+const MIN_COLUMN_WIDTH = 120;
+const getChildCount = (node) => {
+    if (!isValidElement(node)) {
+        return 0;
+    }
+    const childProps = node.props;
+    return Children.count(childProps.children);
+};
+const getMaxColumnCount = (children) => {
+    let maxColumns = 1;
+    Children.forEach(children, child => {
+        if (!isValidElement(child)) {
+            return;
+        }
+        const childType = child.type;
+        const childProps = child.props;
+        if (childType.displayName === 'TableHeader') {
+            maxColumns = Math.max(maxColumns, getChildCount(child));
+            return;
+        }
+        if (childType.displayName === 'TableBody') {
+            Children.forEach(childProps.children, rowChild => {
+                maxColumns = Math.max(maxColumns, getChildCount(rowChild));
+            });
+        }
+    });
+    return maxColumns;
+};
+const Table = ({ children, columnWidths = [], container = 'none', pagination, style, ...props }) => {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const columnCount = getMaxColumnCount(children);
+    const minTableWidth = getMinTableWidth(columnCount, columnWidths, MIN_COLUMN_WIDTH);
+    const tableWidth = Math.max(containerWidth, minTableWidth);
+    const isScrollable = tableWidth > containerWidth + 1;
+    const handleLayout = (event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        setContainerWidth(currentWidth => (currentWidth === nextWidth ? currentWidth : nextWidth));
+    };
+    const content = (_jsxs(View, { onLayout: handleLayout, style: styles.wrapper, children: [_jsx(ScrollView, { alwaysBounceHorizontal: false, alwaysBounceVertical: false, bounces: false, canCancelContentTouches: true, contentContainerStyle: styles.scrollContent, horizontal: true, keyboardShouldPersistTaps: "handled", nestedScrollEnabled: true, overScrollMode: "never", scrollEnabled: isScrollable, scrollEventThrottle: 16, showsHorizontalScrollIndicator: true, children: _jsx(View, { style: [styles.content, { width: tableWidth || minTableWidth }], children: children }) }), pagination ? _jsx(View, { style: styles.pagination, children: pagination }) : null] }));
+    const hasPagination = Boolean(pagination);
+    return (_jsx(TableContextProvider, { value: { columnCount, columnWidths, container, hasPagination }, children: container !== 'none' ? (_jsx(Card, { ...props, colorScheme: "neutralStrong", noPadding: true, style: style, variant: container, children: content })) : (_jsx(View, { ...props, style: [styles.plainTable, style], children: content })) }));
+};
+Table.displayName = 'Table';
+const styles = StyleSheet.create(theme => ({
+    wrapper: {
+        width: '100%',
+    },
+    plainTable: {
+        width: '100%',
+        overflow: 'hidden',
+    },
+    scrollContent: {
+        minWidth: '100%',
+    },
+    content: {
+        alignSelf: 'flex-start',
+    },
+    pagination: {
+        paddingHorizontal: theme.components.table.cell.padding,
+        paddingVertical: theme.space[200],
+    },
+}));
+export default Table;

package/build/components/Table/Table.props.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+import type PaginationProps from '../Pagination/Pagination.props';
+export interface TableFlexibleColumnWidth {
+    flex: number;
+}
+export type TableColumnWidth = number | `${number}fr` | TableFlexibleColumnWidth;
+export interface TableProps extends ViewProps {
+    /**
+     * Controls whether the table is wrapped in a card container.
+     * @default 'none'
+     */
+    container?: 'emphasis' | 'subtle' | 'none';
+    /**
+     * Optional per-column sizing using fixed pixel widths or flexible fractions.
+     * Use numbers for fixed widths and values like `'2fr'` for flexible columns.
+     * Objects like `{ flex: 2 }` are also supported internally.
+     * Unspecified columns default to `1fr`.
+     */
+    columnWidths?: TableColumnWidth[];
+    /**
+     * Optional pagination controls rendered beneath the rows.
+     */
+    pagination?: React.ReactElement<PaginationProps> | ReactNode;
+}
+export interface TableBodyProps extends ViewProps {
+    children: ReactNode;
+}
+export interface TableHeaderProps extends ViewProps {
+    children: ReactNode;
+    /**
+     * Visual style for header cells.
+     * @default 'purple'
+     */
+    color?: 'purple' | 'white';
+}
+export interface TableRowProps extends ViewProps {
+    children: ReactNode;
+}
+export interface TableCellProps extends ViewProps {
+    children?: ReactNode;
+}
+export interface TableHeaderCellProps extends ViewProps {
+    children?: ReactNode;
+    color?: 'purple' | 'white';
+    /**
+     * Renders the header cell as a row header within the body.
+     * @default false
+     */
+    row?: boolean;
+    /**
+     * Optional content aligned to the end of a header cell.
+     */
+    trailingContent?: ReactNode;
+}
+export type TablePaginationProps = PaginationProps;

package/build/components/Table/Table.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/Table/Table.utils.d.ts

@@ -0,0 +1,5 @@
+import type { ViewStyle } from 'react-native';
+import type { TableColumnWidth } from './Table.props';
+export declare const getColumnMinWidth: (columnWidth: TableColumnWidth | undefined, minColumnWidth: number) => number;
+export declare const getMinTableWidth: (columnCount: number, columnWidths: TableColumnWidth[], minColumnWidth: number) => number;
+export declare const getColumnStyle: (columnWidth: TableColumnWidth | undefined, minColumnWidth: number) => ViewStyle;

package/build/components/Table/Table.utils.js

@@ -0,0 +1,48 @@
+const FR_UNIT_PATTERN = /^(\d*\.?\d+)fr$/;
+const parseFractionUnit = (columnWidth) => {
+    if (typeof columnWidth !== 'string') {
+        return null;
+    }
+    const match = columnWidth.match(FR_UNIT_PATTERN);
+    if (!match) {
+        return null;
+    }
+    const parsedValue = Number(match[1]);
+    return Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : null;
+};
+const getFlexGrow = (columnWidth) => {
+    if (!columnWidth || typeof columnWidth === 'number') {
+        return 1;
+    }
+    if (typeof columnWidth === 'string') {
+        return parseFractionUnit(columnWidth) ?? 1;
+    }
+    return Number.isFinite(columnWidth.flex) && columnWidth.flex > 0 ? columnWidth.flex : 1;
+};
+export const getColumnMinWidth = (columnWidth, minColumnWidth) => {
+    if (typeof columnWidth === 'number') {
+        return Math.max(columnWidth, minColumnWidth);
+    }
+    return minColumnWidth;
+};
+export const getMinTableWidth = (columnCount, columnWidths, minColumnWidth) => {
+    return Array.from({ length: columnCount }).reduce((totalWidth, _, index) => {
+        return totalWidth + getColumnMinWidth(columnWidths[index], minColumnWidth);
+    }, 0);
+};
+export const getColumnStyle = (columnWidth, minColumnWidth) => {
+    if (typeof columnWidth === 'number') {
+        return {
+            width: columnWidth,
+            minWidth: columnWidth,
+            flexGrow: 0,
+            flexShrink: 0,
+        };
+    }
+    return {
+        minWidth: minColumnWidth,
+        flexBasis: 0,
+        flexGrow: getFlexGrow(columnWidth),
+        flexShrink: 0,
+    };
+};

package/build/components/Table/Table.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/components/Table/Table.utils.test.js

@@ -0,0 +1,71 @@
+import { describe, expect, it } from 'vitest';
+import { getColumnMinWidth, getColumnStyle, getMinTableWidth } from './Table.utils';
+describe('getColumnMinWidth', () => {
+    it('returns the configured fixed width when it is larger than the minimum', () => {
+        expect(getColumnMinWidth(180, 120)).toBe(180);
+    });
+    it('clamps fixed widths to the minimum column width', () => {
+        expect(getColumnMinWidth(80, 120)).toBe(120);
+    });
+    it('returns the minimum width for flexible and unspecified columns', () => {
+        expect(getColumnMinWidth('2fr', 120)).toBe(120);
+        expect(getColumnMinWidth({ flex: 3 }, 120)).toBe(120);
+        expect(getColumnMinWidth(undefined, 120)).toBe(120);
+    });
+});
+describe('getMinTableWidth', () => {
+    it('adds fixed widths and minimum widths for flexible columns', () => {
+        expect(getMinTableWidth(4, [180, '2fr', { flex: 3 }], 120)).toBe(540);
+    });
+    it('uses the minimum width for unspecified trailing columns', () => {
+        expect(getMinTableWidth(3, [200], 120)).toBe(440);
+    });
+});
+describe('getColumnStyle', () => {
+    it('returns a fixed-width style for numeric column widths', () => {
+        expect(getColumnStyle(180, 120)).toEqual({
+            width: 180,
+            minWidth: 180,
+            flexGrow: 0,
+            flexShrink: 0,
+        });
+    });
+    it('maps fr values to flexGrow', () => {
+        expect(getColumnStyle('2fr', 120)).toEqual({
+            minWidth: 120,
+            flexBasis: 0,
+            flexGrow: 2,
+            flexShrink: 0,
+        });
+    });
+    it('supports fractional fr values', () => {
+        expect(getColumnStyle('0.5fr', 120)).toEqual({
+            minWidth: 120,
+            flexBasis: 0,
+            flexGrow: 0.5,
+            flexShrink: 0,
+        });
+    });
+    it('uses flex weights from object column widths', () => {
+        expect(getColumnStyle({ flex: 3 }, 120)).toEqual({
+            minWidth: 120,
+            flexBasis: 0,
+            flexGrow: 3,
+            flexShrink: 0,
+        });
+    });
+    it('falls back to a single flexible column for invalid flexible values', () => {
+        expect(getColumnStyle('invalid', 120)).toEqual({
+            minWidth: 120,
+            flexBasis: 0,
+            flexGrow: 1,
+            flexShrink: 0,
+        });
+        expect(getColumnStyle({ flex: 0 }, 120)).toEqual({
+            minWidth: 120,
+            flexBasis: 0,
+            flexGrow: 1,
+            flexShrink: 0,
+        });
+    });
+});

package/build/components/Table/TableBody.d.ts

@@ -0,0 +1,6 @@
+import { TableBodyProps } from './Table.props';
+declare const TableBody: {
+    ({ children, ...props }: TableBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableBody;

package/build/components/Table/TableBody.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+const TableBody = ({ children, ...props }) => {
+    const items = Children.toArray(children);
+    return (_jsx(View, { ...props, children: items.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                isLastRow: index === items.length - 1,
+            });
+        }) }));
+};
+TableBody.displayName = 'TableBody';
+export default TableBody;

package/build/components/Table/TableCell.d.ts

@@ -0,0 +1,10 @@
+import { TableCellProps } from './Table.props';
+declare const TableCell: {
+    ({ children, style, ...props }: TableCellProps & {
+        columnIndex?: number;
+        isLast?: boolean;
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableCell;

package/build/components/Table/TableCell.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import { getColumnStyle } from './Table.utils';
+const renderContent = (children, weight = 'regular') => {
+    if (typeof children === 'string' || typeof children === 'number') {
+        return (_jsx(BodyText, { size: "md", weight: weight, children: children }));
+    }
+    return children;
+};
+const TableCell = ({ children, style, ...props }) => {
+    const { columnWidths, container, hasPagination } = useTableContext();
+    const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+    const removeBottomBorder = Boolean(isLastRow && container !== 'none' && !hasPagination);
+    const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+    return (_jsx(View, { ...rest, style: [
+            styles.cell,
+            columnStyle,
+            isLast && styles.lastCell,
+            removeBottomBorder && styles.lastRowCell,
+            style,
+        ], children: renderContent(children) }));
+};
+TableCell.displayName = 'TableCell';
+const styles = StyleSheet.create(theme => ({
+    cell: {
+        minHeight: theme.components.table.cell.minHeight,
+        justifyContent: 'center',
+        padding: theme.components.table.cell.padding,
+        borderRightWidth: theme.components.table.cell.borderWidth,
+        borderBottomWidth: theme.components.table.cell.borderWidth,
+        borderColor: theme.color.border.subtle,
+        backgroundColor: theme.color.surface.neutral.strong,
+    },
+    lastCell: {
+        borderRightWidth: 0,
+    },
+    lastRowCell: {
+        borderBottomWidth: 0,
+    },
+}));
+export default TableCell;

package/build/components/Table/TableHeader.d.ts

@@ -0,0 +1,6 @@
+import { TableHeaderProps } from './Table.props';
+declare const TableHeader: {
+    ({ children, color, style, ...props }: TableHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableHeader;

package/build/components/Table/TableHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+const TableHeader = ({ children, color = 'purple', style, ...props }) => {
+    const items = Children.toArray(children);
+    return (_jsx(View, { ...props, style: [styles.header, style], children: items.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                color,
+                columnIndex: index,
+                isLast: index === items.length - 1,
+            });
+        }) }));
+};
+TableHeader.displayName = 'TableHeader';
+const styles = {
+    header: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+};
+export default TableHeader;

package/build/components/Table/TableHeaderCell.d.ts

@@ -0,0 +1,10 @@
+import type { TableHeaderCellProps } from './Table.props';
+declare const TableHeaderCell: {
+    ({ children, color, row, style, trailingContent, ...props }: TableHeaderCellProps & {
+        columnIndex?: number;
+        isLast?: boolean;
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableHeaderCell;

package/build/components/Table/TableHeaderCell.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { useTableContext } from './Table.context';
+import { getColumnStyle } from './Table.utils';
+const renderContent = (children, weight = 'semibold', color = 'white') => {
+    if (typeof children === 'string' || typeof children === 'number') {
+        return (_jsx(BodyText, { size: "md", weight: weight, style: styles.text, inverted: color === 'purple', children: children }));
+    }
+    return children;
+};
+const TableHeaderCell = ({ children, color = 'white', row = false, style, trailingContent, ...props }) => {
+    const { columnWidths, container, hasPagination } = useTableContext();
+    const { columnIndex = 0, isLast, isLastRow, ...rest } = props;
+    const removeBottomBorder = Boolean(row && isLastRow && container !== 'none' && !hasPagination);
+    const columnStyle = getColumnStyle(columnWidths[columnIndex], 120);
+    styles.useVariants({ color, row });
+    const trailingElement = trailingContent && isValidElement(trailingContent)
+        ? trailingContent
+        : null;
+    const resolvedTrailingContent = trailingElement && !row && 'inverted' in (trailingElement.props ?? {})
+        ? cloneElement(trailingElement, {
+            inverted: color === 'purple',
+        })
+        : trailingContent;
+    return (_jsx(View, { ...rest, style: [
+            styles.cell,
+            columnStyle,
+            isLast && styles.lastCell,
+            removeBottomBorder && styles.lastRowCell,
+            style,
+        ], children: _jsxs(View, { style: styles.content, children: [renderContent(children, 'semibold', color), resolvedTrailingContent ? (_jsx(View, { style: styles.trailing, children: resolvedTrailingContent })) : null] }) }));
+};
+TableHeaderCell.displayName = 'TableHeaderCell';
+const styles = StyleSheet.create(theme => ({
+    cell: {
+        minHeight: theme.components.table.headerCell.height,
+        justifyContent: 'center',
+        paddingHorizontal: theme.components.table.headerCell.paddingHorizontal,
+        paddingVertical: theme.components.table.headerCell.paddingVertical,
+        borderRightWidth: theme.components.table.headerCell.borderWidth,
+        borderBottomWidth: theme.components.table.headerCell.borderWidth,
+        borderColor: theme.color.border.subtle,
+        backgroundColor: theme.color.surface.neutral.strong,
+        variants: {
+            color: {
+                purple: {
+                    borderColor: theme.color.interactive.brand.foreground.strong,
+                    backgroundColor: theme.color.surface.brand.default,
+                },
+                white: {
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.strong,
+                },
+            },
+            row: {
+                true: {
+                    minHeight: theme.components.table.cell.minHeight,
+                    paddingHorizontal: theme.components.table.cell.padding,
+                    paddingVertical: theme.components.table.cell.padding,
+                    borderRightWidth: theme.components.table.cell.borderWidth,
+                    borderBottomWidth: theme.components.table.cell.borderWidth,
+                    borderColor: theme.color.border.subtle,
+                    backgroundColor: theme.color.surface.neutral.strong,
+                },
+            },
+        },
+    },
+    lastCell: {
+        borderRightWidth: 0,
+    },
+    lastRowCell: {
+        borderBottomWidth: 0,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: theme.components.table.headerCell.gap,
+    },
+    trailing: {
+        flexShrink: 0,
+    },
+    text: {
+        flexShrink: 1,
+        variants: {
+            row: {
+                true: {
+                    color: theme.color.text.primary,
+                },
+            },
+        },
+    },
+}));
+export default TableHeaderCell;

package/build/components/Table/TablePagination.d.ts

@@ -0,0 +1,6 @@
+import type { TablePaginationProps } from './Table.props';
+declare const TablePagination: {
+    (props: TablePaginationProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TablePagination;

package/build/components/Table/TablePagination.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from '../Pagination';
+const TablePagination = (props) => {
+    return _jsx(Pagination, { ...props });
+};
+TablePagination.displayName = 'TablePagination';
+export default TablePagination;

package/build/components/Table/TableRow.d.ts

@@ -0,0 +1,8 @@
+import { TableRowProps } from './Table.props';
+declare const TableRow: {
+    ({ children, ...props }: TableRowProps & {
+        isLastRow?: boolean;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default TableRow;

package/build/components/Table/TableRow.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import { View } from 'react-native';
+const TableRow = ({ children, ...props }) => {
+    const items = Children.toArray(children);
+    const { isLastRow = false, ...rest } = props;
+    return (_jsx(View, { ...rest, style: [styles.row, rest.style], children: items.map((child, index) => {
+            if (!isValidElement(child)) {
+                return child;
+            }
+            return cloneElement(child, {
+                isLast: index === items.length - 1,
+                columnIndex: index,
+                isLastRow,
+            });
+        }) }));
+};
+TableRow.displayName = 'TableRow';
+const styles = {
+    row: {
+        flexDirection: 'row',
+        width: '100%',
+    },
+};
+export default TableRow;

package/build/components/Table/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Table } from './Table';
+export type { TableBodyProps, TableCellProps, TableHeaderCellProps, TableHeaderProps, TablePaginationProps, TableProps, TableRowProps, } from './Table.props';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';

package/build/components/Table/index.js

@@ -0,0 +1,7 @@
+export { default as Table } from './Table';
+export { default as TableBody } from './TableBody';
+export { default as TableCell } from './TableCell';
+export { default as TableHeader } from './TableHeader';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export { default as TablePagination } from './TablePagination';
+export { default as TableRow } from './TableRow';

package/build/components/Timeline/Timeline.d.ts

@@ -0,0 +1,6 @@
+import type { TimelineProps } from './Timeline.props';
+declare const Timeline: {
+    ({ children, variant, style, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Timeline;

package/build/components/Timeline/Timeline.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+const getItemPosition = (index, count) => {
+    if (count <= 1) {
+        return 'single';
+    }
+    if (index === 0) {
+        return 'start';
+    }
+    if (index === count - 1) {
+        return 'end';
+    }
+    return 'middle';
+};
+const Timeline = ({ children, variant = 'static', style, ...rest }) => {
+    const childElements = React.Children.toArray(children).filter(React.isValidElement);
+    return (_jsx(View, { accessibilityRole: "list", style: [styles.root, style], ...rest, children: childElements.map((child, index) => {
+            const position = getItemPosition(index, childElements.length);
+            return React.cloneElement(child, {
+                key: child.key ?? `timeline-item-${index}`,
+                position,
+                variant,
+            });
+        }) }));
+};
+Timeline.displayName = 'Timeline';
+const styles = StyleSheet.create(() => ({
+    root: {
+        width: '100%',
+    },
+}));
+export default Timeline;