prometeo-design-system 4.2.4 → 4.3.0

package/dist/Avatar.es.js

@@ -1,5 +1,5 @@
 import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { g as v } from "./useLabelBackground-BDIHUdND.js";
+import { g as v } from "./useLabelBackground-D5SzHhl_.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import { useState as C, useRef as u, useLayoutEffect as N } from "react";
 import { UserAvatar as y } from "./Icons/UserAvatar.es.js";

package/dist/DialogModal.es.js

@@ -1,78 +1,84 @@
 import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { forwardRef as h, memo as r, useState as D, useRef as p, useCallback as n, useImperativeHandle as R } from "react";
+import { forwardRef as y, memo as r, useState as D, useRef as x, useCallback as l, useImperativeHandle as k } from "react";
 import { c as j } from "./cn-B6yFEsav.js";
-const b = h(
-  ({ children: e, onClose: t, className: a }, i) => {
-    const [s, l] = D(!1), [c, f] = D(null), x = p(t), u = p(c);
-    x.current = t, u.current = c;
-    const m = n((g) => {
-      f(g ?? null), l(!0);
-    }, []), d = n(() => {
-      l(!1), x.current?.(u.current), setTimeout(() => f(null), 300);
+const C = y(
+  ({ children: e, onClose: t, className: c }, i) => {
+    const [n, s] = D(!1), [u, g] = D(null), f = x(t), p = x(u);
+    f.current = t, p.current = u;
+    const m = l((a) => {
+      g(a ?? null), s(!0);
+    }, []), d = l(() => {
+      s(!1), f.current?.(p.current), setTimeout(() => g(null), 300);
     }, []);
-    return R(
+    return k(
       i,
       () => ({
         open: m,
         close: d,
-        isOpen: s,
-        getContext: () => u.current
+        isOpen: n,
+        getContext: () => p.current
       }),
-      [m, d, s]
-    ), /* @__PURE__ */ o.jsx(o.Fragment, { children: s && /* @__PURE__ */ o.jsx(
+      [m, d, n]
+    ), /* @__PURE__ */ o.jsx(o.Fragment, { children: n && /* @__PURE__ */ o.jsxs(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
         onClick: d,
-        children: /* @__PURE__ */ o.jsxs(
-          "div",
-          {
-            className: j(
-              "bg-neutral-default-default w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
-              a
-            ),
-            onClick: (g) => g.stopPropagation(),
-            children: [
-              /* @__PURE__ */ o.jsx("div", { className: "absolute bg-transparent -inset-4 z-[-1]" }),
-              typeof e == "function" ? e(c) : e
-            ]
-          }
-        )
+        children: [
+          /* @__PURE__ */ o.jsx(
+            "div",
+            {
+              onClick: (a) => a.stopPropagation(),
+              className: "absolute bg-transparent z-[-1]  w-[calc(75%+10px)] h-[calc(75%+10px)] xl:w-[calc(75%+30px)] xl:h-[calc(83.33%+30px)] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2  "
+            }
+          ),
+          /* @__PURE__ */ o.jsx(
+            "div",
+            {
+              onClick: (a) => a.stopPropagation(),
+              className: j(
+                "bg-neutral-default-default  w-3/4 h-3/4 xl:w-3/4 xl:h-10/12 rounded-lg shadow-lg border-neutral-strong-default border relative p-6",
+                c
+              ),
+              children: typeof e == "function" ? e(u) : e
+            }
+          )
+        ]
       }
     ) });
   }
 );
-b.displayName = "Dialog";
-const C = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: j("flex flex-col gap-4 h-full"), children: e }) }));
-C.displayName = "DialogContent";
+C.displayName = "Dialog";
+const b = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: /* @__PURE__ */ o.jsx("div", { className: j("flex flex-col gap-4 h-full"), children: e }) }));
+b.displayName = "DialogContent";
 const N = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("h1", { className: t, children: e }));
 N.displayName = "DialogTitle";
+const h = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
+h.displayName = "DialogHeader";
 const v = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-v.displayName = "DialogHeader";
