@alfadocs/ui-kit 0.72.2 → 0.75.0

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

@@ -0,0 +1,391 @@
+import { jsx as a, jsxs as _ } from "react/jsx-runtime";
+import { forwardRef as Le, useState as E, useCallback as U, useRef as L, Children as ce, isValidElement as fe, useEffect as Ne, cloneElement as pe } from "react";
+import { c as je } from "./index-D2ZczOXr.js";
+import { useTranslation as ze } from "react-i18next";
+import { I as ge } from "./icon-button-C_kbcd7I.js";
+import { D as h } from "./dropdown-menu-DU-Hrf33.js";
+import { u as Se } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as Be } from "./use-priority-overflow-c9SjxZkZ.js";
+import { E as me } from "./ellipsis-dRo9ouSU.js";
+const be = je(
+  [
+    "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"
+    }
+  }
+), ve = "ds:absolute ds:start-0 ds:top-0 ds:invisible ds:pointer-events-none", Ke = Le(
+  (d, b) => {
+    const {
+      size: g,
+      orientation: u = "horizontal",
+      role: i = "group",
+      mode: n = "momentary",
+      disabled: W = !1,
+      intent: N = "outline",
+      overflow: ye = "none",
+      className: H,
+      children: q,
+      "aria-label": J,
+      "aria-labelledby": Q,
+      // 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: Te,
+      defaultValue: _e,
+      onValueChange: Fe,
+      ...X
+    } = d, { t: he } = ze(), v = ye === "menu" && u !== "vertical", [Y, Z] = E(
+      () => n === "toggle-single" ? d.defaultValue ?? "" : n === "toggle-multi" ? d.defaultValue ?? [] : ""
+    ), w = (() => {
+      if (n === "toggle-single") {
+        const e = d;
+        return e.value !== void 0 ? e.value : Y;
+      }
+      if (n === "toggle-multi") {
+        const e = d;
+        return e.value !== void 0 ? e.value : Y;
+      }
+      return "";
+    })(), k = U(
+      (e) => {
+        var o, r;
+        if (n === "toggle-single") {
+          const t = d;
+          t.value === void 0 && Z(e), (o = t.onValueChange) == null || o.call(t, e);
+        } else if (n === "toggle-multi") {
+          const t = d;
+          t.value === void 0 && Z(e), (r = t.onValueChange) == null || r.call(t, e);
+        }
+      },
+      [n, d]
+    ), m = i === "toolbar" || i === "radiogroup", R = L([]), [y, j] = E(0), ee = U(
+      (e, o) => {
+        R.current[e] = o;
+      },
+      []
+    ), oe = L(null), [F, we] = E(!1);
+    Se(() => {
+      if (typeof window > "u") return;
+      const e = oe.current;
+      if (!e) return;
+      const o = window.getComputedStyle(e).direction;
+      we(o === "rtl");
+    }, []);
+    const G = U(
+      (e) => {
+        var P;
+        if (!m) return;
+        const o = R.current.filter(Boolean).length;
+        if (o === 0) return;
+        const r = u === "vertical" ? "ArrowDown" : F ? "ArrowLeft" : "ArrowRight", t = u === "vertical" ? "ArrowUp" : F ? "ArrowRight" : "ArrowLeft";
+        let s = null;
+        if (e.key === r ? s = (y + 1) % o : e.key === t ? s = (y - 1 + o) % o : e.key === "Home" ? s = 0 : e.key === "End" && (s = o - 1), s === null) return;
+        const V = o;
+        let C = 0, c = s;
+        for (; C < V; ) {
+          const f = R.current[c];
+          if (f && f.getAttribute("aria-disabled") !== "true" && !f.disabled)
+            break;
+          c = e.key === t || e.key === "End" ? (c - 1 + o) % o : (c + 1) % o, C += 1;
+        }
+        if (e.preventDefault(), j(c), (P = R.current[c]) == null || P.focus(), i === "radiogroup" && n === "toggle-single") {
+          const f = ne.current[c];
+          if (f && typeof f == "object" && "props" in f) {
+            const T = f.props.value;
+            T && k(T);
+          }
+        }
+      },
+      [m, u, F, y, i, n, k]
+    ), I = v ? ce.toArray(q).filter(fe) : [], z = (e) => {
+      const o = e.props["aria-label"];
+      return typeof o == "string" ? o : typeof e.props.tooltip == "string" ? e.props.tooltip : null;
+    };
+    L(!1);
+    const ke = I.map((e) => {
+      const o = e.props["data-overflow-pin"] !== void 0, r = z(e) !== null;
+      return o || !r;
+    }), { containerRef: Ce, fullRowRef: Re, triggerProbeRef: Ie, visible: te, overflowing: S } = Be({
+      enabled: v,
+      count: I.length,
+      pinned: ke
+    }), re = L(null), B = v ? I.filter((e, o) => te[o]) : ce.toArray(q);
+    v && (R.current.length = B.length + (S ? 1 : 0));
+    const ne = L([]);
+    ne.current = B;
+    const x = B.length;
+    Ne(() => {
+      var o;
+      if (!m || !v) return;
+      const e = x + (S ? 1 : 0);
+      e > 0 && y >= e && (j(e - 1), document.activeElement === document.body && ((o = re.current) == null || o.focus()));
+    }, [
+      m,
+      v,
+      x,
+      S,
+      y
+    ]);
+    const ie = B.map((e, o) => {
+      if (!fe(e))
+        return e;
+      const r = e, t = r.props.value, { ariaPressed: s, ariaChecked: V } = Pe(
+        n,
+        i,
+        t,
+        w
+      ), C = W === !0, c = r.props.disabled === !0, P = (p) => {
+        var l, D;
+        if (C) {
+          p.preventDefault(), p.stopPropagation();
+          return;
+        }
+        if ((D = (l = r.props).onClick) == null || D.call(l, p), !p.defaultPrevented && t) {
+          if (n === "toggle-single") {
+            if (w === t) return;
+            k(t);
+          } else if (n === "toggle-multi") {
+            const $ = w, Ve = $.includes(t) ? $.filter((De) => De !== t) : [...$, t];
+            k(Ve);
+          }
+        }
+      }, f = (p) => {
+        ee(o, p);
+        const l = r.ref;
+        typeof l == "function" ? l(p) : l != null && typeof l == "object" && (l.current = p);
+      }, T = C && !c ? !0 : void 0, xe = n !== "momentary" || C, Ae = {
+        intent: r.props.intent ?? N,
+        size: r.props.size ?? g,
+        disabled: c,
+        "aria-disabled": T,
+        onClick: xe ? P : r.props.onClick,
+        "aria-pressed": s,
+        "aria-checked": V,
+        // 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 ? o === y ? 0 : -1 : void 0,
+        onFocus: (p) => {
+          var l, D;
+          m && j(o), (D = (l = r.props).onFocus) == null || D.call(l, p);
+        },
+        ref: f
+      };
+      return pe(r, Ae);
+    }), se = (e) => {
+      oe.current = e, typeof b == "function" ? b(e) : b && typeof b == "object" && (b.current = e);
+    };
+    if (!v)
+      return /* @__PURE__ */ a(
+        "div",
+        {
+          ref: se,
+          role: i,
+          "aria-label": J,
+          "aria-labelledby": Q,
+          "aria-orientation": i === "toolbar" ? u : void 0,
+          onKeyDown: G,
+          className: be({ orientation: u, className: H }),
+          "data-component": "icon-button-group",
+          ...X,
+          children: ie
+        }
+      );
+    const ae = he("buttonGroup.more", "More options"), A = W === !0, M = I.map((e, o) => ({ childEl: e, i: o })).filter(({ i: e }) => !te[e]);
+    let K = null;
+    n === "toggle-single" ? K = /* @__PURE__ */ a(
+      h.RadioGroup,
+      {
+        value: w,
+        onValueChange: (e) => {
+          !A && e !== w && k(e);
+        },
+        children: M.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+          h.RadioItem,
+          {
+            value: e.props.value ?? "",
+            disabled: A || e.props.disabled === !0,
+            children: z(e)
+          },
+          e.key ?? o
+        ))
+      }
+    ) : n === "toggle-multi" ? K = M.map(({ childEl: e, i: o }) => {
+      const r = e.props.value, t = w, s = r ? t.includes(r) : !1;
+      return /* @__PURE__ */ a(
+        h.CheckboxItem,
+        {
+          checked: s,
+          disabled: A || e.props.disabled === !0,
+          onCheckedChange: () => {
+            A || !r || k(s ? t.filter((V) => V !== r) : [...t, r]);
+          },
+          children: z(e)
+        },
+        e.key ?? o
+      );
+    }) : K = M.map(({ childEl: e, i: o }) => /* @__PURE__ */ a(
+      h.Item,
+      {
+        startIcon: e.props.icon,
+        disabled: A || e.props.disabled === !0,
+        onSelect: (r) => {
+          var t, s;
+          (s = (t = e.props).onClick) == null || s.call(
+            t,
+            r
+          );
+        },
+        children: z(e)
+      },
+      e.key ?? o
+    ));
+    const le = S ? /* @__PURE__ */ _(h.Root, { children: [
+      /* @__PURE__ */ a(h.Trigger, { asChild: !0, children: /* @__PURE__ */ a(
+        ge,
+        {
+          icon: /* @__PURE__ */ a(me, {}),
+          intent: N,
+          size: g,
+          "aria-label": ae,
+          ref: (e) => {
+            re.current = e, ee(x, e);
+          },
+          tabIndex: m ? y === x ? 0 : -1 : void 0,
+          onFocus: m ? () => j(x) : void 0
+        }
+      ) }),
+      /* @__PURE__ */ a(h.Content, { align: "end", children: K })
+    ] }) : null, de = be({ orientation: u }), O = i !== "radiogroup", ue = /* @__PURE__ */ _(
+      "div",
+      {
+        role: i,
+        "aria-label": J,
+        "aria-labelledby": Q,
+        "aria-orientation": i === "toolbar" ? u : void 0,
+        onKeyDown: O ? G : void 0,
+        className: `${de} ds:max-w-full`,
+        children: [
+          ie,
+          O ? le : null
+        ]
+      }
+    );
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: se,
+        "data-component": "icon-button-group",
+        className: [
+          "ds:relative ds:block ds:w-full ds:min-w-0 ds:overflow-x-clip",
+          H ?? ""
+        ].join(" ").trim(),
+        ...X,
+        children: /* @__PURE__ */ _("div", { ref: Ce, className: "ds:block ds:w-full ds:min-w-0", children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              ref: Re,
+              "aria-hidden": "true",
+              inert: !0,
+              className: `${ve} ${de}`,
+              children: I.map(
+                (e, o) => pe(e, {
+                  key: e.key ?? o,
+                  intent: e.props.intent ?? N,
+                  size: e.props.size ?? g,
+                  tabIndex: -1,
+                  ref: null
+                })
+              )
+            }
+          ),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              ref: Ie,
+              "aria-hidden": "true",
+              inert: !0,
+              className: ve,
+              children: /* @__PURE__ */ a(
+                ge,
+                {
+                  icon: /* @__PURE__ */ a(me, {}),
+                  intent: N,
+                  size: g,
+                  "aria-label": ae,
+                  tabIndex: -1
+                }
+              )
+            }
+          ),
+          O ? ue : (
+            // 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: G,
+                children: [
+                  ue,
+                  le
+                ]
+              }
+            )
+          )
+        ] })
+      }
+    );
+  }
+);
+Ke.displayName = "IconButtonGroup";
+function Pe(d, b, g, u) {
+  if (d === "momentary" || !g) return {};
+  const i = d === "toggle-multi" ? u.includes(g) : u === g;
+  return b === "radiogroup" ? { ariaChecked: i } : { ariaPressed: i };
+}
+export {
+  Ke as I
+};
+//# sourceMappingURL=icon-button-group-C_lqXTAj.js.map

