@multiplatform.one/table-primitives 6.0.4 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/table-primitives",
-  "version": "6.0.4",
+  "version": "6.3.0",
   "description": "Semantic Table primitives and cell context (no forms or data-table)",
   "keywords": [
     "multiplatform",
@@ -12,34 +12,37 @@
   "author": "BitSpur <support@risserlabs.com> (https://risserlabs.com)",
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/bitspur/multiplatform.one/multiplatform.one.git"
+    "url": "git+https://gitlab.com/bitspur/frappe/multiplatform.one.git",
+    "directory": "public/table-primitives"
   },
   "source": "src/index.tsx",
   "files": [
     "dist",
     "src",
-    "types"
+    "types",
+    "!types/.tsbuildinfo"
   ],
   "sideEffects": false,
   "main": "src/index.tsx",
   "module": "src/index.tsx",
-  "types": "src/index.tsx",
+  "types": "types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "source": "./src/index.tsx",
       "react-native": {
+        "types": "./types/index.d.ts",
         "import": "./dist/esm/index.native.js",
         "require": "./dist/cjs/index.native.js"
       },
-      "types": "./src/index.tsx",
+      "types": "./types/index.d.ts",
       "import": "./dist/esm/index.mjs",
       "require": "./dist/cjs/index.cjs",
       "default": "./dist/cjs/index.cjs"
     },
     "./tableCellContext": {
       "source": "./src/tableCellContext.ts",
-      "types": "./src/tableCellContext.ts",
+      "types": "./types/tableCellContext.d.ts",
       "import": "./src/tableCellContext.ts",
       "require": "./src/tableCellContext.ts",
       "default": "./src/tableCellContext.ts"
@@ -50,7 +53,7 @@
   },
   "dependencies": {
     "tamagui": "2.0.0-rc.41",
-    "@multiplatform.one/theme": "6.0.4"
+    "@multiplatform.one/theme": "6.3.0"
   },
   "devDependencies": {
     "@tamagui/build": "2.0.0-rc.41",
@@ -62,8 +65,8 @@
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "vitest": "^4.1.5",
-    "@multiplatform.one/config": "6.0.4",
-    "@multiplatform.one/test-utils": "6.0.4"
+    "@multiplatform.one/test-utils": "6.3.0",
+    "@multiplatform.one/config": "6.3.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -71,7 +74,7 @@
   },
   "module:jsx": "dist/jsx",
   "scripts": {
-    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json",
+    "build": "rm -rf dist types 2>/dev/null && tamagui-build --ts-project ./tsconfig.build.json --exclude '\\.spec\\.|\\.test\\.|\\.stories\\.'",
     "test": "vitest run --coverage --coverage.provider=v8 --coverage.reporter=text --coverage.reporter=lcov --coverage.reporter=html",
     "typecheck": "tsc --noEmit"
   }

package/src/index.tsx

@@ -5,10 +5,20 @@
  * Consumed by @multiplatform.one/table, @multiplatform.one/forms, etc.
  */
 
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { hairline, useResolvedKnobs } from "@multiplatform.one/theme";
 import { TableCellContext } from "./tableCellContext";
-import type { SizeTokens } from "tamagui";
-import { Theme, ThemeableStack, createStyledContext, styled, withStaticProperties } from "tamagui";
+import { Children, Fragment, isValidElement } from "react";
+import type { FontSizeTokens, SizeTokens } from "tamagui";
+import {
+  SizableText,
+  Theme,
+  ThemeableStack,
+  createStyledContext,
+  isWeb,
+  styled,
+  useMedia,
+  withStaticProperties,
+} from "tamagui";
 
 export { TableCellContext, useIsInTableCell, useTableCellContext } from "./tableCellContext";
 export type { TableCellContextValue } from "./tableCellContext";
@@ -39,13 +49,28 @@ const TableContext = createStyledContext<{
   alignHeaderCells: { x: "start", y: "center" },
   alignCells: { x: "start", y: "center" },
   borderColor: "$color6",
-  displayMode: "table",
+  // CSS table display values ("table-row", "table-cell", …) are no-ops in
+  // React Native — cells stack vertically and bare Tables are unreadable.
+  // Native defaults to the flex composition; web keeps semantic table layout.
+  displayMode: isWeb ? "table" : "flex",
 });
 
