@sproutsocial/seeds-react-table 1.0.50 → 1.0.51

package/dist/v2/index.d.ts

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

package/dist/v2/index.js

@@ -46,18 +46,21 @@ __export(v2_exports, {
   TableHeaderCell: () => TableHeaderCell,
   TableRoot: () => TableRoot,
   TableRow: () => TableRow,
-  TableV2: () => TableV2_default,
+  TableV2: () => TableV2Hybrid_default,
   TableWrapper: () => TableWrapper,
   useTableContainerId: () => useTableContainerId
 });
 module.exports = __toCommonJS(v2_exports);
 
-// src/v2/TableV2.tsx
-var import_react = __toESM(require("react"));
+// src/v2/TableV2Hybrid.tsx
+var import_react2 = __toESM(require("react"));
 
 // src/v2/TableV2Types.ts
 var React = require("react");
 
+// src/v2/TableV2Hybrid.tsx
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+
 // src/v2/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
@@ -122,27 +125,218 @@ var StyledTableCell = import_styled_components.default.td`
 `;
 StyledTableCell.displayName = "TableV2.TableCell";
 
-// src/v2/TableV2.tsx
+// src/v2/TableV2Tailwind.tsx
+var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var TableContainerContext = import_react.default.createContext(null);
-var useTableContainerId = () => import_react.default.useContext(TableContainerContext);
-var TableWrapper = ({
-  children,
-  ...rest
-}) => {
-  const containerId = (0, import_react.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableContainerContext.Provider, { value: containerId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+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 = import_react.default.forwardRef(({ className, children, as: Component = "div", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-container", className),
+    ...rest,
+    children
+  }
+));
+TableV2ContainerTailwind.displayName = "TableV2.ContainerTailwind";
+var TableRootTailwind = import_react.default.forwardRef(({ className, children, as: Component = "table", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, className: cn("seeds-table-v2", className), ...rest, children }));
+TableRootTailwind.displayName = "TableV2.TableTailwind";
+var CaptionTailwind = import_react.default.forwardRef(
+  ({
+    className,
+    children,
+    isVisible = true,
+    as: Component = "caption",
+    ...rest
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ref,
+      className: cn(
+        "seeds-table-v2-caption",
+        { "seeds-table-v2-caption-hidden": !isVisible },
+        className
+      ),
+      ...rest,
+      children
+    }
+  )
+);
+CaptionTailwind.displayName = "TableV2.CaptionTailwind";
+var TableHeaderTailwind = import_react.default.forwardRef(({ className, children, as: Component = "thead", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-header", className),
+    ...rest,
+    children
+  }
+));
+TableHeaderTailwind.displayName = "TableV2.TableHeaderTailwind";
+var TableBodyTailwind = import_react.default.forwardRef(({ className, children, as: Component = "tbody", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-body", className),
+    ...rest,
+    children
+  }
+));
+TableBodyTailwind.displayName = "TableV2.TableBodyTailwind";
+var TableRowTailwind = import_react.default.forwardRef(({ className, children, as: Component = "tr", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-row", className),
+    ...rest,
+    children
+  }
+));
+TableRowTailwind.displayName = "TableV2.TableRowTailwind";
+var TableHeaderCellTailwind = import_react.default.forwardRef(({ className, children, as: Component = "th", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-header-cell", className),
+    ...rest,
+    children
+  }
+));
+TableHeaderCellTailwind.displayName = "TableV2.TableHeaderCellTailwind";
+var TableCellTailwind = import_react.default.forwardRef(({ className, children, as: Component = "td", ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  Component,
+  {
+    ref,
+    className: cn("seeds-table-v2-cell", className),
+    ...rest,
+    children
+  }
+));
+TableCellTailwind.displayName = "TableV2.TableCellTailwind";
+
+// src/v2/TableV2Hybrid.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TableContainerContext = import_react2.default.createContext(null);
+var useTableContainerId = () => import_react2.default.useContext(TableContainerContext);
+var TableWrapper = import_react2.default.forwardRef(({ children, className, ...rest }, ref) => {
+  const containerId = (0, import_react2.useId)();
+  const containerProps = {
+    role: "region",
+    tabIndex: 0,
+    id: containerId,
+    "aria-labelledby": containerId
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableContainerContext.Provider, { value: containerId, children: (0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className }) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     StyledTableV2Container,
     {
-      role: "region",
-      tabIndex: 0,
-      id: containerId,
-      "aria-labelledby": containerId,
+      className,
+      ref,
+      ...containerProps,
+      ...rest,
+      children
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    TableV2ContainerTailwind,
+    {
+      className,
+      ref,
+      ...containerProps,
       ...rest,
       children
     }
   ) });
-};
+});
+TableWrapper.displayName = "TableV2.TableWrapper";
+var TableRoot = import_react2.default.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableV2, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRootTailwind, { className, ref, ...rest, children });
+  }
+);
+TableRoot.displayName = "TableV2.Table";
+var TableCaption = import_react2.default.forwardRef(({ className, children, isVisible = true, ...rest }, ref) => {
+  if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      StyledCaption,
+      {
+        className,
+        isVisible,
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    CaptionTailwind,
+    {
+      className,
+      isVisible,
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+TableCaption.displayName = "TableV2.Caption";
+var TableHeader = import_react2.default.forwardRef(({ className, children, ...rest }, ref) => {
+  if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableHeader, { className, ref, ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeaderTailwind, { className, ref, ...rest, children });
+});
+TableHeader.displayName = "TableV2.TableHeader";
+var TableBody = import_react2.default.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableBody, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBodyTailwind, { className, ref, ...rest, children });
+  }
+);
+TableBody.displayName = "TableV2.TableBody";
+var TableRow = import_react2.default.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableRow, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRowTailwind, { className, ref, ...rest, children });
+  }
+);
+TableRow.displayName = "TableV2.TableRow";
+var TableHeaderCell = import_react2.default.forwardRef(({ className, children, ...rest }, ref) => {
+  if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableHeaderCell, { className, ref, ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeaderCellTailwind, { className, ref, ...rest, children });
+});
+TableHeaderCell.displayName = "TableV2.TableHeaderCell";
+var TableCell = import_react2.default.forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    if ((0, import_seeds_react_system_props2.needsStyledComponents)({ ...rest, className })) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledTableCell, { className, ref, ...rest, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableCellTailwind, { className, ref, ...rest, children });
+  }
+);
+TableCell.displayName = "TableV2.TableCell";
 var TableV2 = ({
   caption,
   displayCaption = true,
@@ -150,21 +344,14 @@ var TableV2 = ({
   data
 }) => {
   const containerId = useTableContainerId();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(StyledTableV2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCaption, { id: containerId ?? void 0, isVisible: displayCaption, children: caption }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableRow, { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableHeaderCell, { scope: "col", children: column }, index)) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledTableCell, { children: cell }, cellIndex)) }, rowIndex)) })
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(TableRoot, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableCaption, { id: containerId ?? void 0, isVisible: displayCaption, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableHeaderCell, { scope: "col", children: column }, index)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   StyledCaption,

package/dist/v2/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/v2/index.ts","../../src/v2/TableV2.tsx","../../src/v2/TableV2Types.ts","../../src/v2/styles.ts"],"sourcesContent":["// V2 Table - Explicit flat exports for optimal tree shaking\nexport {\n  Table,\n  TableRoot,\n  TableWrapper,\n  TableCaption,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHeaderCell,\n  TableCell,\n  useTableContainerId,\n  default as TableV2,\n} from \"./TableV2\";\n\n// Explicit type exports\nexport type { TableV2Props, ColumnHeader, RowData } from \"./TableV2Types\";\n\n// Explicit style exports\nexport * from \"./styles\";\n","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":["styled","React"]}
+{"version":3,"sources":["../../src/v2/index.ts","../../src/v2/TableV2Hybrid.tsx","../../src/v2/TableV2Types.ts","../../src/v2/styles.ts","../../src/v2/TableV2Tailwind.tsx"],"sourcesContent":["// V2 Table - Explicit flat exports for optimal tree shaking\nexport {\n  Table,\n  TableRoot,\n  TableWrapper,\n  TableCaption,\n  TableHeader,\n  TableBody,\n  TableRow,\n  TableHeaderCell,\n  TableCell,\n  useTableContainerId,\n  default as TableV2,\n} from \"./TableV2\";\n\n// Explicit type exports\nexport type { TableV2Props, ColumnHeader, RowData } from \"./TableV2Types\";\n\n// Explicit style exports\nexport * from \"./styles\";\n","/**\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":["import_react","import_seeds_react_system_props","styled","React","import_jsx_runtime","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-table",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "Seeds React Table",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -37,11 +37,12 @@
       "types": "./dist/v1/TableRowAccordion/index.d.ts",
       "import": "./dist/esm/v1/TableRowAccordion/index.js",
       "require": "./dist/v1/TableRowAccordion/index.js"
-    }
+    },
+    "./dist/table-v2.css": "./dist/table-v2.css"
   },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/table-v2.css dist/table-v2.css",
+    "build:debug": "tsup --dts --metafile && cp src/table-v2.css dist/table-v2.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",

package/src/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/src/v2/TableV2.tsx

@@ -1,91 +1,17 @@
-import React, { useId } from "react";
-import { type TableV2Props } from "./TableV2Types";
-import {
-  StyledTableV2Container,
-  StyledTableV2,
-  StyledCaption,
-  StyledTableHeader,
-  StyledTableBody,
-  StyledTableRow,
-  StyledTableHeaderCell,
-  StyledTableCell,
-} from "./styles";
-
-const TableContainerContext = React.createContext<string | null>(null);
-
-export const useTableContainerId = () =>
-  React.useContext(TableContainerContext);
-
-export const TableWrapper = ({
-  children,
-  ...rest
-}: {
-  children: React.ReactElement;
-}) => {
-  const containerId = useId();
-  return (
-    <TableContainerContext.Provider value={containerId}>
-      <StyledTableV2Container
-        role="region"
-        tabIndex={0}
-        id={containerId}
-        aria-labelledby={containerId}
-        {...rest}
-      >
-        {children}
-      </StyledTableV2Container>
-    </TableContainerContext.Provider>
-  );
-};
-
-const TableV2 = ({
-  caption,
-  displayCaption = true,
-  columns,
-  data,
-}: TableV2Props) => {
-  const containerId = useTableContainerId();
-
-  return (
-    <TableWrapper>
-      <StyledTableV2>
-        <StyledCaption id={containerId ?? undefined} isVisible={displayCaption}>
-          {caption}
-        </StyledCaption>
-        <StyledTableHeader>
-          <StyledTableRow>
-            {columns.map((column, index) => (
-              <StyledTableHeaderCell key={index} scope="col">
-                {column}
-              </StyledTableHeaderCell>
-            ))}
-          </StyledTableRow>
-        </StyledTableHeader>
-        <StyledTableBody>
-          {data.map((row, rowIndex) => (
-            <StyledTableRow key={rowIndex}>
-              {row.map((cell, cellIndex) => (
-                <StyledTableCell key={cellIndex}>{cell}</StyledTableCell>
-              ))}
-            </StyledTableRow>
-          ))}
-        </StyledTableBody>
-      </StyledTableV2>
-    </TableWrapper>
-  );
-};
-
-// Export the full Table component as Table (main export)
-export const Table = TableV2;
-
-// Export styled components for compound component usage
-export const TableRoot = StyledTableV2;
-export const TableCaption = StyledCaption;
-export const TableHeader = StyledTableHeader;
-export const TableBody = StyledTableBody;
-export const TableRow = StyledTableRow;
-export const TableHeaderCell = StyledTableHeaderCell;
-export const TableCell = StyledTableCell;
-
-// Default export
-export default TableV2;
+// Public v2 Table surface. Every exported name keeps its identity but now points
+// at a hybrid wrapper that renders the Tailwind (CSS-class) path by default and
+// falls back to styled-components when styled-system props are present.
+// The styled-components entities remain available via `export * from "./styles"`.
+export {
+  Table,
+  TableWrapper,
+  TableRoot,
+  TableCaption,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHeaderCell,
+  TableCell,
+  useTableContainerId,
+  default,
+} from "./TableV2Hybrid";