prometeo-design-system 6.3.3 → 6.3.4

package/dist/PyrionLayout.es.js

@@ -9,14 +9,14 @@ import { c as Ie } from "./index-BOQuZ0gG.js";
 import { B as We } from "./badge-CWYEc-DA.js";
 import _t from "./PlainTooltip.es.js";
 import { CrevronLeft as Pt } from "./Icons/CrevronLeft.es.js";
-import { S as Oe, a as Mt } from "./Scrollable-BT8QYTgm.js";
+import { S as Oe, a as Mt } from "./Scrollable-BhxCCeiu.js";
 import { useLocation as Ve } from "react-router";
 import de from "./TicketCard.es.js";
 import He from "./UserCard.es.js";
 import Ee from "./Button.es.js";
 import { Logout as Rt } from "./Icons/Logout.es.js";
 import ae from "./Skeleton.es.js";
-import { u as Bt } from "./useScrollable-CTw5uK2c.js";
+import { u as Bt } from "./useScrollable-CSfF1lbV.js";
 import $e from "./IconButton.es.js";
 import { Help as qe } from "./Icons/Help.es.js";
 import { Close as _e } from "./Icons/Close.es.js";

package/dist/{Scrollable-BT8QYTgm.js → Scrollable-BhxCCeiu.js}

@@ -1,6 +1,6 @@
 import { j as r } from "./jsx-runtime-GkKLlHH4.js";
 import m, { useImperativeHandle as L } from "react";
