prometeo-design-system 4.2.5 → 4.3.1

package/dist/Avatar.es.js

@@ -1,17 +1,18 @@
-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,
-  sizeImage: n = "md",
-  sizeFallback: e = "md",
-  fallbackText: d = "",
-  subImageUrl: i,
-  fallbackType: c = "initials"
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { g as S } from "./useLabelBackground-BDIHUdND.js";
+import { c as u } from "./cn-B6yFEsav.js";
+import { useState as N, useRef as d, useLayoutEffect as y } from "react";
+import { UserAvatar as f } from "./Icons/UserAvatar.es.js";
+function q({
+  imageUrl: t,
+  sizeImage: a = "md",
+  sizeFallback: s = "md",
+  sizeFallbackIcon: x = 24,
+  fallbackText: h = "Selene Soluciones",
+  subImageUrl: n,
+  fallbackType: i = "initials"
 }) {
-  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), c = t && t.trim() !== "" && !g, w = (l) => l.split(" ").map((C) => C.charAt(0)).join("").toUpperCase().slice(0, 2), m = {
     xxxs: "w-6.5 h-6.5",
     xxs: "w-8 h-8",
     xs: "w-10 h-10",
@@ -19,7 +20,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 +28,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,54 +36,54 @@ 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(
+  }, v = c ? a : s, r = d(null), o = d(null);
+  return y(() => {
+    if (!r.current || !o.current) return;
+    const l = S(r.current);
+    o.current.style.borderColor = l;
+  }, []), /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: r, children: [
+    c ? /* @__PURE__ */ e.jsx(
       "img",
       {
         onError: () => {
-          h(!0);
+          p(!0);
         },
-        src: s,
-        className: `rounded-full object-cover ${r[n]}`,
+        src: t,
+        className: `rounded-full object-cover ${m[a]}`,
         alt: "Profile",
         draggable: !1
       }
-    ) : c === "initials" ? /* @__PURE__ */ t.jsx(
+    ) : i === "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 ${m[s]}`,
         style: { backgroundColor: "#C6D2FF" },
-        children: /* @__PURE__ */ t.jsx(
+        children: /* @__PURE__ */ e.jsx(
           "span",
           {
-            className: x(
+            className: u(
               "text-[#312C85] font-semibold",
-              p[e]
+              b[s]
             ),
-            children: g(d)
+            children: w(h)
           }
         )
       },
       "initials"
-    ) : c === "defaultAvatar" && /* @__PURE__ */ t.jsx(y, { className: x(r[e], "fill-[#D4D4D8] text-(--neutral-700)") }),
-    i && /* @__PURE__ */ t.jsx(
+    ) : i === "defaultAvatar" ? /* @__PURE__ */ e.jsx(f, { size: x }) : /* @__PURE__ */ e.jsx(f, { size: x }),
+    n && /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: x(
-          "absolute bottom-[-10px] right-[-10px] rounded-full border overflow-hidden bg-gray-900",
-          w[b]
+        className: u(
+          "absolute bottom-[-10px] right-[-10px] rounded-full border-1 overflow-hidden bg-gray-900",
+          j[v]
         ),
-        ref: l,
-        children: /* @__PURE__ */ t.jsx(
+        ref: o,
+        children: /* @__PURE__ */ e.jsx(
           "img",
           {
             draggable: !1,
-            src: i,
+            src: n,
             alt: "Sub badge",
             className: "w-full h-full object-cover"
           }
@@ -92,5 +93,5 @@ function I({
   ] });
 }
 export {
-  I as default
+  q as default
 };

package/dist/CardProfile-C1F83KJV.js

@@ -0,0 +1,280 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { motion as l, AnimatePresence as d } from "framer-motion";
+import u from "./Avatar.es.js";
+import { ChevronDown as f } from "./Icons/ChevronDown.es.js";
+import { Logout as m } from "./Icons/Logout.es.js";
+function x({
+  sessions: t,
+  handleTokenLogin: a
+}) {
+  return /* @__PURE__ */ e.jsx("div", { className: "profile-options-container w-full ", children: t?.map((r) => /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      className: "w-full  ",
+      onClick: () => a?.(r.token),
+      children: /* @__PURE__ */ e.jsx(s, { children: /* @__PURE__ */ e.jsx(
+        s.Content,
+        {
+          onClick: () => {
+            console.log("hola");
+          },
+          isExpanded: !1,
+          nameUser: r.name,
+          nameArea: r?.areaId?.name,
+          nameCompany: r.companyId.name,
+          cardProfile: /* @__PURE__ */ e.jsx(s.Image, { isExpanded: !1 })
+        }
+      ) })
+    },
+    r._id
+  )) });
+}
+const h = ({ children: t }) => /* @__PURE__ */ e.jsx("div", { className: "profile-container flex gap-0.5 overflow-hidden w-full min-w-0 ", children: t }), p = ({
+  isExpanded: t,
+  sessions: a,
+  onClickLogout: r,
+  handleTokenLogin: n
+}) => /* @__PURE__ */ e.jsx(d, { mode: "wait", children: t && /* @__PURE__ */ e.jsxs(
+  l.div,
+  {
+    initial: { height: 0, opacity: 0 },
+    animate: {
+      height: "auto",
+      opacity: 1,
+      transition: {
+        height: { duration: 0.6, ease: "easeOut" },
+        opacity: { duration: 0.4, delay: 0.2 }
+      }
+    },
+    exit: {
+      height: 0,
+      opacity: 0,
+      transition: {
+        height: {
+          duration: 0.8,
+          delay: 0.2,
+          ease: "easeIn"
+        },
+        opacity: { duration: 0.3, delay: 0.1 }
+      }
+    },
+    className: "overflow-hidden",
+    children: [
+      /* @__PURE__ */ e.jsx(
+        l.div,
+        {
+          className: "flex justify-center items-center w-full mt-4",
+          exit: {
+            opacity: 0,
+            scaleX: 0,
+            height: 0,
+            transition: {
+              duration: 0.4,
+              delay: 0.5,
+              ease: "easeInOut"
+            }
+          },
+          children: /* @__PURE__ */ e.jsx("div", { className: "border-b border-neutral-strong-default border w-full" })
+        }
+      ),
+      a && a.length > 0 && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        /* @__PURE__ */ e.jsx(
+          l.div,
+          {
+            className: "mt-4",
+            exit: {
+              opacity: 0,
+              y: -5,
+              height: 0,
+              transition: {
+                duration: 0.4,
+                delay: 0.4,
+                ease: "easeInOut"
+              }
+            },
+            children: /* @__PURE__ */ e.jsx("span", { className: "text-neutral-medium-default font-semibold text-xs", children: "Cambiar cuenta" })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          l.div,
+          {
+            className: "mt-4 overflow-hidden w-full  ",
+            exit: {
+              height: 0,
+              opacity: 0,
+              y: -10,
+              scale: 0.98,
+              transition: {
+                height: { duration: 0.5, delay: 0.2 },
+                opacity: { duration: 0.3, delay: 0.3 },
+                y: { duration: 0.3, delay: 0.3 },
+                scale: { duration: 0.3, delay: 0.3 },
+                ease: "easeInOut"
+              }
+            },
+            children: /* @__PURE__ */ e.jsx(
+              x,
+              {
+                sessions: a,
+                handleTokenLogin: n
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          l.div,
+          {
+            className: "flex justify-center items-center w-full mt-4",
+            exit: {
+              opacity: 0,
+              scaleX: 0,
+              height: 0,
+              transition: {
+                duration: 0.4,
+                delay: 0.15,
+                ease: "easeInOut"
+              }
+            },
+            children: /* @__PURE__ */ e.jsx("div", { className: "border-b border-neutral-strong-default border w-full" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e.jsxs(
+        l.button,
+        {
+          onClick: r,
+          className: "flex flex-1 h-12 w-full gap-1 rounded-md cursor-pointer mt-4 mb-4 px-2 items-center overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile",
+          exit: {
+            opacity: 0,
+            y: -8,
+            scale: 0.96,
+            transition: {
+              duration: 0.5,
+              delay: 0,
+              ease: "easeInOut"
+            }
+          },
+          whileHover: {
+            opacity: 1,
+            scale: [1, 1.02, 1],
+            transition: { duration: 0.2 }
+          },
+          whileTap: { scale: 0.98 },
+          children: [
+            /* @__PURE__ */ e.jsx(m, { size: 24, className: "text-neutral-default-default" }),
+            /* @__PURE__ */ e.jsx("span", { className: "text-neutral-default-default font-semibold text-sm", children: "Cerrar sesión" })
+          ]
+        }
+      )
+    ]
+  }
+) }), g = ({ imageUrl: t, fallbackText: a }) => /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center profile-image-wrapper", children: /* @__PURE__ */ e.jsx(
+  u,
+  {
+    subImageUrl: t,
+    imageUrl: t,
+    sizeImage: "xxs",
+    sizeFallback: "xxs",
+    fallbackText: a
+  }
+) }), j = ({
+  isExpanded: t,
+  nameUser: a,
+  nameCompany: r,
+  nameArea: n,
+  cardProfile: o,
+  onClick: c
+}) => /* @__PURE__ */ e.jsxs(
+  l.button,
+  {
+    onClick: c,
+    className: i(
+      "flex flex-1 gap-2 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none hover:bg-neutral-medium-selected button-profile h-max p-3",
+      t && "bg-neutral-medium-selected"
+    ),
+    whileHover: {
+      opacity: 1,
+      scale: [1, 1.02, 1]
+    },
+    whileTap: { scale: 0.98 },
+    transition: { duration: 0.2, ease: "easeInOut" },
+    children: [
+      o,
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col  justify-center overflow-hidden flex-1 relative z-10 profile-user-info mr-2 p-0", children: [
+        /* @__PURE__ */ e.jsx(
+          "p",
+          {
+            className: i(
+              "profile-name font-semibold leading-tight mb-0 text-left",
+              t ? "text-primary-default-default" : "text-neutral-default-default"
+            ),
+            children: a?.length && a?.length > 20 ? a?.slice(0, 10) + ".." : a
+          }
+        ),
+        /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1 mt-0 ", children: r && r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(
+            "p",
+            {
+              className: i(
+                "profile-options truncate text-xs mt-0",
+                t ? "text-primary-default-default" : "text-neutral-default-default"
+              ),
+              children: r?.length && r?.length > 20 ? r?.slice(0, 10) + ".." : r
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "p",
+            {
+              className: i(
+                "profile-options truncate font-bold mt-0",
+                t ? "text-primary-default-default" : "text-neutral-default-default"
+              ),
+              children: "·"
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "p",
+            {
+              className: i(
+                "profile-options truncate text-xs mt-0",
+                t ? "text-primary-default-default" : "text-neutral-default-default"
+              ),
+              children: n || "Sin asignar"
+            }
+          )
+        ] }) : /* @__PURE__ */ e.jsx("span", { className: "font-semibold leading-tight ml-3 text-xs text-blue-300  text-center", children: "Sin asignar" }) })
+      ] })
+    ]
+  }
+), v = () => /* @__PURE__ */ e.jsx("div", { className: "w-px bg-gray-500/30 my-1 border-separator-profile" }), y = ({ isExpanded: t, onClick: a }) => /* @__PURE__ */ e.jsx(
+  l.button,
+  {
+    onClick: a,
+    className: "flex items-center justify-center p-3 rounded-lg cursor-pointer relative overflow-hidden focus:outline-none w-8 min-w-8 hover:bg-neutral-medium-selected button-content-chevron",
+    whileHover: { scale: 1.05 },
+    whileTap: { scale: 0.95 },
+    transition: { duration: 0.2, ease: "easeOut" },
+    title: t ? "Ocultar opciones" : "Mostrar opciones",
+    "aria-label": t ? "Ocultar opciones" : "Mostrar opciones",
+    children: /* @__PURE__ */ e.jsx(
+      l.div,
+      {
+        animate: { rotate: t ? 180 : 0 },
+        transition: { duration: 0.3, ease: "easeOut" },
+        className: "relative button-select-crevron",
+        children: /* @__PURE__ */ e.jsx(l.div, { transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(f, { size: 24, className: "text-prometeo-neutral " }) })
+      }
+    )
+  }
+), s = Object.assign(h, {
+  Menu: p,
+  Image: g,
+  Content: j,
+  Separator: v,
+  Options: y
+});
+export {
+  s as C,
+  x as a
+};