@utilitywarehouse/hearth-react-native 0.27.2 → 0.28.0-testid-fix-1

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

@@ -0,0 +1,26 @@
+import type { ViewProps } from 'react-native';
+export interface PaginationProps extends ViewProps {
+    /**
+     * The current active page number (1-indexed).
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * Callback fired when the page changes.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * Whether to show condensed copy instead of individual page items.
+     * @default false
+     */
+    condensed?: boolean;
+    /**
+     * Whether to hide the first and last page controls.
+     * @default false
+     */
+    hideSkipButtons?: boolean;
+}
+export default PaginationProps;

package/build/components/Pagination/Pagination.props.js

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

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

@@ -0,0 +1,2 @@
+export declare const ELLIPSIS = "...";
+export declare const generatePageNumbers: (currentPage: number, totalPages: number) => Array<number | typeof ELLIPSIS>;

package/build/components/Pagination/Pagination.utils.js

@@ -0,0 +1,20 @@
+export const ELLIPSIS = '...';
+const MAX_VISIBLE_ITEMS = 7;
+export const generatePageNumbers = (currentPage, totalPages) => {
+    if (totalPages <= MAX_VISIBLE_ITEMS) {
+        return Array.from({ length: totalPages }, (_, index) => index + 1);
+    }
+    const pages = [];
+    const isNearStart = currentPage <= 4;
+    const isNearEnd = currentPage > totalPages - 4;
+    if (isNearStart) {
+        pages.push(1, 2, 3, 4, 5, ELLIPSIS, totalPages);
+        return pages;
+    }
+    if (isNearEnd) {
+        pages.push(1, ELLIPSIS, totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
+        return pages;
+    }
+    pages.push(1, ELLIPSIS, currentPage - 1, currentPage, currentPage + 1, ELLIPSIS, totalPages);
+    return pages;
+};

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

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

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

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { ELLIPSIS, generatePageNumbers } from './Pagination.utils';
+describe('generatePageNumbers', () => {
+    it('returns all pages when the total fits within the visible limit', () => {
+        expect(generatePageNumbers(1, 7)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+    });
+    it('returns the leading window when the current page is near the start', () => {
+        expect(generatePageNumbers(2, 10)).toEqual([1, 2, 3, 4, 5, ELLIPSIS, 10]);
+    });
+    it('returns the centered window when the current page is in the middle', () => {
+        expect(generatePageNumbers(5, 10)).toEqual([1, ELLIPSIS, 4, 5, 6, ELLIPSIS, 10]);
+    });
+    it('returns the trailing window when the current page is near the end', () => {
+        expect(generatePageNumbers(9, 10)).toEqual([1, ELLIPSIS, 6, 7, 8, 9, 10]);
+    });
+});

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

@@ -0,0 +1,2 @@
+export { default as Pagination } from './Pagination';
+export type { default as PaginationProps } from './Pagination.props';

package/build/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination';

package/build/components/SafeAreaView/SafeAreaView.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { View } from 'react-native';
+import SafeAreaViewProps from './SafeAreaView.props';
+declare const SafeAreaView: React.ForwardRefExoticComponent<SafeAreaViewProps & React.RefAttributes<View>>;
+export default SafeAreaView;

package/build/components/SafeAreaView/SafeAreaView.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { StyleSheet as RNStyleSheet, useWindowDimensions, View, } from 'react-native';
+import { UnistylesRuntime } from '../../core';
+const DEFAULT_EDGES = ['top', 'right', 'bottom', 'left'];
+const EMPTY_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+const EDGE_EPSILON = 1;
+const getNumericStyleValue = (value) => {
+    return typeof value === 'number' ? value : 0;
+};
+const getStyleInsetValue = (style, mode, edge) => {
+    const prefix = mode === 'margin' ? 'margin' : 'padding';
+    if (!style) {
+        // No style specified at all; treat as zero inset for safe-area calculations.
+        return 0;
+    }
+    if (edge === 'top') {
+        const raw = style[`${prefix}Top`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'bottom') {
+        const raw = style[`${prefix}Bottom`] ?? style[`${prefix}Vertical`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    if (edge === 'left') {
+        const raw = style[`${prefix}Left`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+        if (raw == null) {
+            return 0;
+        }
+        return getNumericStyleValue(raw);
+    }
+    const raw = style[`${prefix}Right`] ?? style[`${prefix}Horizontal`] ?? style[prefix];
+    if (raw == null) {
+        return 0;
+    }
+    return getNumericStyleValue(raw);
+};
+const SafeAreaView = forwardRef(({ children, edges = DEFAULT_EDGES, mode = 'padding', onLayout, style, ...props }, ref) => {
+    const viewRef = useRef(null);
+    const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+    const [edgeInsets, setEdgeInsets] = useState(EMPTY_INSETS);
+    const flattenedStyle = useMemo(() => RNStyleSheet.flatten(style), [style]);
+    const updateEdgeInsets = useCallback(() => {
+        const currentView = viewRef.current;
+        if (!currentView) {
+            return;
+        }
+        currentView.measureInWindow((x, y, width, height) => {
+            const runtimeInsets = UnistylesRuntime.insets ?? EMPTY_INSETS;
+            const nextEdgeInsets = {
+                top: edges.includes('top') ? Math.max(runtimeInsets.top - Math.max(y, 0), 0) : 0,
+                right: edges.includes('right')
+                    ? Math.max(runtimeInsets.right - Math.max(windowWidth - (x + width), 0), 0)
+                    : 0,
+                bottom: edges.includes('bottom')
+                    ? Math.max(runtimeInsets.bottom - Math.max(windowHeight - (y + height), 0), 0)
+                    : 0,
+                left: edges.includes('left') ? Math.max(runtimeInsets.left - Math.max(x, 0), 0) : 0,
+            };
+            setEdgeInsets(previousInsets => {
+                const hasChanged = Object.keys(nextEdgeInsets).some(edge => Math.abs(previousInsets[edge] - nextEdgeInsets[edge]) > EDGE_EPSILON);
+                return hasChanged ? nextEdgeInsets : previousInsets;
+            });
+        });
+    }, [edges, windowHeight, windowWidth]);
+    useEffect(() => {
+        const frame = requestAnimationFrame(updateEdgeInsets);
+        return () => cancelAnimationFrame(frame);
+    }, [updateEdgeInsets]);
+    const handleRef = useCallback((node) => {
+        viewRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleLayout = useCallback((event) => {
+        onLayout?.(event);
+        requestAnimationFrame(updateEdgeInsets);
+    }, [onLayout, updateEdgeInsets]);
+    const safeAreaStyle = useMemo(() => {
+        const nextStyle = {};
+        if (mode === 'padding') {
+            nextStyle.paddingTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+            nextStyle.paddingRight =
+                getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+            nextStyle.paddingBottom =
+                getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+            nextStyle.paddingLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+            return nextStyle;
+        }
+        nextStyle.marginTop = getStyleInsetValue(flattenedStyle, mode, 'top') + edgeInsets.top;
+        nextStyle.marginRight = getStyleInsetValue(flattenedStyle, mode, 'right') + edgeInsets.right;
+        nextStyle.marginBottom =
+            getStyleInsetValue(flattenedStyle, mode, 'bottom') + edgeInsets.bottom;
+        nextStyle.marginLeft = getStyleInsetValue(flattenedStyle, mode, 'left') + edgeInsets.left;
+        return nextStyle;
+    }, [
+        edgeInsets.bottom,
+        edgeInsets.left,
+        edgeInsets.right,
+        edgeInsets.top,
+        flattenedStyle,
+        mode,
+    ]);
+    return (_jsx(View, { ref: handleRef, onLayout: handleLayout, style: [style, safeAreaStyle], ...props, children: children }));
+});
+SafeAreaView.displayName = 'SafeAreaView';
+export default SafeAreaView;

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

@@ -0,0 +1,17 @@
+import { ViewProps } from 'react-native';
+export type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left';
+interface SafeAreaViewProps extends ViewProps {
+    /**
+     * Which edges should receive safe area compensation.
+     *
+     * @default ['top', 'right', 'bottom', 'left']
+     */
+    edges?: SafeAreaEdge[];
+    /**
+     * Whether safe area compensation should be applied as padding or margin.
+     *
+     * @default 'padding'
+     */
+    mode?: 'padding' | 'margin';
+}
+export default SafeAreaViewProps;

package/build/components/SafeAreaView/SafeAreaView.props.js

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

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

@@ -0,0 +1,2 @@
+export { default as SafeAreaView } from './SafeAreaView';
+export type { default as SafeAreaViewProps, SafeAreaEdge } from './SafeAreaView.props';

package/build/components/SafeAreaView/index.js

@@ -0,0 +1 @@
+export { default as SafeAreaView } from './SafeAreaView';

package/build/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import SelectProps from './Select.props';
 declare const Select: {
-    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ options, value, onValueChange, label, labelVariant, placeholder, disabled, leadingIcon: LeadingIcon, validationStatus, helperText, helperIcon, invalidText, validText, required, children, bottomSheetProps, menuHeading, readonly, emptyText, listProps, searchable, searchPlaceholder, testID, ...rest }: SelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Select;

package/build/components/Select/Select.js

@@ -11,7 +11,8 @@ import { Icon } from '../Icon';
 import { Input } from '../Input';
 import { SelectContext } from './Select.context';
 import SelectOption from './SelectOption';
-const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', ...rest }) => {
+import { SafeAreaView } from '../SafeAreaView';
+const Select = ({ options = [], value, onValueChange, label, labelVariant = 'body', placeholder = 'Select an option', disabled = false, leadingIcon: LeadingIcon, validationStatus = 'initial', helperText, helperIcon, invalidText, validText, required = true, children, bottomSheetProps, menuHeading, readonly = false, emptyText = 'No options available', listProps, searchable = false, searchPlaceholder = 'Search', testID, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
     const isRequired = formFieldContext?.required ?? required;
@@ -64,19 +65,19 @@ const Select = ({ options = [], value, onValueChange, label, labelVariant = 'bod
         setIsOpen(false);
         setSearch('');
     }, []);
-    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon })), []);
+    const renderSelectOption = useCallback(({ item }) => (_jsx(SelectOption, { label: item.label, value: item.value, disabled: item.disabled, leadingIcon: item.leadingIcon, trailingIcon: item.trailingIcon, testID: testID ? `${testID}-option-${item.label}` : undefined })), [testID]);
     const renderEmptyComponent = useCallback(() => (_jsx(BottomSheetView, { style: styles.emptyContainer, children: _jsx(DetailText, { children: emptyText }) })), [emptyText]);
-    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, style: ({ pressed }) => [
+    return (_jsxs(View, { ...rest, style: [styles.container, rest.style], children: [_jsx(FormField, { label: label, labelVariant: labelVariant, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatusFromContext, required: isRequired, disabled: isDisabled, readonly: isReadonly, invalidText: invalidText, validText: validText, children: _jsxs(Pressable, { onPress: openBottomSheet, disabled: isDisabled || isReadonly, testID: testID, style: ({ pressed }) => [
                         styles.selectContainer,
                         styles.pressedContainer(pressed || isOpen),
                     ], children: [!!LeadingIcon && (_jsx(View, { children: (() => {
                                 const IconAny = Icon;
                                 return _jsx(IconAny, { as: LeadingIcon, style: styles.icon });
-                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsxs(SelectContext.Provider, { value: {
+                            })() })), _jsx(View, { style: styles.optionContainer, children: _jsx(BodyText, { numberOfLines: 1, style: styles.placeholderText, children: selectedOption?.label || selectedLabel || placeholder }) }), _jsx(View, { children: _jsx(Icon, { as: ExpandSmallIcon, style: styles.icon }) })] }) }), _jsx(BottomSheetModal, { ref: bottomSheetModalRef, snapPoints: ['25%', '40%', '80%'], onChange: handleClose, enableDynamicSizing: false, ...bottomSheetProps, children: _jsx(SelectContext.Provider, { value: {
                         selectedValue: value,
                         onValueChange,
                         close: closeBottomSheet,
-                    }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search" }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) })] }));
+                    }, children: _jsxs(SafeAreaView, { edges: ['top'], style: { flex: 1 }, children: [menuHeading && (_jsx(View, { style: styles.headingContainer, children: _jsx(DetailText, { size: "lg", children: menuHeading }) })), searchable && (_jsx(View, { style: styles.searchContainer, children: _jsx(Input, { placeholder: searchPlaceholder, value: search, inBottomSheet: true, onChangeText: setSearch, type: "search", testID: testID ? `${testID}-search` : undefined }) })), children ? (_jsx(BottomSheetScrollView, { children: children })) : (_jsx(BottomSheetFlatList, { data: filteredOptions, keyExtractor: (option) => option.value, renderItem: renderSelectOption, ListEmptyComponent: renderEmptyComponent, ...listProps }))] }) }) })] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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

@@ -148,5 +148,9 @@ export interface SelectOptionProps {
      * Callback when this option is selected
      */
     onPress?: (value: string) => void;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
 }
 export default SelectProps;

package/build/components/Select/SelectOption.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionProps } from './Select.props';
 declare const SelectOption: {
-    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }: SelectOptionProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default SelectOption;

package/build/components/Select/SelectOption.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'react-native-unistyles';
 import { BodyText } from '../BodyText';
 import { Icon } from '../Icon';
 import { useSelectContext } from './Select.context';
-const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, }) => {
+const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: RightIcon, selected, disabled, onPress, testID, }) => {
     const { selectedValue, onValueChange, close } = useSelectContext();
     const isSelected = selected !== undefined ? selected : selectedValue === value;
     styles.useVariants({ disabled });
@@ -22,7 +22,7 @@ const SelectOption = ({ label, value, leadingIcon: LeftIcon, trailingIcon: Right
             close();
         }
     };
-    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
+    return (_jsxs(Pressable, { onPress: handlePress, disabled: disabled, testID: testID, style: ({ pressed }) => [styles.container, pressed && styles.pressed], children: [!!LeftIcon && (_jsx(View, { children: _jsx(Icon, { as: LeftIcon, style: styles.icon }) })), _jsx(View, { style: styles.labelContainer, children: _jsx(BodyText, { children: label }) }), isSelected && (_jsx(View, { children: _jsx(Icon, { as: TickSmallIcon, style: styles.icon }) })), !!RightIcon && !isSelected && (_jsx(View, { children: _jsx(Icon, { as: RightIcon, style: styles.icon }) }))] }));
 };
 const styles = StyleSheet.create(theme => ({
     container: {

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;