@cimpress-ui/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBodyRow = 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");
+const table_state_js_1 = require("./contexts/table-state.js");
+const use_selectable_row_js_1 = require("./hooks/use-selectable-row.js");
+function TableBodyRow({ isSelected, onSelectionToggle, ...props }, ref) {
+    const rowKey = (0, utils_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(row_state_js_1.TableRowStateProvider, { rowKey: rowKey, isSelected: isSelected, onSelectionToggle: onSelectionToggle, children: (0, jsx_runtime_1.jsx)(TableBodyRowInner, { props: props, forwardedRef: ref }) }));
+}
+/**
+ * Renders a row within a table body.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableBodyRow = (0, forward_ref_js_1.forwardRef)(TableBodyRow, 'TableBodyRow');
+exports.TableBodyRow = _TableBodyRow;
+function TableBodyRowInner({ props: { children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, forwardedRef, }) {
+    const { rowSelectionMode } = (0, table_state_js_1.useTableState)();
+    const { isSelected } = (0, row_state_js_1.useTableRowState)();
+    const { rowProps } = (0, use_selectable_row_js_1.useSelectableRow)();
+    return ((0, jsx_runtime_1.jsx)("tr", { ...(0, utils_1.mergeProps)(rowProps, props), ref: forwardedRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, "aria-selected": rowSelectionMode !== 'none' ? (isSelected ?? false) : undefined, children: children }));
+}
+//# sourceMappingURL=table-body-row.js.map

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface TableBodyProps extends CommonProps {
+    /** The rows that belong to this table body. */
+    children: ReactNode;
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableBody = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../forward-ref.js");
+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 }));
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,14 @@
+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;
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +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.TableContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const forward_ref_js_1 = require("../../forward-ref.js");
+const with_style_props_js_1 = require("../../with-style-props.js");
+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 }));
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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: "title", 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,OAAO,YAC3C,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=\"title\">\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-cell.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+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.
+     * Cells that belong to the same column must have the same `columnKey`.
+     */
+    columnKey: string;
+    /**
+     * The position of the column that this cell belongs to within the full dataset.
+     *
+     * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.
+     *
+     * This number must be:
+     * - greater than or equal to `1`
+     * - greater than the `columnNumber` of any previous cells in the current row
+     * - less than or equal to the `totalColumnCount` of the parent `Table`
+     *
+     * 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;
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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;AAKlE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,KAAK,sBAAsB,EAAyB,MAAM,iCAAiC,CAAC;AAIrG,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;AAoFD;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,2HAAiD,CAAC;AAExE,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC"}

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

@@ -0,0 +1,48 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 react_aria_components_1 = require("react-aria-components");
+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 use_table_cell_js_1 = require("./hooks/use-table-cell.js");
+const SORT_ORDER_ICONS = {
+    ascending: (0, jsx_runtime_1.jsx)(index_js_1.IconSortAscending, { UNSAFE_className: "cim-table-sort-icon" }),
+    descending: (0, jsx_runtime_1.jsx)(index_js_1.IconSortDescending, { UNSAFE_className: "cim-table-sort-icon" }),
+};
+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);
+    const registerColumn = (0, column_collection_js_1.useColumnRegistration)();
+    const unregisterRef = (0, react_1.useRef)(null);
+    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]);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart, (0, jsx_runtime_1.jsx)("span", { children: children }), iconEnd, sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : isSortable ? ((0, jsx_runtime_1.jsx)(index_js_1.IconSortUnsorted, { UNSAFE_className: "cim-table-sort-icon" })) : undefined] }));
+    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: isSortable ? ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { className: "cim-table-sort-button cim-table-header-cell-container", onPress: () => onSortOrderToggle(), children: content })) : ((0, jsx_runtime_1.jsx)("div", { className: "cim-table-header-cell-container", children: content })) }));
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA6D;AAC7D,iCAAkE;AAClE,iEAA4D;AAC5D,yDAAkD;AAClD,mDAA+F;AAC/F,yFAAgF;AAEhF,0EAAqG;AACrG,0DAA2D;AAC3D,iEAAyD;AAgDzD,MAAM,gBAAgB,GAA4C;IAChE,SAAS,EAAE,uBAAC,4BAAiB,IAAC,gBAAgB,EAAC,qBAAqB,GAAG;IACvE,UAAU,EAAE,uBAAC,6BAAkB,IAAC,gBAAgB,EAAC,qBAAqB,GAAG;CAC1E,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,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,MAAM,OAAO,GAAG,CACd,6DACG,SAAS,EACV,2CAAO,QAAQ,GAAQ,EACtB,OAAO,EACP,SAAS,CAAC,CAAC,CAAC,CACX,gBAAgB,CAAC,SAAS,CAAC,CAC5B,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,uBAAC,2BAAgB,IAAC,gBAAgB,EAAC,qBAAqB,GAAG,CAC5D,CAAC,CAAC,CAAC,SAAS,IACZ,CACJ,CAAC;IAEF,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,YAErC,UAAU,CAAC,CAAC,CAAC,CACZ,uBAAC,8BAAS,IACR,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,YAEjC,OAAO,GACE,CACb,CAAC,CAAC,CAAC,CACF,gCAAK,SAAS,EAAC,iCAAiC,YAAE,OAAO,GAAO,CACjE,GACE,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, useObjectRef } from '@react-aria/utils';\nimport { useRef, type ForwardedRef, type ReactNode } from 'react';\nimport { Button as RACButton } from 'react-aria-components';\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 { useTableCell } from './hooks/use-table-cell.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 UNSAFE_className=\"cim-table-sort-icon\" />,\n  descending: <IconSortDescending UNSAFE_className=\"cim-table-sort-icon\" />,\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 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  const content = (\n    <>\n      {iconStart}\n      <span>{children}</span>\n      {iconEnd}\n      {sortOrder ? (\n        SORT_ORDER_ICONS[sortOrder]\n      ) : isSortable ? (\n        <IconSortUnsorted UNSAFE_className=\"cim-table-sort-icon\" />\n      ) : undefined}\n    </>\n  );\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      {isSortable ? (\n        <RACButton\n          className=\"cim-table-sort-button cim-table-header-cell-container\"\n          onPress={() => onSortOrderToggle()}\n        >\n          {content}\n        </RACButton>\n      ) : (\n        <div className=\"cim-table-header-cell-container\">{content}</div>\n      )}\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

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+export interface TableHeaderProps extends CommonProps {
+    /** The header rows that belong to this table header. */
+    children: ReactNode;
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const forward_ref_js_1 = require("../../forward-ref.js");
+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 }));
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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"]}

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

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import type { AriaLabelingProps, CommonProps } from '../types.js';
+import { type RowSelectionMode } from './contexts/table-state.js';
+export interface TableProps extends CommonProps, AriaLabelingProps {
+    /** The contents of the table. */
+    children: ReactNode;
+    /**
+     * The number of rows in the full dataset, including headers.
+     *
+     * Provide this value if your table presents a subset of rows, such as when using pagination.
+     * Use `-1` if the number of rows is not known.
+     *
+     * You must provide `rowNumber` on each table row if `totalRowCount` is defined.
+     */
+    totalRowCount?: number;
+    /**
+     * The number of columns in the full dataset.
+     *
+     * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.
+     * Use `-1` if the number of columns is not known.
+     *
+     * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.
+     */
+    totalColumnCount?: number;
+    /**
+     * The type of row selection that is allowed within the table.
+     * @default 'none'
+     */
+    rowSelectionMode?: RowSelectionMode;
+    /**
+     * Whether all of the table's rows are selected.
+     * The meaning of "all rows" is dictated by the consumer.
+     */
+    areAllRowsSelected?: boolean;
+    /**
+     * Whether some (but not all) of the table's rows are selected.
+     * The meaning of "some rows" is dictated by the consumer.
+     */
+    areSomeRowsSelected?: boolean;
+    /**
+     * A function called when the selection state of all rows should change.
+     *
+     * If called without an argument, you are free to pick the new selection state based on your own logic.
+     * If called with an argument, you must set the selection state to the provided value.
+     */
+    onAllRowsSelectionToggle?: (value?: boolean) => void;
+}
+/**
+ * Displays data in an organized, tabular way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _Table: (props: TableProps & import("react").RefAttributes<HTMLTableElement>) => import("react").JSX.Element | null;
+export { _Table as Table };
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,2BAA2B,CAAC;AAGrG,MAAM,WAAW,UAAW,SAAQ,WAAW,EAAE,iBAAiB;IAChE,iCAAiC;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACtD;AAqED;;;;GAIG;AACH,QAAA,MAAM,MAAM,6GAA6B,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC"}

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

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = 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 column_collection_js_1 = require("./contexts/column-collection.js");
+const focus_js_1 = require("./contexts/focus.js");
+const table_state_js_1 = require("./contexts/table-state.js");
+const use_table_js_1 = require("./hooks/use-table.js");
+function Table({ rowSelectionMode = 'none', areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    (0, react_1.useEffect)(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Table requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    return ((0, jsx_runtime_1.jsx)(focus_js_1.TableFocusProvider, { children: (0, jsx_runtime_1.jsx)(table_state_js_1.TableStateProvider, { rowSelectionMode: rowSelectionMode, areAllRowsSelected: areAllRowsSelected, areSomeRowsSelected: areSomeRowsSelected, onAllRowsSelectionToggle: onAllRowsSelectionToggle, children: (0, jsx_runtime_1.jsxs)(column_collection_js_1.ColumnCollectionProvider, { children: [(0, jsx_runtime_1.jsx)("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(TableInner, { props: props, forwardedRef: ref }), (0, jsx_runtime_1.jsx)("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true })] }) }) }));
+}
+function TableInner({ props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props }, forwardedRef, }) {
+    const tableRef = (0, utils_1.useObjectRef)(forwardedRef);
+    const { tableProps } = (0, use_table_js_1.useTable)(tableRef);
+    const { rowSelectionMode } = (0, table_state_js_1.useTableState)();
+    return ((0, jsx_runtime_1.jsx)("table", { ...(0, utils_1.mergeProps)(props, tableProps), ref: tableRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowcount": totalRowCount, "aria-colcount": totalColumnCount, "aria-multiselectable": rowSelectionMode === 'multiple' ? true : undefined, children: children }));
+}
+/**
+ * Displays data in an organized, tabular way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _Table = (0, forward_ref_js_1.forwardRef)(Table, 'Table');
+exports.Table = _Table;
+//# sourceMappingURL=table.js.map