prometeo-design-system 4.3.1 → 4.3.3

package/dist/Scrollable.es.js

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