@cimpress-ui/react 0.2.1 → 0.4.0

package/dist/commonjs/components/table/table-body-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-body-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-body-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAAsD;AAEtD,yDAAkD;AAElD,0DAAkF;AAClF,8DAA0D;AAC1D,yEAAiE;AAiCjE,SAAS,YAAY,CACnB,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAqB,EAC9D,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,iBAAiB,YACjG,uBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GAChC,CACzB,CAAC;AACJ,CAAC;AAOD;;;;GAIG;AACH,MAAM,aAAa,GAAG,IAAA,2BAAU,EAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAwBrC,qCAAY;AAtBtC,SAAS,iBAAiB,CAAC,EACzB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACxE,YAAY,GACW;IACvB,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAC7C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,wCAAgB,GAAE,CAAC;IAExC,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,QAAQ,EAAE,KAAK,CAAC,EAC/B,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,SAAS,mBACT,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7E,QAAQ,GACN,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useSelectableRow } from './hooks/use-selectable-row.js';\n\nexport interface TableBodyRowProps extends CommonProps {\n  /** The cells that belong to this row. */\n  children: ReactNode;\n  /**\n   * The row's position within the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `rowNumber` of any previous rows\n   * - less than or equal to the `totalRowCount` of the parent `Table`\n   *\n   * Use together with `totalRowCount` on the `Table` component.\n   */\n  rowNumber?: number;\n  /**\n   * Whether the row is selected.\n   *\n   * This value will be ignored if `rowSelectionMode` on the `Table` component is set to `'none'`.\n   */\n  isSelected?: boolean;\n  /**\n   * A function called when the row's selection state should change.\n   *\n   * If called without an argument, you are free to pick the new selection state based on your own logic.\n   * If called with an argument, you must set the selection state to the provided value.\n   */\n  onSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction TableBodyRow(\n  { isSelected, onSelectionToggle, ...props }: TableBodyRowProps,\n  ref: ForwardedRef<HTMLTableRowElement>,\n) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey} isSelected={isSelected} onSelectionToggle={onSelectionToggle}>\n      <TableBodyRowInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\ninterface TableBodyRowInnerProps {\n  props: Omit<TableBodyRowProps, 'isSelected' | 'onSelectionToggle'>;\n  forwardedRef: ForwardedRef<HTMLTableRowElement>;\n}\n\n/**\n * Renders a row within a table body.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBodyRow = forwardRef(TableBodyRow, 'TableBodyRow');\n\nfunction TableBodyRowInner({\n  props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props },\n  forwardedRef,\n}: TableBodyRowInnerProps) {\n  const { rowSelectionMode } = useTableState();\n  const { isSelected } = useTableRowState();\n  const { rowProps } = useSelectableRow();\n\n  return (\n    <tr\n      {...mergeProps(rowProps, props)}\n      ref={forwardedRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowindex={rowNumber}\n      aria-selected={rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined}\n    >\n      {children}\n    </tr>\n  );\n}\n\nexport { _TableBodyRow as TableBodyRow };\n"]}

package/dist/commonjs/components/table/table-body.d.ts

@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableBodyProps extends CommonProps {
+export interface TableBodyProps extends CommonProps {
+    /** The rows that belong to this table body. */
     children: ReactNode;
 }
-declare const _UNSTABLE_TableBody: (props: UNSTABLE_TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableBody as UNSTABLE_TableBody };
+/**
+ * Renders a body section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableBody: (props: TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
+export { _TableBody as TableBody };
 //# sourceMappingURL=table-body.d.ts.map

package/dist/commonjs/components/table/table-body.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD,QAAA,MAAM,mBAAmB,iIAA8C,CAAC;AAExE,OAAO,EAAE,mBAAmB,IAAI,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"table-body.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,UAAU,wHAAqC,CAAC;AAEtD,OAAO,EAAE,UAAU,IAAI,SAAS,EAAE,CAAC"}

package/dist/commonjs/components/table/table-body.js

@@ -1,11 +1,17 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableBody = void 0;
+exports.TableBody = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const forward_ref_js_1 = require("../../forward-ref.js");
-function UNSTABLE_TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TableBody({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("tbody", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
-const _UNSTABLE_TableBody = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableBody, 'TableBody');
-exports.UNSTABLE_TableBody = _UNSTABLE_TableBody;
+/**
+ * Renders a body section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableBody = (0, forward_ref_js_1.forwardRef)(TableBody, 'TableBody');
+exports.TableBody = _TableBody;
 //# sourceMappingURL=table-body.js.map

package/dist/commonjs/components/table/table-body.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":";;;;AACA,yDAAkD;AAOlD,SAAS,kBAAkB,CACzB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA2B,EAC/E,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,MAAM,mBAAmB,GAAG,IAAA,2BAAU,EAAC,kBAAkB,EAAE,WAAW,CAAC,CAAC;AAExC,iDAAkB","sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_TableBodyProps extends CommonProps {\n  children: ReactNode;\n}\n\nfunction UNSTABLE_TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </tbody>\n  );\n}\n\nconst _UNSTABLE_TableBody = forwardRef(UNSTABLE_TableBody, 'TableBody');\n\nexport { _UNSTABLE_TableBody as UNSTABLE_TableBody };\n"]}
+{"version":3,"file":"table-body.js","sourceRoot":"","sources":["../../../../src/components/table/table-body.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAQlD,SAAS,SAAS,CAChB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAkB,EACtE,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,GAAG,IAAA,2BAAU,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/B,+BAAS","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableBodyProps extends CommonProps {\n  /** The rows that belong to this table body. */\n  children: ReactNode;\n}\n\nfunction TableBody(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableBodyProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <tbody {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </tbody>\n  );\n}\n\n/**\n * Renders a body section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableBody = forwardRef(TableBody, 'TableBody');\n\nexport { _TableBody as TableBody };\n"]}

package/dist/commonjs/components/table/table-container.d.ts

@@ -1,8 +1,14 @@
-import { type ReactNode } from 'react';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface UNSTABLE_TableContainerProps extends CommonProps, Omit<LabellableProps, 'label'> {
+import type { ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+export interface TableContainerProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the container. */
     children: ReactNode;
 }
