@cdx-ui/components 0.0.1-beta.99 → 0.1.1

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

@@ -0,0 +1,395 @@
+import { forwardRef, type ComponentPropsWithoutRef, type CSSProperties } from 'react';
+import {
+  Slot,
+  dataAttributes,
+  mapViewPropsToDom,
+  mergeDataAttributes,
+  mergeDomDataAttributes,
+  domDataAttributes,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  tableBodyVariants,
+  tableCaptionVariants,
+  tableCellVariants,
+  tableContainerVariants,
+  tableFooterVariants,
+  tableHeadVariants,
+  tableHeaderVariants,
+  tableRootVariants,
+  tableRowVariants,
+} from './styles';
+import type {
+  TableAlignment,
+  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';
+
+type WebTableProps = TableProps & ComponentPropsWithoutRef<'table'>;
+type WebTableCaptionProps = TableCaptionProps & ComponentPropsWithoutRef<'caption'>;
+type WebTableSectionProps = TableSectionProps &
+  ComponentPropsWithoutRef<'thead' | 'tbody' | 'tfoot'>;
+type WebTableRowProps = TableRowProps & ComponentPropsWithoutRef<'tr'>;
+type WebTableHeadProps = TableHeadProps & Omit<ComponentPropsWithoutRef<'th'>, 'align'>;
+type WebTableCellProps = TableCellProps & Omit<ComponentPropsWithoutRef<'td'>, 'align'>;
+
+const tableHostProps = (props: object, slot: string) => {
+  const mapped = mapViewPropsToDom(props);
+  return {
+    ...mapped,
+    ...mergeDomDataAttributes(
+      props as Record<string, unknown>,
+      mapped,
+      domDataAttributes({ slot }),
+    ),
+  };
+};
+
+const TableRoot = forwardRef<HTMLTableElement, WebTableProps>(
+  ({ asChild, className, containerStyle, children, style, fullBleed = false, ...props }, ref) => {
+    const ctx = useTableVariantContext(fullBleed);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <ParentContext.Provider value={ctx}>
+          <Comp
+            ref={ref}
+            className={cn(tableContainerVariants(), tableRootVariants(), className)}
+            style={style}
+            {...props}
+            {...mergeDataAttributes(props, dataAttributes({ slot: 'table' }))}
+          >
+            {children}
+          </Comp>
+        </ParentContext.Provider>
+      );
+    }
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <div
+          className={tableContainerVariants()}
+          style={containerStyle as CSSProperties | undefined}
+        >
+          <table
+            ref={ref}
+            className={cn(tableRootVariants(), className)}
+            style={style as CSSProperties | undefined}
+            {...tableHostProps(props, 'table')}
+          >
+            {children}
+          </table>
+        </div>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+TableRoot.displayName = 'Table';
+
+const TableCaption = forwardRef<HTMLTableCaptionElement, WebTableCaptionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableCaptionVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-caption' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <caption
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-caption')}
+      >
+        {children}
+      </caption>
+    );
+  },
+);
+
+TableCaption.displayName = 'Table.Caption';
+
+const TableHeader = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableHeaderVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-header' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <thead
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-header')}
+      >
+        {children}
+      </thead>
+    );
+  },
+);
+
+TableHeader.displayName = 'Table.Header';
+
+const TableBody = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableBodyVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-body' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tbody
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-body')}
+      >
+        {children}
+      </tbody>
+    );
+  },
+);
+
+TableBody.displayName = 'Table.Body';
+
+const TableFooter = forwardRef<HTMLTableSectionElement, WebTableSectionProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableFooterVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-footer' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tfoot
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-footer')}
+      >
+        {children}
+      </tfoot>
+    );
+  },
+);
+
+TableFooter.displayName = 'Table.Footer';
+
+const TableRow = forwardRef<HTMLTableRowElement, WebTableRowProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(tableRowVariants(), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-row' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <tr
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-row')}
+      >
+        {children}
+      </tr>
+    );
+  },
+);
+
+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, align = 'start', className, children, style, scope = 'col', ...props }, ref) => {
+    const { fullBleed } = useTableStyleContext();
+    const computedClassName = cn(tableHeadVariants({ fullBleed, align }), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          scope={scope}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-head' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <th
+        ref={ref}
+        className={computedClassName}
+        scope={scope}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-head')}
+      >
+        {align === 'start' ? children : <div style={tableWebContentStyles[align]}>{children}</div>}
+      </th>
+    );
+  },
+);
+
+TableHead.displayName = 'Table.Head';
+
+const TableCell = forwardRef<HTMLTableCellElement, WebTableCellProps>(
+  ({ asChild, align = 'start', className, children, style, ...props }, ref) => {
+    const { fullBleed } = useTableStyleContext();
+    const computedClassName = cn(tableCellVariants({ fullBleed, align }), className);
+
+    if (asChild) {
+      const Comp = Slot;
+      return (
+        <Comp
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'table-cell' }))}
+        >
+          {children}
+        </Comp>
+      );
+    }
+
+    return (
+      <td
+        ref={ref}
+        className={computedClassName}
+        style={style as CSSProperties | undefined}
+        {...tableHostProps(props, 'table-cell')}
+      >
+        {align === 'start' ? children : <div style={tableWebContentStyles[align]}>{children}</div>}
+      </td>
+    );
+  },
+);
+
+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;

