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

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';

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,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"}
+{"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.185",
+  "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.185",
-    "@cdx-ui/primitives": "0.0.1-beta.185",
-    "@cdx-ui/utils": "0.0.1-beta.185",
-    "@cdx-ui/icons": "0.0.1-beta.185"
+    "@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

@@ -20,8 +20,10 @@ import {
   tableNativeCaptionVariants,
   tableContainerVariants,
   tableNativeCellVariants,
+  tableNativeCellTextVariants,
   tableNativeFooterVariants,
   tableNativeHeadVariants,
+  tableNativeHeadTextVariants,
   tableNativeRootVariants,
   tableNativeRowVariants,
 } from './styles';
@@ -40,6 +42,7 @@ import {
 } from './useTableStyleContext';
 
 export type {
+  TableAlignment,
   TableCaptionProps,
   TableCellProps,
   TableHeadProps,
@@ -96,45 +99,9 @@ const countRowColumns = (children: ReactNode): number =>
 
 const columnSpan = (colSpan?: number) => (colSpan && colSpan > 1 ? colSpan : 1);
 
-const nativeCrossAxisAlign = (className?: string) => {
-  if (!className) {
-    return undefined;
-  }
-
-  if (/\btext-right\b/.test(className)) {
-    return 'items-end';
-  }
-
-  if (/\btext-center\b/.test(className)) {
-    return 'items-center';
-  }
-
-  return undefined;
-};
-
 const isCaptionChild = (child: ReactNode): child is ReactElement =>
   isValidElement(child) && (child.type as { displayName?: string }).displayName === 'Table.Caption';
 
-const nativeTextAlign = (className?: string) => {
-  if (!className) {
-    return undefined;
-  }
-
-  if (/\btext-right\b/.test(className)) {
-    return 'text-right';
-  }
-
-  if (/\btext-center\b/.test(className)) {
-    return 'text-center';
-  }
-
-  if (/\btext-left\b/.test(className)) {
-    return 'text-left';
-  }
-
-  return undefined;
-};
-
 const isTextChild = (child: ReactNode): child is string | number =>
   typeof child === 'string' || typeof child === 'number';
 
@@ -161,6 +128,10 @@ const renderNativeTableTextContent = (children: ReactNode, textClassName: string
     );
   }
 
+  if (!childList.some(isTextChild)) {
+    return children;
+  }
+
   return Children.map(children, (child, index) => {
     if (!isTextChild(child)) {
       return child;
@@ -180,7 +151,7 @@ const renderNativeTableTextContent = (children: ReactNode, textClassName: string
 };
 
 const TableRoot = forwardRef<View, TableProps>(
-  ({ asChild, className, children, style, fullBleed = false, ...props }, ref) => {
+  ({ asChild, className, containerStyle, children, style, fullBleed = false, ...props }, ref) => {
     const ctx = useTableVariantContext(fullBleed);
     const computedClassName = cn(tableContainerVariants(), className);
     const [viewportWidth, setViewportWidth] = useState(0);
@@ -257,7 +228,7 @@ const TableRoot = forwardRef<View, TableProps>(
             horizontal
             showsHorizontalScrollIndicator
             className={computedClassName}
-            style={style}
+            style={[containerStyle, style]}
             onLayout={handleViewportLayout}
           >
             <View
@@ -405,16 +376,22 @@ TableRow.displayName = 'Table.Row';
 
 const TableHead = forwardRef<View, TableHeadProps>(
   (
-    { asChild, className, children, style, colSpan, rowSpan: _rowSpan, scope: _scope, ...props },
+    {
+      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 }),
-      nativeCrossAxisAlign(className),
-      className,
-    );
+    const computedClassName = cn(tableNativeHeadVariants({ fullBleed, align }), className);
     const Comp = asChild ? Slot : View;
 
     return (
@@ -426,10 +403,7 @@ const TableHead = forwardRef<View, TableHeadProps>(
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'table-head' }))}
       >
-        {renderNativeTableTextContent(
-          children,
-          cn('w-full font-medium text-content-secondary body-md', nativeTextAlign(className)),
-        )}
+        {renderNativeTableTextContent(children, tableNativeHeadTextVariants({ align }))}
       </Comp>
     );
   },
@@ -438,14 +412,13 @@ const TableHead = forwardRef<View, TableHeadProps>(
 TableHead.displayName = 'Table.Head';
 
 const TableCell = forwardRef<View, TableCellProps>(
-  ({ asChild, className, children, style, colSpan, rowSpan: _rowSpan, ...props }, ref) => {
+  (
+    { asChild, align = 'start', className, children, style, colSpan, rowSpan: _rowSpan, ...props },
+    ref,
+  ) => {
     const { fullBleed } = useTableStyleContext();
     const { tableWidth, columnCount } = useTableLayout();
-    const computedClassName = cn(
-      tableNativeCellVariants({ fullBleed }),
-      nativeCrossAxisAlign(className),
-      className,
-    );
+    const computedClassName = cn(tableNativeCellVariants({ fullBleed, align }), className);
     const Comp = asChild ? Slot : View;
 
     return (
@@ -457,10 +430,7 @@ const TableCell = forwardRef<View, TableCellProps>(
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'table-cell' }))}
       >
-        {renderNativeTableTextContent(
-          children,
-          cn('w-full body-md text-content-primary', nativeTextAlign(className)),
-        )}
+        {renderNativeTableTextContent(children, tableNativeCellTextVariants({ align }))}
       </Comp>
     );
   },

package/src/components/Table/index.web.tsx

@@ -1,5 +1,4 @@
 import { forwardRef, type ComponentPropsWithoutRef, type CSSProperties } from 'react';
-import { View } from 'react-native';
 import {
   Slot,
   dataAttributes,
@@ -21,6 +20,7 @@ import {
   tableRowVariants,
 } from './styles';
 import type {
+  TableAlignment,
   TableCaptionProps,
   TableCellProps,
   TableHeadProps,
@@ -35,6 +35,7 @@ import {
 } from './useTableStyleContext';
 
 export type {
+  TableAlignment,
   TableCaptionProps,
   TableCellProps,
   TableHeadProps,
@@ -49,8 +50,8 @@ type WebTableCaptionProps = TableCaptionProps & ComponentPropsWithoutRef<'captio
 type WebTableSectionProps = TableSectionProps &
   ComponentPropsWithoutRef<'thead' | 'tbody' | 'tfoot'>;
 type WebTableRowProps = TableRowProps & ComponentPropsWithoutRef<'tr'>;
-type WebTableHeadProps = TableHeadProps & ComponentPropsWithoutRef<'th'>;
-type WebTableCellProps = TableCellProps & ComponentPropsWithoutRef<'td'>;
+type WebTableHeadProps = TableHeadProps & Omit<ComponentPropsWithoutRef<'th'>, 'align'>;
+type WebTableCellProps = TableCellProps & Omit<ComponentPropsWithoutRef<'td'>, 'align'>;
 
 const tableHostProps = (props: object, slot: string) => {
   const mapped = mapViewPropsToDom(props);
@@ -65,7 +66,7 @@ const tableHostProps = (props: object, slot: string) => {
 };
 
 const TableRoot = forwardRef<HTMLTableElement, WebTableProps>(
-  ({ asChild, className, children, style, fullBleed = false, ...props }, ref) => {
+  ({ asChild, className, containerStyle, children, style, fullBleed = false, ...props }, ref) => {
     const ctx = useTableVariantContext(fullBleed);
 
     if (asChild) {
@@ -87,7 +88,10 @@ const TableRoot = forwardRef<HTMLTableElement, WebTableProps>(
 
     return (
       <ParentContext.Provider value={ctx}>
-        <View className={tableContainerVariants()}>
+        <div
+          className={tableContainerVariants()}
+          style={containerStyle as CSSProperties | undefined}
+        >
           <table
             ref={ref}
             className={cn(tableRootVariants(), className)}
@@ -96,7 +100,7 @@ const TableRoot = forwardRef<HTMLTableElement, WebTableProps>(
           >
             {children}
           </table>
-        </View>
+        </div>
       </ParentContext.Provider>
     );
   },
@@ -274,10 +278,34 @@ const TableRow = forwardRef<HTMLTableRowElement, WebTableRowProps>(
 
 TableRow.displayName = 'Table.Row';
 
+const tableWebContentStyles: Record<TableAlignment, CSSProperties> = {
+  start: {
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  center: {
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  end: {
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+};
+
 const TableHead = forwardRef<HTMLTableCellElement, WebTableHeadProps>(
-  ({ asChild, className, children, style, scope = 'col', ...props }, ref) => {
+  ({ asChild, align = 'start', className, children, style, scope = 'col', ...props }, ref) => {
     const { fullBleed } = useTableStyleContext();
-    const computedClassName = cn(tableHeadVariants({ fullBleed }), className);
+    const computedClassName = cn(tableHeadVariants({ fullBleed, align }), className);
 
     if (asChild) {
       const Comp = Slot;
@@ -303,7 +331,7 @@ const TableHead = forwardRef<HTMLTableCellElement, WebTableHeadProps>(
         style={style as CSSProperties | undefined}
         {...tableHostProps(props, 'table-head')}
       >
-        {children}
+        {align === 'start' ? children : <div style={tableWebContentStyles[align]}>{children}</div>}
       </th>
     );
   },
@@ -312,9 +340,9 @@ const TableHead = forwardRef<HTMLTableCellElement, WebTableHeadProps>(
 TableHead.displayName = 'Table.Head';
 
 const TableCell = forwardRef<HTMLTableCellElement, WebTableCellProps>(
-  ({ asChild, className, children, style, ...props }, ref) => {
+  ({ asChild, align = 'start', className, children, style, ...props }, ref) => {
     const { fullBleed } = useTableStyleContext();
-    const computedClassName = cn(tableCellVariants({ fullBleed }), className);
+    const computedClassName = cn(tableCellVariants({ fullBleed, align }), className);
 
     if (asChild) {
       const Comp = Slot;
@@ -338,7 +366,7 @@ const TableCell = forwardRef<HTMLTableCellElement, WebTableCellProps>(
         style={style as CSSProperties | undefined}
         {...tableHostProps(props, 'table-cell')}
       >
-        {children}
+        {align === 'start' ? children : <div style={tableWebContentStyles[align]}>{children}</div>}
       </td>
     );
   },

package/src/components/Table/styles.ts

@@ -1,6 +1,6 @@
 import { cva, type VariantProps } from '@cdx-ui/utils';
 
-export const tableContainerVariants = cva('relative w-full overflow-auto');
+export const tableContainerVariants = cva('relative w-full min-w-0 max-w-full overflow-auto');
 
 export const tableRootVariants = cva('w-full caption-bottom body-md text-content-primary');
 
@@ -25,16 +25,22 @@ export const tableRowVariants = cva(
 );
 
 export const tableHeadVariants = cva(
-  'h-11 px-2 text-left align-middle font-medium text-content-secondary body-md',
+  'h-11 bg-surface-primary px-2 align-middle font-medium text-content-secondary body-md',
   {
     variants: {
       fullBleed: {
         true: 'first:pl-0 last:pr-0',
         false: '',
       },
+      align: {
+        start: 'text-start',
+        center: 'text-center',
+        end: 'text-end',
+      },
     },
     defaultVariants: {
       fullBleed: false,
+      align: 'start',
     },
   },
 );
@@ -45,9 +51,15 @@ export const tableCellVariants = cva('p-2 align-middle body-md text-content-prim
       true: 'first:pl-0 last:pr-0',
       false: '',
     },
+    align: {
+      start: 'text-start',
+      center: 'text-center',
+      end: 'text-end',
+    },
   },
   defaultVariants: {
     fullBleed: false,
+    align: 'start',
   },
 });
 
@@ -63,9 +75,15 @@ export const tableNativeHeadVariants = cva(
         true: 'first:pl-0 last:pr-0',
         false: '',
       },
+      align: {
+        start: 'items-start',
+        center: 'items-center',
+        end: 'items-end',
+      },
     },
     defaultVariants: {
       fullBleed: false,
+      align: 'start',
     },
   },
 );
@@ -78,13 +96,48 @@ export const tableNativeCellVariants = cva(
         true: 'first:pl-0 last:pr-0',
         false: '',
       },
+      align: {
+        start: 'items-start',
+        center: 'items-center',
+        end: 'items-end',
+      },
     },
     defaultVariants: {
       fullBleed: false,
+      align: 'start',
+    },
+  },
+);
+
+export const tableNativeHeadTextVariants = cva(
+  'w-full font-medium text-content-secondary body-md',
+  {
+    variants: {
+      align: {
+        start: 'ltr:text-left rtl:text-right',
+        center: 'text-center',
+        end: 'ltr:text-right rtl:text-left',
+      },
+    },
+    defaultVariants: {
+      align: 'start',
     },
   },
 );
 
+export const tableNativeCellTextVariants = cva('w-full body-md text-content-primary', {
+  variants: {
+    align: {
+      start: 'ltr:text-left rtl:text-right',
+      center: 'text-center',
+      end: 'ltr:text-right rtl:text-left',
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+  },
+});
+
 export const tableNativeFooterVariants = cva('bg-surface-secondary');
 
-export type TableVariantProps = VariantProps<typeof tableHeadVariants>;
+export type TableVariantProps = Pick<VariantProps<typeof tableHeadVariants>, 'fullBleed'>;

package/src/components/Table/types.ts

@@ -1,10 +1,13 @@
 import type { ReactNode } from 'react';
-import type { TextProps, ViewProps } from 'react-native';
+import type { TextProps, ViewProps, ViewStyle } from 'react-native';
 import type { TableVariantProps } from './styles';
 
+export type TableAlignment = 'start' | 'center' | 'end';
+
 export interface TableProps extends ViewProps, TableVariantProps {
   asChild?: boolean;
   className?: string;
+  containerStyle?: ViewStyle;
   children?: ReactNode;
 }
 
@@ -30,6 +33,11 @@ export interface TableHeadProps extends ViewProps {
   asChild?: boolean;
   className?: string;
   children?: ReactNode;
+  /**
+   * Logical horizontal alignment for text and composed content.
+   * @default 'start'
+   */
+  align?: TableAlignment;
   colSpan?: number;
   rowSpan?: number;
   scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
@@ -39,6 +47,11 @@ export interface TableCellProps extends ViewProps {
   asChild?: boolean;
   className?: string;
   children?: ReactNode;
+  /**
+   * Logical horizontal alignment for text and composed content.
+   * @default 'start'
+   */
+  align?: TableAlignment;
   colSpan?: number;
   rowSpan?: number;
 }

package/src/components/TablePagination/TablePaginationContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useContext, 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;
+}
+
+const TablePaginationContext = createContext<TablePaginationContextValue | null>(null);
+
+export function TablePaginationProvider({
+  value,
+  children,
+}: {
+  value: TablePaginationContextValue;
+  children: ReactNode;
+}) {
+  return (
+    <TablePaginationContext.Provider value={value}>{children}</TablePaginationContext.Provider>
+  );
+}
+
+export function useTablePaginationContext(): TablePaginationContextValue | null {
+  return useContext(TablePaginationContext);
+}
+
+export function useRequiredTablePaginationContext(): TablePaginationContextValue {
+  const context = useTablePaginationContext();
+  if (!context) {
+    throw new Error('TablePagination compound slots must be rendered inside <TablePagination>.');
+  }
+  return context;
+}