-declare const _UNSTABLE_TableContainer: (props: UNSTABLE_TableContainerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableContainer as UNSTABLE_TableContainer };
+/**
+ * Renders a scrollable container that allows a table to overflow in a responsive way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableContainer: (props: TableContainerProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _TableContainer as TableContainer };
 //# sourceMappingURL=table-container.d.ts.map

package/dist/commonjs/components/table/table-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEhE,MAAM,WAAW,4BAA6B,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAC/F,QAAQ,EAAE,SAAS,CAAC;CACrB;AA+CD,QAAA,MAAM,wBAAwB,8KAAwE,CAAC;AAEvG,OAAO,EAAE,wBAAwB,IAAI,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmBD;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/table/table-container.js

@@ -1,40 +1,23 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableContainer = void 0;
+exports.TableContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const focus_1 = require("@react-aria/focus");
-const utils_1 = require("@react-aria/utils");
 const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
-function UNSTABLE_TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
-    const containerRef = (0, utils_1.useObjectRef)(ref);
-    const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)();
-    const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
-    (0, react_1.useLayoutEffect)(() => {
-        const containerElement = containerRef.current;
-        const isSSR = typeof window === 'undefined';
-        let containerResizeObserver;
-        if (containerElement && !isSSR) {
-            containerResizeObserver = new window.ResizeObserver((entries) => {
-                if (entries[0]) {
-                    setIsScrollable(entries[0].target.scrollWidth > entries[0].target.clientWidth);
-                }
-            });
-            containerResizeObserver.observe(containerElement);
-        }
-        return () => {
-            if (containerElement && containerResizeObserver) {
-                containerResizeObserver.unobserve(containerElement);
-            }
-        };
-    }, [containerRef]);
-    return ((0, jsx_runtime_1.jsx)("div", { ...(0, utils_1.mergeProps)(props, focusProps), ref: containerRef, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: UNSAFE_style, tabIndex: isScrollable ? 0 : -1, "data-focus-visible": isFocusVisible || undefined, children: children }));
+const focusable_container_js_1 = require("../internal/focusable-container/focusable-container.js");
+function TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { ...props, ref: ref, className: (0, clsx_1.default)('cim-table-container', UNSAFE_className), style: UNSAFE_style, scrollDirection: "horizontal", children: children }));
 }
-const _UNSTABLE_TableContainer = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_TableContainer), 'TableContainer');
-exports.UNSTABLE_TableContainer = _UNSTABLE_TableContainer;
+/**
+ * Renders a scrollable container that allows a table to overflow in a responsive way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableContainer = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TableContainer), 'TableContainer');
+exports.TableContainer = _TableContainer;
 //# sourceMappingURL=table-container.js.map

package/dist/commonjs/components/table/table-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":";;;;;;;AAAA,6CAAiD;AACjD,6CAA6D;AAC7D,gDAAwB;AACxB,iCAAqF;AACrF,yDAAkD;AAClD,mEAA2D;AAO3D,SAAS,uBAAuB,CAC9B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgC,EACpF,GAAiC;IAEjC,MAAM,YAAY,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IACvC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,IAAA,oBAAY,GAAE,CAAC;IACtD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExD,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC;QAC9C,MAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;QAE5C,IAAI,uBAAmD,CAAC;QAExD,IAAI,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC;YAC/B,uBAAuB,GAAG,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;gBAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;oBACf,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACjF,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,uBAAuB,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;QACpD,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,IAAI,uBAAuB,EAAE,CAAC;gBAChD,uBAAuB,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;YACtD,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,mCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACxD,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,wBACX,cAAc,IAAI,SAAS,YAE9C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,wBAAwB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,uBAAuB,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAElE,2DAAuB","sourcesContent":["import { useFocusRing } from '@react-aria/focus';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport { useLayoutEffect, useState, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\nexport interface UNSTABLE_TableContainerProps extends CommonProps, Omit<LabellableProps, 'label'> {\n  children: ReactNode;\n}\n\nfunction UNSTABLE_TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const containerRef = useObjectRef(ref);\n  const { focusProps, isFocusVisible } = useFocusRing();\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  useLayoutEffect(() => {\n    const containerElement = containerRef.current;\n    const isSSR = typeof window === 'undefined';\n\n    let containerResizeObserver: ResizeObserver | undefined;\n\n    if (containerElement && !isSSR) {\n      containerResizeObserver = new window.ResizeObserver((entries) => {\n        if (entries[0]) {\n          setIsScrollable(entries[0].target.scrollWidth > entries[0].target.clientWidth);\n        }\n      });\n\n      containerResizeObserver.observe(containerElement);\n    }\n\n    return () => {\n      if (containerElement && containerResizeObserver) {\n        containerResizeObserver.unobserve(containerElement);\n      }\n    };\n  }, [containerRef]);\n\n  return (\n    <div\n      {...mergeProps(props, focusProps)}\n      ref={containerRef}\n      className={clsx('cim-table-container', UNSAFE_className)}\n      style={UNSAFE_style}\n      tabIndex={isScrollable ? 0 : -1}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      {children}\n    </div>\n  );\n}\n\nconst _UNSTABLE_TableContainer = withStyleProps(forwardRef(UNSTABLE_TableContainer), 'TableContainer');\n\nexport { _UNSTABLE_TableContainer as UNSTABLE_TableContainer };\n"]}
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,yDAAkD;AAClD,mEAA2D;AAC3D,mGAA4F;AAQ5F,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB,EAC3E,GAAiC;IAEjC,OAAO,CACL,uBAAC,2CAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,gBAAgB,CAAC,EACxD,KAAK,EAAE,YAAY,EACnB,eAAe,EAAC,YAAY,YAE3B,QAAQ,GACU,CACtB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAEzD,yCAAc","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\n\nexport interface TableContainerProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the container. */\n  children: ReactNode;\n}\n\nfunction TableContainer(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <FocusableContainer\n      {...props}\n      ref={ref}\n      className={clsx('cim-table-container', UNSAFE_className)}\n      style={UNSAFE_style}\n      scrollDirection=\"horizontal\"\n    >\n      {children}\n    </FocusableContainer>\n  );\n}\n\n/**\n * Renders a scrollable container that allows a table to overflow in a responsive way.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');\n\nexport { _TableContainer as TableContainer };\n"]}

