@react-md/core 1.0.0-next.0 → 1.0.0-next.1

package/dist/table/TableCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCheckbox.tsx"],"sourcesContent":["import { 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 * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @remarks \\@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 * @remarks\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\n   * Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @remarks \\@since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { useCheckboxGroup } from \"@react-md/core\";\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableCheckbox,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\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 * @remarks\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      checkbox\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","checkbox","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":";AAAA,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAqEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,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,QAAQ;QACRH,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":["import { 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 * @remarks \\@since 6.0.0\n */\nexport type TableCheckboxTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\"\n>;\n\n/**\n * @remarks \\@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 * @remarks\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\n   * Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableCheckboxSupportedCheckboxProps}\n   * @remarks \\@since 6.0.0\n   */\n  checkboxProps?: PropsWithRef<CheckboxProps, HTMLInputElement>;\n}\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * @example\n * 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 * @remarks\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,SAASA,UAAU,QAA+B,QAAQ;AAC1D,SAASC,QAAQ,QAAQ,sBAAsB;AAG/C,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AAqEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyEC,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/TableContainer.d.ts

@@ -1,10 +1,4 @@
 import { type HTMLAttributes } from "react";
-/**
- * @remarks \@since 6.0.0
- */
-export declare function tableContainer({ className }: {
-    className?: string;
-}): string;
 export type TableContainerProps = HTMLAttributes<HTMLDivElement>;
 /**
  * **Client Component**

package/dist/table/TableContainer.js

@@ -1,14 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useMemo } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { TableContainerProvider } from "./TableContainerProvider.js";
-/**
- * @remarks \@since 6.0.0
- */ export function tableContainer({ className }) {
-    return cnb("rmd-table-container", className);
-}
+import { tableContainer } from "./tableContainerStyles.js";
 /**
  * **Client Component**
  *

package/dist/table/TableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableContainer.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport {\n  TableContainerProvider,\n  type TableContainerContext,\n} from \"./TableContainerProvider.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableContainer({ className }: { className?: string }): string {\n  return cnb(\"rmd-table-container\", className);\n}\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":["cnb","forwardRef","useMemo","useEnsuredRef","TableContainerProvider","tableContainer","className","TableContainer","props","ref","children","remaining","nodeRef","refCallback","value","exists","containerRef","div"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,EAAEC,OAAO,QAA6B,QAAQ;AACjE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SACEC,sBAAsB,QAEjB,8BAA8B;AAErC;;CAEC,GACD,OAAO,SAASC,eAAe,EAAEC,SAAS,EAA0B;IAClE,OAAON,IAAI,uBAAuBM;AACpC;AAIA;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBN,WAC5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEH,SAAS,EAAEI,QAAQ,EAAE,GAAGC,WAAW,GAAGH;IAC9C,MAAM,CAACI,SAASC,YAAY,GAAGV,cAAcM;IAE7C,MAAMK,QAAQZ,QACZ,IAAO,CAAA;YACLa,QAAQ;YACRC,cAAcJ;QAChB,CAAA,GACA;QAACA;KAAQ;IAGX,qBACE,KAACR;QAAuBU,OAAOA;kBAC7B,cAAA,KAACG;YACE,GAAGN,SAAS;YACbF,KAAKI;YACLP,WAAWD,eAAe;gBAAEC;YAAU;sBAErCI;;;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/TableFooter.d.ts

@@ -1,6 +1,10 @@
 import { type HTMLAttributes } from "react";
 import { type TableCellConfig } from "./TableConfigurationProvider.js";
-import { type TableStickySectionProps } from "./types.js";
+import { type IsStickyTableSectionActive, type TableStickySectionProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const isTableFooterStickyActive: IsStickyTableSectionActive;
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -13,6 +17,8 @@ export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement
      * @defaultValue `false`
      */
     hoverable?: boolean;
+    /** @defaultValue {@link isTableFooterStickyActive} */
+    isStickyActive?: IsStickyTableSectionActive;
 }
 /**
  * **Client Component**

package/dist/table/TableFooter.js

@@ -1,13 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-const styles = bem("rmd-tfoot");
+import { tableFooter } from "./tableFooterStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export const isTableFooterStickyActive = (entry, isInTableContainer)=>{
+    const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
+    if (isInTableContainer) {
+        return !isIntersecting;
+    }
+    return intersectionRatio < 1 && boundingClientRect.top >= 0;
+};
 /**
  * **Client Component**
  * TODO: Create separate useStickyTableFooter + StickyTableFooter component
@@ -17,7 +24,7 @@ const styles = bem("rmd-tfoot");
  * 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, disableStickyStyles = false, ...remaining } = props;
+    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,
@@ -55,15 +62,7 @@ const styles = bem("rmd-tfoot");
             tfootRef
         ]),
         onUpdate: useCallback(([entry])=>{
-            if (typeof isStickyActive === "function") {
-                return isStickyActive(entry);
-            }
-            const { intersectionRatio, boundingClientRect, isIntersecting } = entry;
-            if (exists) {
-                setStickyActive(!isIntersecting);
-                return;
-            }
-            setStickyActive(intersectionRatio < 1 && boundingClientRect.top >= 0);
+            setStickyActive(isStickyActive(entry, exists));
         }, [
             exists,
             isStickyActive
@@ -83,10 +82,12 @@ const styles = bem("rmd-tfoot");
             /*#__PURE__*/ _jsx("tfoot", {
                 ...remaining,
                 ref: exists ? tfootRefCallback : targetRef,
-                className: cnb(styles({
+                className: tableFooter({
+                    className,
                     sticky,
-                    "sticky-active": stickyActive
-                }), className),
+                    stickyActive,
+                    stickyActiveClassName
+                }),
                 children: children
             })
         ]

