prometeo-design-system 5.1.1 → 5.2.0

package/dist/DrawerMobile.es.js

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

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

@@ -4,7 +4,7 @@ export interface DrawerMobileProps<TContext = unknown> {
     defaultOpen?: boolean;
     onClose?: (context: TContext | null) => void;
     snap?: string | number | null;
-    snapPoints?: (string | number)[];
+    snapPoints?: (string | number | 'auto')[];
     setSnap?: (snap: string | number) => void;
     attachToParent?: boolean;
     hideOnClose?: boolean;
@@ -14,7 +14,7 @@ export interface DrawerMobileProps<TContext = unknown> {
     closeOnOverlayClick?: boolean;
 }
 export interface DrawerMobileHandle<TContext = unknown> {
-    open: (snap?: string | number, context?: TContext) => void;
+    open: (snap?: string | number | 'auto', context?: TContext) => void;
     close: () => void;
     isOpen: boolean;
     getContext: () => TContext | null;

package/package.json

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