@react-md/core 1.0.0-next.13 → 1.0.0-next.15

package/dist/table/StickyTableSection.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from "react";
+import { type TableSectionConfiguration, type TableStickySectionConfiguration } from "./types.js";
+/** @since 6.0.0 */
+export interface StickyTableSectionProps extends HTMLAttributes<HTMLTableSectionElement>, TableStickySectionConfiguration, TableSectionConfiguration {
+    type: "header" | "footer";
+    /**
+     * An optional className to use when the sticky section is covering other rows
+     * (`active`). When this is defined, the default
+     * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+     * applied.
+     */
+    stickyActiveClassName?: string;
+}
+/**
+ * **Client Component**
+ *
+ * This component is used to render a sticky `<thead>`/`<tfoot>` that
+ * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering
+ * content in the table.
+ *
+ * @since 6.0.0
+ */
+export declare const StickyTableSection: import("react").ForwardRefExoticComponent<StickyTableSectionProps & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/table/StickyTableSection.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableConfigProvider } from "./TableConfigurationProvider.js";
+import { tableFooter } from "./tableFooterStyles.js";
+import { tableHeader } from "./tableHeaderStyles.js";
+import { useStickyTableSection } from "./useStickyTableSection.js";
+import { useTableSectionConfig } from "./useTableSectionConfig.js";
+/**
+ * **Client Component**
+ *
+ * This component is used to render a sticky `<thead>`/`<tfoot>` that
+ * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering
+ * content in the table.
+ *
+ * @since 6.0.0
+ */ export const StickyTableSection = /*#__PURE__*/ forwardRef(function StickyTableSection(props, ref) {
+    const { type, className, hoverable, lineWrap, children, stickyOptions, isStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
+    const isHeader = type === "header";
+    const Section = isHeader ? "thead" : "tfoot";
+    const styles = isHeader ? tableHeader : tableFooter;
+    const { tbody, sectionRef, stickyActive } = useStickyTableSection({
+        ref,
+        type,
+        stickyOptions,
+        isStickyActive,
+        disableStickyStyles,
+        stickyActiveClassName
+    });
+    const config = useTableSectionConfig({
+        type,
+        lineWrap,
+        hoverable
+    });
+    return /*#__PURE__*/ _jsxs(TableConfigProvider, {
+        value: config,
+        children: [
+            !isHeader && tbody,
+            /*#__PURE__*/ _jsx(Section, {
+                ...remaining,
+                ref: sectionRef,
+                className: styles({
+                    className,
+                    dense: config.dense,
+                    sticky: true,
+                    stickyActive,
+                    stickyActiveClassName
+                }),
+                children: children
+            }),
+            isHeader && tbody
+        ]
+    });
+});
+
+//# sourceMappingURL=StickyTableSection.js.map

package/dist/table/StickyTableSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/StickyTableSection.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport {\n  type TableSectionConfiguration,\n  type TableStickySectionConfiguration,\n} from \"./types.js\";\nimport { useStickyTableSection } from \"./useStickyTableSection.js\";\nimport { useTableSectionConfig } from \"./useTableSectionConfig.js\";\n\n/** @since 6.0.0 */\nexport interface StickyTableSectionProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    TableStickySectionConfiguration,\n    TableSectionConfiguration {\n  type: \"header\" | \"footer\";\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n}\n\n/**\n * **Client Component**\n *\n * This component is used to render a sticky `<thead>`/`<tfoot>` that\n * dynamically applies styles whenever the `<thead>`/`<tfoot>` are covering\n * content in the table.\n *\n * @since 6.0.0\n */\nexport const StickyTableSection = forwardRef<\n  HTMLTableSectionElement,\n  StickyTableSectionProps\n>(function StickyTableSection(props, ref) {\n  const {\n    type,\n    className,\n    hoverable,\n    lineWrap,\n    children,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  const isHeader = type === \"header\";\n  const Section = isHeader ? \"thead\" : \"tfoot\";\n  const styles = isHeader ? tableHeader : tableFooter;\n  const { tbody, sectionRef, stickyActive } = useStickyTableSection({\n    ref,\n    type,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles,\n    stickyActiveClassName,\n  });\n  const config = useTableSectionConfig({\n    type,\n    lineWrap,\n    hoverable,\n  });\n\n  return (\n    <TableConfigProvider value={config}>\n      {!isHeader && tbody}\n      <Section\n        {...remaining}\n        ref={sectionRef}\n        className={styles({\n          className,\n          dense: config.dense,\n          sticky: true,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </Section>\n      {isHeader && tbody}\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","TableConfigProvider","tableFooter","tableHeader","useStickyTableSection","useTableSectionConfig","StickyTableSection","props","ref","type","className","hoverable","lineWrap","children","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","isHeader","Section","styles","tbody","sectionRef","stickyActive","config","value","dense","sticky"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA6B,QAAQ;AACxD,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,WAAW,QAAQ,yBAAyB;AAKrD,SAASC,qBAAqB,QAAQ,6BAA6B;AACnE,SAASC,qBAAqB,QAAQ,6BAA6B;AAkBnE;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAqBN,WAGhC,SAASM,mBAAmBC,KAAK,EAAEC,GAAG;IACtC,MAAM,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,cAAc,EACdC,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,WAAWV,SAAS;IAC1B,MAAMW,UAAUD,WAAW,UAAU;IACrC,MAAME,SAASF,WAAWhB,cAAcD;IACxC,MAAM,EAAEoB,KAAK,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGpB,sBAAsB;QAChEI;QACAC;QACAK;QACAC;QACAC;QACAC;IACF;IACA,MAAMQ,SAASpB,sBAAsB;QACnCI;QACAG;QACAD;IACF;IAEA,qBACE,MAACV;QAAoByB,OAAOD;;YACzB,CAACN,YAAYG;0BACd,KAACF;gBACE,GAAGF,SAAS;gBACbV,KAAKe;gBACLb,WAAWW,OAAO;oBAChBX;oBACAiB,OAAOF,OAAOE,KAAK;oBACnBC,QAAQ;oBACRJ;oBACAP;gBACF;0BAECJ;;YAEFM,YAAYG;;;AAGnB,GAAG"}

package/dist/table/Table.d.ts

@@ -1,5 +1,5 @@
 import { type TableHTMLAttributes } from "react";
-import { type TableConfiguration } from "./TableConfigurationProvider.js";
+import { type TableConfiguration } from "./types.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-table-background-color"?: string;

package/dist/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type TableHTMLAttributes } from \"react\";\nimport {\n  TableConfigProvider,\n  type TableConfigContext,\n  type TableConfiguration,\n} from \"./TableConfigurationProvider.js\";\nimport { table } from \"./tableStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>,\n    TableConfiguration {}\n\n/**\n * **Client Component**\n *\n * @example Responsive Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  function Table(props, ref) {\n    const {\n      className,\n      children,\n      dense = false,\n      hAlign = \"left\",\n      vAlign = \"middle\",\n      lineWrap = false,\n      fullWidth = false,\n      disableHover = false,\n      disableBorders = false,\n      ...remaining\n    } = props;\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        dense,\n        header: false,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableHover,\n        disableBorders,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <table\n          {...remaining}\n          ref={ref}\n          className={table({ dense, fullWidth, className })}\n        >\n          {children}\n        </table>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","TableConfigProvider","table","Table","props","ref","className","children","dense","hAlign","vAlign","lineWrap","fullWidth","disableHover","disableBorders","remaining","configuration","header","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAkC,QAAQ;AACtE,SACEC,mBAAmB,QAGd,kCAAkC;AACzC,SAASC,KAAK,QAAQ,mBAAmB;AA0BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAMC,sBAAQJ,WACnB,SAASI,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQ,KAAK,EACbC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,gBAAgBhB,QACpB,IAAO,CAAA;YACLQ;YACAS,QAAQ;YACRR;YACAC;YACAC;YACAE;YACAC;QACF,CAAA,GACA;QAACN;QAAOC;QAAQC;QAAQC;QAAUE;QAAcC;KAAe;IAGjE,qBACE,KAACb;QAAoBiB,OAAOF;kBAC1B,cAAA,KAACd;YACE,GAAGa,SAAS;YACbV,KAAKA;YACLC,WAAWJ,MAAM;gBAAEM;gBAAOI;gBAAWN;YAAU;sBAE9CC;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/Table.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type TableHTMLAttributes } from \"react\";\nimport { TableConfigProvider } from \"./TableConfigurationProvider.js\";\nimport { table } from \"./tableStyles.js\";\nimport { type TableConfigContext, type TableConfiguration } from \"./types.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-table-background-color\"?: string;\n    \"--rmd-table-border-size\"?: string | number;\n    \"--rmd-table-border-color\"?: string;\n    \"--rmd-table-header-background-color\"?: string;\n    \"--rmd-table-cell-color\"?: string;\n    \"--rmd-table-cell-height\"?: string | number;\n    \"--rmd-table-cell-horizontal-padding\"?: string | number;\n    \"--rmd-table-cell-vertical-padding\"?: string | number;\n    \"--rmd-table-header-cell-height\"?: string | number;\n    \"--rmd-table-hover-color\"?: string;\n    \"--rmd-table-selected-color\"?: string;\n    \"--rmd-table-sticky-cell\"?: string | number;\n    \"--rmd-table-sticky-header\"?: string | number;\n    \"--rmd-table-sticky-footer\"?: string | number;\n    \"--rmd-table-sticky-background-color\"?: string;\n  }\n}\n\nexport interface TableProps\n  extends TableHTMLAttributes<HTMLTableElement>,\n    TableConfiguration {}\n\n/**\n * **Client Component**\n *\n * @example Responsive Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell>Header 1</TableCell>\n *             <TableCell>Header 2</TableCell>\n *             <TableCell>Header 3</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           <TableRow>\n *             <TableCell>Row 1 Cell 1</TableCell>\n *             <TableCell>Row 1 Cell 2</TableCell>\n *             <TableCell>Row 1 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 2 Cell 1</TableCell>\n *             <TableCell>Row 2 Cell 2</TableCell>\n *             <TableCell>Row 2 Cell 3</TableCell>\n *           </TableRow>\n *           <TableRow>\n *             <TableCell>Row 3 Cell 1</TableCell>\n *             <TableCell>Row 3 Cell 2</TableCell>\n *             <TableCell>Row 3 Cell 3</TableCell>\n *           </TableRow>\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n */\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  function Table(props, ref) {\n    const {\n      className,\n      children,\n      dense = false,\n      hAlign = \"left\",\n      vAlign = \"middle\",\n      lineWrap = false,\n      fullWidth = false,\n      disableHover = false,\n      disableBorders = false,\n      ...remaining\n    } = props;\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        dense,\n        header: false,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableHover,\n        disableBorders,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableHover, disableBorders]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <table\n          {...remaining}\n          ref={ref}\n          className={table({ dense, fullWidth, className })}\n        >\n          {children}\n        </table>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","TableConfigProvider","table","Table","props","ref","className","children","dense","hAlign","vAlign","lineWrap","fullWidth","disableHover","disableBorders","remaining","configuration","header","value"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAAkC,QAAQ;AACtE,SAASC,mBAAmB,QAAQ,kCAAkC;AACtE,SAASC,KAAK,QAAQ,mBAAmB;AA2BzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDC,GACD,OAAO,MAAMC,sBAAQJ,WACnB,SAASI,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQ,KAAK,EACbC,SAAS,MAAM,EACfC,SAAS,QAAQ,EACjBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,eAAe,KAAK,EACpBC,iBAAiB,KAAK,EACtB,GAAGC,WACJ,GAAGX;IAEJ,MAAMY,gBAAgBhB,QACpB,IAAO,CAAA;YACLQ;YACAS,QAAQ;YACRR;YACAC;YACAC;YACAE;YACAC;QACF,CAAA,GACA;QAACN;QAAOC;QAAQC;QAAQC;QAAUE;QAAcC;KAAe;IAGjE,qBACE,KAACb;QAAoBiB,OAAOF;kBAC1B,cAAA,KAACd;YACE,GAAGa,SAAS;YACbV,KAAKA;YACLC,WAAWJ,MAAM;gBAAEM;gBAAOI;gBAAWN;YAAU;sBAE9CC;;;AAIT,GACA"}

