prometeo-design-system 7.4.2 → 7.4.3

package/dist/DesktopModal.es.js

@@ -1,5 +1,5 @@
-import { u as o, a as t } from "./useModalControl-3Dx1Wop_.js";
-import { D as u } from "./useModalControl-3Dx1Wop_.js";
+import { u as o, a as t } from "./useModalControl-wMqv8xVn.js";
+import { D as u } from "./useModalControl-wMqv8xVn.js";
 const e = o, s = t;
 export {
   u as default,

package/dist/DialogModal.es.js

@@ -1,4 +1,4 @@
-import { D as t } from "./useModalControl-3Dx1Wop_.js";
+import { D as t } from "./useModalControl-wMqv8xVn.js";
 import { useDesktopModalControl as s, useDesktopModalState as l } from "./DesktopModal.es.js";
 export {
   t as default,

package/dist/DrawerMobile-D8KsbqMY.js

@@ -0,0 +1,552 @@
+import { j as i } from "./jsx-runtime-GkKLlHH4.js";
+import $e, { useContext as ht, createContext as mt, useRef as f, useState as ge, useMemo as me, useCallback as n, useLayoutEffect as ne, useEffect as P, forwardRef as gt, useImperativeHandle as pt } from "react";
+import { createPortal as yt } from "react-dom";
+import { c as M } from "./cn-B6yFEsav.js";
+import xt from "./Divider.es.js";
+import bt from "./IconButton.es.js";
+import { Close as vt } from "./Icons/Close.es.js";
+const ke = mt(
+  null
+);
+function _t() {
+  const u = ht(ke);
+  if (!u)
+    throw new Error(
+      "Drawer slot components must be used inside <DrawerMobile> or <DrawerPanel>"
+    );
+  return u;
+}
+function wt(u, a) {
+  return {
+    title: a.title,
+    headerChildren: a.header,
+    headerActions: a.headerActions,
+    headerClassName: a.classNameHeader,
+    content: u,
+    contentClassName: a.classNameContent,
+    footer: a.footer,
+    footerClassName: a.classNameFooter
+  };
+}
+const Oe = "0.5s cubic-bezier(0.32, 0.72, 0, 1)", Ht = `transform ${Oe}`, St = `height ${Oe}`, Et = 24, Rt = 0.05, Ct = 5;
+function Ge(u, a, X) {
+  if (typeof u == "string" && u.endsWith("%")) {
+    const S = parseFloat(u);
+    return S <= 0 ? X : S > 100 ? a : Math.min(S, 100) / 100 * a;
+  }
+  return typeof u == "string" && u.endsWith("px") ? parseFloat(u) : typeof u == "number" ? u >= 0 && u <= 1 ? u * a : u : 0;
+}
+function Dt({
+  children: u,
+  attachToParent: a = !1,
+  className: X,
+  classNameContent: S,
+  classNameFooter: J,
+  classNameHeader: K,
+  isOpen: y,
+  applySnapRef: _,
+  onSnapChange: v,
+  snapPoints: oe = [0, "auto", 1],
+  hideOnClose: Q = !1,
+  unmountChildrenOnClose: g = !1,
+  header: j,
+  headerActions: Z,
+  modal: B = !1,
+  closeOnOverlayClick: V = !1,
+  context: E,
+  footer: $,
+  zIndex: R = 60,
+  chromeHeightGetterRef: A,
+  hideCloseButton: se = !1,
+  title: w,
+  onRequestClose: G
+}) {
+  const C = typeof u == "function" ? u(E) : u, H = !!(w || j || $), x = H ? wt(C, {
+    title: w,
+    header: j,
+    headerActions: Z,
+    footer: $,
+    classNameHeader: K,
+    classNameContent: S,
+    classNameFooter: J
+  }) : null, ee = x?.title ?? w, s = x?.headerChildren ?? j, D = x?.headerActions ?? Z, b = x?.footer ?? $, We = M(K, x?.headerClassName), qe = M(S, x?.contentClassName), ze = M(J, x?.footerClassName), Ue = x?.content ?? null, Xe = () => s ? typeof s == "string" ? /* @__PURE__ */ i.jsx(
+    "p",
+    {
+      style: { zIndex: R + 2 },
+      className: "pyrion-fonts-body-small text-neutral-secondary-default w-full text-balance",
+      children: s
+    }
+  ) : typeof s == "function" ? s(E) : $e.isValidElement(s) ? s : typeof s == "object" && "$$typeof" in s ? $e.createElement(
+    s,
+    { context: E }
+  ) : s : null, Je = () => D ? typeof D == "function" ? D(E) : D : null, Ke = () => b ? typeof b == "function" ? b(E) : b : null, c = f(null), ce = f(null), pe = f(null), k = f(0), ye = f("0%"), De = {
+    header: null,
+    headerTitle: null,
+    headerActions: null,
+    headerBody: null,
+    content: null,
+    footer: null
+  }, O = f({ ...De }), [xe, Qe] = ge(De), W = me(() => {
+    const e = (r) => (t) => {
+      O.current[r] !== t && (O.current[r] = t, Qe(
+        (o) => o[r] === t ? o : { ...o, [r]: t }
+      ));
+    };
+    return {
+      header: e("header"),
+      headerTitle: e("headerTitle"),
+      headerActions: e("headerActions"),
+      headerBody: e("headerBody"),
+      content: e("content"),
+      footer: e("footer")
+    };
+  }, []), Ze = me(
+    () => ({ regions: xe }),
+    [xe]
+  ), le = n(() => O.current.header, []), m = n(() => O.current.content, []), q = n(() => O.current.footer, []), L = f(null), ie = f(null), be = f(0), ve = f(!0), we = f(null), He = f(null), d = n(() => Q ? 0 : pe.current?.offsetHeight ?? 0, [Q]), N = n(() => {
+    if (!c.current) return 0;
+    const e = getComputedStyle(c.current);
+    return parseFloat(e.paddingTop) + parseFloat(e.paddingBottom);
+  }, []), p = n(() => c.current && a && c.current.parentElement?.offsetHeight || window.innerHeight, [a]), z = n(() => {
+    if (!c.current) return 0;
+    const e = p(), t = c.current.style.transform.match(/translateY\(([^)]+)px\)/);
+    return t ? e - parseFloat(t[1]) : 0;
+  }, [p]), ae = n((e, r) => {
+    const t = [e > 0, !0, r > 0].filter(Boolean).length;
+    return Et * Math.max(0, t - 1);
+  }, []), Se = n(() => {
+    const e = N(), r = le()?.offsetHeight ?? 0, t = q()?.offsetHeight ?? 0, o = ae(r, t);
+    return e + r + t + o;
+  }, [ae, N, q, le]), U = n(() => {
+    const e = N(), r = le()?.offsetHeight ?? 0, t = m()?.scrollHeight ?? 0, o = q()?.offsetHeight ?? 0, l = ae(r, o);
+    return e + r + t + o + l;
+  }, [ae, N, m, q, le]);
+  ne(() => {
+    A && (A.current = Se);
+  }, [A, Se]);
+  const Ne = n(() => {
+    if (!c.current) return [];
+    const e = p(), r = d();
+    return oe?.map((t) => t === "auto" ? U() : 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 : t === 0 ? r : typeof t == "number" ? t : 0) || [];
+  }, [oe, p, d, U]), ue = n((e, r) => {
+    if (!ce.current) return;
+    const t = we.current ?? N(), o = He.current ?? d(), l = Math.max(0, e - t), h = e <= o, I = h ? be.current : l;
+    ce.current.style.transition = r ? St : "none", ce.current.style.height = `${I}px`, h || (be.current = I);
+  }, [N, d]), Te = n((e) => {
+    const r = m();
+    r && (r.classList.toggle("drawer-mobile-content--open", e), r.classList.toggle("drawer-mobile-content--closed", !e));
+  }, [m]), Ve = () => {
+    m()?.classList.remove("prometeo-scrollbar-none");
+  }, et = () => {
+    m()?.classList.add("prometeo-scrollbar-none");
+  }, Me = n((e, r) => {
+    const t = Ne();
+    if (t.length === 0) return e;
+    const o = d();
+    if (Math.abs(r) > Rt) {
+      if (r > 0) {
+        const h = t.filter((I) => I < e);
+        return h.length > 0 ? Math.max(...h) : o;
+      }
+      const l = t.filter((h) => h > e);
+      if (l.length > 0)
+        return Math.min(...l);
+    }
+    return t.reduce(
+      (l, h) => Math.abs(h - e) < Math.abs(l - e) ? h : l
+    );
+  }, [Ne, d]), je = n((e) => {
+    const r = d(), t = e <= r ? "0%" : e;
+    v(t);
+  }, [v, d]), tt = (e, r) => {
+    const t = Se(), o = e - t;
+    r > o ? Ve() : et();
+  }, T = n((e, r = !0) => {
+    if (!c.current) return;
+    const t = p(), o = Math.max(0, t - e);
+    ue(e, r), c.current.style.transition = Ht, c.current.style.transform = `translateY(${o}px)`;
+    const l = k.current || m()?.scrollHeight || 0;
+    tt(e, l);
+  }, [p, ue, m]), te = n((e) => {
+    if (!c.current) return;
+    const r = p(), t = Math.max(0, r - e);
+    c.current.style.transition = "none", c.current.style.transform = `translateY(${t}px)`, ue(e, !1);
+  }, [p, ue]), Ae = n(() => {
+    if (ie.current && a) {
+      const { scrollY: e } = ie.current;
+      document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, e), ie.current = null;
+    }
+  }, [a]), Le = n(() => {
+    if (!a) return;
+    const e = window.scrollY;
+    ie.current = { scrollY: e }, document.body.style.position = "fixed", document.body.style.top = `-${e}px`, document.body.style.width = "100%";
+  }, [a]), fe = n(() => {
+    we.current = N(), He.current = d();
+  }, [N, d]), Fe = n(() => {
+    we.current = null, He.current = null;
+  }, []), Ee = n((e) => {
+    if (!c.current) return;
+    fe();
+    const r = e.touches[0], t = z();
+    L.current = {
+      isDragging: !1,
+      startY: r.clientY,
+      startHeight: t,
+      lastY: r.clientY,
+      lastTime: Date.now(),
+      velocity: 0
+    };
+  }, [z, fe]), Ye = n((e) => {
+    if (!c.current) return;
+    fe();
+    const r = z();
+    L.current = {
+      isDragging: !1,
+      startY: e.clientY,
+      startHeight: r,
+      lastY: e.clientY,
+      lastTime: Date.now(),
+      velocity: 0
+    };
+  }, [z, fe]), de = n((e, r) => {
+    if (!L.current || !c.current) return;
+    const t = L.current, o = t.startY - e, l = t.isDragging || Math.abs(o) > Ct;
+    if (!t.isDragging && l && (t.isDragging = !0, Le()), !l) return;
+    r.preventDefault();
+    const h = Date.now(), I = h - t.lastTime;
+    if (I > 0) {
+      const dt = (e - t.lastY) / I;
+      t.velocity = t.velocity * 0.8 + dt * 0.2;
+    }
+    t.lastY = e, t.lastTime = h;
+    const at = t.startHeight + o, ut = p(), ft = Math.max(0, Math.min(at, ut));
+    te(ft);
+  }, [Le, p, te]), Re = n((e) => {
+    de(e.touches[0].clientY, e);
+  }, [de]), Ie = n((e) => {
+    de(e.clientY, e);
+  }, [de]), F = n(() => {
+    if (L.current?.isDragging && c.current) {
+      Ae();
+      const e = z(), r = Me(e, L.current.velocity);
+      je(r);
+    }
+    L.current = null, Fe();
+  }, [Me, je, Ae, z, Fe]), Ce = n((e) => {
+    Ye(e);
+    const r = (o) => Ie(o), t = () => {
+      document.removeEventListener("mousemove", r, { capture: !0 }), document.removeEventListener("mouseup", t, { capture: !0 }), F();
+    };
+    document.addEventListener("mousemove", r, { passive: !1, capture: !0 }), document.addEventListener("mouseup", t, { capture: !0 });
+  }, [Ye, Ie, F]);
+  P(() => {
+    const e = pe.current;
+    if (e)
+      return e.addEventListener("touchstart", Ee, { passive: !1 }), e.addEventListener("touchmove", Re, { passive: !1 }), e.addEventListener("touchend", F), e.addEventListener("touchcancel", F), e.addEventListener("mousedown", Ce, { passive: !1 }), () => {
+        e.removeEventListener("touchstart", Ee), e.removeEventListener("touchmove", Re), e.removeEventListener("touchend", F), e.removeEventListener("touchcancel", F), e.removeEventListener("mousedown", Ce);
+      };
+  }, [Ee, Re, F, Ce]);
+  const [Y, Pe] = ge(() => g ? y : !0);
+  g && y && !Y && Pe(!0);
+  const re = f(null);
+  P(() => {
+    if (!g) return;
+    const e = c.current;
+    if (!e) return;
+    const r = (t) => {
+      t.propertyName === "transform" && (y || Pe(!1));
+    };
+    return e.addEventListener("transitionend", r), () => e.removeEventListener("transitionend", r);
+  }, [y, g]);
+  const _e = n((e) => {
+    const r = e === "0%";
+    !r && ve.current && (be.current = d()), ve.current = r;
+  }, [d]), Be = n(() => {
+    c.current && (c.current.style.visibility = "hidden", te(d()), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!c.current) return;
+        const e = q(), r = !b || e != null && e.children.length >= 0, t = m(), o = t && t.children.length > 0;
+        t && o && r ? (k.current = t.scrollHeight, T(U(), !1), c.current.style.visibility = "") : (r && te(d()), c.current.style.visibility = "");
+      });
+    }));
+  }, [
+    b,
+    te,
+    d,
+    T,
+    U,
+    m,
+    q
+  ]), he = n((e) => {
+    if (!e) return;
+    if (ye.current = e, g && !Y && e !== "0%") {
+      re.current = e;
+      return;
+    }
+    re.current = null, Te(e !== "0%"), Y && m() && k.current === 0 && (k.current = m()?.scrollHeight ?? 0);
+    const r = e !== "0%" && ve.current;
+    if (_e(e), e === "auto") {
+      Be();
+      return;
+    }
+    const t = p(), o = d(), l = Ge(e, t, o);
+    T(l, !r);
+  }, [
+    g,
+    Y,
+    _e,
+    Be,
+    T,
+    p,
+    d,
+    Te,
+    m
+  ]);
+  ne(() => {
+    if (!y) return;
+    const e = ye.current;
+    if (!e || e === "0%") return;
+    const r = m();
+    if (r) {
+      const h = r.scrollHeight;
+      h > 0 && (k.current = h);
+    }
+    const t = p(), o = d(), l = Ge(e, t, o);
+    T(l, !1);
+  }, [y, p, d, T, m]), ne(() => {
+    if (!y) return;
+    const e = O.current.content;
+    if (!e) return;
+    let r = 0;
+    const t = () => {
+      if (ye.current !== "auto") return;
+      const l = e.scrollHeight;
+      l <= 0 || l === r || (r = l, k.current = l, T(U(), !0));
+    };
+    t();
+    const o = new ResizeObserver(t);
+    return o.observe(e), () => o.disconnect();
+  }, [y, xe.content, T, U]), ne(() => (_.current = he, () => {
+    _.current = null;
+  }), [he]), ne(() => {
+    if (Y && re.current) {
+      const e = re.current;
+      re.current = null, he(e);
+    }
+  }, [Y, he]);
+  const rt = me(
+    () => navigator.userAgent.includes("iPhone") || navigator.userAgent.includes("iPad") || navigator.userAgent.includes("iPod"),
+    []
+  ), nt = me(() => window.matchMedia("(display-mode: standalone)").matches, []), ot = Q ? 0 : d(), st = /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      ref: W.header,
+      className: M(
+        "pb-4 flex flex-col gap-3 items-start justify-start border-b border-neutral-default-default",
+        We
+      ),
+      children: [
+        /* @__PURE__ */ i.jsxs("div", { className: "pl-4 pr-2 gap-1 flex items-end w-full", children: [
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              ref: W.headerTitle,
+              className: "flex-1 min-w-0 flex items-end",
+              children: H && ee ? /* @__PURE__ */ i.jsx("h4", { className: "pyrion-fonts-headline-small text-neutral-primary-default flex-1 truncate", children: ee }) : null
+            }
+          ),
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              ref: W.headerActions,
+              className: "flex shrink-0 pl-4 pr-2 gap-1 items-end",
+              children: H ? Je() : null
+            }
+          ),
+          !se && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+            /* @__PURE__ */ i.jsx(xt, { orientation: "vertical" }),
+            /* @__PURE__ */ i.jsx(
+              bt,
+              {
+                icon: vt,
+                variant: "text",
+                color: "neutral",
+                size: "small",
+                onClick: G
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ i.jsx("div", { ref: W.headerBody, className: "w-full", children: H ? Xe() : null })
+      ]
+    }
+  ), ct = /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      ref: W.content,
+      className: M(
+        "drawer-mobile-content pyrion-scrollbar-thin-weak",
+        y ? "drawer-mobile-content--open" : "drawer-mobile-content--closed",
+        "w-full flex-1 min-h-0 overflow-y-auto",
+        "flex flex-col gap-6 px-4 items-start justify-start",
+        qe
+      ),
+      children: (!g || Y) && (H ? Ue : C)
+    }
+  ), lt = /* @__PURE__ */ i.jsx(
+    "div",
+    {
+      ref: W.footer,
+      className: M(
+        "w-full flex px-4 pt-4 gap-4 pb-0 items-center justify-center",
+        "border-t border-neutral-default-default",
+        "shrink-0",
+        nt && rt && "pb-8",
+        ze
+      ),
+      children: H && b ? Ke() : null
+    }
+  ), it = /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    ct,
+    lt
+  ] });
+  return /* @__PURE__ */ i.jsx(ke.Provider, { value: Ze, children: /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    (B || V) && /* @__PURE__ */ i.jsx(
+      "div",
+      {
+        style: { zIndex: R },
+        className: M(
+          y ? "fixed inset-0 cursor-default" : "hidden",
+          B && "bg-black/40"
+        ),
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation(), V && G();
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ i.jsxs(
+      "div",
+      {
+        ref: c,
+        style: { zIndex: R, transform: "translateY(100%)" },
+        className: M(
+          "h-full",
+          a ? "absolute" : "fixed",
+          "bottom-0 w-full overflow-hidden",
+          "bg-neutral-default-default",
+          "border-t border-neutral-default-default rounded-t-300",
+          "flex flex-col items-center pt-7 pb-6 gap-2",
+          "touch-none select-none will-change-transform",
+          X
+        ),
+        children: [
+          /* @__PURE__ */ i.jsx(
+            "div",
+            {
+              ref: pe,
+              style: { zIndex: R + 1 },
+              className: "w-full absolute top-0 pt-4 pb-2 flex items-end justify-center cursor-grab active:cursor-grabbing bg-inherit!",
+              children: /* @__PURE__ */ i.jsx("span", { className: "w-12 h-1 rounded-full bg-neutral-tertiary-default" })
+            }
+          ),
+          /* @__PURE__ */ i.jsxs(
+            "div",
+            {
+              ref: ce,
+              style: { height: `${ot}px` },
+              className: "w-full flex flex-col min-h-0 overflow-hidden gap-6",
+              children: [
+                st,
+                it
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+const Nt = Dt, Tt = 300, Mt = gt(function(a, X) {
+  const {
+    children: S,
+    defaultOpen: J = !1,
+    onClose: K,
+    snapPoints: y = ["auto"],
+    setSnap: _,
+    snap: v,
+    attachToParent: oe = !1,
+    classNameHeader: Q
+  } = a, g = f(v || "0%"), [j, Z] = ge(!1), [B, V] = ge(null), E = f(K), $ = f(_), R = f(B), A = f(/* @__PURE__ */ new Set()), se = f(() => 0), w = f(null), G = f(null);
+  E.current = K, R.current = B, P(() => {
+    $.current = _;
+  }, [_]);
+  const C = n((s) => {
+    const D = g.current !== "0%";
+    g.current = s;
+    const b = s !== "0%";
+    D !== b && Z(b), $.current?.(s), G.current?.(s);
+  }, []);
+  P(() => {
+    if (v == null || v === g.current) return;
+    g.current = v, Z(v !== "0%"), G.current?.(v);
+  }, [v]), P(() => {
+    J && x();
+  }, [J]);
+  const H = n(() => {
+    C("0%"), E.current?.(R.current), w.current && clearTimeout(w.current), w.current = setTimeout(() => {
+      V(null), w.current = null;
+    }, Tt);
+  }, [C]);
+  P(() => () => {
+    w.current && clearTimeout(w.current);
+  }, []);
+  const x = n(
+    (s, D) => {
+      const b = D || y[0] || "60%";
+      V(s ?? null), C(b);
+    },
+    [y, C]
+  );
+  P(() => {
+    A.current.forEach((s) => {
+      try {
+        s(j);
+      } catch {
+      }
+    });
+  }, [j]), pt(
+    X,
+    () => ({
+      open: x,
+      close: H,
+      get isOpen() {
+        return g.current !== "0%";
+      },
+      subscribeOpenChange: (s) => (A.current.add(s), s(g.current !== "0%"), () => A.current.delete(s)),
+      getContext: () => R.current,
+      getChromeHeight: () => se.current()
+    }),
+    [x, H]
+  );
+  const ee = /* @__PURE__ */ i.jsx(
+    Nt,
+    {
+      ...a,
+      classNameHeader: Q,
+      isOpen: j,
+      applySnapRef: G,
+      onSnapChange: C,
+      context: B,
+      chromeHeightGetterRef: se,
+      onRequestClose: H,
+      children: S
+    }
+  );
+  return oe ? ee : yt(ee, document.body);
+});
+Mt.displayName = "DrawerMobile";
+export {
+  Mt as D,
+  _t as u
+};

package/dist/DrawerMobile.es.js

@@ -1,4 +1,4 @@
-import { D as a } from "./DrawerMobile-BzwNbhK7.js";
+import { D as a } from "./DrawerMobile-D8KsbqMY.js";
 import { u as o, c as t, b as u, a as D } from "./useDrawerControl-H3_CBNvK.js";
 export {
   a as default,

package/dist/Menu.es.js

@@ -4,7 +4,7 @@ import J from "./CardBackground.es.js";
 import { c as w } from "./cn-B6yFEsav.js";
 import { u as Q } from "./useDevice-S7cYqLVh.js";
 import { M as W } from "./MenuFloating-CZ7dqXy2.js";
-import { D as Z } from "./DrawerMobile-BzwNbhK7.js";
+import { D as Z } from "./DrawerMobile-D8KsbqMY.js";
 const $ = {
   color: "neutral",
   variant: "primary",