@commercetools/nimbus 0.0.0-canary-20251031122555 → 0.0.0-canary-20251031185705

package/dist/chunks/{tag-group-DQ72dsVp.es.js → tag-group-FYIVNur5.es.js}

@@ -1,54 +1,54 @@
 import { jsx as v, jsxs as Le, Fragment as ke } from "react/jsx-runtime";
-import { createSlotRecipeContext as he } from "@chakra-ui/react";
-import { $ as Te } from "./Button-SjGHt140.es.js";
-import { h as w, k as we, l as Re } from "./SelectionManager-S9Amkvfg.es.js";
-import { a as R, e as F, $ as T, b as Fe } from "./utils-_m_bPtjI.es.js";
-import { $ as Se } from "./Label-CUlxhtnU.es.js";
-import { a as g } from "./ListBox-CdtzuZzA.es.js";
-import { b as Ae } from "./RSPContexts-DLgb84PF.es.js";
-import { a as Me, $ as ze } from "./SelectionIndicator-B27AsfqE.es.js";
-import { $ as Ne } from "./Text-DOcU1ycg.es.js";
-import { $ as Ge, f as Ve, c as je, g as Ke } from "./CollectionBuilder-BhYUxJYI.es.js";
-import { $ as x, a as Ie } from "./mergeProps-DtKAFxbD.es.js";
+import { defineMessages as he, useIntl as Te } from "react-intl";
+import { Close as we } from "@commercetools/nimbus-icons";
+import { createSlotRecipeContext as Re } from "@chakra-ui/react";
+import { $ as Fe } from "./Button-CmpJG0ec.es.js";
+import { h as w, k as Se, l as Ae } from "./SelectionManager-D87OqHl3.es.js";
+import { a as R, e as F, $ as T, b as Me } from "./utils-9vu7GUaz.es.js";
+import { $ as ze } from "./Label-Bu5lTMzy.es.js";
+import { a as g } from "./ListBox-B43JPDJW.es.js";
+import { b as Ne } from "./RSPContexts-DLgb84PF.es.js";
+import { a as Ge, $ as Ve } from "./SelectionIndicator-B27AsfqE.es.js";
+import { $ as je } from "./Text-DOcU1ycg.es.js";
+import { $ as Ke, f as Ie, c as Oe, g as He } from "./CollectionBuilder-ksCQul85.es.js";
+import { a as x, $ as Ue } from "./mergeProps-D1jjFfMs.es.js";
 import { $ as D } from "./filterDOMProps-BSVCO5jK.es.js";
