prometeo-design-system 4.2.5 → 4.3.1

package/dist/Scrollable.es.js

@@ -1,11 +1,11 @@
-import { j as m } from "./jsx-runtime-GkKLlHH4.js";
-import { u as St } from "./useDevice-vwn4GLwK.js";
-import { g as ct, r as H } from "./useLabelBackground-D5SzHhl_.js";
-import { c as E } from "./cn-B6yFEsav.js";
-import { c as U } from "./index-BOQuZ0gG.js";
-import at, { useRef as a, useCallback as P, useImperativeHandle as Mt, useLayoutEffect as Et, useEffect as Nt } from "react";
-import { CrevronLeft as kt } from "./Icons/CrevronLeft.es.js";
-const it = U(
+import { j as h } from "./jsx-runtime-GkKLlHH4.js";
+import { u as st } from "./useDevice-vwn4GLwK.js";
+import { g as nt } from "./useLabelBackground-BDIHUdND.js";
+import { c as m } from "./cn-B6yFEsav.js";
+import { c as j } from "./index-BOQuZ0gG.js";
+import F, { useRef as a, useLayoutEffect as lt, useEffect as ct } from "react";
+import { CrevronLeft as at } from "./Icons/CrevronLeft.es.js";
+const P = j(
   "",
   {
     variants: {
@@ -16,7 +16,7 @@ const it = U(
       }
     }
   }
-), ut = U("", {
+), J = j("", {
   variants: {
     position: {
       top: "",
@@ -26,7 +26,7 @@ const it = U(
     },
     type: {
       icon: " absolute z-100 rounded-full hover:scale-125 transition-all duration-300 ease-in-out shadow-xs rounded-full shadow-white/10 text-neutral-default-pressed",
-      shadow: "absolute z-100 transition-all duration-300 ease-in-out"
+      shadow: "absolute z-100 transition-all duration-400 ease-in-out"
     }
   },
   compoundVariants: [
@@ -39,7 +39,7 @@ const it = U(
     { type: "shadow", position: "left", className: "left-0 top-0 h-full w-5" },
     { type: "shadow", position: "right", className: "right-0 top-0 h-full w-5 rotate-180" }
   ]
-}), Ct = U("", {
+}), it = j("", {
   variants: {
     hide: {
       true: " prometeo-scrollbar-none",
@@ -50,116 +50,51 @@ const it = U(
       medium: ""
     }
   }
-}), Ot = (V) => {
-  const { defaultBehavior: I = "scroll-on-click" } = V, ft = St(), dt = {
-    top: { show: !0, type: "shadow", behavior: I },
-    bottom: { show: !0, type: "shadow", behavior: I },
-    left: { show: !0, type: "icon", behavior: I },
-    right: { show: !0, type: "icon", behavior: I }
-  }, ht = {
+}), bt = (R) => {
+  const { defaultBehavior: w = "scroll-on-click" } = R, K = st(), G = {
+    top: { show: !0, type: "shadow", behavior: w },
+    bottom: { show: !0, type: "shadow", behavior: w },
+    left: { show: !0, type: "icon", behavior: w },
+    right: { show: !0, type: "icon", behavior: w }
+  }, Q = {
     hide: !1,
     size: "medium"
   }, {
-    debugMode: pt = !1,
-    className: _,
-    axis: u = "both",
-    children: gt,
-    indicators: N = dt,
-    scrollbarProps: F = ht,
-    disableMouseScroll: J = !1,
-    persistScroll: D = !1,
-    controls: bt
-  } = V, n = a({}), l = a(null), v = a(null), k = a(null), p = a(null), g = a(5), b = a({}), z = a(null), y = a(!1), X = a(!1), j = a(null), C = a(null), A = a([]), Y = a({ scrollTop: 0, scrollLeft: 0 }), mt = (e) => {
+    debugMode: X = !1,
+    className: k,
+    axis: z = "both",
+    children: Y,
+    indicators: v = G,
+    scrollbarProps: A = Q,
+    disableMouseScroll: D = !1,
+    persistScroll: L = !1
+  } = R, s = a({}), l = a(null), d = a(null), b = a(null), i = a(null), u = a(5), f = a({}), x = a(null), p = a(!1), O = a(!1), T = a(null), g = a(null), Z = (e) => {
     if (!l.current) return 0;
-    const { scrollTop: t, scrollLeft: r, scrollHeight: o, clientHeight: s, scrollWidth: c, clientWidth: f } = l.current;
+    const { scrollTop: t, scrollLeft: r, scrollHeight: o, clientHeight: n, scrollWidth: c, clientWidth: y } = l.current;
     switch (e) {
       case "top":
         return Math.max(0, t);
       case "bottom":
-        return Math.max(0, o - (t + s));
+        return Math.max(0, o - (t + n));
       case "left":
         return Math.max(0, r);
       case "right":
-        return Math.max(0, c - (r + f));
+        return Math.max(0, c - (r + y));
       default:
         return 0;
     }
-  }, K = P(() => {
-    if (!l.current) return { x: 0, y: 0 };
-    const { scrollTop: e, scrollLeft: t, scrollHeight: r, scrollWidth: o, clientHeight: s, clientWidth: c } = l.current, f = Math.max(0, r - s), d = Math.max(0, o - c), w = f > 0 ? e / f * 100 : 0;
-    return { x: d > 0 ? t / d * 100 : 0, y: w };
-  }, []), G = P((e) => {
-    const t = Y.current;
-    let r = null;
-    return e.scrollTop > t.scrollTop ? r = "down" : e.scrollTop < t.scrollTop ? r = "up" : e.scrollLeft > t.scrollLeft ? r = "right" : e.scrollLeft < t.scrollLeft && (r = "left"), Y.current = e, r;
-  }, []), vt = P((e) => {
+  }, E = (e, t = 100, r = !0) => {
     if (!l.current) return;
-    const { scrollTop: t, scrollLeft: r, scrollHeight: o, scrollWidth: s, clientHeight: c, clientWidth: f } = l.current, d = G(e), { x: w, y: L } = K(), T = {
-      percentage: L,
-      direction: d,
-      scrollTop: t,
-      scrollLeft: r,
-      scrollHeight: o,
-      scrollWidth: s,
-      clientHeight: c,
-      clientWidth: f
-    }, B = {
-      percentage: w,
-      direction: d,
-      scrollTop: t,
-      scrollLeft: r,
-      scrollHeight: o,
-      scrollWidth: s,
-      clientHeight: c,
-      clientWidth: f
-    };
-    A.current.forEach((i) => {
-      const { config: h, triggered: R } = i;
-      if (!h) {
-        (u === "y" || u === "both") && i.callback(T), (u === "x" || u === "both") && i.callback(B);
-        return;
-      }
-      const q = (h.direction === "y" || h.direction === "both") && (u === "y" || u === "both"), nt = (h.direction === "x" || h.direction === "both") && (u === "x" || u === "both");
-      if (!q && !nt) return;
-      const x = (q ? T : B).percentage, S = h.target * 100;
-      let M = !1;
-      if (h.trip === "forth")
-        M = !R && x >= S, M && (i.triggered = !0), R && x < S && (i.triggered = !1);
-      else if (h.trip === "back")
-        M = R && x < S, M && (i.triggered = !1), !R && x >= S && (i.triggered = !0);
-      else if (h.trip === "round-trip") {
-        const xt = x >= S;
-        M = i.triggered !== xt;
-      }
-      M && (h.trip === "round-trip" && (i.triggered = x >= S, i.lastDirection = d || void 0), q && i.callback(T), nt && i.callback(B));
-    });
-  }, [u, G, K]), Q = P((e, t) => {
-    const r = {
-      callback: e,
-      config: t,
-      triggered: !1,
-      lastDirection: void 0
-    };
-    return A.current.push(r), () => {
-      const o = A.current.indexOf(r);
-      o > -1 && A.current.splice(o, 1);
-    };
-  }, []);
-  Mt(bt, () => ({
-    subscribeToScrollTarget: Q
-  }), [Q]);
-  const W = (e, t = 100, r = !0) => {
-    if (!l.current) return;
-    const o = mt(e), s = Math.min(Math.abs(t), o);
-    if (s === 0) return;
-    const c = e === "top" || e === "left" ? -s : s, f = {
+    const o = Z(e), n = Math.min(Math.abs(t), o);
+    if (n === 0) return;
+    const c = e === "top" || e === "left" ? -n : n, y = {
       top: { top: c, left: 0 },
       bottom: { top: c, left: 0 },
       left: { top: 0, left: c },
       right: { top: 0, left: c }
     };
-    l.current.scrollBy({ ...f[e], behavior: r ? "smooth" : "auto" });
-  }, yt = (e) => {
+    l.current.scrollBy({ ...y[e], behavior: r ? "smooth" : "auto" });
+  }, tt = (e) => {
     if (!l.current) return;
     const t = l.current, r = {
       top: { top: 0, left: t.scrollLeft },
@@ -168,193 +103,184 @@ const it = U(
       right: { top: t.scrollTop, left: t.scrollWidth }
     };
     t.scrollTo({ ...r[e], behavior: "smooth" });
-  }, wt = (e, t) => {
-    const r = n.current[e];
+  }, et = (e, t) => {
+    const r = s.current[e];
     if (r) {
       if (r.style.cursor = "pointer", t === "icon") {
         const o = r.querySelector("svg");
         o && (o.style.transition = "all 0.3s ease-in-out", o.style.transform = "scale(1.3)", o.style.backgroundColor = "rgba(255, 255, 255, 0.2)", o.style.borderRadius = "100%");
       } else if (t === "shadow") {
-        const o = r.querySelector("span"), s = ct(l.current);
-        o && (e === "top" || e === "bottom" ? (o.style.height = "110px", o.style.background = `linear-gradient(to bottom, ${s} 5%, ${H(s, -2)} 10%, ${H(s, -5, 30)} 70%, transparent)`) : o.style.width = "40px");
+        const o = r.querySelector("span");
+        o && (e === "top" || e === "bottom" ? o.style.height = "90px" : o.style.width = "40px");
       }
     }
-  }, O = (e) => {
-    const t = n.current[e];
+  }, M = (e) => {
+    const t = s.current[e];
     if (!t) return;
     t.style.cursor = "";
     const r = t.querySelector("svg");
     r && (r.style.transform = "", r.style.backgroundColor = "", r.style.borderRadius = "");
     const o = t.querySelector("span");
     o && (o.style.height = "", o.style.width = "");
-  }, Z = (e, t) => {
-    if (t === "scroll-on-click" && y.current) {
-      y.current = !1;
+  }, B = (e, t) => {
+    if (t === "scroll-on-click" && p.current) {
+      p.current = !1;
       return;
     }
-    if (b.current[e]) {
-      p.current && (clearTimeout(p.current), p.current = null), v.current && (clearInterval(v.current), v.current = null), O(e), b.current[e] = !1, yt(e);
+    if (f.current[e]) {
+      i.current && (clearTimeout(i.current), i.current = null), d.current && (clearInterval(d.current), d.current = null), M(e), f.current[e] = !1, tt(e);
       return;
     }
     if (t === "scroll-on-click") {
       if (!l.current) return;
-      const { clientHeight: r, clientWidth: o } = l.current, s = e === "top" || e === "bottom" ? r * 0.8 : o * 0.8;
-      W(e, s);
+      const { clientHeight: r, clientWidth: o } = l.current, n = e === "top" || e === "bottom" ? r * 0.8 : o * 0.8;
+      E(e, n);
     }
-  }, tt = (e, t) => {
-    p.current && (clearTimeout(p.current), p.current = null), y.current = !0, g.current = 3;
+  }, W = (e, t) => {
+    i.current && (clearTimeout(i.current), i.current = null), p.current = !0, u.current = 3;
     let r = 0;
-    z.current = e, b.current[e] = !1, W(e, g.current, !1), v.current = setInterval(() => {
+    x.current = e, f.current[e] = !1, E(e, u.current, !1), d.current = setInterval(() => {
       r += 16;
       const o = r / 1e3;
-      if (o >= 2 && !b.current[e] && (b.current[e] = !0, wt(e, t)), o <= 2)
-        g.current = 5 + o * 0.4;
+      if (o >= 2 && !f.current[e] && (f.current[e] = !0, et(e, t)), o <= 2)
+        u.current = 5 + o * 0.4;
       else {
-        const s = o - 2;
-        g.current += Math.pow(s, 1.1) * 2;
+        const n = o - 2;
+        u.current += Math.pow(n, 1.1) * 2;
       }
-      g.current = Math.min(g.current, 100), W(e, g.current, !1);
+      u.current = Math.min(u.current, 100), E(e, u.current, !1);
     }, 16);
-  }, et = (e) => {
-    k.current && (clearTimeout(k.current), k.current = null), v.current && (clearInterval(v.current), v.current = null), g.current = 5;
-    const t = e || z.current;
-    t ? b.current[t] ? (p.current && clearTimeout(p.current), p.current = setTimeout(() => {
-      O(t), b.current[t] = !1, y.current = !1;
-    }, 1e3)) : (O(t), b.current[t] = !1, y.current = !1) : y.current = !1, z.current = null;
-  }, rt = (e, t, r) => {
-    ft || t === "scroll-on-hover" && (k.current = setTimeout(() => {
-      tt(e, r);
+  }, q = (e) => {
+    b.current && (clearTimeout(b.current), b.current = null), d.current && (clearInterval(d.current), d.current = null), u.current = 5;
+    const t = e || x.current;
+    t ? f.current[t] ? (i.current && clearTimeout(i.current), i.current = setTimeout(() => {
+      M(t), f.current[t] = !1, p.current = !1;
+    }, 1e3)) : (M(t), f.current[t] = !1, p.current = !1) : p.current = !1, x.current = null;
+  }, H = (e, t, r) => {
+    K || t === "scroll-on-hover" && (b.current = setTimeout(() => {
+      W(e, r);
     }, 200));
-  }, ot = (e, t) => {
-    t === "scroll-on-hover" && et(e);
-  }, st = (e, t, r) => {
-    t === "scroll-on-click" && (y.current = !1, k.current = setTimeout(() => {
-      tt(e, r);
+  }, $ = (e, t) => {
+    t === "scroll-on-hover" && q(e);
+  }, U = (e, t, r) => {
+    t === "scroll-on-click" && (p.current = !1, b.current = setTimeout(() => {
+      W(e, r);
     }, 200));
-  }, lt = (e, t) => {
-    t === "scroll-on-click" && et(e);
-  }, $ = () => {
+  }, V = (e, t) => {
+    t === "scroll-on-click" && q(e);
+  }, _ = () => {
     if (!l.current) return;
-    const e = l.current, { scrollTop: t, scrollLeft: r, scrollHeight: o, scrollWidth: s, clientHeight: c, clientWidth: f } = e, d = t <= 10, w = t + c >= o - 10, L = r <= 10, T = r + f >= s - 10;
-    n.current.top?.classList.toggle("opacity-0", d), n.current.top?.classList.toggle("pointer-events-none", d), n.current.top?.classList.toggle("pointer-events-auto", !d), n.current.bottom?.classList.toggle("opacity-0", w), n.current.bottom?.classList.toggle("pointer-events-none", w), n.current.bottom?.classList.toggle("pointer-events-auto", !w), n.current.left?.classList.toggle("opacity-0", L), n.current.left?.classList.toggle("pointer-events-none", L), n.current.left?.classList.toggle("pointer-events-auto", !L), n.current.right?.classList.toggle("opacity-0", T), n.current.right?.classList.toggle("pointer-events-none", T), n.current.right?.classList.toggle("pointer-events-auto", !T);
+    const e = l.current, { scrollTop: t, scrollLeft: r, scrollHeight: o, scrollWidth: n, clientHeight: c, clientWidth: y } = e, S = t <= 10, N = t + c >= o - 10, I = r <= 10, C = r + y >= n - 10;
+    s.current.top?.classList.toggle("opacity-0", S), s.current.top?.classList.toggle("pointer-events-none", S), s.current.top?.classList.toggle("pointer-events-auto", !S), s.current.bottom?.classList.toggle("opacity-0", N), s.current.bottom?.classList.toggle("pointer-events-none", N), s.current.bottom?.classList.toggle("pointer-events-auto", !N), s.current.left?.classList.toggle("opacity-0", I), s.current.left?.classList.toggle("pointer-events-none", I), s.current.left?.classList.toggle("pointer-events-auto", !I), s.current.right?.classList.toggle("opacity-0", C), s.current.right?.classList.toggle("pointer-events-none", C), s.current.right?.classList.toggle("pointer-events-auto", !C);
   };
-  Et(() => {
+  lt(() => {
     if (!l.current) return;
     const e = l.current;
-    if (D) {
-      j.current = typeof D == "string" ? `scrollable-${D}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
+    if (L) {
+      T.current = typeof L == "string" ? `scrollable-${L}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
       try {
-        const o = sessionStorage.getItem(j.current);
+        const o = sessionStorage.getItem(T.current);
         if (o) {
-          const { scrollTop: s, scrollLeft: c } = JSON.parse(o);
-          e.scrollTop = s, e.scrollLeft = c;
+          const { scrollTop: n, scrollLeft: c } = JSON.parse(o);
+          e.scrollTop = n, e.scrollLeft = c;
         }
       } catch {
       }
     }
-    $(), X.current || (X.current = !0, requestAnimationFrame(() => {
-      Object.values(n.current).forEach((o) => {
-        o?.classList.add("transition-all", "duration-300");
-      }), setTimeout(() => {
-        $();
-      }, 0);
+    _(), O.current || (O.current = !0, requestAnimationFrame(() => {
+      Object.values(s.current).forEach((o) => {
+        o?.classList.add("transition-all", "duration-500");
+      });
     }));
     const t = () => {
-      if ($(), l.current) {
-        const o = {
-          scrollTop: l.current.scrollTop,
-          scrollLeft: l.current.scrollLeft
-        };
-        vt(o);
-      }
-      D && j.current && (C.current && clearTimeout(C.current), C.current = setTimeout(() => {
+      _(), L && T.current && (g.current && clearTimeout(g.current), g.current = setTimeout(() => {
         try {
           const o = {
             scrollTop: e.scrollTop,
             scrollLeft: e.scrollLeft
           };
-          sessionStorage.setItem(j.current, JSON.stringify(o));
+          sessionStorage.setItem(T.current, JSON.stringify(o));
         } catch {
         }
       }, 150));
     };
     e.addEventListener("scroll", t);
     const r = (o) => {
-      J && o.preventDefault();
+      D && o.preventDefault();
     };
     return e.addEventListener("wheel", r, { passive: !1 }), () => {
-      e.removeEventListener("scroll", t), e.removeEventListener("wheel", r), C.current && clearTimeout(C.current);
+      e.removeEventListener("scroll", t), e.removeEventListener("wheel", r), g.current && clearTimeout(g.current);
     };
-  }, [J]), Nt(() => {
+  }, [D]), ct(() => {
     if (!l.current) return;
-    let e = ct(l.current);
-    Object.entries(N).forEach(([t, r]) => {
+    const e = nt(l.current);
+    Object.entries(v).forEach(([t, r]) => {
       if (r?.show && r.type === "shadow") {
-        const s = n.current[t]?.querySelector("span");
-        if (s) {
-          s.dataset.bgColor = e;
+        const n = s.current[t]?.querySelector("span");
+        if (n) {
+          n.dataset.bgColor = e;
           const c = t === "left" || t === "right" ? "to right" : "to bottom";
-          s.style.background = `linear-gradient(${c}, ${e} 5%, ${H(e, -2)} 10%, ${H(e, -5, 30)} 70%, transparent)`;
+          n.style.background = `linear-gradient(${c}, ${e} 40%, transparent)`, n.style.background = `linear-gradient(${c}, ${e} 40%, transparent)`;
         }
       }
     });
-  }, [N]);
-  const Tt = at.Children.toArray(gt), Lt = Object.values(N).some((e) => e?.show && e?.type === "icon");
-  return /* @__PURE__ */ m.jsxs("div", { className: E("relative p-0", _, it({ axis: u }), "scrolleable", Lt ? "overflow-visible" : "overflow-hidden!"), children: [
-    /* @__PURE__ */ m.jsx(
+  }, [v]);
+  const rt = F.Children.toArray(Y), ot = Object.values(v).some((e) => e?.show && e?.type === "icon");
+  return /* @__PURE__ */ h.jsxs("div", { className: m("relative p-0", k, P({ axis: z }), "scrolleable", ot ? "overflow-visible" : "overflow-hidden!"), children: [
+    /* @__PURE__ */ h.jsx(
       "div",
       {
         ref: l,
-        className: E(
-          pt && "border border-red-900 border-dashed",
-          _,
+        className: m(
+          X && "border border-red-900 border-dashed",
+          k,
           "py-2  relative w-full h-full min-h-full",
-          it({ axis: u }),
-          Ct({ hide: F?.hide, size: F?.size }),
+          P({ axis: z }),
+          it({ hide: A?.hide, size: A?.size }),
           ""
         ),
-        children: Tt?.map((e) => at.cloneElement(e, { className: E(e?.props?.className, "shrink-0! pointer-events-auto") }))
+        children: rt?.map((e) => F.cloneElement(e, { className: m(e?.props?.className, "shrink-0! pointer-events-auto") }))
       }
     ),
-    /* @__PURE__ */ m.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(N).map(([e, t]) => {
+    /* @__PURE__ */ h.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(v).map(([e, t]) => {
       if (!t?.show || t.type !== "shadow") return null;
       const r = e;
-      return /* @__PURE__ */ m.jsx(
+      return /* @__PURE__ */ h.jsx(
         "span",
         {
           ref: (o) => {
-            n.current[e] = o;
+            s.current[e] = o;
           },
-          className: E(
+          className: m(
             "cursor-default ease-in-out z-100",
             "opacity-0 pointer-events-none"
           ),
-          onClick: () => Z(r, t.behavior),
-          onMouseEnter: () => rt(r, t.behavior, t.type),
-          onMouseLeave: () => ot(r, t.behavior),
-          onMouseDown: () => st(r, t.behavior, t.type),
-          onMouseUp: () => lt(r, t.behavior),
-          children: /* @__PURE__ */ m.jsx("span", { className: E(ut({ position: r, type: "shadow" }), t.className) })
+          onClick: () => B(r, t.behavior),
+          onMouseEnter: () => H(r, t.behavior, t.type),
+          onMouseLeave: () => $(r, t.behavior),
+          onMouseDown: () => U(r, t.behavior, t.type),
+          onMouseUp: () => V(r, t.behavior),
+          children: /* @__PURE__ */ h.jsx("span", { className: m(J({ position: r, type: "shadow" }), t.className) })
         },
         e
       );
     }) }),
-    /* @__PURE__ */ m.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(N).map(([e, t]) => {
+    /* @__PURE__ */ h.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(v).map(([e, t]) => {
       if (!t?.show || t.type !== "icon") return null;
       const r = e;
-      return /* @__PURE__ */ m.jsx(
+      return /* @__PURE__ */ h.jsx(
         "span",
         {
           ref: (o) => {
-            n.current[e] = o;
+            s.current[e] = o;
           },
           className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
-          onClick: () => Z(r, t.behavior),
-          onMouseEnter: () => rt(r, t.behavior, t.type),
-          onMouseLeave: () => ot(r, t.behavior),
-          onMouseDown: () => st(r, t.behavior, t.type),
-          onMouseUp: () => lt(r, t.behavior),
-          children: /* @__PURE__ */ m.jsx(kt, { size: 20, className: E(ut({ position: r, type: "icon" }), t.className) })
+          onClick: () => B(r, t.behavior),
+          onMouseEnter: () => H(r, t.behavior, t.type),
+          onMouseLeave: () => $(r, t.behavior),
+          onMouseDown: () => U(r, t.behavior, t.type),
+          onMouseUp: () => V(r, t.behavior),
+          children: /* @__PURE__ */ h.jsx(at, { size: 20, className: m(J({ position: r, type: "icon" }), t.className) })
         },
         e
       );
@@ -362,5 +288,5 @@ const it = U(
   ] });
 };
 export {
-  Ot as Scrollable
+  bt as Scrollable
 };