prometeo-design-system 3.1.5 → 3.1.6

package/dist/CardProfile-y9Knsg26.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: "xs",
+    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
+};

package/dist/CardProfile.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/CardProfile'
+export {}
+import PrometeoDesignSystem from './exports/CardProfile'
+export default PrometeoDesignSystem
+export * from './exports/CardProfile'
+export {}

package/dist/CardProfile.es.js

@@ -0,0 +1,5 @@
+import { C as e, C as f } from "./CardProfile-y9Knsg26.js";
+export {
+  e as CardProfile,
+  f as default
+};

package/dist/CheckBox.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/CheckBox'
+export {}
+import PrometeoDesignSystem from './exports/CheckBox'
+export default PrometeoDesignSystem
+export * from './exports/CheckBox'
+export {}

package/dist/CheckBox.es.js

@@ -0,0 +1,112 @@
+import { j as a } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as m, forwardRef as k, useId as g, useRef as v, useCallback as C } from "react";
+import { Check as y } from "./Icons/Check.es.js";
+const s = k(
+  ({ className: l, disabled: e, onChange: i, value: d, ...t }, r) => {
+    const u = g(), o = v(null), f = `
+      after:content-[""]
+      after:absolute
+      after:top-1/2
+      after:left-1/2
+      after:-translate-x-1/2
+      after:-translate-y-1/2
+      after:w-[40px]
+      after:h-[40px]
+      after:rounded-full
+      after:bg-neutral-700
+      after:-z-10
+      after:opacity-0
+      ${!e && "hover:after:opacity-100"}
+      after:transition-all
+      after:duration-200
+      after:ease-in-out
+      after:pointer-events-none
+      ${!e && "aria-checked:hover:bg-primary-default-hover hover:border-primary-default-hover"}
+      transition-all
+      duration-200
+      ease-in-out
+    `, h = "hover:#hover-span:opacity-100", p = "bg-primary-light", x = `
+      bg-transparent
+      border-[2px]
+      aria-checked:border-none
+      border-neutral-medium-default
+      hover:border-neutral-medium-hover
+    `, b = {
+      selected: "bg-primary-default-disabled!",
+      default: "border-neutral-default-disabled "
+    }, c = C(() => {
+      if (o.current)
+        return o.current.click();
+    }, []);
+    return /* @__PURE__ */ a.jsx(
+      "div",
+      {
+        id: "checkbox-container",
+        style: {
+          width: "24px",
+          height: "24px",
+          position: "relative",
+          zIndex: 10
+        },
+        className: "grid place-items-center p-2",
+        onClick: c,
+        draggable: !1,
+        children: /* @__PURE__ */ a.jsxs(
+          "div",
+          {
+            id: "checkbox-box",
+            "aria-checked": t.checked,
+            className: `grid place-items-center absolute size-[18px] rounded-[2px] 
+            ${f} 
+            ${x}
+            ${t.checked ? p : ""}
+            ${e ? b[t.checked ? "selected" : "default"] : ""}
+          `,
+            onClick: c,
+            draggable: !1,
+            children: [
+              /* @__PURE__ */ a.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  id: u,
+                  ref: (n) => {
+                    o.current = n, typeof r == "function" ? r(n) : r && (r.current = n);
+                  },
+                  onChange: i,
+                  value: d,
+                  className: `${l} ${h}`,
+                  disabled: e,
+                  style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    cursor: e ? "default" : "pointer",
+                    width: "100%",
+                    height: "100%",
+                    opacity: 0,
+                    zIndex: 150
+                  },
+                  ...t
+                }
+              ),
+              t.checked && /* @__PURE__ */ a.jsx(
+                y,
+                {
+                  size: 18,
+                  className: `absolute ${e ? "icon-neutral-strong-disabled" : ""} pointer-events-none icon-neutral-strong-default`
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+s.displayName = "CheckBox";
+const w = m(s);
+export {
+  w as default
+};