prometeo-design-system 7.4.3 → 7.4.5

package/dist/DrawerMobile-DT6ZkP7f.js

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

package/dist/DrawerMobile.es.js

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