-const y = r(({ children: e, className: t }) => /* @__PURE__ */ o.jsx("div", { className: t, children: e }));
-y.displayName = "DialogFooter";
-const k = Object.assign(b, {
-  Content: C,
-  Header: v,
-  Footer: y,
+v.displayName = "DialogFooter";
+const w = Object.assign(C, {
+  Content: b,
+  Header: h,
+  Footer: v,
   Title: N
 });
-k.displayName = "DialogModal";
+w.displayName = "DialogModal";
 const H = () => {
-  const e = p(null), t = n((l) => {
-    e.current?.open(l);
-  }, []), a = n(() => {
+  const e = x(null), t = l((s) => {
+    e.current?.open(s);
+  }, []), c = l(() => {
     e.current?.close();
-  }, []), i = n(() => e.current?.isOpen ?? !1, []), s = n(() => e.current?.getContext() ?? null, []);
+  }, []), i = l(() => e.current?.isOpen ?? !1, []), n = l(() => e.current?.getContext() ?? null, []);
   return {
     ref: e,
     open: t,
-    close: a,
+    close: c,
     isOpen: i,
-    getContext: s
+    getContext: n
   };
 };
 export {
-  k as default,
+  w as default,
   H as useDialogControl
 };

package/dist/Input.es.js

@@ -2,7 +2,7 @@ import { j as t } from "./jsx-runtime-GkKLlHH4.js";
 import { c as e } from "./cn-B6yFEsav.js";
 import { memo as q, forwardRef as V, useState as F } from "react";
 import ee from "./Spinner.es.js";
-import { u as te } from "./useLabelBackground-BDIHUdND.js";
+import { u as te } from "./useLabelBackground-D5SzHhl_.js";
 import { H as re } from "./HelperComponent-ljsn0xD6.js";
 import { EyeVisibility as oe } from "./Icons/EyeVisibility.es.js";
 import { EyeVisibilityOff as se } from "./Icons/EyeVisibilityOff.es.js";

package/dist/NotificationCard.es.js

@@ -1,50 +1,57 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { useCallback as h } from "react";
 import { c as o } from "./cn-B6yFEsav.js";
-import x from "./Avatar.es.js";
-import p from "./Button.es.js";
-const v = ({ user: i, body: t, date: a, actions: s, isNew: d, className: m, metadata: r }) => {
-  const f = typeof t == "function" ? t(r) : t, c = a instanceof Date ? `${a.toLocaleDateString("es-AR", { day: "2-digit", month: "2-digit", year: "numeric" })} a las ${a.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit", hour12: !1 })}` : a;
-  return /* @__PURE__ */ e.jsxs("article", { className: o("flex flex-col gap-3 p-3 rounded-md bg-neutral-default-default ", m), children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+import b from "./Avatar.es.js";
+import j from "./Button.es.js";
+const z = ({ user: m, body: s, date: a, actions: r, read: d, className: f, metadata: t, onClick: i }) => {
+  const c = typeof s == "function" ? s(t) : s, u = a instanceof Date ? `${a.toLocaleDateString("es-AR", { day: "2-digit", month: "2-digit", year: "numeric" })} a las ${a.toLocaleTimeString("es-AR", { hour: "2-digit", minute: "2-digit", hour12: !1 })}` : a, x = h(
+    () => {
+      i?.(t);
+    },
+    [i, t]
+  );
+  return /* @__PURE__ */ e.jsxs("article", { className: o("flex flex-col gap-3 p-3 rounded-md bg-neutral-default-default ", f), onClick: x, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: o("flex flex-col gap-2", i && "cursor-pointer"), children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2 items-start w-full", children: [
         /* @__PURE__ */ e.jsxs("div", { className: " relative min-w-max", children: [
-          d && /* @__PURE__ */ e.jsx("div", { className: "size-3 border border-neutral-default bg-(--pyrion-orange-500) rounded-full absolute top-0 left-0 z-20" }),
+          !d && /* @__PURE__ */ e.jsx("div", { className: "size-3 border border-neutral-default bg-(--pyrion-orange-500) rounded-full absolute top-0 left-0 -translate-x-1/2 -translate-y-1/2 z-10" }),
           /* @__PURE__ */ e.jsx(
-            x,
+            b,
             {
-              imageUrl: i.profile_picture,
-              fallbackText: i.name,
+              imageUrl: m.profile_picture,
+              fallbackText: m.name,
               sizeFallback: "xs",
               sizeImage: "xs"
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "text-neutral-default-default prometeo-fonts-body-medium", children: f })
+        /* @__PURE__ */ e.jsx("div", { className: "text-neutral-default-default prometeo-fonts-body-medium", children: c })
       ] }),
-      /* @__PURE__ */ e.jsx("p", { className: "text-neutral-medium-default prometeo-fonts-body-xsmall text-right", children: c })
+      /* @__PURE__ */ e.jsx("p", { className: "text-neutral-medium-default prometeo-fonts-body-xsmall text-right", children: u })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 w-full", children: s?.map((l, n) => {
+    /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 w-full", children: r?.map((l, n) => {
       if (l.hidden)
         return null;
-      const u = () => {
-        l.onClick(r);
+      const p = (g) => {
+        g.stopPropagation(), l.onClick?.(t);
       };
       return /* @__PURE__ */ e.jsx(
-        p,
+        j,
         {
-          className: o("flex-1 h-8", n === 0 && s.length > 1 && "order-2"),
+          className: o("flex-1 h-8", n === 0 && r.length > 1 && "order-2"),
           animate: !1,
           animateIcon: !1,
           label: l.label,
-          onClick: u,
-          variant: l.variant || s.length > 1 ? n === 0 ? "fill" : "text" : "fill",
+          onClick: p,
+          variant: l.variant || r.length > 1 ? n === 0 ? "fill" : "text" : "fill",
           disabled: l.disabled,
           size: "small"
-        }
+        },
+        l.label + n
       );
     }) })
   ] });
 };
 export {
-  v as default
+  z as default
 };