@alfadocs/ui-kit 0.1.10 → 0.2.0

package/dist/_chunks/resizable-mpXXyIsN.js

@@ -0,0 +1,483 @@
+import { jsx as L, jsxs as de } from "react/jsx-runtime";
+import { createContext as pe, useContext as me, forwardRef as ee, useState as Z, useRef as V, useCallback as X, useEffect as ae, useImperativeHandle as ze, useId as be, useMemo as re, Children as ge, useLayoutEffect as ve, isValidElement as Se, cloneElement as se } from "react";
+import { c as te } from "./index-D2ZczOXr.js";
+import { useTranslation as he } from "react-i18next";
+import { u as ye } from "./registry-C9nwlNyL.js";
+const oe = pe(
+  null
+);
+function le() {
+  const e = me(oe);
+  if (!e)
+    throw new Error("useResizable must be used within a PanelGroup");
+  return e;
+}
+const Re = {
+  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, u) => {
+        e.setSizes(u.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`."
+    }
+  }
+}, ce = "ui-kit:resizable:";
+function we(e) {
+  if (!e) return null;
+  try {
+    const u = localStorage.getItem(`${ce}${e}`);
+    if (!u) return null;
+    const f = JSON.parse(u);
+    return f.v !== 1 || !Array.isArray(f.sizes) ? null : f.sizes;
+  } catch {
+    return null;
+  }
+}
+function xe(e, u) {
+  try {
+    localStorage.setItem(
+      `${ce}${e}`,
+      JSON.stringify({ v: 1, sizes: u })
+    );
+  } catch {
+  }
+}
+function ie(e) {
+  const u = e.reduce((f, v) => f + v, 0);
+  return u === 0 ? e.map(() => 100 / e.length) : e.map((f) => f / u * 100);
+}
+function ke(e, u, f, v, C) {
+  const r = [...e], p = u, g = u + 1;
+  if (p >= r.length || g >= r.length) return r;
+  const s = v[p], a = v[g], m = r[p] + r[g], A = C > 0 ? 20 / C * 100 : 2;
+  let l = r[p] + f, d = m - l;
+  if (s.collapsible && l < s.minSize) {
+    if (l < s.minSize - A)
+      return r[p] = s.collapsedSize, r[g] = m - s.collapsedSize, r;
+    l = s.minSize, d = m - l;
+  }
+  if (a.collapsible && d < a.minSize) {
+    if (d < a.minSize - A)
+      return r[g] = a.collapsedSize, r[p] = m - a.collapsedSize, r;
+    d = a.minSize, l = m - d;
+  }
+  const E = s.collapsible ? s.collapsedSize : s.minSize, c = a.collapsible ? a.collapsedSize : a.minSize;
+  return l = Math.max(E, Math.min(s.maxSize, l)), d = m - l, d = Math.max(c, Math.min(a.maxSize, d)), l = m - d, l = Math.max(E, Math.min(s.maxSize, l)), r[p] = Math.max(0, l), r[g] = Math.max(0, m - r[p]), r;
+}
+const Me = 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" }
+  }
+), Pe = te("ds:flex ds:overflow-hidden", {
+  variants: {
+    direction: {
+      horizontal: "ds:flex-row",
+      vertical: "ds:flex-col"
+    }
+  },
+  defaultVariants: { direction: "horizontal" }
+}), Te = 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" }
+  }
+), Ce = ee(
+  ({ direction: e, groupId: u, id: f, onLayout: v, className: C, children: r }, p) => {
+    const g = be(), s = V(null), a = V(/* @__PURE__ */ new Map()), m = V(
+      null
+    ), [A, l] = Z(""), { panelConfigs: d, processedChildren: E } = re(() => {
+      const n = [];
+      let o = 0, D = 0;
+      const q = ($) => {
+        if (!Se($)) return $;
+        if ($.type === ue) {
+          const G = o, t = $.props;
+          return n.push({
+            id: `${g}-panel-${G}`,
+            index: G,
+            defaultSize: t.defaultSize,
+            minSize: t.minSize ?? 10,
+            maxSize: t.maxSize ?? 90,
+            collapsible: t.collapsible ?? !1,
+            collapsedSize: t.collapsedSize ?? 0
+          }), o++, se($, {
+            _panelIndex: G,
+            _panelId: `${g}-panel-${G}`
+          });
+        }
+        if ($.type === fe) {
+          const G = D++;
+          return se($, {
+            _handleIndex: G
+          });
+        }
+        return $;
+      };
+      return {
+        panelConfigs: n,
+        processedChildren: ge.map(r, q)
+      };
+    }, [r, g]), [c, x] = Z(() => {
+      if (d.length === 0) return [];
+      const n = we(u);
+      return n && n.length === d.length ? n : ie(d.map((o) => o.defaultSize));
+    }), h = V(c);
+    ae(() => {
+      h.current = c;
+    }, [c]);
+    const N = X((n) => {
+      h.current = n, a.current.forEach((o, D) => {
+        D < n.length && o.style.setProperty("--panel-self-size", `${n[D]}%`);
+      });
+    }, []), P = X(
+      (n) => {
+        h.current = n, x(n), v == null || v(n), u && (m.current && clearTimeout(m.current), m.current = setTimeout(
+          () => xe(u, n),
+          120
+        ));
+      },
+      [u, v]
+    );
+    ve(() => {
+      a.current.forEach((n, o) => {
+        o < c.length && n.style.setProperty("--panel-self-size", `${c[o]}%`);
+      });
+    }, [c]);
+    const F = X(
+      (n, o) => {
+        a.current.set(n, o);
+        const D = h.current[n];
+        D !== void 0 && o.style.setProperty("--panel-self-size", `${D}%`);
+      },
+      []
+    ), j = X((n) => {
+      a.current.delete(n);
+    }, []), M = X((n) => {
+      l(n);
+    }, []), _ = Pe({ direction: e, className: C }), Q = {
+      direction: e,
+      sizes: c,
+      liveSizesRef: h,
+      panels: d,
+      groupRef: s,
+      updateSizesImperative: N,
+      commitSizes: P,
+      registerPanelElement: F,
+      unregisterPanelElement: j,
+      setAnnounceText: M
+    }, W = (n) => {
+      s.current = n, typeof p == "function" ? p(n) : p && (p.current = n);
+    }, O = re(
+      () => ({
+        getSizes: () => [...h.current],
+        setSizes: (n) => P(ie(n))
+      }),
+      [P]
+    );
+    return ye(Re, O, f), /* @__PURE__ */ L(oe.Provider, { value: Q, children: /* @__PURE__ */ de(
+      "div",
+      {
+        ref: W,
+        className: _,
+        "data-component": "resizable",
+        "data-component-id": f,
+        "data-panel-group": !0,
+        "data-direction": e,
+        children: [
+          E,
+          /* @__PURE__ */ L("span", { className: "ds:sr-only", "aria-live": "polite", "aria-atomic": "true", children: A })
+        ]
+      }
+    ) });
+  }
+);
+Ce.displayName = "PanelGroup";
+const ue = ee(
+  ({
+    _panelIndex: e = 0,
+    _panelId: u,
+    minSize: f = 10,
+    maxSize: v = 90,
+    children: C,
+    className: r
+  }, p) => {
+    const {
+      direction: g,
+      liveSizesRef: s,
+      panels: a,
+      updateSizesImperative: m,
+      commitSizes: A,
+      registerPanelElement: l,
+      unregisterPanelElement: d
+    } = le(), E = V(null);
+    return ae(() => {
+      const c = E.current;
+      if (c)
+        return l(e, c), () => d(e);
+    }, [e, l, d]), ze(
+      p,
+      () => ({
+        resize: (c) => {
+          const x = [...s.current], h = Math.max(f, Math.min(v, c)), N = h - (x[e] ?? 0);
+          if (Math.abs(N) < 1e-3) return;
+          const P = [...x];
+          P[e] = h;
+          const F = x.map((M, _) => _).filter((M) => M !== e), j = F.reduce(
+            (M, _) => M + (x[_] ?? 0),
+            0
+          );
+          F.forEach((M) => {
+            P[M] = j > 0 ? (x[M] ?? 0) - N * ((x[M] ?? 0) / j) : (x[M] ?? 0) - N / F.length;
+          }), m(P), A(P);
+        }
+      }),
+      [
+        e,
+        f,
+        v,
+        a,
+        s,
+        m,
+        A
+      ]
+    ), /* @__PURE__ */ L(
+      "div",
+      {
+        ref: E,
+        id: u,
+        "data-panel": !0,
+        "data-panel-index": e,
+        className: Te({ direction: g, className: r }),
+        children: C
+      }
+    );
+  }
+);
+ue.displayName = "Panel";
+const fe = ee(
+  ({ _handleIndex: e = 0, className: u }, f) => {
+    const { t: v, i18n: C } = he(), {
+      direction: r,
+      sizes: p,
+      liveSizesRef: g,
+      panels: s,
+      groupRef: a,
+      updateSizesImperative: m,
+      commitSizes: A,
+      setAnnounceText: l
+    } = le(), [d, E] = Z(!1), c = V(null), x = V(
+      null
+    ), h = V(null), N = V(null), P = X(
+      (t, i = !1) => {
+        h.current !== null && (cancelAnimationFrame(h.current), h.current = null), x.current && (clearTimeout(x.current), x.current = null);
+        const y = new Intl.NumberFormat(C.language, {
+          style: "percent"
+        }).format(t / 100), S = v("ui.resizable.sizeAnnounce", { percent: y });
+        i ? l(S) : h.current = requestAnimationFrame(() => {
+          h.current = null, x.current = setTimeout(
+            () => l(S),
+            200
+          );
+        });
+      },
+      [v, C.language, l]
+    ), 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"), c.current = {
+        startX: t.clientX,
+        startY: t.clientY,
+        startSizes: [...g.current],
+        groupRect: a.current.getBoundingClientRect()
+      }, E(!0));
+    }, M = (t) => {
+      if (!c.current) return;
+      const { startX: i, startY: y, startSizes: S, groupRect: T } = c.current, H = r === "horizontal", Y = H ? T.width : T.height;
+      if (Y === 0) return;
+      const B = H ? t.clientX - i : t.clientY - y, J = (H && F() ? -B : B) / Y * 100, I = ke(
+        S,
+        e,
+        J,
+        s,
+        Y
+      );
+      if (m(I), N.current) {
+        const k = Math.round(I[e]);
+        N.current.setAttribute("aria-valuenow", String(k)), N.current.setAttribute(
+          "aria-valuetext",
+          new Intl.NumberFormat(C.language, { style: "percent" }).format(
+            k / 100
+          )
+        );
+      }
+      P(I[e]);
+    }, _ = (t) => {
+      if (!c.current) return;
+      t.currentTarget.releasePointerCapture(t.pointerId), t.currentTarget.style.removeProperty("touch-action"), c.current = null, E(!1);
+      const i = g.current;
+      A(i), P(i[e], !0);
+    }, Q = (t) => {
+      if (!c.current) return;
+      t.currentTarget.releasePointerCapture(t.pointerId), t.currentTarget.style.removeProperty("touch-action"), c.current = null, E(!1);
+      const i = g.current;
+      A(i);
+    }, W = (t) => {
+      const i = e, y = e + 1;
+      if (i >= s.length || y >= s.length) return;
+      const S = s[i], T = s[y], H = r === "horizontal", Y = H && F(), B = t.shiftKey ? 10 : 1, R = [...g.current], J = (w = B) => {
+        const z = Math.min(
+          w,
+          S.maxSize - R[i],
+          R[y] - (T.collapsible ? T.collapsedSize : T.minSize)
+        );
+        if (z <= 0) return null;
+        const b = [...R];
+        return b[i] += z, b[y] -= z, b;
+      }, I = (w = B) => {
+        const z = S.collapsible ? S.collapsedSize : S.minSize, b = Math.min(w, R[i] - z);
+        if (b <= 0) return null;
+        const K = [...R];
+        return K[i] -= b, K[y] += b, K;
+      };
+      let k = null;
+      switch (t.key) {
+        case "ArrowRight":
+          if (!H) break;
+          t.preventDefault(), k = Y ? I() : J();
+          break;
+        case "ArrowLeft":
+          if (!H) break;
+          t.preventDefault(), k = Y ? J() : I();
+          break;
+        case "ArrowDown":
+          if (H) break;
+          t.preventDefault(), k = J();
+          break;
+        case "ArrowUp":
+          if (H) break;
+          t.preventDefault(), k = I();
+          break;
+        case "Home": {
+          t.preventDefault();
+          const w = S.collapsible ? S.collapsedSize : S.minSize, z = R[i] - w;
+          if (z > 0) {
+            const b = [...R];
+            b[i] = w, b[y] += z, k = b;
+          }
+          break;
+        }
+        case "End": {
+          t.preventDefault();
+          const w = T.collapsible ? T.collapsedSize : T.minSize, z = Math.min(S.maxSize - R[i], R[y] - w);
+          if (z > 0) {
+            const b = [...R];
+            b[i] += z, b[y] -= z, k = b;
+          }
+          break;
+        }
+        case "Enter": {
+          t.preventDefault();
+          const w = S.collapsible ? S : T.collapsible ? T : null, z = S.collapsible ? i : T.collapsible ? y : -1;
+          if (!w || z < 0) break;
+          const b = z === i ? y : i, K = Math.abs(R[z] - w.collapsedSize) < 0.5, ne = R[i] + R[y], U = [...R];
+          K ? (U[z] = w.minSize, U[b] = ne - w.minSize) : (U[z] = w.collapsedSize, U[b] = ne - w.collapsedSize), k = U;
+          break;
+        }
+      }
+      k && (m(k), A(k), P(k[i], !0));
+    }, O = e, n = e + 1, o = s[O], D = s[n], q = r === "horizontal" ? "horizontal" : "vertical", $ = (t) => new Intl.NumberFormat(C.language, { style: "percent" }).format(
+      t / 100
+    );
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- separator handle is keyboard-actionable via arrow keys to resize the adjacent panels
+      /* @__PURE__ */ L(
+        "div",
+        {
+          ref: (t) => {
+            N.current = t, typeof f == "function" ? f(t) : f && (f.current = t);
+          },
+          role: "separator",
+          tabIndex: 0,
+          "aria-orientation": q,
+          "aria-valuemin": o ? o.collapsible ? o.collapsedSize : o.minSize : 0,
+          "aria-valuemax": (o == null ? void 0 : o.maxSize) ?? 100,
+          "aria-valuenow": Math.round(p[O] ?? 0),
+          "aria-valuetext": $(p[O] ?? 0),
+          "aria-controls": [o == null ? void 0 : o.id, D == null ? void 0 : D.id].filter(Boolean).join(" ") || void 0,
+          "aria-label": v("ui.resizable.resizeLabel"),
+          "data-dragging": d ? "" : void 0,
+          className: Me({ orientation: q, className: u }),
+          onPointerDown: j,
+          onPointerMove: M,
+          onPointerUp: _,
+          onPointerCancel: Q,
+          onKeyDown: W
+        }
+      )
+    );
+  }
+);
+fe.displayName = "Handle";
+export {
+  fe as H,
+  ue as P,
+  oe as R,
+  Ce as a,
+  Re as r,
+  le as u
+};
+//# sourceMappingURL=resizable-mpXXyIsN.js.map