prometeo-design-system 4.7.7 → 4.7.9

package/dist/Scrollable.es.js

@@ -1,11 +1,11 @@
-import { j as y } from "./jsx-runtime-GkKLlHH4.js";
+import { j as b } from "./jsx-runtime-GkKLlHH4.js";
 import { u as Rt } from "./useDevice-vwn4GLwK.js";
-import { g as vt, r as q } from "./useLabelBackground-D5SzHhl_.js";
-import { c as M } from "./cn-B6yFEsav.js";
-import { c as X } from "./index-BOQuZ0gG.js";
-import yt, { useRef as i, useState as Bt, useCallback as C, useImperativeHandle as $t, useLayoutEffect as Ot, useEffect as Wt } from "react";
-import { CrevronLeft as Tt } from "./Icons/CrevronLeft.es.js";
-const wt = X(
+import { g as G, r as w } from "./useLabelBackground-D5SzHhl_.js";
+import { c as L } from "./cn-B6yFEsav.js";
+import { c as Z } from "./index-BOQuZ0gG.js";
+import Tt, { useRef as f, useState as Ot, useCallback as C, useImperativeHandle as Wt, useLayoutEffect as qt, useEffect as Vt } from "react";
+import { CrevronLeft as xt } from "./Icons/CrevronLeft.es.js";
+const St = Z(
   "",
   {
     variants: {
@@ -16,7 +16,7 @@ const wt = X(
       }
     }
   }
-), xt = X("", {
+), Q = Z("", {
   variants: {
     position: {
       top: "",
@@ -34,12 +34,12 @@ const wt = X(
     { type: "icon", position: "bottom", className: "rotate-270 bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2" },
     { type: "icon", position: "left", className: "top-1/2 -translate-y-1/2 -translate-x-1/2" },
     { type: "icon", position: "right", className: "rotate-180 right-0 top-1/2 -translate-y-1/2 translate-x-1/2" },
-    { type: "shadow", position: "top", className: "top-0 left-0 w-full h-14" },
-    { type: "shadow", position: "bottom", className: "bottom-0 left-0 w-full h-14 rotate-180" },
+    { type: "shadow", position: "top", className: "top-0 left-0 w-full h-10" },
+    { type: "shadow", position: "bottom", className: "bottom-0 left-0 w-full h-10 rotate-180" },
     { 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" }
   ]
-}), Vt = X("", {
+}), Ft = Z("", {
   variants: {
     hide: {
       true: " prometeo-scrollbar-none",
@@ -50,48 +50,53 @@ const wt = X(
       medium: ""
     }
   }
-}), Gt = (Y) => {
-  const { defaultBehavior: A = "scroll-on-click" } = Y, St = Rt(), G = {
-    top: { show: !0, type: "shadow", behavior: A },
-    bottom: { show: !0, type: "shadow", behavior: A },
-    left: { show: !0, type: "icon", behavior: A },
-    right: { show: !0, type: "icon", behavior: A }
-  }, Q = {
+}), Zt = (tt) => {
+  const { defaultBehavior: A = "scroll-on-click" } = tt, Lt = Rt(), B = {
+    top: { show: !0, type: "shadow", behavior: A, hoverDelay: 300 },
+    bottom: { show: !0, type: "shadow", behavior: A, hoverDelay: 300 },
+    left: { show: !0, type: "icon", behavior: A, hoverDelay: 300 },
+    right: { show: !0, type: "icon", behavior: A, hoverDelay: 300 }
+  }, et = {
     hide: !1,
     size: "medium"
   }, {
-    debugMode: Lt = !1,
-    className: Z,
-    axis: v = "both",
-    children: Mt,
-    indicators: Nt = G,
-    scrollbarProps: Et = Q,
-    disableMouseScroll: tt = !1,
+    debugMode: Mt = !1,
+    className: rt,
+    axis: y = "both",
+    children: Nt,
+    indicators: R,
+    scrollbarProps: Et = et,
+    disableMouseScroll: ot = !1,
     persistScroll: j = !1,
     controls: It,
-    scrollTopButton: w,
-    scrollMetadata: R
-  } = Y, c = i({}), n = i(null), u = i(null), N = i(null), a = i(null), f = i(5), d = i({}), D = i(null), g = i(!1), et = i(!1), B = i(null), P = i(null), [kt, Ct] = Bt(!1), H = { ...G, ...Nt }, rt = { ...Q, ...Et }, z = i([]), ot = i(/* @__PURE__ */ new Map()), nt = i({ scrollTop: 0, scrollLeft: 0 }), F = (t) => {
-    if (!n.current) return 0;
-    const { scrollTop: r, scrollLeft: e, scrollHeight: o, clientHeight: s, scrollWidth: l, clientWidth: h } = n.current;
+    scrollTopButton: M,
+    scrollMetadata: O
+  } = tt, a = f({}), l = f(null), h = f(null), E = f(null), u = f(null), d = f(5), i = f({}), H = f(null), g = f(!1), st = f(!1), W = f(null), P = f(null), [$t, Dt] = Ot(!1), I = {
+    top: { ...B.top, ...R?.top },
+    bottom: { ...B.bottom, ...R?.bottom },
+    left: { ...B.left, ...R?.left },
+    right: { ...B.right, ...R?.right }
+  }, nt = { ...et, ...Et }, z = f([]), lt = f(/* @__PURE__ */ new Map()), ct = f({ scrollTop: 0, scrollLeft: 0 }), _ = (t) => {
+    if (!l.current) return 0;
+    const { scrollTop: e, scrollLeft: o, scrollHeight: r, clientHeight: n, scrollWidth: s, clientWidth: c } = l.current;
     switch (t) {
       case "top":
-        return Math.max(0, r);
+        return Math.max(0, e);
       case "bottom":
-        return Math.max(0, o - (r + s));
+        return Math.max(0, r - (e + n));
       case "left":
-        return Math.max(0, e);
+        return Math.max(0, o);
       case "right":
-        return Math.max(0, l - (e + h));
+        return Math.max(0, s - (o + c));
       default:
         return 0;
     }
-  }, st = C((t) => {
-    if (!t || !n.current) return 0;
-    const { clientHeight: r, scrollHeight: e } = n.current;
+  }, at = C((t) => {
+    if (!t || !l.current) return 0;
+    const { clientHeight: e, scrollHeight: o } = l.current;
     if (t.includes("%")) {
-      const o = parseFloat(t.replace("%", "")), s = Math.max(0, e - r);
-      return o / 100 * s;
+      const r = parseFloat(t.replace("%", "")), n = Math.max(0, o - e);
+      return r / 100 * n;
     } else {
       if (t.includes("px"))
         return parseFloat(t.replace("px", ""));
@@ -99,342 +104,375 @@ const wt = X(
         return parseFloat(t.replace("vh", "")) / 100 * window.innerHeight;
     }
     return 0;
-  }, []), lt = C(() => {
-    if (!n.current || !w) return;
-    const { scrollTop: t } = n.current, r = st(w.target || "40vh");
-    Ct(t >= r);
-  }, [w, st]), ct = C(() => {
-    if (!n.current) return { x: 0, y: 0 };
-    const { scrollTop: t, scrollLeft: r, scrollHeight: e, scrollWidth: o, clientHeight: s, clientWidth: l } = n.current, h = Math.max(0, e - s), m = Math.max(0, o - l), T = h > 0 ? t / h * 100 : 0;
-    return { x: m > 0 ? r / m * 100 : 0, y: T };
-  }, []), at = C((t) => {
-    const r = nt.current;
-    let e = null;
-    return t.scrollTop > r.scrollTop ? e = "down" : t.scrollTop < r.scrollTop ? e = "up" : t.scrollLeft > r.scrollLeft ? e = "right" : t.scrollLeft < r.scrollLeft && (e = "left"), nt.current = t, e;
-  }, []), it = C((t) => {
-    if (!n.current) return;
-    const { scrollTop: r, scrollLeft: e, scrollHeight: o, scrollWidth: s, clientHeight: l, clientWidth: h } = n.current, m = at(t), { x: T, y: S } = ct(), L = {
-      percentage: S,
+  }, []), it = C(() => {
+    if (!l.current || !M) return;
+    const { scrollTop: t } = l.current, e = at(M.target || "40vh");
+    Dt(t >= e);
+  }, [M, at]), ut = C(() => {
+    if (!l.current) return { x: 0, y: 0 };
+    const { scrollTop: t, scrollLeft: e, scrollHeight: o, scrollWidth: r, clientHeight: n, clientWidth: s } = l.current, c = Math.max(0, o - n), m = Math.max(0, r - s), T = c > 0 ? t / c * 100 : 0;
+    return { x: m > 0 ? e / m * 100 : 0, y: T };
+  }, []), ft = C((t) => {
+    const e = ct.current;
+    let o = null;
+    return t.scrollTop > e.scrollTop ? o = "down" : t.scrollTop < e.scrollTop ? o = "up" : t.scrollLeft > e.scrollLeft ? o = "right" : t.scrollLeft < e.scrollLeft && (o = "left"), ct.current = t, o;
+  }, []), ht = C((t) => {
+    if (!l.current) return;
+    const { scrollTop: e, scrollLeft: o, scrollHeight: r, scrollWidth: n, clientHeight: s, clientWidth: c } = l.current, m = ft(t), { x: T, y: x } = ut(), S = {
+      percentage: x,
       direction: m,
-      scrollTop: r,
-      scrollLeft: e,
-      scrollHeight: o,
-      scrollWidth: s,
-      clientHeight: l,
-      clientWidth: h,
-      metadata: R
-    }, J = {
+      scrollTop: e,
+      scrollLeft: o,
+      scrollHeight: r,
+      scrollWidth: n,
+      clientHeight: s,
+      clientWidth: c,
+      metadata: O
+    }, X = {
       percentage: T,
       direction: m,
-      scrollTop: r,
-      scrollLeft: e,
-      scrollHeight: o,
-      scrollWidth: s,
-      clientHeight: l,
-      clientWidth: h,
-      metadata: R
+      scrollTop: e,
+      scrollLeft: o,
+      scrollHeight: r,
+      scrollWidth: n,
+      clientHeight: s,
+      clientWidth: c,
+      metadata: O
     };
     z.current.forEach((p) => {
-      const { config: b, triggered: O } = p;
-      if (!b) {
-        (v === "y" || v === "both") && p.callback(L), (v === "x" || v === "both") && p.callback(J);
+      const { config: v, triggered: V } = p;
+      if (!v) {
+        (y === "y" || y === "both") && p.callback(S), (y === "x" || y === "both") && p.callback(X);
         return;
       }
-      const K = (b.direction === "y" || b.direction === "both") && (v === "y" || v === "both"), bt = (b.direction === "x" || b.direction === "both") && (v === "x" || v === "both");
-      if (!K && !bt) return;
-      const E = (K ? L : J).percentage, I = b.target * 100;
+      const Y = (v.direction === "y" || v.direction === "both") && (y === "y" || y === "both"), wt = (v.direction === "x" || v.direction === "both") && (y === "x" || y === "both");
+      if (!Y && !wt) return;
+      const $ = (Y ? S : X).percentage, D = v.target * 100;
       let k = !1;
-      if (b.trip === "forth")
-        k = !O && E >= I, k && (p.triggered = !0), O && E < I && (p.triggered = !1);
-      else if (b.trip === "back")
-        k = O && E < I, k && (p.triggered = !1), !O && E >= I && (p.triggered = !0);
-      else if (b.trip === "round-trip") {
-        const W = E >= I;
-        k = p.triggered !== W;
+      if (v.trip === "forth")
+        k = !V && $ >= D, k && (p.triggered = !0), V && $ < D && (p.triggered = !1);
+      else if (v.trip === "back")
+        k = V && $ < D, k && (p.triggered = !1), !V && $ >= D && (p.triggered = !0);
+      else if (v.trip === "round-trip") {
+        const F = $ >= D;
+        k = p.triggered !== F;
       }
       if (k) {
-        const W = `${z.current.indexOf(p)}-${b?.target || 0}-${b?.direction || "y"}`, V = Date.now(), At = ot.current.get(W) || 0;
-        if (V - At < 500)
+        const F = `${z.current.indexOf(p)}-${v?.target || 0}-${v?.direction || "y"}`, U = Date.now(), Bt = lt.current.get(F) || 0;
+        if (U - Bt < 500)
           return;
-        b.trip === "round-trip" && (p.triggered = E >= I, p.lastDirection = m || void 0), ot.current.set(W, V), p.lastTriggerTime = V, K ? p.callback(L) : bt && p.callback(J);
+        v.trip === "round-trip" && (p.triggered = $ >= D, p.lastDirection = m || void 0), lt.current.set(F, U), p.lastTriggerTime = U, Y ? p.callback(S) : wt && p.callback(X);
       }
     });
-  }, [v, at, ct, R]), ut = C((t, r) => {
-    const e = {
+  }, [y, ft, ut, O]), dt = C((t, e) => {
+    const o = {
       callback: t,
-      config: r,
+      config: e,
       triggered: !1,
       lastDirection: void 0
     };
-    return z.current.push(e), () => {
-      const o = z.current.indexOf(e);
-      o > -1 && z.current.splice(o, 1);
+    return z.current.push(o), () => {
+      const r = z.current.indexOf(o);
+      r > -1 && z.current.splice(r, 1);
     };
   }, []);
-  $t(It, () => ({
-    subscribeToScrollTarget: ut
-  }), [ut]);
-  const $ = (t, r = 100, e = !0) => {
-    if (!n.current) return;
-    const o = F(t), s = Math.min(Math.abs(r), o);
-    if (s === 0) return;
-    const l = t === "top" || t === "left" ? -s : s, h = {
-      top: { top: l, left: 0 },
-      bottom: { top: l, left: 0 },
-      left: { top: 0, left: l },
-      right: { top: 0, left: l }
+  Wt(It, () => ({
+    subscribeToScrollTarget: dt
+  }), [dt]);
+  const q = (t, e = 100, o = !0) => {
+    if (!l.current) return;
+    const r = _(t), n = Math.min(Math.abs(e), r);
+    if (n === 0) return;
+    const s = t === "top" || t === "left" ? -n : n, c = {
+      top: { top: s, left: 0 },
+      bottom: { top: s, left: 0 },
+      left: { top: 0, left: s },
+      right: { top: 0, left: s }
     };
-    n.current.scrollBy({ ...h[t], behavior: e ? "smooth" : "auto" });
-  }, jt = (t) => {
-    if (!n.current) return;
-    const r = n.current, e = {
-      top: { top: 0, left: r.scrollLeft },
-      bottom: { top: r.scrollHeight, left: r.scrollLeft },
-      left: { top: r.scrollTop, left: 0 },
-      right: { top: r.scrollTop, left: r.scrollWidth }
+    l.current.scrollBy({ ...c[t], behavior: o ? "smooth" : "auto" });
+  }, kt = (t) => {
+    if (!l.current) return;
+    const e = l.current, o = {
+      top: { top: 0, left: e.scrollLeft },
+      bottom: { top: e.scrollHeight, left: e.scrollLeft },
+      left: { top: e.scrollTop, left: 0 },
+      right: { top: e.scrollTop, left: e.scrollWidth }
     };
-    r.scrollTo({ ...e[t], behavior: "smooth" });
-  }, Dt = () => {
-    n.current && n.current.scrollTo({ top: 0, behavior: "smooth" });
-  }, Pt = (t, r) => {
-    const e = c.current[t];
-    if (e) {
-      if (e.style.cursor = "pointer", r === "icon") {
-        const o = e.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 (r === "shadow") {
-        const o = e.querySelector("span"), s = vt(n.current);
-        o && (t === "top" || t === "bottom" ? (o.style.height = "110px", o.style.background = `linear-gradient(to bottom, ${s} 5%, ${q(s, -2)} 10%, ${q(s, -5, 30)} 70%, transparent)`, o.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
-          o.style.animation = "";
-        }, 3500)) : (o.style.width = "40px", o.style.animation = "scrollToEndPulseVertical 1.5s ease-out", setTimeout(() => {
-          o.style.animation = "";
-        }, 1500)));
+    e.scrollTo({ ...o[t], behavior: "smooth" });
+  }, Ct = () => {
+    l.current && l.current.scrollTo({ top: 0, behavior: "smooth" });
+  }, jt = (t, e) => {
+    const o = a.current[t];
+    if (o) {
+      if (o.style.cursor = "pointer", e === "icon") {
+        const r = o.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 (e === "shadow") {
+        const r = o.querySelector(".shadow-base"), n = o.querySelector(".shadow-hover"), s = G(l.current);
+        if (n && (n.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, ${s} 5%, ${w(s, -2)} 10%, ${w(s, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
+              r && (r.style.animation = "");
+            }, 3500);
+          else {
+            r.style.width = "40px";
+            const c = t === "left" ? "to right" : "to left";
+            r.style.background = `linear-gradient(${c}, ${s} 5%, ${w(s, -2)} 10%, ${w(s, -5, 30)} 70%, transparent)`, r.style.animation = "scrollToEndPulseVertical 1.5s ease-out", setTimeout(() => {
+              r && (r.style.animation = "");
+            }, 1500);
+          }
       }
     }
-  }, x = (t) => {
-    const r = c.current[t];
-    if (!r) return;
-    r.style.cursor = "";
-    const e = r.querySelector("svg");
-    e && (e.style.transform = "", e.style.backgroundColor = "", e.style.borderRadius = "");
-    const o = r.querySelector("span");
-    o && (o.style.height = "", o.style.width = "");
-  }, ft = (t, r) => {
-    if (r === "scroll-on-click" && g.current) {
+  }, N = (t, e) => {
+    const o = a.current[t];
+    if (!o) return;
+    o.style.cursor = "";
+    const r = o.querySelector("svg");
+    r && (r.style.transform = "", r.style.backgroundColor = "", r.style.borderRadius = "");
+    const n = o.querySelector(".shadow-base");
+    if (n && (n.style.height = "", n.style.width = "", e === "shadow")) {
+      const s = G(l.current), c = t === "left" || t === "right" ? "to right" : "to bottom";
+      n.style.background = `linear-gradient(${c}, ${s} 5%, ${w(s, 0)} 10%, ${w(s, -2, 30)} 70%, transparent)`;
+    }
+  }, Ht = (t, e) => {
+    if (e !== "shadow" || i.current[t]) return;
+    const o = a.current[t];
+    if (!o) return;
+    const r = o.querySelector(".shadow-hover");
+    r && (r.style.opacity = "1");
+  }, Pt = (t, e) => {
+    if (e !== "shadow" || i.current[t]) return;
+    const o = a.current[t];
+    if (!o) return;
+    const r = o.querySelector(".shadow-hover");
+    r && (r.style.opacity = "0");
+  }, pt = (t, e, o) => {
+    if (e === "scroll-on-click" && g.current) {
       g.current = !1;
       return;
     }
-    if (d.current[t]) {
-      a.current && (clearTimeout(a.current), a.current = null), u.current && (clearInterval(u.current), u.current = null), x(t), d.current[t] = !1, jt(t);
+    if (i.current[t]) {
+      u.current && (clearTimeout(u.current), u.current = null), h.current && (clearInterval(h.current), h.current = null), N(t, o), i.current[t] = !1, kt(t);
       return;
     }
-    if (r === "scroll-on-click") {
-      if (!n.current) return;
-      const { clientHeight: e, clientWidth: o } = n.current, s = t === "top" || t === "bottom" ? e * 0.8 : o * 0.8;
-      $(t, s);
+    if (e === "scroll-on-click") {
+      if (!l.current) return;
+      const { clientHeight: r, clientWidth: n } = l.current, s = t === "top" || t === "bottom" ? r * 0.8 : n * 0.8;
+      q(t, s);
     }
-  }, dt = (t, r) => {
-    a.current && (clearTimeout(a.current), a.current = null), g.current = !0, f.current = 3;
-    let e = 0;
-    D.current = t, d.current[t] = !1, $(t, f.current, !1), u.current = setInterval(() => {
-      e += 16;
-      const o = e / 1e3;
-      if (F(t) === 0) {
-        U(t);
+  }, gt = (t, e) => {
+    u.current && (clearTimeout(u.current), u.current = null), g.current = !0, d.current = 3;
+    let o = 0;
+    H.current = t, i.current[t] = !1, q(t, d.current, !1), h.current = setInterval(() => {
+      o += 16;
+      const r = o / 1e3;
+      if (_(t) === 0) {
+        J(t, !1, e);
         return;
       }
-      if (o >= 2 && !d.current[t] && (d.current[t] = !0, Pt(t, r)), o <= 2)
-        f.current = 5 + o * 0.4;
+      if (r >= 2 && !i.current[t] && (i.current[t] = !0, jt(t, e)), r <= 2)
+        d.current = 5 + r * 0.4;
       else {
-        const l = o - 2;
-        f.current += Math.pow(l, 1.1) * 2;
+        const s = r - 2;
+        d.current += Math.pow(s, 1.1) * 2;
       }
-      f.current = Math.min(f.current, 100), $(t, f.current, !1);
+      d.current = Math.min(d.current, 100), q(t, d.current, !1);
     }, 16);
-  }, U = (t, r = !1) => {
-    N.current && (clearTimeout(N.current), N.current = null);
-    const e = t || D.current;
-    if (!r && e && u.current) {
-      let o = 0;
-      const s = f.current, l = 800, h = setInterval(() => {
-        o += 16;
-        const m = o / l, T = 1 - Math.pow(1 - m, 3);
-        if (f.current = s * (1 - T), F(e) === 0 || f.current <= 0.5) {
-          clearInterval(h), u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-            x(e), d.current[e] = !1, g.current = !1;
-          }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
+  }, J = (t, e = !1, o) => {
+    E.current && (clearTimeout(E.current), E.current = null);
+    const r = t || H.current;
+    if (!e && r && h.current) {
+      let n = 0;
+      const s = d.current, c = 800, m = setInterval(() => {
+        n += 16;
+        const T = n / c, x = 1 - Math.pow(1 - T, 3);
+        if (d.current = s * (1 - x), _(r) === 0 || d.current <= 0.5) {
+          clearInterval(m), h.current && (clearInterval(h.current), h.current = null), d.current = 5, r ? i.current[r] ? (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+            N(r, o), i.current[r] = !1, g.current = !1;
+          }, 1e3)) : (N(r, o), i.current[r] = !1, g.current = !1) : g.current = !1, H.current = null;
           return;
         }
-        $(e, f.current, !1);
+        q(r, d.current, !1);
       }, 16);
-      N.current = setTimeout(() => {
-        clearInterval(h), u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-          x(e), d.current[e] = !1, g.current = !1;
-        }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
-      }, l);
+      E.current = setTimeout(() => {
+        clearInterval(m), h.current && (clearInterval(h.current), h.current = null), d.current = 5, r ? i.current[r] ? (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+          N(r, o), i.current[r] = !1, g.current = !1;
+        }, 1e3)) : (N(r, o), i.current[r] = !1, g.current = !1) : g.current = !1, H.current = null;
+      }, c);
     } else
-      u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
-        x(e), d.current[e] = !1, g.current = !1;
-      }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
-  }, ht = (t, r, e) => {
-    St || r === "scroll-on-hover" && (N.current = setTimeout(() => {
-      dt(t, e);
-    }, 200));
-  }, pt = (t, r) => {
-    r === "scroll-on-hover" && U(t, !0);
-  }, gt = (t, r, e) => {
-    r === "scroll-on-click" && (g.current = !1, N.current = setTimeout(() => {
-      dt(t, e);
+      h.current && (clearInterval(h.current), h.current = null), d.current = 5, r ? i.current[r] ? (u.current && clearTimeout(u.current), u.current = setTimeout(() => {
+        N(r, o), i.current[r] = !1, g.current = !1;
+      }, 1e3)) : (N(r, o), i.current[r] = !1, g.current = !1) : g.current = !1, H.current = null;
+  }, mt = (t, e, o) => {
+    if (!Lt && (Ht(t, o), e === "scroll-on-hover")) {
+      const r = I[t]?.hoverDelay ?? 800;
+      E.current = setTimeout(() => {
+        gt(t, o);
+      }, r);
+    }
+  }, vt = (t, e, o) => {
+    Pt(t, o), e === "scroll-on-hover" && J(t, !0, o);
+  }, bt = (t, e, o) => {
+    e === "scroll-on-click" && (g.current = !1, E.current = setTimeout(() => {
+      gt(t, o);
     }, 200));
-  }, mt = (t, r) => {
-    r === "scroll-on-click" && U(t, !1);
-  }, _ = () => {
-    if (!n.current) return;
-    const t = n.current, { scrollTop: r, scrollLeft: e, scrollHeight: o, scrollWidth: s, clientHeight: l, clientWidth: h } = t, m = r <= 10, T = r + l >= o - 10, S = e <= 10, L = e + h >= s - 10;
-    c.current.top?.classList.toggle("opacity-0", m), c.current.top?.classList.toggle("pointer-events-none", m), c.current.top?.classList.toggle("pointer-events-auto", !m), c.current.bottom?.classList.toggle("opacity-0", T), c.current.bottom?.classList.toggle("pointer-events-none", T), c.current.bottom?.classList.toggle("pointer-events-auto", !T), c.current.left?.classList.toggle("opacity-0", S), c.current.left?.classList.toggle("pointer-events-none", S), c.current.left?.classList.toggle("pointer-events-auto", !S), c.current.right?.classList.toggle("opacity-0", L), c.current.right?.classList.toggle("pointer-events-none", L), c.current.right?.classList.toggle("pointer-events-auto", !L);
+  }, yt = (t, e, o) => {
+    e === "scroll-on-click" && J(t, !1, o);
+  }, K = () => {
+    if (!l.current) return;
+    const t = l.current, { scrollTop: e, scrollLeft: o, scrollHeight: r, scrollWidth: n, clientHeight: s, clientWidth: c } = t, m = e <= 10, T = e + s >= r - 10, x = o <= 10, S = o + c >= n - 10;
+    a.current.top?.classList.toggle("opacity-0", m), a.current.top?.classList.toggle("pointer-events-none", m), a.current.top?.classList.toggle("pointer-events-auto", !m), a.current.bottom?.classList.toggle("opacity-0", T), a.current.bottom?.classList.toggle("pointer-events-none", T), a.current.bottom?.classList.toggle("pointer-events-auto", !T), a.current.left?.classList.toggle("opacity-0", x), a.current.left?.classList.toggle("pointer-events-none", x), a.current.left?.classList.toggle("pointer-events-auto", !x), a.current.right?.classList.toggle("opacity-0", S), a.current.right?.classList.toggle("pointer-events-none", S), a.current.right?.classList.toggle("pointer-events-auto", !S);
   };
-  Ot(() => {
-    if (!n.current) return;
-    const t = n.current;
+  qt(() => {
+    if (!l.current) return;
+    const t = l.current;
     if (j) {
-      B.current = typeof j == "string" ? `scrollable-${j}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
+      W.current = typeof j == "string" ? `scrollable-${j}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
       try {
-        const o = sessionStorage.getItem(B.current);
-        if (o) {
-          const { scrollTop: s, scrollLeft: l } = JSON.parse(o);
-          t.scrollTop = s, t.scrollLeft = l;
+        const r = sessionStorage.getItem(W.current);
+        if (r) {
+          const { scrollTop: n, scrollLeft: s } = JSON.parse(r);
+          t.scrollTop = n, t.scrollLeft = s;
         }
       } catch {
       }
     }
-    _(), et.current || (et.current = !0, requestAnimationFrame(() => {
-      Object.values(c.current).forEach((o) => {
-        o?.classList.add("transition-all", "duration-300");
+    K(), st.current || (st.current = !0, requestAnimationFrame(() => {
+      Object.values(a.current).forEach((r) => {
+        r?.classList.add("transition-all", "duration-300");
       }), setTimeout(() => {
-        _();
+        K();
       }, 0);
     }));
-    const r = () => {
-      if (_(), lt(), n.current) {
-        const o = {
-          scrollTop: n.current.scrollTop,
-          scrollLeft: n.current.scrollLeft
+    const e = () => {
+      if (K(), it(), l.current) {
+        const r = {
+          scrollTop: l.current.scrollTop,
+          scrollLeft: l.current.scrollLeft
         };
-        it(o);
+        ht(r);
       }
-      j && B.current && (P.current && clearTimeout(P.current), P.current = setTimeout(() => {
+      j && W.current && (P.current && clearTimeout(P.current), P.current = setTimeout(() => {
         try {
-          const o = {
+          const r = {
             scrollTop: t.scrollTop,
             scrollLeft: t.scrollLeft
           };
-          sessionStorage.setItem(B.current, JSON.stringify(o));
+          sessionStorage.setItem(W.current, JSON.stringify(r));
         } catch {
         }
       }, 150));
     };
-    t.addEventListener("scroll", r);
-    const e = (o) => {
-      tt && o.preventDefault();
+    t.addEventListener("scroll", e);
+    const o = (r) => {
+      ot && r.preventDefault();
     };
-    return t.addEventListener("wheel", e, { passive: !1 }), () => {
-      t.removeEventListener("scroll", r), t.removeEventListener("wheel", e), P.current && clearTimeout(P.current);
+    return t.addEventListener("wheel", o, { passive: !1 }), () => {
+      t.removeEventListener("scroll", e), t.removeEventListener("wheel", o), P.current && clearTimeout(P.current);
     };
-  }, [tt, j, R, lt, it]), Wt(() => {
-    if (!n.current) return;
-    let t = vt(n.current);
-    Object.entries(H).forEach(([r, e]) => {
-      if (e?.show && e.type === "shadow") {
-        const s = c.current[r]?.querySelector("span");
+  }, [ot, j, O, it, ht]), Vt(() => {
+    if (!l.current) return;
+    let t = G(l.current);
+    Object.entries(I).forEach(([e, o]) => {
+      if (o?.show && o.type === "shadow") {
+        const r = a.current[e], n = r?.querySelector(".shadow-base"), s = r?.querySelector(".shadow-hover");
+        if (n) {
+          n.dataset.bgColor = t;
+          const c = e === "left" || e === "right" ? "to right" : "to bottom";
+          n.style.background = `linear-gradient(${c}, ${t} 2%, ${w(t, -2, 55)} 50%, ${w(t, -1, 30)} 80%, transparent)`;
+        }
         if (s) {
-          s.dataset.bgColor = t;
-          const l = r === "left" || r === "right" ? "to right" : "to bottom";
-          s.style.background = `linear-gradient(${l}, ${t} 5%, ${q(t, 0)} 10%, ${q(t, -2, 30)} 70%, transparent)`;
+          const c = e === "left" || e === "right" ? "to right" : "to bottom";
+          s.style.height += "60px", s.style.background = `linear-gradient(${c}, ${t} 2%, ${w(t, 10, 20)} 20%, ${w(t, 6, 10)} 70%, transparent)`;
         }
       }
     });
-  }, [H]);
-  const Ht = yt.Children.toArray(Mt), zt = Object.values(H).some((t) => t?.show && t?.type === "icon");
-  return /* @__PURE__ */ y.jsxs("div", { className: M("relative p-0", Z, wt({ axis: v }), "scrolleable", zt ? "overflow-visible" : "overflow-hidden!"), children: [
-    /* @__PURE__ */ y.jsx(
+  }, [I]);
+  const zt = Tt.Children.toArray(Nt), At = Object.values(I).some((t) => t?.show && t?.type === "icon");
+  return /* @__PURE__ */ b.jsxs("div", { className: L("relative p-0", rt, St({ axis: y }), "scrolleable", At ? "overflow-visible" : "overflow-hidden!"), children: [
+    /* @__PURE__ */ b.jsx(
       "div",
       {
-        ref: n,
-        className: M(
-          Lt && "border border-red-900 border-dashed",
-          Z,
+        ref: l,
+        className: L(
+          Mt && "border border-red-900 border-dashed",
+          rt,
           "py-2  relative w-full h-full min-h-full",
-          wt({ axis: v }),
-          Vt({ hide: rt?.hide, size: rt?.size }),
+          St({ axis: y }),
+          Ft({ hide: nt?.hide, size: nt?.size }),
           ""
         ),
-        children: Ht?.map((t) => yt.cloneElement(t, { className: M(t?.props?.className, "shrink-0! pointer-events-auto") }))
+        children: zt?.map((t) => Tt.cloneElement(t, { className: L(t?.props?.className, "shrink-0! pointer-events-auto") }))
       }
     ),
-    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(H).map(([t, r]) => {
-      if (!r?.show || r.type !== "shadow") return null;
-      const e = t;
-      return /* @__PURE__ */ y.jsx(
+    /* @__PURE__ */ b.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(I).map(([t, e]) => {
+      if (!e?.show || e.type !== "shadow") return null;
+      const o = t;
+      return /* @__PURE__ */ b.jsxs(
         "span",
         {
-          ref: (o) => {
-            c.current[t] = o;
+          ref: (r) => {
+            a.current[t] = r;
           },
-          className: M(
-            "cursor-default ease-in-out z-100",
+          className: L(
+            e.behavior === "scroll-on-click" ? "cursor-pointer" : "cursor-default",
+            "ease-in-out z-100",
             "opacity-0 pointer-events-none"
           ),
-          onClick: () => ft(e, r.behavior),
-          onMouseEnter: () => ht(e, r.behavior, r.type),
-          onMouseLeave: () => pt(e, r.behavior),
-          onMouseDown: () => gt(e, r.behavior, r.type),
-          onMouseUp: () => mt(e, r.behavior),
-          children: /* @__PURE__ */ y.jsx("span", { className: M(xt({ position: e, type: "shadow" }), r.className) })
+          onClick: () => pt(o, e.behavior, e.type),
+          onMouseEnter: () => mt(o, e.behavior, e.type),
+          onMouseLeave: () => vt(o, e.behavior, e.type),
+          onMouseDown: () => bt(o, e.behavior, e.type),
+          onMouseUp: () => yt(o, e.behavior, e.type),
+          children: [
+            /* @__PURE__ */ b.jsx("span", { className: L(Q({ position: o, type: "shadow" }), "shadow-base", e.className) }),
+            /* @__PURE__ */ b.jsx("span", { className: L(Q({ position: o, type: "shadow" }), "shadow-hover opacity-0 transition-opacity duration-300", e.className) })
+          ]
         },
         t
       );
     }) }),
-    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(H).map(([t, r]) => {
-      if (!r?.show || r.type !== "icon") return null;
-      const e = t;
-      return /* @__PURE__ */ y.jsx(
+    /* @__PURE__ */ b.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(I).map(([t, e]) => {
+      if (!e?.show || e.type !== "icon") return null;
+      const o = t;
+      return /* @__PURE__ */ b.jsx(
         "span",
         {
-          ref: (o) => {
-            c.current[t] = o;
+          ref: (r) => {
+            a.current[t] = r;
           },
           className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
-          onClick: () => ft(e, r.behavior),
-          onMouseEnter: () => ht(e, r.behavior, r.type),
-          onMouseLeave: () => pt(e, r.behavior),
-          onMouseDown: () => gt(e, r.behavior, r.type),
-          onMouseUp: () => mt(e, r.behavior),
-          children: /* @__PURE__ */ y.jsx(Tt, { size: 20, className: M(xt({ position: e, type: "icon" }), r.className) })
+          onClick: () => pt(o, e.behavior, e.type),
+          onMouseEnter: () => mt(o, e.behavior, e.type),
+          onMouseLeave: () => vt(o, e.behavior, e.type),
+          onMouseDown: () => bt(o, e.behavior, e.type),
+          onMouseUp: () => yt(o, e.behavior, e.type),
+          children: /* @__PURE__ */ b.jsx(xt, { size: 20, className: L(Q({ position: o, type: "icon" }), e.className) })
         },
         t
       );
     }) }),
-    w && /* @__PURE__ */ y.jsx(
+    M && /* @__PURE__ */ b.jsx(
       "button",
       {
-        onClick: Dt,
-        className: M(
+        onClick: Ct,
+        className: L(
           "absolute bottom-6 right-6 z-50 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 pointer-events-auto cursor-pointer",
           "bg-primary-default-default hover:bg-primary-default-hover text-white",
           // Transiciones de aparición/desaparición
           "transform translate-y-0 opacity-70",
-          !kt && "translate-y-4 opacity-0 pointer-events-none",
-          w.className
+          !$t && "translate-y-4 opacity-0 pointer-events-none",
+          M.className
         ),
         "aria-label": "Scroll to top",
         style: {
           transition: "all 0.3s ease-in-out"
         },
-        children: w.icon ? /* @__PURE__ */ y.jsx(w.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ y.jsx(Tt, { size: 20, className: "text-white rotate-90" })
+        children: M.icon ? /* @__PURE__ */ b.jsx(M.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ b.jsx(xt, { size: 20, className: "text-white rotate-90" })
       }
     )
   ] });
 };
 export {
-  Gt as Scrollable
+  Zt as Scrollable
 };