package/dist/_chunks/{icon-picker-Di6uYDG-.js → icon-picker-CM9ubkew.js}

@@ -2,8 +2,8 @@ import { jsxs as N, jsx as r } from "react/jsx-runtime";
 import { forwardRef as H, useState as y, useRef as h, useCallback as v, useMemo as b } from "react";
 import { c as M } from "./index-D2ZczOXr.js";
 import { useTranslation as F } from "react-i18next";
-import { P as k } from "./popover-uJ6BvEU3.js";
-import { B as D } from "./button-DD_0Xdmr.js";
+import { P as k } from "./popover-Cc0a69sw.js";
+import { B as D } from "./button-CPGiR_bH.js";
 import { T as E } from "./text-input-CUvCb6ST.js";
 import { u as G } from "./registry-DvAUVLHh.js";
 import { S as J } from "./search-QbWPlY5f.js";
@@ -269,4 +269,4 @@ export {
   X as I,
   U as i
 };
-//# sourceMappingURL=icon-picker-Di6uYDG-.js.map
+//# sourceMappingURL=icon-picker-CM9ubkew.js.map

package/dist/_chunks/{image-cropper-CdmWFrMC.js → image-cropper-DKe4AORY.js}

@@ -4,7 +4,7 @@ import { c as Y } from "./index-D2ZczOXr.js";
 import { useTranslation as se } from "react-i18next";
 import { c as ne } from "./compose-refs-C0k0tdqF.js";
 import { u as ae } from "./registry-DvAUVLHh.js";
-import { B as ce } from "./button-DD_0Xdmr.js";
+import { B as ce } from "./button-CPGiR_bH.js";
 import { R as de } from "./rotate-ccw-BBQnIVTr.js";
 const le = {
   type: "object",
@@ -364,4 +364,4 @@ export {
   pe as i,
   ue as t
 };
-//# sourceMappingURL=image-cropper-CdmWFrMC.js.map
+//# sourceMappingURL=image-cropper-DKe4AORY.js.map