analytica-frontend-lib 1.1.67 → 1.1.69

package/dist/NotificationCard/index.mjs

@@ -1,6 +1,6 @@
 // src/components/NotificationCard/NotificationCard.tsx
 import { DotsThreeVertical, Bell as Bell2 } from "phosphor-react";
-import { useState as useState5, useEffect as useEffect6 } from "react";
+import { useState as useState4, useEffect as useEffect6 } from "react";
 
 // src/utils/utils.ts
 import { clsx } from "clsx";
@@ -14,13 +14,13 @@ import { CaretRight, SignOut, User } from "phosphor-react";
 import {
   forwardRef as forwardRef2,
   useEffect as useEffect4,
-  useRef as useRef2,
+  useRef,
   isValidElement,
   Children,
   cloneElement,
-  useState as useState3
+  useState as useState2
 } from "react";
-import { create, useStore } from "zustand";
+import { create as create2, useStore } from "zustand";
 
 // src/components/Button/Button.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -356,7 +356,7 @@ var Modal_default = Modal;
 
 // src/components/ThemeToggle/ThemeToggle.tsx
 import { Moon, Sun } from "phosphor-react";
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState, useEffect as useEffect3 } from "react";
 
 // src/components/SelectionButton/SelectionButton.tsx
 import { forwardRef } from "react";
@@ -414,83 +414,118 @@ SelectionButton.displayName = "SelectionButton";
 var SelectionButton_default = SelectionButton;
 
 // src/hooks/useTheme.ts
