@cdx-ui/components 0.0.1-beta.184 → 0.0.1-beta.186

package/lib/typescript/components/TablePagination/TablePaginationContext.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from 'react';
+export interface TablePaginationContextValue {
+    page: number;
+    count: number;
+    disabled: boolean;
+    goToPage: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions: readonly (number | {
+        value: number;
+        label: string;
+    })[];
+    onPageSizeChange?: (pageSize: number) => void;
+}
+export declare function TablePaginationProvider({ value, children, }: {
+    value: TablePaginationContextValue;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTablePaginationContext(): TablePaginationContextValue | null;
+export declare function useRequiredTablePaginationContext(): TablePaginationContextValue;
+//# sourceMappingURL=TablePaginationContext.d.ts.map

package/lib/typescript/components/TablePagination/TablePaginationContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePaginationContext.d.ts","sourceRoot":"","sources":["../../../../src/components/TablePagination/TablePaginationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,SAAS,CAAC,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACxE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAID,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,2BAA2B,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAIA;AAED,wBAAgB,yBAAyB,IAAI,2BAA2B,GAAG,IAAI,CAE9E;AAED,wBAAgB,iCAAiC,IAAI,2BAA2B,CAM/E"}

package/lib/typescript/components/TablePagination/getTablePaginationItems.d.ts

@@ -0,0 +1,7 @@
+export type TablePaginationItemToken = number | 'ellipsis';
+/**
+ * Compact pager window: first, last, current ± siblings, with ellipses in the gaps.
+ * Matches the common MUI / HeroUI compact algorithm (`siblingCount` default 1).
+ */
+export declare function getTablePaginationItems(page: number, count: number, siblingCount?: number): TablePaginationItemToken[];
+//# sourceMappingURL=getTablePaginationItems.d.ts.map

package/lib/typescript/components/TablePagination/getTablePaginationItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTablePaginationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/TablePagination/getTablePaginationItems.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,UAAU,CAAC;AAS3D;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,YAAY,SAAI,GACf,wBAAwB,EAAE,CA4C5B"}

package/lib/typescript/components/TablePagination/index.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from 'react';
+import { View, type PressableProps, type ViewProps } from 'react-native';
+export { getTablePaginationItems } from './getTablePaginationItems';
+export type { TablePaginationItemToken } from './getTablePaginationItems';
+export type TablePaginationPageSizeOption = number | {
+    value: number;
+    label: string;
+};
+export interface TablePaginationProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+    /** 1-based current page. Controlled when set. */
+    page?: number;
+    defaultPage?: number;
+    /** Total page count. When set with no children, items are generated. */
+    count?: number;
+    onPageChange?: (page: number) => void;
+    siblingCount?: number;
+    pageSize?: number;
+    pageSizeOptions?: readonly TablePaginationPageSizeOption[];
+    onPageSizeChange?: (pageSize: number) => void;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+export interface TablePaginationItemProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+    page?: number;
+    current?: boolean;
+    disabled?: boolean;
+    onPress?: PressableProps['onPress'];
+}
+export interface TablePaginationControlProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+    disabled?: boolean;
+    onPress?: PressableProps['onPress'];
+}
+export interface TablePaginationEllipsisProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export interface TablePaginationStatusProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export interface TablePaginationPageSizeProps extends ViewProps {
+    asChild?: boolean;
+    className?: string;
+    children?: ReactNode;
+    'aria-label'?: string;
+}
+declare const TablePaginationRoot: import("react").ForwardRefExoticComponent<TablePaginationProps & import("react").RefAttributes<View>>;
+declare const TablePaginationItem: import("react").ForwardRefExoticComponent<TablePaginationItemProps & import("react").RefAttributes<View>>;
+declare const TablePaginationPrevious: import("react").ForwardRefExoticComponent<TablePaginationControlProps & import("react").RefAttributes<View>>;
+declare const TablePaginationNext: import("react").ForwardRefExoticComponent<TablePaginationControlProps & import("react").RefAttributes<View>>;
+declare const TablePaginationEllipsis: import("react").ForwardRefExoticComponent<TablePaginationEllipsisProps & import("react").RefAttributes<View>>;
+declare const TablePaginationStatus: import("react").ForwardRefExoticComponent<TablePaginationStatusProps & import("react").RefAttributes<View>>;
+declare const TablePaginationPageSize: import("react").ForwardRefExoticComponent<TablePaginationPageSizeProps & import("react").RefAttributes<View>>;
+type TablePaginationCompoundComponent = typeof TablePaginationRoot & {
+    Previous: typeof TablePaginationPrevious;
+    Next: typeof TablePaginationNext;
+    Item: typeof TablePaginationItem;
+    Ellipsis: typeof TablePaginationEllipsis;
+    Status: typeof TablePaginationStatus;
+    PageSize: typeof TablePaginationPageSize;
+};
+export declare const TablePagination: TablePaginationCompoundComponent;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/TablePagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/TablePagination/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/components/TablePagination/styles.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from '@cdx-ui/utils';
+export declare const tablePaginationRootVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tablePaginationItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tablePaginationEllipsisVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tablePaginationStatusVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const tablePaginationPageSizeVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type TablePaginationVariantProps = VariantProps<typeof tablePaginationRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/TablePagination/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/TablePagination/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvD,eAAO,MAAM,2BAA2B,oFAA+C,CAAC;AAExF,eAAO,MAAM,2BAA2B,oFAA0B,CAAC;AAEnE,eAAO,MAAM,+BAA+B,oFAE3C,CAAC;AAEF,eAAO,MAAM,6BAA6B,oFAAsD,CAAC;AAEjG,eAAO,MAAM,+BAA+B,oFAAuB,CAAC;AAEpE,MAAM,MAAM,2BAA2B,GAAG,YAAY,CAAC,OAAO,2BAA2B,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './Image';
 export * from './InsuranceDisclosure';
 export * from './Input';
 export * from './OtpInput';