package/dist/table/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { type TableStickySectionProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-tfoot\");\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * footers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table footers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableFooter + StickyTableFooter component\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  TableFooterProps\n>(function TableFooter(props, propRef) {\n  const {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive,\n    disableStickyStyles = false,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: false,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver<\n    HTMLTableSectionElement | HTMLElement\n  >({\n    ref: exists ? undefined : tfootRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const topOffset =\n        exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;\n\n      return `0px 0px -${topOffset}px 0px`;\n    }, [exists, tfootRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        if (typeof isStickyActive === \"function\") {\n          return isStickyActive(entry);\n        }\n\n        const { intersectionRatio, boundingClientRect, isIntersecting } = entry;\n        if (exists) {\n          setStickyActive(!isIntersecting);\n          return;\n        }\n\n        setStickyActive(intersectionRatio < 1 && boundingClientRect.top >= 0);\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n      <tfoot\n        {...remaining}\n        ref={exists ? tfootRefCallback : targetRef}\n        className={cnb(\n          styles({\n            sticky,\n            \"sticky-active\": stickyActive,\n          }),\n          className\n        )}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["cnb","forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","bem","TableConfigProvider","useTableConfig","useTableContainer","styles","TableFooter","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","tfootRef","tfootRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","topOffset","current","offsetHeight","onUpdate","entry","intersectionRatio","boundingClientRect","isIntersecting","top","value","tbody","aria-hidden","tfoot"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAGhE,MAAMC,SAASJ,IAAI;AAmBnB;;;;;;;;CAQC,GACD,OAAO,MAAMK,4BAAcX,WAGzB,SAASW,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,cAAc,EACdC,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGX;IAEJ,6EAA6E;IAC7E,MAAM,EAAEY,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEV,QAAQ,EAAEW,YAAY,EAAEC,cAAc,EAAE,GACrEpB,eAAe;QACbQ,UAAUC;QACVU,cAAc,CAACZ;IACjB;IAEF,MAAMc,gBAAgB3B,QACpB,IAAO,CAAA;YACLsB;YACAM,QAAQ;YACRL;YACAC;YACAV;YACAY;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQV;QAAUY;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAG5B,cAAcS;IACnD,MAAM,EAAEoB,MAAM,EAAEC,YAAY,EAAE,GAAGzB;IACjC,MAAM,CAAC0B,cAAcC,gBAAgB,GAAGjC,SAAS;IACjD,MAAMkC,YAAYhC,wBAEhB;QACAiC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACtB,UAAUG;QACrBoB,WAAWT,SAAS,IAAI;QACxBU,eAAe1C,YAAY;YACzB,MAAM2C,YACJX,UAAUF,SAASc,OAAO,GAAGd,SAASc,OAAO,CAACC,YAAY,GAAG,IAAI;YAEnE,OAAO,CAAC,SAAS,EAAEF,UAAU,MAAM,CAAC;QACtC,GAAG;YAACX;YAAQF;SAAS;QACrBgB,UAAU9C,YACR,CAAC,CAAC+C,MAAM;YACN,IAAI,OAAO3B,mBAAmB,YAAY;gBACxC,OAAOA,eAAe2B;YACxB;YAEA,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,cAAc,EAAE,GAAGH;YAClE,IAAIf,QAAQ;gBACVG,gBAAgB,CAACe;gBACjB;YACF;YAEAf,gBAAgBa,oBAAoB,KAAKC,mBAAmBE,GAAG,IAAI;QACrE,GACA;YAACnB;YAAQZ;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACb;QAAoB8C,OAAOxB;;YACzBI,UAAUd,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAACgC;gBAAMC,aAAW;gBAACjB,KAAKD;;0BAE1B,KAACmB;gBACE,GAAGjC,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCvB,WAAWf,IACTW,OAAO;oBACLS;oBACA,iBAAiBgB;gBACnB,IACArB;0BAGDI;;;;AAIT,GAAG"}
+{"version":3,"sources":["../../src/table/TableFooter.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { tableFooter } from \"./tableFooterStyles.js\";\nimport {\n  type IsStickyTableSectionActive,\n  type TableStickySectionProps,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableFooterStickyActive: IsStickyTableSectionActive = (\n  entry,\n  isInTableContainer\n) => {\n  const { intersectionRatio, boundingClientRect, isIntersecting } = entry;\n  if (isInTableContainer) {\n    return !isIntersecting;\n  }\n\n  return intersectionRatio < 1 && boundingClientRect.top >= 0;\n};\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableFooterProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * footers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table footers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n\n  /** @defaultValue {@link isTableFooterStickyActive} */\n  isStickyActive?: IsStickyTableSectionActive;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableFooter + StickyTableFooter component\n *\n * Creates a `<tfoot>` element with some basic styles. This component will\n * disable the hover effect and line wrapping by default, but the hover effect\n * and line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableFooter = forwardRef<\n  HTMLTableSectionElement,\n  TableFooterProps\n>(function TableFooter(props, propRef) {\n  const {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableFooterStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\n    ...remaining\n  } = props;\n\n  // update the table configuration with the custom overrides for the `<tfoot>`\n  const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } =\n    useTableConfig({\n      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: false,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [tfootRef, tfootRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver<\n    HTMLTableSectionElement | HTMLElement\n  >({\n    ref: exists ? undefined : tfootRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const topOffset =\n        exists && tfootRef.current ? tfootRef.current.offsetHeight - 1 : 1;\n\n      return `0px 0px -${topOffset}px 0px`;\n    }, [exists, tfootRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry, exists));\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n      <tfoot\n        {...remaining}\n        ref={exists ? tfootRefCallback : targetRef}\n        className={tableFooter({\n          className,\n          sticky,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </tfoot>\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","TableConfigProvider","useTableConfig","useTableContainer","tableFooter","isTableFooterStickyActive","entry","isInTableContainer","intersectionRatio","boundingClientRect","isIntersecting","top","TableFooter","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","tfootRef","tfootRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","topOffset","current","offsetHeight","onUpdate","value","tbody","aria-hidden","tfoot"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,WAAW,QAAQ,yBAAyB;AAMrD;;CAEC,GACD,OAAO,MAAMC,4BAAwD,CACnEC,OACAC;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,cAAc,EAAE,GAAGJ;IAClE,IAAIC,oBAAoB;QACtB,OAAO,CAACG;IACV;IAEA,OAAOF,oBAAoB,KAAKC,mBAAmBE,GAAG,IAAI;AAC5D,EAAE;AAqBF;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAAcjB,WAGzB,SAASiB,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,iBAAiBjB,yBAAyB,EAC1CkB,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGZ;IAEJ,6EAA6E;IAC7E,MAAM,EAAEa,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEX,QAAQ,EAAEY,YAAY,EAAEC,cAAc,EAAE,GACrE5B,eAAe;QACbe,UAAUC;QACVW,cAAc,CAACb;IACjB;IAEF,MAAMe,gBAAgBlC,QACpB,IAAO,CAAA;YACL6B;YACAM,QAAQ;YACRL;YACAC;YACAX;YACAa;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQX;QAAUa;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAGnC,cAAce;IACnD,MAAM,EAAEqB,MAAM,EAAEC,YAAY,EAAE,GAAGjC;IACjC,MAAM,CAACkC,cAAcC,gBAAgB,GAAGxC,SAAS;IACjD,MAAMyC,YAAYvC,wBAEhB;QACAwC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACvB,UAAUG;QACrBqB,WAAWT,SAAS,IAAI;QACxBU,eAAejD,YAAY;YACzB,MAAMkD,YACJX,UAAUF,SAASc,OAAO,GAAGd,SAASc,OAAO,CAACC,YAAY,GAAG,IAAI;YAEnE,OAAO,CAAC,SAAS,EAAEF,UAAU,MAAM,CAAC;QACtC,GAAG;YAACX;YAAQF;SAAS;QACrBgB,UAAUrD,YACR,CAAC,CAACU,MAAM;YACNgC,gBAAgBhB,eAAehB,OAAO6B;QACxC,GACA;YAACA;YAAQb;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACpB;QAAoBiD,OAAOnB;;YACzBI,UAAUf,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAAC4B;gBAAMC,aAAW;gBAACZ,KAAKD;;0BAE1B,KAACc;gBACE,GAAG5B,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCxB,WAAWX,YAAY;oBACrBW;oBACAK;oBACAiB;oBACAb;gBACF;0BAECL;;;;AAIT,GAAG"}

package/dist/table/TableHeader.d.ts

@@ -1,15 +1,10 @@
 import { type HTMLAttributes } from "react";
 import { type TableCellConfig } from "./TableConfigurationProvider.js";
-import { type TableStickySectionProps } from "./types.js";
-/** @remarks \@since 6.0.0 */
-export interface TableHeaderClassNameOptions {
-    className?: string;
-    dense?: boolean;
-    sticky?: boolean;
-    stickyActive?: boolean;
-}
-/** @remarks \@since 6.0.0 */
-export declare function tableHeader(options?: TableHeaderClassNameOptions): string;
+import { type IsStickyTableSectionActive, type TableStickySectionProps } from "./types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare const isTableHeaderStickyActive: IsStickyTableSectionActive;
 /**
  * @remarks \@since 6.0.0 Added support for "sticky-active" state.
  */
@@ -22,11 +17,9 @@ export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement
      * @defaultValue `false`
      */
     hoverable?: boolean;
+    /** @defaultValue {@link isTableHeaderStickyActive} */
+    isStickyActive?: IsStickyTableSectionActive;
 }
-/**
- * @remarks \@since 6.0.0
- */
-export declare const isTableHeaderStickyActive: (entry: IntersectionObserverEntry) => boolean;
 /**
  * **Client Component**
  * TODO: Create separate useStickyTableHeader + StickyTableHeader component

package/dist/table/TableHeader.js

@@ -1,21 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useEnsuredRef } from "../useEnsuredRef.js";
 import { useIntersectionObserver } from "../useIntersectionObserver.js";
-import { bem } from "../utils/bem.js";
 import { TableConfigProvider, useTableConfig } from "./TableConfigurationProvider.js";
 import { useTableContainer } from "./TableContainerProvider.js";
-const styles = bem("rmd-thead");
-/** @remarks \@since 6.0.0 */ export function tableHeader(options = {}) {
-    const { dense, sticky, stickyActive, className } = options;
-    return cnb(styles({
-        dense,
-        sticky,
-        "sticky-active": stickyActive
-    }), className);
-}
+import { tableHeader } from "./tableHeaderStyles.js";
 /**
  * @remarks \@since 6.0.0
  */ export const isTableHeaderStickyActive = (entry)=>{
@@ -32,7 +22,7 @@ const styles = bem("rmd-thead");
  * line-wrapping can be re-enabled if desired through the `hoverable` and
  * `disableNoWrap` props.
  */ export const TableHeader = /*#__PURE__*/ forwardRef(function TableHeader(props, propRef) {
-    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableHeaderStickyActive, disableStickyStyles = false, ...remaining } = props;
+    const { className, hoverable = false, lineWrap: propLineWrap, children, sticky = false, stickyOptions, isStickyActive = isTableHeaderStickyActive, disableStickyStyles = false, stickyActiveClassName, ...remaining } = props;
     // update the table configuration with the custom overrides for the `<thead>`
     const { dense, hAlign, vAlign, lineWrap, disableHover, disableBorders } = useTableConfig({
         lineWrap: propLineWrap,
@@ -80,8 +70,9 @@ const styles = bem("rmd-thead");
             theadRef
         ]),
         onUpdate: useCallback(([entry])=>{
-            setStickyActive(isStickyActive(entry));
+            setStickyActive(isStickyActive(entry, exists));
         }, [
+            exists,
             isStickyActive
         ]),
         // allow the user defined sticky options to override the default behavior
@@ -94,10 +85,11 @@ const styles = bem("rmd-thead");
                 ...remaining,
                 ref: exists ? theadRefCallback : targetRef,
                 className: tableHeader({
+                    className,
                     dense,
                     sticky,
                     stickyActive,
-                    className
+                    stickyActiveClassName
                 }),
                 children: children
             }),

package/dist/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\nimport { cnb } from \"cnbuilder\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { bem } from \"../utils/bem.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { type TableStickySectionProps } from \"./types.js\";\n\nconst styles = bem(\"rmd-thead\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableHeaderClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  sticky?: boolean;\n  stickyActive?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableHeader(options: TableHeaderClassNameOptions = {}): string {\n  const { dense, sticky, stickyActive, className } = options;\n\n  return cnb(\n    styles({\n      dense,\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * headers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table headers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableHeaderStickyActive = (\n  entry: IntersectionObserverEntry\n): boolean => {\n  return (\n    entry.intersectionRatio < 1 &&\n    entry.boundingClientRect.bottom <= window.innerHeight\n  );\n};\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableHeader + StickyTableHeader component\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  TableHeaderProps\n>(function TableHeader(props, propRef) {\n  const {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableHeaderStickyActive,\n    disableStickyStyles = false,\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      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: true,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [theadRef, theadRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver({\n    ref: exists ? undefined : theadRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const thead = theadRef.current;\n      if (!thead) {\n        return;\n      }\n\n      let topOffset: number;\n      if (exists) {\n        topOffset = thead.offsetHeight - 1;\n      } else {\n        const top = parseFloat(window.getComputedStyle(thead).top);\n        topOffset = Number.isNaN(top) ? 1 : top + 1;\n      }\n\n      return `-${topOffset}px 0px 0px`;\n    }, [exists, theadRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry));\n      },\n      [isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <thead\n        {...remaining}\n        ref={exists ? theadRefCallback : targetRef}\n        className={tableHeader({\n          dense,\n          sticky,\n          stickyActive,\n          className,\n        })}\n      >\n        {children}\n      </thead>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n    </TableConfigProvider>\n  );\n});\n"],"names":["cnb","forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","bem","TableConfigProvider","useTableConfig","useTableContainer","styles","tableHeader","options","dense","sticky","stickyActive","className","isTableHeaderStickyActive","entry","intersectionRatio","boundingClientRect","bottom","window","innerHeight","TableHeader","props","propRef","hoverable","lineWrap","propLineWrap","children","stickyOptions","isStickyActive","disableStickyStyles","remaining","hAlign","vAlign","disableHover","disableBorders","configuration","header","theadRef","theadRefCallback","exists","containerRef","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","thead","current","topOffset","offsetHeight","top","parseFloat","getComputedStyle","Number","isNaN","onUpdate","value","tbody","aria-hidden"],"mappings":"AAAA;;AACA,SAASA,GAAG,QAAQ,YAAY;AAChC,SACEC,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAGhE,MAAMC,SAASJ,IAAI;AAUnB,2BAA2B,GAC3B,OAAO,SAASK,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,YAAY,EAAEC,SAAS,EAAE,GAAGJ;IAEnD,OAAOb,IACLW,OAAO;QACLG;QACAC;QACA,iBAAiBC;IACnB,IACAC;AAEJ;AAmBA;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CACvCC;IAEA,OACEA,MAAMC,iBAAiB,GAAG,KAC1BD,MAAME,kBAAkB,CAACC,MAAM,IAAIC,OAAOC,WAAW;AAEzD,EAAE;AAEF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcxB,WAGzB,SAASwB,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJV,SAAS,EACTW,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRhB,SAAS,KAAK,EACdiB,aAAa,EACbC,iBAAiBf,yBAAyB,EAC1CgB,sBAAsB,KAAK,EAC3B,GAAGC,WACJ,GAAGT;IAEJ,6EAA6E;IAC7E,MAAM,EAAEZ,KAAK,EAAEsB,MAAM,EAAEC,MAAM,EAAER,QAAQ,EAAES,YAAY,EAAEC,cAAc,EAAE,GACrE9B,eAAe;QACboB,UAAUC;QACVQ,cAAc,CAACV;IACjB;IAEF,MAAMY,gBAAgBrC,QACpB,IAAO,CAAA;YACLW;YACA2B,QAAQ;YACRL;YACAC;YACAR;YACAU;YACAD;QACF,CAAA,GACA;QAACxB;QAAOsB;QAAQC;QAAQR;QAAUU;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAGtC,cAAcsB;IACnD,MAAM,EAAEiB,MAAM,EAAEC,YAAY,EAAE,GAAGnC;IACjC,MAAM,CAACM,cAAc8B,gBAAgB,GAAG1C,SAAS;IACjD,MAAM2C,YAAYzC,wBAAwB;QACxC0C,KAAKJ,SAASK,YAAYN;QAC1BO,MAAML;QACNM,UAAU,CAACpC,UAAUmB;QACrBkB,WAAWR,SAAS,IAAI;QACxBS,eAAenD,YAAY;YACzB,MAAMoD,QAAQZ,SAASa,OAAO;YAC9B,IAAI,CAACD,OAAO;gBACV;YACF;YAEA,IAAIE;YACJ,IAAIZ,QAAQ;gBACVY,YAAYF,MAAMG,YAAY,GAAG;YACnC,OAAO;gBACL,MAAMC,MAAMC,WAAWpC,OAAOqC,gBAAgB,CAACN,OAAOI,GAAG;gBACzDF,YAAYK,OAAOC,KAAK,CAACJ,OAAO,IAAIA,MAAM;YAC5C;YAEA,OAAO,CAAC,CAAC,EAAEF,UAAU,UAAU,CAAC;QAClC,GAAG;YAACZ;YAAQF;SAAS;QACrBqB,UAAU7D,YACR,CAAC,CAACiB,MAAM;YACN2B,gBAAgBb,eAAed;QACjC,GACA;YAACc;SAAe;QAElB,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACxB;QAAoBwD,OAAOxB;;0BAC1B,KAACc;gBACE,GAAGnB,SAAS;gBACba,KAAKJ,SAASD,mBAAmBI;gBACjC9B,WAAWL,YAAY;oBACrBE;oBACAC;oBACAC;oBACAC;gBACF;0BAECc;;YAEFa,UAAU7B,UAAU,CAACmB,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAAC+B;gBAAMC,aAAW;gBAAClB,KAAKD;;;;AAIhC,GAAG"}
+{"version":3,"sources":["../../src/table/TableHeader.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport {\n  TableConfigProvider,\n  useTableConfig,\n  type TableCellConfig,\n  type TableConfigContext,\n} from \"./TableConfigurationProvider.js\";\nimport { useTableContainer } from \"./TableContainerProvider.js\";\nimport { tableHeader } from \"./tableHeaderStyles.js\";\nimport {\n  type IsStickyTableSectionActive,\n  type TableStickySectionProps,\n} from \"./types.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport const isTableHeaderStickyActive: IsStickyTableSectionActive = (\n  entry\n) => {\n  return (\n    entry.intersectionRatio < 1 &&\n    entry.boundingClientRect.bottom <= window.innerHeight\n  );\n};\n\n/**\n * @remarks \\@since 6.0.0 Added support for \"sticky-active\" state.\n */\nexport interface TableHeaderProps\n  extends HTMLAttributes<HTMLTableSectionElement>,\n    Pick<TableCellConfig, \"lineWrap\">,\n    TableStickySectionProps {\n  /**\n   * This is a rename of the `disableHover` of the `TableConfig` since table\n   * headers are not hoverable by default. This prop can be enabled to add the\n   * row hover color within table headers, but it is not really recommended.\n   *\n   * @defaultValue `false`\n   */\n  hoverable?: boolean;\n\n  /** @defaultValue {@link isTableHeaderStickyActive} */\n  isStickyActive?: IsStickyTableSectionActive;\n}\n\n/**\n * **Client Component**\n * TODO: Create separate useStickyTableHeader + StickyTableHeader component\n *\n * Creates a `<thead>` element with some basic styles. This component will also\n * update the table configuration so that all the `TableCell` children will\n * automatically become `<th>` elements instead of the normal `<td>` as well as\n * disabling the hover effect and line wrapping. The hover effect and\n * line-wrapping can be re-enabled if desired through the `hoverable` and\n * `disableNoWrap` props.\n */\nexport const TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  TableHeaderProps\n>(function TableHeader(props, propRef) {\n  const {\n    className,\n    hoverable = false,\n    lineWrap: propLineWrap,\n    children,\n    sticky = false,\n    stickyOptions,\n    isStickyActive = isTableHeaderStickyActive,\n    disableStickyStyles = false,\n    stickyActiveClassName,\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      lineWrap: propLineWrap,\n      disableHover: !hoverable,\n    });\n\n  const configuration = useMemo<TableConfigContext>(\n    () => ({\n      dense,\n      header: true,\n      hAlign,\n      vAlign,\n      lineWrap,\n      disableBorders,\n      disableHover,\n    }),\n    [dense, hAlign, vAlign, lineWrap, disableBorders, disableHover]\n  );\n\n  const [theadRef, theadRefCallback] = useEnsuredRef(propRef);\n  const { exists, containerRef } = useTableContainer();\n  const [stickyActive, setStickyActive] = useState(false);\n  const targetRef = useIntersectionObserver({\n    ref: exists ? undefined : theadRefCallback,\n    root: containerRef,\n    disabled: !sticky || disableStickyStyles,\n    threshold: exists ? 0 : 1,\n    getRootMargin: useCallback(() => {\n      const thead = theadRef.current;\n      if (!thead) {\n        return;\n      }\n\n      let topOffset: number;\n      if (exists) {\n        topOffset = thead.offsetHeight - 1;\n      } else {\n        const top = parseFloat(window.getComputedStyle(thead).top);\n        topOffset = Number.isNaN(top) ? 1 : top + 1;\n      }\n\n      return `-${topOffset}px 0px 0px`;\n    }, [exists, theadRef]),\n    onUpdate: useCallback(\n      ([entry]) => {\n        setStickyActive(isStickyActive(entry, exists));\n      },\n      [exists, isStickyActive]\n    ),\n    // allow the user defined sticky options to override the default behavior\n    ...stickyOptions,\n  });\n\n  return (\n    <TableConfigProvider value={configuration}>\n      <thead\n        {...remaining}\n        ref={exists ? theadRefCallback : targetRef}\n        className={tableHeader({\n          className,\n          dense,\n          sticky,\n          stickyActive,\n          stickyActiveClassName,\n        })}\n      >\n        {children}\n      </thead>\n      {exists && sticky && !disableStickyStyles && (\n        // rendering a `<tbody>` since it is valid to have 0-many in a table\n        // https://html.spec.whatwg.org/multipage/tables.html#the-table-element\n        <tbody aria-hidden ref={targetRef} />\n      )}\n    </TableConfigProvider>\n  );\n});\n"],"names":["forwardRef","useCallback","useMemo","useState","useEnsuredRef","useIntersectionObserver","TableConfigProvider","useTableConfig","useTableContainer","tableHeader","isTableHeaderStickyActive","entry","intersectionRatio","boundingClientRect","bottom","window","innerHeight","TableHeader","props","propRef","className","hoverable","lineWrap","propLineWrap","children","sticky","stickyOptions","isStickyActive","disableStickyStyles","stickyActiveClassName","remaining","dense","hAlign","vAlign","disableHover","disableBorders","configuration","header","theadRef","theadRefCallback","exists","containerRef","stickyActive","setStickyActive","targetRef","ref","undefined","root","disabled","threshold","getRootMargin","thead","current","topOffset","offsetHeight","top","parseFloat","getComputedStyle","Number","isNaN","onUpdate","value","tbody","aria-hidden"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,OAAO,EACPC,QAAQ,QAEH,QAAQ;AACf,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SACEC,mBAAmB,EACnBC,cAAc,QAGT,kCAAkC;AACzC,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,WAAW,QAAQ,yBAAyB;AAMrD;;CAEC,GACD,OAAO,MAAMC,4BAAwD,CACnEC;IAEA,OACEA,MAAMC,iBAAiB,GAAG,KAC1BD,MAAME,kBAAkB,CAACC,MAAM,IAAIC,OAAOC,WAAW;AAEzD,EAAE;AAsBF;;;;;;;;;;CAUC,GACD,OAAO,MAAMC,4BAAcjB,WAGzB,SAASiB,YAAYC,KAAK,EAAEC,OAAO;IACnC,MAAM,EACJC,SAAS,EACTC,YAAY,KAAK,EACjBC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,SAAS,KAAK,EACdC,aAAa,EACbC,iBAAiBjB,yBAAyB,EAC1CkB,sBAAsB,KAAK,EAC3BC,qBAAqB,EACrB,GAAGC,WACJ,GAAGZ;IAEJ,6EAA6E;IAC7E,MAAM,EAAEa,KAAK,EAAEC,MAAM,EAAEC,MAAM,EAAEX,QAAQ,EAAEY,YAAY,EAAEC,cAAc,EAAE,GACrE5B,eAAe;QACbe,UAAUC;QACVW,cAAc,CAACb;IACjB;IAEF,MAAMe,gBAAgBlC,QACpB,IAAO,CAAA;YACL6B;YACAM,QAAQ;YACRL;YACAC;YACAX;YACAa;YACAD;QACF,CAAA,GACA;QAACH;QAAOC;QAAQC;QAAQX;QAAUa;QAAgBD;KAAa;IAGjE,MAAM,CAACI,UAAUC,iBAAiB,GAAGnC,cAAce;IACnD,MAAM,EAAEqB,MAAM,EAAEC,YAAY,EAAE,GAAGjC;IACjC,MAAM,CAACkC,cAAcC,gBAAgB,GAAGxC,SAAS;IACjD,MAAMyC,YAAYvC,wBAAwB;QACxCwC,KAAKL,SAASM,YAAYP;QAC1BQ,MAAMN;QACNO,UAAU,CAACvB,UAAUG;QACrBqB,WAAWT,SAAS,IAAI;QACxBU,eAAejD,YAAY;YACzB,MAAMkD,QAAQb,SAASc,OAAO;YAC9B,IAAI,CAACD,OAAO;gBACV;YACF;YAEA,IAAIE;YACJ,IAAIb,QAAQ;gBACVa,YAAYF,MAAMG,YAAY,GAAG;YACnC,OAAO;gBACL,MAAMC,MAAMC,WAAWzC,OAAO0C,gBAAgB,CAACN,OAAOI,GAAG;gBACzDF,YAAYK,OAAOC,KAAK,CAACJ,OAAO,IAAIA,MAAM;YAC5C;YAEA,OAAO,CAAC,CAAC,EAAEF,UAAU,UAAU,CAAC;QAClC,GAAG;YAACb;YAAQF;SAAS;QACrBsB,UAAU3D,YACR,CAAC,CAACU,MAAM;YACNgC,gBAAgBhB,eAAehB,OAAO6B;QACxC,GACA;YAACA;YAAQb;SAAe;QAE1B,yEAAyE;QACzE,GAAGD,aAAa;IAClB;IAEA,qBACE,MAACpB;QAAoBuD,OAAOzB;;0BAC1B,KAACe;gBACE,GAAGrB,SAAS;gBACbe,KAAKL,SAASD,mBAAmBK;gBACjCxB,WAAWX,YAAY;oBACrBW;oBACAW;oBACAN;oBACAiB;oBACAb;gBACF;0BAECL;;YAEFgB,UAAUf,UAAU,CAACG,uBACpB,oEAAoE;YACpE,uEAAuE;0BACvE,KAACkC;gBAAMC,aAAW;gBAAClB,KAAKD;;;;AAIhC,GAAG"}

package/dist/table/TableRadio.d.ts

@@ -0,0 +1,106 @@
+import { type TdHTMLAttributes } from "react";
+import { type RadioProps } from "../form/InputToggle.js";
+import { type PropsWithRef } from "../types.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableRadioTdHTMLAttributes = Omit<TdHTMLAttributes<HTMLTableCellElement>, "aria-sort" | "scope" | "onChange" | "onInvalid">;
+/**
+ * @remarks \@since 6.0.0
+ */
+export type TableRadioSupportedRadioProps = Pick<RadioProps, "name" | "value" | "icon" | "iconStyle" | "iconClassName" | "iconProps" | "checkedIcon" | "checked" | "onChange" | "defaultChecked" | "error" | "required" | "onInvalid">;
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableRadioProps extends TableRadioTdHTMLAttributes, TableRadioSupportedRadioProps {
+    /**
+     * @defaultValue `!props["aria-labelledby"] ? "Select Row" : undefined`
+     */
+    "aria-label"?: string;
+    /** @defaultValue `false` */
+    sticky?: boolean;
+    /**
+     * This allows you to override any props for the checkbox that are not
+     * configurable as top-level props.
+     *
+     * @example
+     * Simple Example
+     * ```tsx
+     * checkboxProps={{
+     *   id: "some-custom-id",
+     *   ref: checkboxRef,
+     * }}
+     * ```
+     *
+     * @see {@link TableRadioSupportedRadioProps}
+     * @remarks \@since 6.0.0
+     */
+    radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;
+}
+/**
+ * **Server Component**
+ * This might actually be a client component.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCell,
+ *   TableRadio,
+ *   TableContainer,
+ *   TableHeader,
+ *   TableRow,
+ *   useRadioGroup,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const rows = [
+ *   { name: "Frozen Yogurt", type: "Ice Cream" },
+ *   { name: "Ice cream sandwich", type: "Ice Cream" },
+ *   { name: "Eclair", type: "Pastry" },
+ *   // ...other content
+ * ] as const;
+ *
+ * function Example(): ReactElement {
+ *   const { getRadioProps } = useRadioGroup({
+ *     name: "selected",
+ *   });
+ *   return (
+ *     <TableContainer>
+ *       <Table>
+ *         <TableHeader>
+ *           <TableRow>
+ *             <TableCell header={false} />
+ *             <TableCell>Name</TableCell>
+ *             <TableCell>Type</TableCell>
+ *           </TableRow>
+ *         </TableHeader>
+ *         <TableBody>
+ *           {rows.map(({ name, type }) => {
+ *             const radioProps = getRadioProps(name);
+ *             const { checked, onChange } = radioProps;
+ *
+ *             return (
+ *               <TableRow
+ *                 key={name}
+ *                 onClick={onChange}
+ *                 clickable
+ *                 selected={checked}
+ *               >
+ *                 <TableRadio {...radioProps} />
+ *                 <TableCell>{name}</TableCell>
+ *                 <TableCell hAlign="right">{type}</TableCell>
+ *               </TableRow>
+ *             );
+ *           })}
+ *         </TableBody>
+ *       </Table>
+ *     </TableContainer>
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */
+export declare const TableRadio: import("react").ForwardRefExoticComponent<TableRadioProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/table/TableRadio.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Radio } from "../form/Radio.js";
+import { TableCell } from "./TableCell.js";
+const noop = ()=>{
+// do nothing
+};
+/**
+ * **Server Component**
+ * This might actually be a client component.
+ *
+ * @example
+ * Simple Example
+ * ```tsx
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCell,
+ *   TableRadio,
+ *   TableContainer,
+ *   TableHeader,
+ *   TableRow,
+ *   useRadioGroup,
+ * } from "@react-md/core";
+ * import type { ReactElement } from "react";
+ *
+ * const rows = [
+ *   { name: "Frozen Yogurt", type: "Ice Cream" },
+ *   { name: "Ice cream sandwich", type: "Ice Cream" },
+ *   { name: "Eclair", type: "Pastry" },
+ *   // ...other content
+ * ] as const;
+ *
+ * function Example(): ReactElement {
+ *   const { getRadioProps } = useRadioGroup({
+ *     name: "selected",
+ *   });
+ *   return (
+ *     <TableContainer>
+ *       <Table>
+ *         <TableHeader>
+ *           <TableRow>
+ *             <TableCell header={false} />
+ *             <TableCell>Name</TableCell>
+ *             <TableCell>Type</TableCell>
+ *           </TableRow>
+ *         </TableHeader>
+ *         <TableBody>
+ *           {rows.map(({ name, type }) => {
+ *             const radioProps = getRadioProps(name);
+ *             const { checked, onChange } = radioProps;
+ *
+ *             return (
+ *               <TableRow
+ *                 key={name}
+ *                 onClick={onChange}
+ *                 clickable
+ *                 selected={checked}
+ *               >
+ *                 <TableRadio {...radioProps} />
+ *                 <TableCell>{name}</TableCell>
+ *                 <TableCell hAlign="right">{type}</TableCell>
+ *               </TableRow>
+ *             );
+ *           })}
+ *         </TableBody>
+ *       </Table>
+ *     </TableContainer>
+ *   );
+ * }
+ * ```
+ * @remarks \@since 6.0.0
+ */ export const TableRadio = /*#__PURE__*/ forwardRef(function TableRadio(props, ref) {
+    const { "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel = !ariaLabelledBy ? "Select Row" : undefined, "aria-controls": ariaControls, name, icon, iconProps, iconStyle, iconClassName, checkedIcon, value, checked, onChange, defaultChecked, radioProps, onClick = noop, error, required, onInvalid, ...remaining } = props;
+    return /*#__PURE__*/ _jsx(TableCell, {
+        ...remaining,
+        ref: ref,
+        header: false,
+        inputToggle: true,
+        onClick: (event)=>{
+            event.stopPropagation();
+            onClick(event);
+        },
+        children: /*#__PURE__*/ _jsx(Radio, {
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-controls": ariaControls,
+            name: name,
+            icon: icon,
+            iconProps: iconProps,
+            iconStyle: iconStyle,
+            iconClassName: iconClassName,
+            checkedIcon: checkedIcon,
+            value: value,
+            checked: checked,
+            defaultChecked: defaultChecked,
+            error: error,
+            required: required,
+            onChange: onChange,
+            onInvalid: onInvalid,
+            ...radioProps
+        })
+    });
+});
+
+//# sourceMappingURL=TableRadio.js.map

package/dist/table/TableRadio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/TableRadio.tsx"],"sourcesContent":["import { forwardRef, type TdHTMLAttributes } from \"react\";\nimport { type RadioProps } from \"../form/InputToggle.js\";\nimport { Radio } from \"../form/Radio.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { TableCell } from \"./TableCell.js\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableRadioTdHTMLAttributes = Omit<\n  TdHTMLAttributes<HTMLTableCellElement>,\n  \"aria-sort\" | \"scope\" | \"onChange\" | \"onInvalid\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TableRadioSupportedRadioProps = Pick<\n  RadioProps,\n  | \"name\"\n  | \"value\"\n  | \"icon\"\n  | \"iconStyle\"\n  | \"iconClassName\"\n  | \"iconProps\"\n  | \"checkedIcon\"\n  | \"checked\"\n  | \"onChange\"\n  | \"defaultChecked\"\n  | \"error\"\n  | \"required\"\n  | \"onInvalid\"\n>;\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableRadioProps\n  extends TableRadioTdHTMLAttributes,\n    TableRadioSupportedRadioProps {\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\n   * Simple Example\n   * ```tsx\n   * checkboxProps={{\n   *   id: \"some-custom-id\",\n   *   ref: checkboxRef,\n   * }}\n   * ```\n   *\n   * @see {@link TableRadioSupportedRadioProps}\n   * @remarks \\@since 6.0.0\n   */\n  radioProps?: PropsWithRef<RadioProps, HTMLInputElement>;\n}\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * @example\n * Simple Example\n * ```tsx\n * import {\n *   Table,\n *   TableBody,\n *   TableCell,\n *   TableRadio,\n *   TableContainer,\n *   TableHeader,\n *   TableRow,\n *   useRadioGroup,\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 { getRadioProps } = useRadioGroup({\n *     name: \"selected\",\n *   });\n *   return (\n *     <TableContainer>\n *       <Table>\n *         <TableHeader>\n *           <TableRow>\n *             <TableCell header={false} />\n *             <TableCell>Name</TableCell>\n *             <TableCell>Type</TableCell>\n *           </TableRow>\n *         </TableHeader>\n *         <TableBody>\n *           {rows.map(({ name, type }) => {\n *             const radioProps = getRadioProps(name);\n *             const { checked, onChange } = radioProps;\n *\n *             return (\n *               <TableRow\n *                 key={name}\n *                 onClick={onChange}\n *                 clickable\n *                 selected={checked}\n *               >\n *                 <TableRadio {...radioProps} />\n *                 <TableCell>{name}</TableCell>\n *                 <TableCell hAlign=\"right\">{type}</TableCell>\n *               </TableRow>\n *             );\n *           })}\n *         </TableBody>\n *       </Table>\n *     </TableContainer>\n *   );\n * }\n * ```\n * @remarks \\@since 6.0.0\n */\nexport const TableRadio = forwardRef<HTMLTableCellElement, TableRadioProps>(\n  function TableRadio(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      value,\n      checked,\n      onChange,\n      defaultChecked,\n      radioProps,\n      onClick = noop,\n      error,\n      required,\n      onInvalid,\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        <Radio\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          value={value}\n          checked={checked}\n          defaultChecked={defaultChecked}\n          error={error}\n          required={required}\n          onChange={onChange}\n          onInvalid={onInvalid}\n          {...radioProps}\n        />\n      </TableCell>\n    );\n  }\n);\n"],"names":["forwardRef","Radio","TableCell","noop","TableRadio","props","ref","ariaLabelledBy","ariaLabel","undefined","ariaControls","name","icon","iconProps","iconStyle","iconClassName","checkedIcon","value","checked","onChange","defaultChecked","radioProps","onClick","error","required","onInvalid","remaining","header","inputToggle","event","stopPropagation","aria-label","aria-labelledby","aria-controls"],"mappings":";AAAA,SAASA,UAAU,QAA+B,QAAQ;AAE1D,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,SAASC,SAAS,QAAQ,iBAAiB;AAE3C,MAAMC,OAAO;AACX,aAAa;AACf;AA+DA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEC,GACD,OAAO,MAAMC,2BAAaJ,WACxB,SAASI,WAAWC,KAAK,EAAEC,GAAG;IAC5B,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,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,cAAc,EACdC,UAAU,EACVC,UAAUnB,IAAI,EACdoB,KAAK,EACLC,QAAQ,EACRC,SAAS,EACT,GAAGC,WACJ,GAAGrB;IAEJ,qBACE,KAACH;QACE,GAAGwB,SAAS;QACbpB,KAAKA;QACLqB,QAAQ;QACRC,WAAW;QACXN,SAAS,CAACO;YACRA,MAAMC,eAAe;YACrBR,QAAQO;QACV;kBAEA,cAAA,KAAC5B;YACC8B,cAAYvB;YACZwB,mBAAiBzB;YACjB0B,iBAAevB;YACfC,MAAMA;YACNC,MAAMA;YACNC,WAAWA;YACXC,WAAWA;YACXC,eAAeA;YACfC,aAAaA;YACbC,OAAOA;YACPC,SAASA;YACTE,gBAAgBA;YAChBG,OAAOA;YACPC,UAAUA;YACVL,UAAUA;YACVM,WAAWA;YACV,GAAGJ,UAAU;;;AAItB,GACA"}