-import { useEffect as useEffect2, useState, useCallback, useRef } from "react";
-var useTheme = () => {
-  const [themeMode, setThemeMode] = useState("system");
-  const [isDark, setIsDark] = useState(false);
-  const themeModeRef = useRef("system");
-  const applyTheme = useCallback((mode) => {
-    const htmlElement = document.documentElement;
-    const originalTheme = htmlElement.getAttribute("data-original-theme");
-    if (mode === "dark") {
+import { useEffect as useEffect2 } from "react";
+
+// src/store/themeStore.ts
+import { create } from "zustand";
+import { devtools, persist } from "zustand/middleware";
+var applyThemeToDOM = (mode) => {
+  const htmlElement = document.documentElement;
+  const originalTheme = htmlElement.getAttribute("data-original-theme");
+  if (mode === "dark") {
+    htmlElement.setAttribute("data-theme", "dark");
+    return true;
+  } else if (mode === "light") {
+    if (originalTheme) {
+      htmlElement.setAttribute("data-theme", originalTheme);
+    }
+    return false;
+  } else if (mode === "system") {
+    const isSystemDark = window.matchMedia(
+      "(prefers-color-scheme: dark)"
+    ).matches;
+    if (isSystemDark) {
       htmlElement.setAttribute("data-theme", "dark");
-      setIsDark(true);
-    } else if (mode === "light") {
-      if (originalTheme) {
-        htmlElement.setAttribute("data-theme", originalTheme);
-      }
-      setIsDark(false);
-    } else if (mode === "system") {
-      const isSystemDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
-      ).matches;
-      if (isSystemDark) {
-        htmlElement.setAttribute("data-theme", "dark");
-        setIsDark(true);
-      } else if (originalTheme) {
-        htmlElement.setAttribute("data-theme", originalTheme);
-        setIsDark(false);
-      }
+      return true;
+    } else if (originalTheme) {
+      htmlElement.setAttribute("data-theme", originalTheme);
+      return false;
     }
-  }, []);
-  const toggleTheme = useCallback(() => {
-    let newMode;
-    if (themeMode === "light") {
-      newMode = "dark";
-    } else if (themeMode === "dark") {
-      newMode = "light";
-    } else {
-      newMode = "dark";
+  }
+  return false;
+};
+var saveOriginalTheme = () => {
+  const htmlElement = document.documentElement;
+  const currentTheme = htmlElement.getAttribute("data-theme");
+  if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
+    htmlElement.setAttribute("data-original-theme", currentTheme);
+  }
+};
+var useThemeStore = create()(
+  devtools(
+    persist(
+      (set, get) => ({
+        // Initial state
+        themeMode: "system",
+        isDark: false,
+        // Actions
+        applyTheme: (mode) => {
+          const isDark = applyThemeToDOM(mode);
+          set({ isDark });
+        },
+        toggleTheme: () => {
+          const { themeMode, applyTheme } = get();
+          let newMode;
+          if (themeMode === "light") {
+            newMode = "dark";
+          } else if (themeMode === "dark") {
+            newMode = "light";
+          } else {
+            newMode = "dark";
+          }
+          set({ themeMode: newMode });
+          applyTheme(newMode);
+        },
+        setTheme: (mode) => {
+          const { applyTheme } = get();
+          set({ themeMode: mode });
+          applyTheme(mode);
+        },
+        initializeTheme: () => {
+          const { themeMode, applyTheme } = get();
+          saveOriginalTheme();
+          applyTheme(themeMode);
+        },
+        handleSystemThemeChange: () => {
+          const { themeMode, applyTheme } = get();
+          if (themeMode === "system") {
+            applyTheme("system");
+          }
+        }
+      }),
+      {
+        name: "theme-store",
+        // Nome da chave no localStorage
+        partialize: (state) => ({
+          themeMode: state.themeMode
+        })
+        // Só persiste o themeMode, não o isDark
+      }
+    ),
+    {
+      name: "theme-store"
     }
-    setThemeMode(newMode);
-    themeModeRef.current = newMode;
-    applyTheme(newMode);
-    localStorage.setItem("theme-mode", newMode);
-  }, [themeMode, applyTheme]);
-  const setTheme = useCallback(
-    (mode) => {
-      setThemeMode(mode);
-      themeModeRef.current = mode;
-      applyTheme(mode);
-      localStorage.setItem("theme-mode", mode);
-    },
-    [applyTheme]
-  );
+  )
+);
+
+// src/hooks/useTheme.ts
+var useTheme = () => {
+  const {
+    themeMode,
+    isDark,
+    toggleTheme,
+    setTheme,
+    initializeTheme,
+    handleSystemThemeChange
+  } = useThemeStore();
   useEffect2(() => {
-    const htmlElement = document.documentElement;
-    const currentTheme = htmlElement.getAttribute("data-theme");
-    if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
-      htmlElement.setAttribute("data-original-theme", currentTheme);
-    }
-    const savedThemeMode = localStorage.getItem("theme-mode");
-    const initialMode = savedThemeMode || "system";
-    if (!savedThemeMode) {
-      localStorage.setItem("theme-mode", "system");
-    }
-    setThemeMode(initialMode);
-    themeModeRef.current = initialMode;
-    applyTheme(initialMode);
+    initializeTheme();
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleSystemThemeChange = () => {
-      if (themeModeRef.current === "system") {
-        applyTheme("system");
-      }
-    };
     mediaQuery.addEventListener("change", handleSystemThemeChange);
     return () => {
       mediaQuery.removeEventListener("change", handleSystemThemeChange);
     };
-  }, [applyTheme]);
+  }, [initializeTheme, handleSystemThemeChange]);
   return {
     themeMode,
     isDark,
@@ -506,7 +541,7 @@ var ThemeToggle = ({
   onToggle
 }) => {
   const { themeMode, setTheme } = useTheme();
-  const [tempTheme, setTempTheme] = useState2(themeMode);
+  const [tempTheme, setTempTheme] = useState(themeMode);
   useEffect3(() => {
     setTempTheme(themeMode);
   }, [themeMode]);
@@ -570,7 +605,7 @@ var ThemeToggle = ({
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function createDropdownStore() {
-  return create((set) => ({
+  return create2((set) => ({
     open: false,
     setOpen: (open) => set({ open })
   }));
@@ -603,14 +638,14 @@ var DropdownMenu = ({
   open: propOpen,
   onOpenChange
 }) => {
-  const storeRef = useRef2(null);
+  const storeRef = useRef(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
   const { open, setOpen: storeSetOpen } = useStore(store, (s) => s);
   const setOpen = (newOpen) => {
     storeSetOpen(newOpen);
   };
-  const menuRef = useRef2(null);
+  const menuRef = useRef(null);
   const handleArrowDownOrArrowUp = (event) => {
     const menuContent = menuRef.current?.querySelector('[role="menu"]');
     if (menuContent) {
@@ -734,7 +769,7 @@ var DropdownMenuContent = forwardRef2(
   }, ref) => {
     const store = useDropdownStore(externalStore);
     const open = useStore(store, (s) => s.open);
-    const [isVisible, setIsVisible] = useState3(open);
+    const [isVisible, setIsVisible] = useState2(open);
     useEffect4(() => {
       if (open) {
         setIsVisible(true);
@@ -893,8 +928,8 @@ var ProfileMenuHeader = forwardRef2(({ className, name, email, store: _store, ..
 ProfileMenuHeader.displayName = "ProfileMenuHeader";
 var ProfileToggleTheme = ({ ...props }) => {
   const { themeMode, setTheme } = useTheme();
-  const [modalThemeToggle, setModalThemeToggle] = useState3(false);
-  const [selectedTheme, setSelectedTheme] = useState3(themeMode);
+  const [modalThemeToggle, setModalThemeToggle] = useState2(false);
+  const [selectedTheme, setSelectedTheme] = useState2(themeMode);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1308,7 +1343,7 @@ var Badge = ({
 var Badge_default = Badge;
 
 // src/hooks/useMobile.ts
-import { useState as useState4, useEffect as useEffect5 } from "react";
+import { useState as useState3, useEffect as useEffect5 } from "react";
 var MOBILE_WIDTH = 500;
 var TABLET_WIDTH = 931;
 var DEFAULT_WIDTH = 1200;
@@ -1323,8 +1358,8 @@ var getDeviceType = () => {
   return width < TABLET_WIDTH ? "responsive" : "desktop";
 };
 var useMobile = () => {
-  const [isMobile, setIsMobile] = useState4(false);
-  const [isTablet, setIsTablet] = useState4(false);
+  const [isMobile, setIsMobile] = useState3(false);
+  const [isTablet, setIsTablet] = useState3(false);
   useEffect5(() => {
     const checkScreenSize = () => {
       const width = getWindowWidth();
@@ -1365,8 +1400,8 @@ var useMobile = () => {
 };
 
 // src/store/notificationStore.ts
-import { create as create2 } from "zustand";
-import { devtools } from "zustand/middleware";
+import { create as create3 } from "zustand";
+import { devtools as devtools2 } from "zustand/middleware";
 var formatTimeAgo = (date) => {
   const now = /* @__PURE__ */ new Date();
   const diffInMs = now.getTime() - new Date(date).getTime();
@@ -1539,7 +1574,7 @@ var NotificationList = ({
   className,
   emptyStateImage
 }) => {
-  const [globalNotificationModal, setGlobalNotificationModal] = useState5({ isOpen: false, notification: null });
+  const [globalNotificationModal, setGlobalNotificationModal] = useState4({ isOpen: false, notification: null });
   const handleGlobalNotificationClick = (notification) => {
     if (onGlobalNotificationClick) {
       onGlobalNotificationClick(notification);
@@ -1653,8 +1688,8 @@ var NotificationCenter = ({
   className
 }) => {
   const { isMobile } = useMobile();
-  const [isModalOpen, setIsModalOpen] = useState5(false);
-  const [globalNotificationModal, setGlobalNotificationModal] = useState5({ isOpen: false, notification: null });
+  const [isModalOpen, setIsModalOpen] = useState4(false);
+  const [globalNotificationModal, setGlobalNotificationModal] = useState4({ isOpen: false, notification: null });
   const handleMobileClick = () => {
     setIsModalOpen(true);
     onFetchNotifications?.();