@cimpress-ui/react 0.2.1 → 0.4.0

package/dist/esm/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/esm/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/esm/components/table/table-empty-state.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
+import clsx from 'clsx';
+import { forwardRef } from '../../forward-ref.js';
+import { Text } from '../typography/text.js';
+import { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';
+import { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';
+import { useTableCell } from './hooks/use-table-cell.js';
+function TableEmptyState(props, ref) {
+    const rowKey = useId();
+    return (_jsx(TableRowStateProvider, { rowKey: rowKey, children: _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 = forwardRef(TableEmptyState, 'TableEmptyState');
+function TableEmptyStateInner({ props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props }, forwardedRef, }) {
+    const cellRef = useObjectRef(forwardedRef);
+    const { columnKey, colSpan } = useEmptyStateCell(cellRef);
+    const { rowKey } = useTableRowState();
+    // `useTableCell` requires `TableRowStateProvider`
+    const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
+    const columnData = useColumnData(columnKey);
+    return (_jsx("tr", { children: _jsx("td", { ...mergeProps(props, cellProps), ref: cellRef, className: clsx('cim-table-empty-state', UNSAFE_className), style: UNSAFE_style, "aria-colindex": columnData?.number, colSpan: colSpan, "data-alignment": "center", children: _jsxs("div", { className: "cim-table-empty-state-content", children: [_jsx(Text, { as: "span", variant: "title-6", tone: "base", children: title }), _jsx(Text, { as: "span", variant: "medium", tone: "base", children: description }), action && _jsx("div", { className: "cim-table-empty-state-action", children: action })] }) }) }, "__cim__internal__empty-state__"));
+}
+export { _TableEmptyState as TableEmptyState };
+//# sourceMappingURL=table-empty-state.js.map

package/dist/esm/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,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACpE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAWzD,SAAS,eAAe,CAAC,KAA2B,EAAE,GAAuC;IAC3F,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YACnC,KAAC,oBAAoB,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,GACnC,CACzB,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,UAAU,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAOxE,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,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACtC,kDAAkD;IAClD,MAAM,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5C,OAAO,CACL,uBACE,gBACM,UAAU,CAAC,KAAK,EAAE,SAAS,CAAC,EAChC,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,EAC1D,KAAK,EAAE,YAAY,mBACJ,UAAU,EAAE,MAAM,EACjC,OAAO,EAAE,OAAO,oBACD,QAAQ,YAEvB,eAAK,SAAS,EAAC,+BAA+B,aAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,YAC1C,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,YACzC,WAAW,GACP,EAEN,MAAM,IAAI,cAAK,SAAS,EAAC,8BAA8B,YAAE,MAAM,GAAO,IACnE,GACH,IArBC,gCAAgC,CAsBnC,CACN,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,gBAAgB,IAAI,eAAe,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport type { CommonProps } from '../types.js';\nimport { Text } from '../typography/text.js';\nimport { useColumnData, useEmptyStateCell } from './contexts/column-collection.js';\nimport { TableRowStateProvider, useTableRowState } from './contexts/row-state.js';\nimport { useTableCell } from './hooks/use-table-cell.js';\n\nexport interface TableEmptyStateProps extends CommonProps {\n  /** The title of the empty state. */\n  title: string;\n  /** The description of the empty state. */\n  description: string;\n  /** An optional action button displayed within the empty state. */\n  action?: ReactNode;\n}\n\nfunction TableEmptyState(props: TableEmptyStateProps, ref: ForwardedRef<HTMLTableCellElement>) {\n  const rowKey = useId();\n\n  return (\n    <TableRowStateProvider rowKey={rowKey}>\n      <TableEmptyStateInner props={props} forwardedRef={ref} />\n    </TableRowStateProvider>\n  );\n}\n\n/**\n * Renders an empty state within a table that has no data.\n *\n * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).\n */\nconst _TableEmptyState = forwardRef(TableEmptyState, 'TableEmptyState');\n\ninterface TableEmptyStateInnerProps {\n  props: TableEmptyStateProps;\n  forwardedRef: ForwardedRef<HTMLTableCellElement>;\n}\n\nfunction TableEmptyStateInner({\n  props: { UNSAFE_className, UNSAFE_style, title, description, action, ...props },\n  forwardedRef,\n}: TableEmptyStateInnerProps) {\n  const cellRef = useObjectRef(forwardedRef);\n  const { columnKey, colSpan } = useEmptyStateCell(cellRef);\n  const { rowKey } = useTableRowState();\n  // `useTableCell` requires `TableRowStateProvider`\n  const { cellProps } = useTableCell(cellRef, rowKey, columnKey);\n  const columnData = useColumnData(columnKey);\n\n  return (\n    <tr key=\"__cim__internal__empty-state__\">\n      <td\n        {...mergeProps(props, cellProps)}\n        ref={cellRef}\n        className={clsx('cim-table-empty-state', UNSAFE_className)}\n        style={UNSAFE_style}\n        aria-colindex={columnData?.number}\n        colSpan={colSpan}\n        data-alignment=\"center\"\n      >\n        <div className=\"cim-table-empty-state-content\">\n          <Text as=\"span\" variant=\"title-6\" tone=\"base\">\n            {title}\n          </Text>\n\n          <Text as=\"span\" variant=\"medium\" tone=\"base\">\n            {description}\n          </Text>\n\n          {action && <div className=\"cim-table-empty-state-action\">{action}</div>}\n        </div>\n      </td>\n    </tr>\n  );\n}\n\nexport { _TableEmptyState as TableEmptyState };\n"]}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Button as RACButton } from 'react-aria-components';
+/**
+ * @internal
+ */
+export function TableHeaderButton({ UNSAFE_className, UNSAFE_style, icon, ...props }) {
+    return (_jsx(RACButton, { ...props, className: clsx('cim-table-header-button', UNSAFE_className), style: UNSAFE_style, children: icon }));
+}
+//# sourceMappingURL=table-header-button.js.map

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

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

package/dist/esm/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/esm/components/table/table-header-cell.d.ts.map

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

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

@@ -1,14 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { mergeProps, useObjectRef } from '@react-aria/utils';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps, useId, useObjectRef } from '@react-aria/utils';
+import { useRef } from 'react';
 import { forwardRef } from '../../forward-ref.js';
+import { IconSortAscending, IconSortDescending, IconSortUnsorted } from '../../icons/index.js';
+import { useServerLayoutEffect } from '../../utils/use-server-layout-effect.js';
+import { useColumnRegistration } from './contexts/column-collection.js';
 import { useTableRowState } from './contexts/row-state.js';
+import { useTableState } from './contexts/table-state.js';
 import { useTableCell } from './hooks/use-table-cell.js';
-function UNSTABLE_TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, ...props }, ref) {
+import { TableHeaderButton } from './table-header-button.js';
+const SORT_ORDER_ICONS = {
+    ascending: _jsx(IconSortAscending, {}),
+    descending: _jsx(IconSortDescending, {}),
+};
+function TableHeaderCell({ children, UNSAFE_className, UNSAFE_style, columnKey, columnNumber, columnWidth, columnContentAlignment = 'start', sortOrder, onSortOrderToggle, iconStart, iconEnd, ...props }, ref) {
     const cellRef = useObjectRef(ref);
     const { rowKey } = useTableRowState();
     const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
-    return (_jsx("th", { ...mergeProps(props, cellProps), ref: cellRef, className: UNSAFE_className, style: UNSAFE_style, scope: "col", "aria-colindex": columnNumber, children: children }));
+    const registerColumn = useColumnRegistration();
+    const unregisterRef = useRef(null);
+    const { sortLabelId } = useTableState();
+    const contentId = useId();
+    const isSortable = typeof onSortOrderToggle === 'function';
+    // Columns need to be registered during SSR to prevent layout shifting on hydration
+    useServerLayoutEffect(() => {
+        unregisterRef.current = registerColumn(columnKey, {
+            number: columnNumber,
+            width: columnWidth,
+            contentAlignment: columnContentAlignment,
+        });
+        return () => {
+            unregisterRef.current?.();
+            unregisterRef.current = null;
+        };
+    }, [registerColumn, columnKey, columnNumber, columnWidth, columnContentAlignment]);
+    return (_jsx("th", { ...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: _jsxs("div", { className: "cim-table-header-cell-container", children: [iconStart, _jsx("span", { id: contentId, children: children }), iconEnd, isSortable ? (_jsx(TableHeaderButton, { UNSAFE_className: "cim-table-header-sort-button", "aria-labelledby": `${sortLabelId} ${contentId}`, icon: sortOrder ? SORT_ORDER_ICONS[sortOrder] : _jsx(IconSortUnsorted, {}), onPress: () => onSortOrderToggle(), "data-highlighted": !!sortOrder || undefined })) : sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : undefined] }) }));
 }
-const _UNSTABLE_TableHeaderCell = forwardRef(UNSTABLE_TableHeaderCell, 'TableHeaderCell');
-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/).
+ */
+const _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');
+export { _TableHeaderCell as TableHeaderCell };
 //# sourceMappingURL=table-header-cell.js.map

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

package/dist/esm/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/esm/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/esm/components/table/table-header-row.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from '@react-aria/utils';
+import { forwardRef } from '../../forward-ref.js';
+import { TableRowStateProvider } from './contexts/row-state.js';
+function TableHeaderRow({ children, UNSAFE_className, UNSAFE_style, rowNumber, ...props }, ref) {
+    const rowKey = useId();
+    return (_jsx("tr", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, "aria-rowindex": rowNumber, children: _jsx(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 = forwardRef(TableHeaderRow, 'TableHeaderRow');
+export { _TableHeaderRow as TableHeaderRow };
+//# sourceMappingURL=table-header-row.js.map

package/dist/esm/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,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAoBhE,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAuB,EACtF,GAAsC;IAEtC,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,gBAAQ,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,mBAAiB,SAAS,YACjG,KAAC,qBAAqB,IAAC,MAAM,EAAE,MAAM,YAAG,QAAQ,GAAyB,GACtE,CACN,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AAErE,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC","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/esm/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/esm/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/esm/components/table/table-header.js

@@ -1,8 +1,14 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from '../../forward-ref.js';
-function UNSTABLE_TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     return (_jsx("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
 }
-const _UNSTABLE_TableHeader = forwardRef(UNSTABLE_TableHeader, 'TableHeader');
-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/).
+ */
+const _TableHeader = forwardRef(TableHeader, 'TableHeader');
+export { _TableHeader as TableHeader };
 //# sourceMappingURL=table-header.js.map

package/dist/esm/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,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOlD,SAAS,oBAAoB,CAC3B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAA6B,EACjF,GAA0C;IAE1C,OAAO,CACL,mBAAW,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,YACzE,QAAQ,GACH,CACT,CAAC;AACJ,CAAC;AAED,MAAM,qBAAqB,GAAG,UAAU,CAAC,oBAAoB,EAAE,aAAa,CAAC,CAAC;AAE9E,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,CAAC","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,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQlD,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAoB,EACxE,GAA0C;IAE1C,OAAO,CACL,mBAAW,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,UAAU,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAE5D,OAAO,EAAE,YAAY,IAAI,WAAW,EAAE,CAAC","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/esm/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/esm/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/esm/components/table/table-row-selector.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from '../../forward-ref.js';
+import { Checkbox } from '../checkbox/checkbox.js';
+import { useTableRowState } from './contexts/row-state.js';
+import { useTableState } from './contexts/table-state.js';
+function TableRowSelector(props, ref) {
+    const { rowSelectionMode } = useTableState();
+    const { isSelected, onSelectionToggle } = useTableRowState();
+    if (rowSelectionMode === 'none') {
+        return null;
+    }
+    return _jsx(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 = forwardRef(TableRowSelector, 'TableRowSelector');
+export { _TableRowSelector as TableRowSelector };
+//# sourceMappingURL=table-row-selector.js.map

package/dist/esm/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,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAI1D,SAAS,gBAAgB,CAAC,KAA4B,EAAE,GAAmC;IACzF,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAC7C,MAAM,EAAE,UAAU,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE7D,IAAI,gBAAgB,KAAK,MAAM,EAAE,CAAC;QAChC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,GAAI,CAAC;AAChG,CAAC;AAED;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,UAAU,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AAE3E,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC","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/esm/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 { 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.
@@ -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/esm/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,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,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/esm/components/table/table.js

@@ -1,24 +1,32 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { mergeProps, useObjectRef } from '@react-aria/utils';
-import { useEffect } from 'react';
 import { forwardRef } from '../../forward-ref.js';
+import { useProductionWarning } from '../../utils/use-production-warning.js';
+import { ColumnCollectionProvider } from './contexts/column-collection.js';
 import { TableFocusProvider } from './contexts/focus.js';
+import { TableStateProvider, useTableState } from './contexts/table-state.js';
 import { useTable } from './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;
-    useEffect(() => {
+    useProductionWarning(() => {
         if (!ariaLabel && !ariaLabelledBy) {
             console.warn('Table requires one of aria-label / aria-labelledby for accessibility');
         }
     }, [ariaLabel, ariaLabelledBy]);
-    return (_jsxs(TableFocusProvider, { children: [_jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), _jsx(TableInner, { props: props, forwardedRef: ref }), _jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true })] }));
+    return (_jsx(TableFocusProvider, { children: _jsx(TableStateProvider, { rowSelectionMode: rowSelectionMode, areAllRowsSelected: areAllRowsSelected, areSomeRowsSelected: areSomeRowsSelected, onAllRowsSelectionToggle: onAllRowsSelectionToggle, children: _jsxs(ColumnCollectionProvider, { children: [_jsx("span", { tabIndex: -1, "data-cim-table-guard": true, "aria-hidden": true }), _jsx(TableInner, { props: props, forwardedRef: ref }), _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 = useObjectRef(forwardedRef);
     const { tableProps } = useTable(tableRef);
-    return (_jsx("table", { ...mergeProps(props, tableProps), ref: tableRef, className: UNSAFE_className, style: UNSAFE_style, "aria-rowcount": totalRowCount, "aria-colcount": totalColumnCount, children: children }));
+    const { rowSelectionMode } = useTableState();
+    return (_jsx("table", { ...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 = forwardRef(UNSTABLE_Table, 'Table');
-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/).
+ */
+const _Table = forwardRef(Table, 'Table');
+export { _Table as Table };
 //# sourceMappingURL=table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/components/table/table.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAwBhD,SAAS,cAAc,CAAC,KAA0B,EAAE,GAAmC;IACrF,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,SAAS,CAAC,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,MAAC,kBAAkB,eACjB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,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,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAE1C,OAAO,CACL,mBACM,UAAU,CAAC,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,UAAU,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAE5D,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC","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,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAE7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,iCAAiC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAyB,kBAAkB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;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,oBAAoB,CAAC,GAAG,EAAE;QACxB,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,KAAC,kBAAkB,cACjB,KAAC,kBAAkB,IACjB,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,wBAAwB,EAAE,wBAAwB,YAElD,MAAC,wBAAwB,eACvB,eAAM,QAAQ,EAAE,CAAC,CAAC,sDAAqC,EACvD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,GAAI,EAC/C,eAAM,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,YAAY,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE,CAAC;IAE7C,OAAO,CACL,mBACM,UAAU,CAAC,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,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAE1C,OAAO,EAAE,MAAM,IAAI,KAAK,EAAE,CAAC","sourcesContent":["'use client';\n\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.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  useProductionWarning(() => {\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/esm/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' | 'name'>, 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/esm/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,GAAG,MAAM,CAAC,EACtD,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"}

package/dist/esm/components/tag/tag-group.js

@@ -5,7 +5,7 @@ import { TagGroup as RACTagGroup, TagList as RACTagList, } from 'react-aria-comp
 import { forwardRef } from '../../forward-ref.js';
 import { withStyleProps } from '../../with-style-props.js';
 import { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';
-function UNSTABLE_TagGroup({ label, description, error, children, isRequired, items, renderEmptyState, size = 'medium', UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function TagGroup({ label, description, error, children, isRequired, items, renderEmptyState, size = 'medium', UNSAFE_className, UNSAFE_style, ...props }, ref) {
     if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {
         console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `"none"`');
     }
@@ -16,6 +16,6 @@ function UNSTABLE_TagGroup({ label, description, error, children, isRequired, it
  *
  * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
  */
-const _UNSTABLE_TagGroup = withStyleProps(forwardRef(UNSTABLE_TagGroup), 'TagGroup');
-export { _UNSTABLE_TagGroup as UNSTABLE_TagGroup };
+const _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');
+export { _TagGroup as TagGroup };
 //# sourceMappingURL=tag-group.js.map