package/dist/commonjs/components/table/table-empty-state.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface TableEmptyStateProps extends CommonProps {
+    /** The title of the empty state. */
+    title: string;
+    /** The description of the empty state. */
+    description: string;
+    /** An optional action button displayed within the empty state. */
+    action?: ReactNode;
+}
+/**
+ * Renders an empty state within a table that has no data.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableEmptyState: (props: TableEmptyStateProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
+export { _TableEmptyState as TableEmptyState };
+//# sourceMappingURL=table-empty-state.d.ts.map

package/dist/commonjs/components/table/table-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAYD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AA6CxE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

package/dist/commonjs/components/table/table-empty-state.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableEmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const clsx_1 = __importDefault(require("clsx"));
+const forward_ref_js_1 = require("../../forward-ref.js");
+const text_js_1 = require("../typography/text.js");
+const column_collection_js_1 = require("./contexts/column-collection.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+const use_table_cell_js_1 = require("./hooks/use-table-cell.js");
+function TableEmptyState(props, ref) {
+    const rowKey = (0, utils_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, children: (0, jsx_runtime_1.jsx)(TableEmptyStateInner, { props: props, forwardedRef: ref }) }));
+}
+/**
+ * Renders an empty state within a table that has no data.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableEmptyState = (0, forward_ref_js_1.forwardRef)(TableEmptyState, 'TableEmptyState');
+exports.TableEmptyState = _TableEmptyState;
+function TableEmptyStateInner({ props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props }, forwardedRef, }) {
+    const cellRef = (0, utils_1.useObjectRef)(forwardedRef);
+    const { columnKey, colSpan } = (0, column_collection_js_1.useEmptyStateCell)(cellRef);
+    const { rowKey } = (0, row_state_js_1.useTableRowState)();
+    // `useTableCell` requires `TableRowStateProvider`
+    const { cellProps } = (0, use_table_cell_js_1.useTableCell)(cellRef, rowKey, columnKey);
+    const columnData = (0, column_collection_js_1.useColumnData)(columnKey);
+    return ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: (0, clsx_1.default)('cim-table-empty-state', UNSAFE_className), style: UNSAFE_style, "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-table-empty-state-content", children: [(0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "title-6", tone: "base", children: title }), (0, jsx_runtime_1.jsx)(text_js_1.Text, { as: "span", variant: "medium", tone: "base", children: description }), action && (0, jsx_runtime_1.jsx)("div", { className: "cim-table-empty-state-action", children: action })] }) }) }, "__cim__internal__empty-state__"));
+}
+//# sourceMappingURL=table-empty-state.js.map

package/dist/commonjs/components/table/table-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-empty-state.js","sourceRoot":"","sources":["../../../../src/components/table/table-empty-state.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,6CAAoE;AACpE,gDAAwB;AAExB,yDAAkD;AAElD,mDAA6C;AAC7C,0EAAmF;AACnF,0DAAkF;AAClF,iEAAyD;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,uBAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,2BAAU,EAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AA6C3C,2CAAe;AAtC5C,SAAS,oBAAoB,CAAC,EAC5B,KAAK,EAAE,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY,GACc;IAC1B,MAAM,OAAO,GAAG,IAAA,oBAAY,EAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAA,wCAAiB,EAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,IAAA,oCAAa,EAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,yCACE,kCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAA,cAAI,EAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,iCAAK,SAAS,EAAC,+BAA+B,aAC5C,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,uBAAC,cAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,gCAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n  /** The title of the empty state. */\n  title: string;\n  /** The description of the empty state. */\n  description: string;\n  /** An optional action button displayed within the empty state. */\n  action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableEmptyStateInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\n/**\n * Renders an empty state within a table that has no data.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n  props: TableEmptyStateProps;\n  forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n  props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n  forwardedRef,\n}: TableEmptyStateInnerProps) {\n  const cellRef = useObjectRef(forwardedRef);\n  const { columnKey, colSpan } = useEmptyStateCell(cellRef);\n  const { rowKey } = useTableRowState();\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n\n  return (\n    <tr key=\"__cim__internal__empty-state__\">\n      <td\n        {...mergeProps(props, cellProps)}\n        ref={cellRef}\n        className={clsx('cim-table-empty-state', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-empty-state-content\">\n          <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n            {title}\n          </Text>\n\n          <Text as=\"span\" variant=\"medium\" tone=\"base\">\n            {description}\n          </Text>\n\n          {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n        </div>\n      </td>\n    </tr>\n  );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}

package/dist/commonjs/components/table/table-header-button.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table-header-button.d.ts.map

package/dist/commonjs/components/table/table-header-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-button.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-button.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/table/table-header-button.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeaderButton = TableHeaderButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_aria_components_1 = require("react-aria-components");
+/**
+ * @internal
+ */
+function TableHeaderButton({ UNSAFE_className, UNSAFE_style, icon, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { ...props, className: (0, clsx_1.default)('cim-table-header-button', UNSAFE_className), style: UNSAFE_style, children: icon }));
+}
+//# sourceMappingURL=table-header-button.js.map

