prometeo-design-system 5.7.1 → 5.7.2

package/dist/DrawerMobile.es.js

@@ -1,86 +1,86 @@
-import { j as v } from "./jsx-runtime-GkKLlHH4.js";
-import { c as O } from "./cn-B6yFEsav.js";
-import { forwardRef as le, useState as z, useRef as m, useEffect as D, useCallback as l, useMemo as oe, useImperativeHandle as ue } from "react";
-import { createPortal as ae } from "react-dom";
-const U = 44, de = "height 0.5s cubic-bezier(0.32, 0.72, 0, 1)", be = le((a, i) => {
-  const { children: M, defaultOpen: S = !1, onClose: R, snapPoints: o = ["auto"], setSnap: d, snap: u, attachToParent: L = !1 } = a, [f, b] = z(u || "0%"), [F, C] = z(null), I = m(R), H = m(d), r = m(F), w = m(/* @__PURE__ */ new Set());
-  I.current = R, r.current = F, D(() => {
-    S && N();
-  }, [S]), D(() => {
+import { j as w } from "./jsx-runtime-GkKLlHH4.js";
+import { c as z } from "./cn-B6yFEsav.js";
+import ce, { forwardRef as de, useState as A, useRef as h, useEffect as x, useCallback as i, useMemo as le, useImperativeHandle as ge } from "react";
+import { createPortal as he } from "react-dom";
+const X = 44, me = "height 0.5s cubic-bezier(0.32, 0.72, 0, 1)", ye = de((f, l) => {
+  const { children: R, defaultOpen: L = !1, onClose: j, snapPoints: o = ["auto"], setSnap: d, snap: a, attachToParent: F = !1 } = f, [m, u] = A(a || "0%"), [N, C] = A(null), D = h(j), H = h(d), r = h(N), b = h(/* @__PURE__ */ new Set());
+  D.current = j, r.current = N, x(() => {
+    L && E();
+  }, [L]), x(() => {
     H.current = d;
   }, [d]);
-  const j = l(() => {
-    b("0%"), I.current?.(r.current), setTimeout(() => C(null), 300);
-  }, []), N = l((p, k) => {
-    b(p || o[0] || "60%"), C(k ?? null);
-  }, [o]), x = oe(() => f !== "0%", [f]);
-  D(() => {
-    w.current.forEach((p) => {
+  const T = i(() => {
+    u("0%"), D.current?.(r.current), setTimeout(() => C(null), 300);
+  }, []), E = i((p, O) => {
+    u(p || o[0] || "60%"), C(O ?? null);
+  }, [o]), M = le(() => m !== "0%", [m]);
+  x(() => {
+    b.current.forEach((p) => {
       try {
-        p(x);
+        p(M);
       } catch {
       }
     });
-  }, [x]), ue(i, () => ({
-    open: N,
-    close: j,
-    isOpen: x,
-    subscribeOpenChange: (p) => (w.current.add(p), () => {
-      w.current.delete(p);
+  }, [M]), ge(l, () => ({
+    open: E,
+    close: T,
+    isOpen: M,
+    subscribeOpenChange: (p) => (b.current.add(p), () => {
+      b.current.delete(p);
     }),
     getContext: () => r.current
-  }), [N, j, x]);
-  const g = u || f;
-  return L ? /* @__PURE__ */ v.jsx(re, { ...a, snap: g, setSnap: b, context: F, children: M }) : ae(/* @__PURE__ */ v.jsx(re, { ...a, snap: g, setSnap: b, context: F, children: M }), document.body);
-}), re = ({ children: a, attachToParent: i = !1, className: M, classNameContent: S, classNameFooter: R, snap: o, snapPoints: d = [0, "auto", 1], setSnap: u, hideOnClose: L = !1, unmountChildrenOnClose: f = !1, header: b, modal: F = !1, closeOnOverlayClick: C = !1, context: I, footer: H }) => {
-  const r = m(null), w = m(null), j = m(null), N = m(null), x = m(0), g = m(null), T = m(null), p = l(() => {
+  }), [E, T, M]);
+  const $ = a || m;
+  return F ? /* @__PURE__ */ w.jsx(ie, { ...f, snap: $, setSnap: u, context: N, children: R }) : he(/* @__PURE__ */ w.jsx(ie, { ...f, snap: $, setSnap: u, context: N, children: R }), document.body);
+}), ie = ({ children: f, attachToParent: l = !1, className: R, classNameContent: L, classNameFooter: j, snap: o, snapPoints: d = [0, "auto", 1], setSnap: a, hideOnClose: F = !1, unmountChildrenOnClose: m = !1, header: u, modal: N = !1, closeOnOverlayClick: C = !1, context: D, footer: H }) => {
+  const r = h(null), b = h(null), T = h(null), E = h(null), M = h(null), $ = h(0), y = h(null), p = h(null), O = i(() => {
     if (!r.current) return [];
-    const e = i && r.current.parentElement?.offsetHeight || window.innerHeight;
+    const e = l && r.current.parentElement?.offsetHeight || window.innerHeight;
     return d?.map((t) => {
       if (t === "auto") {
-        const n = x.current, h = k(), c = V(), s = G(e, n, h, c);
-        return parseFloat(s) / 100 * e;
+        const n = $.current, g = G(), c = Z(), s = P(), v = _(e, n, g, c, s);
+        return parseFloat(v) / 100 * e;
       }
       return typeof t == "string" && t.endsWith("%") ? parseFloat(t) > 100 ? e : parseFloat(t) / 100 * e : typeof t == "string" && t.endsWith("px") ? parseFloat(t) : typeof t == "number" && t >= 0 && t <= 1 ? t * e : typeof t == "number" ? t : 0;
     }) || [];
-  }, [d, i]), k = l(() => (b ? 88 : 44) + 16, [b]), A = l(() => w.current?.scrollHeight ?? 0, []), V = l(() => j.current?.scrollHeight ?? 0, []), G = l((e, t, n, h) => {
-    const c = n + t + h, s = Math.min(100, c / e * 100);
-    return `${Math.round(s)}%`;
-  }, []), X = l((e, t) => {
-    const n = p();
+  }, [d, l]), G = i(() => 46, []), W = i(() => b.current?.scrollHeight ?? 0, []), Z = i(() => T.current?.scrollHeight ?? 0, []), P = i(() => E.current?.scrollHeight ?? 0, []), _ = i((e, t, n, g, c) => {
+    const s = n + c + t + g, v = Math.min(100, s / e * 100);
+    return `${Math.round(v)}%`;
+  }, []), ee = i((e, t) => {
+    const n = O();
     if (n.length === 0) return e;
     if (Math.abs(t) > 0.05)
       if (t > 0) {
         const c = n.filter((s) => s < e);
-        return c.length > 0 ? Math.max(...c) : L ? 0 : U;
+        return c.length > 0 ? Math.max(...c) : F ? 0 : X;
       } else {
         const c = n.filter((s) => s > e);
         if (c.length > 0)
           return Math.min(...c);
       }
     return n.reduce((c, s) => Math.abs(s - e) < Math.abs(c - e) ? s : c);
-  }, [p]), Z = l((e) => {
-    if (u && d) {
-      const t = i && r.current?.parentElement?.offsetHeight || window.innerHeight, n = e <= U ? "0%" : `${Math.round(e / t * 100)}%`;
-      u(n);
+  }, [O]), q = i((e) => {
+    if (a && d) {
+      const t = l && r.current?.parentElement?.offsetHeight || window.innerHeight, n = e <= X ? "0%" : `${Math.round(e / t * 100)}%`;
+      a(n);
     }
-  }, [u, d, i]), W = l((e) => {
-    r.current && (r.current.style.transition = de, r.current.style.height = `${e}px`, ie(e, x.current || A()));
-  }, [u, d, i]), se = () => {
-    w.current?.classList.remove("prometeo-scrollbar-none");
-  }, ce = () => {
-    w.current?.classList.add("prometeo-scrollbar-none");
-  }, ie = (e, t) => {
-    t > e ? se() : ce();
-  }, P = l(() => {
-    if (T.current && i) {
-      const { scrollY: e } = T.current;
-      document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, e), T.current = null;
+  }, [a, d, l]), te = i((e) => {
+    r.current && (r.current.style.transition = me, r.current.style.height = `${e}px`, fe(e, $.current || W()));
+  }, [a, d, l]), ue = () => {
+    b.current?.classList.remove("prometeo-scrollbar-none");
+  }, ae = () => {
+    b.current?.classList.add("prometeo-scrollbar-none");
+  }, fe = (e, t) => {
+    t > e ? ue() : ae();
+  }, ne = i(() => {
+    if (p.current && l) {
+      const { scrollY: e } = p.current;
+      document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, e), p.current = null;
     }
-  }, [i]), q = l((e) => {
+  }, [l]), B = i((e) => {
     if (!r.current) return;
     const t = e.touches[0], n = r.current.offsetHeight;
-    g.current = {
+    y.current = {
       isDragging: !1,
       startY: t.clientY,
       startHeight: n,
@@ -88,10 +88,10 @@ const U = 44, de = "height 0.5s cubic-bezier(0.32, 0.72, 0, 1)", be = le((a, i)
       lastTime: Date.now(),
       velocity: 0
     };
-  }, []), ee = l((e) => {
+  }, []), re = i((e) => {
     if (!r.current) return;
     const t = e, n = r.current.offsetHeight;
-    g.current = {
+    y.current = {
       isDragging: !1,
       startY: t.clientY,
       startHeight: n,
@@ -99,175 +99,180 @@ const U = 44, de = "height 0.5s cubic-bezier(0.32, 0.72, 0, 1)", be = le((a, i)
       lastTime: Date.now(),
       velocity: 0
     };
-  }, []), B = l((e) => {
-    if (!g.current || !r.current) return;
-    const t = e.touches[0], n = g.current, h = n.startY - t.clientY, c = n.isDragging || Math.abs(h) > 5;
-    if (!n.isDragging && c && (n.isDragging = !0, i)) {
+  }, []), U = i((e) => {
+    if (!y.current || !r.current) return;
+    const t = e.touches[0], n = y.current, g = n.startY - t.clientY, c = n.isDragging || Math.abs(g) > 5;
+    if (!n.isDragging && c && (n.isDragging = !0, l)) {
       const s = window.scrollY;
-      T.current = { scrollY: s }, document.body.style.position = "fixed", document.body.style.top = `-${s}px`, document.body.style.width = "100%";
+      p.current = { scrollY: s }, document.body.style.position = "fixed", document.body.style.top = `-${s}px`, document.body.style.width = "100%";
     }
     if (c) {
       e.preventDefault();
-      const s = Date.now(), Y = s - n.lastTime;
-      if (Y > 0) {
-        const Q = (t.clientY - n.lastY) / Y;
+      const s = Date.now(), v = s - n.lastTime;
+      if (v > 0) {
+        const Q = (t.clientY - n.lastY) / v;
         n.velocity = n.velocity * 0.8 + Q * 0.2;
       }
       n.lastY = t.clientY, n.lastTime = s;
-      const $ = n.startHeight + h, J = i && r.current.parentElement?.offsetHeight || window.innerHeight, K = Math.max(0, Math.min($, J));
+      const I = n.startHeight + g, k = l && r.current.parentElement?.offsetHeight || window.innerHeight, K = Math.max(0, Math.min(I, k));
       r.current.style.transition = "none", r.current.style.height = `${K}px`;
     }
-  }, [i]), te = l((e) => {
-    if (!g.current || !r.current) return;
-    const t = e, n = g.current, h = n.startY - t.clientY, c = n.isDragging || Math.abs(h) > 5;
-    if (!n.isDragging && c && (n.isDragging = !0, i)) {
+  }, [l]), oe = i((e) => {
+    if (!y.current || !r.current) return;
+    const t = e, n = y.current, g = n.startY - t.clientY, c = n.isDragging || Math.abs(g) > 5;
+    if (!n.isDragging && c && (n.isDragging = !0, l)) {
       const s = window.scrollY;
-      T.current = { scrollY: s }, document.body.style.position = "fixed", document.body.style.top = `-${s}px`, document.body.style.width = "100%";
+      p.current = { scrollY: s }, document.body.style.position = "fixed", document.body.style.top = `-${s}px`, document.body.style.width = "100%";
     }
     if (c) {
       e.preventDefault();
-      const s = Date.now(), Y = s - n.lastTime;
-      if (Y > 0) {
-        const Q = (t.clientY - n.lastY) / Y;
+      const s = Date.now(), v = s - n.lastTime;
+      if (v > 0) {
+        const Q = (t.clientY - n.lastY) / v;
         n.velocity = n.velocity * 0.8 + Q * 0.2;
       }
       n.lastY = t.clientY, n.lastTime = s;
-      const $ = n.startHeight + h, J = i && r.current.parentElement?.offsetHeight || window.innerHeight, K = Math.max(0, Math.min($, J));
+      const I = n.startHeight + g, k = l && r.current.parentElement?.offsetHeight || window.innerHeight, K = Math.max(0, Math.min(I, k));
       r.current.style.transition = "none", r.current.style.height = `${K}px`;
     }
-  }, [i]), y = l(() => {
-    if (!g.current || !r.current) return;
-    const e = g.current;
+  }, [l]), Y = i(() => {
+    if (!y.current || !r.current) return;
+    const e = y.current;
     if (e.isDragging) {
-      P();
-      const t = r.current.offsetHeight, n = X(t, e.velocity);
-      Z(n);
+      ne();
+      const t = r.current.offsetHeight, n = ee(t, e.velocity);
+      q(n);
     }
-    g.current = null;
-  }, [X, W, P]);
-  D(() => {
-    const e = N.current;
+    y.current = null;
+  }, [ee, q, ne]), V = i((e) => {
+    re(e);
+    const t = (g) => oe(g), n = () => {
+      document.removeEventListener("mousemove", t, { capture: !0 }), document.removeEventListener("mouseup", n, { capture: !0 }), Y();
+    };
+    document.addEventListener("mousemove", t, { passive: !1, capture: !0 }), document.addEventListener("mouseup", n, { capture: !0 });
+  }, [re, oe, Y]);
+  x(() => {
+    const e = M.current;
     if (e)
-      return e.addEventListener("touchstart", q, { passive: !1 }), e.addEventListener("touchmove", B, { passive: !1 }), e.addEventListener("touchend", y), e.addEventListener("touchcancel", y), e.addEventListener("mousedown", ee, { passive: !1 }), e.addEventListener("mousemove", te, { passive: !1 }), e.addEventListener("mouseup", y), e.addEventListener("mouseleave", y), () => {
-        e.removeEventListener("touchstart", q), e.removeEventListener("touchmove", B), e.removeEventListener("touchend", y), e.removeEventListener("touchcancel", y), e.removeEventListener("mousedown", ee), e.removeEventListener("mousemove", te), e.removeEventListener("mouseup", y), e.removeEventListener("mouseleave", y);
+      return e.addEventListener("touchstart", B, { passive: !1 }), e.addEventListener("touchmove", U, { passive: !1 }), e.addEventListener("touchend", Y), e.addEventListener("touchcancel", Y), e.addEventListener("mousedown", V, { passive: !1 }), () => {
+        e.removeEventListener("touchstart", B), e.removeEventListener("touchmove", U), e.removeEventListener("touchend", Y), e.removeEventListener("touchcancel", Y), e.removeEventListener("mousedown", V);
       };
-  }, [q, B, y]);
-  const E = oe(() => o !== "0%", [o]), [_, ne] = z(() => f ? o !== "0%" : !0);
-  return D(() => {
-    f && E && ne(!0);
-  }, [E, f]), D(() => {
-    if (!f) return;
+  }, [B, U, Y, V]);
+  const S = le(() => o !== "0%", [o]), [J, se] = A(() => m ? o !== "0%" : !0);
+  return x(() => {
+    m && S && se(!0);
+  }, [S, m]), x(() => {
+    if (!m) return;
     const e = r.current;
     if (!e) return;
     const t = (n) => {
-      n.propertyName === "height" && !E && o === "0%" && ne(!1);
+      n.propertyName === "height" && !S && o === "0%" && se(!1);
     };
     return e.addEventListener("transitionend", t), () => {
       e.removeEventListener("transitionend", t);
     };
-  }, [E, o, f]), D(() => {
+  }, [S, o, m]), x(() => {
     if (!r.current || !o) return;
-    const e = i && r.current.parentElement?.offsetHeight || window.innerHeight;
+    const e = l && r.current.parentElement?.offsetHeight || window.innerHeight;
     if (o === "auto") {
-      if (f && !_) return;
-      W(e), requestAnimationFrame(() => {
+      if (m && !J) return;
+      te(e), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          const n = !H || j.current, h = w.current && w.current.children.length > 0;
-          if (w.current && h && n) {
-            const c = A();
-            x.current = c;
-            const s = k(), Y = V(), $ = G(e, c, s, Y);
-            u($);
-          } else n && u("100%");
+          const n = !H || T.current, g = b.current && b.current.children.length > 0;
+          if (b.current && g && n) {
+            const c = W();
+            $.current = c;
+            const s = G(), v = Z(), I = P(), k = _(e, c, s, v, I);
+            a(k);
+          } else n && a("100%");
         });
       });
       return;
     }
     let t = 0;
-    typeof o == "string" && o.endsWith("%") ? parseFloat(o) <= 0 ? t = L ? 0 : U : t = parseFloat(o) / 100 * e : typeof o == "string" && o.endsWith("px") ? t = parseFloat(o) : typeof o == "number" && (o >= 0 && o <= 1 ? t = o * e : t = o), W(t);
-  }, [o, i, A, k, G, u, _, H, f]), /* @__PURE__ */ v.jsxs(v.Fragment, { children: [
-    F && /* @__PURE__ */ v.jsx(
+    typeof o == "string" && o.endsWith("%") ? parseFloat(o) <= 0 ? t = F ? 0 : X : t = parseFloat(o) / 100 * e : typeof o == "string" && o.endsWith("px") ? t = parseFloat(o) : typeof o == "number" && (o >= 0 && o <= 1 ? t = o * e : t = o), te(t);
+  }, [o, l, W, G, _, a, J, H, m]), /* @__PURE__ */ w.jsxs(w.Fragment, { children: [
+    N && /* @__PURE__ */ w.jsx(
       "div",
       {
-        className: O(E ? "fixed inset-0 bg-black/40 z-55 cursor-default" : "hidden"),
+        className: z(S ? "fixed inset-0 bg-black/40 z-55 cursor-default" : "hidden"),
         onClick: (e) => {
-          e.preventDefault(), e.stopPropagation(), C && Z(0);
+          e.preventDefault(), e.stopPropagation(), C && q(0);
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ v.jsxs(
+    /* @__PURE__ */ w.jsxs(
       "div",
       {
         ref: r,
-        className: O(
+        className: z(
           "h-0",
-          i ? "absolute" : "fixed",
+          l ? "absolute" : "fixed",
           "z-60 bottom-0 w-full overflow-hidden",
           "bg-neutral-default-default",
           "border-t border-neutral-strong-default rounded-t-[12px]",
-          E ? "" : "border-neutral-weak",
-          M,
+          S ? "" : "border-neutral-weak",
+          R,
           "flex flex-col items-center",
           "touch-none select-none"
         ),
         children: [
-          /* @__PURE__ */ v.jsx(
+          /* @__PURE__ */ w.jsx(
             "div",
             {
-              ref: N,
-              className: "w-full  absolute top-0 h-11 flex items-center justify-center cursor-grab active:cursor-grabbing z-50 bg-inherit!",
-              children: /* @__PURE__ */ v.jsx("span", { className: "w-12 h-1 rounded-full bg-neutral-weak-default" })
+              ref: M,
+              className: "w-full  absolute top-0 h-11 flex items-center justify-center cursor-grab active:cursor-grabbing z-50 bg-inherit! ",
+              children: /* @__PURE__ */ w.jsx("span", { className: "w-12 h-1 rounded-full bg-neutral-weak-default" })
             }
           ),
-          typeof b == "string" ? /* @__PURE__ */ v.jsx("p", { className: " prometeo-fonts-headline-small text-neutral-default-default w-full h-11 bg-inherit absolute top-11 z-50 px-4", children: b }) : b,
-          /* @__PURE__ */ v.jsx(
+          typeof u == "string" ? /* @__PURE__ */ w.jsx("p", { ref: E, className: " prometeo-fonts-headline-small text-neutral-default-default w-full min-h-11 bg-inherit mt-11 z-50 px-4 text-balance", children: u }) : /* @__PURE__ */ w.jsx("div", { ref: E, className: "w-full mt-11", children: typeof u == "function" ? u(D) : ce.isValidElement(u) ? u : u && typeof u == "object" && "$$typeof" in u ? ce.createElement(u, { context: D }) : u }),
+          /* @__PURE__ */ w.jsx(
             "div",
             {
-              ref: w,
-              className: O(
+              ref: b,
+              className: z(
                 "drawer-mobile-content prometeo-scrollbar-thin-weak ",
-                E ? "drawer-mobile-content--open" : "drawer-mobile-content--closed",
+                S ? "drawer-mobile-content--open" : "drawer-mobile-content--closed",
                 "w-full h-full",
-                b ? "mt-22" : "mt-11",
-                S
+                L
               ),
-              children: (!f || _) && (typeof a == "function" ? a(I) : a)
+              children: (!m || J) && (typeof f == "function" ? f(D) : f)
             }
           ),
-          H && /* @__PURE__ */ v.jsx("div", { ref: j, className: O(
+          H && /* @__PURE__ */ w.jsx("div", { ref: T, className: z(
             "w-full  mt-2 flex items-center justify-center p-2",
             "border-t border-neutral-strong-default",
-            R
-          ), children: typeof H == "function" ? H(I) : H })
+            j
+          ), children: typeof H == "function" ? H(D) : H })
         ]
       }
     )
   ] });
-}, we = () => {
-  const a = m(null), [i, M] = z(!1), S = l((d, u) => {
-    a.current?.open(d, u);
-  }, []), R = l(() => {
-    a.current?.close();
-  }, []), o = l(() => a.current?.getContext() ?? null, []);
-  return D(() => {
-    const d = a.current?.subscribeOpenChange;
+}, He = () => {
+  const f = h(null), [l, R] = A(!1), L = i((d, a) => {
+    f.current?.open(d, a);
+  }, []), j = i(() => {
+    f.current?.close();
+  }, []), o = i(() => f.current?.getContext() ?? null, []);
+  return x(() => {
+    const d = f.current?.subscribeOpenChange;
     if (!d) return;
-    const u = d((L) => {
-      M(L);
+    const a = d((F) => {
+      R(F);
     });
     return () => {
-      u && u();
+      a && a();
     };
-  }, [a.current?.subscribeOpenChange]), {
-    isOpen: i,
-    open: S,
-    close: R,
-    drawerRef: a,
+  }, [f.current?.subscribeOpenChange]), {
+    isOpen: l,
+    open: L,
+    close: j,
+    drawerRef: f,
     getContext: o
   };
 };
 export {
-  be as default,
-  we as useDrawerMobile
+  ye as default,
+  He as useDrawerMobile
 };

package/dist/components/Drawer/DrawerMobile.d.ts

@@ -9,7 +9,7 @@ export interface DrawerMobileProps<TContext = unknown> {
     attachToParent?: boolean;
     hideOnClose?: boolean;
     unmountChildrenOnClose?: boolean;
-    header?: React.ReactNode | string;
+    header?: React.ReactNode | string | ((context: TContext | null) => React.ReactNode);
     modal?: boolean;
     closeOnOverlayClick?: boolean;
     footer?: React.ReactNode | ((context: TContext | null) => React.ReactNode);
@@ -24,5 +24,7 @@ export interface DrawerMobileHandle<TContext = unknown> {
     getContext: () => TContext | null;
     subscribeOpenChange: (cb: (open: boolean) => void) => () => void;
 }
-declare const DrawerMobile: React.ForwardRefExoticComponent<DrawerMobileProps<any> & React.RefAttributes<DrawerMobileHandle<any>>>;
+declare const DrawerMobile: <TContext = unknown>(props: DrawerMobileProps<TContext> & {
+    ref: React.ForwardedRef<DrawerMobileHandle<TContext>>;
+}) => React.ReactElement;
 export default DrawerMobile;

package/package.json

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