prometeo-design-system 7.4.7 → 7.4.8

package/dist/AttachInput.es.js

@@ -1,7 +1,7 @@
 import { j as t } from "./jsx-runtime-GkKLlHH4.js";
 import { c as o } from "./cn-B6yFEsav.js";
-import { memo as P, forwardRef as E, useCallback as G } from "react";
-import { useDropzone as H } from "react-dropzone";
+import { memo as E, forwardRef as G, useCallback as H } from "react";
+import { useDropzone as P } from "react-dropzone";
 import _ from "./CardBackground.es.js";
 import q from "./PlainTooltip.es.js";
 import K from "./HelperComponent.es.js";
@@ -77,7 +77,7 @@ const W = i(
     return `Máximo ${e} ${e === 1 ? "archivo" : "archivos"} permitido${e === 1 ? "" : "s"}`;
   const s = r.length;
   return s === 1 ? "El archivo no pudo cargarse" : `${s} archivos no pudieron cargarse`;
-}, ee = (r, e) => e ? "reject" : r ? "active" : "idle", w = E(
+}, ee = (r, e) => e ? "reject" : r ? "active" : "idle", w = G(
   ({
     onFilesAccepted: r,
     onFilesRejected: e,
@@ -95,7 +95,7 @@ const W = i(
     cardBackground: b,
     ...C
   }, M) => {
-    const D = G(
+    const D = H(
       (j, y) => {
         j.length > 0 && r?.(j), y.length > 0 && e?.(y);
       },
@@ -106,7 +106,7 @@ const W = i(
       isDragActive: k,
       isDragReject: A,
       fileRejections: g
-    } = H({
+    } = P({
       onDrop: D,
       accept: m,
       maxFiles: h,
@@ -213,7 +213,7 @@ const W = i(
   }
 );
 w.displayName = "AttachInput";
-const ue = P(w);
+const ue = E(w);
 export {
   ue as AttachInput,
   ue as default

package/dist/IconButton.es.js

@@ -1,6 +1,6 @@
 import { j as n } from "./jsx-runtime-GkKLlHH4.js";
 import { memo as F, forwardRef as G, useMemo as H, isValidElement as I } from "react";
-import { i as m } from "./iconUtils-rTOfKDxE.js";
+import { i as v } from "./iconUtils-rTOfKDxE.js";
 import J from "./Spinner.es.js";
 import { c as x } from "./index-BOQuZ0gG.js";
 import { c as h } from "./cn-B6yFEsav.js";
@@ -151,8 +151,8 @@ const u = {
   variants: {
     size: {
       small: "radius-small",
-      medium: "radius-small",
-      large: "radius-medium"
+      medium: "radius-medium",
+      large: "radius-large"
     },
     variant: {
       fill: "",
@@ -201,7 +201,7 @@ const u = {
     color: "brand",
     animation: !0
   }
-}), v = x(w.icon, {
+}), m = x(w.icon, {
   variants: {
     size: {
       small: u.small.icon,
@@ -285,10 +285,10 @@ const u = {
     let a = null;
     if (r)
       if (I(r))
-        m(r.type) ? a = /* @__PURE__ */ n.jsx(
+        v(r.type) ? a = /* @__PURE__ */ n.jsx(
           "span",
           {
-            className: v({
+            className: m({
               size: o,
               variant: s,
               color: c,
@@ -301,10 +301,10 @@ const u = {
       else if (typeof r == "function")
         try {
           const t = r();
-          I(t) && (m(t.type) ? a = /* @__PURE__ */ n.jsx(
+          I(t) && (v(t.type) ? a = /* @__PURE__ */ n.jsx(
             "span",
             {
-              className: v({
+              className: m({
                 size: o,
                 variant: s,
                 color: c,
@@ -317,10 +317,10 @@ const u = {
         } catch {
           a = null;
         }
-      else typeof r == "object" && (m(r) ? a = /* @__PURE__ */ n.jsx(
+      else typeof r == "object" && (v(r) ? a = /* @__PURE__ */ n.jsx(
         "span",
         {
-          className: v({
+          className: m({
             size: o,
             variant: s,
             color: c,
@@ -330,12 +330,12 @@ const u = {
           children: r
         }
       ) : a = r);
-    else if (b && m(b)) {
+    else if (b && v(b)) {
       const t = b;
       a = /* @__PURE__ */ n.jsx(
         "span",
         {
-          className: v({
+          className: m({
             size: o,
             variant: s,
             color: c,

package/dist/ListItem.es.js

@@ -1,21 +1,23 @@
 import { j as a } from "./jsx-runtime-GkKLlHH4.js";
-import { i as _ } from "./iconUtils-rTOfKDxE.js";
+import { i as U } from "./iconUtils-rTOfKDxE.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import { c as m } from "./index-BOQuZ0gG.js";
-import { memo as g, forwardRef as j, useMemo as h } from "react";
-import y from "./CheckBox.es.js";
-import U from "./Divider.es.js";
-import { ChevronDown as F } from "./Icons/ChevronDown.es.js";
-import { A as K } from "./AvatarBase-D6H-sXbg.js";
-const M = {
+import { memo as x, forwardRef as C, useMemo as v } from "react";
+import F from "./CheckBox.es.js";
+import K from "./Divider.es.js";
+import M from "./RadioButton.es.js";
+import Z from "./Check.es.js";
+import { ChevronDown as q } from "./Icons/ChevronDown.es.js";
+import { A as G } from "./AvatarBase-D6H-sXbg.js";
+const H = {
   size: "small",
   name: "A B"
-}, Z = g(function({
+}, J = x(function({
   avatarProps: e,
-  className: t
+  className: s
 }) {
-  return /* @__PURE__ */ a.jsx(K, { ...e, className: d(t, "shrink-0") });
-}), q = m("group flex flex-col w-full py-1 gap-2 ", {
+  return /* @__PURE__ */ a.jsx(G, { ...e, className: d(s, "shrink-0") });
+}), Q = m("group flex flex-col w-full py-1 gap-2 ", {
   variants: {
     size: {
       small: "",
@@ -23,7 +25,7 @@ const M = {
       large: ""
     }
   }
-}), G = m("flex items-center gap-2 transition-all duration-300 ease-in-out", {
+}), W = m("flex items-center gap-2 transition-all duration-300 ease-in-out", {
   variants: {
     size: {
       small: "p-1 pl-2 radius-medium",
@@ -49,7 +51,7 @@ const M = {
       class: "bg-transparent group-hover:bg-transparent group-active:bg-transparent cursor-default"
     }
   ]
-}), S = m(" transition-all duration-300 ease-in-out", {
+}), j = m(" transition-all duration-300 ease-in-out", {
   variants: {
     isSelected: {
       true: "",
@@ -72,7 +74,7 @@ const M = {
       class: "icon-neutral-tertiary-default group-hover:icon-neutral-tertiary-hover group-active:icon-neutral-tertiary-pressed"
     }
   ]
-}), H = "flex gap-1 items-center flex-1 overflow-hidden", J = m("flex flex-col gap-0 p-0 overflow-hidden", {
+}), X = "flex gap-1 items-center flex-1 overflow-hidden", Y = m("flex flex-col gap-0 p-0 overflow-hidden", {
   variants: {
     size: {
       small: "",
@@ -80,7 +82,7 @@ const M = {
       large: ""
     }
   }
-}), Q = m("transition-all duration-300 ease-in-out text-left truncate", {
+}), $ = m("transition-all duration-300 ease-in-out text-left truncate", {
   variants: {
     size: {
       small: "",
@@ -144,7 +146,7 @@ const M = {
       class: "text-disabled-default group-hover:text-disabled-default group-active:text-disabled-default"
     }
   ]
-}), W = m("text-left transition-all duration-300 ease-in-out truncate", {
+}), ee = m("text-left transition-all duration-300 ease-in-out truncate", {
   variants: {
     size: {
       small: "pyrion-fonts-body-xsmall ",
@@ -184,83 +186,84 @@ const M = {
       class: ""
     }
   ]
-}), C = {
+}), k = {
   small: 16,
   medium: 20,
   large: 24
-}, X = g(function({
+}, ae = x(function({
   icon: e,
-  size: t,
-  className: r,
-  onClick: n
+  size: s,
+  className: l,
+  onClick: i
 }) {
-  const s = (f) => {
-    f.preventDefault(), n(f);
+  const t = (f) => {
+    f.preventDefault(), i(f);
   };
-  return /* @__PURE__ */ a.jsx("button", { type: "button", onClick: s, className: d("cursor-pointer", r), children: /* @__PURE__ */ a.jsx(e, { size: C[t] }) });
+  return /* @__PURE__ */ a.jsx("button", { type: "button", onClick: t, className: d("cursor-pointer", l), children: /* @__PURE__ */ a.jsx(e, { size: k[s] }) });
 });
-function z(i, e, t, r) {
-  let n = null;
-  return _(i) && (n = i), n ? r ? /* @__PURE__ */ a.jsx(
-    X,
+function z(n, e, s, l) {
+  let i = null;
+  return U(n) && (i = n), i ? l ? /* @__PURE__ */ a.jsx(
+    ae,
     {
-      icon: n,
+      icon: i,
       size: e,
-      className: t,
-      onClick: r
+      className: s,
+      onClick: l
     }
-  ) : /* @__PURE__ */ a.jsx(n, { size: C[e], className: t }) : /* @__PURE__ */ a.jsx("span", { className: d("size-6 invisible") });
+  ) : /* @__PURE__ */ a.jsx(i, { size: k[e], className: s }) : /* @__PURE__ */ a.jsx("span", { className: d("size-6 invisible") });
 }
-const Y = j(({ elementType: i, ...e }, t) => {
-  const r = d("menu-list-item", e.className);
-  return i === "button" ? /* @__PURE__ */ a.jsx("button", { ref: t, ...e, className: r, children: e.children }) : i === "a" ? /* @__PURE__ */ a.jsx("a", { ref: t, ...e, className: r, children: e.children }) : /* @__PURE__ */ a.jsx("div", { ref: t, ...e, className: r, children: e.children });
-}), de = g(j(
-  function(e, t) {
+const te = C(({ elementType: n, ...e }, s) => {
+  const l = d("menu-list-item", e.className);
+  return n === "button" ? /* @__PURE__ */ a.jsx("button", { ref: s, ...e, className: l, children: e.children }) : n === "a" ? /* @__PURE__ */ a.jsx("a", { ref: s, ...e, className: l, children: e.children }) : /* @__PURE__ */ a.jsx("div", { ref: s, ...e, className: l, children: e.children });
+}), be = x(C(
+  function(e, s) {
     const {
-      size: r = "medium",
-      elementType: n = "div",
-      isSelected: s = !1,
+      size: l = "medium",
+      elementType: i = "div",
+      isSelected: t = !1,
       showDivider: f = !0,
-      disabled: l = !1,
-      slot: $,
+      disabled: r = !1,
+      slot: se,
       icon: N,
       leadingIconClassName: I,
-      trailingIconClassName: k,
-      checkbox: T,
-      showSelectionComponent: A,
-      leadingIcon: V,
-      leadingSlot: p,
-      showTrailingIcon: w,
-      trailingIcon: D,
-      onTrailingIconClick: L,
+      trailingIconClassName: T,
+      checkbox: A,
+      showSelectionComponent: V,
+      leadingIcon: w,
+      leadingSlot: b,
+      showTrailingIcon: D,
+      trailingIcon: L,
+      onTrailingIconClick: P,
       avatarProps: o,
-      role: P,
-      ...E
-    } = e, R = t, b = !!(T || A), v = V || N, c = r ?? "small", x = typeof p == "function" ? p({ isSelected: s, disabled: l, checkbox: b }) : p, B = h(
+      role: R,
+      selectionComponent: p,
+      ...B
+    } = e, E = s, g = !!(A || V), h = w || N, c = l ?? "small", y = typeof b == "function" ? b({ isSelected: t, disabled: r, checkbox: g }) : b, O = v(
       () => !!o && ("imageUrl" in o || "name" in o),
       [o]
-    ), O = h(
-      () => ({ ...M, ...o }),
+    ), _ = v(
+      () => ({ ...H, ...o }),
       [o?.imageUrl, o?.name]
-    );
+    ), S = v(() => p === "checkbox" ? /* @__PURE__ */ a.jsx(F, { checked: t, readOnly: !0, disabled: r }) : p === "radio-button" ? /* @__PURE__ */ a.jsx(M, { checked: t, readOnly: !0, disabled: r }) : p === "check" ? /* @__PURE__ */ a.jsx(Z, { checked: t, readOnly: !0, disabled: r }) : null, [p, t, r]);
     return /* @__PURE__ */ a.jsxs(
-      Y,
+      te,
       {
-        ref: R,
-        elementType: n,
-        ...E,
-        role: P ?? "menuitem",
-        className: q({ size: c }),
-        "aria-disabled": l ? "true" : "false",
-        "data-selected": s ? "true" : "false",
+        ref: E,
+        elementType: i,
+        ...B,
+        role: R ?? "menuitem",
+        className: Q({ size: c }),
+        "aria-disabled": r ? "true" : "false",
+        "data-selected": t ? "true" : "false",
         children: [
-          /* @__PURE__ */ a.jsxs("div", { className: G({ size: c, isSelected: s, disabled: l }), children: [
-            b && (e.onSelectionClick ? /* @__PURE__ */ a.jsx(
+          /* @__PURE__ */ a.jsxs("div", { className: W({ size: c, isSelected: t, disabled: r }), children: [
+            g && (e.onSelectionClick ? /* @__PURE__ */ a.jsx(
               "span",
               {
                 "data-selection-click": !0,
                 role: "checkbox",
-                "aria-checked": s,
+                "aria-checked": t,
                 onClick: (u) => {
                   u.stopPropagation(), e.onSelectionClick?.();
                 },
@@ -269,29 +272,29 @@ const Y = j(({ elementType: i, ...e }, t) => {
                 },
                 tabIndex: 0,
                 className: "cursor-pointer",
-                children: /* @__PURE__ */ a.jsx(y, { checked: s, readOnly: !0, disabled: l })
+                children: S
               }
-            ) : /* @__PURE__ */ a.jsx(y, { checked: s, readOnly: !0, disabled: l })),
-            x ?? (!b && v && z(
-              v,
+            ) : S),
+            y ?? (!g && h && z(
+              h,
               c,
-              d(S({ isSelected: s, disabled: l }), I)
+              d(j({ isSelected: t, disabled: r }), I)
             )),
-            /* @__PURE__ */ a.jsxs("div", { className: H, children: [
-              B && /* @__PURE__ */ a.jsx(Z, { avatarProps: O }),
-              /* @__PURE__ */ a.jsxs("div", { className: J({ size: c }), children: [
-                e.label && /* @__PURE__ */ a.jsx("p", { className: d(Q({ size: c, isSelected: s, disabled: l }), e.labelClassName), children: e.label }),
-                e.supportingText && /* @__PURE__ */ a.jsx("p", { title: e.supportingText, className: W({ size: c, isSelected: s, disabled: l }), children: e.supportingText })
+            /* @__PURE__ */ a.jsxs("div", { className: X, children: [
+              O && /* @__PURE__ */ a.jsx(J, { avatarProps: _ }),
+              /* @__PURE__ */ a.jsxs("div", { className: Y({ size: c }), children: [
+                e.label && /* @__PURE__ */ a.jsx("p", { className: d($({ size: c, isSelected: t, disabled: r }), e.labelClassName), children: e.label }),
+                e.supportingText && /* @__PURE__ */ a.jsx("p", { title: e.supportingText, className: ee({ size: c, isSelected: t, disabled: r }), children: e.supportingText })
               ] })
             ] }),
-            z(D || (w ? F : null), "large", d(S({ isSelected: s, disabled: l }), k), L)
+            z(L || (D ? q : null), "large", d(j({ isSelected: t, disabled: r }), T), P)
           ] }),
-          f && /* @__PURE__ */ a.jsx(U, {})
+          f && /* @__PURE__ */ a.jsx(K, {})
         ]
       }
     );
   }
 ));
 export {
-  de as default
+  be as default
 };

package/dist/PlainTooltip.es.js

@@ -1,72 +1,93 @@
-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 { 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), r = v(null), n = v(null), o = A(() => {
-    if (typeof window > "u")
-      return;
-    const e = r.current, i = s.current;
-    if (!e || !i)
-      return;
-    const l = window.getComputedStyle(e).display, a = e.style.display, f = e.style.visibility, m = e.style.translate, h = l === "none";
-    h && (e.style.visibility = "hidden", e.style.display = "block"), m && 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 c = e.getBoundingClientRect(), I = window.innerWidth, N = window.innerHeight, b = Math.max(0, 0 - c.left), M = Math.max(0, c.right - I), L = Math.max(0, 0 - c.top), P = Math.max(0, c.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 = a, e.style.visibility = f);
-  }, [d]);
-  if (u(() => {
-    const t = s.current, e = r.current;
-    if (!t || !e)
-      return;
-    const i = (f, m) => {
-      n.current = setTimeout(() => {
-        m();
-      }, f);
-    }, l = () => {
-      n.current && clearTimeout(n.current), o(), i(x, () => {
-        r.current?.classList.add("visible");
-      });
-    }, a = () => {
-      n.current && clearTimeout(n.current), i(R, () => {
-        r.current?.classList.remove("visible");
-      });
+import { j as R } from "./jsx-runtime-GkKLlHH4.js";
+import { c as N } from "./cn-B6yFEsav.js";
+import { u as O } from "./useFloatingPosition-CSrirTF5.js";
+import { memo as z, useState as A, useRef as d, useId as F, useCallback as u, useEffect as p, Children as K, isValidElement as S, cloneElement as V } from "react";
+import { createPortal as _ } from "react-dom";
+const q = ({
+  title: j,
+  children: n,
+  placement: k = "top",
+  offset: I = 6,
+  delayToShow: v = 500,
+  delayToClose: y = 1e3,
+  className: P,
+  attachToParent: g = !1,
+  disabled: a = !1,
+  ref: s
+}) => {
+  const [o, c] = A(!1), m = d(null), E = d(null), r = d(null), f = F(), { floatingStyles: w, isPositioned: C } = O({
+    triggerRef: m,
+    floatingRef: E,
+    placement: k,
+    offset: I,
+    attachToParent: g,
+    enabled: o
+  }), t = u(() => {
+    r.current && (clearTimeout(r.current), r.current = null);
+  }, []), i = u(() => {
+    t(), r.current = setTimeout(() => c(!0), v);
+  }, [t, v]), l = u(() => {
+    t(), r.current = setTimeout(() => c(!1), y);
+  }, [t, y]), b = u(() => {
+    t(), c(!1);
+  }, [t]), B = u(
+    (e) => {
+      m.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+    },
+    [s]
+  );
+  if (p(() => {
+    const e = m.current;
+    if (!(!e || a))
+      return e.addEventListener("mouseenter", i), e.addEventListener("mouseleave", l), e.addEventListener("focusin", i), e.addEventListener("focusout", l), () => {
+        e.removeEventListener("mouseenter", i), e.removeEventListener("mouseleave", l), e.removeEventListener("focusin", i), e.removeEventListener("focusout", l);
+      };
+  }, [a, i, l]), p(() => {
+    if (!o) return;
+    const e = (D) => {
+      D.key === "Escape" && b();
     };
-    return t.addEventListener("mouseenter", l), t.addEventListener("mouseleave", a), () => {
-      t.removeEventListener("mouseenter", l), t.removeEventListener("mouseleave", a);
-    };
-  }, [x, R, o]), u(() => {
-    o();
-  }, [o, w]), u(() => {
-    if (typeof window > "u")
-      return;
-    const t = () => {
-      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(() => () => {
-    n.current && clearTimeout(n.current);
-  }, []), D) return p;
-  const g = /* @__PURE__ */ y.jsx("span", { ref: r, className: _(
-    "plain-tooltip ",
-    "absolute z-999",
-    "bg-neutral-tertiary-default px-2 py-1 radius-small w-max",
-    "text-neutral-default-default pyrion-fonts-body-small text-balance ",
-    B,
-    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,
-    C(g, document.body)
-  ] }) : /* @__PURE__ */ y.jsxs("div", { ref: s, children: [
-    p,
-    g
-  ] });
-}, $ = j(G);
-$.displayName = "PlainTooltip";
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [o, b]), p(() => () => t(), [t]), a) return n;
+  const x = K.count(n) === 1 && S(n);
+  let L = n;
+  if (o && x) {
+    const e = n.props["aria-describedby"];
+    L = V(n, {
+      "aria-describedby": [e, f].filter(Boolean).join(" ")
+    });
+  }
+  const T = /* @__PURE__ */ R.jsx(
+    "span",
+    {
+      ref: E,
+      id: f,
+      role: "tooltip",
+      style: w,
+      className: N(
+        "tooltip",
+        C && "visible",
+        "z-999 bg-neutral-tertiary-default px-2 py-1 radius-small",
+        "text-neutral-default-default pyrion-fonts-body-small text-balance max-w-[200px]",
+        P
+      ),
+      children: j
+    }
+  );
+  return /* @__PURE__ */ R.jsxs(
+    "div",
+    {
+      ref: B,
+      ...o && !x ? { "aria-describedby": f } : void 0,
+      children: [
+        L,
+        o && (g ? T : typeof document < "u" && _(T, document.body))
+      ]
+    }
+  );
+}, G = z(q);
+G.displayName = "Tooltip";
 export {
-  $ as default
+  G as PlainTooltip,
+  G as default
 };