prometeo-design-system 4.7.4 → 4.7.5

package/dist/Avatar.es.js

@@ -1,17 +1,19 @@
-import { j as t } from "./jsx-runtime-GkKLlHH4.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";
-function I({
-  imageUrl: s,
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { g as C } from "./useLabelBackground-D5SzHhl_.js";
+import { c as r } from "./cn-B6yFEsav.js";
+import { useState as N, useRef as d, useLayoutEffect as S } from "react";
+import y from "./Skeleton.es.js";
+import { UserAvatar as A } from "./Icons/UserAvatar.es.js";
+function B({
+  imageUrl: l,
   sizeImage: n = "md",
-  sizeFallback: e = "md",
-  fallbackText: d = "",
+  sizeFallback: t = "md",
+  fallbackText: f = "",
   subImageUrl: i,
-  fallbackType: c = "initials"
+  fallbackType: c = "initials",
+  isLoading: h = !1
 }) {
-  const [f, h] = C(!1), m = s && s.trim() !== "" && !f, g = (a) => a.split(" ").map((j) => j.charAt(0)).join("").toUpperCase().slice(0, 2), r = {
+  const [g, p] = N(!1), m = l && l.trim() !== "" && !g, w = (x) => x.split(" ").map((v) => v.charAt(0)).join("").toUpperCase().slice(0, 2), s = {
     xxxs: "w-6.5 h-6.5",
     xxs: "w-8 h-8",
     xs: "w-10 h-10",
@@ -19,7 +21,7 @@ function I({
     md: "w-24 h-24",
     lg: "w-32 h-32",
     xl: "w-40 h-40"
-  }, p = {
+  }, b = {
     xxxs: "text-[12px]",
     xxs: "text-xs",
     xs: "text-sm",
@@ -27,7 +29,7 @@ function I({
     md: "text-2xl",
     lg: "text-3xl",
     xl: "text-4xl"
-  }, w = {
+  }, j = {
     xxxs: "w-3 h-3",
     xxs: "w-[18px] h-[18px] bottom-0 right-0 translate-x-1/3 translate-y-1/3",
     xs: "w-5 h-5",
@@ -35,50 +37,50 @@ function I({
     md: "w-12 h-12 border-3",
     lg: "w-16 h-16 border-4",
     xl: "w-20 h-20 border-5"
-  }, b = m ? n : e, o = u(null), l = u(null);
-  return N(() => {
-    if (!o.current || !l.current) return;
-    const a = v(o.current);
-    l.current.style.borderColor = a;
-  }, []), /* @__PURE__ */ t.jsxs("div", { className: "relative inline-block min-w-max ", ref: o, children: [
-    m ? /* @__PURE__ */ t.jsx(
+  }, u = m ? n : t, o = d(null), a = d(null);
+  return S(() => {
+    if (!o.current || !a.current) return;
+    const x = C(o.current);
+    a.current.style.borderColor = x;
+  }, []), h ? /* @__PURE__ */ e.jsx(y, { shape: "circle", className: r(s[u]) }) : /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: o, children: [
+    m ? /* @__PURE__ */ e.jsx(
       "img",
       {
         onError: () => {
-          h(!0);
+          p(!0);
         },
-        src: s,
-        className: `rounded-full object-cover ${r[n]}`,
+        src: l,
+        className: `rounded-full object-cover ${s[n]}`,
         alt: "Profile",
         draggable: !1
       }
-    ) : c === "initials" ? /* @__PURE__ */ t.jsx(
+    ) : c === "initials" ? /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: ` flex items-center justify-center rounded-full aspect-square ${r[e]}`,
+        className: ` flex items-center justify-center rounded-full aspect-square ${s[t]}`,
         style: { backgroundColor: "#C6D2FF" },
-        children: /* @__PURE__ */ t.jsx(
+        children: /* @__PURE__ */ e.jsx(
           "span",
           {
-            className: x(
+            className: r(
               "text-[#312C85] font-semibold",
-              p[e]
+              b[t]
             ),
-            children: g(d)
+            children: w(f)
           }
         )
       },
       "initials"
-    ) : c === "defaultAvatar" && /* @__PURE__ */ t.jsx(y, { className: x(r[e], "fill-[#D4D4D8] text-(--neutral-700)") }),
-    i && /* @__PURE__ */ t.jsx(
+    ) : c === "defaultAvatar" && /* @__PURE__ */ e.jsx(A, { className: r(s[t], "fill-[#D4D4D8] text-(--neutral-700)") }),
+    i && /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: x(
+        className: r(
           "absolute bottom-[-10px] right-[-10px] rounded-full border overflow-hidden bg-gray-900",
-          w[b]
+          j[u]
         ),
-        ref: l,
-        children: /* @__PURE__ */ t.jsx(
+        ref: a,
+        children: /* @__PURE__ */ e.jsx(
           "img",
           {
             draggable: !1,
@@ -92,5 +94,5 @@ function I({
   ] });
 }
 export {
-  I as default
+  B as default
 };