prometeo-design-system 4.1.5 → 4.1.8

package/dist/Avatar.es.js

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

package/dist/CardProfile.es.js

@@ -1,5 +1,280 @@
-import { C as e, C as f } from "./CardProfile-C1F83KJV.js";
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { motion as l, AnimatePresence as c } 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(o, { children: /* @__PURE__ */ e.jsx(
+        o.Content,
+        {
+          onClick: () => {
+            console.log("hola");
+          },
+          isExpanded: !1,
+          nameUser: r.name,
+          nameArea: r?.areaId?.name,
+          nameCompany: r.companyId.name,
+          cardProfile: /* @__PURE__ */ e.jsx(o.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(c, { 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: s,
+  onClick: d
+}) => /* @__PURE__ */ e.jsxs(
+  l.button,
+  {
+    onClick: d,
+    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: [
+      s,
+      /* @__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 " }) })
+      }
+    )
+  }
+), o = Object.assign(h, {
+  Menu: p,
+  Image: g,
+  Content: j,
+  Separator: v,
+  Options: y
+});
 export {
-  e as CardProfile,
-  f as default
+  o as CardProfile,
+  o as default
 };

package/dist/Icons/UserAvatar.es.js

@@ -1,10 +1,10 @@
 import { j as r } from "../jsx-runtime-GkKLlHH4.js";
 import { m as o } from "../iconUtils-D0lVAgGT.js";
 const s = o(
-  ({ size: t = 24, className: e, ...l }) => /* @__PURE__ */ r.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: t, height: t, viewBox: "0 0 24 24", fill: "none", ...l, className: e, children: [
-    /* @__PURE__ */ r.jsx("rect", { width: "24", height: "24", rx: "12", fill: "currentColor" }),
-    /* @__PURE__ */ r.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6001 9.6C15.6001 11.5882 13.9884 13.2 12.0001 13.2C10.0119 13.2 8.40015 11.5882 8.40015 9.6C8.40015 7.61177 10.0119 6 12.0001 6C13.9884 6 15.6001 7.61177 15.6001 9.6ZM14.4001 9.6C14.4001 10.9255 13.3256 12 12.0001 12C10.6747 12 9.60015 10.9255 9.60015 9.6C9.60015 8.27452 10.6747 7.2 12.0001 7.2C13.3256 7.2 14.4001 8.27452 14.4001 9.6Z", fill: "#3F3F47" }),
-    /* @__PURE__ */ r.jsx("path", { d: "M12.0001 15C8.11552 15 4.80571 17.297 3.54492 20.5152C3.85206 20.8202 4.1756 21.1087 4.51412 21.3792C5.45296 18.4246 8.39818 16.2 12.0001 16.2C15.6021 16.2 18.5473 18.4246 19.4862 21.3792C19.8247 21.1087 20.1482 20.8202 20.4554 20.5152C19.1946 17.2971 15.8848 15 12.0001 15Z", fill: "#3F3F47" })
+  ({ size: t = 24, className: e, ...l }) => /* @__PURE__ */ r.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: t, height: t, viewBox: "0 0 24 24", fill: "currentColor", ...l, className: e, children: [
+    /* @__PURE__ */ r.jsx("rect", { width: "24", height: "24", rx: "12", fill: "" }),
+    /* @__PURE__ */ r.jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M15.6001 9.6C15.6001 11.5882 13.9884 13.2 12.0001 13.2C10.0119 13.2 8.40015 11.5882 8.40015 9.6C8.40015 7.61177 10.0119 6 12.0001 6C13.9884 6 15.6001 7.61177 15.6001 9.6ZM14.4001 9.6C14.4001 10.9255 13.3256 12 12.0001 12C10.6747 12 9.60015 10.9255 9.60015 9.6C9.60015 8.27452 10.6747 7.2 12.0001 7.2C13.3256 7.2 14.4001 8.27452 14.4001 9.6Z", fill: "currentColor" }),
+    /* @__PURE__ */ r.jsx("path", { d: "M12.0001 15C8.11552 15 4.80571 17.297 3.54492 20.5152C3.85206 20.8202 4.1756 21.1087 4.51412 21.3792C5.45296 18.4246 8.39818 16.2 12.0001 16.2C15.6021 16.2 18.5473 18.4246 19.4862 21.3792C19.8247 21.1087 20.1482 20.8202 20.4554 20.5152C19.1946 17.2971 15.8848 15 12.0001 15Z", fill: "currentColor" })
   ] })
 );
 export {