@cimpress-ui/react 0.2.1 → 0.3.0

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: "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

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

@@ -1,17 +1,48 @@
+'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 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");
-function UNSTABLE_TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }, ref) {
+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);
-    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 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 })) }));
 }
-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,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-row.d.ts → table-header-row.d.ts}

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TableRowProps extends CommonProps {
+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.
@@ -16,6 +17,11 @@ export interface UNSTABLE_TableRowProps extends CommonProps {
      */
     rowNumber?: number;
 }
-declare const _UNSTABLE_TableRow: (props: UNSTABLE_TableRowProps & import("react").RefAttributes<HTMLTableRowElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_TableRow as UNSTABLE_TableRow };
-//# sourceMappingURL=table-row.d.ts.map
+/**
+ * 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-row.js → table-header-row.js}

@@ -1,14 +1,20 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TableRow = void 0;
+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 UNSTABLE_TableRow({ children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, ref) {
+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 }) }));
 }
-const _UNSTABLE_TableRow = (0, forward_ref_js_1.forwardRef)(UNSTABLE_TableRow, 'TableRow');
-exports.UNSTABLE_TableRow = _UNSTABLE_TableRow;
-//# sourceMappingURL=table-row.js.map
+/**
+ * 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"]}

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

@@ -1,6 +1,8 @@
 import { type ReactNode } from 'react';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface UNSTABLE_TableProps extends CommonProps, Omit<LabellableProps, 'label'> {
+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.
@@ -17,10 +19,37 @@ export interface UNSTABLE_TableProps extends CommonProps, Omit<LabellableProps,
      * 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 cell if `totalColumnCount` is defined.
+     * 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;
 }
-declare const _UNSTABLE_Table: (props: UNSTABLE_TableProps & import("react").RefAttributes<HTMLTableElement>) => import("react").JSX.Element | null;
-export { _UNSTABLE_Table as UNSTABLE_Table };
+/**
+ * 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

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAIhE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACtF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AA+CD,QAAA,MAAM,eAAe,sHAAsC,CAAC;AAE5D,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}
+{"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

@@ -1,27 +1,35 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Table = void 0;
+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 UNSTABLE_Table(props, ref) {
+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.jsxs)(focus_js_1.TableFocusProvider, { 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 })] }));
+    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 })] }) }) }));
 }
-// eslint-disable-next-line react-refresh/only-export-components
 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);
-    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, children: children }));
+    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 }));
 }
-const _UNSTABLE_Table = (0, forward_ref_js_1.forwardRef)(UNSTABLE_Table, 'Table');
-exports.UNSTABLE_Table = _UNSTABLE_Table;
+/**
+ * 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

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":";;;;AAAA,6CAA6D;AAC7D,iCAAqE;AACrE,yDAAkD;AAElD,kDAAyD;AACzD,uDAAgD;AAwBhD,SAAS,cAAc,CAAC,KAA0B,EAAE,GAAmC;IACrF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,wBAAC,6BAAkB,eACjB,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,uBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IACpC,CACtB,CAAC;AACJ,CAAC;AAOD,gEAAgE;AAChE,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,IAAA,oBAAY,EAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,CACL,qCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,YAE9B,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,IAAA,2BAAU,EAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAEhC,yCAAc","sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { useEffect, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps, LabellableProps } from '../types.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface UNSTABLE_TableProps extends CommonProps, Omit<LabellableProps, 'label'> {\n  children: ReactNode;\n  /**\n   * The number of rows in the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   * Use `-1` if the number of rows is not known.\n   *\n   * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n   */\n  totalRowCount?: number;\n  /**\n   * The number of columns in 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   * Use `-1` if the number of columns is not known.\n   *\n   * You must provide `columnNumber` on each table cell if `totalColumnCount` is defined.\n   */\n  totalColumnCount?: number;\n}\n\nfunction UNSTABLE_Table(props: UNSTABLE_TableProps, ref: ForwardedRef<HTMLTableElement>) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TableFocusProvider>\n      <span tabIndex={-1} data-cim-table-guard aria-hidden />\n      <TableInner props={props} forwardedRef={ref} />\n      <span tabIndex={-1} data-cim-table-guard aria-hidden />\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: UNSTABLE_TableProps;\n  forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\n// eslint-disable-next-line react-refresh/only-export-components\nfunction TableInner({\n  props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n  forwardedRef,\n}: TableInnerProps) {\n  const tableRef = useObjectRef(forwardedRef);\n  const { tableProps } = useTable(tableRef);\n\n  return (\n    <table\n      {...mergeProps(props, tableProps)}\n      ref={tableRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowcount={totalRowCount}\n      aria-colcount={totalColumnCount}\n    >\n      {children}\n    </table>\n  );\n}\n\nconst _UNSTABLE_Table = forwardRef(UNSTABLE_Table, 'Table');\n\nexport { _UNSTABLE_Table as UNSTABLE_Table };\n"]}
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;AAEb,6CAA6D;AAC7D,iCAAqE;AACrE,yDAAkD;AAElD,0EAA2E;AAC3E,kDAAyD;AACzD,8DAAqG;AACrG,uDAAgD;AA+ChD,SAAS,KAAK,CACZ,EACE,gBAAgB,GAAG,MAAM,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,wBAAwB,EACxB,GAAG,KAAK,EACG,EACb,GAAmC;IAEnC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sEAAsE,CAAC,CAAC;QACvF,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL,uBAAC,6BAAkB,cACjB,uBAAC,mCAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,wBAAC,+CAAwB,eACvB,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,uBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,iCAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,IAC9B,GACR,GACF,CACtB,CAAC;AACJ,CAAC;AAUD,SAAS,UAAU,CAAC,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,GAAG,KAAK,EAAE,EAC9F,YAAY,GACI;IAChB,MAAM,QAAQ,GAAG,IAAA,oBAAY,EAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,uBAAQ,EAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,8BAAa,GAAE,CAAC;IAE7C,OAAO,CACL,qCACM,IAAA,kBAAU,EAAC,KAAK,EAAE,UAAU,CAAC,EACjC,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE,YAAY,mBACJ,aAAa,mBACb,gBAAgB,0BACT,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAEvE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,MAAM,GAAG,IAAA,2BAAU,EAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAEvB,uBAAK","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { useEffect, type ForwardedRef, type ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { ColumnCollectionProvider } from './contexts/column-collection.js';\nimport { TableFocusProvider } from './contexts/focus.js';\nimport { type RowSelectionMode, TableStateProvider, useTableState } from './contexts/table-state.js';\nimport { useTable } from './hooks/use-table.js';\n\nexport interface TableProps extends CommonProps, AriaLabelingProps {\n  /** The contents of the table. */\n  children: ReactNode;\n  /**\n   * The number of rows in the full dataset, including headers.\n   *\n   * Provide this value if your table presents a subset of rows, such as when using pagination.\n   * Use `-1` if the number of rows is not known.\n   *\n   * You must provide `rowNumber` on each table row if `totalRowCount` is defined.\n   */\n  totalRowCount?: number;\n  /**\n   * The number of columns in 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   * Use `-1` if the number of columns is not known.\n   *\n   * You must provide `columnNumber` on each table header cell if `totalColumnCount` is defined.\n   */\n  totalColumnCount?: number;\n  /**\n   * The type of row selection that is allowed within the table.\n   * @default 'none'\n   */\n  rowSelectionMode?: RowSelectionMode;\n  /**\n   * Whether all of the table's rows are selected.\n   * The meaning of \"all rows\" is dictated by the consumer.\n   */\n  areAllRowsSelected?: boolean;\n  /**\n   * Whether some (but not all) of the table's rows are selected.\n   * The meaning of \"some rows\" is dictated by the consumer.\n   */\n  areSomeRowsSelected?: boolean;\n  /**\n   * A function called when the selection state of all rows 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  onAllRowsSelectionToggle?: (value?: boolean) => void;\n}\n\nfunction Table(\n  {\n    rowSelectionMode = 'none',\n    areAllRowsSelected,\n    areSomeRowsSelected,\n    onAllRowsSelectionToggle,\n    ...props\n  }: TableProps,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n  useEffect(() => {\n    if (!ariaLabel && !ariaLabelledBy) {\n      console.warn('Table requires one of aria-label / aria-labelledby for accessibility');\n    }\n  }, [ariaLabel, ariaLabelledBy]);\n\n  return (\n    <TableFocusProvider>\n      <TableStateProvider\n        rowSelectionMode={rowSelectionMode}\n        areAllRowsSelected={areAllRowsSelected}\n        areSomeRowsSelected={areSomeRowsSelected}\n        onAllRowsSelectionToggle={onAllRowsSelectionToggle}\n      >\n        <ColumnCollectionProvider>\n          <span tabIndex={-1} data-cim-table-guard aria-hidden />\n          <TableInner props={props} forwardedRef={ref} />\n          <span tabIndex={-1} data-cim-table-guard aria-hidden />\n        </ColumnCollectionProvider>\n      </TableStateProvider>\n    </TableFocusProvider>\n  );\n}\n\ninterface TableInnerProps {\n  props: Omit<\n    TableProps,\n    'rowSelectionMode' | 'areAllRowsSelected' | 'areSomeRowsSelected' | 'onAllRowsSelectionToggle'\n  >;\n  forwardedRef: ForwardedRef<HTMLTableElement>;\n}\n\nfunction TableInner({\n  props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props },\n  forwardedRef,\n}: TableInnerProps) {\n  const tableRef = useObjectRef(forwardedRef);\n  const { tableProps } = useTable(tableRef);\n  const { rowSelectionMode } = useTableState();\n\n  return (\n    <table\n      {...mergeProps(props, tableProps)}\n      ref={tableRef}\n      className={UNSAFE_className}\n      style={UNSAFE_style}\n      aria-rowcount={totalRowCount}\n      aria-colcount={totalColumnCount}\n      aria-multiselectable={rowSelectionMode === 'multiple' ? true : undefined}\n    >\n      {children}\n    </table>\n  );\n}\n\n/**\n * Displays data in an organized, tabular 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 _Table = forwardRef(Table, 'Table');\n\nexport { _Table as Table };\n"]}

package/dist/commonjs/components/tag/tag-group.d.ts

@@ -1,18 +1,21 @@
+import type { ReactNode } from 'react';
 import { type TagGroupProps as RACTagGroupProps, type TagListProps as RACTagListProps } from 'react-aria-components';
 import type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';
-export interface UNSTABLE_TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items' | 'renderEmptyState'> {
+export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items'> {
     /** Whether the tag group is required. */
     isRequired?: boolean;
     /** The error message to display. */
     error?: string;
     /** The size of the tags. */
-    size?: 'small' | 'medium' | 'large';
+    size?: 'medium' | 'large';
+    /** Provides content to display when there are no tags in the group. */
+    renderEmptyState?: () => ReactNode;
 }
 /**
  * Displays a group of tags. Allows for selecting or removing tags.
  *
  * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
  */
-declare const _UNSTABLE_TagGroup: <T extends CollectionItem>(props: UNSTABLE_TagGroupProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_TagGroup as UNSTABLE_TagGroup };
+declare const _TagGroup: <T extends CollectionItem>(props: TagGroupProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _TagGroup as TagGroup };
 //# sourceMappingURL=tag-group.d.ts.map

package/dist/commonjs/components/tag/tag-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAC/E,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,kBAAkB,CAAC;IACrE,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,GA3CG,CAAC,SAAS,cAAc,0KA2CiC,CAAC;AAErF,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"tag-group.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAGL,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAEhF,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CACtE,SAAQ,WAAW,EAEjB,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,EAC7C,IAAI,CACF,gBAAgB,EAChB,eAAe,GAAG,qBAAqB,GAAG,cAAc,GAAG,cAAc,GAAG,mBAAmB,GAAG,UAAU,CAC7G,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChD,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,SAAS,CAAC;CACpC;AAwCD;;;;GAIG;AACH,QAAA,MAAM,SAAS,GA3CG,CAAC,SAAS,cAAc,iKA2CwB,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC"}