package/dist/table/TableRow.d.ts

@@ -1,15 +1,5 @@
 import { type HTMLAttributes } from "react";
 import { type TableRowConfiguration } from "./TableConfigurationProvider.js";
-/** @remarks \@since 6.0.0 */
-export interface TableRowClassNameOptions {
-    className?: string;
-    disableHover?: boolean;
-    disableBorders?: boolean;
-    selected?: boolean;
-    clickable?: boolean;
-}
-/** @remarks \@since 6.0.0 */
-export declare function tableRow(options?: TableRowClassNameOptions): string;
 export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement>, TableRowConfiguration {
     /**
      * Boolean if the current row has been selected and should apply the selected

package/dist/table/TableRow.js

@@ -1,19 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cnb } from "cnbuilder";
 import { forwardRef } from "react";
-import { bem } from "../utils/bem.js";
 import { useTableConfig } from "./TableConfigurationProvider.js";
-const styles = bem("rmd-tr");
-/** @remarks \@since 6.0.0 */ export function tableRow(options = {}) {
-    const { disableHover, disableBorders, selected, clickable, className } = options;
-    return cnb(styles({
-        bordered: !disableBorders,
-        hoverable: !disableHover,
-        clickable,
-        selected
-    }), className);
-}
+import { tableRow } from "./tableRowStyles.js";
 /**
  * **Client Component**
  *