analytica-frontend-lib 1.1.68 → 1.1.69

package/dist/NotificationCard/index.js

@@ -38,7 +38,7 @@ function cn(...inputs) {
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_phosphor_react3 = require("phosphor-react");
 var import_react5 = require("react");
-var import_zustand = require("zustand");
+var import_zustand2 = require("zustand");
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -433,82 +433,117 @@ var SelectionButton_default = SelectionButton;
 
 // src/hooks/useTheme.ts
 var import_react3 = require("react");
-var useTheme = () => {
-  const [themeMode, setThemeMode] = (0, import_react3.useState)("system");
-  const [isDark, setIsDark] = (0, import_react3.useState)(false);
-  const themeModeRef = (0, import_react3.useRef)("system");
-  const applyTheme = (0, import_react3.useCallback)((mode) => {
-    const htmlElement = document.documentElement;
-    const originalTheme = htmlElement.getAttribute("data-original-theme");
-    if (mode === "dark") {
+
+// src/store/themeStore.ts
+var import_zustand = require("zustand");
+var import_middleware = require("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 = (0, import_react3.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 = (0, import_zustand.create)()(
+  (0, import_middleware.devtools)(
+    (0, import_middleware.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 = (0, import_react3.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();
   (0, import_react3.useEffect)(() => {
-    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,
@@ -588,7 +623,7 @@ var ThemeToggle = ({
 // src/components/DropdownMenu/DropdownMenu.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function createDropdownStore() {
-  return (0, import_zustand.create)((set) => ({
+  return (0, import_zustand2.create)((set) => ({
     open: false,
     setOpen: (open) => set({ open })
   }));
@@ -624,7 +659,7 @@ var DropdownMenu = ({
   const storeRef = (0, import_react5.useRef)(null);
   storeRef.current ??= createDropdownStore();
   const store = storeRef.current;
-  const { open, setOpen: storeSetOpen } = (0, import_zustand.useStore)(store, (s) => s);
+  const { open, setOpen: storeSetOpen } = (0, import_zustand2.useStore)(store, (s) => s);
   const setOpen = (newOpen) => {
     storeSetOpen(newOpen);
   };
@@ -691,7 +726,7 @@ var DropdownMenuTrigger = ({
   ...props
 }) => {
   const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
@@ -751,7 +786,7 @@ var DropdownMenuContent = (0, import_react5.forwardRef)(
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
-    const open = (0, import_zustand.useStore)(store, (s) => s.open);
+    const open = (0, import_zustand2.useStore)(store, (s) => s.open);
     const [isVisible, setIsVisible] = (0, import_react5.useState)(open);
     (0, import_react5.useEffect)(() => {
       if (open) {
@@ -807,7 +842,7 @@ var DropdownMenuItem = (0, import_react5.forwardRef)(
     ...props
   }, ref) => {
     const store = useDropdownStore(externalStore);
-    const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+    const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
     const sizeClasses = ITEM_SIZE_CLASSES[size];
     const handleClick = (e) => {
       if (disabled) {
@@ -868,7 +903,7 @@ var DropdownMenuSeparator = (0, import_react5.forwardRef)(({ className, store: _
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var ProfileMenuTrigger = (0, import_react5.forwardRef)(({ className, onClick, store: externalStore, ...props }, ref) => {
   const store = useDropdownStore(externalStore);
-  const open = (0, import_zustand.useStore)(store, (s) => s.open);
+  const open = (0, import_zustand2.useStore)(store, (s) => s.open);
   const toggleOpen = () => store.setState({ open: !open });
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "button",
@@ -1001,7 +1036,7 @@ var ProfileMenuFooter = ({
   ...props
 }) => {
   const store = useDropdownStore(externalStore);
-  const setOpen = (0, import_zustand.useStore)(store, (s) => s.setOpen);
+  const setOpen = (0, import_zustand2.useStore)(store, (s) => s.setOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Button_default,
     {
@@ -1383,8 +1418,8 @@ var useMobile = () => {
 };
 
 // src/store/notificationStore.ts
-var import_zustand2 = require("zustand");
-var import_middleware = require("zustand/middleware");
+var import_zustand3 = require("zustand");
+var import_middleware2 = require("zustand/middleware");
 var formatTimeAgo = (date) => {
   const now = /* @__PURE__ */ new Date();
   const diffInMs = now.getTime() - new Date(date).getTime();