package/dist/commonjs/components/table/table-header-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-button.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-button.tsx"],"names":[],"mappings":";;;;;AAaA,8CAMC;;AAnBD,gDAAwB;AAExB,iEAAgG;AAQhG;;GAEG;AACH,SAAgB,iBAAiB,CAAC,EAAE,gBAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,KAAK,EAA0B;IAC1G,OAAO,CACL,uBAAC,8BAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,yBAAyB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,YACpG,IAAI,GACK,CACb,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport { type ButtonProps as RACButtonProps, Button as RACButton } from 'react-aria-components';\nimport type { CommonProps, LabellableProps } from '../types.js';\n\ninterface TableHeaderButtonProps extends CommonProps, Omit<LabellableProps, 'label'>, Pick<RACButtonProps, 'onPress'> {\n  /** The icon displayed within the button. */\n  icon: ReactNode;\n}\n\n/**\n * @internal\n */\nexport function TableHeaderButton({ UNSAFE_className, UNSAFE_style, icon, ...props }: TableHeaderButtonProps) {\n  return (\n    <RACButton {...props} className={clsx('cim-table-header-button', UNSAFE_className)} style={UNSAFE_style}>\n      {icon}\n    </RACButton>\n  );\n}\n"]}

package/dist/commonjs/components/table/table-header-cell.d.ts

