prometeo-design-system 4.8.0 → 4.8.1

package/dist/Scrollable.es.js

@@ -3,9 +3,9 @@ import { u as Rt } from "./useDevice-vwn4GLwK.js";
 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(
+import xt, { useRef as f, useState as Ot, useCallback as C, useImperativeHandle as Wt, useLayoutEffect as qt, useEffect as Vt } from "react";
+import { CrevronLeft as St } from "./Icons/CrevronLeft.es.js";
+const Lt = Z(
   "",
   {
     variants: {
@@ -51,32 +51,32 @@ const St = Z(
     }
   }
 }), Zt = (tt) => {
-  const { defaultBehavior: A = "scroll-on-click" } = tt, Lt = Rt(), B = {
+  const { defaultBehavior: A = "scroll-on-click" } = tt, Mt = 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"
+    size: "small"
   }, {
-    debugMode: Mt = !1,
+    debugMode: Nt = !1,
     className: rt,
     axis: y = "both",
-    children: Nt,
+    children: ot,
     indicators: R,
     scrollbarProps: Et = et,
-    disableMouseScroll: ot = !1,
+    disableMouseScroll: st = !1,
     persistScroll: j = !1,
     controls: It,
     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 = {
+  } = 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), nt = 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) => {
+  }, lt = { ...et, ...Et }, z = f([]), ct = f(/* @__PURE__ */ new Map()), at = 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) {
@@ -91,7 +91,7 @@ const St = Z(
       default:
         return 0;
     }
-  }, at = C((t) => {
+  }, it = C((t) => {
     if (!t || !l.current) return 0;
     const { clientHeight: e, scrollHeight: o } = l.current;
     if (t.includes("%")) {
@@ -104,21 +104,21 @@ const St = Z(
         return parseFloat(t.replace("vh", "")) / 100 * window.innerHeight;
     }
     return 0;
-  }, []), it = C(() => {
+  }, []), ut = C(() => {
     if (!l.current || !M) return;
-    const { scrollTop: t } = l.current, e = at(M.target || "40vh");
+    const { scrollTop: t } = l.current, e = it(M.target || "40vh");
     Dt(t >= e);
-  }, [M, at]), ut = C(() => {
+  }, [M, it]), ft = 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) => {
+    const e = at.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"), at.current = t, o;
+  }, []), dt = 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 = {
+    const { scrollTop: e, scrollLeft: o, scrollHeight: r, scrollWidth: n, clientHeight: s, clientWidth: c } = l.current, m = ht(t), { x: T, y: x } = ft(), S = {
       percentage: x,
       direction: m,
       scrollTop: e,
@@ -145,8 +145,8 @@ const St = Z(
         (y === "y" || y === "both") && p.callback(S), (y === "x" || y === "both") && p.callback(X);
         return;
       }
-      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 = (v.direction === "y" || v.direction === "both") && (y === "y" || y === "both"), Tt = (v.direction === "x" || v.direction === "both") && (y === "x" || y === "both");
+      if (!Y && !Tt) return;
       const $ = (Y ? S : X).percentage, D = v.target * 100;
       let k = !1;
       if (v.trip === "forth")
@@ -158,13 +158,13 @@ const St = Z(
         k = p.triggered !== F;
       }
       if (k) {
-        const F = `${z.current.indexOf(p)}-${v?.target || 0}-${v?.direction || "y"}`, U = Date.now(), Bt = lt.current.get(F) || 0;
+        const F = `${z.current.indexOf(p)}-${v?.target || 0}-${v?.direction || "y"}`, U = Date.now(), Bt = ct.current.get(F) || 0;
         if (U - Bt < 500)
           return;
-        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.trip === "round-trip" && (p.triggered = $ >= D, p.lastDirection = m || void 0), ct.current.set(F, U), p.lastTriggerTime = U, Y ? p.callback(S) : Tt && p.callback(X);
       }
     });
