@alfadocs/ui-kit 1.47.1 → 1.49.0

package/dist/_chunks/icon-button-group-DZKC6KGf.js

@@ -1,428 +0,0 @@
-import { jsx as l, jsxs as _ } from "react/jsx-runtime";
-import { forwardRef as Ke, useState as H, useCallback as F, useRef as P, Children as ye, isValidElement as G, useEffect as he, cloneElement as we } from "react";
-import { c as Te } from "./index-D2ZczOXr.js";
-import { useTranslation as _e } from "react-i18next";
-import { I as ke } from "./icon-button-CehAeZoP.js";
-import { D as k } from "./dropdown-menu-DU-Hrf33.js";
-import { u as Ge } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as Me } from "./use-priority-overflow-c9SjxZkZ.js";
-import { E as Ie } from "./ellipsis-dRo9ouSU.js";
-function Re(s) {
-  s && (s.inert = !0);
-}
-const Ce = Te(
-  [
-    "ds:inline-flex ds:isolate",
-    // Hairline border around the group unifies the children into one
-    // visual unit. Internal child dividers are drawn via the per-child
-    // class list below.
-    "ds:border ds:border-border",
-    "ds:rounded-[var(--radius-md)]",
-    // Ensure the focus ring of a pressed child sits above its siblings.
-    "ds:[&>*]:relative ds:[&>*:focus-visible]:z-10"
-  ].join(" "),
-  {
-    variants: {
-      orientation: {
-        horizontal: [
-          "ds:flex-row",
-          // Flatten internal corners on children so the outer radius owns
-          // the rounded edges.
-          "ds:[&>*:not(:first-child)]:rounded-s-none",
-          "ds:[&>*:not(:last-child)]:rounded-e-none",
-          // Internal divider — logical so it flips in RTL.
-          "ds:[&>*:not(:first-child)]:border-s",
-          "ds:[&>*:not(:first-child)]:border-border",
-          // The children already own an outer border (from IconButton's
-          // own border in secondary/outline variants). Collapse the doubled
-          // border so we don't get a 2px seam.
-          "ds:[&>*]:border-0"
-        ].join(" "),
-        vertical: [
-          "ds:flex-col",
-          // Vertical groups flow block-wise. Reading direction doesn't
-          // invert vertical stacks in any locale this DS targets, so the
-          // physical `rounded-t/b` is intentional.
-          "ds:[&>*:not(:first-child)]:rounded-t-none",
-          "ds:[&>*:not(:last-child)]:rounded-b-none",
-          "ds:[&>*:not(:first-child)]:border-t",
-          "ds:[&>*:not(:first-child)]:border-border",
-          "ds:[&>*]:border-0"
-        ].join(" ")
-      }
-    },
-    defaultVariants: {
-      orientation: "horizontal"
-    }
-  }
-), xe = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", Oe = Ke(
-  (s, y) => {
-    const {
-      size: b,
-      orientation: c = "horizontal",
-      role: i = "group",
-      mode: n = "momentary",
-      disabled: q = !1,
-      intent: S = "outline",
-      overflow: Ae = "none",
-      className: J,
-      children: Q,
-      "aria-label": X,
-      "aria-labelledby": Y,
-      // Controlled-value props are consumed via `props as …` below; strip them
-      // here so they never spread onto the root <div> (React would warn that
-      // `onValueChange` is an unknown DOM event handler).
-      value: Ee,
-      defaultValue: Ue,
-      onValueChange: We,
-      ...Z
-    } = s, { t: De } = _e(), h = Ae === "menu" && c !== "vertical", [ee, te] = H(
-      () => n === "toggle-single" ? s.defaultValue ?? "" : n === "toggle-multi" ? s.defaultValue ?? [] : ""
-    ), g = (() => {
-      if (n === "toggle-single") {
-        const e = s;
-        return e.value !== void 0 ? e.value : ee;
-      }
-      if (n === "toggle-multi") {
-        const e = s;
-        return e.value !== void 0 ? e.value : ee;
-      }
-      return "";
-    })(), I = F(
-      (e) => {
-        var t, r;
-        if (n === "toggle-single") {
-          const o = s;
-          o.value === void 0 && te(e), (t = o.onValueChange) == null || t.call(o, e);
-        } else if (n === "toggle-multi") {
-          const o = s;
-          o.value === void 0 && te(e), (r = o.onValueChange) == null || r.call(o, e);
-        }
-      },
-      [n, s]
-    ), m = i === "toolbar" || i === "radiogroup", x = P([]), [v, A] = H(0), oe = F(
-      (e, t) => {
-        x.current[e] = t;
-      },
-      []
-    ), re = P(null), [M, Ve] = H(!1);
-    Ge(() => {
-      if (typeof window > "u") return;
-      const e = re.current;
-      if (!e) return;
-      const t = window.getComputedStyle(e).direction;
-      Ve(t === "rtl");
-    }, []);
-    const O = F(
-      (e) => {
-        var T;
-        if (!m) return;
-        const t = x.current.filter(Boolean).length;
-        if (t === 0) return;
-        const r = c === "vertical" ? "ArrowDown" : M ? "ArrowLeft" : "ArrowRight", o = c === "vertical" ? "ArrowUp" : M ? "ArrowRight" : "ArrowLeft";
-        let a = null;
-        if (e.key === r ? a = (v + 1) % t : e.key === o ? a = (v - 1 + t) % t : e.key === "Home" ? a = 0 : e.key === "End" && (a = t - 1), a === null) return;
-        const N = t;
-        let C = 0, u = a;
-        for (; C < N; ) {
-          const f = x.current[u];
-          if (f && f.getAttribute("aria-disabled") !== "true" && !f.disabled)
-            break;
-          u = e.key === o || e.key === "End" ? (u - 1 + t) % t : (u + 1) % t, C += 1;
-        }
-        if (e.preventDefault(), A(u), (T = x.current[u]) == null || T.focus(), i === "radiogroup" && n === "toggle-single") {
-          const f = le.current[u];
-          if (f && typeof f == "object" && "props" in f) {
-            const j = f.props.value;
-            j && j !== g && I(j);
-          }
-        }
-      },
-      [
-        m,
-        c,
-        M,
-        v,
-        i,
-        n,
-        I,
-        g
-      ]
-    ), D = h ? ye.toArray(Q).filter(G) : [], B = (e) => {
-      const t = e.props["aria-label"];
-      return typeof t == "string" ? t : typeof e.props.tooltip == "string" ? e.props.tooltip : null;
-    };
-    P(!1);
-    const Le = D.map((e) => {
-      const t = e.props["data-overflow-pin"] !== void 0, r = B(e) !== null;
-      return t || !r;
-    }), { containerRef: Ne, fullRowRef: ne, triggerProbeRef: ie, visible: se, overflowing: V } = Me({
-      enabled: h,
-      count: D.length,
-      pinned: Le
-    }), je = F(
-      (e) => {
-        Re(e), ne(e);
-      },
-      [ne]
-    ), ze = F(
-      (e) => {
-        Re(e), ie(e);
-      },
-      [ie]
-    ), ae = P(null), w = h ? D.filter((e, t) => se[t]) : ye.toArray(Q);
-    h && (x.current.length = w.length + (V ? 1 : 0));
-    const le = P([]);
-    le.current = w;
-    const $ = i === "radiogroup" && n === "toggle-single" ? w.findIndex(
-      (e) => G(e) && e.props.value === g
-    ) : -1;
-    he(() => {
-      $ >= 0 && A($);
-    }, [$]);
-    const R = w.length;
-    he(() => {
-      var t;
-      if (!m || !h) return;
-      const e = R + (V ? 1 : 0);
-      e > 0 && v >= e && (A(e - 1), document.activeElement === document.body && ((t = ae.current) == null || t.focus()));
-    }, [
-      m,
-      h,
-      R,
-      V,
-      v
-    ]);
-    const de = (e) => {
-      if (!G(e)) return !1;
-      const t = e.props;
-      return t.disabled === !0 || t.loading === !0;
-    }, ce = w.findIndex((e) => !de(e)), ue = de(w[v]) ? ce !== -1 ? ce : (
-      /* Every visible child is disabled: the overflow trigger is the
-         only thing left that can hold focus. Without this the group
-         has no tab stop at all and the menu is unreachable. */
-      V ? R : v
-    ) : v, fe = w.map((e, t) => {
-      if (!G(e))
-        return e;
-      const r = e, o = r.props.value, { ariaPressed: a, ariaChecked: N } = $e(
-        n,
-        i,
-        o,
-        g
-      ), C = q === !0, u = r.props.disabled === !0, T = (p) => {
-        var d, z;
-        if (C) {
-          p.preventDefault(), p.stopPropagation();
-          return;
-        }
-        if ((z = (d = r.props).onClick) == null || z.call(d, p), !p.defaultPrevented && o) {
-          if (n === "toggle-single") {
-            if (g === o) return;
-            I(o);
-          } else if (n === "toggle-multi") {
-            const W = g, Se = W.includes(o) ? W.filter((Be) => Be !== o) : [...W, o];
-            I(Se);
-          }
-        }
-      }, f = (p) => {
-        oe(t, p);
-        const d = r.ref;
-        typeof d == "function" ? d(p) : d != null && typeof d == "object" && (d.current = p);
-      }, j = C && !u ? !0 : void 0, Fe = n !== "momentary" || C, Pe = {
-        intent: r.props.intent ?? S,
-        size: r.props.size ?? b,
-        disabled: u,
-        "aria-disabled": j,
-        onClick: Fe ? T : r.props.onClick,
-        "aria-pressed": a,
-        "aria-checked": N,
-        // When the group is a radiogroup, children must be `role="radio"`
-        // so screen readers announce them as radio buttons and so
-        // `getByRole('radio')` works in tests. The button element is
-        // re-purposed as a radio; `aria-checked` above carries the state.
-        role: i === "radiogroup" ? "radio" : void 0,
-        tabIndex: m ? t === ue ? 0 : -1 : void 0,
-        onFocus: (p) => {
-          var d, z;
-          m && A(t), (z = (d = r.props).onFocus) == null || z.call(d, p);
-        },
-        ref: f
-      };
-      return we(r, Pe);
-    }), pe = (e) => {
-      re.current = e, typeof y == "function" ? y(e) : y && typeof y == "object" && (y.current = e);
-    };
-    if (!h)
-      return /* @__PURE__ */ l(
-        "div",
-        {
-          ref: pe,
-          role: i,
-          "aria-label": X,
-          "aria-labelledby": Y,
-          "aria-orientation": i === "toolbar" ? c : void 0,
-          onKeyDown: O,
-          className: Ce({ orientation: c, className: J }),
-          "data-component": "icon-button-group",
-          ...Z,
-          children: fe
-        }
-      );
-    const ge = De("buttonGroup.more", "More options"), L = q === !0, E = D.map((e, t) => ({ childEl: e, i: t })).filter(({ i: e }) => !se[e]);
-    let K = null;
-    n === "toggle-single" ? K = /* @__PURE__ */ l(
-      k.RadioGroup,
-      {
-        value: g,
-        onValueChange: (e) => {
-          !L && e !== g && I(e);
-        },
-        children: E.map(({ childEl: e, i: t }) => /* @__PURE__ */ l(
-          k.RadioItem,
-          {
-            value: e.props.value ?? "",
-            disabled: L || e.props.disabled === !0,
-            children: B(e)
-          },
-          e.key ?? t
-        ))
-      }
-    ) : n === "toggle-multi" ? K = E.map(({ childEl: e, i: t }) => {
-      const r = e.props.value, o = g, a = r ? o.includes(r) : !1;
-      return /* @__PURE__ */ l(
-        k.CheckboxItem,
-        {
-          checked: a,
-          disabled: L || e.props.disabled === !0,
-          onCheckedChange: () => {
-            L || !r || I(a ? o.filter((N) => N !== r) : [...o, r]);
-          },
-          children: B(e)
-        },
-        e.key ?? t
-      );
-    }) : K = E.map(({ childEl: e, i: t }) => /* @__PURE__ */ l(
-      k.Item,
-      {
-        startIcon: e.props.icon,
-        disabled: L || e.props.disabled === !0,
-        onSelect: (r) => {
-          var o, a;
-          (a = (o = e.props).onClick) == null || a.call(
-            o,
-            r
-          );
-        },
-        children: B(e)
-      },
-      e.key ?? t
-    ));
-    const be = V ? /* @__PURE__ */ _(k.Root, { children: [
-      /* @__PURE__ */ l(k.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-        ke,
-        {
-          icon: /* @__PURE__ */ l(Ie, {}),
-          intent: S,
-          size: b,
-          "aria-label": ge,
-          ref: (e) => {
-            ae.current = e, oe(R, e);
-          },
-          tabIndex: m ? ue === R ? 0 : -1 : void 0,
-          onFocus: m ? () => A(R) : void 0
-        }
-      ) }),
-      /* @__PURE__ */ l(k.Content, { align: "end", children: K })
-    ] }) : null, me = Ce({ orientation: c }), U = i !== "radiogroup", ve = /* @__PURE__ */ _(
-      "div",
-      {
-        role: i,
-        "aria-label": X,
-        "aria-labelledby": Y,
-        "aria-orientation": i === "toolbar" ? c : void 0,
-        onKeyDown: U ? O : void 0,
-        className: `${me} ds:max-w-full`,
-        children: [
-          fe,
-          U ? be : null
-        ]
-      }
-    );
-    return /* @__PURE__ */ l(
-      "div",
-      {
-        ref: pe,
-        "data-component": "icon-button-group",
-        className: [
-          "ds:relative ds:block ds:w-full ds:min-w-0 ds:overflow-x-clip",
-          J ?? ""
-        ].join(" ").trim(),
-        ...Z,
-        children: /* @__PURE__ */ _("div", { ref: Ne, className: "ds:block ds:w-full ds:min-w-0", children: [
-          /* @__PURE__ */ l(
-            "div",
-            {
-              ref: je,
-              "aria-hidden": "true",
-              inert: !0,
-              className: `${xe} ${me}`,
-              children: D.map(
-                (e, t) => we(e, {
-                  key: e.key ?? t,
-                  intent: e.props.intent ?? S,
-                  size: e.props.size ?? b,
-                  tabIndex: -1,
-                  ref: null
-                })
-              )
-            }
-          ),
-          /* @__PURE__ */ l(
-            "span",
-            {
-              ref: ze,
-              "aria-hidden": "true",
-              inert: !0,
-              className: xe,
-              children: /* @__PURE__ */ l(
-                ke,
-                {
-                  icon: /* @__PURE__ */ l(Ie, {}),
-                  intent: S,
-                  size: b,
-                  "aria-label": ge,
-                  tabIndex: -1
-                }
-              )
-            }
-          ),
-          U ? ve : (
-            // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- non-focusable wrapper; arrow-key roving bubbles up from the focusable IconButtons in the strip and the overflow trigger
-            /* @__PURE__ */ _(
-              "div",
-              {
-                className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
-                onKeyDown: O,
-                children: [
-                  ve,
-                  be
-                ]
-              }
-            )
-          )
-        ] })
-      }
-    );
-  }
-);
-Oe.displayName = "IconButtonGroup";
-function $e(s, y, b, c) {
-  if (s === "momentary" || !b) return {};
-  const i = s === "toggle-multi" ? c.includes(b) : c === b;
-  return y === "radiogroup" ? { ariaChecked: i } : { ariaPressed: i };
-}
-export {
-  Oe as I
-};
-//# sourceMappingURL=icon-button-group-DZKC6KGf.js.map