prometeo-design-system 7.1.1 → 7.1.2

package/dist/DialogModal.es.js

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

package/dist/DrawerMobile-CZ7EoU0P.js

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

package/dist/DrawerMobile.es.js

@@ -1,4 +1,4 @@
-import { D as a } from "./DrawerMobile-VjhsKiXN.js";
+import { D as a } from "./DrawerMobile-CZ7EoU0P.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 { C as ot } from "./CardBackground-D5SgTU1i.js";
 import { c as H } from "./cn-B6yFEsav.js";
 import { u as rt } from "./useDevice-S7cYqLVh.js";
 import { createPortal as st } from "react-dom";
-import { D as it } from "./DrawerMobile-VjhsKiXN.js";
+import { D as it } from "./DrawerMobile-CZ7EoU0P.js";
 const ct = {
   color: "neutral",
   variant: "primary",