prometeo-design-system 4.3.0 → 4.3.1

package/dist/Input.es.js

@@ -2,13 +2,13 @@ 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-D5SzHhl_.js";
+import { u as te } from "./useLabelBackground-BDIHUdND.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";
 import le from "./Button.es.js";
 import { Close as ae } from "./Icons/Close.es.js";
-const x = {
+const m = {
   default: {
     container: "",
     input: e(
@@ -44,45 +44,45 @@ const x = {
   }
 }, $ = V(
   ({
-    label: h,
-    icon: o,
-    iconPosition: l = "left",
+    label: x,
+    icon: s,
+    iconPosition: d = "left",
     onChange: I,
     value: S,
-    name: b,
+    name: h,
     width: i = "100%",
-    height: a,
-    variant: u = "default",
-    labelVariant: s = "default",
+    height: l,
+    variant: a = "default",
+    labelVariant: o = "default",
     size: E = "medium",
-    disabled: f = !1,
+    disabled: u = !1,
     type: r = "text",
     isFetching: n,
-    errorComponent: g,
-    helperComponent: w,
+    errorComponent: b,
+    helperComponent: g,
     placeholder: L,
-    required: N = !1,
-    onFocus: R,
-    onBlur: k,
-    onKeyDown: B,
-    onKeyUp: D,
-    className: P,
-    style: M,
-    readOnly: O = !1,
-    onClear: m,
+    required: j = !1,
+    onFocus: P,
+    onBlur: R,
+    onKeyDown: k,
+    onKeyUp: B,
+    className: C,
+    style: D,
+    readOnly: M = !1,
+    onClear: N,
     onClickIcon: z,
     ...v
-  }, T) => {
-    const [y, A] = F(!1), { ref: C } = te();
-    let p = E;
-    a && (p = "customHeight");
+  }, O) => {
+    const [w, T] = F(!1), { ref: A } = te();
+    let f = E;
+    l && (f = "customHeight");
     const c = {
       small: {
         container: "text-sm",
         input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
         icon: "w-4 h-4 right-3"
       },
       medium: {
@@ -90,7 +90,7 @@ const x = {
         input: "h-12 px-3 prometeo-fonts-body-large",
         label: ` prometeo-fonts-label-large 
             peer-focus:prometeo-fonts-label-large  
-            peer-placeholder-shown:${s === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
         icon: "w-5 h-5 right-3"
       },
       large: {
@@ -106,113 +106,112 @@ const x = {
         icon: "w-6 h-6 right-3"
       }
     }, G = () => {
-      A(!y);
-    }, j = {};
-    i && i !== "100%" && (j.width = i), a && (j.height = a);
-    const H = u === "error" && g, J = !H && w, K = r === "password", Q = () => s === "static" ? "-top-1 -translate-y-full left-0 pl-3" : o ? `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${l === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${d ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, U = () => a ? c.customHeight.label : c[p].label, W = () => a ? { height: a } : {}, X = () => s === "default" ? h : L || h || "", Y = () => K ? !o && !m ? "pr-10" : l === "left" ? "pl-10 pr-10" : "pr-16" : m ? o ? l === "left" ? "pl-10 pr-7" : "pr-10 pl-3" : "pr-7" : o ? l === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = s === "default" && "transition-all duration-200 ease-in-out", d = g || w;
+      T(!w);
+    }, y = {};
+    i && i !== "100%" && (y.width = i), l && (y.height = l);
+    const H = a === "error" && b, J = !H && g, K = r === "password", Q = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : s ? `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${d === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, U = () => l ? c.customHeight.label : c[f].label, W = () => l ? { height: l } : {}, X = () => o === "default" ? x : L || x || "", Y = () => K ? s ? d === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : s ? d === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = o === "default" && "transition-all duration-200 ease-in-out", p = b || g;
     return /* @__PURE__ */ t.jsxs(
       "div",
       {
         className: e(
           "relative",
-          c[p].container,
+          c[f].container,
           !i && "w-full",
           "bg-inherit",
-          s === "static" && "mt-2",
-          P
+          o === "static" && "mt-2",
+          C
         ),
-        style: { ...M, ...j },
+        style: { ...D, ...y },
         children: [
           /* @__PURE__ */ t.jsx(
             "input",
             {
-              id: b,
-              name: b,
-              ref: T,
+              id: h,
+              name: h,
+              ref: O,
               value: S,
               placeholder: X(),
-              type: r === "password" && y ? "text" : r,
+              type: r === "password" && w ? "text" : r,
               className: e(
                 "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
                 "focus:outline-none px-3",
-                s === "default" && "placeholder:text-transparent",
-                s === "static" && "placeholder:text-neutral-medium-default ",
-                x[u].input,
-                c[p].input,
-                o && "pr-10",
-                f && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
-                x[u].container,
+                o === "default" && "placeholder:text-transparent",
+                o === "static" && "placeholder:text-neutral-medium-default ",
+                m[a].input,
+                c[f].input,
+                s && "pr-10",
+                u && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                m[a].container,
                 Y()
               ),
               style: W(),
               onChange: I,
-              onFocus: R,
-              onBlur: k,
-              disabled: f,
-              required: N,
-              onKeyDown: B,
-              onKeyUp: D,
+              onFocus: P,
+              onBlur: R,
+              disabled: u,
+              required: j,
+              onKeyDown: k,
+              onKeyUp: B,
               defaultValue: v.defaultValue,
-              readOnly: O,
+              readOnly: M,
               ...v
             }
           ),
           /* @__PURE__ */ t.jsx(
             "label",
             {
-              ref: C,
-              htmlFor: b,
+              ref: A,
+              htmlFor: h,
               className: e(
                 "absolute left-3 pointer-events-none px-1 z-10",
                 Z,
                 U(),
-                x[u].label,
+                m[a].label,
                 Q(),
-                N && "after:content-['*'] after:text-error-default after:ml-1",
-                f && "text-neutral-medium-disabled prometeo-fonts-label-large"
+                j && "after:content-['*'] after:text-error-default after:ml-1",
+                u && "text-neutral-medium-disabled prometeo-fonts-label-large"
               ),
-              children: h
+              children: x
             }
           ),
-          (o || r === "password" || n) && /* @__PURE__ */ t.jsx(
+          (s || r === "password" || n) && /* @__PURE__ */ t.jsx(
             "button",
             {
               tabIndex: -1,
               type: "button",
               className: e(
-                `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
-                c[p].icon,
-                x[u].icon,
+                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
+                c[f].icon,
+                m[a].icon,
                 (r === "password" || z) && !n ? "cursor-pointer" : "pointer-events-none",
-                l === "right" ? "right-3" : "left-3"
+                d === "right" ? "right-3" : "left-3"
               ),
               onClick: n ? void 0 : r === "password" ? G : z,
               onMouseDown: (_) => r === "password" && !n && _.preventDefault(),
               children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
-                n && r !== "password" ? /* @__PURE__ */ t.jsx(ee, { variant: "sync", size: "small", className: "size-5" }) : o,
-                r === "password" && (y ? /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(se, { size: 24, className: "" }))
+                n && r !== "password" ? /* @__PURE__ */ t.jsx(ee, { variant: "sync", size: "small", className: "size-5" }) : s,
+                r === "password" && (w ? /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(se, { size: 24, className: "" }))
               ] })
             }
           ),
-          m && /* @__PURE__ */ t.jsx(
+          N && /* @__PURE__ */ t.jsx(
             le,
             {
               type: "button",
               className: e(
-                `absolute ${d ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
+                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
                 "size-6 p-1 rounded-full",
                 "hover:bg-neutral-medium-hover transition-colors",
-                f && "opacity-50 cursor-not-allowed",
-                (o && l === "right" || r === "password" || n) && "mr-9"
+                u && "opacity-50 cursor-not-allowed"
               ),
-              disabled: f,
-              onClick: m,
+              disabled: u,
+              onClick: N,
               variant: "text",
               color: "secondary",
               icon: /* @__PURE__ */ t.jsx(ae, { size: 20, className: "" })
             }
           ),
-          d && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || J) && /* @__PURE__ */ t.jsx(re, { className: "absolute ", variant: u, children: g || w }) })
+          p && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (H || J) && /* @__PURE__ */ t.jsx(re, { className: "absolute ", variant: a, children: b || g }) })
         ]
       }
     );

package/dist/NotificationCard.es.js

@@ -1,57 +1,50 @@
 import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import { useCallback as h } from "react";
 import { c as o } from "./cn-B6yFEsav.js";
-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: [
+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: [
       /* @__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 -translate-x-1/2 -translate-y-1/2 z-10" }),
+          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" }),
           /* @__PURE__ */ e.jsx(
-            b,
+            x,
             {
-              imageUrl: m.profile_picture,
-              fallbackText: m.name,
+              imageUrl: i.profile_picture,
+              fallbackText: i.name,
               sizeFallback: "xs",
               sizeImage: "xs"
             }
           )
         ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "text-neutral-default-default prometeo-fonts-body-medium", children: c })
+        /* @__PURE__ */ e.jsx("div", { className: "text-neutral-default-default prometeo-fonts-body-medium", children: f })
       ] }),
-      /* @__PURE__ */ e.jsx("p", { className: "text-neutral-medium-default prometeo-fonts-body-xsmall text-right", children: u })
+      /* @__PURE__ */ e.jsx("p", { className: "text-neutral-medium-default prometeo-fonts-body-xsmall text-right", children: c })
     ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 w-full", children: r?.map((l, n) => {
+    /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 w-full", children: s?.map((l, n) => {
       if (l.hidden)
         return null;
-      const p = (g) => {
-        g.stopPropagation(), l.onClick?.(t);
+      const u = () => {
+        l.onClick(r);
       };
       return /* @__PURE__ */ e.jsx(
-        j,
+        p,
         {
-          className: o("flex-1 h-8", n === 0 && r.length > 1 && "order-2"),
+          className: o("flex-1 h-8", n === 0 && s.length > 1 && "order-2"),
           animate: !1,
           animateIcon: !1,
           label: l.label,
-          onClick: p,
-          variant: l.variant || r.length > 1 ? n === 0 ? "fill" : "text" : "fill",
+          onClick: u,
+          variant: l.variant || s.length > 1 ? n === 0 ? "fill" : "text" : "fill",
           disabled: l.disabled,
           size: "small"
-        },
-        l.label + n
+        }
       );
     }) })
   ] });
 };
 export {
-  z as default
+  v as default
 };

package/dist/PlainTooltip.es.js

@@ -1,62 +1,62 @@
 import { j as y } from "./jsx-runtime-GkKLlHH4.js";
 import { c as _ } from "./cn-B6yFEsav.js";
-import { memo as j, useRef as v, useCallback as A, useEffect as u } from "react";
+import { memo as j, useRef as v, useCallback as A, useEffect as a } from "react";
 import { createPortal as C } from "react-dom";
 const G = ({ title: w, children: p, delayToShow: x = 500, delayToClose: R = 1e3, className: B, attachToParent: d = !1, disabled: D = !1 }) => {
-  const s = v(null), n = v(null), r = v(null), o = A(() => {
+  const s = v(null), r = v(null), n = v(null), o = A(() => {
     if (typeof window > "u")
       return;
-    const e = n.current, i = s.current;
+    const e = r.current, i = s.current;
     if (!e || !i)
       return;
     const l = window.getComputedStyle(e).display, c = e.style.display, m = e.style.visibility, f = e.style.translate, h = l === "none";
     h && (e.style.visibility = "hidden", e.style.display = "block"), f && e.style.removeProperty("translate");
     const E = i.getBoundingClientRect();
     d ? (e.style.removeProperty("position"), e.style.removeProperty("left"), e.style.removeProperty("top")) : (e.style.setProperty("position", "fixed"), e.style.setProperty("left", `${E.right}px`), e.style.setProperty("top", `${E.bottom}px`));
-    const a = e.getBoundingClientRect(), I = window.innerWidth, N = window.innerHeight, b = Math.max(0, 0 - a.left), M = Math.max(0, a.right - I), L = Math.max(0, 0 - a.top), P = Math.max(0, a.bottom - N), O = b > 0 ? b + 16 : M > 0 ? -(M + 16) : 0, T = L > 0 ? L + 16 : P > 0 ? -(P + 16) : 0;
+    const u = e.getBoundingClientRect(), I = window.innerWidth, N = window.innerHeight, b = Math.max(0, 0 - u.left), M = Math.max(0, u.right - I), L = Math.max(0, 0 - u.top), P = Math.max(0, u.bottom - N), O = b > 0 ? b + 16 : M > 0 ? -(M + 16) : 0, T = L > 0 ? L + 16 : P > 0 ? -(P + 16) : 0;
     O === 0 && T === 0 ? e.style.removeProperty("translate") : e.style.setProperty("translate", `${O}px ${T}px`), h && (e.style.display = c, e.style.visibility = m);
   }, [d]);
-  if (u(() => {
-    const t = s.current, e = n.current;
+  if (a(() => {
+    const t = s.current, e = r.current;
     if (!t || !e)
       return;
     const i = (m, f) => {
-      r.current = setTimeout(() => {
+      n.current = setTimeout(() => {
         f();
       }, m);
     }, l = () => {
-      r.current && clearTimeout(r.current), o(), i(x, () => {
-        n.current?.classList.add("visible");
+      n.current && clearTimeout(n.current), o(), i(x, () => {
+        r.current?.classList.add("visible");
       });
     }, c = () => {
-      r.current && clearTimeout(r.current), i(R, () => {
-        n.current?.classList.remove("visible");
+      n.current && clearTimeout(n.current), i(R, () => {
+        r.current?.classList.remove("visible");
       });
     };
     return t.addEventListener("mouseenter", l), t.addEventListener("mouseleave", c), () => {
       t.removeEventListener("mouseenter", l), t.removeEventListener("mouseleave", c);
     };
-  }, [x, R, o]), u(() => {
+  }, [x, R, o]), a(() => {
     o();
-  }, [o, w]), u(() => {
+  }, [o, w]), a(() => {
     if (typeof window > "u")
       return;
     const t = () => {
-      n.current && n.current.classList.contains("visible") && o();
+      r.current && r.current.classList.contains("visible") && o();
     };
     return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
       window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
     };
-  }, [o]), u(() => () => {
-    r.current && clearTimeout(r.current);
+  }, [o]), a(() => () => {
+    n.current && clearTimeout(n.current);
   }, []), D) return p;
-  const g = /* @__PURE__ */ y.jsx("span", { ref: n, className: _(
+  const g = /* @__PURE__ */ y.jsx("span", { ref: r, className: _(
     "plain-tooltip ",
     "absolute z-999",
     "bg-neutral-weak-default px-2 py-1 rounded-lg w-max",
-    "text-neutral-strong-default prometeo-fonts-body-small text-balance ",
+    "text-neutral-strong-default prometeo-fonts-body-small ",
     B,
-    n.current?.innerText?.length && n.current?.innerText?.length > Math.floor(450 / 10) ? "w-max line-clamp-1" : "max-w-[200px] line-clamp-none"
+    r.current?.innerText?.length && r.current?.innerText?.length > Math.floor(450 / 10) ? "w-max line-clamp-1" : "max-w-[200px] line-clamp-none"
   ), children: w });
   return !d && typeof document < "u" ? /* @__PURE__ */ y.jsxs("div", { ref: s, children: [
     p,