@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/resizable.agent-CMwZzvsi.js

@@ -0,0 +1,456 @@
+import { jsx as L, jsxs as ue } from "react/jsx-runtime";
+import { createContext as fe, useContext as de, forwardRef as ee, useState as Z, useRef as H, useCallback as X, useEffect as se, useImperativeHandle as pe, useId as me, useMemo as ze, Children as be, useLayoutEffect as ge, isValidElement as ve, cloneElement as re } from "react";
+import { c as te } from "./index-D2ZczOXr.js";
+import { useTranslation as Se } from "react-i18next";
+const ie = fe(null);
+function ae() {
+  const e = de(ie);
+  if (!e)
+    throw new Error("useResizable must be used within a PanelGroup");
+  return e;
+}
+const oe = "ui-kit:resizable:";
+function he(e) {
+  if (!e) return null;
+  try {
+    const c = localStorage.getItem(`${oe}${e}`);
+    if (!c) return null;
+    const u = JSON.parse(c);
+    return u.v !== 1 || !Array.isArray(u.sizes) ? null : u.sizes;
+  } catch {
+    return null;
+  }
+}
+function ye(e, c) {
+  try {
+    localStorage.setItem(
+      `${oe}${e}`,
+      JSON.stringify({ v: 1, sizes: c })
+    );
+  } catch {
+  }
+}
+function we(e) {
+  const c = e.reduce((u, v) => u + v, 0);
+  return c === 0 ? e.map(() => 100 / e.length) : e.map((u) => u / c * 100);
+}
+function xe(e, c, u, v, C) {
+  const r = [...e], d = c, g = c + 1;
+  if (d >= r.length || g >= r.length) return r;
+  const s = v[d], a = v[g], p = r[d] + r[g], A = C > 0 ? 20 / C * 100 : 2;
+  let o = r[d] + u, f = p - o;
+  if (s.collapsible && o < s.minSize) {
+    if (o < s.minSize - A)
+      return r[d] = s.collapsedSize, r[g] = p - s.collapsedSize, r;
+    o = s.minSize, f = p - o;
+  }
+  if (a.collapsible && f < a.minSize) {
+    if (f < a.minSize - A)
+      return r[g] = a.collapsedSize, r[d] = p - a.collapsedSize, r;
+    f = a.minSize, o = p - f;
+  }
+  const E = s.collapsible ? s.collapsedSize : s.minSize, l = a.collapsible ? a.collapsedSize : a.minSize;
+  return o = Math.max(E, Math.min(s.maxSize, o)), f = p - o, f = Math.max(l, Math.min(a.maxSize, f)), o = p - f, o = Math.max(E, Math.min(s.maxSize, o)), r[d] = Math.max(0, o), r[g] = Math.max(0, p - r[d]), r;
+}
+const Re = te(
+  [
+    "ds:relative ds:flex ds:items-center ds:justify-center ds:shrink-0 ds:select-none",
+    "ds:bg-[var(--border)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:hover:bg-[var(--accent)] ds:data-[dragging]:bg-[var(--accent)]",
+    "ds:before:absolute ds:before:content-['']"
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: [
+          "ds:[inline-size:var(--resizable-handle-size)] ds:cursor-col-resize ds:[block-size:100%]",
+          "ds:before:[block-size:100%]",
+          "ds:before:[inline-size:var(--min-target-size)]",
+          "ds:before:[inset-block:0]",
+          "ds:before:[inset-inline:calc(0px_-_(var(--min-target-size)_-_var(--resizable-handle-size))_/_2)]"
+        ],
+        vertical: [
+          "ds:[block-size:var(--resizable-handle-size)] ds:cursor-row-resize ds:[inline-size:100%]",
+          "ds:before:[inline-size:100%]",
+          "ds:before:[block-size:var(--min-target-size)]",
+          "ds:before:[inset-inline:0]",
+          "ds:before:[inset-block:calc(0px_-_(var(--min-target-size)_-_var(--resizable-handle-size))_/_2)]"
+        ]
+      }
+    },
+    defaultVariants: { orientation: "horizontal" }
+  }
+), ke = te("ds:flex ds:overflow-hidden", {
+  variants: {
+    direction: {
+      horizontal: "ds:flex-row",
+      vertical: "ds:flex-col"
+    }
+  },
+  defaultVariants: { direction: "horizontal" }
+}), Me = te("ds:[flex:0_0_var(--panel-self-size,50%)] ds:overflow-auto", {
+  variants: {
+    direction: {
+      horizontal: "ds:[min-inline-size:0]",
+      vertical: "ds:[min-block-size:0]"
+    }
+  },
+  defaultVariants: { direction: "horizontal" }
+}), Pe = ee(
+  ({ direction: e, groupId: c, id: u, onLayout: v, className: C, children: r }, d) => {
+    const g = me(), s = H(null), a = H(/* @__PURE__ */ new Map()), p = H(null), [A, o] = Z(""), { panelConfigs: f, processedChildren: E } = ze(() => {
+      const n = [];
+      let k = 0, m = 0;
+      const B = (D) => {
+        if (!ve(D)) return D;
+        if (D.type === le) {
+          const _ = k, Y = D.props;
+          return n.push({
+            id: `${g}-panel-${_}`,
+            index: _,
+            defaultSize: Y.defaultSize,
+            minSize: Y.minSize ?? 10,
+            maxSize: Y.maxSize ?? 90,
+            collapsible: Y.collapsible ?? !1,
+            collapsedSize: Y.collapsedSize ?? 0
+          }), k++, re(D, {
+            _panelIndex: _,
+            _panelId: `${g}-panel-${_}`
+          });
+        }
+        if (D.type === ce) {
+          const _ = m++;
+          return re(
+            D,
+            { _handleIndex: _ }
+          );
+        }
+        return D;
+      };
+      return {
+        panelConfigs: n,
+        processedChildren: be.map(r, B)
+      };
+    }, [r, g]), [l, x] = Z(() => {
+      if (f.length === 0) return [];
+      const n = he(c);
+      return n && n.length === f.length ? n : we(f.map((k) => k.defaultSize));
+    }), R = H(l);
+    se(() => {
+      R.current = l;
+    }, [l]);
+    const N = X((n) => {
+      R.current = n, a.current.forEach((k, m) => {
+        m < n.length && k.style.setProperty("--panel-self-size", `${n[m]}%`);
+      });
+    }, []), $ = X(
+      (n) => {
+        R.current = n, x(n), v == null || v(n), c && (p.current && clearTimeout(p.current), p.current = setTimeout(
+          () => ye(c, n),
+          120
+        ));
+      },
+      [c, v]
+    );
+    ge(() => {
+      a.current.forEach((n, k) => {
+        k < l.length && n.style.setProperty("--panel-self-size", `${l[k]}%`);
+      });
+    }, [l]);
+    const F = X(
+      (n, k) => {
+        a.current.set(n, k);
+        const m = R.current[n];
+        m !== void 0 && k.style.setProperty("--panel-self-size", `${m}%`);
+      },
+      []
+    ), j = X((n) => {
+      a.current.delete(n);
+    }, []), P = X((n) => {
+      o(n);
+    }, []), G = ke({ direction: e, className: C }), Q = {
+      direction: e,
+      sizes: l,
+      liveSizesRef: R,
+      panels: f,
+      groupRef: s,
+      updateSizesImperative: N,
+      commitSizes: $,
+      registerPanelElement: F,
+      unregisterPanelElement: j,
+      setAnnounceText: P
+    }, W = (n) => {
+      s.current = n, typeof d == "function" ? d(n) : d && (d.current = n);
+    };
+    return /* @__PURE__ */ L(ie.Provider, { value: Q, children: /* @__PURE__ */ ue(
+      "div",
+      {
+        ref: W,
+        className: G,
+        "data-component": "resizable",
+        "data-component-id": u,
+        "data-panel-group": !0,
+        "data-direction": e,
+        children: [
+          E,
+          /* @__PURE__ */ L("span", { className: "ds:sr-only", "aria-live": "polite", "aria-atomic": "true", children: A })
+        ]
+      }
+    ) });
+  }
+);
+Pe.displayName = "PanelGroup";
+const le = ee(
+  ({
+    _panelIndex: e = 0,
+    _panelId: c,
+    minSize: u = 10,
+    maxSize: v = 90,
+    children: C,
+    className: r
+  }, d) => {
+    const {
+      direction: g,
+      liveSizesRef: s,
+      panels: a,
+      updateSizesImperative: p,
+      commitSizes: A,
+      registerPanelElement: o,
+      unregisterPanelElement: f
+    } = ae(), E = H(null);
+    return se(() => {
+      const l = E.current;
+      if (l)
+        return o(e, l), () => f(e);
+    }, [e, o, f]), pe(
+      d,
+      () => ({
+        resize: (l) => {
+          const x = [...s.current], R = Math.max(u, Math.min(v, l)), N = R - (x[e] ?? 0);
+          if (Math.abs(N) < 1e-3) return;
+          const $ = [...x];
+          $[e] = R;
+          const F = x.map((P, G) => G).filter((P) => P !== e), j = F.reduce(
+            (P, G) => P + (x[G] ?? 0),
+            0
+          );
+          F.forEach((P) => {
+            $[P] = j > 0 ? (x[P] ?? 0) - N * ((x[P] ?? 0) / j) : (x[P] ?? 0) - N / F.length;
+          }), p($), A($);
+        }
+      }),
+      [e, u, v, a, s, p, A]
+    ), /* @__PURE__ */ L(
+      "div",
+      {
+        ref: E,
+        id: c,
+        "data-panel": !0,
+        "data-panel-index": e,
+        className: Me({ direction: g, className: r }),
+        children: C
+      }
+    );
+  }
+);
+le.displayName = "Panel";
+const ce = ee(
+  ({ _handleIndex: e = 0, className: c }, u) => {
+    const { t: v, i18n: C } = Se(), {
+      direction: r,
+      sizes: d,
+      liveSizesRef: g,
+      panels: s,
+      groupRef: a,
+      updateSizesImperative: p,
+      commitSizes: A,
+      setAnnounceText: o
+    } = ae(), [f, E] = Z(!1), l = H(null), x = H(null), R = H(null), N = H(null), $ = X(
+      (t, i = !1) => {
+        R.current !== null && (cancelAnimationFrame(R.current), R.current = null), x.current && (clearTimeout(x.current), x.current = null);
+        const h = new Intl.NumberFormat(C.language, {
+          style: "percent"
+        }).format(t / 100), S = v("ui.resizable.sizeAnnounce", { percent: h });
+        i ? o(S) : R.current = requestAnimationFrame(() => {
+          R.current = null, x.current = setTimeout(() => o(S), 200);
+        });
+      },
+      [v, C.language, o]
+    ), F = X(() => a.current ? getComputedStyle(a.current).direction === "rtl" : !1, [a]), j = (t) => {
+      a.current && (t.currentTarget.setPointerCapture(t.pointerId), t.currentTarget.style.setProperty("touch-action", "none"), l.current = {
+        startX: t.clientX,
+        startY: t.clientY,
+        startSizes: [...g.current],
+        groupRect: a.current.getBoundingClientRect()
+      }, E(!0));
+    }, P = (t) => {
+      if (!l.current) return;
+      const { startX: i, startY: h, startSizes: S, groupRect: T } = l.current, V = r === "horizontal", O = V ? T.width : T.height;
+      if (O === 0) return;
+      const J = V ? t.clientX - i : t.clientY - h, K = (V && F() ? -J : J) / O * 100, I = xe(
+        S,
+        e,
+        K,
+        s,
+        O
+      );
+      if (p(I), N.current) {
+        const M = Math.round(I[e]);
+        N.current.setAttribute("aria-valuenow", String(M)), N.current.setAttribute(
+          "aria-valuetext",
+          new Intl.NumberFormat(C.language, { style: "percent" }).format(
+            M / 100
+          )
+        );
+      }
+      $(I[e]);
+    }, G = (t) => {
+      if (!l.current) return;
+      t.currentTarget.releasePointerCapture(t.pointerId), t.currentTarget.style.removeProperty("touch-action"), l.current = null, E(!1);
+      const i = g.current;
+      A(i), $(i[e], !0);
+    }, Q = (t) => {
+      if (!l.current) return;
+      t.currentTarget.releasePointerCapture(t.pointerId), t.currentTarget.style.removeProperty("touch-action"), l.current = null, E(!1);
+      const i = g.current;
+      A(i);
+    }, W = (t) => {
+      const i = e, h = e + 1;
+      if (i >= s.length || h >= s.length) return;
+      const S = s[i], T = s[h], V = r === "horizontal", O = V && F(), J = t.shiftKey ? 10 : 1, y = [...g.current], K = (w = J) => {
+        const z = Math.min(
+          w,
+          S.maxSize - y[i],
+          y[h] - (T.collapsible ? T.collapsedSize : T.minSize)
+        );
+        if (z <= 0) return null;
+        const b = [...y];
+        return b[i] += z, b[h] -= z, b;
+      }, I = (w = J) => {
+        const z = S.collapsible ? S.collapsedSize : S.minSize, b = Math.min(w, y[i] - z);
+        if (b <= 0) return null;
+        const U = [...y];
+        return U[i] -= b, U[h] += b, U;
+      };
+      let M = null;
+      switch (t.key) {
+        case "ArrowRight":
+          if (!V) break;
+          t.preventDefault(), M = O ? I() : K();
+          break;
+        case "ArrowLeft":
+          if (!V) break;
+          t.preventDefault(), M = O ? K() : I();
+          break;
+        case "ArrowDown":
+          if (V) break;
+          t.preventDefault(), M = K();
+          break;
+        case "ArrowUp":
+          if (V) break;
+          t.preventDefault(), M = I();
+          break;
+        case "Home": {
+          t.preventDefault();
+          const w = S.collapsible ? S.collapsedSize : S.minSize, z = y[i] - w;
+          if (z > 0) {
+            const b = [...y];
+            b[i] = w, b[h] += z, M = b;
+          }
+          break;
+        }
+        case "End": {
+          t.preventDefault();
+          const w = T.collapsible ? T.collapsedSize : T.minSize, z = Math.min(
+            S.maxSize - y[i],
+            y[h] - w
+          );
+          if (z > 0) {
+            const b = [...y];
+            b[i] += z, b[h] -= z, M = b;
+          }
+          break;
+        }
+        case "Enter": {
+          t.preventDefault();
+          const w = S.collapsible ? S : T.collapsible ? T : null, z = S.collapsible ? i : T.collapsible ? h : -1;
+          if (!w || z < 0) break;
+          const b = z === i ? h : i, U = Math.abs(y[z] - w.collapsedSize) < 0.5, ne = y[i] + y[h], q = [...y];
+          U ? (q[z] = w.minSize, q[b] = ne - w.minSize) : (q[z] = w.collapsedSize, q[b] = ne - w.collapsedSize), M = q;
+          break;
+        }
+      }
+      M && (p(M), A(M), $(M[i], !0));
+    }, n = e, k = e + 1, m = s[n], B = s[k], D = r === "horizontal" ? "horizontal" : "vertical", _ = (t) => new Intl.NumberFormat(C.language, { style: "percent" }).format(t / 100);
+    return /* @__PURE__ */ L(
+      "div",
+      {
+        ref: (t) => {
+          N.current = t, typeof u == "function" ? u(t) : u && (u.current = t);
+        },
+        role: "separator",
+        tabIndex: 0,
+        "aria-orientation": D,
+        "aria-valuemin": m ? m.collapsible ? m.collapsedSize : m.minSize : 0,
+        "aria-valuemax": (m == null ? void 0 : m.maxSize) ?? 100,
+        "aria-valuenow": Math.round(d[n] ?? 0),
+        "aria-valuetext": _(d[n] ?? 0),
+        "aria-controls": [m == null ? void 0 : m.id, B == null ? void 0 : B.id].filter(Boolean).join(" ") || void 0,
+        "aria-label": v("ui.resizable.resizeLabel"),
+        "data-dragging": f ? "" : void 0,
+        className: Re({ orientation: D, className: c }),
+        onPointerDown: j,
+        onPointerMove: P,
+        onPointerUp: G,
+        onPointerCancel: Q,
+        onKeyDown: W
+      }
+    );
+  }
+);
+ce.displayName = "Handle";
+const De = {
+  id: "resizable",
+  capabilities: ["range_navigate"],
+  state: {
+    sizes: {
+      type: "number[]",
+      description: "Current per-panel sizes as percentages of the group.",
+      read: (e) => e.getSizes()
+    }
+  },
+  actions: {
+    set_sizes: {
+      safety: "read",
+      argsType: "{ sizes: number[] }",
+      description: "Replace the panel sizes (percentages, summing to 100).",
+      invoke: (e, c) => {
+        e.setSizes(c.sizes);
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "resizable" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop on PanelGroup."
+    },
+    item: {
+      attr: "data-panel-id",
+      description: "Each Panel forwards its `id` to react-resizable-panels which emits it as `data-panel-id`."
+    }
+  }
+};
+export {
+  ce as H,
+  le as P,
+  ie as R,
+  Pe as a,
+  De as r,
+  ae as u
+};
+//# sourceMappingURL=resizable.agent-CMwZzvsi.js.map