@commercetools/nimbus 3.0.0 → 3.1.0

package/dist/chunks/tabs-BuYHA8KE.es.js

@@ -1,557 +0,0 @@
-import { jsx as b, jsxs as Q, Fragment as X } from "react/jsx-runtime";
-import { a as D, b as K, $ as Y, e as H, d as Z } from "./utils-BBrLCz2b.es.js";
-import { g as ee, e as te, h as z, j as ie, k as ae } from "./useCollection-RgQhRQUv.es.js";
-import { a as le, $ as se } from "./SelectionIndicator-BX52LU2T.es.js";
-import { $ as v } from "./filterDOMProps-BBiQzGq3.es.js";
-import { a as y, $ as ne } from "./mergeProps-Bcbq3GVJ.es.js";
-import { $ as re } from "./useFocusable-C_nr2Krq.es.js";
-import { c as oe } from "./useFocusVisible-DqC5JNzb.es.js";
-import { $ as de } from "./useHasTabbableChild-Dbdf_KS-.es.js";
-import { $ as A } from "./useLabels-HhoRmCva.es.js";
-import { $ as ce } from "./I18nProvider-BuwVdK1A.es.js";
-import f, { useMemo as E, useRef as fe, useEffect as be, useContext as g, useState as ue, forwardRef as j, createContext as B } from "react";
-import { $ as $e, g as W, f as pe, a as he } from "./CollectionBuilder-GnbDoE-A.es.js";
-import { $ as ye } from "./Hidden-QDfbcOVE.es.js";
-import { a as me, b as O } from "./useListState-ChE2yd3D.es.js";
-import { $ as Pe } from "./useControlledState-BO6rCKQt.es.js";
-import { $ as ge, a as xe } from "./animation-t2aj3ujU.es.js";
-import { $ as I } from "./useFocusRing-BjLV7S0I.es.js";
-import { $ as Ke } from "./useHover-BdXEf8Xj.es.js";
-import { $ as w } from "./useObjectRef-tuMEdnba.es.js";
-import { createSlotRecipeContext as ve, useChakraContext as Se, useSlotRecipe as De } from "@chakra-ui/react/styled-system";
-import { e as U } from "./extract-style-props-Bcwub3j6.es.js";
-const _ = /* @__PURE__ */ new WeakMap();
-function S(t, e, i) {
-  if (!t)
-    return "";
-  typeof e == "string" && (e = e.replace(/\s+/g, ""));
-  let a = _.get(t);
-  return process.env.NODE_ENV !== "production" && !a && console.error("There is no tab id, please check if you have rendered the tab panel before the tab list."), `${a}-${i}-${e}`;
-}
-function Ee(t, e, i) {
-  let { key: a, isDisabled: n, shouldSelectOnPressUp: l } = t, { selectionManager: s, selectedKey: o } = e, d = a === o, r = n || e.isDisabled || e.selectionManager.isDisabled(a), c = e.collection.getItem(a), { itemProps: u, isPressed: $ } = ee({
-    selectionManager: s,
-    key: a,
-    ref: i,
-    isDisabled: r,
-    // Link tabs should behave like native anchors (navigate on press up)
-    // This avoids reopening beforeunload dialogs when browsers replay
-    // queued pointer enter/leave events after cancellation.
-    shouldSelectOnPressUp: l ?? c?.props.href != null,
-    linkBehavior: "selection"
-  }), p = S(e, a, "tab"), h = S(e, a, "tabpanel"), { tabIndex: x } = u, P = v(c?.props, {
-    labelable: !0
-  });
-  delete P.id;
-  let J = oe(c?.props), { focusableProps: G } = re({
-    ...c?.props,
-    isDisabled: r
-  }, i);
-  return {
-    tabProps: y(P, G, J, u, {
-      id: p,
-      "aria-selected": d,
-      "aria-disabled": r || void 0,
-      "aria-controls": d ? h : void 0,
-      tabIndex: r ? void 0 : x,
-      role: "tab"
-    }),
-    isSelected: d,
-    isDisabled: r,
-    isPressed: $
-  };
-}
-function Te(t, e, i) {
-  let a = de(i) ? void 0 : 0;
-  const n = S(e, t.id ?? e?.selectedKey, "tabpanel"), l = A({
-    ...t,
-    id: n,
-    "aria-labelledby": S(e, e?.selectedKey, "tab")
-  });
-  return {
-    tabPanelProps: y(l, {
-      tabIndex: a,
-      role: "tabpanel",
-      "aria-describedby": t["aria-describedby"],
-      "aria-details": t["aria-details"]
-    })
-  };
-}
-class Ce {
-  constructor(e, i, a, n = /* @__PURE__ */ new Set()) {
-    this.collection = e, this.flipDirection = i === "rtl" && a === "horizontal", this.disabledKeys = n, this.tabDirection = a === "horizontal";
-  }
-  getKeyLeftOf(e) {
-    return this.flipDirection ? this.getNextKey(e) : this.getPreviousKey(e);
-  }
-  getKeyRightOf(e) {
-    return this.flipDirection ? this.getPreviousKey(e) : this.getNextKey(e);
-  }
-  isDisabled(e) {
-    return this.disabledKeys.has(e) || !!this.collection.getItem(e)?.props?.isDisabled;
-  }
-  getFirstKey() {
-    let e = this.collection.getFirstKey();
-    return e != null && this.isDisabled(e) && (e = this.getNextKey(e)), e;
-  }
-  getLastKey() {
-    let e = this.collection.getLastKey();
-    return e != null && this.isDisabled(e) && (e = this.getPreviousKey(e)), e;
-  }
-  getKeyAbove(e) {
-    return this.tabDirection ? null : this.getPreviousKey(e);
-  }
-  getKeyBelow(e) {
-    return this.tabDirection ? null : this.getNextKey(e);
-  }
-  getNextKey(e) {
-    let i = e;
-    do
-      i = this.collection.getKeyAfter(i), i == null && (i = this.collection.getFirstKey());
-    while (i != null && this.isDisabled(i));
-    return i;
-  }
-  getPreviousKey(e) {
-    let i = e;
-    do
-      i = this.collection.getKeyBefore(i), i == null && (i = this.collection.getLastKey());
-    while (i != null && this.isDisabled(i));
-    return i;
-  }
-}
-function Fe(t, e, i) {
-  let { orientation: a = "horizontal", keyboardActivation: n = "automatic" } = t, { collection: l, selectionManager: s, disabledKeys: o } = e, { direction: d } = ce(), r = E(() => new Ce(l, d, a, o), [
-    l,
-    o,
-    a,
-    d
-  ]), { collectionProps: c } = te({
-    ref: i,
-    selectionManager: s,
-    keyboardDelegate: r,
-    selectOnFocus: n === "automatic",
-    disallowEmptySelection: !0,
-    scrollRef: i,
-    linkBehavior: "selection"
-  }), u = ne();
-  _.set(e, u);
-  let $ = A({
-    ...t,
-    id: u
-  });
-  return {
-    tabListProps: {
-      ...y(c, $),
-      role: "tablist",
-      "aria-orientation": a,
-      tabIndex: void 0
-    }
-  };
-}
-function Ie(t) {
-  let [e, i] = Pe(t.selectedKey, t.defaultSelectedKey ?? null, t.onSelectionChange), a = E(() => e != null ? [
-    e
-  ] : [], [
-    e
-  ]), { collection: n, disabledKeys: l, selectionManager: s } = me({
-    ...t,
-    selectionMode: "single",
-    disallowEmptySelection: !0,
-    allowDuplicateSelectionEvents: !0,
-    selectedKeys: a,
-    onSelectionChange: (d) => {
-      if (d === "all") return;
-      let r = d.values().next().value ?? null;
-      r === e && t.onSelectionChange && t.onSelectionChange(r), i(r);
-    }
-  }), o = e != null ? n.getItem(e) : null;
-  return {
-    collection: n,
-    disabledKeys: l,
-    selectionManager: s,
-    selectedKey: e,
-    setSelectedKey: i,
-    selectedItem: o
-  };
-}
-function we(t) {
-  let e = Ie({
-    ...t,
-    onSelectionChange: t.onSelectionChange ? (s) => {
-      s != null && t.onSelectionChange?.(s);
-    } : void 0,
-    suppressTextValueWarning: !0,
-    defaultSelectedKey: t.defaultSelectedKey ?? V(t.collection, t.disabledKeys ? new Set(t.disabledKeys) : /* @__PURE__ */ new Set()) ?? void 0
-  }), { selectionManager: i, collection: a, selectedKey: n } = e, l = fe(n);
-  return be(() => {
-    let s = n;
-    t.selectedKey == null && (i.isEmpty || s == null || !a.getItem(s)) && (s = V(a, e.disabledKeys), s != null && i.setSelectedKeys([
-      s
-    ])), (s != null && i.focusedKey == null || !i.isFocused && s !== l.current) && i.setFocusedKey(s), l.current = s;
-  }), {
-    ...e,
-    isDisabled: t.isDisabled || !1
-  };
-}
-function V(t, e) {
-  let i = null;
-  if (t) {
-    for (i = t.getFirstKey(); i != null && (e.has(i) || t.getItem(i)?.props?.isDisabled) && i !== t.getLastKey(); ) i = t.getKeyAfter(i);
-    i != null && (e.has(i) || t.getItem(i)?.props?.isDisabled) && i === t.getLastKey() && (i = t.getFirstKey());
-  }
-  return i;
-}
-const T = /* @__PURE__ */ B(null), m = /* @__PURE__ */ B(null), Le = /* @__PURE__ */ j(function(e, i) {
-  [e, i] = Y(e, i, T);
-  let { children: a, orientation: n = "horizontal" } = e;
-  return a = E(() => typeof a == "function" ? a({
-    orientation: n,
-    defaultChildren: null
-  }) : a, [
-    a,
-    n
-  ]), /* @__PURE__ */ f.createElement(pe, {
-    content: a
-  }, (l) => /* @__PURE__ */ f.createElement(Re, {
-    props: e,
-    collection: l,
-    tabsRef: i
-  }));
-});
-function Re({ props: t, tabsRef: e, collection: i }) {
-  let { orientation: a = "horizontal" } = t, n = we({
-    ...t,
-    collection: i,
-    children: void 0
-  }), { focusProps: l, isFocused: s, isFocusVisible: o } = I({
-    within: !0
-  }), d = E(() => ({
-    orientation: a,
-    isFocusWithin: s,
-    isFocusVisible: o
-  }), [
-    a,
-    s,
-    o
-  ]), r = D({
-    ...t,
-    defaultClassName: "react-aria-Tabs",
-    values: d
-  }), c = v(t, {
-    global: !0
-  });
-  return /* @__PURE__ */ f.createElement(K.div, {
-    ...y(c, r, l),
-    ref: e,
-    slot: t.slot || void 0,
-    "data-focused": s || void 0,
-    "data-orientation": a,
-    "data-focus-visible": o || void 0,
-    "data-disabled": n.isDisabled || void 0
-  }, /* @__PURE__ */ f.createElement(H, {
-    values: [
-      [
-        T,
-        t
-      ],
-      [
-        m,
-        n
-      ]
-    ]
-  }, r.children));
-}
-const Me = /* @__PURE__ */ j(function(e, i) {
-  return g(m) ? /* @__PURE__ */ f.createElement(ke, {
-    props: e,
-    forwardedRef: i
-  }) : /* @__PURE__ */ f.createElement(W, e);
-});
-function ke({ props: t, forwardedRef: e }) {
-  let i = g(m), { CollectionRoot: a } = g(z), { orientation: n = "horizontal", keyboardActivation: l = "automatic" } = Z(T), s = w(e), { tabListProps: o } = Fe({
-    ...t,
-    orientation: n,
-    keyboardActivation: l
-  }, i, s), d = D({
-    ...t,
-    children: null,
-    defaultClassName: "react-aria-TabList",
-    values: {
-      orientation: n,
-      state: i
-    }
-  }), r = v(t, {
-    global: !0
-  });
-  return delete r.id, /* @__PURE__ */ f.createElement(K.div, {
-    ...y(r, d, o),
-    ref: s,
-    "data-orientation": n || void 0
-  }, /* @__PURE__ */ f.createElement(se, null, /* @__PURE__ */ f.createElement(a, {
-    collection: i.collection,
-    persistedKeys: ae(i.selectionManager.focusedKey)
-  })));
-}
-const N = class N extends he {
-};
-N.type = "item";
-let F = N;
-const Ne = /* @__PURE__ */ $e(F, (t, e, i) => {
-  let a = g(m), n = w(e), { tabProps: l, isSelected: s, isDisabled: o, isPressed: d } = Ee({
-    key: i.key,
-    ...t
-  }, a, n), { focusProps: r, isFocused: c, isFocusVisible: u } = I(), { hoverProps: $, isHovered: p } = Ke({
-    isDisabled: o,
-    onHoverStart: t.onHoverStart,
-    onHoverEnd: t.onHoverEnd,
-    onHoverChange: t.onHoverChange
-  }), h = D({
-    ...t,
-    id: void 0,
-    children: i.rendered,
-    defaultClassName: "react-aria-Tab",
-    values: {
-      isSelected: s,
-      isDisabled: o,
-      isFocused: c,
-      isFocusVisible: u,
-      isPressed: d,
-      isHovered: p
-    }
-  }), x = i.props.href ? K.a : K.div, P = v(t, {
-    global: !0
-  });
-  return delete P.id, delete P.onClick, /* @__PURE__ */ f.createElement(x, {
-    ...y(P, h, l, r, $),
-    ref: n,
-    "data-selected": s || void 0,
-    "data-disabled": o || void 0,
-    "data-focused": c || void 0,
-    "data-focus-visible": u || void 0,
-    "data-pressed": d || void 0,
-    "data-hovered": p || void 0
-  }, /* @__PURE__ */ f.createElement(le.Provider, {
-    value: {
-      isSelected: s
-    }
-  }, h.children));
-}), Oe = /* @__PURE__ */ ye(function(e, i) {
-  const a = g(m);
-  let n = w(i), l = a.selectedKey === e.id, [s, o] = ue(a.selectedKey != null ? l : null);
-  s == null && a.selectedKey != null ? o(l) : !l && s && o(!1);
-  let d = ge(n, l);
-  return !l && !e.shouldForceMount && !d ? null : /* @__PURE__ */ f.createElement(Ve, {
-    ...e,
-    tabPanelRef: n,
-    isInitiallySelected: s || !1,
-    isExiting: d
-  });
-});
-function Ve(t) {
-  let e = g(m), { id: i, tabPanelRef: a, isInitiallySelected: n, isExiting: l, ...s } = t, { tabPanelProps: o } = Te(t, e, a), { focusProps: d, isFocused: r, isFocusVisible: c } = I(), u = e.selectedKey === t.id, $ = xe(a) && !n, p = D({
-    ...t,
-    defaultClassName: "react-aria-TabPanel",
-    values: {
-      isFocused: r,
-      isFocusVisible: c,
-      // @ts-ignore - compatibility with React < 19
-      isInert: O(!u),
-      isEntering: $,
-      isExiting: l,
-      state: e
-    }
-  }), h = v(s, {
-    global: !0
-  });
-  delete h.id;
-  let x = u ? y(h, o, d, p) : y(h, p);
-  return /* @__PURE__ */ f.createElement(K.div, {
-    ...x,
-    ref: a,
-    "data-focused": r || void 0,
-    "data-focus-visible": c || void 0,
-    // @ts-ignore
-    inert: O(!u || t.inert),
-    "data-inert": u ? void 0 : "true",
-    "data-entering": $ || void 0,
-    "data-exiting": l || void 0
-  }, /* @__PURE__ */ f.createElement(H, {
-    values: [
-      [
-        T,
-        null
-      ],
-      [
-        m,
-        null
-      ]
-    ]
-  }, /* @__PURE__ */ f.createElement(z.Provider, {
-    value: ie
-  }, p.children)));
-}
-const { withProvider: He, withContext: C } = /* @__PURE__ */ ve({
-  key: "nimbusTabs"
-}), ze = /* @__PURE__ */ He("div", "root"), Ae = /* @__PURE__ */ C("div", "list"), je = /* @__PURE__ */ C("button", "tab"), Be = /* @__PURE__ */ C("div", "panels"), We = /* @__PURE__ */ C("div", "panel"), L = ({
-  children: t,
-  isDisabled: e,
-  href: i,
-  target: a,
-  rel: n,
-  routerOptions: l,
-  ...s
-}) => /* @__PURE__ */ b(je, { asChild: !0, ...s, children: /* @__PURE__ */ b(
-  Ne,
-  {
-    isDisabled: e,
-    href: i,
-    target: a,
-    rel: n,
-    routerOptions: l,
-    children: t
-  }
-) });
-L.displayName = "Tabs.Tab";
-const R = ({ tabs: t, children: e, ...i }) => {
-  const [a, n] = U(i);
-  if (!t && !e)
-    throw new Error(
-      'Tabs.List: Either provide "tabs" prop or "children" must be provided'
-    );
-  return /* @__PURE__ */ b(Ae, { ...a, asChild: !0, children: /* @__PURE__ */ b(Me, { items: t, ...n, children: t ? (l) => /* @__PURE__ */ b(
-    L,
-    {
-      id: l.id,
-      isDisabled: l.isDisabled,
-      href: l.href,
-      target: l.target,
-      rel: l.rel,
-      routerOptions: l.routerOptions,
-      children: l.tabLabel
-    },
-    l.id
-  ) : e }) });
-};
-R.displayName = "Tabs.List";
-const M = ({
-  children: t,
-  ref: e,
-  shouldForceMount: i,
-  ...a
-}) => {
-  if (!t)
-    throw new Error("Tabs.Panel: children prop is required");
-  return /* @__PURE__ */ b(We, { asChild: !0, ref: e, ...a, children: /* @__PURE__ */ b(Oe, { shouldForceMount: i, children: t }) });
-};
-M.displayName = "Tabs.Panel";
-const k = ({ tabs: t, children: e, ...i }) => {
-  if (!t && !e)
-    throw new Error(
-      'Tabs.Panels: Either provide "items" prop or "children" must be provided'
-    );
-  return /* @__PURE__ */ b(Be, { ...i, children: t ? /* @__PURE__ */ b(W, { items: t, children: (a) => /* @__PURE__ */ b(M, { id: a.id, children: a.panelContent }, a.id) }) : e });
-};
-k.displayName = "Tabs.Panels";
-const q = ({
-  children: t,
-  tabs: e,
-  tabListAriaLabel: i,
-  ...a
-}) => {
-  const n = Se(), l = De({ key: "nimbusTabs" }), [s, o] = l.splitVariantProps(a), [d, r] = U(o), c = n.normalizeValue(s.orientation);
-  return /* @__PURE__ */ b(ze, { asChild: !0, ...s, ...d, children: /* @__PURE__ */ b(Le, { ...r, orientation: c, children: t || /* @__PURE__ */ Q(X, { children: [
-    /* @__PURE__ */ b(R, { tabs: e, "aria-label": i }),
-    /* @__PURE__ */ b(k, { tabs: e })
-  ] }) }) });
-};
-q.displayName = "Tabs.Root";
-const ut = {
-  /**
-   * # Tabs.Root
-   *
-   * The root component that provides context and state management for the tabs.
-   * Must wrap all tabs parts (List, Tab, Panels, Panel) to coordinate their behavior.
-   *
-   * @example
-   * ```tsx
-   * <Tabs.Root orientation="horizontal" size="md">
-   *   <Tabs.List>
-   *     <Tabs.Tab id="tab1">Tab 1</Tabs.Tab>
-   *   </Tabs.List>
-   *   <Tabs.Panels>
-   *     <Tabs.Panel id="tab1">Content</Tabs.Panel>
-   *   </Tabs.Panels>
-   * </Tabs.Root>
-   * ```
-   */
-  Root: q,
-  /**
-   * # Tabs.List
-   *
-   * The container for tab buttons that allows users to navigate between panels.
-   * Handles keyboard navigation and manages the active tab state.
-   *
-   * @example
-   * ```tsx
-   * <Tabs.List>
-   *   <Tabs.Tab id="tab1">First Tab</Tabs.Tab>
-   *   <Tabs.Tab id="tab2">Second Tab</Tabs.Tab>
-   * </Tabs.List>
-   * ```
-   */
-  List: R,
-  /**
-   * # Tabs.Tab
-   *
-   * An individual tab button that activates its corresponding panel when selected.
-   * Supports keyboard navigation, disabled states, and custom content.
-   *
-   * @example
-   * ```tsx
-   * <Tabs.Tab id="settings" isDisabled={false}>
-   *   <Icon name="settings" />
-   *   Settings
-   * </Tabs.Tab>
-   * ```
-   */
-  Tab: L,
-  /**
-   * # Tabs.Panels
-   *
-   * The container for all tab panels that displays the content for the active tab.
-   * Manages visibility and accessibility of panel content.
-   *
-   * @example
-   * ```tsx
-   * <Tabs.Panels>
-   *   <Tabs.Panel id="tab1">First panel content</Tabs.Panel>
-   *   <Tabs.Panel id="tab2">Second panel content</Tabs.Panel>
-   * </Tabs.Panels>
-   * ```
-   */
-  Panels: k,
-  /**
-   * # Tabs.Panel
-   *
-   * An individual panel that displays content when its corresponding tab is active.
-   * Automatically manages focus and accessibility attributes.
-   *
-   * @example
-   * ```tsx
-   * <Tabs.Panel id="profile">
-   *   <h3>Profile Settings</h3>
-   *   <p>Manage your profile information here.</p>
-   * </Tabs.Panel>
-   * ```
-   */
-  Panel: M
-};
-export {
-  ut as T,
-  R as a,
-  M as b,
-  k as c,
-  q as d,
-  L as e
-};
-//# sourceMappingURL=tabs-BuYHA8KE.es.js.map