-  }, [y, ft, ut, O]), dt = C((t, e) => {
+  }, [y, ht, ft, O]), pt = C((t, e) => {
     const o = {
       callback: t,
       config: e,
@@ -177,8 +177,8 @@ const St = Z(
     };
   }, []);
   Wt(It, () => ({
-    subscribeToScrollTarget: dt
-  }), [dt]);
+    subscribeToScrollTarget: pt
+  }), [pt]);
   const q = (t, e = 100, o = !0) => {
     if (!l.current) return;
     const r = _(t), n = Math.min(Math.abs(e), r);
@@ -246,7 +246,7 @@ const St = Z(
     if (!o) return;
     const r = o.querySelector(".shadow-hover");
     r && (r.style.opacity = "0");
-  }, pt = (t, e, o) => {
+  }, gt = (t, e, o) => {
     if (e === "scroll-on-click" && g.current) {
       g.current = !1;
       return;
@@ -260,7 +260,7 @@ const St = Z(
       const { clientHeight: r, clientWidth: n } = l.current, s = t === "top" || t === "bottom" ? r * 0.8 : n * 0.8;
       q(t, s);
     }
-  }, gt = (t, e) => {
+  }, mt = (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(() => {
@@ -303,20 +303,20 @@ const St = Z(
       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")) {
+  }, vt = (t, e, o) => {
+    if (!Mt && (Ht(t, o), e === "scroll-on-hover")) {
       const r = I[t]?.hoverDelay ?? 800;
       E.current = setTimeout(() => {
-        gt(t, o);
+        mt(t, o);
       }, r);
     }
-  }, vt = (t, e, o) => {
-    Pt(t, o), e === "scroll-on-hover" && J(t, !0, o);
   }, bt = (t, e, o) => {
+    Pt(t, o), e === "scroll-on-hover" && J(t, !0, o);
+  }, yt = (t, e, o) => {
     e === "scroll-on-click" && (g.current = !1, E.current = setTimeout(() => {
-      gt(t, o);
+      mt(t, o);
     }, 200));
-  }, yt = (t, e, o) => {
+  }, wt = (t, e, o) => {
     e === "scroll-on-click" && J(t, !1, o);
   }, K = () => {
     if (!l.current) return;
@@ -337,7 +337,7 @@ const St = Z(
       } catch {
       }
     }
-    K(), st.current || (st.current = !0, requestAnimationFrame(() => {
+    K(), nt.current || (nt.current = !0, requestAnimationFrame(() => {
       Object.values(a.current).forEach((r) => {
         r?.classList.add("transition-all", "duration-300");
       }), setTimeout(() => {
@@ -345,12 +345,12 @@ const St = Z(
       }, 0);
     }));
     const e = () => {
-      if (K(), it(), l.current) {
+      if (K(), ut(), l.current) {
         const r = {
           scrollTop: l.current.scrollTop,
           scrollLeft: l.current.scrollLeft
         };
-        ht(r);
+        dt(r);
       }
       j && W.current && (P.current && clearTimeout(P.current), P.current = setTimeout(() => {
         try {
@@ -365,12 +365,12 @@ const St = Z(
     };
     t.addEventListener("scroll", e);
     const o = (r) => {
-      ot && r.preventDefault();
+      st && r.preventDefault();
     };
     return t.addEventListener("wheel", o, { passive: !1 }), () => {
       t.removeEventListener("scroll", e), t.removeEventListener("wheel", o), P.current && clearTimeout(P.current);
     };
-  }, [ot, j, O, it, ht]), Vt(() => {
+  }, [st, j, O, ut, dt, ot]), Vt(() => {
     if (!l.current) return;
     let t = G(l.current);
     Object.entries(I).forEach(([e, o]) => {
@@ -388,21 +388,21 @@ const St = Z(
       }
     });
   }, [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: [
+  const zt = xt.Children.toArray(ot), At = Object.values(I).some((t) => t?.show && t?.type === "icon");
+  return /* @__PURE__ */ b.jsxs("div", { className: L("relative p-0", rt, Lt({ axis: y }), "scrolleable", At ? "overflow-visible" : "overflow-hidden!"), children: [
     /* @__PURE__ */ b.jsx(
       "div",
       {
         ref: l,
         className: L(
-          Mt && "border border-red-900 border-dashed",
+          Nt && "border border-red-900 border-dashed",
           rt,
           "py-2  relative w-full h-full min-h-full",
-          St({ axis: y }),
-          Ft({ hide: nt?.hide, size: nt?.size }),
+          Lt({ axis: y }),
+          Ft({ hide: lt?.hide, size: lt?.size }),
           ""
         ),
-        children: zt?.map((t) => Tt.cloneElement(t, { className: L(t?.props?.className, "shrink-0! pointer-events-auto") }))
+        children: zt?.map((t) => xt.cloneElement(t, { className: L(t?.props?.className, "shrink-0! pointer-events-auto") }))
       }
     ),
     /* @__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]) => {
@@ -419,11 +419,11 @@ const St = Z(
             "ease-in-out z-100",
             "opacity-0 pointer-events-none"
           ),
-          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),
+          onClick: () => gt(o, e.behavior, e.type),
+          onMouseEnter: () => vt(o, e.behavior, e.type),
+          onMouseLeave: () => bt(o, e.behavior, e.type),
+          onMouseDown: () => yt(o, e.behavior, e.type),
+          onMouseUp: () => wt(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) })
@@ -442,12 +442,12 @@ const St = Z(
             a.current[t] = r;
           },
           className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
-          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) })
+          onClick: () => gt(o, e.behavior, e.type),
+          onMouseEnter: () => vt(o, e.behavior, e.type),
+          onMouseLeave: () => bt(o, e.behavior, e.type),
+          onMouseDown: () => yt(o, e.behavior, e.type),
+          onMouseUp: () => wt(o, e.behavior, e.type),
+          children: /* @__PURE__ */ b.jsx(St, { size: 20, className: L(Q({ position: o, type: "icon" }), e.className) })
         },
         t
       );
@@ -468,7 +468,7 @@ const St = Z(
         style: {
           transition: "all 0.3s ease-in-out"
         },
-        children: M.icon ? /* @__PURE__ */ b.jsx(M.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ b.jsx(xt, { size: 20, className: "text-white rotate-90" })
+        children: M.icon ? /* @__PURE__ */ b.jsx(M.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ b.jsx(St, { size: 20, className: "text-white rotate-90" })
       }
     )
   ] });

package/package.json

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