package/dist/table/TableBody.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "react";
-import { type TableConfig } from "./TableConfigurationProvider.js";
+import { type TableConfig } from "./types.js";
 export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement>, Omit<TableConfig, "header"> {
 }
 /**

package/dist/table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableBody.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\n\nexport interface TableBodyProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Omit<TableConfig, \"header\"> {}\n\n/**\n * **Client Component**\n *\n * Creates a `<tbody>` element that also allows for overriding all the child\n * `TableCell` components with additional styling behavior.\n */\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  function TableBody(props, ref) {\n    const {\n      className,\n      children,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propLineWrap,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n      ...remaining\n    } = props;\n\n    // update the table configuration with the custom overrides for the `<thead>`\n    const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n      useTableConfig({\n        hAlign: propHAlign,\n        vAlign: propVAlign,\n        lineWrap: propLineWrap,\n        disableHover: propDisableHover,\n        disableBorders: propDisableBorders,\n      });\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        header: false,\n        dense,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableBorders,\n        disableHover,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <tbody {...remaining} ref={ref} className={cnb(\"rmd-tbody\", className)}>\n          {children}\n        </tbody>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","TableConfigProvider","useTableConfig","TableBody","props","ref","className","children","hAlign","propHAlign","vAlign","propVAlign","lineWrap","propLineWrap","disableHover","propDisableHover","disableBorders","propDisableBorders","remaining","dense","configuration","header","value","tbody"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AAMzC;;;;;CAKC,GACD,OAAO,MAAMC,0BAAYJ,WACvB,SAASI,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,YAAY,EACtBC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,WACJ,GAAGd;IAEJ,6EAA6E;IAC7E,MAAM,EAAEe,KAAK,EAAEX,MAAM,EAAEE,MAAM,EAAEE,QAAQ,EAAEE,YAAY,EAAEE,cAAc,EAAE,GACrEd,eAAe;QACbM,QAAQC;QACRC,QAAQC;QACRC,UAAUC;QACVC,cAAcC;QACdC,gBAAgBC;IAClB;IAEF,MAAMG,gBAAgBpB,QACpB,IAAO,CAAA;YACLqB,QAAQ;YACRF;YACAX;YACAE;YACAE;YACAI;YACAF;QACF,CAAA,GACA;QAACK;QAAOX;QAAQE;QAAQE;QAAUI;QAAgBF;KAAa;IAGjE,qBACE,KAACb;QAAoBqB,OAAOF;kBAC1B,cAAA,KAACG;YAAO,GAAGL,SAAS;YAAEb,KAAKA;YAAKC,WAAWR,IAAI,aAAaQ;sBACzDC;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/TableBody.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { type TableConfig, type TableConfigContext } from \"./types.js\";\n\nexport interface TableBodyProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Omit<TableConfig, \"header\"> {}\n\n/**\n * **Client Component**\n *\n * Creates a `<tbody>` element that also allows for overriding all the child\n * `TableCell` components with additional styling behavior.\n */\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  function TableBody(props, ref) {\n    const {\n      className,\n      children,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propLineWrap,\n      disableHover: propDisableHover,\n      disableBorders: propDisableBorders,\n      ...remaining\n    } = props;\n\n    // update the table configuration with the custom overrides for the `<thead>`\n    const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n      useTableConfig({\n        hAlign: propHAlign,\n        vAlign: propVAlign,\n        lineWrap: propLineWrap,\n        disableHover: propDisableHover,\n        disableBorders: propDisableBorders,\n      });\n\n    const configuration = useMemo<TableConfigContext>(\n      () => ({\n        header: false,\n        dense,\n        hAlign,\n        vAlign,\n        lineWrap,\n        disableBorders,\n        disableHover,\n      }),\n      [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n    );\n\n    return (\n      <TableConfigProvider value={configuration}>\n        <tbody {...remaining} ref={ref} className={cnb(\"rmd-tbody\", className)}>\n          {children}\n        </tbody>\n      </TableConfigProvider>\n    );\n  }\n);\n"],"names":["cnb","forwardRef","useMemo","TableConfigProvider","useTableConfig","TableBody","props","ref","className","children","hAlign","propHAlign","vAlign","propVAlign","lineWrap","propLineWrap","disableHover","propDisableHover","disableBorders","propDisableBorders","remaining","dense","configuration","header","value","tbody"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SACEC,mBAAmB,EACnBC,cAAc,QACT,kCAAkC;AAOzC;;;;;CAKC,GACD,OAAO,MAAMC,0BAAYJ,WACvB,SAASI,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,YAAY,EACtBC,cAAcC,gBAAgB,EAC9BC,gBAAgBC,kBAAkB,EAClC,GAAGC,WACJ,GAAGd;IAEJ,6EAA6E;IAC7E,MAAM,EAAEe,KAAK,EAAEX,MAAM,EAAEE,MAAM,EAAEE,QAAQ,EAAEE,YAAY,EAAEE,cAAc,EAAE,GACrEd,eAAe;QACbM,QAAQC;QACRC,QAAQC;QACRC,UAAUC;QACVC,cAAcC;QACdC,gBAAgBC;IAClB;IAEF,MAAMG,gBAAgBpB,QACpB,IAAO,CAAA;YACLqB,QAAQ;YACRF;YACAX;YACAE;YACAE;YACAI;YACAF;QACF,CAAA,GACA;QAACK;QAAOX;QAAQE;QAAQE;QAAUI;QAAgBF;KAAa;IAGjE,qBACE,KAACb;QAAoBqB,OAAOF;kBAC1B,cAAA,KAACG;YAAO,GAAGL,SAAS;YAAEb,KAAKA;YAAKC,WAAWR,IAAI,aAAaQ;sBACzDC;;;AAIT,GACA"}

package/dist/table/TableCell.d.ts

@@ -1,7 +1,7 @@
 import { type ButtonHTMLAttributes, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
-import { type SortOrder, type TableCellContentsIconRotatorProps } from "./TableCellContent.js";
-import { type TableCellConfig } from "./TableConfigurationProvider.js";
+import { type TableCellContentsIconRotatorProps } from "./TableCellContent.js";
+import { type SortOrder, type TableCellConfig } from "./types.js";
 export type TableCellAttributes = Omit<TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>, "scope">;
 /**
  * @since 6.0.0
@@ -41,6 +41,7 @@ export interface TableCellOptions extends TableCellConfig {
 /**
  * @since 6.0.0 Removed the `colSpan="100%"` support since `colSpan`
  * really only supports numbers.
+ * @since 6.0.0 Removed `disablePadding` in favor of `padding`.
  */
 export interface TableCellProps extends TableCellAttributes, TableCellOptions {
     /**

package/dist/table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type SortOrder,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport {\n  useTableConfig,\n  type TableCellConfig,\n} from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SACEC,gBAAgB,QAGX,wBAAwB;AAC/B,SACEC,cAAc,QAET,kCAAkC;AACzC,SAASC,SAAS,QAAQ,uBAAuB;AAuLjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/table/TableCell.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  type ButtonHTMLAttributes,\n  type ReactNode,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport {\n  TableCellContent,\n  type TableCellContentsIconRotatorProps,\n} from \"./TableCellContent.js\";\nimport { useTableConfig } from \"./TableConfigurationProvider.js\";\nimport { tableCell } from \"./tableCellStyles.js\";\nimport { type SortOrder, type TableCellConfig } from \"./types.js\";\n\nexport type TableCellAttributes = Omit<\n  | TdHTMLAttributes<HTMLTableCellElement>\n  | ThHTMLAttributes<HTMLTableCellElement>,\n  \"scope\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface TableCellOptions extends TableCellConfig {\n  /**\n   * This is a bit of a \"weird\" prop since all it does is apply `width: 100%` to\n   * this cell. This will make this specific cell fill the remaining width of\n   * the table (if there is any). If no cells have this prop enabled and the\n   * `fullWidth` table configuration is enabled, all cells will have an\n   * equal-sized width.\n   *\n   * @defaultValue `false`\n   */\n  grow?: boolean;\n\n  /**\n   * This prop is only valid when the `header` prop is enabled or the\n   * `TableCell` is a child of the `TableHeader` component. This will generally\n   * be used with a value of `\"row\"` if you have table headers that are at the\n   * start of each row instead of at the top of the table.\n   *\n   * @defaultValue `\"col\"`\n   */\n  scope?: \"row\" | \"col\" | \"rowgroup\" | \"colgroup\";\n\n  /**\n   *\n   * @defaultValue `false`\n   * @since 6.0.0 This prop is only a boolean.\n   */\n  sticky?: boolean;\n\n  /**\n   * @internal\n   * @defaultValue `false`\n   */\n  inputToggle?: boolean;\n}\n\n/**\n * @since 6.0.0 Removed the `colSpan=\"100%\"` support since `colSpan`\n * really only supports numbers.\n * @since 6.0.0 Removed `disablePadding` in favor of `padding`.\n */\nexport interface TableCellProps extends TableCellAttributes, TableCellOptions {\n  /**\n   * If you want to apply a sort icon for a header cell, set this prop to either\n   * `\"ascending\"` or `\"descending\"`. When you change the sort order, this prop\n   * should change as well which will cause the sort icon to rotate. The default\n   * behavior is to have the icon facing upwards and not-rotated when\n   * `\"ascending\"`, otherwise it will rotate downwards when `\"descending\"`.\n   *\n   * If this prop is set to `\"none\"`, the cell will render the clickable button\n   * in the children, just without the sort icon. This is so that the sort\n   * behavior can still be toggled for keyboard users and will be tab-focusable.\n   *\n   * @see {@link beforeChildren}\n   * @see {@link afterChildren}\n   */\n  \"aria-sort\"?: SortOrder;\n\n  /**\n   * An optional sort icon to use. This will be defaulted to the configured sort\n   * icon from the `@react-md/core` package. If you do not want the default\n   * implementation for the sort icon behavior from `react-md`, you can set this\n   * prop to `null`.\n   */\n  sortIcon?: ReactNode;\n\n  /**\n   * Boolean if the sort icon should appear after the children in the cell\n   * instead of before.\n   */\n  sortIconAfter?: boolean;\n\n  /**\n   * Boolean if the sort icon should be rotated instead of the default\n   * direction. When this is `undefined`, it will only be `true` when the\n   * `\"aria-sort\"` prop is set to `\"descending\"`. If this is not `undefined`,\n   * its boolean value will always be used.\n   */\n  sortIconRotated?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n\n  /**\n   * This can be used to apply styling or any other props to the\n   * `UnstyledButton` that surrounds the `children` when the `\"aria-sort\"` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  contentProps?: PropsWithRef<\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\n  >;\n\n  /**\n   * Any additional props to pass to the `IconRotator` when the `aria-sort` prop\n   * has been provided.\n   *\n   * @since 6.0.0\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @see {@link afterChildren} for an example.\n   * @since 6.0.0\n   */\n  beforeChildren?: ReactNode;\n\n  /**\n   * Since providing an `aria-sort` prop will wrap the `children` in an\n   * `UnstyledButton`, you can use this prop to render another button within the\n   * table cell before the main `children`.\n   *\n   * @example\n   * ```tsx\n   * import type { SortOrder } from \"@react-md/core\";\n   * import { Button, Dialog, TableCell } from \"@react-md/core\";\n   * import MoreVertIcon from \"@react-md/material-icons/MoreVertIcon\";\n   * import type { ReactElement } from \"react\";\n   * import { useState } from \"react\";\n   *\n   * interface Props {\n   *   setSort(sort: string): void;\n   *   sortKey: string;\n   *   sortOrder: SortOrder;\n   * }\n   *\n   * function Example({ sortKey, sortOrder, setSort }: Props): ReactElement {\n   *   const [visible, setVisible] = useState(false);\n   *\n   *   return (\n   *     <>\n   *       <TableCell\n   *         aria-sort={sortKey === \"example\" ? sortOrder : \"none\"}\n   *         onClick={() => setSort(\"example\")}\n   *         afterChildren={\n   *           <Button\n   *             aria-label=\"Options\"\n   *             buttonType=\"icon\"\n   *             onClick={() => {\n   *               setVisible(true)\n   *             }}\n   *           >\n   *             <MoreVertIcon />\n   *           </Button>\n   *         }\n   *       >\n   *         Example content\n   *       </TableCell>\n   *       <Dialog\n   *         aria-label=\"Options\"\n   *         visible={visible}\n   *         onRequestClose={() => setVisible(false)}\n   *       >\n   *         Pretend Content...\n   *       </Dialog>\n   *     </>\n   *   );\n   * }\n   * ```\n   *\n   * @since 6.0.0\n   */\n  afterChildren?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * Creates a `<th>` or `<td>` cell with sensible styled defaults. You can create\n * a `<th>` element by enabling the `header` prop OR having a `TableCell` as a\n * child of the `TableHeader` component.\n *\n * Note: If you have a checkbox/radio column in the `TableHeader` without any\n * labels, you will need to manually set the `header={false}` prop for that cell\n * since it is invalid to have a `<th>` without any readable content for screen\n * readers.\n */\nexport const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  function TableCell(props, ref) {\n    const {\n      \"aria-sort\": sortOrder,\n      className,\n      grow = false,\n      scope: propScope,\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      header: propHeader,\n      lineWrap: propDisableLineWrap,\n      inputToggle,\n      children,\n      beforeChildren,\n      afterChildren,\n      sticky,\n      sortIcon: propSortIcon,\n      sortIconAfter = false,\n      sortIconRotated,\n      iconRotatorProps,\n      padding = \"horizontal\",\n      contentProps,\n      ...remaining\n    } = props;\n\n    const sortIcon = getIcon(\"sort\", propSortIcon);\n\n    // Note: unlike the other usages of `useTableConfig`, the `propHeader`\n    // is not provided. This is so that `TableCheckbox` components can still\n    // be a sticky header without being rendered as a `<th>`. This also makes\n    // it so the scope can be defaulted to `col` or `row` automatically.\n    const {\n      header: inheritedHeader,\n      hAlign,\n      vAlign,\n      lineWrap,\n    } = useTableConfig({\n      hAlign: propHAlign,\n      vAlign: propVAlign,\n      lineWrap: propDisableLineWrap,\n    });\n    const header = propHeader ?? inheritedHeader;\n\n    let scope = propScope;\n    if (!scope && header) {\n      scope = !inheritedHeader && propHeader ? \"row\" : \"col\";\n    }\n\n    const Component = header ? \"th\" : \"td\";\n    return (\n      <Component\n        {...remaining}\n        ref={ref}\n        aria-sort={sortOrder === \"none\" ? undefined : sortOrder}\n        className={tableCell({\n          className,\n          grow,\n          header,\n          sticky,\n          inputToggle,\n          hAlign,\n          vAlign,\n          lineWrap: !sortOrder && lineWrap,\n          padding: sortIcon && sortOrder ? \"none\" : padding,\n          isInTableHeader: inheritedHeader,\n        })}\n        scope={scope}\n      >\n        {beforeChildren}\n        <TableCellContent\n          {...contentProps}\n          icon={sortIcon}\n          iconAfter={sortIconAfter}\n          iconRotatorProps={iconRotatorProps}\n          sortOrder={sortOrder}\n          hAlign={hAlign}\n          rotated={sortIconRotated}\n        >\n          {children}\n        </TableCellContent>\n        {afterChildren}\n      </Component>\n    );\n  }\n);\n"],"names":["forwardRef","getIcon","TableCellContent","useTableConfig","tableCell","TableCell","props","ref","sortOrder","className","grow","scope","propScope","hAlign","propHAlign","vAlign","propVAlign","header","propHeader","lineWrap","propDisableLineWrap","inputToggle","children","beforeChildren","afterChildren","sticky","sortIcon","propSortIcon","sortIconAfter","sortIconRotated","iconRotatorProps","padding","contentProps","remaining","inheritedHeader","Component","aria-sort","undefined","isInTableHeader","icon","iconAfter","rotated"],"mappings":"AAAA;;AACA,SACEA,UAAU,QAKL,QAAQ;AACf,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SACEC,gBAAgB,QAEX,wBAAwB;AAC/B,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,SAAS,QAAQ,uBAAuB;AAyLjD;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,0BAAYL,WACvB,SAASK,UAAUC,KAAK,EAAEC,GAAG;IAC3B,MAAM,EACJ,aAAaC,SAAS,EACtBC,SAAS,EACTC,OAAO,KAAK,EACZC,OAAOC,SAAS,EAChBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,QAAQC,UAAU,EAClBC,UAAUC,mBAAmB,EAC7BC,WAAW,EACXC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,MAAM,EACNC,UAAUC,YAAY,EACtBC,gBAAgB,KAAK,EACrBC,eAAe,EACfC,gBAAgB,EAChBC,UAAU,YAAY,EACtBC,YAAY,EACZ,GAAGC,WACJ,GAAG3B;IAEJ,MAAMoB,WAAWzB,QAAQ,QAAQ0B;IAEjC,sEAAsE;IACtE,wEAAwE;IACxE,yEAAyE;IACzE,oEAAoE;IACpE,MAAM,EACJV,QAAQiB,eAAe,EACvBrB,MAAM,EACNE,MAAM,EACNI,QAAQ,EACT,GAAGhB,eAAe;QACjBU,QAAQC;QACRC,QAAQC;QACRG,UAAUC;IACZ;IACA,MAAMH,SAASC,cAAcgB;IAE7B,IAAIvB,QAAQC;IACZ,IAAI,CAACD,SAASM,QAAQ;QACpBN,QAAQ,CAACuB,mBAAmBhB,aAAa,QAAQ;IACnD;IAEA,MAAMiB,YAAYlB,SAAS,OAAO;IAClC,qBACE,MAACkB;QACE,GAAGF,SAAS;QACb1B,KAAKA;QACL6B,aAAW5B,cAAc,SAAS6B,YAAY7B;QAC9CC,WAAWL,UAAU;YACnBK;YACAC;YACAO;YACAQ;YACAJ;YACAR;YACAE;YACAI,UAAU,CAACX,aAAaW;YACxBY,SAASL,YAAYlB,YAAY,SAASuB;YAC1CO,iBAAiBJ;QACnB;QACAvB,OAAOA;;YAENY;0BACD,KAACrB;gBACE,GAAG8B,YAAY;gBAChBO,MAAMb;gBACNc,WAAWZ;gBACXE,kBAAkBA;gBAClBtB,WAAWA;gBACXK,QAAQA;gBACR4B,SAASZ;0BAERP;;YAEFE;;;AAGP,GACA"}

package/dist/table/TableCellContent.d.ts

@@ -1,7 +1,6 @@
 import { type ButtonHTMLAttributes, type ReactNode } from "react";
 import { type IconRotatorProps } from "../icon/IconRotator.js";
-import { type TableCellHorizontalAlignment } from "./TableConfigurationProvider.js";
-export type SortOrder = "ascending" | "descending" | "none" | "other";
+import { type SortOrder, type TableCellHorizontalAlignment } from "./types.js";
 /**
  * @since 6.0.0
  */

package/dist/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type TableCellHorizontalAlignment } from \"./TableConfigurationProvider.js\";\n\nexport type SortOrder = \"ascending\" | \"descending\" | \"none\" | \"other\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAmDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type SortOrder, type TableCellHorizontalAlignment } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAiDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}

