@cimpress-ui/react 0.1.0 → 0.3.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-container.d.ts","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,iBAAiB;IACzE,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAmBD;;;;GAIG;AACH,QAAA,MAAM,eAAe,qKAA+D,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from '../../forward-ref.js';
+import { withStyleProps } from '../../with-style-props.js';
+import { FocusableContainer } from '../internal/focusable-container/focusable-container.js';
+function TableContainer({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx(FocusableContainer, { ...props, ref: ref, className: clsx('cim-table-container', UNSAFE_className), style: UNSAFE_style, scrollDirection: "horizontal", children: children }));
+}
+/**
+ * Renders a scrollable container that allows a table to overflow in a responsive way.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableContainer = withStyleProps(forwardRef(TableContainer), 'TableContainer');
+export { _TableContainer as TableContainer };
+//# sourceMappingURL=table-container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-container.js","sourceRoot":"","sources":["../../../../src/components/table/table-container.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAQ5F,SAAS,cAAc,CACrB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAuB,EAC3E,GAAiC;IAEjC,OAAO,CACL,KAAC,kBAAkB,OACb,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,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,cAAc,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,gBAAgB,CAAC,CAAC;AAErF,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC","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/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: "title", 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,OAAO,YAC3C,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=\"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/esm/components/table/table-header-cell.d.ts

@@ -0,0 +1,55 @@
+import { type ReactNode } from 'react';
+import type { CommonProps } from '../types.js';
+import { type ColumnContentAlignment } from './contexts/column-collection.js';
+/** Represents the sort order of a table column. */
+export type TableColumnSortOrder = 'ascending' | 'descending';
+export interface TableHeaderCellProps extends CommonProps {
+    /** The contents of the header cell. */
+    children: ReactNode;
+    /**
+     * A unique identifier for the column that this cell belongs to.
+     * Cells that belong to the same column must have the same `columnKey`.
+     */
+    columnKey: string;
+    /**
+     * The position of the column that this cell belongs to within the full dataset.
+     *
+     * Provide this value if your table presents a subset of columns, such as when the user toggles column visibility.
+     *
+     * This number must be:
+     * - greater than or equal to `1`
+     * - greater than the `columnNumber` of any previous cells in the current row
+     * - less than or equal to the `totalColumnCount` of the parent `Table`
+     *
+     * Use together with `totalColumnCount` on the `Table` component.
+     */
+    columnNumber?: number;
+    /** The width of the column. Can be any valid value of the `width` CSS property. */
+    columnWidth?: string | number;
+    /**
+     * Horizontal alignment of cell content within the column.
+     * @default 'start'
+     */
+    columnContentAlignment?: ColumnContentAlignment;
+    /**
+     * The current sort order of the column.
+     */
+    sortOrder?: TableColumnSortOrder;
+    /**
+     * A function called when the column's sort order should change.
+     * If not provided, the column will not be sortable.
+     */
+    onSortOrderToggle?: () => void;
+    /** An icon displayed before the header text. */
+    iconStart?: ReactNode;
+    /** An icon displayed after the header text. */
+    iconEnd?: ReactNode;
+}
+/**
+ * Renders a header cell within a table header row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+declare const _TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => import("react").JSX.Element | null;
+export { _TableHeaderCell as TableHeaderCell };
+//# sourceMappingURL=table-header-cell.d.ts.map

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

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

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

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { mergeProps, useObjectRef } from '@react-aria/utils';
+import { useRef } from 'react';
+import { Button as RACButton } from 'react-aria-components';
+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 { useTableCell } from './hooks/use-table-cell.js';
+const SORT_ORDER_ICONS = {
+    ascending: _jsx(IconSortAscending, { UNSAFE_className: "cim-table-sort-icon" }),
+    descending: _jsx(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 = useObjectRef(ref);
+    const { rowKey } = useTableRowState();
+    const { cellProps } = useTableCell(cellRef, rowKey, columnKey);
+    const registerColumn = useColumnRegistration();
+    const unregisterRef = useRef(null);
+    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]);
+    const content = (_jsxs(_Fragment, { children: [iconStart, _jsx("span", { children: children }), iconEnd, sortOrder ? (SORT_ORDER_ICONS[sortOrder]) : isSortable ? (_jsx(IconSortUnsorted, { UNSAFE_className: "cim-table-sort-icon" })) : undefined] }));
+    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: isSortable ? (_jsx(RACButton, { className: "cim-table-sort-button cim-table-header-cell-container", onPress: () => onSortOrderToggle(), children: content })) : (_jsx("div", { className: "cim-table-header-cell-container", children: content })) }));
+}
+/**
+ * Renders a header cell within a table header row.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableHeaderCell = forwardRef(TableHeaderCell, 'TableHeaderCell');
+export { _TableHeaderCell as TableHeaderCell };
+//# sourceMappingURL=table-header-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-header-cell.js","sourceRoot":"","sources":["../../../../src/components/table/table-header-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAqC,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC5D,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,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAgDzD,MAAM,gBAAgB,GAA4C;IAChE,SAAS,EAAE,KAAC,iBAAiB,IAAC,gBAAgB,EAAC,qBAAqB,GAAG;IACvE,UAAU,EAAE,KAAC,kBAAkB,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,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,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,MAAM,OAAO,GAAG,CACd,8BACG,SAAS,EACV,yBAAO,QAAQ,GAAQ,EACtB,OAAO,EACP,SAAS,CAAC,CAAC,CAAC,CACX,gBAAgB,CAAC,SAAS,CAAC,CAC5B,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,gBAAgB,IAAC,gBAAgB,EAAC,qBAAqB,GAAG,CAC5D,CAAC,CAAC,CAAC,SAAS,IACZ,CACJ,CAAC;IAEF,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,YAErC,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,SAAS,IACR,SAAS,EAAC,uDAAuD,EACjE,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,YAEjC,OAAO,GACE,CACb,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,iCAAiC,YAAE,OAAO,GAAO,CACjE,GACE,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, 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/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

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

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

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

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from '../../forward-ref.js';
+function TableHeader({ children, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+    return (_jsx("thead", { ...props, ref: ref, className: UNSAFE_className, style: UNSAFE_style, children: children }));
+}
+/**
+ * Renders a header section within a table.
+ *
+ * See [table usage guidelines](https://ui.cimpress.io/components/table/) and [table building guide](https://ui.cimpress.io/dev-guides/tables/).
+ */
+const _TableHeader = forwardRef(TableHeader, 'TableHeader');
+export { _TableHeader as TableHeader };
+//# sourceMappingURL=table-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-header.js","sourceRoot":"","sources":["../../../../src/components/table/table-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,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

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

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

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

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