package/src/components/Table/styles.ts

@@ -0,0 +1,143 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+
+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');
+
+export const tableNativeRootVariants = cva(
+  'min-w-full flex-col caption-bottom body-md text-content-primary',
+);
+
+export const tableCaptionVariants = cva('mt-4 body-sm text-content-secondary');
+
+export const tableNativeCaptionVariants = cva('mt-4 body-sm text-content-secondary');
+
+export const tableHeaderVariants = cva('border-stroke-secondary [&_tr]:border-b');
+
+export const tableBodyVariants = cva('[&_tr:last-child]:border-0');
+
+export const tableFooterVariants = cva(
+  'border-t border-stroke-secondary bg-surface-secondary body-md font-medium [&>tr]:last:border-b-0',
+);
+
+export const tableRowVariants = cva(
+  'border-b border-stroke-secondary web:transition-colors web:hover:bg-surface-secondary/50',
+);
+
+export const tableHeadVariants = cva(
+  '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',
+    },
+  },
+);
+
+export const tableCellVariants = cva('p-2 align-middle body-md text-content-primary', {
+  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',
+  },
+});
+
+export const tableNativeRowVariants = cva(
+  'min-w-full flex-row flex-nowrap border-b border-stroke-secondary',
+);
+
+export const tableNativeHeadVariants = cva(
+  'min-h-11 overflow-hidden px-2 items-start justify-center font-medium text-content-secondary body-md',
+  {
+    variants: {
+      fullBleed: {
+        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 tableNativeCellVariants = cva(
+  'overflow-hidden p-2 items-start justify-center body-md text-content-primary',
+  {
+    variants: {
+      fullBleed: {
+        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 = Pick<VariantProps<typeof tableHeadVariants>, 'fullBleed'>;

package/src/components/Table/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+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;
+}
+
+export interface TableCaptionProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableSectionProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface TableRowProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+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';
+}
+
+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/Table/useTableStyleContext.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import { ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import type { TableVariantProps } from './styles';
+
+export const TABLE_SCOPE = 'TABLE';
+
+export const useTableStyleContext = () => useStyleContext(TABLE_SCOPE) as TableVariantProps;
+
+export const useTableVariantContext = (fullBleed: TableVariantProps['fullBleed'] = false) => {
+  const parent = useParentContext();
+  return useMemo(() => ({ ...parent, [TABLE_SCOPE]: { fullBleed } }), [parent, fullBleed]);
+};
+
+export { ParentContext };

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;
+}

package/src/components/TablePagination/getTablePaginationItems.ts

@@ -0,0 +1,62 @@
+export type TablePaginationItemToken = number | 'ellipsis';
+
+function range(start: number, end: number): number[] {
+  if (end < start) {
+    return [];
+  }
+  return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+
+/**
+ * Compact pager window: first, last, current ± siblings, with ellipses in the gaps.
+ * Matches the common MUI / HeroUI compact algorithm (`siblingCount` default 1).
+ */
+export function getTablePaginationItems(
+  page: number,
+  count: number,
+  siblingCount = 1,
+): TablePaginationItemToken[] {
+  if (count <= 0) {
+    return [];
+  }
+
+  const current = Math.min(Math.max(page, 1), count);
+  const siblings = Math.max(siblingCount, 0);
+  const boundaryCount = 1;
+  const totalNumbers = siblings * 2 + 5;
+
+  if (count <= totalNumbers) {
+    return range(1, count);
+  }
+
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+
+  const siblingsStart = Math.max(
+    Math.min(current - siblings, count - boundaryCount - siblings * 2 - 1),
+    boundaryCount + 2,
+  );
+  const siblingsEnd = Math.min(
+    Math.max(current + siblings, boundaryCount + siblings * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1,
+  );
+
+  const items: TablePaginationItemToken[] = [...startPages];
+
+  if (siblingsStart > boundaryCount + 2) {
+    items.push('ellipsis');
+  } else if (boundaryCount + 1 < count - boundaryCount) {
+    items.push(boundaryCount + 1);
+  }
+
+  items.push(...range(siblingsStart, siblingsEnd));
+
+  if (siblingsEnd < count - boundaryCount - 1) {
+    items.push('ellipsis');
+  } else if (count - boundaryCount > boundaryCount) {
+    items.push(count - boundaryCount);
+  }
+
+  items.push(...endPages);
+  return items;
+}