@@ -1,6 +1,10 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableHeaderCellProps extends CommonProps {
+import { type ColumnContentAlignment } from './contexts/column-collection.js';
+/** Represents the sort order of a table column. */
+export type TableColumnSortOrder = 'ascending' | 'descending';
+export interface TableHeaderCellProps extends CommonProps {
+    /** The contents of the header cell. */
     children: ReactNode;
     /**
      * A unique identifier for the column that this cell belongs to.
@@ -20,7 +24,32 @@ export interface UNSTABLE_TableHeaderCellProps extends CommonProps {
      * Use together with `totalColumnCount` on the `Table` component.
      */
     columnNumber?: number;
+    /** The width of the column. Can be any valid value of the `width` CSS property. */
+    columnWidth?: string | number;
+    /**
+     * Horizontal alignment of cell content within the column.
+     * @default 'start'
+     */
+    columnContentAlignment?: ColumnContentAlignment;
+    /**
+     * The current sort order of the column.
+     */
+    sortOrder?: TableColumnSortOrder;
+    /**
+     * A function called when the column's sort order should change.
+     * If not provided, the column will not be sortable.
+     */
+    onSortOrderToggle?: () => void;
+    /** An icon displayed before the header text. */
+    iconStart?: ReactNode;
+    /** An icon displayed after the header text. */
+    iconEnd?: ReactNode;
 }
-declare const _UNSTABLE_TableHeaderCell: (props: UNSTABLE_TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableHeaderCell as UNSTABLE_TableHeaderCell };
+/**
+ * Renders a header cell within a table header row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
+export { _TableHeaderCell as TableHeaderCell };
 //# sourceMappingURL=table-header-cell.d.ts.map

package/dist/commonjs/components/table/table-header-cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAChE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAwBD,QAAA,MAAM,yBAAyB,oIAA0D,CAAC;AAE1F,OAAO,EAAE,yBAAyB,IAAI,wBAAwB,EAAE,CAAC"}
+{"version":3,"file":"table-header-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAMrG,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG,YAAY,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,uCAAuC;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;IAChD;;OAEG;IACH,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

package/dist/commonjs/components/table/table-header-cell.js

@@ -1,17 +1,50 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableHeaderCell = void 0;
+exports.TableHeaderCell = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
 const forward_ref_js_1 = require("../../forward-ref.js");
+const index_js_1 = require("../../icons/index.js");
+const use_server_layout_effect_js_1 = require("../../utils/use-server-layout-effect.js");
+const column_collection_js_1 = require("./contexts/column-collection.js");
 const row_state_js_1 = require("./contexts/row-state.js");
+const table_state_js_1 = require("./contexts/table-state.js");
 const use_table_cell_js_1 = require("./hooks/use-table-cell.js");
-function UNSTABLE_TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }, ref) {
+const table_header_button_js_1 = require("./table-header-button.js");
+const SORT_ORDER_ICONS = {
+    ascending: (0, jsx_runtime_1.jsx)(index_js_1.IconSortAscending, {}),
+    descending: (0, jsx_runtime_1.jsx)(index_js_1.IconSortDescending, {}),
+};
+function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, columnWidth, columnContentAlignment = 'start', sortOrder, onSortOrderToggle, iconStart, iconEnd, ...props }, ref) {
     const cellRef = (0, utils_1.useObjectRef)(ref);
     const { rowKey } = (0, row_state_js_1.useTableRowState)();
     const { cellProps } = (0, use_table_cell_js_1.useTableCell)(cellRef, rowKey, columnKey);
-    return ((0, jsx_runtime_1.jsx)("th", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: UNSAFE_style, scope: "col", "aria-colindex": columnNumber, children: children }));
+    const registerColumn = (0, column_collection_js_1.useColumnRegistration)();
+    const unregisterRef = (0, react_1.useRef)(null);
+    const { sortLabelId } = (0, table_state_js_1.useTableState)();
+    const contentId = (0, utils_1.useId)();
+    const isSortable = typeof onSortOrderToggle === 'function';
+    // Columns need to be registered during SSR to prevent layout shifting on hydration
+    (0, use_server_layout_effect_js_1.useServerLayoutEffect)(() => {
+        unregisterRef.current = registerColumn(columnKey, {
+            number: columnNumber,
+            width: columnWidth,
+            contentAlignment: columnContentAlignment,
+        });
+        return () => {
+            unregisterRef.current?.();
+            unregisterRef.current = null;
+        };
+    }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);
+    return ((0, jsx_runtime_1.jsx)("th", { ...(0, utils_1.mergeProps)(props, cellProps), ref: cellRef, className: UNSAFE_className, style: columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style, scope: "col", "aria-colindex": columnNumber, "aria-sort": sortOrder, "data-alignment": columnContentAlignment, children: (0, jsx_runtime_1.jsxs)("div", { className: "cim-table-header-cell-container", children: [iconStart, (0, jsx_runtime_1.jsx)("span", { id: contentId, children: children }), iconEnd, isSortable ? ((0, jsx_runtime_1.jsx)(table_header_button_js_1.TableHeaderButton, { UNSAFE_className: "cim-table-header-sort-button", "aria-labelledby": `${sortLabelId} ${contentId}`, icon: sortOrder ? SORT_ORDER_ICONS[sortOrder] : (0, jsx_runtime_1.jsx)(index_js_1.IconSortUnsorted, {}), onPress: () => onSortOrderToggle(), "data-highlighted": !!sortOrder || undefined })) : sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : undefined] }) }));
 }
-const _UNSTABLE_TableHeaderCell = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableHeaderCell, 'TableHeaderCell');
-exports.UNSTABLE_TableHeaderCell = _UNSTABLE_TableHeaderCell;
+/**
+ * Renders a header cell within a table header row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableHeaderCell = (0, forward_ref_js_1.forwardRef)(TableHeaderCell, 'TableHeaderCell');
+exports.TableHeaderCell = _TableHeaderCell;
 //# sourceMappingURL=table-header-cell.js.map

package/dist/commonjs/components/table/table-header-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6D;AAE7D,yDAAkD;AAElD,0DAA2D;AAC3D,iEAAyD;AAwBzD,SAAS,wBAAwB,CAC/B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAiC,EAC9G,GAAuC;IAEvC,MAAM,OAAO,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAE/D,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,EACnB,KAAK,EAAC,KAAK,mBACI,YAAY,YAE1B,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,yBAAyB,GAAG,IAAA,2BAAU,EAAC,wBAAwB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,6DAAwB","sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface UNSTABLE_TableHeaderCellProps extends CommonProps {\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n  /**\n   * The position of the column that this cell belongs to within the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `columnNumber` of any previous cells in the current row\n   * - less than or equal to the `totalColumnCount` of the parent `Table`\n   *\n   * Use together with `totalColumnCount` on the `Table` component.\n   */\n  columnNumber?: number;\n}\n\nfunction UNSTABLE_TableHeaderCell(\n  { children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }: UNSTABLE_TableHeaderCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n\n  return (\n    <th\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      scope=\"col\"\n      aria-colindex={columnNumber}\n    >\n      {children}\n    </th>\n  );\n}\n\nconst _UNSTABLE_TableHeaderCell = forwardRef(UNSTABLE_TableHeaderCell, 'TableHeaderCell');\n\nexport { _UNSTABLE_TableHeaderCell as UNSTABLE_TableHeaderCell };\n"]}
+{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAAoE;AACpE,iCAAkE;AAClE,yDAAkD;AAClD,mDAA+F;AAC/F,yFAAgF;AAEhF,0EAAqG;AACrG,0DAA2D;AAC3D,8DAA0D;AAC1D,iEAAyD;AACzD,qEAA6D;AAgD7D,MAAM,gBAAgB,GAA4C;IAChE,SAAS,EAAE,uBAAC,4BAAiB,KAAG;IAChC,UAAU,EAAE,uBAAC,6BAAkB,KAAG;CACnC,CAAC;AAEF,SAAS,eAAe,CACtB,EACE,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,WAAW,EACX,sBAAsB,GAAG,OAAO,EAChC,SAAS,EACT,iBAAiB,EACjB,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACa,EACvB,GAAuC;IAEvC,MAAM,OAAO,GAAG,IAAA,oBAAY,EAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IACtC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAY,EAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,IAAA,4CAAqB,GAAE,CAAC;IAC/C,MAAM,aAAa,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IAExD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IACxC,MAAM,SAAS,GAAG,IAAA,aAAK,GAAE,CAAC;IAE1B,MAAM,UAAU,GAAG,OAAO,iBAAiB,KAAK,UAAU,CAAC;IAE3D,mFAAmF;IACnF,IAAA,mDAAqB,EAAC,GAAG,EAAE;QACzB,aAAa,CAAC,OAAO,GAAG,cAAc,CAAC,SAAS,EAAE;YAChD,MAAM,EAAE,YAAY;YACpB,KAAK,EAAE,WAAW;YAClB,gBAAgB,EAAE,sBAAsB;SACzC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,aAAa,CAAC,OAAO,EAAE,EAAE,CAAC;YAC1B,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,kCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,YAAY,EAC3E,KAAK,EAAC,KAAK,mBACI,YAAY,eAChB,SAAS,oBACJ,sBAAsB,YAEtC,iCAAK,SAAS,EAAC,iCAAiC,aAC7C,SAAS,EACV,iCAAM,EAAE,EAAE,SAAS,YAAG,QAAQ,GAAQ,EACrC,OAAO,EACP,UAAU,CAAC,CAAC,CAAC,CACZ,uBAAC,0CAAiB,IAChB,gBAAgB,EAAC,8BAA8B,qBAC9B,GAAG,WAAW,IAAI,SAAS,EAAE,EAC9C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,uBAAC,2BAAgB,KAAG,EACpE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,sBAChB,CAAC,CAAC,SAAS,IAAI,SAAS,GAC1C,CACH,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACd,gBAAgB,CAAC,SAAS,CAAC,CAC5B,CAAC,CAAC,CAAC,SAAS,IACT,GACH,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,IAAA,2BAAU,EAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAE3C,2CAAe","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';\nimport { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';\nimport type { CommonProps } from '../types.js';\nimport { type ColumnContentAlignment, useColumnRegistration } from './contexts/column-collection.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\nimport { TableHeaderButton } from './table-header-button.js';\n\n/** Represents the sort order of a table column. */\nexport type TableColumnSortOrder = 'ascending' | 'descending';\n\nexport interface TableHeaderCellProps extends CommonProps {\n  /** The contents of the header cell. */\n  children: ReactNode;\n  /**\n   * A unique identifier for the column that this cell belongs to.\n   * Cells that belong to the same column must have the same `columnKey`.\n   */\n  columnKey: string;\n  /**\n   * The position of the column that this cell belongs to within the full dataset.\n   *\n   * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `columnNumber` of any previous cells in the current row\n   * - less than or equal to the `totalColumnCount` of the parent `Table`\n   *\n   * Use together with `totalColumnCount` on the `Table` component.\n   */\n  columnNumber?: number;\n  /** The width of the column. Can be any valid value of the `width` CSS property. */\n  columnWidth?: string | number;\n  /**\n   * Horizontal alignment of cell content within the column.\n   * @default 'start'\n   */\n  columnContentAlignment?: ColumnContentAlignment;\n  /**\n   * The current sort order of the column.\n   */\n  sortOrder?: TableColumnSortOrder;\n  /**\n   * A function called when the column's sort order should change.\n   * If not provided, the column will not be sortable.\n   */\n  onSortOrderToggle?: () => void;\n  /** An icon displayed before the header text. */\n  iconStart?: ReactNode;\n  /** An icon displayed after the header text. */\n  iconEnd?: ReactNode;\n}\n\nconst SORT_ORDER_ICONS: Record<TableColumnSortOrder, ReactNode> = {\n  ascending: <IconSortAscending />,\n  descending: <IconSortDescending />,\n};\n\nfunction TableHeaderCell(\n  {\n    children,\n    UNSAFE_className,\n    UNSAFE_style,\n    columnKey,\n    columnNumber,\n    columnWidth,\n    columnContentAlignment = 'start',\n    sortOrder,\n    onSortOrderToggle,\n    iconStart,\n    iconEnd,\n    ...props\n  }: TableHeaderCellProps,\n  ref: ForwardedRef<HTMLTableCellElement>,\n) {\n  const cellRef = useObjectRef(ref);\n  const { rowKey } = useTableRowState();\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const registerColumn = useColumnRegistration();\n  const unregisterRef = useRef<(() => void) | null>(null);\n\n  const { sortLabelId } = useTableState();\n  const contentId = useId();\n\n  const isSortable = typeof onSortOrderToggle === 'function';\n\n  // Columns need to be registered during SSR to prevent layout shifting on hydration\n  useServerLayoutEffect(() => {\n    unregisterRef.current = registerColumn(columnKey, {\n      number: columnNumber,\n      width: columnWidth,\n      contentAlignment: columnContentAlignment,\n    });\n\n    return () => {\n      unregisterRef.current?.();\n      unregisterRef.current = null;\n    };\n  }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);\n\n  return (\n    <th\n      {...mergeProps(props, cellProps)}\n      ref={cellRef}\n      className={UNSAFE_className}\n      style={columnWidth ? { ...UNSAFE_style, width: columnWidth } : UNSAFE_style}\n      scope=\"col\"\n      aria-colindex={columnNumber}\n      aria-sort={sortOrder}\n      data-alignment={columnContentAlignment}\n    >\n      <div className=\"cim-table-header-cell-container\">\n        {iconStart}\n        <span id={contentId}>{children}</span>\n        {iconEnd}\n        {isSortable ? (\n          <TableHeaderButton\n            UNSAFE_className=\"cim-table-header-sort-button\"\n            aria-labelledby={`${sortLabelId} ${contentId}`}\n            icon={sortOrder ? SORT_ORDER_ICONS[sortOrder] : <IconSortUnsorted />}\n            onPress={() => onSortOrderToggle()}\n            data-highlighted={!!sortOrder || undefined}\n          />\n        ) : sortOrder ? (\n          SORT_ORDER_ICONS[sortOrder]\n        ) : undefined}\n      </div>\n    </th>\n  );\n}\n\n/**\n * Renders a header cell within a table header row.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');\n\nexport { _TableHeaderCell as TableHeaderCell };\n"]}

package/dist/commonjs/components/table/table-header-row.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface TableHeaderRowProps extends CommonProps {
+    /** The header cells that belong to this header row. */
+    children: ReactNode;
+    /**
+     * The row's position within the full dataset, including headers.
+     *
+     * Provide this value if your table presents a subset of rows, such as when using pagination.
+     *
+     * This number must be:
+     * - greater than or equal to `1`
+     * - greater than the `rowNumber` of any previous rows
+     * - less than or equal to the `totalRowCount` of the parent `Table`
+     *
+     * Use together with `totalRowCount` on the `Table` component.
+     */
+    rowNumber?: number;
+}
+/**
+ * Renders a row within a table header.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableHeaderRow: (props: TableHeaderRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").JSX.Element | null;
+export { _TableHeaderRow as TableHeaderRow };
+//# sourceMappingURL=table-header-row.d.ts.map

package/dist/commonjs/components/table/table-header-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-row.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAeD;;;;GAIG;AACH,QAAA,MAAM,eAAe,yHAA+C,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

package/dist/commonjs/components/table/table-header-row.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeaderRow = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@react-aria/utils");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+function TableHeaderRow({ children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, ref) {
+    const rowKey = (0, utils_1.useId)();
+    return ((0, jsx_runtime_1.jsx)("tr", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, children: (0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, children: children }) }));
+}
+/**
+ * Renders a row within a table header.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableHeaderRow = (0, forward_ref_js_1.forwardRef)(TableHeaderRow, 'TableHeaderRow');
+exports.TableHeaderRow = _TableHeaderRow;
+//# sourceMappingURL=table-header-row.js.map

package/dist/commonjs/components/table/table-header-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-row.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-row.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA0C;AAE1C,yDAAkD;AAElD,0DAAgE;AAoBhE,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,EACtF,GAAsC;IAEtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC;IAEvB,OAAO,CACL,kCAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,mBAAiB,SAAS,YACjG,uBAAC,oCAAqB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAyB,GACtE,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,IAAA,2BAAU,EAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAEzC,yCAAc","sourcesContent":["'use client';\n\nimport { useId } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { TableRowStateProvider } from './contexts/row-state.js';\n\nexport interface TableHeaderRowProps extends CommonProps {\n  /** The header cells that belong to this header row. */\n  children: ReactNode;\n  /**\n   * The row's position within the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   *\n   * This number must be:\n   * - greater than or equal to `1`\n   * - greater than the `rowNumber` of any previous rows\n   * - less than or equal to the `totalRowCount` of the parent `Table`\n   *\n   * Use together with `totalRowCount` on the `Table` component.\n   */\n  rowNumber?: number;\n}\n\nfunction TableHeaderRow(\n  { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }: TableHeaderRowProps,\n  ref: ForwardedRef<HTMLTableRowElement>,\n) {\n  const rowKey = useId();\n\n  return (\n    <tr {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style} aria-rowindex={rowNumber}>\n      <TableRowStateProvider rowKey={rowKey}>{children}</TableRowStateProvider>\n    </tr>\n  );\n}\n\n/**\n * Renders a row within a table header.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeaderRow = forwardRef(TableHeaderRow, 'TableHeaderRow');\n\nexport { _TableHeaderRow as TableHeaderRow };\n"]}

package/dist/commonjs/components/table/table-header.d.ts

@@ -1,8 +1,14 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableHeaderProps extends CommonProps {
+export interface TableHeaderProps extends CommonProps {
+    /** The header rows that belong to this table header. */
     children: ReactNode;
 }
