prometeo-design-system 7.3.9 → 7.4.0

package/dist/CardBackground.es.js

@@ -1,37 +1,37 @@
 import { j as b } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as I } from "react";
-import { c as T } from "./index-BOQuZ0gG.js";
+import { memo as S } from "react";
+import { c as V } from "./index-BOQuZ0gG.js";
 import { c as g } from "./cn-B6yFEsav.js";
-const N = "data-interaction-group", P = "data-interaction-exclude";
-function W() {
-  return { [N]: "" };
+const O = "data-interaction-group", k = "data-interaction-exclude";
+function G() {
+  return { [O]: "" };
 }
-function R(r) {
+function A(r) {
   return r != null && r !== "self";
 }
-function S(r, e) {
+function E(r, e) {
   const t = r ?? "neutral";
   return {
     color: t,
     variant: t === "brand" ? "primary" : e ?? "default"
   };
 }
-function O(r, e) {
+function _(r, e) {
   return {
     default: { color: r, variant: e },
     hover: { color: r, variant: e, forced: "hover" },
     pressed: { color: r, variant: e, forced: "pressed" }
   };
 }
-function V(r, e, t) {
+function p(r, e, t) {
   if (r) return r;
-  const { color: a, variant: n } = S(e, t);
-  return O(a, n);
+  const { color: a, variant: n } = E(e, t);
+  return _(a, n);
 }
-function A(r, e) {
+function x(r, e) {
   return e || r !== void 0;
 }
-const y = "transition-colors duration-300 ease will-change-colors", i = T(y, {
+const m = "transition-colors duration-300 ease will-change-colors", i = V(m, {
   variants: {
     color: {
       neutral: "",
@@ -183,7 +183,7 @@ const y = "transition-colors duration-300 ease will-change-colors", i = T(y, {
     }
   ]
 });
-function p(r) {
+function y(r) {
   return !("color" in r.default);
 }
 function s(r) {
@@ -210,15 +210,15 @@ function s(r) {
     disabled: !1
   }).split(" ").find((a) => a.startsWith("bg-") && !a.includes(":")) ?? "bg-neutral-default-default"})`;
 }
-function E(r) {
-  const e = p(r) ? r.default : r, t = p(r) ? r.selected : void 0, a = {
+function h(r) {
+  const e = y(r) ? r.default : r, t = y(r) ? r.selected : void 0, a = {
     "--cell-bg": s(e.default),
     "--cell-bg-hover": s(e.hover),
     "--cell-bg-pressed": s(e.pressed)
   };
   return t && (a["--cell-bg-selected"] = s(t.default), a["--cell-bg-sel-hover"] = s(t.hover), a["--cell-bg-sel-pressed"] = s(t.pressed)), a;
 }
-const _ = (r) => {
+const w = (r) => {
   const e = {
     color: "neutral",
     variant: "default",
@@ -235,29 +235,29 @@ const _ = (r) => {
     interactionSource: u,
     ...v
   } = { ...e, ...r };
-  if (A(n, d)) {
-    const C = i({ color: t, variant: a, forced: n, disabled: d });
-    return /* @__PURE__ */ b.jsx("div", { className: g(C, c), "data-disabled": d, ...v, children: l && typeof l == "function" ? l() : l });
+  if (x(n, d)) {
+    const T = i({ color: t, variant: a, forced: n, disabled: d }), N = p(o, t, a), R = h(N);
+    return /* @__PURE__ */ b.jsx("div", { className: g(T, c), "data-disabled": d, style: R, ...v, children: l && typeof l == "function" ? l() : l });
   }
-  const h = V(o, t, a), m = E(h), f = R(u);
+  const C = p(o, t, a), I = h(C), f = A(u);
   return /* @__PURE__ */ b.jsx(
     "div",
     {
       "data-cell-interactive": "",
       "data-interaction-grouped": f ? "" : void 0,
       "data-interaction-source": f ? u : void 0,
-      className: g(y, c),
+      className: g(m, c),
       "data-disabled": d,
-      style: m,
+      style: I,
       ...v,
       children: l && typeof l == "function" ? l() : l
     }
   );
-}, x = I(_);
-x.displayName = "CardBackground";
+}, j = S(w);
+j.displayName = "CardBackground";
 export {
-  P as INTERACTION_EXCLUDE_ATTR,
-  N as INTERACTION_GROUP_ATTR,
-  x as default,
-  W as interactionGroupProps
+  k as INTERACTION_EXCLUDE_ATTR,
+  O as INTERACTION_GROUP_ATTR,
+  j as default,
+  G as interactionGroupProps
 };

package/dist/Dialog.es.js

@@ -2,7 +2,7 @@ import { j as n } from "./jsx-runtime-GkKLlHH4.js";
 import { useContext as Z, createContext as $, forwardRef as ee, memo as O, useRef as h, useState as R, useCallback as p, useEffect as I, useImperativeHandle as ne, useMemo as q } from "react";
 import { createPortal as te } from "react-dom";
 import { c as v } from "./cn-B6yFEsav.js";
-import { M as re } from "./MenuFloating-Bew5qbpJ.js";
+import { M as re } from "./MenuFloating-CZ7dqXy2.js";
 import oe from "./CardBackground.es.js";
 import se from "./IconButton.es.js";
 import { Close as le } from "./Icons/Close.es.js";

package/dist/Menu.es.js

@@ -3,7 +3,7 @@ import { memo as k, useMemo as _, Children as G, isValidElement as N, forwardRef
 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-Bew5qbpJ.js";
+import { M as W } from "./MenuFloating-CZ7dqXy2.js";
 import { D as Z } from "./DrawerMobile-BzwNbhK7.js";
 const $ = {
   color: "neutral",

package/dist/MenuFloating-CZ7dqXy2.js

@@ -0,0 +1,128 @@
+import { j as H } from "./jsx-runtime-GkKLlHH4.js";
+import { forwardRef as K, useState as R, useRef as l, useCallback as S, useEffect as c, useImperativeHandle as U } from "react";
+import { createPortal as V } from "react-dom";
+import { c as W } from "./cn-B6yFEsav.js";
+import { u as _ } from "./useFloatingPosition-CSrirTF5.js";
+const z = 100, D = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function X(x, C) {
+  const {
+    triggerRef: s,
+    anchorRef: T,
+    placement: O = "bottom-start",
+    offset: F = 4,
+    matchTriggerWidth: A = !1,
+    attachToParent: b = !1,
+    closeOnScroll: L = !0,
+    closeOnClickOutside: v = !0,
+    zIndex: P = 50,
+    avoidElements: k,
+    onClose: w,
+    onOpen: h,
+    children: I,
+    className: M
+  } = x, [n, d] = R("closed"), [j, q] = R(0), u = l("closed"), p = l(null), f = l(null), m = l(/* @__PURE__ */ new Set()), r = l(null), a = n !== "closed", o = S(() => {
+    r.current && clearTimeout(r.current), u.current = "closing", d("closing"), m.current.forEach((e) => e(!1)), r.current = setTimeout(() => {
+      u.current = "closed", d("closed"), p.current = null, w?.();
+    }, z);
+  }, [w]), { floatingStyles: N, resolvedPlacement: B, isPositioned: g } = _({
+    triggerRef: s,
+    anchorRef: T,
+    floatingRef: f,
+    placement: O,
+    offset: F,
+    matchTriggerWidth: A,
+    attachToParent: b,
+    enabled: a,
+    closeOnScroll: L,
+    onClose: o,
+    repositionKey: j,
+    avoidElements: k
+  }), E = S(
+    (e) => {
+      r.current && clearTimeout(r.current), p.current = e ?? null, u.current = "opening", d("opening"), q((t) => t + 1), h?.(e), m.current.forEach((t) => t(!0));
+    },
+    [h]
+  );
+  if (c(() => {
+    if (n !== "opening" || !g) return;
+    let e, t;
+    return e = requestAnimationFrame(() => {
+      t = requestAnimationFrame(() => {
+        u.current = "open", d("open");
+      });
+    }), () => {
+      cancelAnimationFrame(e), cancelAnimationFrame(t);
+    };
+  }, [n, g]), U(
+    C,
+    () => ({
+      open: (e) => E(e),
+      close: o,
+      get isOpen() {
+        const e = u.current;
+        return e === "open" || e === "opening";
+      },
+      getContext: () => p.current,
+      subscribeOpenChange(e) {
+        return m.current.add(e), () => {
+          m.current.delete(e);
+        };
+      }
+    }),
+    [E, o]
+  ), c(() => {
+    if (n !== "open") return;
+    f.current?.querySelector(D)?.focus();
+  }, [n]), c(() => {
+    if (n !== "closed") return;
+    const e = s.current;
+    if (!e || !document.body.contains(e)) return;
+    const t = document.activeElement;
+    if (t && t !== document.body && t !== e) return;
+    const i = e.getBoundingClientRect();
+    i.top < window.innerHeight && i.bottom > 0 && i.left < window.innerWidth && i.right > 0 && e.focus({ preventScroll: !0 });
+  }, [n, s]), c(() => {
+    if (!v || !a) return;
+    const e = (t) => {
+      const i = t.target;
+      f.current?.contains(i) || s.current?.contains(i) || o();
+    };
+    return window.addEventListener("mousedown", e, !0), () => window.removeEventListener("mousedown", e, !0);
+  }, [v, a, o, s]), c(() => {
+    if (!a) return;
+    const e = (t) => {
+      t.key === "Escape" && (t.stopPropagation(), o());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [a, o]), c(() => () => {
+    r.current && clearTimeout(r.current);
+  }, []), n === "closed") return null;
+  const y = /* @__PURE__ */ H.jsx(
+    "div",
+    {
+      ref: f,
+      className: W("pyrion-menu-floating", M),
+      "data-open": n === "open" ? "true" : void 0,
+      "data-closing": n === "closing" ? "true" : void 0,
+      "data-placement": B,
+      style: {
+        ...N,
+        zIndex: P,
+        visibility: g ? "visible" : "hidden"
+      },
+      children: I
+    }
+  );
+  return b ? y : V(y, document.body);
+}
+const ee = K(X);
+export {
+  ee as M
+};

package/dist/MessageCard.es.js

@@ -1,35 +1,35 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import c from "./Button.es.js";
-import { c as l } from "./cn-B6yFEsav.js";
-import d from "react";
-const f = "/public/assets/MessageCardImage.png";
-function u() {
-  return l(
+import i from "./Button.es.js";
+import { c as a } from "./cn-B6yFEsav.js";
+import c from "react";
+const d = "/public/assets/MessageCardImage.png";
+function f() {
+  return a(
     "flex flex-col items-center text-center gap-8 min-w-[300px] max-w-[448px]"
   );
 }
-function x(a) {
-  return l(
+function u(s) {
+  return a(
     "object-contain shrink-0",
-    a === "medium" ? "size-[280px]" : "size-[200px]"
+    s === "medium" ? "size-[280px]" : "size-[200px]"
   );
 }
-function p(a) {
-  return a.filter((t) => !t.disabled);
+function x(s) {
+  return s.filter((l) => !l.disabled);
 }
-const g = ({
-  title: a,
-  description: t,
+const p = ({
+  title: s,
+  description: l,
   image: o,
   actions: m,
-  size: r = "medium",
+  size: t = "medium",
   className: n
-}) => /* @__PURE__ */ e.jsxs("article", { className: l(u(), n), children: [
+}) => /* @__PURE__ */ e.jsxs("article", { className: a(f(), n), children: [
   /* @__PURE__ */ e.jsx(
     "img",
     {
-      src: o ?? f,
-      className: x(r),
+      src: o ?? d,
+      className: u(t),
       alt: ""
     }
   ),
@@ -37,47 +37,45 @@ const g = ({
     /* @__PURE__ */ e.jsx(
       "h3",
       {
-        className: l(
-          r === "medium" ? "prometeo-fonts-title-large" : "prometeo-fonts-title-medium",
+        className: a(
+          t === "medium" ? "prometeo-fonts-title-large" : "prometeo-fonts-title-medium",
           "text-neutral-default-default"
         ),
-        children: a
+        children: s
       }
     ),
-    t ? /* @__PURE__ */ e.jsx(
+    l ? /* @__PURE__ */ e.jsx(
       "p",
       {
-        className: l(
-          r === "medium" ? "prometeo-fonts-body-large" : "prometeo-fonts-body-medium",
+        className: a(
+          t === "medium" ? "prometeo-fonts-body-large" : "prometeo-fonts-body-medium",
           "text-neutral-secondary-default"
         ),
-        children: t
+        children: l
       }
     ) : null
   ] }),
   m?.length ? /* @__PURE__ */ e.jsx(
     "div",
     {
-      className: l(
+      className: a(
         "flex flex-col gap-3 w-full"
       ),
-      children: p(m).map((s, i) => /* @__PURE__ */ e.jsx(
-        c,
+      children: x(m).map((r) => /* @__PURE__ */ e.jsx(
+        i,
         {
-          label: s.label,
-          onClick: s.onClick,
-          variant: s.variant ?? "fill",
-          color: s.color ?? "brand",
+          variant: r.variant ?? "fill",
+          color: r.color ?? "brand",
+          ...r,
           className: "w-full",
           animate: !1,
           animateIcon: !1
-        },
-        s.label + i
+        }
       ))
     }
   ) : null
-] }), b = d.memo(g);
-b.displayName = "MessageCard";
+] }), g = c.memo(p);
+g.displayName = "MessageCard";
 export {
-  b as default
+  g as default
 };

package/dist/Popover.css

@@ -1 +1 @@
-.popover-trigger-highlight:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--popover-highlight-border-radius, inherit);z-index:1;background-color:var(--popover-highlight-background-color, var(--bg-brand-overlay-default));border:var(--popover-highlight-border, none);box-shadow:var(--popover-highlight-box-shadow, none);opacity:0;transition:var( --popover-highlight-transition, opacity var(--popover-highlight-transition-duration, .3s) ease )}.popover-trigger-highlight-visible:after{opacity:var(--popover-highlight-opacity, 1)}
+.popover-trigger-highlight-overlay{pointer-events:none;background-color:var(--popover-highlight-background-color, var(--bg-brand-overlay-default));border:var(--popover-highlight-border, none);box-shadow:var(--popover-highlight-box-shadow, none);opacity:0;transition:opacity var(--popover-highlight-transition-duration, .3s) ease,var(--popover-highlight-transition, none)}.popover-trigger-highlight-overlay--visible{opacity:var(--popover-highlight-opacity, 1)}.popover-trigger-highlight-overlay--closing{opacity:0}.popover-indicator-polygon{fill:var(--cell-bg, var(--bg-neutral-secondary-default));stroke:var(--popover-panel-border-color, transparent);stroke-width:var(--popover-panel-border-width, 0);vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;paint-order:stroke fill}.popover-panel-radius--flatten-tl{border-top-left-radius:0}.popover-panel-radius--flatten-tr{border-top-right-radius:0}.popover-panel-radius--flatten-bl{border-bottom-left-radius:0}.popover-panel-radius--flatten-br{border-bottom-right-radius:0}