@sproutsocial/seeds-react-table 1.0.50 → 1.0.51

package/.turbo/turbo-build.log

@@ -1,6 +1,6 @@
 yarn run v1.22.22
-$ tsup --dts
-CLI Building entry: src/index.ts, src/v1/index.ts, src/v2/index.ts, src/v1/TableHeaderCell/index.ts, src/v1/TableCell/index.ts, src/v1/TableRowAccordion/index.ts
+$ tsup --dts && cp src/table-v2.css dist/table-v2.css
+CLI Building entry: src/index.ts, src/v1/index.ts, src/v2/index.ts, src/v1/TableCell/index.ts, src/v1/TableHeaderCell/index.ts, src/v1/TableRowAccordion/index.ts
 CLI Using tsconfig: tsconfig.json
 CLI tsup v8.5.0
 CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-table/tsup.config.ts
@@ -8,62 +8,62 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-ESM dist/esm/chunk-F73BV5I2.js                 2.82 KB
+CJS dist/index.js                          10.39 KB
+CJS dist/v1/TableCell/index.js             3.12 KB
+CJS dist/v1/index.js                       10.32 KB
+CJS dist/v2/index.js                       14.12 KB
+CJS dist/v1/TableHeaderCell/index.js       5.97 KB
+CJS dist/v1/TableRowAccordion/index.js     6.38 KB
+CJS dist/index.js.map                      19.00 KB
+CJS dist/v1/TableCell/index.js.map         3.92 KB
+CJS dist/v2/index.js.map                   21.74 KB
+CJS dist/v1/TableHeaderCell/index.js.map   8.15 KB
+CJS dist/v1/index.js.map                   17.51 KB
+CJS dist/v1/TableRowAccordion/index.js.map 9.33 KB
+CJS ⚡️ Build success in 35ms
 ESM dist/esm/index.js                          306.00 B
+ESM dist/esm/v2/index.js                       10.11 KB
+ESM dist/esm/chunk-F73BV5I2.js                 2.82 KB
+ESM dist/esm/chunk-T7WTUUPA.js                 3.91 KB
 ESM dist/esm/chunk-WGM7UCXV.js                 1.36 KB
 ESM dist/esm/v1/TableHeaderCell/index.js       264.00 B
-ESM dist/esm/chunk-T7WTUUPA.js                 3.91 KB
-ESM dist/esm/v2/index.js                       4.17 KB
-ESM dist/esm/v1/TableRowAccordion/index.js     2.94 KB
 ESM dist/esm/v1/index.js                       265.00 B
+ESM dist/esm/v1/TableRowAccordion/index.js     2.94 KB
 ESM dist/esm/v1/TableCell/index.js             196.00 B
-ESM dist/esm/chunk-F73BV5I2.js.map             4.98 KB
 ESM dist/esm/index.js.map                      1.91 KB
-ESM dist/esm/v1/TableHeaderCell/index.js.map   71.00 B
+ESM dist/esm/v2/index.js.map                   21.15 KB
+ESM dist/esm/chunk-F73BV5I2.js.map             4.98 KB
 ESM dist/esm/chunk-WGM7UCXV.js.map             3.80 KB
 ESM dist/esm/chunk-T7WTUUPA.js.map             8.01 KB
-ESM dist/esm/v2/index.js.map                   7.28 KB
+ESM dist/esm/v1/TableHeaderCell/index.js.map   71.00 B
 ESM dist/esm/v1/index.js.map                   406.00 B
-ESM dist/esm/v1/TableRowAccordion/index.js.map 5.28 KB
 ESM dist/esm/v1/TableCell/index.js.map         71.00 B
-ESM ⚡️ Build success in 99ms
-CJS dist/v1/index.js                       10.32 KB
-CJS dist/v1/TableHeaderCell/index.js       5.97 KB
-CJS dist/v2/index.js                       7.09 KB
-CJS dist/v1/TableCell/index.js             3.12 KB
-CJS dist/index.js                          10.39 KB
-CJS dist/v1/TableRowAccordion/index.js     6.38 KB
-CJS dist/v2/index.js.map                   7.88 KB
-CJS dist/v1/index.js.map                   17.51 KB
-CJS dist/v1/TableHeaderCell/index.js.map   8.15 KB
-CJS dist/index.js.map                      19.00 KB
-CJS dist/v1/TableRowAccordion/index.js.map 9.33 KB
-CJS dist/v1/TableCell/index.js.map         3.92 KB
-CJS ⚡️ Build success in 100ms
+ESM dist/esm/v1/TableRowAccordion/index.js.map 5.28 KB
+ESM ⚡️ Build success in 36ms
 DTS Build start
-DTS ⚡️ Build success in 20757ms
+DTS ⚡️ Build success in 14786ms
 DTS dist/index.d.ts                          474.00 B
 DTS dist/v1/index.d.ts                       480.00 B
-DTS dist/v2/index.d.ts                       2.49 KB
-DTS dist/v1/TableHeaderCell/index.d.ts       408.00 B
+DTS dist/v2/index.d.ts                       3.09 KB
 DTS dist/v1/TableCell/index.d.ts             278.00 B