package/dist/table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type TdHTMLAttributes } from \"react\";\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the checkbox that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableCheckbox,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n *   useCheckboxGroup\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n    \"aria-controls\": ariaControls,\n    name,\n    icon,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      inputToggle\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Checkbox\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-controls={ariaControls}\n        name={name}\n        icon={icon}\n        iconProps={iconProps}\n        iconStyle={iconStyle}\n        iconClassName={iconClassName}\n        checkedIcon={checkedIcon}\n        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,WAAW;QACXH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, type TdHTMLAttributes } from \"react\";\nimport { Checkbox } from \"../form/Checkbox.js\";\nimport { type CheckboxProps } from \"../form/InputToggle.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport type TableCheckboxSupportedCheckboxProps = Pick<\n  CheckboxProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"indeterminateIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"indeterminate\"\n  | \"aria-controls\"\n>;\n\n/**\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport interface TableCheckboxProps\n  extends TableCheckboxTdHTMLAttributes,\n    TableCheckboxSupportedCheckboxProps {\n  /**\n   * @defaultValue `!props[\"aria-labelledby\"] ? \"Select Row\" : undefined`\n   */\n  \"aria-label\"?: string;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /**\n   * This allows you to override any props for the checkbox that are not\n   * configurable as top-level props.\n   *\n   * @example Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Client Component**\n * The `TableCheckbox` is used to render a `Checkbox` within a `TableCell` by applying\n * some minimal styles.\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableCheckbox,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n *   useCheckboxGroup\n * } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * const rows = [\n *   { name: \"Frozen Yogurt\", type: \"Ice Cream\" },\n *   { name: \"Ice cream sandwich\", type: \"Ice Cream\" },\n *   { name: \"Eclair\", type: \"Pastry\" },\n *   // ...other content\n * ] as const;\n *\n * function Example(): ReactElement {\n *   const { getCheckboxProps, getIndeterminateProps } = useCheckboxGroup({\n *     values: rows.map(({ name }) => name),\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCheckbox {...getIndeterminateProps()} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const checkboxProps = getCheckboxProps(name);\n *             const { checked, onChange } = checkboxProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableCheckbox {...checkboxProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0 The `id` prop is no longer required since the checkbox's id\n * will automatically be generated as `\"checkbox\" + useId()`. Use the {@link checkboxProps}\n * to set an `id` manually for the checkbox.\n * @since 6.0.0 The `cellId` prop was removed. Use the `id` prop instead.\n * @since 6,0.0 The default `aria-label` was changed from\n * `\"Toggle Row Selection\"` to `\"Select Row\"`.\n */\nexport const TableCheckbox = forwardRef<\n  HTMLTableCellElement,\n  TableCheckboxProps\n>(function TableCheckbox(props, ref) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel = !ariaLabelledBy ? \"Select Row\" : undefined,\n    \"aria-controls\": ariaControls,\n    name,\n    icon,\n    iconProps,\n    iconStyle,\n    iconClassName,\n    checkedIcon,\n    indeterminateIcon,\n    value,\n    checked,\n    onChange,\n    defaultChecked,\n    indeterminate,\n    checkboxProps,\n    onClick = noop,\n    ...remaining\n  } = props;\n\n  return (\n    <TableCell\n      {...remaining}\n      ref={ref}\n      header={false}\n      inputToggle\n      onClick={(event) => {\n        event.stopPropagation();\n        onClick(event);\n      }}\n    >\n      <Checkbox\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-controls={ariaControls}\n        name={name}\n        icon={icon}\n        iconProps={iconProps}\n        iconStyle={iconStyle}\n        iconClassName={iconClassName}\n        checkedIcon={checkedIcon}\n        indeterminateIcon={indeterminateIcon}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        onChange={onChange}\n        indeterminate={indeterminate}\n        {...checkboxProps}\n      />\n    </TableCell>\n  );\n});\n"],"names":["forwardRef","Checkbox","TableCell","noop","TableCheckbox","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","indeterminateIcon","value","checked","onChange","defaultChecked","indeterminate","checkboxProps","onClick","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAmEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEC,GACD,OAAO,MAAMC,8BAAgBJ,WAG3B,SAASI,cAAcC,KAAK,EAAEC,GAAG;IACjC,MAAM,EACJ,mBAAmBC,cAAc,EACjC,cAAcC,YAAY,CAACD,iBAAiB,eAAeE,SAAS,EACpE,iBAAiBC,YAAY,EAC7BC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,aAAa,EACbC,UAAUrB,IAAI,EACd,GAAGsB,WACJ,GAAGpB;IAEJ,qBACE,KAACH;QACE,GAAGuB,SAAS;QACbnB,KAAKA;QACLoB,QAAQ;QACRC,WAAW;QACXH,SAAS,CAACI;YACRA,MAAMC,eAAe;YACrBL,QAAQI;QACV;kBAEA,cAAA,KAAC3B;YACC6B,cAAYtB;YACZuB,mBAAiBxB;YACjByB,iBAAetB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,mBAAmBA;YACnBC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBD,UAAUA;YACVE,eAAeA;YACd,GAAGC,aAAa;;;AAIzB,GAAG"}