-import { u as V } from "./useScrollable-CTw5uK2c.js";
+import { u as V } from "./useScrollable-CSfF1lbV.js";
 import { c as n } from "./cn-B6yFEsav.js";
 import { CrevronLeft as N } from "./Icons/CrevronLeft.es.js";
 const j = (t) => {

package/dist/Scrollable.es.js

@@ -1,4 +1,4 @@
-import { S as r } from "./Scrollable-BT8QYTgm.js";
+import { S as r } from "./Scrollable-BhxCCeiu.js";
 export {
   r as Scrollable
 };

package/dist/prometeo-design-system.es.js

@@ -49,7 +49,7 @@ import { useDropzone as q } from "react-dropzone";
 import { u as Jt } from "./useDevice-vwn4GLwK.js";
 import { default as Xt } from "./DropZone.es.js";
 import { default as er } from "./PriorityChip.es.js";
-import { u as rr } from "./useScrollable-CTw5uK2c.js";
+import { u as rr } from "./useScrollable-CSfF1lbV.js";
 const b = {
   label: "Buscar",
   icon: /* @__PURE__ */ a.jsx(Z, {}),

package/dist/useScrollable-CSfF1lbV.js

@@ -0,0 +1,483 @@
+import { u as Ze } from "./useDevice-vwn4GLwK.js";
+import { g as be, r as x } from "./useLabelBackground-D5SzHhl_.js";
+import k, { useState as v, useCallback as a, useLayoutEffect as Ce, useEffect as Pe } from "react";
+function ct(Te) {
+  const { defaultBehavior: J = "scroll-on-click" } = Te, ve = Ze(), K = {
+    top: { show: !0, type: "shadow", behavior: J, hoverDelay: 300 },
+    bottom: { show: !0, type: "shadow", behavior: J, hoverDelay: 300 },
+    left: { show: !0, type: "icon", behavior: J, hoverDelay: 300 },
+    right: { show: !0, type: "icon", behavior: J, hoverDelay: 300 }
+  }, ye = {
+    hide: !1,
+    size: "small"
+  }, {
+    axis: f = "both",
+    indicators: G,
+    scrollbarProps: Be = ye,
+    disableMouseScroll: Se = !1,
+    persistScroll: A = !1,
+    children: Ae,
+    scrollTopButton: ce,
+    scrollMetadata: Le,
+    speed: ne = 5
+  } = Te, [l, We] = v(null), [qe, Oe] = v(!1), [ae, Q] = v(null), [ie, b] = v(!1), [p, M] = v({}), [i, N] = v(null), [y, Z] = v(null), [w, V] = v(null), [H, Fe] = v(null), [P, Ne] = v(null), [ue, Ve] = v(!1), [fe, _e] = v(!1), u = k.useRef({}), d = k.useRef(ne), _ = k.useRef([]), ee = k.useRef(null), we = k.useRef({ scrollTop: 0, scrollLeft: 0 }), he = k.useRef(Le), W = k.useRef(null), $ = k.useRef(null), z = k.useRef(!1);
+  he.current = Le;
+  const U = {
+    top: f === "x" ? { show: !1 } : { ...K.top, ...G?.top },
+    bottom: f === "x" ? { show: !1 } : { ...K.bottom, ...G?.bottom },
+    left: f === "y" ? { show: !1 } : { ...K.left, ...G?.left },
+    right: f === "y" ? { show: !1 } : { ...K.right, ...G?.right }
+  }, ze = { ...ye, ...Be }, xe = a(() => {
+    _.current.forEach((e) => {
+      e.config?.trip === "forth" && (e.triggered = !1);
+    });
+  }, []), q = a((e) => {
+    if (!l) return 0;
+    const { scrollTop: o, scrollLeft: t, scrollHeight: r, clientHeight: s, scrollWidth: c, clientWidth: n } = l;
+    switch (e) {
+      case "top":
+        return Math.max(0, o);
+      case "bottom":
+        return Math.max(0, r - (o + s));
+      case "left":
+        return Math.max(0, t);
+      case "right":
+        return Math.max(0, c - (t + n));
+      default:
+        return 0;
+    }
+  }, [l]), Me = a((e) => {
+    if (!e || !l) return 0;
+    const { clientHeight: o, scrollHeight: t } = l;
+    if (e.includes("%")) {
+      const r = parseFloat(e.replace("%", "")), s = Math.max(0, t - o);
+      return r / 100 * s;
+    } else {
+      if (e.includes("px"))
+        return parseFloat(e.replace("px", ""));
+      if (e.includes("vh"))
+        return parseFloat(e.replace("vh", "")) / 100 * window.innerHeight;
+    }
+    return 0;
+  }, [l]), de = a(() => {
+    if (!l || !ce) return;
+    const { scrollTop: e } = l, o = Me(ce.target || "40vh");
+    Oe(e >= o);
+  }, [l, ce, Me]), ge = a(() => {
+    if (!l) return { x: 0, y: 0 };
+    const { scrollTop: e, scrollLeft: o, scrollHeight: t, scrollWidth: r, clientHeight: s, clientWidth: c } = l, n = Math.max(0, t - s), h = Math.max(0, r - c), I = n > 0 ? e / n * 100 : 0;
+    return { x: h > 0 ? o / h * 100 : 0, y: I };
+  }, [l]), Ee = a((e) => {
+    const o = we.current;
+    let t = null;
+    return e.scrollTop > o.scrollTop ? t = "down" : e.scrollTop < o.scrollTop ? t = "up" : e.scrollLeft > o.scrollLeft ? t = "right" : e.scrollLeft < o.scrollLeft && (t = "left"), we.current = e, t;
+  }, []), Re = a((e) => {
+    if (!l) return;
+    let { scrollTop: o, scrollLeft: t, scrollHeight: r, scrollWidth: s, clientHeight: c, clientWidth: n } = l;
+    const h = Ee(e), { x: I, y: T } = ge(), g = {
+      percentage: T,
+      direction: h,
+      scrollTop: o,
+      scrollLeft: t,
+      scrollHeight: r,
+      scrollWidth: s,
+      clientHeight: c,
+      clientWidth: n,
+      metadata: he.current
+    }, B = {
+      percentage: I,
+      direction: h,
+      scrollTop: o,
+      scrollLeft: t,
+      scrollHeight: r,
+      scrollWidth: s,
+      clientHeight: c,
+      clientWidth: n,
+      metadata: he.current
+    };
+    _.current.forEach((m) => {
+      const { config: S, triggered: re } = m;
+      if (!S) {
+        (f === "y" || f === "both") && m.callback(g), (f === "x" || f === "both") && m.callback(B);
+        return;
+      }
+      const oe = (S.direction === "y" || S.direction === "both") && (f === "y" || f === "both"), He = (S.direction === "x" || S.direction === "both") && (f === "x" || f === "both");
+      if (!oe && !He) return;
+      const $e = oe ? g : B;
+      let O = Math.round($e.percentage);
+      const Y = S.target * 100;
+      let F = !1;
+      if (S.trip === "forth")
+        F = !re && O >= Y, F && (m.triggered = !0), re && O < Y && (m.triggered = !1);
+      else if (S.trip === "back")
+        F = re && O < Y, F && (m.triggered = !1), !re && O >= Y && (m.triggered = !0);
+      else if (S.trip === "round-trip") {
+        const le = O >= Y;
+        F = m.triggered !== le;
+      }
+      if (F) {
+        const le = (j) => {
+          if (!h) return !1;
+          const se = j === "y" ? Math.max(1, Math.floor(Math.max(0, r - c) * 1e-3)) : Math.max(1, Math.floor(Math.max(0, s - n) * 1e-3));
+          if (j === "y") {
+            if (h === "down") {
+              const L = Math.max(0, o - se);
+              if (L < o)
+                return o = L, l.scrollTop = o, !0;
+            } else if (h === "up") {
+              const L = Math.min(Math.max(0, r - c), o + se);
+              if (L > o)
+                return o = L, l.scrollTop = o, !0;
+            }
+          } else if (h === "right") {
+            const L = Math.max(0, t - se);
+            if (L < t)
+              return t = L, l.scrollLeft = t, !0;
+          } else if (h === "left") {
+            const L = Math.min(Math.max(0, s - n), t + se);
+            if (L > t)
+              return t = L, l.scrollLeft = t, !0;
+          }
+          return !1;
+        }, De = () => {
+          const j = ge();
+          g.percentage = j.y, B.percentage = j.x, g.scrollTop = o, g.scrollLeft = t, B.scrollTop = o, B.scrollLeft = t;
+        };
+        le(oe ? "y" : "x") && (De(), O = $e.percentage), oe ? m.callback(g) : He && m.callback(B);
+      }
+    });
+  }, [l, f, Ee, ge]), Ue = a((e, o) => {
+    const t = {
+      callback: e,
+      config: o,
+      triggered: !1,
+      lastDirection: void 0
+    };
+    return _.current.push(t), () => {
+      const r = _.current.indexOf(t);
+      r > -1 && _.current.splice(r, 1);
+    };
+  }, []), D = a((e, o = 100, t = !0) => {
+    if (!l) return;
+    const r = q(e), s = Math.min(Math.abs(o), r);
+    if (s === 0) return;
+    const c = e === "top" || e === "left" ? -s : s, n = {
+      top: { top: c, left: 0 },
+      bottom: { top: c, left: 0 },
+      left: { top: 0, left: c },
+      right: { top: 0, left: c }
+    };
+    l.scrollBy({ ...n[e], behavior: t ? "smooth" : "auto" });
+  }, [l, q]), me = a((e) => {
+    if (!l) return;
+    const o = l, t = {
+      top: { top: 0, left: o.scrollLeft },
+      bottom: { top: o.scrollHeight, left: o.scrollLeft },
+      left: { top: o.scrollTop, left: 0 },
+      right: { top: o.scrollTop, left: o.scrollWidth }
+    };
+    o.scrollTo({ ...t[e], behavior: "smooth" });
+  }, [l]), Xe = a(() => {
+    l && l.scrollTo({ top: 0, behavior: "smooth" });
+  }, [l]), pe = a((e, o) => {
+    const t = u.current[e];
+    if (t) {
+      if (t.style.cursor = "pointer", o === "icon") {
+        const r = t.querySelector("svg");
+        r && (r.style.transition = "all 0.3s ease-in-out", r.style.transform = "scale(1.3)", r.style.backgroundColor = "rgba(255, 255, 255, 0.2)", r.style.borderRadius = "100%");
+      } else if (o === "shadow") {
+        const r = t.querySelector(".shadow-base"), s = t.querySelector(".shadow-hover"), c = be(l);
+        if (s && (s.style.opacity = "0"), r)
+          if (r.style.transition = "all 0.3s ease-in-out", e === "top" || e === "bottom")
+            r.style.height = "110px", r.style.zIndex = "100", r.style.background = `linear-gradient(to bottom, ${c} 5%, ${x(c, -2)} 10%, ${x(c, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
+              r && (r.style.animation = "");
+            }, 3500);
+          else {
+            r.style.width = "40px";
+            const n = e === "left" ? "to right" : "to left";
+            r.style.background = `linear-gradient(${n}, ${c} 5%, ${x(c, -2)} 10%, ${x(c, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulseVertical 1.5s ease-out", setTimeout(() => {
+              r && (r.style.animation = "");
+            }, 1500);
+          }
+      }
+    }
+  }, [l]), E = a((e, o) => {
+    const t = u.current[e];
+    if (!t) return;
+    t.style.cursor = "";
+    const r = t.querySelector("svg");
+    r && (r.style.transform = "", r.style.backgroundColor = "", r.style.borderRadius = "");
+    const s = t.querySelector(".shadow-base");
+    if (s && (s.style.height = "", s.style.width = "", o === "shadow")) {
+      const c = be(l), n = e === "left" || e === "right" ? "to right" : "to bottom";
+      s.style.background = `linear-gradient(${n}, ${c} 5%, ${x(c, 0)} 10%, ${x(c, -2, 30)} 70%, transparent)`;
+    }
+  }, [l]), Ie = a((e, o) => {
+    if (o !== "shadow" || p[e]) return;
+    const t = u.current[e];
+    if (!t) return;
+    const r = t.querySelector(".shadow-hover");
+    r && (r.style.opacity = "1");
+  }, [p]), ke = a((e, o) => {
+    if (o !== "shadow" || p[e]) return;
+    const t = u.current[e];
+    if (!t) return;
+    const r = t.querySelector(".shadow-hover");
+    r && (r.style.opacity = "0");
+  }, [p]), Ye = a((e, o, t) => {
+    if (o === "scroll-on-click" && ie) {
+      b(!1);
+      return;
+    }
+    if (p[e]) {
+      w && (clearTimeout(w), V(null)), i && (clearInterval(i), N(null)), E(e, t), M((r) => ({ ...r, [e]: !1 })), me(e);
+      return;
+    }
+    if (o === "scroll-on-click") {
+      if (!l) return;
+      const { clientHeight: r, clientWidth: s } = l, c = e === "top" || e === "bottom" ? r * 0.8 : s * 0.8;
+      D(e, c);
+    }
+  }, [ie, p, w, i, E, me, l, D]), te = a((e, o) => {
+    w && (clearTimeout(w), V(null)), b(!0), d.current = ne;
+    let t = 0;
+    Q(e), M((s) => ({ ...s, [e]: !1 })), D(e, d.current, !1);
+    const r = setInterval(() => {
+      t += 16;
+      const s = t / 1e3;
+      if (q(e) === 0) {
+        R(e, !1, o);
+        return;
+      }
+      if (s >= 2 && !p[e] && (M((n) => ({ ...n, [e]: !0 })), pe(e, o)), s <= 2)
+        d.current = ne + s * 0.4;
+      else {
+        const n = s - 2;
+        d.current += Math.pow(n, 1.1) * 2;
+      }
+      d.current = Math.min(d.current, 100), D(e, d.current, !1);
+    }, 16);
+    N(r);
+  }, [w, D, q, p, pe]), R = a((e, o = !1, t) => {
+    y && (clearTimeout(y), Z(null));
+    const r = e || ae;
+    if (!o && r && i) {
+      let s = 0;
+      const c = d.current, n = 800, h = setInterval(() => {
+        s += 16;
+        const T = s / n, g = 1 - Math.pow(1 - T, 3);
+        if (d.current = c * (1 - g), q(r) === 0 || d.current <= 0.5) {
+          if (clearInterval(h), i && (clearInterval(i), N(null)), d.current = 5, r)
+            if (p[r]) {
+              const m = setTimeout(() => {
+                E(r, t), M((S) => ({ ...S, [r]: !1 })), b(!1);
+              }, 1e3);
+              V(m);
+            } else
+              E(r, t), M((m) => ({ ...m, [r]: !1 })), b(!1);
+          else
+            b(!1);
+          Q(null);
+          return;
+        }
+        D(r, d.current, !1);
+      }, 16), I = setTimeout(() => {
+        if (clearInterval(h), i && (clearInterval(i), N(null)), d.current = 5, r)
+          if (p[r]) {
+            const T = setTimeout(() => {
+              E(r, t), M((g) => ({ ...g, [r]: !1 })), b(!1);
+            }, 1e3);
+            V(T);
+          } else
+            E(r, t), M((T) => ({ ...T, [r]: !1 })), b(!1);
+        else
+          b(!1);
+        Q(null);
+      }, n);
+      Z(I);
+    } else {
+      if (i && (clearInterval(i), N(null)), d.current = 5, r)
+        if (p[r]) {
+          const s = setTimeout(() => {
+            E(r, t), M((c) => ({ ...c, [r]: !1 })), b(!1);
+          }, 1e3);
+          V(s);
+        } else
+          E(r, t), M((s) => ({ ...s, [r]: !1 })), b(!1);
+      else
+        b(!1);
+      Q(null);
+    }
+  }, [y, ae, i, q, D, p, E, pe]), X = a((e, o, t) => {
+    if (!ve && (W.current = { position: e, behavior: o, type: t }, Ie(e, t), !z.current && o === "scroll-on-hover")) {
+      const r = U[e]?.hoverDelay ?? 800, s = setTimeout(() => {
+        te(e, t);
+      }, r);
+      Z(s);
+    }
+  }, [ve, Ie, U, te]), je = a((e, o, t) => {
+    W.current = null, ke(e, t), o === "scroll-on-hover" && R(e, !0, t);
+  }, [ke, R]), Je = a((e, o, t) => {
+    if (o === "scroll-on-click") {
+      b(!1);
+      const r = setTimeout(() => {
+        te(e, t);
+      }, 200);
+      Z(r);
+    }
+  }, [te]), Ke = a((e, o, t) => {
+    o === "scroll-on-click" && R(e, !1, t);
+  }, [R]), Ge = a((e) => {
+    l && ((i || y) && R(void 0, !0), z.current = !0, l.scrollBy({
+      top: e.deltaY,
+      left: e.deltaX,
+      behavior: "auto"
+    }), $.current && clearTimeout($.current), $.current = setTimeout(() => {
+      if (z.current = !1, W.current) {
+        const { position: o, behavior: t, type: r } = W.current;
+        X(o, t, r);
+      }
+    }, 150));
+  }, [l, i, y, R, X]), C = a(() => {
+    if (!l) return;
+    const e = l, { scrollTop: o, scrollLeft: t, scrollHeight: r, scrollWidth: s, clientHeight: c, clientWidth: n } = e, h = o <= 10, I = o + c >= r - 10, T = t <= 10, g = t + n >= s - 10;
+    f !== "x" && (u.current.top?.classList.toggle("opacity-0", h), u.current.top?.classList.toggle("pointer-events-none", h), u.current.top?.classList.toggle("pointer-events-auto", !h), u.current.bottom?.classList.toggle("opacity-0", I), u.current.bottom?.classList.toggle("pointer-events-none", I), u.current.bottom?.classList.toggle("pointer-events-auto", !I)), f !== "y" && (u.current.left?.classList.toggle("opacity-0", T), u.current.left?.classList.toggle("pointer-events-none", T), u.current.left?.classList.toggle("pointer-events-auto", !T), u.current.right?.classList.toggle("opacity-0", g), u.current.right?.classList.toggle("pointer-events-none", g), u.current.right?.classList.toggle("pointer-events-auto", !g));
+  }, [l, f]), Qe = a((e) => {
+    We(e);
+  }, []);
+  return Ce(() => {
+    if (!l) return;
+    if (A && !P) {
+      const t = typeof A == "string" ? `scrollable-${A}` : `scrollable-session-${Math.random().toString(36).substr(2, 9)}`;
+      Ne(t);
+    }
+    if (A && P && !ue) {
+      Ve(!0);
+      try {
+        const t = sessionStorage.getItem(P);
+        if (t) {
+          const { scrollTop: r, scrollLeft: s } = JSON.parse(t);
+          l.scrollTop = r, l.scrollLeft = s;
+        }
+      } catch {
+      }
+    }
+    C(), fe || (_e(!0), requestAnimationFrame(() => {
+      Object.values(u.current).forEach((t) => {
+        t?.classList.add("transition-all", "duration-300");
+      }), setTimeout(() => {
+        C();
+      }, 0);
+    }));
+    const e = () => {
+      if (C(), de(), l) {
+        const t = {
+          scrollTop: l.scrollTop,
+          scrollLeft: l.scrollLeft
+        };
+        Re(t);
+      }
+      if (A && P) {
+        H && clearTimeout(H);
+        const t = setTimeout(() => {
+          try {
+            if (!l) return;
+            const r = {
+              scrollTop: l.scrollTop,
+              scrollLeft: l.scrollLeft
+            };
+            sessionStorage.setItem(P, JSON.stringify(r));
+          } catch {
+          }
+        }, 150);
+        Fe(t);
+      }
+    };
+    l.addEventListener("scroll", e);
+    const o = (t) => {
+      if (Se) {
+        t.preventDefault();
+        return;
+      }
+      (i || y) && R(void 0, !0), z.current = !0, $.current && clearTimeout($.current), $.current = setTimeout(() => {
+        if (z.current = !1, W.current) {
+          const { position: r, behavior: s, type: c } = W.current;
+          X(r, s, c);
+        }
+      }, 350);
+    };
+    return l.addEventListener("wheel", o, { passive: !1 }), ee.current = new MutationObserver((t) => {
+      t.some((r) => r.type === "childList" && r.target === l) && (console.log("MutationObserver: childList changes detected.", t), C(), de(), l.scrollTop + l.clientHeight >= l.scrollHeight - 20 && xe());
+    }), ee.current.observe(l, { childList: !0, subtree: !1 }), () => {
+      l.removeEventListener("scroll", e), l.removeEventListener("wheel", o), H && clearTimeout(H), ee.current && ee.current.disconnect();
+    };
+  }, [
+    l,
+    A,
+    P,
+    ue,
+    fe,
+    Se,
+    C,
+    de,
+    Re,
+    i,
+    y,
+    R,
+    X,
+    xe
+  ]), Ce(() => {
+    C();
+  }, [Ae, C]), Pe(() => {
+    if (!l) return;
+    let e = be(l);
+    Object.entries(U).forEach(([o, t]) => {
+      if (t?.show && t.type === "shadow") {
+        const r = u.current[o], s = r?.querySelector(".shadow-base"), c = r?.querySelector(".shadow-hover");
+        if (s) {
+          s.dataset.bgColor = e;
+          const n = o === "left" || o === "right" ? "to right" : "to bottom";
+          s.style.background = `linear-gradient(${n}, ${e} 2%, ${x(e, -2, 55)} 50%, ${x(e, -1, 30)} 80%, transparent)`;
+        }
+        if (c) {
+          const n = o === "left" || o === "right" ? "to right" : "to bottom";
+          c.style.height += "60px", c.style.background = `linear-gradient(${n}, ${e} 2%, ${x(e, 10, 20)} 20%, ${x(e, 6, 10)} 70%, transparent)`;
+        }
+      }
+    });
+  }, [l, U, f]), Pe(() => () => {
+    i && clearInterval(i), y && clearTimeout(y), w && clearTimeout(w), H && clearTimeout(H), $.current && clearTimeout($.current);
+  }, [i, y, w, H]), { state: {
+    scrollableElement: l,
+    indicatorRefs: u.current,
+    scrollTopButtonVisible: qe,
+    activePosition: ae,
+    continuousScrollStarted: ie,
+    clickToEndEnabled: p,
+    hoverScrollInterval: i,
+    hoverDebounceTimeout: y,
+    clickToEndTimeout: w,
+    saveScrollTimeout: H,
+    scrollKey: P,
+    hasRestoredScroll: ue,
+    hasRendered: fe,
+    finalIndicators: U,
+    finalScrollbarProps: ze
+  }, handlers: {
+    subscribeToScrollTarget: Ue,
+    scrollByAmount: D,
+    scrollToEnd: me,
+    scrollToTop: Xe,
+    handleIndicatorClick: Ye,
+    handleIndicatorMouseEnter: X,
+    handleIndicatorMouseLeave: je,
+    handleIndicatorMouseDown: Je,
+    handleIndicatorMouseUp: Ke,
+    handleIndicatorWheel: Ge,
+    setScrollableRef: Qe,
+    updateIndicatorsVisibility: C
+  } };
+}
+export {
+  ct as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "6.3.3",
+  "version": "6.3.4",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",

package/dist/useScrollable-CTw5uK2c.js

@@ -1,487 +0,0 @@
-import { u as oe } from "./useDevice-vwn4GLwK.js";
-import { g as bt, r as x } from "./useLabelBackground-D5SzHhl_.js";
-import M, { useState as y, useCallback as a, useLayoutEffect as At, useEffect as Wt } from "react";
-function ue(vt) {
-  const { defaultBehavior: j = "scroll-on-click" } = vt, yt = oe(), J = {
-    top: { show: !0, type: "shadow", behavior: j, hoverDelay: 300 },
-    bottom: { show: !0, type: "shadow", behavior: j, hoverDelay: 300 },
-    left: { show: !0, type: "icon", behavior: j, hoverDelay: 300 },
-    right: { show: !0, type: "icon", behavior: j, hoverDelay: 300 }
-  }, St = {
-    hide: !1,
-    size: "small"
-  }, {
-    axis: d = "both",
-    indicators: G,
-    scrollbarProps: Ot = St,
-    disableMouseScroll: Lt = !1,
-    persistScroll: W = !1,
-    children: qt,
-    scrollTopButton: ct,
-    scrollMetadata: wt,
-    speed: nt = 5
-  } = vt, [l, Ft] = y(null), [Nt, Vt] = y(!1), [at, Q] = y(null), [it, b] = y(!1), [T, E] = y({}), [i, _] = y(null), [S, Z] = y(null), [w, z] = y(null), [$, _t] = y(null), [P, zt] = y(null), [ut, Kt] = y(!1), [ft, Ut] = y(!1), u = M.useRef({}), g = M.useRef(nt), O = M.useRef([]), tt = M.useRef(null), xt = M.useRef(/* @__PURE__ */ new Map()), Mt = M.useRef({ scrollTop: 0, scrollLeft: 0 }), ht = M.useRef(wt), q = M.useRef(null), D = M.useRef(null), K = M.useRef(!1);
-  ht.current = wt;
-  const U = {
-    top: d === "x" ? { show: !1 } : { ...J.top, ...G?.top },
-    bottom: d === "x" ? { show: !1 } : { ...J.bottom, ...G?.bottom },
-    left: d === "y" ? { show: !1 } : { ...J.left, ...G?.left },
-    right: d === "y" ? { show: !1 } : { ...J.right, ...G?.right }
-  }, Xt = { ...St, ...Ot }, Et = a(() => {
-    O.current.forEach((t) => {
-      t.config?.trip === "forth" && (t.triggered = !1);
-    });
-  }, []), F = a((t) => {
-    if (!l) return 0;
-    const { scrollTop: o, scrollLeft: e, scrollHeight: r, clientHeight: s, scrollWidth: c, clientWidth: n } = l;
-    switch (t) {
-      case "top":
-        return Math.max(0, o);
-      case "bottom":
-        return Math.max(0, r - (o + s));
-      case "left":
-        return Math.max(0, e);
-      case "right":
-        return Math.max(0, c - (e + n));
-      default:
-        return 0;
-    }
-  }, [l]), Rt = a((t) => {
-    if (!t || !l) return 0;
-    const { clientHeight: o, scrollHeight: e } = l;
-    if (t.includes("%")) {
-      const r = parseFloat(t.replace("%", "")), s = Math.max(0, e - o);
-      return r / 100 * s;
-    } else {
-      if (t.includes("px"))
-        return parseFloat(t.replace("px", ""));
-      if (t.includes("vh"))
-        return parseFloat(t.replace("vh", "")) / 100 * window.innerHeight;
-    }
-    return 0;
-  }, [l]), dt = a(() => {
-    if (!l || !ct) return;
-    const { scrollTop: t } = l, o = Rt(ct.target || "40vh");
-    Vt(t >= o);
-  }, [l, ct, Rt]), gt = a(() => {
-    if (!l) return { x: 0, y: 0 };
-    const { scrollTop: t, scrollLeft: o, scrollHeight: e, scrollWidth: r, clientHeight: s, clientWidth: c } = l, n = Math.max(0, e - s), f = Math.max(0, r - c), k = n > 0 ? t / n * 100 : 0;
-    return { x: f > 0 ? o / f * 100 : 0, y: k };
-  }, [l]), It = a((t) => {
-    const o = Mt.current;
-    let e = null;
-    return t.scrollTop > o.scrollTop ? e = "down" : t.scrollTop < o.scrollTop ? e = "up" : t.scrollLeft > o.scrollLeft ? e = "right" : t.scrollLeft < o.scrollLeft && (e = "left"), Mt.current = t, e;
-  }, []), kt = a((t) => {
-    if (!l) return;
-    let { scrollTop: o, scrollLeft: e, scrollHeight: r, scrollWidth: s, clientHeight: c, clientWidth: n } = l;
-    const f = It(t), { x: k, y: v } = gt(), m = {
-      percentage: v,
-      direction: f,
-      scrollTop: o,
-      scrollLeft: e,
-      scrollHeight: r,
-      scrollWidth: s,
-      clientHeight: c,
-      clientWidth: n,
-      metadata: ht.current
-    }, B = {
-      percentage: k,
-      direction: f,
-      scrollTop: o,
-      scrollLeft: e,
-      scrollHeight: r,
-      scrollWidth: s,
-      clientHeight: c,
-      clientWidth: n,
-      metadata: ht.current
-    };
-    O.current.forEach((h) => {
-      const { config: p, triggered: rt } = h;
-      if (!p) {
-        (d === "y" || d === "both") && h.callback(m), (d === "x" || d === "both") && h.callback(B);
-        return;
-      }
-      const ot = (p.direction === "y" || p.direction === "both") && (d === "y" || d === "both"), Ht = (p.direction === "x" || p.direction === "both") && (d === "x" || d === "both");
-      if (!ot && !Ht) return;
-      const Ct = ot ? m : B;
-      let A = Math.round(Ct.percentage);
-      const N = p.target * 100;
-      let V = !1;
-      if (p.trip === "forth")
-        V = !rt && A >= N, V && (h.triggered = !0), rt && A < N && (h.triggered = !1);
-      else if (p.trip === "back")
-        V = rt && A < N, V && (h.triggered = !1), !rt && A >= N && (h.triggered = !0);
-      else if (p.trip === "round-trip") {
-        const lt = A >= N;
-        V = h.triggered !== lt;
-      }
-      if (V) {
-        const lt = (Y) => {
-          if (!f) return !1;
-          const st = Y === "y" ? Math.max(1, Math.floor(Math.max(0, r - c) * 1e-3)) : Math.max(1, Math.floor(Math.max(0, s - n) * 1e-3));
-          if (Y === "y") {
-            if (f === "down") {
-              const L = Math.max(0, o - st);
-              if (L < o)
-                return o = L, l.scrollTop = o, !0;
-            } else if (f === "up") {
-              const L = Math.min(Math.max(0, r - c), o + st);
-              if (L > o)
-                return o = L, l.scrollTop = o, !0;
-            }
-          } else if (f === "right") {
-            const L = Math.max(0, e - st);
-            if (L < e)
-              return e = L, l.scrollLeft = e, !0;
-          } else if (f === "left") {
-            const L = Math.min(Math.max(0, s - n), e + st);
-            if (L > e)
-              return e = L, l.scrollLeft = e, !0;
-          }
-          return !1;
-        }, Pt = () => {
-          const Y = gt();
-          m.percentage = Y.y, B.percentage = Y.x, m.scrollTop = o, m.scrollLeft = e, B.scrollTop = o, B.scrollLeft = e;
-        };
-        lt(ot ? "y" : "x") && (Pt(), A = Ct.percentage);
-        const Bt = `${O.current.indexOf(h)}-${p?.target || 0}-${p?.direction || "y"}`, Tt = Date.now(), re = xt.current.get(Bt) || 0;
-        if (Tt - re < 500)
-          return;
-        p.trip === "round-trip" && (h.triggered = A >= N, h.lastDirection = f || void 0), xt.current.set(Bt, Tt), h.lastTriggerTime = Tt, ot ? h.callback(m) : Ht && h.callback(B);
-      }
-    });
-  }, [l, d, It, gt]), Yt = a((t, o) => {
-    const e = {
-      callback: t,
-      config: o,
-      triggered: !1,
-      lastDirection: void 0
-    };
-    return O.current.push(e), () => {
-      const r = O.current.indexOf(e);
-      r > -1 && O.current.splice(r, 1);
-    };
-  }, []), H = a((t, o = 100, e = !0) => {
-    if (!l) return;
-    const r = F(t), s = Math.min(Math.abs(o), r);
-    if (s === 0) return;
-    const c = t === "top" || t === "left" ? -s : s, n = {
-      top: { top: c, left: 0 },
-      bottom: { top: c, left: 0 },
-      left: { top: 0, left: c },
-      right: { top: 0, left: c }
-    };
-    l.scrollBy({ ...n[t], behavior: e ? "smooth" : "auto" });
-  }, [l, F]), mt = a((t) => {
-    if (!l) return;
-    const o = l, e = {
-      top: { top: 0, left: o.scrollLeft },
-      bottom: { top: o.scrollHeight, left: o.scrollLeft },
-      left: { top: o.scrollTop, left: 0 },
-      right: { top: o.scrollTop, left: o.scrollWidth }
-    };
-    o.scrollTo({ ...e[t], behavior: "smooth" });
-  }, [l]), jt = a(() => {
-    l && l.scrollTo({ top: 0, behavior: "smooth" });
-  }, [l]), pt = a((t, o) => {
-    const e = u.current[t];
-    if (e) {
-      if (e.style.cursor = "pointer", o === "icon") {
-        const r = e.querySelector("svg");
-        r && (r.style.transition = "all 0.3s ease-in-out", r.style.transform = "scale(1.3)", r.style.backgroundColor = "rgba(255, 255, 255, 0.2)", r.style.borderRadius = "100%");
-      } else if (o === "shadow") {
-        const r = e.querySelector(".shadow-base"), s = e.querySelector(".shadow-hover"), c = bt(l);
-        if (s && (s.style.opacity = "0"), r)
-          if (r.style.transition = "all 0.3s ease-in-out", t === "top" || t === "bottom")
-            r.style.height = "110px", r.style.zIndex = "100", r.style.background = `linear-gradient(to bottom, ${c} 5%, ${x(c, -2)} 10%, ${x(c, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
-              r && (r.style.animation = "");
-            }, 3500);
-          else {
-            r.style.width = "40px";
-            const n = t === "left" ? "to right" : "to left";
-            r.style.background = `linear-gradient(${n}, ${c} 5%, ${x(c, -2)} 10%, ${x(c, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulseVertical 1.5s ease-out", setTimeout(() => {
-              r && (r.style.animation = "");
-            }, 1500);
-          }
-      }
-    }
-  }, [l]), R = a((t, o) => {
-    const e = u.current[t];
-    if (!e) return;
-    e.style.cursor = "";
-    const r = e.querySelector("svg");
-    r && (r.style.transform = "", r.style.backgroundColor = "", r.style.borderRadius = "");
-    const s = e.querySelector(".shadow-base");
-    if (s && (s.style.height = "", s.style.width = "", o === "shadow")) {
-      const c = bt(l), n = t === "left" || t === "right" ? "to right" : "to bottom";
-      s.style.background = `linear-gradient(${n}, ${c} 5%, ${x(c, 0)} 10%, ${x(c, -2, 30)} 70%, transparent)`;
-    }
-  }, [l]), $t = a((t, o) => {
-    if (o !== "shadow" || T[t]) return;
-    const e = u.current[t];
-    if (!e) return;
-    const r = e.querySelector(".shadow-hover");
-    r && (r.style.opacity = "1");
-  }, [T]), Dt = a((t, o) => {
-    if (o !== "shadow" || T[t]) return;
-    const e = u.current[t];
-    if (!e) return;
-    const r = e.querySelector(".shadow-hover");
-    r && (r.style.opacity = "0");
-  }, [T]), Jt = a((t, o, e) => {
-    if (o === "scroll-on-click" && it) {
-      b(!1);
-      return;
-    }
-    if (T[t]) {
-      w && (clearTimeout(w), z(null)), i && (clearInterval(i), _(null)), R(t, e), E((r) => ({ ...r, [t]: !1 })), mt(t);
-      return;
-    }
-    if (o === "scroll-on-click") {
-      if (!l) return;
-      const { clientHeight: r, clientWidth: s } = l, c = t === "top" || t === "bottom" ? r * 0.8 : s * 0.8;
-      H(t, c);
-    }
-  }, [it, T, w, i, R, mt, l, H]), et = a((t, o) => {
-    w && (clearTimeout(w), z(null)), b(!0), g.current = nt;
-    let e = 0;
-    Q(t), E((s) => ({ ...s, [t]: !1 })), H(t, g.current, !1);
-    const r = setInterval(() => {
-      e += 16;
-      const s = e / 1e3;
-      if (F(t) === 0) {
-        I(t, !1, o);
-        return;
-      }
-      if (s >= 2 && !T[t] && (E((n) => ({ ...n, [t]: !0 })), pt(t, o)), s <= 2)
-        g.current = nt + s * 0.4;
-      else {
-        const n = s - 2;
-        g.current += Math.pow(n, 1.1) * 2;
-      }
-      g.current = Math.min(g.current, 100), H(t, g.current, !1);
-    }, 16);
-    _(r);
-  }, [w, H, F, T, pt]), I = a((t, o = !1, e) => {
-    S && (clearTimeout(S), Z(null));
-    const r = t || at;
-    if (!o && r && i) {
-      let s = 0;
-      const c = g.current, n = 800, f = setInterval(() => {
-        s += 16;
-        const v = s / n, m = 1 - Math.pow(1 - v, 3);
-        if (g.current = c * (1 - m), F(r) === 0 || g.current <= 0.5) {
-          if (clearInterval(f), i && (clearInterval(i), _(null)), g.current = 5, r)
-            if (T[r]) {
-              const h = setTimeout(() => {
-                R(r, e), E((p) => ({ ...p, [r]: !1 })), b(!1);
-              }, 1e3);
-              z(h);
-            } else
-              R(r, e), E((h) => ({ ...h, [r]: !1 })), b(!1);
-          else
-            b(!1);
-          Q(null);
-          return;
-        }
-        H(r, g.current, !1);
-      }, 16), k = setTimeout(() => {
-        if (clearInterval(f), i && (clearInterval(i), _(null)), g.current = 5, r)
-          if (T[r]) {
-            const v = setTimeout(() => {
-              R(r, e), E((m) => ({ ...m, [r]: !1 })), b(!1);
-            }, 1e3);
-            z(v);
-          } else
-            R(r, e), E((v) => ({ ...v, [r]: !1 })), b(!1);
-        else
-          b(!1);
-        Q(null);
-      }, n);
-      Z(k);
-    } else {
-      if (i && (clearInterval(i), _(null)), g.current = 5, r)
-        if (T[r]) {
-          const s = setTimeout(() => {
-            R(r, e), E((c) => ({ ...c, [r]: !1 })), b(!1);
-          }, 1e3);
-          z(s);
-        } else
-          R(r, e), E((s) => ({ ...s, [r]: !1 })), b(!1);
-      else
-        b(!1);
-      Q(null);
-    }
-  }, [S, at, i, F, H, T, R, pt]), X = a((t, o, e) => {
-    if (!yt && (q.current = { position: t, behavior: o, type: e }, $t(t, e), !K.current && o === "scroll-on-hover")) {
-      const r = U[t]?.hoverDelay ?? 800, s = setTimeout(() => {
-        et(t, e);
-      }, r);
-      Z(s);
-    }
-  }, [yt, $t, U, et]), Gt = a((t, o, e) => {
-    q.current = null, Dt(t, e), o === "scroll-on-hover" && I(t, !0, e);
-  }, [Dt, I]), Qt = a((t, o, e) => {
-    if (o === "scroll-on-click") {
-      b(!1);
-      const r = setTimeout(() => {
-        et(t, e);
-      }, 200);
-      Z(r);
-    }
-  }, [et]), Zt = a((t, o, e) => {
-    o === "scroll-on-click" && I(t, !1, e);
-  }, [I]), te = a((t) => {
-    l && ((i || S) && I(void 0, !0), K.current = !0, l.scrollBy({
-      top: t.deltaY,
-      left: t.deltaX,
-      behavior: "auto"
-    }), D.current && clearTimeout(D.current), D.current = setTimeout(() => {
-      if (K.current = !1, q.current) {
-        const { position: o, behavior: e, type: r } = q.current;
-        X(o, e, r);
-      }
-    }, 150));
-  }, [l, i, S, I, X]), C = a(() => {
-    if (!l) return;
-    const t = l, { scrollTop: o, scrollLeft: e, scrollHeight: r, scrollWidth: s, clientHeight: c, clientWidth: n } = t, f = o <= 10, k = o + c >= r - 10, v = e <= 10, m = e + n >= s - 10;
-    d !== "x" && (u.current.top?.classList.toggle("opacity-0", f), u.current.top?.classList.toggle("pointer-events-none", f), u.current.top?.classList.toggle("pointer-events-auto", !f), u.current.bottom?.classList.toggle("opacity-0", k), u.current.bottom?.classList.toggle("pointer-events-none", k), u.current.bottom?.classList.toggle("pointer-events-auto", !k)), d !== "y" && (u.current.left?.classList.toggle("opacity-0", v), u.current.left?.classList.toggle("pointer-events-none", v), u.current.left?.classList.toggle("pointer-events-auto", !v), u.current.right?.classList.toggle("opacity-0", m), u.current.right?.classList.toggle("pointer-events-none", m), u.current.right?.classList.toggle("pointer-events-auto", !m));
-  }, [l, d]), ee = a((t) => {
-    Ft(t);
-  }, []);
-  return At(() => {
-    if (!l) return;
-    if (W && !P) {
-      const e = typeof W == "string" ? `scrollable-${W}` : `scrollable-session-${Math.random().toString(36).substr(2, 9)}`;
-      zt(e);
-    }
-    if (W && P && !ut) {
-      Kt(!0);
-      try {
-        const e = sessionStorage.getItem(P);
-        if (e) {
-          const { scrollTop: r, scrollLeft: s } = JSON.parse(e);
-          l.scrollTop = r, l.scrollLeft = s;
-        }
-      } catch {
-      }
-    }
-    C(), ft || (Ut(!0), requestAnimationFrame(() => {
-      Object.values(u.current).forEach((e) => {
-        e?.classList.add("transition-all", "duration-300");
-      }), setTimeout(() => {
-        C();
-      }, 0);
-    }));
-    const t = () => {
-      if (C(), dt(), l) {
-        const e = {
-          scrollTop: l.scrollTop,
-          scrollLeft: l.scrollLeft
-        };
-        kt(e);
-      }
-      if (W && P) {
-        $ && clearTimeout($);
-        const e = setTimeout(() => {
-          try {
-            if (!l) return;
-            const r = {
-              scrollTop: l.scrollTop,
-              scrollLeft: l.scrollLeft
-            };
-            sessionStorage.setItem(P, JSON.stringify(r));
-          } catch {
-          }
-        }, 150);
-        _t(e);
-      }
-    };
-    l.addEventListener("scroll", t);
-    const o = (e) => {
-      if (Lt) {
-        e.preventDefault();
-        return;
-      }
-      (i || S) && I(void 0, !0), K.current = !0, D.current && clearTimeout(D.current), D.current = setTimeout(() => {
-        if (K.current = !1, q.current) {
-          const { position: r, behavior: s, type: c } = q.current;
-          X(r, s, c);
-        }
-      }, 350);
-    };
-    return l.addEventListener("wheel", o, { passive: !1 }), tt.current = new MutationObserver((e) => {
-      e.some((r) => r.type === "childList" && r.target === l) && (console.log("MutationObserver: childList changes detected.", e), C(), dt(), l.scrollTop + l.clientHeight >= l.scrollHeight - 20 && Et());
-    }), tt.current.observe(l, { childList: !0, subtree: !1 }), () => {
-      l.removeEventListener("scroll", t), l.removeEventListener("wheel", o), $ && clearTimeout($), tt.current && tt.current.disconnect();
-    };
-  }, [
-    l,
-    W,
-    P,
-    ut,
-    ft,
-    Lt,
-    C,
-    dt,
-    kt,
-    i,
-    S,
-    I,
-    X,
-    Et
-  ]), At(() => {
-    C();
-  }, [qt, C]), Wt(() => {
-    if (!l) return;
-    let t = bt(l);
-    Object.entries(U).forEach(([o, e]) => {
-      if (e?.show && e.type === "shadow") {
-        const r = u.current[o], s = r?.querySelector(".shadow-base"), c = r?.querySelector(".shadow-hover");
-        if (s) {
-          s.dataset.bgColor = t;
-          const n = o === "left" || o === "right" ? "to right" : "to bottom";
-          s.style.background = `linear-gradient(${n}, ${t} 2%, ${x(t, -2, 55)} 50%, ${x(t, -1, 30)} 80%, transparent)`;
-        }
-        if (c) {
-          const n = o === "left" || o === "right" ? "to right" : "to bottom";
-          c.style.height += "60px", c.style.background = `linear-gradient(${n}, ${t} 2%, ${x(t, 10, 20)} 20%, ${x(t, 6, 10)} 70%, transparent)`;
-        }
-      }
-    });
-  }, [l, U, d]), Wt(() => () => {
-    i && clearInterval(i), S && clearTimeout(S), w && clearTimeout(w), $ && clearTimeout($), D.current && clearTimeout(D.current);
-  }, [i, S, w, $]), { state: {
-    scrollableElement: l,
-    indicatorRefs: u.current,
-    scrollTopButtonVisible: Nt,
-    activePosition: at,
-    continuousScrollStarted: it,
-    clickToEndEnabled: T,
-    hoverScrollInterval: i,
-    hoverDebounceTimeout: S,
-    clickToEndTimeout: w,
-    saveScrollTimeout: $,
-    scrollKey: P,
-    hasRestoredScroll: ut,
-    hasRendered: ft,
-    finalIndicators: U,
-    finalScrollbarProps: Xt
-  }, handlers: {
-    subscribeToScrollTarget: Yt,
-    scrollByAmount: H,
-    scrollToEnd: mt,
-    scrollToTop: jt,
-    handleIndicatorClick: Jt,
-    handleIndicatorMouseEnter: X,
-    handleIndicatorMouseLeave: Gt,
-    handleIndicatorMouseDown: Qt,
-    handleIndicatorMouseUp: Zt,
-    handleIndicatorWheel: te,
-    setScrollableRef: ee,
-    updateIndicatorsVisibility: C
-  } };
-}
-export {
-  ue as u
-};