+/**
+ * Element rendering: tamagui 2.0.0-rc derives the DOM element from the
+ * `render` prop (`tag:` passes through as a plain attribute), so every
+ * primitive sets `render:` to emit real `<table>/<thead>/<tbody>/<tfoot>/
+ * <tr>/<th>/<td>/<caption>` elements on web. On native `render` is inert
+ * (skipProps) and the components stay RN Views in the flex displayMode.
+ *
+ * Explicit ARIA roles stay on every element: consumers restyle these
+ * elements (`displayMode="flex"`, sticky cells), and browsers drop the
+ * implicit table roles when a table element's display is overridden.
+ */
+
 /** Table Components */
 const Row = styled(ThemeableStack, {
   name: "TableRow",
-  ...({ tag: "tr" } as { tag: string }),
+  ...({ render: "tr" } as { render?: string }),
   role: "row",
   context: TableContext,
   display: "table-row" as any,
@@ -69,16 +94,23 @@ const Row = styled(ThemeableStack, {
 
 const Cell = styled(ThemeableStack, {
   name: "TableCell",
-  ...({ tag: "td" } as { tag: string }),
+  ...({ render: "td" } as { render?: string }),
+  role: "cell",
   context: TableContext,
   display: "table-cell" as any,
   // verticalAlign goes via inline style; Tamagui forwards it to the DOM as a JSX
   // prop otherwise, which React rejects ("React does not recognize verticalAlign").
   style: { verticalAlign: "middle" },
+  // LC-44 ROW-LINE: cells are ROW-flex so each axis does what it says —
+  // justifyContent is horizontal (start by default; align-by-type overrides
+  // land here) and alignItems is vertical (center). The previous column
+  // direction put alignItems:center on the HORIZONTAL axis, centering every
+  // cell's text and making variable-width columns ragged (A16-02).
+  flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-start",
   paddingHorizontal: "$2",
-  paddingVertical: "$1",
+  paddingVertical: "$3",
   overflow: "hidden",
   variants: {
     displayMode: {
@@ -106,6 +138,8 @@ const Cell = styled(ThemeableStack, {
         };
       },
     },
+    // Row-flex axis map (LC-44): y → alignItems (vertical), x →
+    // justifyContent (horizontal).
     alignCells: (val: AlignCells) => {
       return {
         alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
@@ -122,20 +156,30 @@ const Cell = styled(ThemeableStack, {
 
 const HeaderCell = styled(ThemeableStack, {
   name: "TableHeaderCell",
-  ...({ tag: "th", scope: "col" } as { tag: string; scope: string }),
+  ...({ render: "th", scope: "col" } as { render?: string; scope: string }),
+  role: "columnheader",
   context: TableContext,
   display: "table-cell" as any,
   // verticalAlign goes via inline style; see TableCell above for context.
-  style: { verticalAlign: "middle" },
+  // fontWeight/textAlign neutralize the UA styles a real <th> brings
+  // (bold + centered) so header content keeps its pre-migration look;
+  // logical `start` stays RTL-correct.
+  style: { verticalAlign: "middle", fontWeight: "normal", textAlign: "start" },
+  // LC-44 ROW-LINE: row-flex like TableCell — header labels start-align on
+  // the same column line as body cell text.
+  flexDirection: "row",
   alignItems: "center",
   justifyContent: "flex-start",
   paddingHorizontal: "$2",
-  paddingVertical: "$1",
-  backgroundColor: "$color3",
+  paddingVertical: "$3",
+  backgroundColor: "$color2",
 
   variants: {
     displayMode: {
-      table: { display: "table-cell" as any, style: { verticalAlign: "middle" } },
+      table: {
+        display: "table-cell" as any,
+        style: { verticalAlign: "middle", fontWeight: "normal", textAlign: "start" },
+      },
       flex: { display: "flex" as any },
     },
     cellWidth: {
@@ -152,6 +196,8 @@ const HeaderCell = styled(ThemeableStack, {
         minWidth: tokens.size[name],
       }),
     },
+    // Row-flex axis map (LC-44): y → alignItems (vertical), x →
+    // justifyContent (horizontal).
     alignHeaderCells: (val: AlignHeaderCells) => {
       return {
         alignItems: val.y === "center" ? "center" : `flex-${val.y}`,
@@ -173,7 +219,8 @@ const HeaderCell = styled(ThemeableStack, {
 
 const TableBody = styled(ThemeableStack, {
   name: "TableBody",
-  ...({ tag: "tbody" } as { tag: string }),
+  ...({ render: "tbody" } as { render?: string }),
+  role: "rowgroup",
   context: TableContext,
   display: "table-row-group" as any,
   variants: {
@@ -184,7 +231,13 @@ const TableBody = styled(ThemeableStack, {
         flexDirection: "column" as any,
         width: "100%",
         overflowY: "auto" as any,
-        flex: 1,
+        // basis auto (not flex:1 basis-0): in auto-height parents a basis-0
+        // chain resolves to 0 and the body collapses to a scrollbar sliver;
+        // basis auto sizes to rows there while still filling sized parents
+        // (grow) and scrolling (shrink + minHeight 0).
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto" as any,
         minHeight: 0,
       },
     },
@@ -193,7 +246,8 @@ const TableBody = styled(ThemeableStack, {
 
 const TableHead = styled(ThemeableStack, {
   name: "TableHead",
-  ...({ tag: "thead" } as { tag: string }),
+  ...({ render: "thead" } as { render?: string }),
+  role: "rowgroup",
   context: TableContext,
   display: "table-header-group" as any,
   borderBottomWidth: 1,
@@ -213,7 +267,8 @@ const TableHead = styled(ThemeableStack, {
 
 const TableFoot = styled(ThemeableStack, {
   name: "TableFoot",
-  ...({ tag: "tfoot" } as { tag: string }),
+  ...({ render: "tfoot" } as { render?: string }),
+  role: "rowgroup",
   context: TableContext,
   display: "table-footer-group" as any,
   variants: {
@@ -231,16 +286,20 @@ const TableFoot = styled(ThemeableStack, {
 
 const TableCaption = styled(ThemeableStack, {
   name: "TableCaption",
-  ...({ tag: "caption" } as { tag: string }),
+  ...({ render: "caption" } as { render?: string }),
   context: TableContext,
   display: "table-caption" as any,
+  // Real <caption> centers its text by UA default — keep the primitive's
+  // pre-migration start alignment (logical, RTL-correct).
+  style: { textAlign: "start" },
   paddingVertical: "$2",
   paddingHorizontal: "$2",
 });
 
 const TableComp = styled(ThemeableStack, {
   name: "Table",
-  ...({ tag: "table" } as { tag: string }),
+  ...({ render: "table" } as { render?: string }),
+  role: "table",
   context: TableContext,
   display: "table" as any,
   borderWidth: 1,
@@ -254,7 +313,10 @@ const TableComp = styled(ThemeableStack, {
       flex: {
         display: "flex" as any,
         flexDirection: "column" as any,
-        flex: 1,
+        // See Body: basis auto so auto-height parents get content height.
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto" as any,
         minHeight: 0,
       },
     },
@@ -292,59 +354,336 @@ function resolveIntent(props: ThemedRowProps): IntentName | undefined {
   return undefined;
 }
 
+/**
+ * SP-EDGE row density: the `space` knob scales cell padding (row density)
+ * without adding an outer row inset (LC-18 / theme-propagation-spec SP-EDGE).
+ * `medium` matches the pre-knob defaults so default rendering is unchanged.
+ */
+export function getTableCellPadding(space: string): {
+  paddingHorizontal: string;
+  paddingVertical: string;
+} {
+  const map: Record<string, { paddingHorizontal: string; paddingVertical: string }> = {
+    small: { paddingHorizontal: "$1.5", paddingVertical: "$2" },
+    medium: { paddingHorizontal: "$2", paddingVertical: "$3" },
+    large: { paddingHorizontal: "$3", paddingVertical: "$4" },
+  };
+  return map[space] ?? map.medium;
+}
+
+/**
+ * Responsive layout mode for the Table primitive.
+ * - `table`: always render the semantic table (default — Layer-1 consumers
+ *   like markdown tables and DataTable's grid own their responsive handling)
+ * - `cards`: render each body row as a stacked card of label/value pairs
+ * - `auto`: table on `$sm` and up, cards below (W11 compact class)
+ */
+export type TableLayout = "table" | "cards" | "auto";
+
+interface CardRowModel {
+  key: string;
+  intent?: IntentName;
+  cells: Array<{ key: string; content: React.ReactNode }>;
+}
+
+/** Flatten fragments/arrays into a single element list. */
+function flattenChildren(children: React.ReactNode): React.ReactNode[] {
+  return Children.toArray(children).flatMap((child) => {
+    if (isValidElement(child) && child.type === Fragment) {
+      return flattenChildren((child.props as { children?: React.ReactNode }).children);
+    }
+    return [child];
+  });
+}
+
+/**
+ * Statically extract header labels, body rows, and the caption from the
+ * canonical `Table > Head/Body/Caption > Row > Cell` composition. Rows or
+ * cells wrapped in custom components are not discovered — those cards render
+ * value-only rows (documented limitation of the card layout).
+ */
+function extractCardModel(children: React.ReactNode): {
+  headerLabels: React.ReactNode[];
+  rows: CardRowModel[];
+  caption: React.ReactNode;
+} {
+  const headerLabels: React.ReactNode[] = [];
+  const rows: CardRowModel[] = [];
+  let caption: React.ReactNode = null;
+
+  for (const section of flattenChildren(children)) {
+    if (!isValidElement(section)) continue;
+    const sectionProps = section.props as { children?: React.ReactNode };
+    if (section.type === ThemedTableHead) {
+      for (const rowEl of flattenChildren(sectionProps.children)) {
+        if (!isValidElement(rowEl) || rowEl.type !== ThemedRow) continue;
+        flattenChildren((rowEl.props as { children?: React.ReactNode }).children).forEach(
+          (cellEl, index) => {
+            if (!isValidElement(cellEl) || cellEl.type !== ThemedHeaderCell) return;
+            if (headerLabels[index] === undefined) {
+              headerLabels[index] = (cellEl.props as { children?: React.ReactNode }).children;
+            }
+          },
+        );
+      }
+    } else if (section.type === TableBody) {
+      for (const rowEl of flattenChildren(sectionProps.children)) {
+        if (!isValidElement(rowEl) || rowEl.type !== ThemedRow) continue;
+        const rowProps = rowEl.props as ThemedRowProps;
+        const cells = flattenChildren(rowProps.children)
+          .filter(
+            (cellEl): cellEl is React.ReactElement =>
+              isValidElement(cellEl) && cellEl.type === ThemedCell,
+          )
+          .map((cellEl, index) => ({
+            key: cellEl.key ?? String(index),
+            content: (cellEl.props as { children?: React.ReactNode }).children,
+          }));
+        rows.push({
+          key: rowEl.key ?? String(rows.length),
+          intent: resolveIntent(rowProps),
+          cells,
+        });
+      }
+    } else if (section.type === TableCaption) {
+      caption = sectionProps.children;
+    }
+    // Foot content has no card slot — it is omitted in the card layout.
+  }
+
+  return { headerLabels, rows, caption };
+}
+
+/** Card list rendering for the Table primitive (layout="cards" / narrow auto). */
+function TableCardsList({
+  children,
+  ...props
+}: {
+  children?: React.ReactNode;
+  [key: string]: any;
+}) {
+  const { knobProps } = useResolvedKnobs();
+  const { headerLabels, rows, caption } = extractCardModel(children);
+  // Table-context props have no meaning on the card list — drop them.
+  const {
+    cellWidth: _cellWidth,
+    cellHeight: _cellHeight,
+    alignCells: _alignCells,
+    alignHeaderCells: _alignHeaderCells,
+    displayMode: _displayMode,
+    style: _style,
+    ...viewProps
+  } = props;
+
+  return (
+    <ThemeableStack flexDirection="column" {...knobProps.gap} testID="table-cards" {...viewProps}>
+      {caption != null &&
+        (typeof caption === "string" || typeof caption === "number" ? (
+          <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} color="$color10">
+            {caption}
+          </SizableText>
+        ) : (
+          caption
+        ))}
+      {rows.map((row) => {
+        const card = (
+          <ThemeableStack
+            key={row.key}
+            testID="table-card"
+            {...knobProps.surface}
+            {...knobProps.cardSurface}
+            elevation={knobProps.elevation}
+            borderColor="$color6"
+            {...(row.intent ? { backgroundColor: "$color3" as const } : {})}
+          >
+            {row.cells.map((cell, index) => {
+              const label = headerLabels[index];
+              const value =
+                typeof cell.content === "string" || typeof cell.content === "number" ? (
+                  <SizableText fontSize={knobProps.sizeToken as FontSizeTokens}>
+                    {cell.content}
+                  </SizableText>
+                ) : (
+                  cell.content
+                );
+              return (
+                <ThemeableStack
+                  key={cell.key}
+                  flexDirection="row"
+                  alignItems="center"
+                  gap="$2"
+                  paddingVertical="$1.5"
+                >
+                  {label != null && (
+                    <SizableText
+                      fontSize={knobProps.sizeToken as FontSizeTokens}
+                      fontWeight="500"
+                      color="$color10"
+                      width="40%"
+                      flexShrink={0}
+                    >
+                      {label}
+                    </SizableText>
+                  )}
+                  <ThemeableStack flex={1} minWidth={0}>
+                    <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
+                      {value}
+                    </TableCellContext.Provider>
+                  </ThemeableStack>
+                </ThemeableStack>
+              );
+            })}
+          </ThemeableStack>
+        );
+        return row.intent ? (
+          <Theme key={row.key} name={row.intent}>
+            {card}
+          </Theme>
+        ) : (
+          card
+        );
+      })}
+    </ThemeableStack>
+  );
+}
+
+export interface ThemedTableProps extends React.ComponentProps<typeof TableComp> {
+  /** Responsive layout — see {@link TableLayout}. Default `table`. */
+  layout?: TableLayout;
+}
+
 // Themed wrappers that inject resolved knob recipes
-function ThemedTableComp(props: React.ComponentProps<typeof TableComp>) {
+function ThemedTableComp({ layout = "table", ...props }: ThemedTableProps) {
   const { knobProps } = useResolvedKnobs();
-  const baseBorderWidth = knobProps.borderRadius.borderWidth;
+  const { sm } = useMedia();
+  const baseBorderWidth = knobProps.surface.borderWidth;
   // When outlined, ensure at least 1px border. When filled, use base or 0.
   const resolvedBorderWidth = knobProps.outlined ? Math.max(baseBorderWidth, 1) : baseBorderWidth;
 
+  const showCards = layout === "cards" || (layout === "auto" && sm === false);
+  if (showCards) {
+    return <TableCardsList {...props} />;
+  }
+
   return (
     <TableComp
-      {...knobProps.borderRadius}
+      // Table frames are R-OUTER + SF-CARD-tier surface (theme-propagation-spec
+      // `@multiplatform.one/table`): outer corners follow the capped outer
+      // radius map; fill flips the frame between the surface bg and transparent.
+      {...knobProps.surface}
+      {...knobProps.borderRadiusOuter}
+      {...(knobProps.outlined ? { backgroundColor: "transparent" as const } : null)}
       borderWidth={resolvedBorderWidth}
-      borderColor="$color6"
-      backgroundColor="$background"
       elevation={knobProps.elevation}
+      // Size knob sets default row height through the table context; consumer
+      // cellHeight (table- or cell-level) still overrides via {...props}.
+      cellHeight={knobProps.sizeToken as SizeTokens}
       {...props}
-      style={[{ tableLayout: "fixed" as const }, props.style]}
+      // borderSpacing 0 neutralizes the real <table> UA default (2px gaps
+      // between cells) so the migrated element keeps the div-table look.
+      style={[{ tableLayout: "fixed" as const, borderSpacing: 0 }, props.style]}
     />
   );
 }
 
+function ThemedTableHead(props: React.ComponentProps<typeof TableHead>) {
+  // Head/body rule is a divider, not a control border — hairline on
+  // high-DPI (Axiom 15). Explicit consumer props still override.
+  return <TableHead {...hairline.bottom} {...props} />;
+}
+
 function ThemedRow({ accent, error, warning, success, ...props }: ThemedRowProps) {
   const intent = resolveIntent({ accent, error, warning, success } as ThemedRowProps);
 
-  const row = <Row {...(intent ? { backgroundColor: "$color3" } : {})} {...props} />;
+  // Intent rows must not use the plain <Theme> wrapper: on web it renders a
+  // display:contents <span> between <tbody> and <tr>, which is invalid HTML
+  // once the primitives emit real table elements (SSR parsers foster-parent
+  // the span out of the table and hydration breaks). Instead the theme's
+  // CSS class goes on the <tr> itself (scoping the theme CSS variables for
+  // the row and its cells) while <Theme forceClassName={false}> still
+  // provides the theme context for JS-resolved values and native styling
+  // without emitting any wrapper element.
+  const row = (
+    <Row
+      {...(intent
+        ? {
+            backgroundColor: "$color3" as const,
+            // `color: $color` mirrors the inline color the Theme span used
+            // to set, so unstyled text in cells inherits the intent color.
+            color: "$color" as const,
+            ...(isWeb ? { className: `t_${intent}` } : {}),
+          }
+        : {})}
+      {...props}
+    />
+  );
 
   if (intent) {
-    return <Theme name={intent}>{row}</Theme>;
+    return (
+      <Theme name={intent} forceClassName={false}>
+        {row}
+      </Theme>
+    );
   }
   return row;
 }
 
-function ThemedCell({ children, ...props }: React.ComponentProps<typeof Cell>) {
+function ThemedCell({ children, style, ...props }: React.ComponentProps<typeof Cell>) {
+  const { knobProps } = useResolvedKnobs();
+  // Bare string/number children would render unstyled (and crash on native,
+  // where text must live inside a Text component) — wrap them so the size
+  // knob reaches cell text (T-VALUE); element children own their text styling.
+  const content =
+    typeof children === "string" || typeof children === "number" ? (
+      <SizableText fontSize={knobProps.sizeToken as FontSizeTokens}>{children}</SizableText>
+    ) : (
+      children
+    );
   return (
-    <Cell {...props}>
+    <Cell
+      {...getTableCellPadding(knobProps.space)}
+      {...props}
+      // Compose (not replace) the inline style so a consumer style (e.g.
+      // sticky pinned cells) keeps the verticalAlign baseline.
+      style={[{ verticalAlign: "middle" }, style as any]}
+    >
       <TableCellContext.Provider value={{ inTableCell: true, isHeader: false }}>
-        {children}
+        {content}
       </TableCellContext.Provider>
     </Cell>
   );
 }
 
-function ThemedHeaderCell({ children, ...props }: React.ComponentProps<typeof HeaderCell>) {
+function ThemedHeaderCell({ children, style, ...props }: React.ComponentProps<typeof HeaderCell>) {
+  const { knobProps } = useResolvedKnobs();
+  // Bare string/number children would render unstyled (and crash on native,
+  // where text must live inside a Text component) — wrap them; element
+  // children own their text styling.
+  const content =
+    typeof children === "string" || typeof children === "number" ? (
+      <SizableText fontSize={knobProps.sizeToken as FontSizeTokens} fontWeight="600">
+        {children}
+      </SizableText>
+    ) : (
+      children
+    );
   return (
-    <HeaderCell {...props}>
+    <HeaderCell
+      {...getTableCellPadding(knobProps.space)}
+      {...props}
+      // Compose (not replace) the inline style so consumer styles (sticky
+      // pinned headers) keep the real-<th> UA neutralizers (bold/centered).
+      style={[{ verticalAlign: "middle", fontWeight: "normal", textAlign: "start" }, style as any]}
+    >
       <TableCellContext.Provider value={{ inTableCell: true, isHeader: true }}>
-        {children}
+        {content}
       </TableCellContext.Provider>
     </HeaderCell>
   );
 }
 
 export const Table = withStaticProperties(ThemedTableComp, {
-  Head: TableHead,
+  Head: ThemedTableHead,
   Body: TableBody,
   Row: ThemedRow,
   Cell: ThemedCell,
@@ -354,7 +693,7 @@ export const Table = withStaticProperties(ThemedTableComp, {
 });
 
 // Export prop types for all styled components
-export type TableProps = React.ComponentProps<typeof TableComp>;
+export type TableProps = ThemedTableProps;
 export type TableRowProps = ThemedRowProps;
 export type TableCellProps = React.ComponentProps<typeof Cell>;
 export type TableHeaderCellProps = React.ComponentProps<typeof HeaderCell>;