package/dist/table/TableConfigurationProvider.d.ts

@@ -1,77 +1,5 @@
 /// <reference types="react" />
-export interface TableRowConfiguration {
-    /**
-     * Set to `true` if rows should no longer change background color while
-     * hovered.
-     *
-     * @defaultValue `false`
-     */
-    disableHover?: boolean;
-    /**
-     * Set to `true` if the rows in the `TableBody` should no longer have borders
-     * applied.
-     *
-     * @defaultValue `false`
-     */
-    disableBorders?: boolean;
-}
-/**
- * The horizontal alignment for the content within a cell.
- *
- * Note: Table default behavior is to align to the left.
- */
-export type TableCellHorizontalAlignment = "left" | "center" | "right";
-/**
- * The vertical alignment for the content within a cell.
- *
- * Note: When this is set to `"top"` or `"bottom"`, `padding-top` or
- * `padding-bottom` will also be applied due to how styling tables work.
- */
-export type TableCellVerticalAlignment = "top" | "middle" | "bottom";
-export interface TableCellConfiguration {
-    hAlign?: TableCellHorizontalAlignment;
-    vAlign?: TableCellVerticalAlignment;
-    /**
-     * Set this to `true` to allow `TableCell` content to line wrap.
-     *
-     * @defaultValue `false`
-     */
-    lineWrap?: boolean;
-}
-/**
- * @internal
- */
-export interface TableCellConfig extends TableCellConfiguration {
-    /**
-     * Boolean if all the `TableCell` components should be rendered as a `<th>`
-     * instead of a `<td>`. This is really just a convenience prop for the
-     * `TableHeader` component so the user of `react-md` doesn't need to keep
-     * setting the `type="th"` fot the `TableCell` if using the low-level
-     * components.
-     *
-     * @internal
-     */
-    header?: boolean;
-}
-export interface TableConfig extends TableRowConfiguration, TableCellConfig {
-    /**
-     * Set this to `true` to decrease the height of all cells within the table.
-     *
-     * @defaultValue `false`
-     */
-    dense?: boolean;
-}
-export interface TableConfiguration extends TableConfig {
-    /**
-     * Set this to `true` to allow the table to span the full width of the
-     * container element instead of having the width be determined by the content
-     * within the table.
-     *
-     * @defaultValue `false`
-     */
-    fullWidth?: boolean;
-}
-export type TableConfigContext = Required<TableConfig>;
+import { type TableConfig, type TableConfigContext } from "./types.js";
 /**
  * An internal hook for getting the current table configuration in child
  * components for the table. This will use the inherited table configuration

package/dist/table/TableConfigurationProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableConfigurationProvider.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\n\n// interfaces that are \"public\" should be the full word `Configuration` while\n// the private/internal should just be `Config`. \"Great\" naming convention!\n\nexport interface TableRowConfiguration {\n  /**\n   * Set to `true` if rows should no longer change background color while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  disableHover?: boolean;\n\n  /**\n   * Set to `true` if the rows in the `TableBody` should no longer have borders\n   * applied.\n   *\n   * @defaultValue `false`\n   */\n  disableBorders?: boolean;\n}\n\n/**\n * The horizontal alignment for the content within a cell.\n *\n * Note: Table default behavior is to align to the left.\n */\nexport type TableCellHorizontalAlignment = \"left\" | \"center\" | \"right\";\n\n/**\n * The vertical alignment for the content within a cell.\n *\n * Note: When this is set to `\"top\"` or `\"bottom\"`, `padding-top` or\n * `padding-bottom` will also be applied due to how styling tables work.\n */\nexport type TableCellVerticalAlignment = \"top\" | \"middle\" | \"bottom\";\n\nexport interface TableCellConfiguration {\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /**\n   * Set this to `true` to allow `TableCell` content to line wrap.\n   *\n   * @defaultValue `false`\n   */\n  lineWrap?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface TableCellConfig extends TableCellConfiguration {\n  /**\n   * Boolean if all the `TableCell` components should be rendered as a `<th>`\n   * instead of a `<td>`. This is really just a convenience prop for the\n   * `TableHeader` component so the user of `react-md` doesn't need to keep\n   * setting the `type=\"th\"` fot the `TableCell` if using the low-level\n   * components.\n   *\n   * @internal\n   */\n  header?: boolean;\n}\n\nexport interface TableConfig extends TableRowConfiguration, TableCellConfig {\n  /**\n   * Set this to `true` to decrease the height of all cells within the table.\n   *\n   * @defaultValue `false`\n   */\n  dense?: boolean;\n}\n\nexport interface TableConfiguration extends TableConfig {\n  /**\n   * Set this to `true` to allow the table to span the full width of the\n   * container element instead of having the width be determined by the content\n   * within the table.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\nexport type TableConfigContext = Required<TableConfig>;\n\nconst context = createContext<TableConfigContext>({\n  dense: false,\n  header: false,\n  hAlign: \"left\",\n  vAlign: \"middle\",\n  lineWrap: false,\n  disableHover: false,\n  disableBorders: false,\n});\n\n/**\n * An internal hook for getting the current table configuration in child\n * components for the table. This will use the inherited table configuration\n * context if the prop value is `undefined`.\n *\n * @internal\n */\nexport function useTableConfig(options: TableConfig): TableConfigContext {\n  const inherited = useContext(context);\n  const dense = options.dense ?? inherited.dense;\n  const header = options.header ?? inherited.header;\n  const hAlign = options.hAlign ?? inherited.hAlign;\n  const vAlign = options.vAlign ?? inherited.vAlign;\n  const lineWrap = options.lineWrap ?? inherited.lineWrap;\n  const disableHover = options.disableHover ?? inherited.disableHover;\n  const disableBorders = options.disableBorders ?? inherited.disableBorders;\n\n  return {\n    dense,\n    header,\n    hAlign,\n    vAlign,\n    lineWrap,\n    disableHover,\n    disableBorders,\n  };\n}\n\n/**\n * **Client Component**\n *\n * @internal\n */\nexport const { Provider: TableConfigProvider } = context;\n"],"names":["createContext","useContext","context","dense","header","hAlign","vAlign","lineWrap","disableHover","disableBorders","useTableConfig","options","inherited","Provider","TableConfigProvider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAwFlD,MAAMC,wBAAUF,cAAkC;IAChDG,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,cAAc;IACdC,gBAAgB;AAClB;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB;IACjD,MAAMC,YAAYX,WAAWC;IAC7B,MAAMC,QAAQQ,QAAQR,KAAK,IAAIS,UAAUT,KAAK;IAC9C,MAAMC,SAASO,QAAQP,MAAM,IAAIQ,UAAUR,MAAM;IACjD,MAAMC,SAASM,QAAQN,MAAM,IAAIO,UAAUP,MAAM;IACjD,MAAMC,SAASK,QAAQL,MAAM,IAAIM,UAAUN,MAAM;IACjD,MAAMC,WAAWI,QAAQJ,QAAQ,IAAIK,UAAUL,QAAQ;IACvD,MAAMC,eAAeG,QAAQH,YAAY,IAAII,UAAUJ,YAAY;IACnE,MAAMC,iBAAiBE,QAAQF,cAAc,IAAIG,UAAUH,cAAc;IAEzE,OAAO;QACLN;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAM,EAAEI,UAAUC,mBAAmB,EAAE,GAAGZ,QAAQ"}
+{"version":3,"sources":["../../src/table/TableConfigurationProvider.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext } from \"react\";\nimport { type TableConfig, type TableConfigContext } from \"./types.js\";\n\nconst context = createContext<TableConfigContext>({\n  dense: false,\n  header: false,\n  hAlign: \"left\",\n  vAlign: \"middle\",\n  lineWrap: false,\n  disableHover: false,\n  disableBorders: false,\n});\n\n/**\n * An internal hook for getting the current table configuration in child\n * components for the table. This will use the inherited table configuration\n * context if the prop value is `undefined`.\n *\n * @internal\n */\nexport function useTableConfig(options: TableConfig): TableConfigContext {\n  const inherited = useContext(context);\n  const dense = options.dense ?? inherited.dense;\n  const header = options.header ?? inherited.header;\n  const hAlign = options.hAlign ?? inherited.hAlign;\n  const vAlign = options.vAlign ?? inherited.vAlign;\n  const lineWrap = options.lineWrap ?? inherited.lineWrap;\n  const disableHover = options.disableHover ?? inherited.disableHover;\n  const disableBorders = options.disableBorders ?? inherited.disableBorders;\n\n  return {\n    dense,\n    header,\n    hAlign,\n    vAlign,\n    lineWrap,\n    disableHover,\n    disableBorders,\n  };\n}\n\n/**\n * **Client Component**\n *\n * @internal\n */\nexport const { Provider: TableConfigProvider } = context;\n"],"names":["createContext","useContext","context","dense","header","hAlign","vAlign","lineWrap","disableHover","disableBorders","useTableConfig","options","inherited","Provider","TableConfigProvider"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAGlD,MAAMC,wBAAUF,cAAkC;IAChDG,OAAO;IACPC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,cAAc;IACdC,gBAAgB;AAClB;AAEA;;;;;;CAMC,GACD,OAAO,SAASC,eAAeC,OAAoB;IACjD,MAAMC,YAAYX,WAAWC;IAC7B,MAAMC,QAAQQ,QAAQR,KAAK,IAAIS,UAAUT,KAAK;IAC9C,MAAMC,SAASO,QAAQP,MAAM,IAAIQ,UAAUR,MAAM;IACjD,MAAMC,SAASM,QAAQN,MAAM,IAAIO,UAAUP,MAAM;IACjD,MAAMC,SAASK,QAAQL,MAAM,IAAIM,UAAUN,MAAM;IACjD,MAAMC,WAAWI,QAAQJ,QAAQ,IAAIK,UAAUL,QAAQ;IACvD,MAAMC,eAAeG,QAAQH,YAAY,IAAII,UAAUJ,YAAY;IACnE,MAAMC,iBAAiBE,QAAQF,cAAc,IAAIG,UAAUH,cAAc;IAEzE,OAAO;QACLN;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAM,EAAEI,UAAUC,mBAAmB,EAAE,GAAGZ,QAAQ"}

package/dist/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  TableContainerProvider,\n  type TableContainerContext,\n} from \"./TableContainerProvider.js\";\nimport { tableContainer } from \"./tableContainerStyles.js\";\n\nexport type TableContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * **Client Component**\n *\n * An extremely \"useful\" component that should be used with the `Table`\n * component if you want to make a responsive table within the page. If you\n * don't want to use this component, you can just apply `overflow: auto` to a\n * parent element of the table.\n */\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n  function TableContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n    const [nodeRef, refCallback] = useEnsuredRef(ref);\n\n    const value = useMemo<TableContainerContext>(\n      () => ({\n        exists: true,\n        containerRef: nodeRef,\n      }),\n      [nodeRef]\n    );\n\n    return (\n      <TableContainerProvider value={value}>\n        <div\n          {...remaining}\n          ref={refCallback}\n          className={tableContainer({ className })}\n        >\n          {children}\n        </div>\n      </TableContainerProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","useEnsuredRef","TableContainerProvider","tableContainer","TableContainer","props","ref","className","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SACEC,sBAAsB,QAEjB,8BAA8B;AACrC,SAASC,cAAc,QAAQ,4BAA4B;AAI3D;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBL,WAC5B,SAASK,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,MAAM,CAACK,SAASC,YAAY,GAAGV,cAAcK;IAE7C,MAAMM,QAAQZ,QACZ,IAAO,CAAA;YACLa,QAAQ;YACRC,cAAcJ;QAChB,CAAA,GACA;QAACA;KAAQ;IAGX,qBACE,KAACR;QAAuBU,OAAOA;kBAC7B,cAAA,KAACG;YACE,GAAGN,SAAS;YACbH,KAAKK;YACLJ,WAAWJ,eAAe;gBAAEI;YAAU;sBAErCC;;;AAIT,GACA"}
+{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  TableContainerProvider,\n  type TableContainerContext,\n} from \"./TableContainerProvider.js\";\nimport { tableContainer } from \"./tableContainerStyles.js\";\n\nexport type TableContainerProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * **Client Component**\n *\n * An extremely \"useful\" component that should be used with the `Table`\n * component if you want to make a responsive table within the page. If you\n * don't want to use this component, you can just apply `overflow: auto` to a\n * parent element of the table.\n */\nexport const TableContainer = forwardRef<HTMLDivElement, TableContainerProps>(\n  function TableContainer(props, ref) {\n    const { className, children, ...remaining } = props;\n    const [nodeRef, refCallback] = useEnsuredRef(ref);\n\n    const value = useMemo<TableContainerContext>(\n      () => ({\n        exists: true,\n        containerRef: nodeRef,\n      }),\n      [nodeRef]\n    );\n\n    return (\n      <TableContainerProvider value={value}>\n        <div\n          {...remaining}\n          ref={refCallback}\n          className={tableContainer({ className })}\n        >\n          {children}\n        </div>\n      </TableContainerProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useMemo","useEnsuredRef","TableContainerProvider","tableContainer","TableContainer","props","ref","className","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"mappings":"AAAA;;AACA,SAASA,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SACEC,sBAAsB,QAEjB,8BAA8B;AACrC,SAASC,cAAc,QAAQ,4BAA4B;AAI3D;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBL,WAC5B,SAASK,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,MAAM,CAACK,SAASC,YAAY,GAAGV,cAAcK;IAE7C,MAAMM,QAAQZ,QACZ,IAAO,CAAA;YACLa,QAAQ;YACRC,cAAcJ;QAChB,CAAA,GACA;QAACA;KAAQ;IAGX,qBACE,KAACR;QAAuBU,OAAOA;kBAC7B,cAAA,KAACG;YACE,GAAGN,SAAS;YACbH,KAAKK;YACLJ,WAAWJ,eAAe;gBAAEI;YAAU;sBAErCC;;;AAIT,GACA"}