+export * from './TablePagination';
 export * from './Link';
 export * from './ListItem';
 export * from './Accordion';
@@ -45,6 +46,7 @@ export * from './Slider';
 export * from './VirtualizedList';
 export * from './Switch';
 export * from './Tabs';
+export * from './Table';
 export * from './Textarea';
 export * from './Tile';
 export * from './Toast';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.184",
+  "version": "0.0.1-beta.186",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -81,10 +81,10 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.0.1-beta.184",
-    "@cdx-ui/primitives": "0.0.1-beta.184",
-    "@cdx-ui/utils": "0.0.1-beta.184",
-    "@cdx-ui/icons": "0.0.1-beta.184"
+    "@cdx-ui/formatters": "0.0.1-beta.186",
+    "@cdx-ui/utils": "0.0.1-beta.186",
+    "@cdx-ui/icons": "0.0.1-beta.186",
+    "@cdx-ui/primitives": "0.0.1-beta.186"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Chip/styles.ts

@@ -16,7 +16,7 @@ const chipInteractiveRoot = [
 ];
 
 export const chipRootVariants = cva(
-  ['flex-row items-center justify-center self-start overflow-hidden', ...chipInteractiveRoot],
+  ['flex-row items-center justify-center overflow-hidden web:inline-flex', ...chipInteractiveRoot],
   {
     variants: {
       variant: {

package/src/components/Table/index.tsx

@@ -0,0 +1,459 @@
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { ScrollView, Text, View, type LayoutChangeEvent } from 'react-native';
+import { Slot, dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  tableNativeCaptionVariants,
+  tableContainerVariants,
+  tableNativeCellVariants,
+  tableNativeCellTextVariants,
+  tableNativeFooterVariants,
+  tableNativeHeadVariants,
+  tableNativeHeadTextVariants,
+  tableNativeRootVariants,
+  tableNativeRowVariants,
+} from './styles';
+import type {
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+import {
+  ParentContext,
+  useTableStyleContext,
+  useTableVariantContext,
+} from './useTableStyleContext';
+
+export type {
+  TableAlignment,
+  TableCaptionProps,
+  TableCellProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSectionProps,
+} from './types';
+export type { TableVariantProps } from './styles';
+
+const NATIVE_COL_MIN_WIDTH = 96;
+
+interface TableLayoutValue {
+  tableWidth: number;
+  columnCount: number;
+  registerRowColumnCount: (rowId: string, count: number) => void;
+  unregisterRowColumnCount: (rowId: string) => void;
+  setViewportWidth: (width: number) => void;
+}
+
+const TableLayoutContext = createContext<TableLayoutValue>({
+  tableWidth: 0,
+  columnCount: 0,
+  registerRowColumnCount: () => {},
+  unregisterRowColumnCount: () => {},
+  setViewportWidth: () => {},
+});
+
+const useTableLayout = () => useContext(TableLayoutContext);
+
+const nativeColumnStyle = (span: number, tableWidth: number, columnCount: number) => {
+  if (tableWidth <= 0 || columnCount <= 0) {
+    return undefined;
+  }
+
+  return {
+    width: (span / columnCount) * tableWidth,
+    flexGrow: 0,
+    flexShrink: 0,
+  };
+};
+
+const isTableColumnChild = (child: ReactNode): child is ReactElement<{ colSpan?: number }> =>
+  isValidElement(child) &&
+  ['Table.Head', 'Table.Cell'].includes((child.type as { displayName?: string }).displayName ?? '');
+
+const countRowColumns = (children: ReactNode): number =>
+  Children.toArray(children).reduce<number>((total, child) => {
+    if (!isTableColumnChild(child)) {
+      return total;
+    }
+    const span = child.props.colSpan;
+    return total + (span && span > 1 ? span : 1);
+  }, 0);
+
+const columnSpan = (colSpan?: number) => (colSpan && colSpan > 1 ? colSpan : 1);
+
+const isCaptionChild = (child: ReactNode): child is ReactElement =>
+  isValidElement(child) && (child.type as { displayName?: string }).displayName === 'Table.Caption';
+
+const isTextChild = (child: ReactNode): child is string | number =>
+  typeof child === 'string' || typeof child === 'number';
+
+const renderNativeTableTextContent = (children: ReactNode, textClassName: string): ReactNode => {
+  if (isTextChild(children)) {
+    return (
+      <Text numberOfLines={1} ellipsizeMode="tail" className={textClassName}>
+        {children}
+      </Text>
+    );
+  }
+
+  const childList = Children.toArray(children);
+
+  if (childList.length === 0) {
+    return children;
+  }
+
+  if (childList.every(isTextChild)) {
+    return (
+      <Text numberOfLines={1} ellipsizeMode="tail" className={textClassName}>
+        {childList}
+      </Text>
+    );
+  }
+
+  if (!childList.some(isTextChild)) {
+    return children;
+  }
+
+  return Children.map(children, (child, index) => {
+    if (!isTextChild(child)) {
+      return child;
+    }
+
+    return (
+      <Text
+        key={`table-text-${index.toString()}`}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        className={textClassName}
+      >
+        {child}
+      </Text>
+    );
+  });
+};
+
+const TableRoot = forwardRef<View, TableProps>(
+  ({ asChild, className, containerStyle, children, style, fullBleed = false, ...props }, ref) => {
+    const ctx = useTableVariantContext(fullBleed);
+    const computedClassName = cn(tableContainerVariants(), className);
+    const [viewportWidth, setViewportWidth] = useState(0);
+    const [columnCount, setColumnCount] = useState(0);
+    const rowColumnCountsRef = useRef(new Map<string, number>());
+    const syncColumnCount = useCallback(() => {
+      let max = 0;
+      for (const count of rowColumnCountsRef.current.values()) {
+        if (count > max) {
+          max = count;
+        }
+      }
+      setColumnCount((prev) => (prev === max ? prev : max));
+    }, []);
+    const registerRowColumnCount = useCallback(
+      (rowId: string, count: number) => {
+        rowColumnCountsRef.current.set(rowId, count);
+        syncColumnCount();
+      },
+      [syncColumnCount],
+    );
+    const unregisterRowColumnCount = useCallback(
+      (rowId: string) => {
+        if (rowColumnCountsRef.current.delete(rowId)) {
+          syncColumnCount();
+        }
+      },
+      [syncColumnCount],
+    );
+    const tableWidth = Math.max(viewportWidth, columnCount * NATIVE_COL_MIN_WIDTH);
+    const layout = useMemo(
+      () => ({
+        tableWidth,
+        columnCount,
+        registerRowColumnCount,
+        unregisterRowColumnCount,
+        setViewportWidth,
+      }),
+      [tableWidth, columnCount, registerRowColumnCount, unregisterRowColumnCount],
+    );
+
+    const handleViewportLayout = (event: LayoutChangeEvent) => {
+      const nextWidth = event.nativeEvent.layout.width;
+      setViewportWidth((prev) => (prev === nextWidth ? prev : nextWidth));
+    };
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <ParentContext.Provider value={ctx}>
+          <TableLayoutContext.Provider value={layout}>
+            <Comp
+              ref={ref}
+              className={computedClassName}
+              style={style}
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+            >
+              {children}
+            </Comp>
+          </TableLayoutContext.Provider>
+        </ParentContext.Provider>
+      );
+    }
+
+    const childList = Children.toArray(children);
+    const captions = childList.filter(isCaptionChild);
+    const tableChildren = childList.filter((child) => !isCaptionChild(child));
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <TableLayoutContext.Provider value={layout}>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator
+            className={computedClassName}
+            style={[containerStyle, style]}
+            onLayout={handleViewportLayout}
+          >
+            <View
+              ref={ref}
+              className={tableNativeRootVariants()}
+              style={tableWidth > 0 ? { width: tableWidth } : undefined}
+              accessibilityRole="none"
+              {...props}
+              {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+            >
+              {tableChildren}
+              {captions}
+            </View>
+          </ScrollView>
+        </TableLayoutContext.Provider>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+TableRoot.displayName = 'Table';
+
+const TableCaption = forwardRef<Text, TableCaptionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeCaptionVariants(), className);
+    const Comp = asChild ? Slot : Text;
+    const { tableWidth } = useTableLayout();
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[tableWidth > 0 ? { width: tableWidth } : null, style]}
+        accessibilityRole="text"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-caption' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableCaption.displayName = 'Table.Caption';
+
+const TableHeader = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        accessibilityRole="header"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-header' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableHeader.displayName = 'Table.Header';
+
+const TableBody = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-body' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableBody.displayName = 'Table.Body';
+
+const TableFooter = forwardRef<View, TableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeFooterVariants(), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        accessibilityRole="summary"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-footer' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableFooter.displayName = 'Table.Footer';
+
+const TableRow = forwardRef<View, TableRowProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableNativeRowVariants(), className);
+    const Comp = asChild ? Slot : View;
+    const rowId = useId();
+    const { tableWidth, registerRowColumnCount, unregisterRowColumnCount } = useTableLayout();
+    const columnCount = countRowColumns(children);
+
+    useLayoutEffect(() => {
+      if (columnCount > 0) {
+        registerRowColumnCount(rowId, columnCount);
+      } else {
+        unregisterRowColumnCount(rowId);
+      }
+
+      return () => {
+        unregisterRowColumnCount(rowId);
+      };
+    }, [rowId, columnCount, registerRowColumnCount, unregisterRowColumnCount]);
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[tableWidth > 0 ? { width: tableWidth } : null, style]}
+        accessibilityRole="none"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-row' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TableRow.displayName = 'Table.Row';
+
+const TableHead = forwardRef<View, TableHeadProps>(
+  (
+    {
+      asChild,
+      align = 'start',
+      className,
+      children,
+      style,
+      colSpan,
+      rowSpan: _rowSpan,
+      scope: _scope,
+      ...props
+    },
+    ref,
+  ) => {
+    const { fullBleed } = useTableStyleContext();
+    const { tableWidth, columnCount } = useTableLayout();
+    const computedClassName = cn(tableNativeHeadVariants({ fullBleed, align }), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[nativeColumnStyle(columnSpan(colSpan), tableWidth, columnCount), style]}
+        accessibilityRole="header"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-head' }))}
+      >
+        {renderNativeTableTextContent(children, tableNativeHeadTextVariants({ align }))}
+      </Comp>
+    );
+  },
+);
+
+TableHead.displayName = 'Table.Head';
+
+const TableCell = forwardRef<View, TableCellProps>(
+  (
+    { asChild, align = 'start', className, children, style, colSpan, rowSpan: _rowSpan, ...props },
+    ref,
+  ) => {
+    const { fullBleed } = useTableStyleContext();
+    const { tableWidth, columnCount } = useTableLayout();
+    const computedClassName = cn(tableNativeCellVariants({ fullBleed, align }), className);
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={[nativeColumnStyle(columnSpan(colSpan), tableWidth, columnCount), style]}
+        accessibilityRole="text"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'table-cell' }))}
+      >
+        {renderNativeTableTextContent(children, tableNativeCellTextVariants({ align }))}
+      </Comp>
+    );
+  },
+);
+
+TableCell.displayName = 'Table.Cell';
+
+type TableCompoundComponent = typeof TableRoot & {
+  Caption: typeof TableCaption;
+  Header: typeof TableHeader;
+  Body: typeof TableBody;
+  Footer: typeof TableFooter;
+  Row: typeof TableRow;
+  Head: typeof TableHead;
+  Cell: typeof TableCell;
+};
+
+export const Table = Object.assign(TableRoot, {
+  Caption: TableCaption,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+}) as TableCompoundComponent;