@cimpress-ui/react 0.2.1 → 0.4.0

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

@@ -1,6 +1,8 @@
-import { type ReactNode } from 'react';
-import type { CommonProps, LabellableProps } from '../types.js';
-export interface UNSTABLE_TableProps extends CommonProps, Omit<LabellableProps, 'label'> {
+import type { 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/commonjs/components/table/table.d.ts.map

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

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

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

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

@@ -1,18 +1,21 @@
+import type { ReactNode } from 'react';
 import { type TagGroupProps as RACTagGroupProps, type TagListProps as RACTagListProps } from 'react-aria-components';
 import type { CollectionItem, CommonProps, FieldProps, Key } from '../types.js';
-export interface UNSTABLE_TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error'>, Pick<RACTagGroupProps, 'selectionMode' | 'defaultSelectedKeys' | 'selectedKeys' | 'disabledKeys' | 'onSelectionChange' | 'onRemove'>, Pick<RACTagListProps<T>, 'children' | 'items' | 'renderEmptyState'> {
+export interface TagGroupProps<T extends CollectionItem = CollectionItem> extends CommonProps, Omit<FieldProps<Key[]>, 'validate' | 'error' | '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/commonjs/components/tag/tag-group.d.ts.map

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

@@ -4,14 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_TagGroup = void 0;
+exports.TagGroup = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
 const form_field_js_1 = require("../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"`');
     }
@@ -22,6 +22,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 = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_TagGroup), 'TagGroup');
-exports.UNSTABLE_TagGroup = _UNSTABLE_TagGroup;
+const _TagGroup = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(TagGroup), 'TagGroup');
+exports.TagGroup = _TagGroup;
 //# sourceMappingURL=tag-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAAgH;AAoBhH,SAAS,iBAAiB,CACxB,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,EACkB,EAC5B,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,wBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,uBAAC,kCAAkB,cAAE,KAAK,GAAsB,EAC1D,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,kBAAkB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,+CAAiB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef } 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 UNSTABLE_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' | 'renderEmptyState'> {\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?: 'small' | 'medium' | 'large';\n}\n\nfunction UNSTABLE_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  }: UNSTABLE_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 _UNSTABLE_TagGroup = withStyleProps(forwardRef(UNSTABLE_TagGroup), 'TagGroup');\n\nexport { _UNSTABLE_TagGroup as UNSTABLE_TagGroup };\n"]}
+{"version":3,"file":"tag-group.js","sourceRoot":"","sources":["../../../../src/components/tag/tag-group.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAK+B;AAC/B,yDAAkD;AAClD,mEAA2D;AAC3D,wEAAgH;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,wBAAC,gCAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,EAAE,gBAAgB,CAAC,EAClD,KAAK,EAAE,YAAY,eACR,IAAI,aAEf,uBAAC,8BAAc,IAAC,UAAU,EAAE,UAAU,YAAG,KAAK,GAAkB,EAChE,uBAAC,+BAAU,IAAC,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,YACxF,QAAQ,GACE,EACZ,KAAK,IAAI,uBAAC,kCAAkB,cAAE,KAAK,GAAsB,EAC1D,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC9C,CACf,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,SAAS,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC;AAE7C,6BAAQ","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' | 'name'>,\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"]}

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

@@ -2,16 +2,17 @@ import type { ReactNode } from 'react';
 import { type TagProps as RACTagProps } from 'react-aria-components';
 import type { StringLikeChildren } from '../types.js';
 import type { CommonProps } from '../types.js';
-export interface UNSTABLE_TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {
+export interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {
+    /** The content to display as the label. */
     children: StringLikeChildren;
-    /**
-     * The icon to display at the start of the tag.
-     *
-     * Should not be used when size is set to `small` as icons won't be displayed at this size.
-     */
+    /** The icon to display at the start of the tag. */
     iconStart?: ReactNode;
 }
-/** Displays a tag within a tag group. */
-declare const _UNSTABLE_Tag: (props: UNSTABLE_TagProps & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
-export { _UNSTABLE_Tag as UNSTABLE_Tag };
+/**
+ * Displays a single tag within a tag group.
+ *
+ * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
+ */
+declare const _Tag: (props: TagProps & import("react").RefAttributes<HTMLElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _Tag as Tag };
 //# sourceMappingURL=tag.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAiB,KAAK,QAAQ,IAAI,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAIzG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,CAAC;IACxG,QAAQ,EAAE,kBAAkB,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAgCD,yCAAyC;AACzC,QAAA,MAAM,aAAa,gKAAkD,CAAC;AAEtE,OAAO,EAAE,aAAa,IAAI,YAAY,EAAE,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAiB,KAAK,QAAQ,IAAI,WAAW,EAAuB,MAAM,uBAAuB,CAAC;AAIzG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,YAAY,CAAC;IAC/F,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,mDAAmD;IACnD,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAgCD;;;;GAIG;AACH,QAAA,MAAM,IAAI,uJAAyC,CAAC;AAEpD,OAAO,EAAE,IAAI,IAAI,GAAG,EAAE,CAAC"}

package/dist/commonjs/components/tag/tag.js

@@ -1,20 +1,25 @@
+'use client';
 "use strict";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UNSTABLE_Tag = void 0;
+exports.Tag = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importDefault(require("clsx"));
 const react_aria_components_1 = require("react-aria-components");
 const forward_ref_js_1 = require("../../forward-ref.js");
 const index_js_1 = require("../../icons/index.js");
 const with_style_props_js_1 = require("../../with-style-props.js");
-function UNSTABLE_Tag({ children, iconStart, UNSAFE_className, UNSAFE_style, ...props }, ref) {
+function Tag({ children, iconStart, UNSAFE_className, UNSAFE_style, ...props }, ref) {
     const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
-    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Tag, { ...props, ref: ref, className: (0, clsx_1.default)('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart && (0, jsx_runtime_1.jsx)("div", { className: "cim-tag-icon", children: iconStart }), (0, jsx_runtime_1.jsx)("span", { className: "cim-tag-text", children: children }), allowsRemoving && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "remove", children: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconClose, {}) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Tag, { ...props, ref: ref, className: (0, clsx_1.default)('cim-tag', UNSAFE_className), style: UNSAFE_style, textValue: textValue, children: ({ allowsRemoving }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [iconStart && (0, jsx_runtime_1.jsx)("div", { className: "cim-tag-icon", children: iconStart }), (0, jsx_runtime_1.jsx)("span", { className: "cim-tag-text", children: children }), allowsRemoving && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Button, { slot: "remove", excludeFromTabOrder: true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconCloseBold, {}) }))] })) }));
 }
-/** Displays a tag within a tag group. */
-const _UNSTABLE_Tag = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_Tag), 'Tag');
-exports.UNSTABLE_Tag = _UNSTABLE_Tag;
+/**
+ * Displays a single tag within a tag group.
+ *
+ * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).
+ */
+const _Tag = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Tag), 'Tag');
+exports.Tag = _Tag;
 //# sourceMappingURL=tag.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":";;;;;;;AAAA,gDAAwB;AAExB,iEAAyG;AACzG,yDAAkD;AAClD,mDAA0D;AAC1D,mEAA2D;AAc3D,SAAS,YAAY,CACnB,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAqB,EACpF,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,2BAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,6DACG,SAAS,IAAI,gCAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,iCAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,uBAAC,8BAAS,IAAC,IAAI,EAAC,QAAQ,YACtB,uBAAC,6BAAkB,KAAG,GACZ,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED,yCAAyC;AACzC,MAAM,aAAa,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,YAAY,CAAC,EAAE,KAAK,CAAC,CAAC;AAE5C,qCAAY","sourcesContent":["import clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { UNSTABLE_IconClose } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface UNSTABLE_TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  children: StringLikeChildren;\n  /**\n   * The icon to display at the start of the tag.\n   *\n   * Should not be used when size is set to `small` as icons won't be displayed at this size.\n   */\n  iconStart?: ReactNode;\n}\n\nfunction UNSTABLE_Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\">\n              <UNSTABLE_IconClose />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/** Displays a tag within a tag group. */\nconst _UNSTABLE_Tag = withStyleProps(forwardRef(UNSTABLE_Tag), 'Tag');\n\nexport { _UNSTABLE_Tag as UNSTABLE_Tag };\n"]}
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AAExB,iEAAyG;AACzG,yDAAkD;AAClD,mDAAqD;AACrD,mEAA2D;AAW3D,SAAS,GAAG,CACV,EAAE,QAAQ,EAAE,SAAS,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAY,EAC3E,GAA8B;IAE9B,MAAM,SAAS,GACb,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAEhH,OAAO,CACL,uBAAC,2BAAM,OACD,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,SAAS,EAAE,gBAAgB,CAAC,EAC5C,KAAK,EAAE,YAAY,EACnB,SAAS,EAAE,SAAS,YAEnB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CACvB,6DACG,SAAS,IAAI,gCAAK,SAAS,EAAC,cAAc,YAAE,SAAS,GAAO,EAC7D,iCAAM,SAAS,EAAC,cAAc,YAAE,QAAQ,GAAQ,EAC/C,cAAc,IAAI,CACjB,uBAAC,8BAAS,IAAC,IAAI,EAAC,QAAQ,EAAC,mBAAmB,kBAC1C,uBAAC,wBAAa,KAAG,GACP,CACb,IACA,CACJ,GACM,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,IAAI,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AAEnC,mBAAG","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { Tag as RACTag, type TagProps as RACTagProps, Button as RACButton } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconCloseBold } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { StringLikeChildren } from '../types.js';\nimport type { CommonProps } from '../types.js';\n\nexport interface TagProps extends Omit<CommonProps, 'id'>, Pick<RACTagProps, 'id' | 'isDisabled'> {\n  /** The content to display as the label. */\n  children: StringLikeChildren;\n  /** The icon to display at the start of the tag. */\n  iconStart?: ReactNode;\n}\n\nfunction Tag(\n  { children, iconStart, UNSAFE_className, UNSAFE_style, ...props }: TagProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const textValue =\n    typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n  return (\n    <RACTag\n      {...props}\n      ref={ref}\n      className={clsx('cim-tag', UNSAFE_className)}\n      style={UNSAFE_style}\n      textValue={textValue}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {iconStart && <div className=\"cim-tag-icon\">{iconStart}</div>}\n          <span className=\"cim-tag-text\">{children}</span>\n          {allowsRemoving && (\n            <RACButton slot=\"remove\" excludeFromTabOrder>\n              <IconCloseBold />\n            </RACButton>\n          )}\n        </>\n      )}\n    </RACTag>\n  );\n}\n\n/**\n * Displays a single tag within a tag group.\n *\n * See [tag group usage guidelines](https://ui.cimpress.io/components/tag-group/).\n */\nconst _Tag = withStyleProps(forwardRef(Tag), 'Tag');\n\nexport { _Tag as Tag };\n"]}

package/dist/commonjs/components/tag-field/tag-field-input.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-input.d.ts.map

package/dist/commonjs/components/tag-field/tag-field-input.d.ts.map

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

package/dist/commonjs/components/tag-field/tag-field-input.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldInput = TagFieldInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const utils_js_1 = require("../typography/utils.js");
+/** @internal */
+function TagFieldInput({ isReadOnly, isRequired, isInvalid, placeholder, onFocusChange, 'aria-describedby': ariaDescribedby, }) {
+    const comboBoxState = (0, react_1.useContext)(react_aria_components_1.ComboBoxStateContext);
+    const inputContext = (0, react_1.useContext)(react_aria_components_1.InputContext);
+    // We use custom IDs for description and error message, so we need to manually attach them to the input
+    const { id: descriptionId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'description');
+    const { id: errorMessageId } = (0, react_aria_components_1.useSlottedContext)(react_aria_components_1.TextContext, 'errorMessage');
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.InputContext.Provider, { value: {
+            ...inputContext,
+            // name: undefined,
+            // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers
+            required: false,
+            'aria-required': isRequired,
+            'aria-invalid': isInvalid || undefined,
+        }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-combo-box-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), 
+            // Ensure the popover opens when the input is clicked.
+            // By default, React Aria only opens the popover when the input is focused.
+            onClick: () => !isReadOnly && comboBoxState.open(), placeholder: placeholder, onFocus: () => onFocusChange(true), onBlur: () => onFocusChange(false), "aria-describedby": [descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined }) }));
+}
+//# sourceMappingURL=tag-field-input.js.map

package/dist/commonjs/components/tag-field/tag-field-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-input.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-input.tsx"],"names":[],"mappings":";;;;;AAYA,sCA6CC;;AAzDD,gDAAwB;AACxB,iCAAmC;AACnC,iEAM+B;AAC/B,qDAAmD;AAEnD,gBAAgB;AAChB,SAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,UAAU,EACV,SAAS,EACT,WAAW,EACX,aAAa,EACb,kBAAkB,EAAE,eAAe,GAQpC;IACC,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,4CAAuB,CAAC,CAAC;IAC1D,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oCAAe,CAAC,CAAC;IAEjD,uGAAuG;IACvG,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,aAAa,CAAE,CAAC;IAChF,MAAM,EAAE,EAAE,EAAE,cAAc,EAAE,GAAG,IAAA,yCAAiB,EAAC,mCAAc,EAAE,cAAc,CAAE,CAAC;IAElF,OAAO,CACL,uBAAC,oCAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;YACL,GAAG,YAAY;YACf,mBAAmB;YACnB,sIAAsI;YACtI,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,UAAU;YAC3B,cAAc,EAAE,SAAS,IAAI,SAAS;SACvC,YAED,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,qBAAqB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC;YACxE,sDAAsD;YACtD,2EAA2E;YAC3E,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,aAAc,CAAC,IAAI,EAAE,EACnD,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,MAAM,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,sBAChB,CAAC,aAAa,EAAE,cAAc,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,SAAS,GACzG,GACuB,CAC5B,CAAC;AACJ,CAAC","sourcesContent":["import clsx from 'clsx';\nimport { useContext } from 'react';\nimport {\n  ComboBoxStateContext as RACComboBoxStateContext,\n  Input as RACInput,\n  InputContext as RACInputContext,\n  TextContext as RACTextContext,\n  useSlottedContext,\n} from 'react-aria-components';\nimport { textStyle } from '../typography/utils.js';\n\n/** @internal */\nexport function TagFieldInput({\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  placeholder,\n  onFocusChange,\n  'aria-describedby': ariaDescribedby,\n}: {\n  isReadOnly: boolean | undefined;\n  isRequired: boolean | undefined;\n  isInvalid: boolean | undefined;\n  placeholder: string | undefined;\n  onFocusChange: (isFocused: boolean) => void;\n  'aria-describedby': string | undefined;\n}) {\n  const comboBoxState = useContext(RACComboBoxStateContext);\n  const inputContext = useContext(RACInputContext);\n\n  // We use custom IDs for description and error message, so we need to manually attach them to the input\n  const { id: descriptionId } = useSlottedContext(RACTextContext, 'description')!;\n  const { id: errorMessageId } = useSlottedContext(RACTextContext, 'errorMessage')!;\n\n  return (\n    <RACInputContext.Provider\n      value={{\n        ...inputContext,\n        // name: undefined,\n        // Change `required` to `aria-required` so that form submission isn't blocked, but required state is still announced by screen readers\n        required: false,\n        'aria-required': isRequired,\n        'aria-invalid': isInvalid || undefined,\n      }}\n    >\n      <RACInput\n        className={clsx('cim-combo-box-input', textStyle({ variant: 'medium' }))}\n        // Ensure the popover opens when the input is clicked.\n        // By default, React Aria only opens the popover when the input is focused.\n        onClick={() => !isReadOnly && comboBoxState!.open()}\n        placeholder={placeholder}\n        onFocus={() => onFocusChange(true)}\n        onBlur={() => onFocusChange(false)}\n        aria-describedby={[descriptionId, errorMessageId, ariaDescribedby].filter(Boolean).join(' ') || undefined}\n      />\n    </RACInputContext.Provider>\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field-list-box.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-list-box.d.ts.map

package/dist/commonjs/components/tag-field/tag-field-list-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-list-box.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":""}

package/dist/commonjs/components/tag-field/tag-field-list-box.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldListBox = TagFieldListBox;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+/** @internal */
+function TagFieldListBox({ children, selectedKeys, setSelectedKeys, items, onScroll, }) {
+    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
+    // Override RACListStateContext to allow multiple selection within the list
+    const updatedListState = (0, react_1.useMemo)(() => {
+        if (!listState || !listState.selectionManager) {
+            return listState;
+        }
+        // @ts-expect-error `selectionManager.state` is private
+        // This is a temporary mutation before a context update, so this is fine
+        // eslint-disable-next-line react-hooks/react-compiler
+        listState.selectionManager.state.selectionMode = 'multiple';
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.selectedKeys = selectedKeys;
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.setSelectedKeys = setSelectedKeys;
+        // @ts-expect-error `selectionManager.state` is private
+        listState.selectionManager.state.disallowEmptySelection = false;
+        return {
+            ...listState,
+        };
+    }, [listState, selectedKeys, setSelectedKeys]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ListStateContext.Provider, { value: updatedListState, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.ListBox, { className: "cim-combo-box-listbox", onScroll: onScroll, items: items, children: children }) }));
+}
+//# sourceMappingURL=tag-field-list-box.js.map

package/dist/commonjs/components/tag-field/tag-field-list-box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-list-box.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-list-box.tsx"],"names":[],"mappings":";;AAMA,0CAyCC;;AA/CD,iCAA4C;AAC5C,iEAAuG;AAIvG,gBAAgB;AAChB,SAAgB,eAAe,CAA2B,EACxD,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,2EAA2E;IAC3E,MAAM,gBAAgB,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACpC,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YAC9C,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,uDAAuD;QACvD,wEAAwE;QACxE,sDAAsD;QACtD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,aAAa,GAAG,UAAU,CAAC;QAC5D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC;QAC7D,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;QACnE,uDAAuD;QACvD,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,sBAAsB,GAAG,KAAK,CAAC;QAEhE,OAAO;YACL,GAAG,SAAS;SACb,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,eAAe,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,uBAAC,wCAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YACnD,uBAAC,+BAAU,IAAC,SAAS,EAAC,uBAAuB,EAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAC3E,QAAQ,GACE,GACgB,CAChC,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport { ListBox as RACListBox, ListStateContext as RACListStateContext } from 'react-aria-components';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { UNSTABLE_TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldListBox<T extends CollectionItem>({\n  children,\n  selectedKeys,\n  setSelectedKeys,\n  items,\n  onScroll,\n}: Pick<UNSTABLE_TagFieldProps<T>, 'children' | 'items' | 'onScroll'> & {\n  selectedKeys: Set<Key>;\n  setSelectedKeys: (keys: Set<Key>) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  // Override RACListStateContext to allow multiple selection within the list\n  const updatedListState = useMemo(() => {\n    if (!listState || !listState.selectionManager) {\n      return listState;\n    }\n\n    // @ts-expect-error `selectionManager.state` is private\n    // This is a temporary mutation before a context update, so this is fine\n    // eslint-disable-next-line react-hooks/react-compiler\n    listState.selectionManager.state.selectionMode = 'multiple';\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.selectedKeys = selectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.setSelectedKeys = setSelectedKeys;\n    // @ts-expect-error `selectionManager.state` is private\n    listState.selectionManager.state.disallowEmptySelection = false;\n\n    return {\n      ...listState,\n    };\n  }, [listState, selectedKeys, setSelectedKeys]);\n\n  return (\n    <RACListStateContext.Provider value={updatedListState}>\n      <RACListBox className=\"cim-combo-box-listbox\" onScroll={onScroll} items={items}>\n        {children}\n      </RACListBox>\n    </RACListStateContext.Provider>\n  );\n}\n"]}

package/dist/commonjs/components/tag-field/tag-field-tags.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tag-field-tags.d.ts.map

package/dist/commonjs/components/tag-field/tag-field-tags.d.ts.map

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

package/dist/commonjs/components/tag-field/tag-field-tags.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagFieldTags = TagFieldTags;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_aria_components_1 = require("react-aria-components");
+const tag_group_js_1 = require("../tag/tag-group.js");
+const tag_js_1 = require("../tag/tag.js");
+/** @internal */
+function TagFieldTags({ inputId, selectedKeys, isDisabled, renderEmptyState, onRemove, }) {
+    const listState = (0, react_1.useContext)(react_aria_components_1.ListStateContext);
+    const selectedItems = (0, react_1.useMemo)(() => {
+        return [...selectedKeys.values()]
+            .map((key) => listState?.selectionManager.collection.getItem(key))
+            .filter((value) => !!value);
+    }, [selectedKeys, listState?.selectionManager.collection]);
+    return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Provider, { values: [
+            // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox
+            [react_aria_components_1.LabelContext, null],
+            [react_aria_components_1.ButtonContext, null],
+            [react_aria_components_1.TextContext, null],
+            [react_aria_components_1.ListStateContext, null],
+        ], children: (0, jsx_runtime_1.jsx)(tag_group_js_1.TagGroup, { "aria-labelledby": inputId, disabledKeys: isDisabled ? selectedKeys : undefined, renderEmptyState: renderEmptyState, onRemove: (keys) => {
+                keys.forEach(onRemove);
+            }, children: selectedItems.map((item) => ((0, jsx_runtime_1.jsx)(tag_js_1.Tag, { id: item.key, isDisabled: item.props.isDisabled, children: item.textValue }, item.key))) }) }));
+}
+//# sourceMappingURL=tag-field-tags.js.map

package/dist/commonjs/components/tag-field/tag-field-tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field-tags.js","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field-tags.tsx"],"names":[],"mappings":";;AAcA,oCA6CC;;AA3DD,iCAA4C;AAC5C,iEAM+B;AAC/B,sDAA+C;AAC/C,0CAAmD;AAInD,gBAAgB;AAChB,SAAgB,YAAY,CAA2B,EACrD,OAAO,EACP,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAKT;IACC,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,wCAAmB,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjC,OAAO,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC;aAC9B,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;aACjE,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;IAE3D,OAAO,CACL,uBAAC,gCAAW,IACV,MAAM,EAAE;YACN,4EAA4E;YAC5E,CAAC,oCAAe,EAAE,IAAI,CAAC;YACvB,CAAC,qCAAgB,EAAE,IAAI,CAAC;YACxB,CAAC,mCAAc,EAAE,IAAI,CAAC;YACtB,CAAC,wCAAmB,EAAE,IAAI,CAAC;SAC5B,YAED,uBAAC,uBAAQ,uBACU,OAAO,EACxB,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EACnD,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;gBACjB,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;YACzB,CAAC,YAEA,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,uBAAC,YAAG,IAAgB,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAG,IAAI,CAAC,KAAkB,CAAC,UAAU,YAC9E,IAAI,CAAC,SAAS,IADP,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC,GACO,GACC,CACf,CAAC;AACJ,CAAC","sourcesContent":["import { useContext, useMemo } from 'react';\nimport {\n  ButtonContext as RACButtonContext,\n  LabelContext as RACLabelContext,\n  ListStateContext as RACListStateContext,\n  Provider as RACProvider,\n  TextContext as RACTextContext,\n} from 'react-aria-components';\nimport { TagGroup } from '../tag/tag-group.js';\nimport { Tag, type TagProps } from '../tag/tag.js';\nimport type { CollectionItem, Key } from '../types.js';\nimport type { UNSTABLE_TagFieldProps } from './tag-field.js';\n\n/** @internal */\nexport function TagFieldTags<T extends CollectionItem>({\n  inputId,\n  selectedKeys,\n  isDisabled,\n  renderEmptyState,\n  onRemove,\n}: Pick<UNSTABLE_TagFieldProps<T>, 'isDisabled' | 'renderEmptyState'> & {\n  inputId: string;\n  selectedKeys: Set<Key>;\n  onRemove: (key: Key) => void;\n}) {\n  const listState = useContext(RACListStateContext);\n\n  const selectedItems = useMemo(() => {\n    return [...selectedKeys.values()]\n      .map((key) => listState?.selectionManager.collection.getItem(key))\n      .filter((value) => !!value);\n  }, [selectedKeys, listState?.selectionManager.collection]);\n\n  return (\n    <RACProvider\n      values={[\n        // Reset contexts so that TagGroup doesn't inherit any data from RACComboBox\n        [RACLabelContext, null],\n        [RACButtonContext, null],\n        [RACTextContext, null],\n        [RACListStateContext, null],\n      ]}\n    >\n      <TagGroup\n        aria-labelledby={inputId}\n        disabledKeys={isDisabled ? selectedKeys : undefined}\n        renderEmptyState={renderEmptyState}\n        onRemove={(keys) => {\n          keys.forEach(onRemove);\n        }}\n      >\n        {selectedItems.map((item) => (\n          <Tag key={item.key} id={item.key} isDisabled={(item.props as TagProps).isDisabled}>\n            {item.textValue}\n          </Tag>\n        ))}\n      </TagGroup>\n    </RACProvider>\n  );\n}\n"]}

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

@@ -0,0 +1,43 @@
+import { type ListBoxProps as RACListBoxProps, type ComboBoxProps as RACComboBoxProps, type ListBoxItemProps as RACListBoxItemProps } from 'react-aria-components';
+import type { TagGroupProps } from '../tag/tag-group.js';
+import type { CollectionItem, CollectionProps, CommonProps, FieldWithPlaceholderProps, Key, StringLikeChildren } from '../types.js';
+/** Represents the state of the `TagField` component for validation purposes. */
+export interface UNSTABLE_TagFieldValidationValue {
+    /** The selected keys in the TagField. */
+    selectedKeys: Set<Key> | null;
+    /** The value of the TagField input. */
+    inputValue: string;
+}
+export interface UNSTABLE_TagFieldProps<T extends CollectionItem = CollectionItem> extends CommonProps, FieldWithPlaceholderProps<UNSTABLE_TagFieldValidationValue>, CollectionProps<T>, Pick<RACComboBoxProps<T>, 'isRequired' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'inputValue' | 'defaultInputValue' | 'autoFocus' | 'onInputChange' | 'onFocus' | 'onBlur' | 'onOpenChange'>, Pick<RACListBoxProps<T>, 'onScroll'>, Pick<TagGroupProps<T>, 'renderEmptyState'> {
+    selectedKeys?: Iterable<Key>;
+    defaultSelectedKeys?: Iterable<Key>;
+    onSelectionChange?: (keys: Set<Key>) => void;
+}
+/**
+ * Allows users to filter a collapsible list and select multiple items from it.
+ *
+ * See [tag field usage guidelines](https://ui.cimpress.com/components/tag-field)
+ */
+declare const _UNSTABLE_TagField: <T extends CollectionItem>(props: UNSTABLE_TagFieldProps<T> & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
+export { _UNSTABLE_TagField as UNSTABLE_TagField };
+export interface UNSTABLE_TagFieldItemProps<T extends CollectionItem> extends Pick<RACListBoxItemProps<T>, 'id' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
+    /** The content to display as the label. */
+    children: StringLikeChildren;
+}
+/** Renders a single list item within `TagField`. */
+export declare function UNSTABLE_TagFieldItem<T extends CollectionItem>({ children, ...props }: UNSTABLE_TagFieldItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_TagFieldItem {
+    var displayName: string;
+}
+export interface UNSTABLE_TagFieldSectionProps<T extends CollectionItem> extends CollectionProps<T> {
+    /** The ID of the section. Has to be unique across all sections and items. */
+    id?: Key;
+    /** The content to display as the section title. */
+    title: string;
+}
+/** Groups list items within `TagField` into a section. */
+export declare function UNSTABLE_TagFieldSection<T extends CollectionItem>({ title, children, items, ...props }: UNSTABLE_TagFieldSectionProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace UNSTABLE_TagFieldSection {
+    var displayName: string;
+}
+//# sourceMappingURL=tag-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag-field.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-field/tag-field.tsx"],"names":[],"mappings":"AAQA,OAAO,EAOL,KAAK,YAAY,IAAI,eAAe,EAIpC,KAAK,aAAa,IAAI,gBAAgB,EACtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EACV,cAAc,EACd,eAAe,EACf,WAAW,EACX,yBAAyB,EACzB,GAAG,EACH,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAOrB,gFAAgF;AAChF,MAAM,WAAW,gCAAgC;IAC/C,yCAAyC;IACzC,YAAY,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAC9B,uCAAuC;IACvC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAC/E,SAAQ,WAAW,EACjB,yBAAyB,CAAC,gCAAgC,CAAC,EAC3D,eAAe,CAAC,CAAC,CAAC,EAClB,IAAI,CACF,gBAAgB,CAAC,CAAC,CAAC,EACjB,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,cAAc,CACjB,EACD,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACpC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IAC5C,YAAY,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC7B,mBAAmB,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC;IACpC,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C;AAyOD;;;;GAIG;AACH,QAAA,MAAM,kBAAkB,GA5OG,CAAC,SAAS,cAAc,0KA4OiC,CAAC;AAErF,OAAO,EAAE,kBAAkB,IAAI,iBAAiB,EAAE,CAAC;AAEnD,MAAM,WAAW,0BAA0B,CAAC,CAAC,SAAS,cAAc,CAClE,SAAQ,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IACzF,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,oDAAoD;AACpD,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,CAAC,CAAC,CAAC,2CAqBpH;yBArBe,qBAAqB;;;AAyBrC,MAAM,WAAW,6BAA6B,CAAC,CAAC,SAAS,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACjG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,0DAA0D;AAC1D,wBAAgB,wBAAwB,CAAC,CAAC,SAAS,cAAc,EAAE,EACjE,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EAAE,6BAA6B,CAAC,CAAC,CAAC,2CAelC;yBApBe,wBAAwB"}