package/dist/table/TableContainerProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TableContainerContext {\n  exists: boolean;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nconst context = createContext<Readonly<TableContainerContext>>({\n  exists: false,\n  containerRef: { current: null },\n});\ncontext.displayName = \"TableContainer\";\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: TableContainerProvider } = context;\n\n/**\n * This is used to implement the sticky header and footer intersection observer\n * behavior.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useTableContainer(): Readonly<TableContainerContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","exists","containerRef","current","displayName","Provider","TableContainerProvider","useTableContainer"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAwB,QAAQ;AAWlE,MAAMC,wBAAUF,cAA+C;IAC7DG,QAAQ;IACRC,cAAc;QAAEC,SAAS;IAAK;AAChC;AACAH,QAAQI,WAAW,GAAG;AAEtB;;;;;CAKC,GACD,OAAO,MAAM,EAAEC,UAAUC,sBAAsB,EAAE,GAAGN,QAAQ;AAE5D;;;;;;CAMC,GACD,OAAO,SAASO;IACd,OAAOR,WAAWC;AACpB"}
+{"version":3,"sources":["../../src/table/TableContainerProvider.tsx"],"sourcesContent":["\"use client\";\nimport { createContext, useContext, type RefObject } from \"react\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TableContainerContext {\n  exists: boolean;\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nconst context = createContext<Readonly<TableContainerContext>>({\n  exists: false,\n  containerRef: { current: null },\n});\ncontext.displayName = \"TableContainer\";\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const { Provider: TableContainerProvider } = context;\n\n/**\n * This is used to implement the sticky header and footer intersection observer\n * behavior.\n *\n * @internal\n * @since 6.0.0\n */\nexport function useTableContainer(): Readonly<TableContainerContext> {\n  return useContext(context);\n}\n"],"names":["createContext","useContext","context","exists","containerRef","current","displayName","Provider","TableContainerProvider","useTableContainer"],"mappings":"AAAA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAwB,QAAQ;AAWlE,MAAMC,wBAAUF,cAA+C;IAC7DG,QAAQ;IACRC,cAAc;QAAEC,SAAS;IAAK;AAChC;AACAH,QAAQI,WAAW,GAAG;AAEtB;;;;;CAKC,GACD,OAAO,MAAM,EAAEC,UAAUC,sBAAsB,EAAE,GAAGN,QAAQ;AAE5D;;;;;;CAMC,GACD,OAAO,SAASO;IACd,OAAOR,WAAWC;AACpB"}

package/dist/table/TableFooter.d.ts

@@ -1,28 +1,19 @@
 import { type HTMLAttributes } from "react";
-import { type TableCellConfig } from "./TableConfigurationProvider.js";
-import { type IsStickyTableSectionActive, type TableStickySectionProps } from "./types.js";
-/**
- * @since 6.0.0
- */
-export declare const isTableFooterStickyActive: IsStickyTableSectionActive;
-/**
- * @since 6.0.0 Added support for "sticky-active" state.
- */
-export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement>, Pick<TableCellConfig, "lineWrap">, TableStickySectionProps {
+import { type TableSectionConfiguration } from "./types.js";
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement>, TableSectionConfiguration {
     /**
-     * This is a rename of the `disableHover` of the `TableConfig` since table
-     * footers are not hoverable by default. This prop can be enabled to add the
-     * row hover color within table footers, but it is not really recommended.
+     * NOTE: It is recommended to use the `StickyTableSection` component instead
+     * of enabling this prop since it supports dynamically adding styles while the
+     * header covering table rows.
+     *
+     * Set this to `true` to enable the sticky behavior.
      *
      * @defaultValue `false`
      */
-    hoverable?: boolean;
-    /** @defaultValue {@link isTableFooterStickyActive} */
-    isStickyActive?: IsStickyTableSectionActive;
+    sticky?: boolean;
 }
 /**
  * **Client Component**
- * TODO: Create separate useStickyTableFooter + StickyTableFooter component
  *
  * Creates a `<tfoot>` element with some basic styles. This component will
  * disable the hover effect and line wrapping by default, but the hover effect

package/dist/table/TableFooter.js

@@ -1,96 +1,33 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, useState } from "react";
-import { useEnsuredRef } from "../useEnsuredRef.js";
-import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
-import { useTableContainer } from "./TableContainerProvider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { TableConfigProvider } from "./TableConfigurationProvider.js";
 import { tableFooter } from "./tableFooterStyles.js";
-/**
- * @since 6.0.0
- */ export const isTableFooterStickyActive = (entry, isInTableContainer)=>{
-    const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
-    if (isInTableContainer) {
-        return !isIntersecting;
-    }
-    return intersectionRatio < 1 && boundingClientRect.top >= 0;
-};
+import { useTableSectionConfig } from "./useTableSectionConfig.js";
 /**
  * **Client Component**
- * TODO: Create separate useStickyTableFooter + StickyTableFooter component
  *
  * Creates a `<tfoot>` element with some basic styles. This component will
  * disable the hover effect and line wrapping by default, but the hover effect
  * and line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
  */ export const TableFooter = /*#__PURE__*/ forwardRef(function TableFooter(props, propRef) {
-    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableFooterStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
-    // update the table configuration with the custom overrides for the `<tfoot>`
-    const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
-        lineWrap: propLineWrap,
-        disableHover: !hoverable
-    });
-    const configuration = useMemo(()=>({
-            dense,
-            header: false,
-            hAlign,
-            vAlign,
-            lineWrap,
-            disableBorders,
-            disableHover
-        }), [
-        dense,
-        hAlign,
-        vAlign,
+    const { className, hoverable, lineWrap, children, ...remaining } = props;
+    const config = useTableSectionConfig({
+        type: "footer",
         lineWrap,
-        disableBorders,
-        disableHover
-    ]);
-    const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);
-    const { exists, containerRef } = useTableContainer();
-    const [stickyActive, setStickyActive] = useState(false);
-    const targetRef = useIntersectionObserver({
-        ref: exists ? undefined : tfootRefCallback,
-        root: containerRef,
-        disabled: !sticky || disableStickyStyles,
-        threshold: exists ? 0 : 1,
-        getRootMargin: useCallback(()=>{
-            const topOffset = exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;
-            return `0px 0px -${topOffset}px 0px`;
-        }, [
-            exists,
-            tfootRef
-        ]),
-        onUpdate: useCallback(([entry])=>{
-            setStickyActive(isStickyActive(entry, exists));
-        }, [
-            exists,
-            isStickyActive
-        ]),
-        // allow the user defined sticky options to override the default behavior
-        ...stickyOptions
+        hoverable
     });
-    return /*#__PURE__*/ _jsxs(TableConfigProvider, {
-        value: configuration,
-        children: [
-            exists && sticky && !disableStickyStyles && // rendering a `<tbody>` since it is valid to have 0-many in a table
-            // https://html.spec.whatwg.org/multipage/tables.html#the-table-element
-            /*#__PURE__*/ _jsx("tbody", {
-                "aria-hidden": true,
-                ref: targetRef
+    return /*#__PURE__*/ _jsx(TableConfigProvider, {
+        value: config,
+        children: /*#__PURE__*/ _jsx("tfoot", {
+            ...remaining,
+            ref: propRef,
+            className: tableFooter({
+                className
             }),
-            /*#__PURE__*/ _jsx("tfoot", {
-                ...remaining,
-                ref: exists ? tfootRefCallback : targetRef,
-                className: tableFooter({
-                    className,
-                    sticky,
-                    stickyActive,
-                    stickyActiveClassName
-                }),
-                children: children
-            })
-        ]
+            children: children
+        })
     });
 });