@@ -0,0 +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 { 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 Table({ rowSelectionMode = 'none', areAllRowsSelected, areSomeRowsSelected, onAllRowsSelectionToggle, ...props }, ref) {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
+    useEffect(() => {
+        if (!ariaLabel && !ariaLabelledBy) {
+            console.warn('Table requires one of aria-label / aria-labelledby for accessibility');
+        }
+    }, [ariaLabel, ariaLabelledBy]);
+    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 })] }) }) }));
+}
+function TableInner({ props: { children, UNSAFE_className, UNSAFE_style, totalRowCount, totalColumnCount, ...props }, forwardedRef, }) {
+    const tableRef = useObjectRef(forwardedRef);
+    const { tableProps } = useTable(tableRef);
+    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 }));
+}
+/**
+ * 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

@@ -0,0 +1 @@
+{"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;AAC7D,OAAO,EAAE,SAAS,EAAqC,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,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,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,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 { 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/esm/components/table/utils/focus-table-child.d.ts

@@ -0,0 +1,4 @@
+import type { FocusableElement } from '../../types.js';
+/** Focuses the given element inside a table, and scrolls to it if focus is visible */
+export declare function focusTableChild(element: FocusableElement): void;
+//# sourceMappingURL=focus-table-child.d.ts.map

package/dist/esm/components/table/utils/focus-table-child.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-table-child.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/utils/focus-table-child.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAEvD,sFAAsF;AACtF,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAM/D"}

package/dist/esm/components/table/utils/focus-table-child.js

@@ -0,0 +1,11 @@
+import { focusSafely } from '@react-aria/focus';
+import { isFocusVisible } from '@react-aria/interactions';
+import { getScrollParent, scrollIntoViewport } from '@react-aria/utils';
+/** Focuses the given element inside a table, and scrolls to it if focus is visible */
+export function focusTableChild(element) {
+    focusSafely(element);
+    if (isFocusVisible()) {
+        scrollIntoViewport(element, { containingElement: getScrollParent(element) });
+    }
+}
+//# sourceMappingURL=focus-table-child.js.map

