analytica-frontend-lib 1.1.67 → 1.1.69

package/dist/Search/index.mjs

@@ -2,11 +2,11 @@
 import { CaretLeft, X as X2 } from "phosphor-react";
 import {
   forwardRef as forwardRef3,
-  useState as useState4,
+  useState as useState3,
   useId as useId2,
   useMemo,
   useEffect as useEffect5,
-  useRef as useRef3
+  useRef as useRef2
 } from "react";
 
 // src/components/DropdownMenu/DropdownMenu.tsx
@@ -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/utils/utils.ts
 import { clsx } from "clsx";
@@ -363,7 +363,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";
@@ -421,83 +421,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,
@@ -513,7 +548,7 @@ var ThemeToggle = ({
   onToggle
 }) => {
   const { themeMode, setTheme } = useTheme();
-  const [tempTheme, setTempTheme] = useState2(themeMode);
+  const [tempTheme, setTempTheme] = useState(themeMode);
   useEffect3(() => {
     setTempTheme(themeMode);
   }, [themeMode]);
@@ -577,7 +612,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 })
   }));
@@ -610,14 +645,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) {
@@ -741,7 +776,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);
@@ -900,8 +935,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();
@@ -1058,9 +1093,9 @@ var Search = forwardRef3(
     placeholder = "Buscar...",
     ...props
   }, ref) => {
-    const [dropdownOpen, setDropdownOpen] = useState4(false);
-    const dropdownStore = useRef3(createDropdownStore()).current;
-    const dropdownRef = useRef3(null);
+    const [dropdownOpen, setDropdownOpen] = useState3(false);
+    const dropdownStore = useRef2(createDropdownStore()).current;
+    const dropdownRef = useRef2(null);
     const filteredOptions = useMemo(() => {
       if (!options.length) {
         return [];