prometeo-design-system 2.8.4 → 2.8.7

package/dist/components/Sidebar/components/nav-links.js

@@ -0,0 +1,100 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as d } from "../../../lib/cn.js";
+import { motion as a, AnimatePresence as y } from "framer-motion";
+import { Badge as g } from "./badge.js";
+const O = ({
+  links: m,
+  isLinkActive: s,
+  onLinkClick: f
+}) => /* @__PURE__ */ e("nav", { className: "flex flex-col gap-1", children: m?.map((p, r) => {
+  const { isView: i = !1, viewAccess: o, path: c, title: v, icon: u, count: n, relatedPaths: x } = p, h = (typeof i == "function" ? i() : i !== !1) && (!o || o()), t = s(c) || (x?.some(
+    (w) => s(w)
+  ) ?? !1);
+  return h && /* @__PURE__ */ e(
+    a.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: {
+        duration: 0.4,
+        delay: r * 0.03,
+        ease: "easeOut"
+      },
+      className: "relative flex justify-center w-full items-center px-3",
+      children: /* @__PURE__ */ l(
+        "button",
+        {
+          onClick: () => {
+            f?.(c);
+          },
+          className: d(
+            "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
+            "transition-all duration-300 ease-out w-full",
+            "group hover:bg-neutral-medium-selected",
+            t ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+          ),
+          children: [
+            /* @__PURE__ */ e(y, { mode: "wait", children: t && /* @__PURE__ */ e(
+              a.div,
+              {
+                layoutId: "nav-active-bg",
+                className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
+                initial: !1,
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: {
+                  type: "tween",
+                  duration: 0.25,
+                  ease: "easeInOut"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ l(
+              a.div,
+              {
+                className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
+                animate: {
+                  x: 0
+                },
+                transition: {
+                  duration: 0.25,
+                  ease: "easeOut"
+                },
+                children: [
+                  /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ e(
+                      a.div,
+                      {
+                        className: "nav-icon-wrapper flex items-center justify-center shrink-0",
+                        animate: {
+                          scale: t ? 1.05 : 1
+                        },
+                        transition: {
+                          duration: 0.25,
+                          ease: "easeOut"
+                        },
+                        children: typeof u == "function" ? u({
+                          size: 24,
+                          className: d(
+                            "nav-icon transition-colors duration-250 ease-out",
+                            t ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                          )
+                        }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: v })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "badge-in-link", children: n && n ? /* @__PURE__ */ e(g, { count: n, maxCount: 9, className: "" }) : "" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    },
+    r
+  );
+}) });
+export {
+  O as NavbarLinks
+};

package/dist/components/Sidebar/context/SidebarContext.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as o, createContext as c, useContext as d } from "react";
+const i = c(null), l = ({ children: e }) => {
+  const t = o(null), n = o(null), u = (r) => {
+    r.current && t && (t.current = r.current);
+  }, s = (r) => {
+    r.current && n && (n.current = r.current);
+  };
+  return /* @__PURE__ */ a(i.Provider, { value: { primarySidebarRef: t, registerPrimarySidebar: u, tabBarRef: n, registerTabBar: s }, children: e });
+}, m = () => {
+  const e = d(i);
+  if (!e)
+    throw new Error("useSidebarContext must be used within a SidebarProvider");
+  return e;
+};
+export {
+  l as SidebarProvider,
+  m as useSidebarContext
+};

package/dist/components/Sidebar/hooks/SidebarProvider.js

@@ -0,0 +1,33 @@
+import { jsx as S } from "react/jsx-runtime";
+import { useState as r, useRef as f } from "react";
+import { SidebarContext as p } from "./useSidebarHook.js";
+const x = ({
+  children: t
+}) => {
+  const [a, o] = r(!1), [s, e] = r(!1), n = f(null), l = () => {
+    o(!1), e(!1);
+  }, c = () => {
+    o(!0), e(!1);
+  }, d = {
+    isCollapsed: a,
+    setIsCollapsed: o,
+    navbarRef: n,
+    toggleCollapse: () => {
+      a ? l() : c();
+    },
+    activeSecondaryBar: s ? "notifications" : null,
+    openSecondaryBar: () => {
+      e(!0);
+    },
+    closeSecondaryBar: () => {
+      e(!1);
+    },
+    toggleSecondaryBar: () => {
+      e((i) => !i);
+    }
+  };
+  return /* @__PURE__ */ S(p.Provider, { value: d, children: t });
+};
+export {
+  x as SidebarProvider
+};

package/dist/components/Sidebar/hooks/useNavBarActions.js

@@ -0,0 +1,9 @@
+const o = ({
+  isActiveModalNotification: t,
+  setIsActiveModalNotification: i
+}) => ({ handleNotificationClick: () => {
+  i(!0);
+}, isActiveModalNotification: t });
+export {
+  o as useActionsNavbar
+};

package/dist/components/Sidebar/hooks/useNavBarCollapse.js

@@ -0,0 +1,11 @@
+import { useRef as o } from "react";
+const n = (e) => {
+  const r = o(null);
+  return {
+    isCollapsed: e,
+    navbarRef: r
+  };
+};
+export {
+  n as useNavbarCollapse
+};

package/dist/components/Sidebar/hooks/useSidebarHook.js

@@ -0,0 +1,13 @@
+import { createContext as e, useContext as o } from "react";
+const r = e(
+  void 0
+), i = () => {
+  const t = o(r);
+  if (!t)
+    throw new Error("useSidebar must be used within a Sidebar.Root");
+  return t;
+};
+export {
+  r as SidebarContext,
+  i as useSidebar
+};

package/dist/components/Sidebar/ui/useNavbarAnimation.js

@@ -0,0 +1,326 @@
+import { useGSAP as c } from "@gsap/react";
+import e from "gsap";
+const n = (t, o, i, r) => o && (Array.isArray(o) ? o.length > 0 : o) ? t.to(o, i, r) : t, y = (t, o, i) => {
+  c(
+    () => {
+      if (!t.current) return;
+      const r = e.timeline({
+        defaults: { duration: 0.7, ease: "power1.out" }
+      }), a = {
+        navbar: t.current,
+        navLabels: e.utils.toArray(".nav-label"),
+        navIconWrappers: e.utils.toArray(".nav-icon-wrapper"),
+        navIcons: e.utils.toArray(".nav-icon"),
+        navLinkItems: e.utils.toArray(".nav-link-item"),
+        logoutButton: document.querySelector(".logout-button"),
+        logoutLabel: document.querySelector(".logout-label"),
+        logoutIcon: document.querySelector(".logout-icon"),
+        profileContainer: document.querySelector(".profile-container"),
+        profileName: document.querySelector(".profile-name"),
+        profileOptions: document.querySelector(".profile-options"),
+        profileImageWrapper: document.querySelector(".profile-image-wrapper"),
+        coverImageProfile: document.querySelector(".cover-image-profile"),
+        navContentWrapper: document.querySelector(
+          ".nav-content-wrapper-active"
+        ),
+        buttonCrevron: document.querySelector(".button-select-crevron"),
+        separatorProfile: document.querySelector(".border-separator-profile"),
+        buttonProfile: document.querySelector(".button-profile"),
+        profileUserInfo: document.querySelector(".profile-user-info"),
+        buttonContentChevron: document.querySelector(".button-content-chevron"),
+        logo: {
+          contenedor: document.querySelector(".container-logo"),
+          icon: document.querySelector(".icon-logo"),
+          text: document.querySelector(".text-logo")
+        },
+        sidebarHeader: document.querySelector(".sidebar-header"),
+        containerIconcollapsade: document.querySelector(
+          ".container-icon-collapsade"
+        ),
+        // Secondary bar elements
+        secondaryBar: document.querySelector(".secondary-bar"),
+        secondaryBarContent: e.utils.toArray(".secondary-bar *"),
+        badgeInLink: e.utils.toArray(".badge-in-link")
+      };
+      o ? u(r, a) : d(r, a), a.secondaryBar && l(a.secondaryBar);
+    },
+    { scope: t, dependencies: [o, i] }
+  );
+}, u = (t, o) => {
+  t.to(o.navbar, {
+    width: "5rem",
+    duration: 0.2,
+    ease: "bounce.out"
+  }).to(
+    o.logo.contenedor,
+    {
+      height: 48,
+      width: 48,
+      minWidth: 48,
+      ease: "bounce.out"
+    },
+    -1
+  ).to(
+    o.logo.text,
+    {
+      opacity: 0,
+      scale: 0.8,
+      duration: 0.5,
+      ease: "back.in(1.2)"
+    },
+    -1
+  ).set(o.logo.text, {
+    display: "none"
+  }).to(
+    o.sidebarHeader,
+    {
+      justifyContent: "center",
+      display: "flex"
+    },
+    -1
+  ).to(o.logo.icon, {
+    keyframes: {
+      "0%": { scale: 1 },
+      "33%": { scale: 1.5 },
+      "66%": { scale: 0.5 },
+      "100%": { scale: 1 }
+    },
+    duration: 0.6,
+    ease: "power1.inOut"
+  }).to(
+    o.navLinkItems,
+    {
+      justifyContent: "center",
+      alignItems: "center",
+      width: "3rem",
+      height: "3rem",
+      display: "flex"
+    },
+    -1
+  ).to(
+    o.navLabels,
+    {
+      opacity: 0,
+      width: 30,
+      marginLeft: 0
+    },
+    0
+  ).to(o.navIcons, { scale: 0.95, ease: "elastic.out(1, 0.3)" }, 0), n(
+    t,
+    o.buttonCrevron,
+    {
+      width: 0,
+      opacity: 0,
+      duration: 0.7,
+      ease: "power1.out",
+      onComplete: () => {
+        o.buttonCrevron.style.display = "none";
+      }
+    },
+    0
+  ), n(
+    t,
+    o.buttonContentChevron,
+    {
+      display: "none"
+    },
+    -1
+  ).to(
+    o.separatorProfile,
+    {
+      display: "none"
+    },
+    -1
+  ).to(
+    o.profileUserInfo,
+    {
+      display: "none"
+    },
+    -1
+  ).to(
+    o.navLinkItems,
+    {
+      borderRadius: "8px",
+      duration: 0.7,
+      ease: "power1.out"
+    },
+    0.8
+  ).to(
+    o.profileImageWrapper,
+    {
+      width: 52,
+      height: 52,
+      marginLeft: 0,
+      marginRight: 0
+    },
+    -1
+  ).to(
+    o.buttonProfile,
+    {
+      height: 44,
+      width: 58,
+      margin: 0,
+      padding: 0,
+      borderRadius: "60px",
+      duration: 0.3,
+      ease: "power2.out",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    -1
+  ).to(
+    o.containerIconcollapsade,
+    {
+      justifyContent: "center",
+      marginRight: 0
+    },
+    "=-1"
+  ).to(
+    o.badgeInLink,
+    {
+      position: "absolute",
+      right: 1,
+      top: -7
+    },
+    -1
+  );
+}, d = (t, o) => {
+  t.to(o.navbar, { width: "20rem" }, -1).to(
+    o.navLinkItems,
+    {
+      borderRadius: "10px",
+      duration: 0.3,
+      width: "100%",
+      justifyContent: "flex-start"
+    },
+    -1
+  ), n(
+    t,
+    o.buttonCrevron,
+    {
+      width: "auto",
+      opacity: 1,
+      duration: 0,
+      ease: "power1.out",
+      onComplete: () => {
+        o.buttonCrevron.style.display = "flex";
+      }
+    },
+    0
+  ), n(
+    t,
+    o.buttonContentChevron,
+    {
+      display: "flex"
+    },
+    0
+  ).to(
+    o.logo.contenedor,
+    {
+      width: 185,
+      height: 48,
+      minWidth: 185
+    },
+    -1
+  ).set(
+    o.logo.text,
+    {
+      display: "flex"
+    },
+    -1
+  ).to(o.logo.text, {
+    opacity: 1,
+    duration: 0,
+    ease: "back.in(1)"
+  }).to(o.logo.icon, {
+    keyframes: {
+      "0%": { scale: 1 },
+      "33%": { scale: 1.5 },
+      "66%": { scale: 0.5 },
+      "100%": { scale: 1 }
+    },
+    duration: 0.3,
+    ease: "power1.inOut"
+  }).to(
+    o.sidebarHeader,
+    {
+      justifyContent: "start",
+      display: "flex"
+    },
+    -1
+  ).to(
+    o.profileImageWrapper,
+    {
+      marginRight: 0,
+      duration: 0.2,
+      ease: "bounce.out"
+    },
+    -1
+  ).to(
+    o.containerIconcollapsade,
+    {
+      justifyContent: "end",
+      marginRight: 20
+    },
+    -1
+  ).to(
+    o.separatorProfile,
+    {
+      display: "flex"
+    },
+    0
+  ).to(
+    o.badgeInLink,
+    {
+      position: "static",
+      right: "auto",
+      top: "auto",
+      display: "flex",
+      justifyContent: "end",
+      alignItems: "center"
+    },
+    -1
+  ).to(
+    o.buttonProfile,
+    {
+      borderTopLeftRadius: "0.375rem",
+      borderBottomLeftRadius: "0.375rem",
+      borderTopRightRadius: "0",
+      borderBottomRightRadius: "0",
+      duration: 0
+    },
+    -1
+  ).to(
+    o.separatorProfile,
+    {
+      display: "flex"
+    },
+    0
+  ).to(
+    o.navLabels,
+    {
+      opacity: 1,
+      width: "auto",
+      scaleX: 1
+    },
+    0
+  ).to(
+    o.profileUserInfo,
+    {
+      display: "flex",
+      ease: "fade.in"
+    },
+    0
+  ).to(o.navIcons, { scale: 1 }, 0.3);
+}, l = (t, o) => {
+  e.to(t, {
+    x: "-100%",
+    opacity: 0,
+    duration: 0.3,
+    ease: "power2.in"
+  });
+};
+export {
+  y as useNavbarAnimations
+};

package/dist/{Skeleton.es.js → components/Skeleton/Skeleton.js}

@@ -1,8 +1,9 @@
-import { j as E } from "./jsx-runtime-ByW6EXIE.js";
-import { c as B } from "./cn-B6yFEsav.js";
-import { memo as N, useRef as R, useCallback as D, useLayoutEffect as M } from "react";
+import { jsx as $ } from "react/jsx-runtime";
+import { cn as B } from "../../lib/cn.js";
+import { memo as E, useRef as N, useCallback as D, useLayoutEffect as M } from "react";
+/* empty css                    */
 const y = (n) => {
-  const e = R(null), { debugMode: h = !1, className: f = "", children: k, shape: C = "rounded", animation: g = "shimmer", onlyContainer: i = !1 } = n;
+  const e = N(null), { debugMode: h = !1, className: f = "", children: k, shape: C = "rounded", animation: g = "shimmer", onlyContainer: i = !1 } = n;
   let m = "255, 255, 255", d = "255, 255, 255, 0.1";
   const b = D(() => {
     if (i || !e.current) return;
@@ -19,7 +20,7 @@ const y = (n) => {
         break;
     }
   }, [g, d, m, i]);
-  M(() => {
+  return M(() => {
     if (e.current) {
       const o = (l) => {
         let t = l;
@@ -41,17 +42,11 @@ const y = (n) => {
         return [a[0], a[1], a[2]];
       };
       if (!e.current.parentElement) return;
-      const p = o(e.current.parentElement), s = c(p), w = s.reduce((l, t) => l + t, 0) < 382;
+      const p = o(e.current.parentElement), s = c(p), S = s.reduce((l, t) => l + t, 0) < 382;
       let u;
-      w ? u = `rgb(${s[0] + 10}, ${s[1] + 10}, ${s[2] + 10})` : (u = `rgb(${s[0] - 30}, ${s[1] - 30}, ${s[2] - 30})`, m = "115,115,115", d = "255,255,255, 0.4"), i && (u = "transparent", e.current.style.animation = "none"), e.current.style.backgroundColor = u, b();
+      S ? u = `rgb(${s[0] + 10}, ${s[1] + 10}, ${s[2] + 10})` : (u = `rgb(${s[0] - 30}, ${s[1] - 30}, ${s[2] - 30})`, m = "115,115,115", d = "255,255,255, 0.4"), i && (u = "transparent", e.current.style.animation = "none"), e.current.style.backgroundColor = u, b();
     }
-  }, [d, m, i, b]);
-  const S = {
-    circle: "rounded-full aspect-square",
-    square: "rounded-none",
-    rounded: "rounded"
-  };
-  return /* @__PURE__ */ E.jsx(
+  }, [d, m, i, b]), /* @__PURE__ */ $(
     "div",
     {
       ref: e,
@@ -59,7 +54,11 @@ const y = (n) => {
         h && " border-red-600/20 border",
         f,
         "skeleton-container",
-        S[C]
+        {
+          circle: "rounded-full aspect-square",
+          square: "rounded-none",
+          rounded: "rounded"
+        }[C]
       ),
       children: k
     },
@@ -67,7 +66,7 @@ const y = (n) => {
   );
 };
 y.displayName = "Skeleton";
-const x = N(y, (n, e) => n.debugMode === e.debugMode && n.className === e.className && n.children === e.children && n.shape === e.shape && n.animation === e.animation && n.onlyContainer === e.onlyContainer);
+const G = E(y, (n, e) => n.debugMode === e.debugMode && n.className === e.className && n.children === e.children && n.shape === e.shape && n.animation === e.animation && n.onlyContainer === e.onlyContainer);
 export {
-  x as Skeleton
+  G as default
 };

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,52 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ClipLoader as d, SyncLoader as l, HashLoader as m, GridLoader as p, DotLoader as f, BounceLoader as L } from "react-spinners";
+import { cn as S } from "../../lib/cn.js";
+const w = ({
+  variant: t = "sync",
+  color: s = "#3B82F6",
+  loading: o = !0,
+  size: n = "medium",
+  className: c = "",
+  speedMultiplier: i = 1
+}) => {
+  const a = (() => {
+    if (typeof n == "number") return n;
+    switch (n) {
+      case "small":
+        return 20;
+      case "medium":
+        return 35;
+      case "large":
+        return 50;
+      default:
+        return 35;
+    }
+  })(), r = {
+    color: s,
+    loading: o,
+    size: a,
+    speedMultiplier: i,
+    "aria-label": "Loading Spinner",
+    "data-testid": "spinner"
+  }, u = S("inline-block", c);
+  return /* @__PURE__ */ e("div", { className: u, children: (() => {
+    switch (t) {
+      case "bounce":
+        return /* @__PURE__ */ e(L, { ...r });
+      case "dot":
+        return /* @__PURE__ */ e(f, { ...r });
+      case "grid":
+        return /* @__PURE__ */ e(p, { ...r, size: a * 0.4 });
+      case "hash":
+        return /* @__PURE__ */ e(m, { ...r });
+      case "sync":
+        return /* @__PURE__ */ e(l, { ...r, size: a * 0.4 });
+      case "clip":
+      default:
+        return /* @__PURE__ */ e(d, { ...r });
+    }
+  })() });
+};
+export {
+  w as default
+};