package/dist/esm/components/table/utils/focus-table-child.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-table-child.js","sourceRoot":"","sources":["../../../../../src/components/table/utils/focus-table-child.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAGxE,sFAAsF;AACtF,MAAM,UAAU,eAAe,CAAC,OAAyB;IACvD,WAAW,CAAC,OAAO,CAAC,CAAC;IAErB,IAAI,cAAc,EAAE,EAAE,CAAC;QACrB,kBAAkB,CAAC,OAAO,EAAE,EAAE,iBAAiB,EAAE,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC/E,CAAC;AACH,CAAC","sourcesContent":["import { focusSafely } from '@react-aria/focus';\nimport { isFocusVisible } from '@react-aria/interactions';\nimport { getScrollParent, scrollIntoViewport } from '@react-aria/utils';\nimport type { FocusableElement } from '../../types.js';\n\n/** Focuses the given element inside a table, and scrolls to it if focus is visible */\nexport function focusTableChild(element: FocusableElement): void {\n  focusSafely(element);\n\n  if (isFocusVisible()) {\n    scrollIntoViewport(element, { containingElement: getScrollParent(element) });\n  }\n}\n"]}

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

@@ -0,0 +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 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?: '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 _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

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

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { TagGroup as RACTagGroup, TagList as RACTagList, } from 'react-aria-components';
+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 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"`');
+    }
+    return (_jsxs(RACTagGroup, { ...props, ref: ref, className: clsx('cim-tag-group', UNSAFE_className), style: UNSAFE_style, "data-size": size, children: [_jsx(FormFieldLabel, { isRequired: isRequired, children: label }), _jsx(RACTagList, { className: "cim-tag-group-list", items: items, renderEmptyState: renderEmptyState, children: children }), error && _jsx(FormFieldErrorText, { children: error }), _jsx(FormFieldDescription, { children: description })] }));
+}
+/**
+ * Displays a group of tags. Allows for selecting or removing tags.
+ *
+ * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
+ */
+const _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');
+export { _TagGroup as TagGroup };
+//# sourceMappingURL=tag-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,QAAQ,IAAI,WAAW,EACvB,OAAO,IAAI,UAAU,GAGtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAsBhH,SAAS,QAAQ,CACf,EACE,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACS,EACnB,GAAiC;IAEjC,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,IAAI,KAAK,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,IAAI,EAAE,CAAC;QAC5F,OAAO,CAAC,KAAK,CAAC,yFAAyF,CAAC,CAAC;IAC3G,CAAC;IAED,OAAO,CACL,MAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,KAAC,cAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,KAAC,UAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,KAAC,kBAAkB,cAAE,KAAK,GAAsB,EAC1D,KAAC,oBAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,cAAc,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnE,OAAO,EAAE,SAAS,IAAI,QAAQ,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport {\n  TagGroup as RACTagGroup,\n  TagList as RACTagList,\n  type TagGroupProps as RACTagGroupProps,\n  type TagListProps as RACTagListProps,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { FormFieldDescription, FormFieldErrorText, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';\n\nexport interface TagGroupProps<T extends CollectionItem = CollectionItem>\n  extends CommonProps,\n    // `TagGroup` doesn't support `validate` or `error` because it's not a form field\n    Omit<FieldProps<Key[]>, 'validate' | 'error'>,\n    Pick<\n      RACTagGroupProps,\n      'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'\n    >,\n    Pick<RACTagListProps<T>, 'children' | 'items'> {\n  /** Whether the tag group is required. */\n  isRequired?: boolean;\n  /** The error message to display. */\n  error?: string;\n  /** The size of the tags. */\n  size?: 'medium' | 'large';\n  /** Provides content to display when there are no tags in the group. */\n  renderEmptyState?: () => ReactNode;\n}\n\nfunction TagGroup<T extends CollectionItem>(\n  {\n    label,\n    description,\n    error,\n    children,\n    isRequired,\n    items,\n    renderEmptyState,\n    size = 'medium',\n    UNSAFE_className,\n    UNSAFE_style,\n    ...props\n  }: TagGroupProps<T>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  if (props.selectionMode != null && props.selectionMode !== 'none' && props.onRemove != null) {\n    console.error('`onRemove` is not supported when `selectionMode` is set to anything other than `\"none\"`');\n  }\n\n  return (\n    <RACTagGroup\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag-group', UNSAFE_className)}\n      style={UNSAFE_style}\n      data-size={size}\n    >\n      <FormFieldLabel isRequired={isRequired}>{label}</FormFieldLabel>\n      <RACTagList className=\"cim-tag-group-list\" items={items} renderEmptyState={renderEmptyState}>\n        {children}\n      </RACTagList>\n      {error && <FormFieldErrorText>{error}</FormFieldErrorText>}\n      <FormFieldDescription>{description}</FormFieldDescription>\n    </RACTagGroup>\n  );\n}\n\n/**\n * Displays a group of tags. Allows for selecting or removing tags.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _TagGroup = withStyleProps(forwardRef(TagGroup), 'TagGroup');\n\nexport { _TagGroup as TagGroup };\n"]}