+DTS dist/v1/TableHeaderCell/index.d.ts       408.00 B
 DTS dist/v1/TableRowAccordion/index.d.ts     1.28 KB
 DTS dist/Table-Dl102bgy.d.ts                 1015.00 B
-DTS dist/TableHeaderCell-DnwlruQg.d.ts       588.00 B
 DTS dist/TableCell-CN71R1B5.d.ts             453.00 B
+DTS dist/TableHeaderCell-DnwlruQg.d.ts       588.00 B
 DTS dist/TableTypes-DlNqrZVT.d.ts            1.55 KB
 DTS dist/TableHeaderCellTypes-CH_zzW6X.d.ts  1.06 KB
 DTS dist/TableCellTypes-Cp-8r7l1.d.ts        1013.00 B
 DTS dist/index.d.mts                         480.00 B
 DTS dist/v1/index.d.mts                      486.00 B
-DTS dist/v2/index.d.mts                      2.49 KB
-DTS dist/v1/TableHeaderCell/index.d.mts      411.00 B
+DTS dist/v2/index.d.mts                      3.09 KB
 DTS dist/v1/TableCell/index.d.mts            280.00 B
+DTS dist/v1/TableHeaderCell/index.d.mts      411.00 B
 DTS dist/v1/TableRowAccordion/index.d.mts    1.28 KB
 DTS dist/Table-CX-3nEyi.d.mts                1018.00 B
-DTS dist/TableHeaderCell-DsJpGb2j.d.mts      589.00 B
 DTS dist/TableCell-B8GMRlv7.d.mts            454.00 B
+DTS dist/TableHeaderCell-DsJpGb2j.d.mts      589.00 B
 DTS dist/TableTypes--W7X6tmk.d.mts           1.55 KB
 DTS dist/TableHeaderCellTypes-CsJQBwu2.d.mts 1.06 KB
 DTS dist/TableCellTypes-Cp-8r7l1.d.mts       1013.00 B
-Done in 23.07s.
+Done in 16.23s.

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sproutsocial/seeds-react-table
 
+## 1.0.51
+
+### Patch Changes
+
+- 50982e3: Honor the polymorphic `as` prop in every v2 Table Tailwind leaf. `TableWrapper`, `TableRoot`, `TableCaption`, `TableHeader`, `TableBody`, `TableRow`, `TableHeaderCell`, and `TableCell` now render a dynamic element from `as` (defaulting to `<div>` / `<table>` / `<caption>` / `<thead>` / `<tbody>` / `<tr>` / `<th>` / `<td>`) instead of a hard-coded tag. A string `as` renders the requested element with the Tailwind class intact, and a component-valued `as` (e.g. the documented `tableRowProps={{ as: styled(TableRow) }}` / `tableBodyProps={{ as: styled(TableBody) }}` DataTable pattern) re-enters the hybrid and falls back to the styled-components path. Because `as` is destructured out, it no longer leaks onto the DOM as an invalid attribute. This restores the polymorphic behavior the styled-components path provided and fixes the downstream `@sproutsocial/seeds-react-data-table` row-header and row/body customization rendering.
+
+  The v2 Table hybrid now routes on the documented `needsStyledComponents` single gate, so genuine `styled()` extensions (detected via an injected `theme` prop or `sc-XXXX` className) fall back to the styled-components path instead of leaking `theme` onto the DOM.
+
 ## 1.0.50
 
 ### Patch Changes

package/dist/esm/v2/index.js

@@ -1,9 +1,12 @@
-// src/v2/TableV2.tsx
-import React2, { useId } from "react";
+// src/v2/TableV2Hybrid.tsx
+import React3, { useId } from "react";
 
 // src/v2/TableV2Types.ts
 import "react";
 