-declare const _UNSTABLE_TableHeader: (props: UNSTABLE_TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableHeader as UNSTABLE_TableHeader };
+/**
+ * Renders a header section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableHeader: (props: TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>) => import("react").JSX.Element | null;
+export { _TableHeader as TableHeader };
 //# sourceMappingURL=table-header.d.ts.map

package/dist/commonjs/components/table/table-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,yBAA0B,SAAQ,WAAW;IAC5D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD,QAAA,MAAM,qBAAqB,mIAAkD,CAAC;AAE9E,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAaD;;;;GAIG;AACH,QAAA,MAAM,YAAY,0HAAyC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC"}

package/dist/commonjs/components/table/table-header.js

@@ -1,11 +1,17 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableHeader = void 0;
+exports.TableHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const forward_ref_js_1 = require("../../forward-ref.js");
-function UNSTABLE_TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
-const _UNSTABLE_TableHeader = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableHeader, 'TableHeader');
-exports.UNSTABLE_TableHeader = _UNSTABLE_TableHeader;
+/**
+ * Renders a header section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableHeader = (0, forward_ref_js_1.forwardRef)(TableHeader, 'TableHeader');
+exports.TableHeader = _TableHeader;
 //# sourceMappingURL=table-header.js.map

package/dist/commonjs/components/table/table-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":";;;;AACA,yDAAkD;AAOlD,SAAS,oBAAoB,CAC3B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA6B,EACjF,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,IAAA,2BAAU,EAAC,oBAAoB,EAAE,aAAa,CAAC,CAAC;AAE5C,qDAAoB","sourcesContent":["import type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_TableHeaderProps extends CommonProps {\n  children: ReactNode;\n}\n\nfunction UNSTABLE_TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <thead {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\nconst _UNSTABLE_TableHeader = forwardRef(UNSTABLE_TableHeader, 'TableHeader');\n\nexport { _UNSTABLE_TableHeader as UNSTABLE_TableHeader };\n"]}
+{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAQlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,OAAO,CACL,qCAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,YAAY,GAAG,IAAA,2BAAU,EAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAEnC,mCAAW","sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TableHeaderProps extends CommonProps {\n  /** The header rows that belong to this table header. */\n  children: ReactNode;\n}\n\nfunction TableHeader(\n  { children, UNSAFE_className, UNSAFE_style, ...props }: TableHeaderProps,\n  ref: ForwardedRef<HTMLTableSectionElement>,\n) {\n  return (\n    <thead {...props} ref={ref} className={UNSAFE_className} style={UNSAFE_style}>\n      {children}\n    </thead>\n  );\n}\n\n/**\n * Renders a header section within a table.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableHeader = forwardRef(TableHeader, 'TableHeader');\n\nexport { _TableHeader as TableHeader };\n"]}

package/dist/commonjs/components/table/table-row-selector.d.ts

@@ -0,0 +1,11 @@
+import type { CommonProps, LabellableProps } from '../types.js';
+export interface TableRowSelectorProps extends CommonProps, Omit<LabellableProps, 'label'> {
+}
+/**
+ * Controls the selection state of a single row within a table.
+ *
+ * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableRowSelector: (props: TableRowSelectorProps & import("react").RefAttributes<HTMLLabelElement>) => import("react").JSX.Element | null;
+export { _TableRowSelector as TableRowSelector };
+//# sourceMappingURL=table-row-selector.d.ts.map

package/dist/commonjs/components/table/table-row-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-selector.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-row-selector.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;CAAG;AAa7F;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,wHAAmD,CAAC;AAE3E,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}

package/dist/commonjs/components/table/table-row-selector.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRowSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../forward-ref.js");
+const checkbox_js_1 = require("../checkbox/checkbox.js");
+const row_state_js_1 = require("./contexts/row-state.js");
+const table_state_js_1 = require("./contexts/table-state.js");
+function TableRowSelector(props, ref) {
+    const { rowSelectionMode } = (0, table_state_js_1.useTableState)();
+    const { isSelected, onSelectionToggle } = (0, row_state_js_1.useTableRowState)();
+    if (rowSelectionMode === 'none') {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(checkbox_js_1.Checkbox, { ...props, ref: ref, isSelected: isSelected, onChange: onSelectionToggle });
+}
+/**
+ * Controls the selection state of a single row within a table.
+ *
+ * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableRowSelector = (0, forward_ref_js_1.forwardRef)(TableRowSelector, 'TableRowSelector');
+exports.TableRowSelector = _TableRowSelector;
+//# sourceMappingURL=table-row-selector.js.map

package/dist/commonjs/components/table/table-row-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-row-selector.js","sourceRoot":"","sources":["../../../../src/components/table/table-row-selector.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAGb,yDAAkD;AAClD,yDAAmD;AAEnD,0DAA2D;AAC3D,8DAA0D;AAI1D,SAAS,gBAAgB,CAAC,KAA4B,EAAE,GAAmC;IACzF,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAC7C,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,IAAA,+BAAgB,GAAE,CAAC;IAE7D,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,uBAAC,sBAAQ,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,GAAI,CAAC;AAChG,CAAC;AAED;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,IAAA,2BAAU,EAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AAE7C,6CAAgB","sourcesContent":["'use client';\n\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { Checkbox } from '../checkbox/checkbox.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { useTableRowState } from './contexts/row-state.js';\nimport { useTableState } from './contexts/table-state.js';\n\nexport interface TableRowSelectorProps extends CommonProps, Omit<LabellableProps, 'label'> {}\n\nfunction TableRowSelector(props: TableRowSelectorProps, ref: ForwardedRef<HTMLLabelElement>) {\n  const { rowSelectionMode } = useTableState();\n  const { isSelected, onSelectionToggle } = useTableRowState();\n\n  if (rowSelectionMode === 'none') {\n    return null;\n  }\n\n  return <Checkbox {...props} ref={ref} isSelected={isSelected} onChange={onSelectionToggle} />;\n}\n\n/**\n * Controls the selection state of a single row within a table.\n *\n * See [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableRowSelector = forwardRef(TableRowSelector, 'TableRowSelector');\n\nexport { _TableRowSelector as TableRowSelector };\n"]}