-import { $ as Oe } from "./useObjectRef-CaJ5pgjX.es.js";
-import c, { useState as He, useRef as S, useEffect as A, forwardRef as M, useContext as P, createContext as z } from "react";
-import { $ as N } from "./useFocusRing-4xTd5aPf.es.js";
-import { $ as Ue } from "./useHover-B62SXQZ1.es.js";
-import { $ as We, a as _e } from "./useGridListItem-WBYPB9KF.es.js";
-import { c as qe } from "./Header-CpF5ynyj.es.js";
-import { $ as Je } from "./useField-pcfe8gKN.es.js";
-import { $ as Qe } from "./useFocusWithin-CmZPz1jk.es.js";
-import { $ as Ze } from "./context-DW7UvQ8z.es.js";
-import { e as Xe } from "./openLink-BNz58j4a.es.js";
-import { a as Ye } from "./scrollIntoView-CRn_Y0bq.es.js";
-import { f as eo } from "./useFocusVisible-Cqoc10KD.es.js";
-import { $ as oo } from "./useFocusable-Dhchq_tH.es.js";
-import { $ as ro } from "./useLocalizedStringFormatter-DaRRUvyV.es.js";
-import { $ as to, a as ao } from "./useListState-BFNT8oUW.es.js";
-import { defineMessages as uo, useIntl as io } from "react-intl";
-import { Close as so } from "@commercetools/nimbus-icons";
-import { I as lo } from "./icon-button-XkzBkGuJ.es.js";
+import { $ as We } from "./useObjectRef-CaJ5pgjX.es.js";
+import c, { useState as _e, useRef as S, useEffect as A, forwardRef as M, useContext as P, createContext as z } from "react";
+import { $ as N } from "./useFocusRing-oMAqzr3e.es.js";
+import { $ as qe } from "./useHover-BtRK9g2L.es.js";
+import { $ as Je, a as Qe } from "./useGridListItem-F3yPBTEW.es.js";
+import { c as Ze } from "./Header-DOAbQymP.es.js";
+import { $ as Xe } from "./useField-BfW84CS4.es.js";
+import { $ as Ye } from "./useFocusWithin-nAsP7Ru3.es.js";
+import { $ as eo } from "./context-DW7UvQ8z.es.js";
+import { e as oo } from "./openLink-BNz58j4a.es.js";
+import { a as ro } from "./scrollIntoView-CQMm8-SR.es.js";
+import { f as to } from "./useFocusVisible-Uw6yFmFY.es.js";
+import { $ as ao } from "./useFocusable-Bm-DQaak.es.js";
+import { $ as uo } from "./useLocalizedStringFormatter-DaRRUvyV.es.js";
+import { $ as io, a as so } from "./useListState-BkVh9WsE.es.js";
+import { I as lo } from "./icon-button-CfN4QLes.es.js";
 const G = /* @__PURE__ */ new WeakMap();
 function no(e, o, r) {
-  let { direction: t } = Ze(), s = e.keyboardDelegate || new qe({
+  let { direction: t } = eo(), s = e.keyboardDelegate || new Ze({
     collection: o.collection,
     ref: r,
     orientation: "horizontal",
     direction: t,
     disabledKeys: o.disabledKeys,
     disabledBehavior: o.selectionManager.disabledBehavior
-  }), { labelProps: i, fieldProps: a, descriptionProps: n, errorMessageProps: f } = Je({
+  }), { labelProps: i, fieldProps: a, descriptionProps: n, errorMessageProps: f } = Xe({
     ...e,
     labelElementType: "span"
-  }), { gridProps: p } = We({
+  }), { gridProps: p } = Je({
     ...e,
     ...a,
     keyboardDelegate: s,
     shouldFocusWrap: !0,
     linkBehavior: "override",
     keyboardNavigationBehavior: "tab"
-  }, o, r), [u, b] = He(!1), { focusWithinProps: l } = Qe({
+  }, o, r), [u, b] = _e(!1), { focusWithinProps: l } = Ye({
     onFocusWithinChange: b
   }), $ = D(e), d = S(o.collection.size);
   return A(() => {
@@ -284,7 +284,7 @@ function co(e) {
   return e && e.__esModule ? e.default : e;
 }
 function fo(e, o, r) {
-  let { item: t } = e, s = ro(co(ge), "@react-aria/tag"), i = Ie(), { onRemove: a } = G.get(o) || {}, { rowProps: n, gridCellProps: f, ...p } = _e({
+  let { item: t } = e, s = uo(co(ge), "@react-aria/tag"), i = Ue(), { onRemove: a } = G.get(o) || {}, { rowProps: n, gridCellProps: f, ...p } = Qe({
     node: t
   }, o, r), { descriptionProps: u, ...b } = p, l = o.disabledKeys.has(t.key) || t.props.isDisabled, $ = (h) => {
     if (h.key === "Delete" || h.key === "Backspace") {
@@ -293,11 +293,11 @@ function fo(e, o, r) {
         t.key
       ]));
     }
-  }, d = eo();
+  }, d = to();
   d === "virtual" && typeof window < "u" && "ontouchstart" in window && (d = "pointer");
-  let C = a && (d === "keyboard" || d === "virtual") ? s.format("removeDescription") : "", E = Ye(C), y = t.key === o.selectionManager.focusedKey, L = o.selectionManager.focusedKey != null, m = -1;
+  let C = a && (d === "keyboard" || d === "virtual") ? s.format("removeDescription") : "", E = ro(C), y = t.key === o.selectionManager.focusedKey, L = o.selectionManager.focusedKey != null, m = -1;
   !l && (y || !L) && (m = 0);
-  let B = D(t.props), k = Xe(t.props), { focusableProps: ye } = oo({
+  let B = D(t.props), k = oo(t.props), { focusableProps: ye } = ao({
     isDisabled: l
   }, r);
   return {
@@ -326,7 +326,7 @@ function fo(e, o, r) {
 const po = /* @__PURE__ */ z(null), De = /* @__PURE__ */ z(null), bo = /* @__PURE__ */ M(function(o, r) {
   return [o, r] = T(o, r, po), /* @__PURE__ */ c.createElement(g.Provider, {
     value: null
-  }, /* @__PURE__ */ c.createElement(Ke, {
+  }, /* @__PURE__ */ c.createElement(He, {
     content: o.children
   }, (t) => /* @__PURE__ */ c.createElement($o, {
     props: o,
@@ -336,12 +336,12 @@ const po = /* @__PURE__ */ z(null), De = /* @__PURE__ */ z(null), bo = /* @__PUR
 });
 function $o({ props: e, forwardedRef: o, collection: r }) {
   let t = S(null), { id: s, ...i } = e;
-  [i, t] = T(i, t, Ae);
-  let { filter: a, shouldUseVirtualFocus: n, ...f } = i, [p, u] = Fe(!e["aria-label"] && !e["aria-labelledby"]), b = to({
+  [i, t] = T(i, t, Ne);
+  let { filter: a, shouldUseVirtualFocus: n, ...f } = i, [p, u] = Me(!e["aria-label"] && !e["aria-labelledby"]), b = io({
     ...f,
     children: void 0,
     collection: r
-  }), l = ao(b, a), $ = D(i, {
+  }), l = so(b, a), $ = D(i, {
     global: !0
   }), d = Object.fromEntries(Object.entries($).map(([B, k]) => [
     B,
@@ -362,7 +362,7 @@ function $o({ props: e, forwardedRef: o, collection: r }) {
   }, /* @__PURE__ */ c.createElement(F, {
     values: [
       [
-        Se,
+        ze,
         {
           ...E,
           elementType: "span",
@@ -381,7 +381,7 @@ function $o({ props: e, forwardedRef: o, collection: r }) {
         l
       ],
       [
-        Ne,
+        je,
         {
           slots: {
             description: y,
@@ -396,7 +396,7 @@ const mo = /* @__PURE__ */ M(function(o, r) {
   return P(g) ? /* @__PURE__ */ c.createElement(vo, {
     props: o,
     forwardedRef: r
-  }) : /* @__PURE__ */ c.createElement(je, o);
+  }) : /* @__PURE__ */ c.createElement(Oe, o);
 });
 function vo({ props: e, forwardedRef: o }) {
   let r = P(g), { CollectionRoot: t } = P(w), [s, i] = T({}, o, De), { focusProps: a, isFocused: n, isFocusVisible: f } = N(), p = {
@@ -409,7 +409,7 @@ function vo({ props: e, forwardedRef: o }) {
     style: e.style,
     defaultClassName: "react-aria-TagList",
     values: p
-  }), b = Re(r.selectionManager.focusedKey), l = D(e, {
+  }), b = Ae(r.selectionManager.focusedKey), l = D(e, {
     global: !0
   });
   return /* @__PURE__ */ c.createElement("div", {
@@ -418,17 +418,17 @@ function vo({ props: e, forwardedRef: o }) {
     "data-empty": r.collection.size === 0 || void 0,
     "data-focused": n || void 0,
     "data-focus-visible": f || void 0
-  }, /* @__PURE__ */ c.createElement(ze, null, r.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ c.createElement(t, {
+  }, /* @__PURE__ */ c.createElement(Ve, null, r.collection.size === 0 && e.renderEmptyState ? e.renderEmptyState(p) : /* @__PURE__ */ c.createElement(t, {
     collection: r.collection,
     persistedKeys: b
   })));
 }
-const xo = /* @__PURE__ */ Ge(Ve, (e, o, r) => {
-  let t = P(g), s = Oe(o), { focusProps: i, isFocusVisible: a } = N({
+const xo = /* @__PURE__ */ Ke(Ie, (e, o, r) => {
+  let t = P(g), s = We(o), { focusProps: i, isFocusVisible: a } = N({
     within: !1
   }), { rowProps: n, gridCellProps: f, removeButtonProps: p, ...u } = fo({
     item: r
-  }, t, s), { hoverProps: b, isHovered: l } = Ue({
+  }, t, s), { hoverProps: b, isHovered: l } = qe({
     isDisabled: !u.allowsSelection,
     onHoverStart: r.props.onHoverStart,
     onHoverChange: r.props.onHoverChange,
@@ -473,7 +473,7 @@ const xo = /* @__PURE__ */ Ge(Ve, (e, o, r) => {
   }, /* @__PURE__ */ c.createElement(F, {
     values: [
       [
-        Te,
+        Fe,
         {
           slots: {
             remove: p
@@ -482,17 +482,17 @@ const xo = /* @__PURE__ */ Ge(Ve, (e, o, r) => {
       ],
       [
         w,
-        we
+        Se
       ],
       [
-        Me,
+        Ge,
         {
           isSelected: u.isSelected
         }
       ]
     ]
   }, $.children)));
-}), { withProvider: go, withContext: Be } = /* @__PURE__ */ he({
+}), { withProvider: go, withContext: Be } = /* @__PURE__ */ Re({
   key: "taggroup"
 }), Do = /* @__PURE__ */ go(bo, "root"), Bo = (e) => {
   const { ref: o, ...r } = e, t = Be(
@@ -525,7 +525,7 @@ const Ce = ({
   ...r
 }) => /* @__PURE__ */ v(Bo, { ref: o, ...r, children: e });
 Ce.displayName = "TagGroup.TagList";
-const Co = /* @__PURE__ */ uo({
+const Co = /* @__PURE__ */ he({
   removeTag: {
     id: "Nimbus.TagGroup.removeTag",
     description: "aria-label for remove tag button",
@@ -536,7 +536,7 @@ const Co = /* @__PURE__ */ uo({
   ref: o,
   ...r
 }) => {
-  const t = io();
+  const t = Te();
   return /* @__PURE__ */ v(Po, { ref: o, textValue: typeof e == "string" ? e : void 0, ...r, children: ({ allowsRemoving: i, isSelected: a, selectionMode: n }) => /* @__PURE__ */ Le(ke, { children: [
     e,
     i && n !== "multiple" && n !== "single" && /* @__PURE__ */ v(
@@ -547,18 +547,66 @@ const Co = /* @__PURE__ */ uo({
         slot: "remove",
         colorPalette: a ? void 0 : "neutral",
         "aria-label": t.formatMessage(Co.removeTag),
-        children: /* @__PURE__ */ v(so, {})
+        children: /* @__PURE__ */ v(we, {})
       }
     )
   ] }) });
 };
 Ee.displayName = "TagGroup.Tag";
 const or = {
+  /**
+   * # TagGroup.Root
+   *
+   * The root component that provides context and state management for the tag group.
+   * Must wrap all tag group parts (TagList, Tag) to coordinate their behavior.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root selectionMode="multiple" onSelectionChange={handleSelection}>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag>Tag 1</TagGroup.Tag>
+   *     <TagGroup.Tag>Tag 2</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
   Root: Pe,
+  /**
+   * # TagGroup.TagList
+   *
+   * The container component that holds individual tags within the tag group.
+   * Provides the proper semantic structure and keyboard navigation for tags.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag>Tag 1</TagGroup.Tag>
+   *     <TagGroup.Tag>Tag 2</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
   TagList: Ce,
+  /**
+   * # TagGroup.Tag
+   *
+   * Individual tag component that can be selected, removed, or used for display.
+   * Supports keyboard interaction and automatic remove button when removable.
+   *
+   * @example
+   * ```tsx
+   * <TagGroup.Root onRemove={handleRemove}>
+   *   <TagGroup.TagList>
+   *     <TagGroup.Tag id="tag1">Removable Tag</TagGroup.Tag>
+   *     <TagGroup.Tag id="tag2">Another Tag</TagGroup.Tag>
+   *   </TagGroup.TagList>
+   * </TagGroup.Root>
+   * ```
+   */
   Tag: Ee
 };
 export {
   or as T
 };
-//# sourceMappingURL=tag-group-DQ72dsVp.es.js.map
+//# sourceMappingURL=tag-group-FYIVNur5.es.js.map