+// src/v2/TableV2Hybrid.tsx
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
+
 // src/v2/styles.ts
 import styled, { css } from "styled-components";
 import {
@@ -72,27 +75,218 @@ var StyledTableCell = styled.td`
 `;
 StyledTableCell.displayName = "TableV2.TableCell";
 
-// src/v2/TableV2.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var TableContainerContext = React2.createContext(null);
-var useTableContainerId = () => React2.useContext(TableContainerContext);
-var TableWrapper = ({
-  children,
-  ...rest
-}) => {
+// src/v2/TableV2Tailwind.tsx
+import React2 from "react";
+import { jsx } from "react/jsx-runtime";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var TableV2ContainerTailwind = React2.forwardRef(({ className, children, as: Component = "div", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-container", className),
+    ...rest,
+    children
+  }
+));
+TableV2ContainerTailwind.displayName = "TableV2.ContainerTailwind";
+var TableRootTailwind = React2.forwardRef(({ className, children, as: Component = "table", ...rest }, ref) => /* @__PURE__ */ jsx(Component, { ref, className: cn("seeds-table-v2", className), ...rest, children }));
+TableRootTailwind.displayName = "TableV2.TableTailwind";
+var CaptionTailwind = React2.forwardRef(
+  ({
+    className,
+    children,
+    isVisible = true,
+    as: Component = "caption",
+    ...rest
+  }, ref) => /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        "seeds-table-v2-caption",
+        { "seeds-table-v2-caption-hidden": !isVisible },
+        className
+      ),
+      ...rest,
+      children
+    }
+  )
+);
+CaptionTailwind.displayName = "TableV2.CaptionTailwind";
+var TableHeaderTailwind = React2.forwardRef(({ className, children, as: Component = "thead", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-header", className),
+    ...rest,
+    children
+  }
+));
+TableHeaderTailwind.displayName = "TableV2.TableHeaderTailwind";
+var TableBodyTailwind = React2.forwardRef(({ className, children, as: Component = "tbody", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-body", className),
+    ...rest,
+    children
+  }
+));
+TableBodyTailwind.displayName = "TableV2.TableBodyTailwind";
+var TableRowTailwind = React2.forwardRef(({ className, children, as: Component = "tr", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-row", className),
+    ...rest,
+    children
+  }
+));
+TableRowTailwind.displayName = "TableV2.TableRowTailwind";
+var TableHeaderCellTailwind = React2.forwardRef(({ className, children, as: Component = "th", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-header-cell", className),
+    ...rest,
+    children
+  }
+));
+TableHeaderCellTailwind.displayName = "TableV2.TableHeaderCellTailwind";
+var TableCellTailwind = React2.forwardRef(({ className, children, as: Component = "td", ...rest }, ref) => /* @__PURE__ */ jsx(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-cell", className),
+    ...rest,
+    children
+  }
+));
+TableCellTailwind.displayName = "TableV2.TableCellTailwind";
+
+// src/v2/TableV2Hybrid.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var TableContainerContext = React3.createContext(null);
+var useTableContainerId = () => React3.useContext(TableContainerContext);
+var TableWrapper = React3.forwardRef(({ children, className, ...rest }, ref) => {
   const containerId = useId();
-  return /* @__PURE__ */ jsx(TableContainerContext.Provider, { value: containerId, children: /* @__PURE__ */ jsx(
+  const containerProps = {
+    role: "region",
+    tabIndex: 0,
+    id: containerId,
+    "aria-labelledby": containerId
+  };
+  return /* @__PURE__ */ jsx2(TableContainerContext.Provider, { value: containerId, children: needsStyledComponents({ ...rest, className }) ? /* @__PURE__ */ jsx2(
     StyledTableV2Container,
     {
-      role: "region",
-      tabIndex: 0,
-      id: containerId,
-      "aria-labelledby": containerId,
+      className,
+      ref,
+      ...containerProps,
+      ...rest,
+      children
+    }
+  ) : /* @__PURE__ */ jsx2(
+    TableV2ContainerTailwind,
+    {
+      className,
+      ref,
+      ...containerProps,
       ...rest,
       children
     }
   ) });
-};
+});
+TableWrapper.displayName = "TableV2.TableWrapper";
+var TableRoot = React3.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return /* @__PURE__ */ jsx2(StyledTableV2, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx2(TableRootTailwind, { className, ref, ...rest, children });
+  }
+);
+TableRoot.displayName = "TableV2.Table";
+var TableCaption = React3.forwardRef(({ className, children, isVisible = true, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return /* @__PURE__ */ jsx2(
+      StyledCaption,
+      {
+        className,
+        isVisible,
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    CaptionTailwind,
+    {
+      className,
+      isVisible,
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+TableCaption.displayName = "TableV2.Caption";
+var TableHeader = React3.forwardRef(({ className, children, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return /* @__PURE__ */ jsx2(StyledTableHeader, { className, ref, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx2(TableHeaderTailwind, { className, ref, ...rest, children });
+});
+TableHeader.displayName = "TableV2.TableHeader";
+var TableBody = React3.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return /* @__PURE__ */ jsx2(StyledTableBody, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx2(TableBodyTailwind, { className, ref, ...rest, children });
+  }
+);
+TableBody.displayName = "TableV2.TableBody";
+var TableRow = React3.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return /* @__PURE__ */ jsx2(StyledTableRow, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx2(TableRowTailwind, { className, ref, ...rest, children });
+  }
+);
+TableRow.displayName = "TableV2.TableRow";
+var TableHeaderCell = React3.forwardRef(({ className, children, ...rest }, ref) => {
+  if (needsStyledComponents({ ...rest, className })) {
+    return /* @__PURE__ */ jsx2(StyledTableHeaderCell, { className, ref, ...rest, children });
+  }
+  return /* @__PURE__ */ jsx2(TableHeaderCellTailwind, { className, ref, ...rest, children });
+});
+TableHeaderCell.displayName = "TableV2.TableHeaderCell";
+var TableCell = React3.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if (needsStyledComponents({ ...rest, className })) {
+      return /* @__PURE__ */ jsx2(StyledTableCell, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ jsx2(TableCellTailwind, { className, ref, ...rest, children });
+  }
+);
+TableCell.displayName = "TableV2.TableCell";
 var TableV2 = ({
   caption,
   displayCaption = true,
@@ -100,21 +294,14 @@ var TableV2 = ({
   data
 }) => {
   const containerId = useTableContainerId();
-  return /* @__PURE__ */ jsx(TableWrapper, { children: /* @__PURE__ */ jsxs(StyledTableV2, { children: [
-    /* @__PURE__ */ jsx(StyledCaption, { id: containerId ?? void 0, isVisible: displayCaption, children: caption }),
-    /* @__PURE__ */ jsx(StyledTableHeader, { children: /* @__PURE__ */ jsx(StyledTableRow, { children: columns.map((column, index) => /* @__PURE__ */ jsx(StyledTableHeaderCell, { scope: "col", children: column }, index)) }) }),
-    /* @__PURE__ */ jsx(StyledTableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(StyledTableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(StyledTableCell, { children: cell }, cellIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ jsx2(TableWrapper, { children: /* @__PURE__ */ jsxs(TableRoot, { children: [
+    /* @__PURE__ */ jsx2(TableCaption, { id: containerId ?? void 0, isVisible: displayCaption, children: caption }),
+    /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { children: columns.map((column, index) => /* @__PURE__ */ jsx2(TableHeaderCell, { scope: "col", children: column }, index)) }) }),
+    /* @__PURE__ */ jsx2(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx2(TableCell, { children: cell }, cellIndex)) }, rowIndex)) })
   ] }) });
 };
 var Table = TableV2;
-var TableRoot = StyledTableV2;
-var TableCaption = StyledCaption;
-var TableHeader = StyledTableHeader;
-var TableBody = StyledTableBody;
-var TableRow = StyledTableRow;
-var TableHeaderCell = StyledTableHeaderCell;
-var TableCell = StyledTableCell;
-var TableV2_default = TableV2;
+var TableV2Hybrid_default = TableV2;
 export {
   StyledCaption,
   StyledTableBody,
@@ -132,7 +319,7 @@ export {
   TableHeaderCell,
   TableRoot,
   TableRow,
-  TableV2_default as TableV2,
+  TableV2Hybrid_default as TableV2,
   TableWrapper,
   useTableContainerId
 };

package/dist/esm/v2/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/v2/TableV2.tsx","../../../src/v2/TableV2Types.ts","../../../src/v2/styles.ts"],"sourcesContent":["import React, { useId } from \"react\";\nimport { type TableV2Props } from \"./TableV2Types\";\nimport {\n  StyledTableV2Container,\n  StyledTableV2,\n  StyledCaption,\n  StyledTableHeader,\n  StyledTableBody,\n  StyledTableRow,\n  StyledTableHeaderCell,\n  StyledTableCell,\n} from \"./styles\";\n\nconst TableContainerContext = React.createContext<string | null>(null);\n\nexport const useTableContainerId = () =>\n  React.useContext(TableContainerContext);\n\nexport const TableWrapper = ({\n  children,\n  ...rest\n}: {\n  children: React.ReactElement;\n}) => {\n  const containerId = useId();\n  return (\n    <TableContainerContext.Provider value={containerId}>\n      <StyledTableV2Container\n        role=\"region\"\n        tabIndex={0}\n        id={containerId}\n        aria-labelledby={containerId}\n        {...rest}\n      >\n        {children}\n      </StyledTableV2Container>\n    </TableContainerContext.Provider>\n  );\n};\n\nconst TableV2 = ({\n  caption,\n  displayCaption = true,\n  columns,\n  data,\n}: TableV2Props) => {\n  const containerId = useTableContainerId();\n\n  return (\n    <TableWrapper>\n      <StyledTableV2>\n        <StyledCaption id={containerId ?? undefined} isVisible={displayCaption}>\n          {caption}\n        </StyledCaption>\n        <StyledTableHeader>\n          <StyledTableRow>\n            {columns.map((column, index) => (\n              <StyledTableHeaderCell key={index} scope=\"col\">\n                {column}\n              </StyledTableHeaderCell>\n            ))}\n          </StyledTableRow>\n        </StyledTableHeader>\n        <StyledTableBody>\n          {data.map((row, rowIndex) => (\n            <StyledTableRow key={rowIndex}>\n              {row.map((cell, cellIndex) => (\n                <StyledTableCell key={cellIndex}>{cell}</StyledTableCell>\n              ))}\n            </StyledTableRow>\n          ))}\n        </StyledTableBody>\n      </StyledTableV2>\n    </TableWrapper>\n  );\n};\n\n// Export the full Table component as Table (main export)\nexport const Table = TableV2;\n\n// Export styled components for compound component usage\nexport const TableRoot = StyledTableV2;\nexport const TableCaption = StyledCaption;\nexport const TableHeader = StyledTableHeader;\nexport const TableBody = StyledTableBody;\nexport const TableRow = StyledTableRow;\nexport const TableHeaderCell = StyledTableHeaderCell;\nexport const TableCell = StyledTableCell;\n\n// Default export\nexport default TableV2;\n","import * as React from \"react\";\n\nexport type ColumnHeader = string | React.ReactNode;\n\nexport type RowData = Array<string | React.ReactNode>;\n\nexport interface TableV2Props {\n  caption: string;\n  displayCaption?: boolean;\n  columns: ColumnHeader[];\n  data: RowData[];\n}\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledTableV2Container = styled.div`\n  ${COMMON}\n  ${LAYOUT}\n  overflow-x: auto;\n  max-width: 100%;\n`;\n\nexport const StyledTableV2 = styled.table`\n  width: 100%;\n  border-collapse: collapse;\n  color: ${(props) => props.theme.colors.text.body};\n  font-family: ${(props) => props.theme.fontFamily};\n`;\n\nStyledTableV2.displayName = \"TableV2.Table\";\n\nexport const StyledCaption = styled.caption<{ isVisible: boolean }>`\n  ${TYPOGRAPHY}\n  text-align: left;\n  ${(props) => props.theme.typography[400]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  margin-top: ${(props) => props.theme.space[200]};\n  ${({ isVisible }) =>\n    !isVisible &&\n    css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      border: 0;\n    `}\n`;\n\nStyledCaption.displayName = \"TableV2.Caption\";\n\nexport const StyledTableHeader = styled.thead`\n  vertical-align: bottom;\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableHeader.displayName = \"TableV2.TableHeader\";\n\nexport const StyledTableBody = styled.tbody``;\n\nStyledTableBody.displayName = \"TableV2.TableBody\";\n\nexport const StyledTableRow = styled.tr`\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableRow.displayName = \"TableV2.TableRow\";\n\nexport const StyledTableHeaderCell = styled.th`\n  ${(props) => props.theme.typography[100]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n  min-width: 0;\n`;\n\nStyledTableHeaderCell.displayName = \"TableV2.TableHeaderCell\";\n\nexport const StyledTableCell = styled.td`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n`;\n\nStyledTableCell.displayName = \"TableV2.TableCell\";\n"],"mappings":"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","names":["React","React"]}
+{"version":3,"sources":["../../../src/v2/TableV2Hybrid.tsx","../../../src/v2/TableV2Types.ts","../../../src/v2/styles.ts","../../../src/v2/TableV2Tailwind.tsx"],"sourcesContent":["/**\n * Hybrid v2 Table components.\n *\n * Each exported sub-component renders the fast pure-CSS-class (Tailwind) path by\n * default and transparently falls back to the styled-components path via the\n * documented `needsStyledComponents` single gate — i.e. when a consumer passes\n * styled-system props (px, color, width, …) or extends the component with\n * `styled()` (detected through an injected `theme` prop or the generated\n * `sc-XXXX` className). This mirrors the established Button/Badge hybrid pattern\n * and preserves 100% backward compatibility with the existing styled-components\n * API.\n */\n\nimport React, { useId } from \"react\";\nimport { type TableV2Props } from \"./TableV2Types\";\nimport { needsStyledComponents } from \"@sproutsocial/seeds-react-system-props\";\nimport {\n  StyledTableV2Container,\n  StyledTableV2,\n  StyledCaption,\n  StyledTableHeader,\n  StyledTableBody,\n  StyledTableRow,\n  StyledTableHeaderCell,\n  StyledTableCell,\n} from \"./styles\";\nimport {\n  TableV2ContainerTailwind,\n  TableRootTailwind,\n  CaptionTailwind,\n  TableHeaderTailwind,\n  TableBodyTailwind,\n  TableRowTailwind,\n  TableHeaderCellTailwind,\n  TableCellTailwind,\n} from \"./TableV2Tailwind\";\n\ntype HybridProps = {\n  className?: string;\n  children?: React.ReactNode;\n  [key: string]: any;\n};\n\nconst TableContainerContext = React.createContext<string | null>(null);\n\nexport const useTableContainerId = () =>\n  React.useContext(TableContainerContext);\n\nexport const TableWrapper = React.forwardRef<\n  HTMLDivElement,\n  { children: React.ReactElement } & HybridProps\n>(({ children, className, ...rest }, ref) => {\n  const containerId = useId();\n\n  // Region semantics stay identical on both paths.\n  const containerProps = {\n    role: \"region\",\n    tabIndex: 0,\n    id: containerId,\n    \"aria-labelledby\": containerId,\n  };\n\n  return (\n    <TableContainerContext.Provider value={containerId}>\n      {needsStyledComponents({ ...rest, className }) ? (\n        <StyledTableV2Container\n          className={className}\n          ref={ref}\n          {...containerProps}\n          {...rest}\n        >\n          {children}\n        </StyledTableV2Container>\n      ) : (\n        <TableV2ContainerTailwind\n          className={className}\n          ref={ref}\n          {...containerProps}\n          {...rest}\n        >\n          {children}\n        </TableV2ContainerTailwind>\n      )}\n    </TableContainerContext.Provider>\n  );\n});\n\nTableWrapper.displayName = \"TableV2.TableWrapper\";\n\nexport const TableRoot = React.forwardRef<HTMLTableElement, HybridProps>(\n  ({ className, children, ...rest }, ref) => {\n    if (needsStyledComponents({ ...rest, className })) {\n      return (\n        <StyledTableV2 className={className} ref={ref} {...rest}>\n          {children}\n        </StyledTableV2>\n      );\n    }\n    return (\n      <TableRootTailwind className={className} ref={ref} {...rest}>\n        {children}\n      </TableRootTailwind>\n    );\n  }\n);\n\nTableRoot.displayName = \"TableV2.Table\";\n\nexport const TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  HybridProps & { isVisible?: boolean }\n>(({ className, children, isVisible = true, ...rest }, ref) => {\n  if (needsStyledComponents({ ...rest, className })) {\n    return (\n      <StyledCaption\n        className={className}\n        isVisible={isVisible}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </StyledCaption>\n    );\n  }\n  return (\n    <CaptionTailwind\n      className={className}\n      isVisible={isVisible}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </CaptionTailwind>\n  );\n});\n\nTableCaption.displayName = \"TableV2.Caption\";\n\nexport const TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  HybridProps\n>(({ className, children, ...rest }, ref) => {\n  if (needsStyledComponents({ ...rest, className })) {\n    return (\n      <StyledTableHeader className={className} ref={ref} {...rest}>\n        {children}\n      </StyledTableHeader>\n    );\n  }\n  return (\n    <TableHeaderTailwind className={className} ref={ref} {...rest}>\n      {children}\n    </TableHeaderTailwind>\n  );\n});\n\nTableHeader.displayName = \"TableV2.TableHeader\";\n\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, HybridProps>(\n  ({ className, children, ...rest }, ref) => {\n    if (needsStyledComponents({ ...rest, className })) {\n      return (\n        <StyledTableBody className={className} ref={ref} {...rest}>\n          {children}\n        </StyledTableBody>\n      );\n    }\n    return (\n      <TableBodyTailwind className={className} ref={ref} {...rest}>\n        {children}\n      </TableBodyTailwind>\n    );\n  }\n);\n\nTableBody.displayName = \"TableV2.TableBody\";\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, HybridProps>(\n  ({ className, children, ...rest }, ref) => {\n    if (needsStyledComponents({ ...rest, className })) {\n      return (\n        <StyledTableRow className={className} ref={ref} {...rest}>\n          {children}\n        </StyledTableRow>\n      );\n    }\n    return (\n      <TableRowTailwind className={className} ref={ref} {...rest}>\n        {children}\n      </TableRowTailwind>\n    );\n  }\n);\n\nTableRow.displayName = \"TableV2.TableRow\";\n\nexport const TableHeaderCell = React.forwardRef<\n  HTMLTableCellElement,\n  HybridProps\n>(({ className, children, ...rest }, ref) => {\n  if (needsStyledComponents({ ...rest, className })) {\n    return (\n      <StyledTableHeaderCell className={className} ref={ref} {...rest}>\n        {children}\n      </StyledTableHeaderCell>\n    );\n  }\n  return (\n    <TableHeaderCellTailwind className={className} ref={ref} {...rest}>\n      {children}\n    </TableHeaderCellTailwind>\n  );\n});\n\nTableHeaderCell.displayName = \"TableV2.TableHeaderCell\";\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, HybridProps>(\n  ({ className, children, ...rest }, ref) => {\n    if (needsStyledComponents({ ...rest, className })) {\n      return (\n        <StyledTableCell className={className} ref={ref} {...rest}>\n          {children}\n        </StyledTableCell>\n      );\n    }\n    return (\n      <TableCellTailwind className={className} ref={ref} {...rest}>\n        {children}\n      </TableCellTailwind>\n    );\n  }\n);\n\nTableCell.displayName = \"TableV2.TableCell\";\n\nconst TableV2 = ({\n  caption,\n  displayCaption = true,\n  columns,\n  data,\n}: TableV2Props) => {\n  const containerId = useTableContainerId();\n\n  return (\n    <TableWrapper>\n      <TableRoot>\n        <TableCaption id={containerId ?? undefined} isVisible={displayCaption}>\n          {caption}\n        </TableCaption>\n        <TableHeader>\n          <TableRow>\n            {columns.map((column, index) => (\n              <TableHeaderCell key={index} scope=\"col\">\n                {column}\n              </TableHeaderCell>\n            ))}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {data.map((row, rowIndex) => (\n            <TableRow key={rowIndex}>\n              {row.map((cell, cellIndex) => (\n                <TableCell key={cellIndex}>{cell}</TableCell>\n              ))}\n            </TableRow>\n          ))}\n        </TableBody>\n      </TableRoot>\n    </TableWrapper>\n  );\n};\n\n// Export the full Table component as Table (main export)\nexport const Table = TableV2;\n\n// Default export\nexport default TableV2;\n","import * as React from \"react\";\n\nexport type ColumnHeader = string | React.ReactNode;\n\nexport type RowData = Array<string | React.ReactNode>;\n\nexport interface TableV2Props {\n  caption: string;\n  displayCaption?: boolean;\n  columns: ColumnHeader[];\n  data: RowData[];\n}\n","import styled, { css } from \"styled-components\";\nimport {\n  COMMON,\n  LAYOUT,\n  TYPOGRAPHY,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport const StyledTableV2Container = styled.div`\n  ${COMMON}\n  ${LAYOUT}\n  overflow-x: auto;\n  max-width: 100%;\n`;\n\nexport const StyledTableV2 = styled.table`\n  width: 100%;\n  border-collapse: collapse;\n  color: ${(props) => props.theme.colors.text.body};\n  font-family: ${(props) => props.theme.fontFamily};\n`;\n\nStyledTableV2.displayName = \"TableV2.Table\";\n\nexport const StyledCaption = styled.caption<{ isVisible: boolean }>`\n  ${TYPOGRAPHY}\n  text-align: left;\n  ${(props) => props.theme.typography[400]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  margin-top: ${(props) => props.theme.space[200]};\n  ${({ isVisible }) =>\n    !isVisible &&\n    css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      border: 0;\n    `}\n`;\n\nStyledCaption.displayName = \"TableV2.Caption\";\n\nexport const StyledTableHeader = styled.thead`\n  vertical-align: bottom;\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableHeader.displayName = \"TableV2.TableHeader\";\n\nexport const StyledTableBody = styled.tbody``;\n\nStyledTableBody.displayName = \"TableV2.TableBody\";\n\nexport const StyledTableRow = styled.tr`\n  border-bottom: 1px solid\n    ${(props) => props.theme.colors.container.border.base};\n`;\n\nStyledTableRow.displayName = \"TableV2.TableRow\";\n\nexport const StyledTableHeaderCell = styled.th`\n  ${(props) => props.theme.typography[100]}\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n  min-width: 0;\n`;\n\nStyledTableHeaderCell.displayName = \"TableV2.TableHeaderCell\";\n\nexport const StyledTableCell = styled.td`\n  ${(props) => props.theme.typography[200]}\n  font-weight: ${(props) => props.theme.fontWeights.normal};\n  padding: ${(props) => props.theme.space[300]};\n  text-align: left;\n`;\n\nStyledTableCell.displayName = \"TableV2.TableCell\";\n","/**\n * Tailwind CSS implementation of the v2 Table sub-components.\n * Uses Seeds table CSS classes from table-v2.css.\n *\n * These are the pure semantic-HTML + CSS-class leaves the hybrid wrappers render\n * on the fast path. They forward `className` and `ref` so `styled(Component)`\n * extensions keep working, and pass standard HTML attributes (scope, id, role,\n * tabIndex, …) straight through to the DOM. Every leaf honors the polymorphic\n * `as` prop (rendering a dynamic element instead of a hard-coded tag) so\n * `<TableCell as=\"th\" scope=\"row\">` produces a real `<th scope=\"row\">` with the\n * `rowheader` role and `<TableRow as=\"div\">` renders a `<div>`, matching the\n * styled-components path. Because `as` is destructured out, it never leaks onto\n * the DOM node; a component-valued `as` (e.g. `styled(TableRow)`) re-enters the\n * hybrid, which then detects the styled signal and routes to styled-components.\n */\n\nimport React from \"react\";\n\n// Utility for merging class names properly\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\ntype TailwindProps = {\n  className?: string;\n  children?: React.ReactNode;\n  [key: string]: any;\n};\n\nexport const TableV2ContainerTailwind = React.forwardRef<\n  HTMLDivElement,\n  TailwindProps\n>(({ className, children, as: Component = \"div\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-container\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableV2ContainerTailwind.displayName = \"TableV2.ContainerTailwind\";\n\nexport const TableRootTailwind = React.forwardRef<\n  HTMLTableElement,\n  TailwindProps\n>(({ className, children, as: Component = \"table\", ...rest }, ref) => (\n  <Component ref={ref} className={cn(\"seeds-table-v2\", className)} {...rest}>\n    {children}\n  </Component>\n));\n\nTableRootTailwind.displayName = \"TableV2.TableTailwind\";\n\nexport const CaptionTailwind = React.forwardRef<\n  HTMLTableCaptionElement,\n  TailwindProps & { isVisible?: boolean }\n>(\n  (\n    {\n      className,\n      children,\n      isVisible = true,\n      as: Component = \"caption\",\n      ...rest\n    },\n    ref\n  ) => (\n    <Component\n      ref={ref}\n      className={cn(\n        \"seeds-table-v2-caption\",\n        { \"seeds-table-v2-caption-hidden\": !isVisible },\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </Component>\n  )\n);\n\nCaptionTailwind.displayName = \"TableV2.CaptionTailwind\";\n\nexport const TableHeaderTailwind = React.forwardRef<\n  HTMLTableSectionElement,\n  TailwindProps\n>(({ className, children, as: Component = \"thead\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-header\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableHeaderTailwind.displayName = \"TableV2.TableHeaderTailwind\";\n\nexport const TableBodyTailwind = React.forwardRef<\n  HTMLTableSectionElement,\n  TailwindProps\n>(({ className, children, as: Component = \"tbody\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-body\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableBodyTailwind.displayName = \"TableV2.TableBodyTailwind\";\n\nexport const TableRowTailwind = React.forwardRef<\n  HTMLTableRowElement,\n  TailwindProps\n>(({ className, children, as: Component = \"tr\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-row\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableRowTailwind.displayName = \"TableV2.TableRowTailwind\";\n\nexport const TableHeaderCellTailwind = React.forwardRef<\n  HTMLTableCellElement,\n  TailwindProps\n>(({ className, children, as: Component = \"th\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-header-cell\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableHeaderCellTailwind.displayName = \"TableV2.TableHeaderCellTailwind\";\n\nexport const TableCellTailwind = React.forwardRef<\n  HTMLTableCellElement,\n  TailwindProps\n>(({ className, children, as: Component = \"td\", ...rest }, ref) => (\n  <Component\n    ref={ref}\n    className={cn(\"seeds-table-v2-cell\", className)}\n    {...rest}\n  >\n    {children}\n  </Component>\n));\n\nTableCellTailwind.displayName = \"TableV2.TableCellTailwind\";\n"],"mappings":"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","names":["React","React","jsx","React"]}

package/dist/table-v2.css

@@ -0,0 +1,87 @@
+/**
+ * Seeds v2 Table component classes
+ * Use these instead of writing out individual Tailwind utility classes.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css imported for
+ * CSS variable definitions and dark mode support.
+ *
+ * Usage:
+ *   <div class="seeds-table-v2-container" role="region" tabindex="0">
+ *     <table class="seeds-table-v2">
+ *       <caption class="seeds-table-v2-caption">Caption</caption>
+ *       <thead class="seeds-table-v2-header">
+ *         <tr class="seeds-table-v2-row">
+ *           <th class="seeds-table-v2-header-cell" scope="col">Header</th>
+ *         </tr>
+ *       </thead>
+ *       <tbody class="seeds-table-v2-body">
+ *         <tr class="seeds-table-v2-row">
+ *           <td class="seeds-table-v2-cell">Data</td>
+ *         </tr>
+ *       </tbody>
+ *     </table>
+ *   </div>
+ *
+ * All rules are wrapped in `@layer components` so that consumer Tailwind
+ * utilities (unlayered) win the cascade over these styles.
+ */
+
+@layer components {
+  .seeds-table-v2-container {
+    overflow-x: auto;
+    max-width: 100%;
+  }
+
+  .seeds-table-v2 {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--color-text-body);
+    font-family: var(--font-family);
+  }
+
+  .seeds-table-v2-caption {
+    text-align: left;
+    font-size: var(--font-size-400);
+    line-height: var(--line-height-400);
+    font-weight: var(--font-weight-semibold);
+    padding: var(--space-300);
+    margin-top: var(--space-200);
+  }
+
+  .seeds-table-v2-caption-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
+
+  .seeds-table-v2-header {
+    vertical-align: bottom;
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-table-v2-row {
+    border-bottom: 1px solid var(--color-container-border-base);
+  }
+
+  .seeds-table-v2-header-cell {
+    font-size: var(--font-size-100);
+    line-height: var(--line-height-100);
+    font-weight: var(--font-weight-semibold);
+    padding: var(--space-300);
+    text-align: left;
+    min-width: 0;
+  }
+
+  .seeds-table-v2-cell {
+    font-size: var(--font-size-200);
+    line-height: var(--line-height-200);
+    font-weight: var(--font-weight-normal);
+    padding: var(--space-300);
+    text-align: left;
+  }
+}

package/dist/v2/index.d.mts

@@ -1,7 +1,7 @@
-import * as styled_components from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default from 'react';
+import * as styled_components from 'styled-components';
 
 type ColumnHeader = string | React.ReactNode;
 type RowData = Array<string | React.ReactNode>;
@@ -12,21 +12,26 @@ interface TableV2Props {
     data: RowData[];
 }
 
+type HybridProps = {
+    className?: string;
+    children?: React__default.ReactNode;
+    [key: string]: any;
+};
 declare const useTableContainerId: () => string | null;
-declare const TableWrapper: ({ children, ...rest }: {
+declare const TableWrapper: React__default.ForwardRefExoticComponent<Omit<{
     children: React__default.ReactElement;
-}) => react_jsx_runtime.JSX.Element;
+} & HybridProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const TableRoot: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableElement>>;
+declare const TableCaption: React__default.ForwardRefExoticComponent<Omit<HybridProps & {
+    isVisible?: boolean;
+}, "ref"> & React__default.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableHeader: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableRowElement>>;
+declare const TableHeaderCell: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React__default.ForwardRefExoticComponent<Omit<HybridProps, "ref"> & React__default.RefAttributes<HTMLTableCellElement>>;
 declare const TableV2: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
 declare const Table: ({ caption, displayCaption, columns, data, }: TableV2Props) => react_jsx_runtime.JSX.Element;
-declare const TableRoot: styled_components.StyledComponent<"table", any, {}, never>;
-declare const TableCaption: styled_components.StyledComponent<"caption", any, {
-    isVisible: boolean;
-}, never>;
-declare const TableHeader: styled_components.StyledComponent<"thead", any, {}, never>;
-declare const TableBody: styled_components.StyledComponent<"tbody", any, {}, never>;
-declare const TableRow: styled_components.StyledComponent<"tr", any, {}, never>;
-declare const TableHeaderCell: styled_components.StyledComponent<"th", any, {}, never>;
-declare const TableCell: styled_components.StyledComponent<"td", any, {}, never>;
 
 declare const StyledTableV2Container: styled_components.StyledComponent<"div", any, {}, never>;
 declare const StyledTableV2: styled_components.StyledComponent<"table", any, {}, never>;