analytica-frontend-lib 1.1.68 → 1.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/dist/DropdownMenu/index.js +110 -75
  2. package/dist/DropdownMenu/index.js.map +1 -1
  3. package/dist/DropdownMenu/index.mjs +114 -79
  4. package/dist/DropdownMenu/index.mjs.map +1 -1
  5. package/dist/NotificationCard/index.js +112 -77
  6. package/dist/NotificationCard/index.js.map +1 -1
  7. package/dist/NotificationCard/index.mjs +123 -88
  8. package/dist/NotificationCard/index.mjs.map +1 -1
  9. package/dist/Search/index.js +110 -75
  10. package/dist/Search/index.js.map +1 -1
  11. package/dist/Search/index.mjs +119 -84
  12. package/dist/Search/index.mjs.map +1 -1
  13. package/dist/ThemeToggle/index.d.mts +3 -1
  14. package/dist/ThemeToggle/index.d.ts +3 -1
  15. package/dist/ThemeToggle/index.js +102 -67
  16. package/dist/ThemeToggle/index.js.map +1 -1
  17. package/dist/ThemeToggle/index.mjs +105 -70
  18. package/dist/ThemeToggle/index.mjs.map +1 -1
  19. package/dist/hooks/useTheme/index.d.mts +6 -2
  20. package/dist/hooks/useTheme/index.d.ts +6 -2
  21. package/dist/hooks/useTheme/index.js +102 -67
  22. package/dist/hooks/useTheme/index.js.map +1 -1
  23. package/dist/hooks/useTheme/index.mjs +103 -68
  24. package/dist/hooks/useTheme/index.mjs.map +1 -1
  25. package/dist/index.d.mts +3 -1
  26. package/dist/index.d.ts +3 -1
  27. package/dist/index.js +132 -95
  28. package/dist/index.js.map +1 -1
  29. package/dist/index.mjs +251 -215
  30. package/dist/index.mjs.map +1 -1
  31. package/dist/themeStore-P2X64zC-.d.mts +79 -0
  32. package/dist/themeStore-P2X64zC-.d.ts +79 -0
  33. package/package.json +1 -1
package/dist/hooks/useTheme/index.js CHANGED
@@ -24,82 +24,117 @@ __export(useTheme_exports, {
24
24
  });
25
25
  module.exports = __toCommonJS(useTheme_exports);
26
26
  var import_react = require("react");
27
- var useTheme = () => {
28
- const [themeMode, setThemeMode] = (0, import_react.useState)("system");
29
- const [isDark, setIsDark] = (0, import_react.useState)(false);
30
- const themeModeRef = (0, import_react.useRef)("system");
31
- const applyTheme = (0, import_react.useCallback)((mode) => {
32
- const htmlElement = document.documentElement;
33
- const originalTheme = htmlElement.getAttribute("data-original-theme");
34
- if (mode === "dark") {
27
+
28
+ // src/store/themeStore.ts
29
+ var import_zustand = require("zustand");
30
+ var import_middleware = require("zustand/middleware");
31
+ var applyThemeToDOM = (mode) => {
32
+ const htmlElement = document.documentElement;
33
+ const originalTheme = htmlElement.getAttribute("data-original-theme");
34
+ if (mode === "dark") {
35
+ htmlElement.setAttribute("data-theme", "dark");
36
+ return true;
37
+ } else if (mode === "light") {
38
+ if (originalTheme) {
39
+ htmlElement.setAttribute("data-theme", originalTheme);
40
+ }
41
+ return false;
42
+ } else if (mode === "system") {
43
+ const isSystemDark = window.matchMedia(
44
+ "(prefers-color-scheme: dark)"
45
+ ).matches;
46
+ if (isSystemDark) {
35
47
  htmlElement.setAttribute("data-theme", "dark");
36
- setIsDark(true);
37
- } else if (mode === "light") {
38
- if (originalTheme) {
39
- htmlElement.setAttribute("data-theme", originalTheme);
40
- }
41
- setIsDark(false);
42
- } else if (mode === "system") {
43
- const isSystemDark = window.matchMedia(
44
- "(prefers-color-scheme: dark)"
45
- ).matches;
46
- if (isSystemDark) {
47
- htmlElement.setAttribute("data-theme", "dark");
48
- setIsDark(true);
49
- } else if (originalTheme) {
50
- htmlElement.setAttribute("data-theme", originalTheme);
51
- setIsDark(false);
52
- }
48
+ return true;
49
+ } else if (originalTheme) {
50
+ htmlElement.setAttribute("data-theme", originalTheme);
51
+ return false;
53
52
  }
54
- }, []);
55
- const toggleTheme = (0, import_react.useCallback)(() => {
56
- let newMode;
57
- if (themeMode === "light") {
58
- newMode = "dark";
59
- } else if (themeMode === "dark") {
60
- newMode = "light";
61
- } else {
62
- newMode = "dark";
53
+ }
54
+ return false;
55
+ };
56
+ var saveOriginalTheme = () => {
57
+ const htmlElement = document.documentElement;
58
+ const currentTheme = htmlElement.getAttribute("data-theme");
59
+ if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
60
+ htmlElement.setAttribute("data-original-theme", currentTheme);
61
+ }
62
+ };
63
+ var useThemeStore = (0, import_zustand.create)()(
64
+ (0, import_middleware.devtools)(
65
+ (0, import_middleware.persist)(
66
+ (set, get) => ({
67
+ // Initial state
68
+ themeMode: "system",
69
+ isDark: false,
70
+ // Actions
71
+ applyTheme: (mode) => {
72
+ const isDark = applyThemeToDOM(mode);
73
+ set({ isDark });
74
+ },
75
+ toggleTheme: () => {
76
+ const { themeMode, applyTheme } = get();
77
+ let newMode;
78
+ if (themeMode === "light") {
79
+ newMode = "dark";
80
+ } else if (themeMode === "dark") {
81
+ newMode = "light";
82
+ } else {
83
+ newMode = "dark";
84
+ }
85
+ set({ themeMode: newMode });
86
+ applyTheme(newMode);
87
+ },
88
+ setTheme: (mode) => {
89
+ const { applyTheme } = get();
90
+ set({ themeMode: mode });
91
+ applyTheme(mode);
92
+ },
93
+ initializeTheme: () => {
94
+ const { themeMode, applyTheme } = get();
95
+ saveOriginalTheme();
96
+ applyTheme(themeMode);
97
+ },
98
+ handleSystemThemeChange: () => {
99
+ const { themeMode, applyTheme } = get();
100
+ if (themeMode === "system") {
101
+ applyTheme("system");
102
+ }
103
+ }
104
+ }),
105
+ {
106
+ name: "theme-store",
107
+ // Nome da chave no localStorage
108
+ partialize: (state) => ({
109
+ themeMode: state.themeMode
110
+ })
111
+ // Só persiste o themeMode, não o isDark
112
+ }
113
+ ),
114
+ {
115
+ name: "theme-store"
63
116
  }
64
- setThemeMode(newMode);
65
- themeModeRef.current = newMode;
66
- applyTheme(newMode);
67
- localStorage.setItem("theme-mode", newMode);
68
- }, [themeMode, applyTheme]);
69
- const setTheme = (0, import_react.useCallback)(
70
- (mode) => {
71
- setThemeMode(mode);
72
- themeModeRef.current = mode;
73
- applyTheme(mode);
74
- localStorage.setItem("theme-mode", mode);
75
- },
76
- [applyTheme]
77
- );
117
+ )
118
+ );
119
+
120
+ // src/hooks/useTheme.ts
121
+ var useTheme = () => {
122
+ const {
123
+ themeMode,
124
+ isDark,
125
+ toggleTheme,
126
+ setTheme,
127
+ initializeTheme,
128
+ handleSystemThemeChange
129
+ } = useThemeStore();
78
130
  (0, import_react.useEffect)(() => {
79
- const htmlElement = document.documentElement;
80
- const currentTheme = htmlElement.getAttribute("data-theme");
81
- if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
82
- htmlElement.setAttribute("data-original-theme", currentTheme);
83
- }
84
- const savedThemeMode = localStorage.getItem("theme-mode");
85
- const initialMode = savedThemeMode || "system";
86
- if (!savedThemeMode) {
87
- localStorage.setItem("theme-mode", "system");
88
- }
89
- setThemeMode(initialMode);
90
- themeModeRef.current = initialMode;
91
- applyTheme(initialMode);
131
+ initializeTheme();
92
132
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
93
- const handleSystemThemeChange = () => {
94
- if (themeModeRef.current === "system") {
95
- applyTheme("system");
96
- }
97
- };
98
133
  mediaQuery.addEventListener("change", handleSystemThemeChange);
99
134
  return () => {
100
135
  mediaQuery.removeEventListener("change", handleSystemThemeChange);
101
136
  };
102
- }, [applyTheme]);
137
+ }, [initializeTheme, handleSystemThemeChange]);
103
138
  return {
104
139
  themeMode,
105
140
  isDark,
package/dist/hooks/useTheme/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n const [isDark, setIsDark] = useState(false);\n\n // Ref para manter o estado atual do tema de forma síncrona\n const themeModeRef = useRef<ThemeMode>('system');\n\n // Função para aplicar o tema baseado no modo selecionado\n const applyTheme = useCallback((mode: ThemeMode) => {\n const htmlElement = document.documentElement;\n const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n if (mode === 'dark') {\n htmlElement.setAttribute('data-theme', 'dark');\n setIsDark(true);\n } else if (mode === 'light') {\n if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n }\n setIsDark(false);\n } else if (mode === 'system') {\n const isSystemDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches;\n if (isSystemDark) {\n htmlElement.setAttribute('data-theme', 'dark');\n setIsDark(true);\n } else if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n setIsDark(false);\n }\n }\n }, []);\n\n // Função para alternar entre os temas\n const toggleTheme = useCallback(() => {\n let newMode: ThemeMode;\n if (themeMode === 'light') {\n newMode = 'dark';\n } else if (themeMode === 'dark') {\n newMode = 'light';\n } else {\n // Se estiver em 'system', vai para 'dark'\n newMode = 'dark';\n }\n setThemeMode(newMode);\n themeModeRef.current = newMode;\n applyTheme(newMode);\n localStorage.setItem('theme-mode', newMode);\n }, [themeMode, applyTheme]);\n\n // Função para definir um tema específico\n const setTheme = useCallback(\n (mode: ThemeMode) => {\n setThemeMode(mode);\n themeModeRef.current = mode;\n applyTheme(mode);\n localStorage.setItem('theme-mode', mode);\n },\n [applyTheme]\n );\n\n useEffect(() => {\n const htmlElement = document.documentElement;\n\n // Salva o theme original do white label na primeira execução\n const currentTheme = htmlElement.getAttribute('data-theme');\n if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n htmlElement.setAttribute('data-original-theme', currentTheme);\n }\n\n // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n const initialMode = savedThemeMode || 'system';\n\n // Se não há tema salvo, persiste 'system' como padrão\n if (!savedThemeMode) {\n localStorage.setItem('theme-mode', 'system');\n }\n\n setThemeMode(initialMode);\n themeModeRef.current = initialMode;\n applyTheme(initialMode);\n\n // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleSystemThemeChange = () => {\n // Usa o ref para ter acesso ao estado atual de forma síncrona\n if (themeModeRef.current === 'system') {\n applyTheme('system');\n }\n };\n\n mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n return () => {\n mediaQuery.removeEventListener('change', handleSystemThemeChange);\n };\n }, [applyTheme]);\n\n return {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyD;AAQlD,IAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAoB,QAAQ;AAC9D,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,KAAK;AAG1C,QAAM,mBAAe,qBAAkB,QAAQ;AAG/C,QAAM,iBAAa,0BAAY,CAAC,SAAoB;AAClD,UAAM,cAAc,SAAS;AAC7B,UAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,QAAI,SAAS,QAAQ;AACnB,kBAAY,aAAa,cAAc,MAAM;AAC7C,gBAAU,IAAI;AAAA,IAChB,WAAW,SAAS,SAAS;AAC3B,UAAI,eAAe;AACjB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AACA,gBAAU,KAAK;AAAA,IACjB,WAAW,SAAS,UAAU;AAC5B,YAAM,eAAe,OAAO;AAAA,QAC1B;AAAA,MACF,EAAE;AACF,UAAI,cAAc;AAChB,oBAAY,aAAa,cAAc,MAAM;AAC7C,kBAAU,IAAI;AAAA,MAChB,WAAW,eAAe;AACxB,oBAAY,aAAa,cAAc,aAAa;AACpD,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,kBAAc,0BAAY,MAAM;AACpC,QAAI;AACJ,QAAI,cAAc,SAAS;AACzB,gBAAU;AAAA,IACZ,WAAW,cAAc,QAAQ;AAC/B,gBAAU;AAAA,IACZ,OAAO;AAEL,gBAAU;AAAA,IACZ;AACA,iBAAa,OAAO;AACpB,iBAAa,UAAU;AACvB,eAAW,OAAO;AAClB,iBAAa,QAAQ,cAAc,OAAO;AAAA,EAC5C,GAAG,CAAC,WAAW,UAAU,CAAC;AAG1B,QAAM,eAAW;AAAA,IACf,CAAC,SAAoB;AACnB,mBAAa,IAAI;AACjB,mBAAa,UAAU;AACvB,iBAAW,IAAI;AACf,mBAAa,QAAQ,cAAc,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,iBAAiB,aAAa,QAAQ,YAAY;AACxD,UAAM,cAAc,kBAAkB;AAGtC,QAAI,CAAC,gBAAgB;AACnB,mBAAa,QAAQ,cAAc,QAAQ;AAAA,IAC7C;AAEA,iBAAa,WAAW;AACxB,iBAAa,UAAU;AACvB,eAAW,WAAW;AAGtB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,0BAA0B,MAAM;AAEpC,UAAI,aAAa,YAAY,UAAU;AACrC,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../../src/hooks/useTheme.ts","../../../src/store/themeStore.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useThemeStore, ThemeMode } from '../store/themeStore';\n\nexport type { ThemeMode };\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n * Utiliza Zustand para persistir o estado entre múltiplos arquivos e sessões\n */\nexport const useTheme = () => {\n const {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n initializeTheme,\n handleSystemThemeChange,\n } = useThemeStore();\n\n useEffect(() => {\n // Initialize theme on first render\n initializeTheme();\n\n // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n return () => {\n mediaQuery.removeEventListener('change', handleSystemThemeChange);\n };\n }, [initializeTheme, handleSystemThemeChange]);\n\n return {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n };\n};\n","import { create } from 'zustand';\nimport { devtools, persist } from 'zustand/middleware';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Theme store state interface\n */\nexport interface ThemeState {\n /**\n * Current theme mode\n */\n themeMode: ThemeMode;\n /**\n * Whether the current theme is dark\n */\n isDark: boolean;\n}\n\n/**\n * Theme store actions interface\n */\nexport interface ThemeActions {\n /**\n * Apply theme based on the mode selected\n */\n applyTheme: (mode: ThemeMode) => void;\n /**\n * Toggle between themes\n */\n toggleTheme: () => void;\n /**\n * Set a specific theme mode\n */\n setTheme: (mode: ThemeMode) => void;\n /**\n * Initialize theme on app start\n */\n initializeTheme: () => void;\n /**\n * Handle system theme change\n */\n handleSystemThemeChange: () => void;\n}\n\nexport type ThemeStore = ThemeState & ThemeActions;\n\n/**\n * Apply theme to DOM based on mode\n */\nconst applyThemeToDOM = (mode: ThemeMode): boolean => {\n const htmlElement = document.documentElement;\n const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n if (mode === 'dark') {\n htmlElement.setAttribute('data-theme', 'dark');\n return true;\n } else if (mode === 'light') {\n if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n }\n return false;\n } else if (mode === 'system') {\n const isSystemDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches;\n if (isSystemDark) {\n htmlElement.setAttribute('data-theme', 'dark');\n return true;\n } else if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n return false;\n }\n }\n return false;\n};\n\n/**\n * Save original theme from white label\n */\nconst saveOriginalTheme = () => {\n const htmlElement = document.documentElement;\n const currentTheme = htmlElement.getAttribute('data-theme');\n if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n htmlElement.setAttribute('data-original-theme', currentTheme);\n }\n};\n\n/**\n * Theme store using Zustand with persistence\n */\nexport const useThemeStore = create<ThemeStore>()(\n devtools(\n persist(\n (set, get) => ({\n // Initial state\n themeMode: 'system',\n isDark: false,\n\n // Actions\n applyTheme: (mode: ThemeMode) => {\n const isDark = applyThemeToDOM(mode);\n set({ isDark });\n },\n\n toggleTheme: () => {\n const { themeMode, applyTheme } = get();\n let newMode: ThemeMode;\n\n if (themeMode === 'light') {\n newMode = 'dark';\n } else if (themeMode === 'dark') {\n newMode = 'light';\n } else {\n // Se estiver em 'system', vai para 'dark'\n newMode = 'dark';\n }\n\n set({ themeMode: newMode });\n applyTheme(newMode);\n },\n\n setTheme: (mode: ThemeMode) => {\n const { applyTheme } = get();\n set({ themeMode: mode });\n applyTheme(mode);\n },\n\n initializeTheme: () => {\n const { themeMode, applyTheme } = get();\n\n // Save original theme from white label\n saveOriginalTheme();\n\n // Apply the current theme mode\n applyTheme(themeMode);\n },\n\n handleSystemThemeChange: () => {\n const { themeMode, applyTheme } = get();\n // Only respond to system changes when in system mode\n if (themeMode === 'system') {\n applyTheme('system');\n }\n },\n }),\n {\n name: 'theme-store', // Nome da chave no localStorage\n partialize: (state) => ({\n themeMode: state.themeMode,\n }), // Só persiste o themeMode, não o isDark\n }\n ),\n {\n name: 'theme-store',\n }\n )\n);\n"],"mappings":"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","names":[]}
package/dist/hooks/useTheme/index.mjs CHANGED
@@ -1,81 +1,116 @@
1
1
  // src/hooks/useTheme.ts
2
- import { useEffect, useState, useCallback, useRef } from "react";
3
- var useTheme = () => {
4
- const [themeMode, setThemeMode] = useState("system");
5
- const [isDark, setIsDark] = useState(false);
6
- const themeModeRef = useRef("system");
7
- const applyTheme = useCallback((mode) => {
8
- const htmlElement = document.documentElement;
9
- const originalTheme = htmlElement.getAttribute("data-original-theme");
10
- if (mode === "dark") {
2
+ import { useEffect } from "react";
3
+
4
+ // src/store/themeStore.ts
5
+ import { create } from "zustand";
6
+ import { devtools, persist } from "zustand/middleware";
7
+ var applyThemeToDOM = (mode) => {
8
+ const htmlElement = document.documentElement;
9
+ const originalTheme = htmlElement.getAttribute("data-original-theme");
10
+ if (mode === "dark") {
11
+ htmlElement.setAttribute("data-theme", "dark");
12
+ return true;
13
+ } else if (mode === "light") {
14
+ if (originalTheme) {
15
+ htmlElement.setAttribute("data-theme", originalTheme);
16
+ }
17
+ return false;
18
+ } else if (mode === "system") {
19
+ const isSystemDark = window.matchMedia(
20
+ "(prefers-color-scheme: dark)"
21
+ ).matches;
22
+ if (isSystemDark) {
11
23
  htmlElement.setAttribute("data-theme", "dark");
12
- setIsDark(true);
13
- } else if (mode === "light") {
14
- if (originalTheme) {
15
- htmlElement.setAttribute("data-theme", originalTheme);
16
- }
17
- setIsDark(false);
18
- } else if (mode === "system") {
19
- const isSystemDark = window.matchMedia(
20
- "(prefers-color-scheme: dark)"
21
- ).matches;
22
- if (isSystemDark) {
23
- htmlElement.setAttribute("data-theme", "dark");
24
- setIsDark(true);
25
- } else if (originalTheme) {
26
- htmlElement.setAttribute("data-theme", originalTheme);
27
- setIsDark(false);
28
- }
24
+ return true;
25
+ } else if (originalTheme) {
26
+ htmlElement.setAttribute("data-theme", originalTheme);
27
+ return false;
29
28
  }
30
- }, []);
31
- const toggleTheme = useCallback(() => {
32
- let newMode;
33
- if (themeMode === "light") {
34
- newMode = "dark";
35
- } else if (themeMode === "dark") {
36
- newMode = "light";
37
- } else {
38
- newMode = "dark";
29
+ }
30
+ return false;
31
+ };
32
+ var saveOriginalTheme = () => {
33
+ const htmlElement = document.documentElement;
34
+ const currentTheme = htmlElement.getAttribute("data-theme");
35
+ if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
36
+ htmlElement.setAttribute("data-original-theme", currentTheme);
37
+ }
38
+ };
39
+ var useThemeStore = create()(
40
+ devtools(
41
+ persist(
42
+ (set, get) => ({
43
+ // Initial state
44
+ themeMode: "system",
45
+ isDark: false,
46
+ // Actions
47
+ applyTheme: (mode) => {
48
+ const isDark = applyThemeToDOM(mode);
49
+ set({ isDark });
50
+ },
51
+ toggleTheme: () => {
52
+ const { themeMode, applyTheme } = get();
53
+ let newMode;
54
+ if (themeMode === "light") {
55
+ newMode = "dark";
56
+ } else if (themeMode === "dark") {
57
+ newMode = "light";
58
+ } else {
59
+ newMode = "dark";
60
+ }
61
+ set({ themeMode: newMode });
62
+ applyTheme(newMode);
63
+ },
64
+ setTheme: (mode) => {
65
+ const { applyTheme } = get();
66
+ set({ themeMode: mode });
67
+ applyTheme(mode);
68
+ },
69
+ initializeTheme: () => {
70
+ const { themeMode, applyTheme } = get();
71
+ saveOriginalTheme();
72
+ applyTheme(themeMode);
73
+ },
74
+ handleSystemThemeChange: () => {
75
+ const { themeMode, applyTheme } = get();
76
+ if (themeMode === "system") {
77
+ applyTheme("system");
78
+ }
79
+ }
80
+ }),
81
+ {
82
+ name: "theme-store",
83
+ // Nome da chave no localStorage
84
+ partialize: (state) => ({
85
+ themeMode: state.themeMode
86
+ })
87
+ // Só persiste o themeMode, não o isDark
88
+ }
89
+ ),
90
+ {
91
+ name: "theme-store"
39
92
  }
40
- setThemeMode(newMode);
41
- themeModeRef.current = newMode;
42
- applyTheme(newMode);
43
- localStorage.setItem("theme-mode", newMode);
44
- }, [themeMode, applyTheme]);
45
- const setTheme = useCallback(
46
- (mode) => {
47
- setThemeMode(mode);
48
- themeModeRef.current = mode;
49
- applyTheme(mode);
50
- localStorage.setItem("theme-mode", mode);
51
- },
52
- [applyTheme]
53
- );
93
+ )
94
+ );
95
+
96
+ // src/hooks/useTheme.ts
97
+ var useTheme = () => {
98
+ const {
99
+ themeMode,
100
+ isDark,
101
+ toggleTheme,
102
+ setTheme,
103
+ initializeTheme,
104
+ handleSystemThemeChange
105
+ } = useThemeStore();
54
106
  useEffect(() => {
55
- const htmlElement = document.documentElement;
56
- const currentTheme = htmlElement.getAttribute("data-theme");
57
- if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
58
- htmlElement.setAttribute("data-original-theme", currentTheme);
59
- }
60
- const savedThemeMode = localStorage.getItem("theme-mode");
61
- const initialMode = savedThemeMode || "system";
62
- if (!savedThemeMode) {
63
- localStorage.setItem("theme-mode", "system");
64
- }
65
- setThemeMode(initialMode);
66
- themeModeRef.current = initialMode;
67
- applyTheme(initialMode);
107
+ initializeTheme();
68
108
  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
69
- const handleSystemThemeChange = () => {
70
- if (themeModeRef.current === "system") {
71
- applyTheme("system");
72
- }
73
- };
74
109
  mediaQuery.addEventListener("change", handleSystemThemeChange);
75
110
  return () => {
76
111
  mediaQuery.removeEventListener("change", handleSystemThemeChange);
77
112
  };
78
- }, [applyTheme]);
113
+ }, [initializeTheme, handleSystemThemeChange]);
79
114
  return {
80
115
  themeMode,
81
116
  isDark,
package/dist/hooks/useTheme/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useCallback, useRef } from 'react';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n */\nexport const useTheme = () => {\n const [themeMode, setThemeMode] = useState<ThemeMode>('system');\n const [isDark, setIsDark] = useState(false);\n\n // Ref para manter o estado atual do tema de forma síncrona\n const themeModeRef = useRef<ThemeMode>('system');\n\n // Função para aplicar o tema baseado no modo selecionado\n const applyTheme = useCallback((mode: ThemeMode) => {\n const htmlElement = document.documentElement;\n const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n if (mode === 'dark') {\n htmlElement.setAttribute('data-theme', 'dark');\n setIsDark(true);\n } else if (mode === 'light') {\n if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n }\n setIsDark(false);\n } else if (mode === 'system') {\n const isSystemDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches;\n if (isSystemDark) {\n htmlElement.setAttribute('data-theme', 'dark');\n setIsDark(true);\n } else if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n setIsDark(false);\n }\n }\n }, []);\n\n // Função para alternar entre os temas\n const toggleTheme = useCallback(() => {\n let newMode: ThemeMode;\n if (themeMode === 'light') {\n newMode = 'dark';\n } else if (themeMode === 'dark') {\n newMode = 'light';\n } else {\n // Se estiver em 'system', vai para 'dark'\n newMode = 'dark';\n }\n setThemeMode(newMode);\n themeModeRef.current = newMode;\n applyTheme(newMode);\n localStorage.setItem('theme-mode', newMode);\n }, [themeMode, applyTheme]);\n\n // Função para definir um tema específico\n const setTheme = useCallback(\n (mode: ThemeMode) => {\n setThemeMode(mode);\n themeModeRef.current = mode;\n applyTheme(mode);\n localStorage.setItem('theme-mode', mode);\n },\n [applyTheme]\n );\n\n useEffect(() => {\n const htmlElement = document.documentElement;\n\n // Salva o theme original do white label na primeira execução\n const currentTheme = htmlElement.getAttribute('data-theme');\n if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n htmlElement.setAttribute('data-original-theme', currentTheme);\n }\n\n // Carrega o tema salvo no localStorage ou usa 'system' como padrão\n const savedThemeMode = localStorage.getItem('theme-mode') as ThemeMode;\n const initialMode = savedThemeMode || 'system';\n\n // Se não há tema salvo, persiste 'system' como padrão\n if (!savedThemeMode) {\n localStorage.setItem('theme-mode', 'system');\n }\n\n setThemeMode(initialMode);\n themeModeRef.current = initialMode;\n applyTheme(initialMode);\n\n // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleSystemThemeChange = () => {\n // Usa o ref para ter acesso ao estado atual de forma síncrona\n if (themeModeRef.current === 'system') {\n applyTheme('system');\n }\n };\n\n mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n return () => {\n mediaQuery.removeEventListener('change', handleSystemThemeChange);\n };\n }, [applyTheme]);\n\n return {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n };\n};\n"],"mappings":";AAAA,SAAS,WAAW,UAAU,aAAa,cAAc;AAQlD,IAAM,WAAW,MAAM;AAC5B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAoB,QAAQ;AAC9D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAG1C,QAAM,eAAe,OAAkB,QAAQ;AAG/C,QAAM,aAAa,YAAY,CAAC,SAAoB;AAClD,UAAM,cAAc,SAAS;AAC7B,UAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,QAAI,SAAS,QAAQ;AACnB,kBAAY,aAAa,cAAc,MAAM;AAC7C,gBAAU,IAAI;AAAA,IAChB,WAAW,SAAS,SAAS;AAC3B,UAAI,eAAe;AACjB,oBAAY,aAAa,cAAc,aAAa;AAAA,MACtD;AACA,gBAAU,KAAK;AAAA,IACjB,WAAW,SAAS,UAAU;AAC5B,YAAM,eAAe,OAAO;AAAA,QAC1B;AAAA,MACF,EAAE;AACF,UAAI,cAAc;AAChB,oBAAY,aAAa,cAAc,MAAM;AAC7C,kBAAU,IAAI;AAAA,MAChB,WAAW,eAAe;AACxB,oBAAY,aAAa,cAAc,aAAa;AACpD,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAGL,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI;AACJ,QAAI,cAAc,SAAS;AACzB,gBAAU;AAAA,IACZ,WAAW,cAAc,QAAQ;AAC/B,gBAAU;AAAA,IACZ,OAAO;AAEL,gBAAU;AAAA,IACZ;AACA,iBAAa,OAAO;AACpB,iBAAa,UAAU;AACvB,eAAW,OAAO;AAClB,iBAAa,QAAQ,cAAc,OAAO;AAAA,EAC5C,GAAG,CAAC,WAAW,UAAU,CAAC;AAG1B,QAAM,WAAW;AAAA,IACf,CAAC,SAAoB;AACnB,mBAAa,IAAI;AACjB,mBAAa,UAAU;AACvB,iBAAW,IAAI;AACf,mBAAa,QAAQ,cAAc,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,UAAM,cAAc,SAAS;AAG7B,UAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,QAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,kBAAY,aAAa,uBAAuB,YAAY;AAAA,IAC9D;AAGA,UAAM,iBAAiB,aAAa,QAAQ,YAAY;AACxD,UAAM,cAAc,kBAAkB;AAGtC,QAAI,CAAC,gBAAgB;AACnB,mBAAa,QAAQ,cAAc,QAAQ;AAAA,IAC7C;AAEA,iBAAa,WAAW;AACxB,iBAAa,UAAU;AACvB,eAAW,WAAW;AAGtB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AACnE,UAAM,0BAA0B,MAAM;AAEpC,UAAI,aAAa,YAAY,UAAU;AACrC,mBAAW,QAAQ;AAAA,MACrB;AAAA,IACF;AAEA,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
1
+ {"version":3,"sources":["../../../src/hooks/useTheme.ts","../../../src/store/themeStore.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { useThemeStore, ThemeMode } from '../store/themeStore';\n\nexport type { ThemeMode };\n\n/**\n * Hook para gerenciar temas com suporte a alternância manual e detecção automática do sistema\n * Este hook permite alternar entre temas light, dark e automático baseado nas preferências do sistema\n * Utiliza Zustand para persistir o estado entre múltiplos arquivos e sessões\n */\nexport const useTheme = () => {\n const {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n initializeTheme,\n handleSystemThemeChange,\n } = useThemeStore();\n\n useEffect(() => {\n // Initialize theme on first render\n initializeTheme();\n\n // Listener para mudanças nas preferências do sistema (apenas quando mode é 'system')\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n mediaQuery.addEventListener('change', handleSystemThemeChange);\n\n return () => {\n mediaQuery.removeEventListener('change', handleSystemThemeChange);\n };\n }, [initializeTheme, handleSystemThemeChange]);\n\n return {\n themeMode,\n isDark,\n toggleTheme,\n setTheme,\n };\n};\n","import { create } from 'zustand';\nimport { devtools, persist } from 'zustand/middleware';\n\nexport type ThemeMode = 'light' | 'dark' | 'system';\n\n/**\n * Theme store state interface\n */\nexport interface ThemeState {\n /**\n * Current theme mode\n */\n themeMode: ThemeMode;\n /**\n * Whether the current theme is dark\n */\n isDark: boolean;\n}\n\n/**\n * Theme store actions interface\n */\nexport interface ThemeActions {\n /**\n * Apply theme based on the mode selected\n */\n applyTheme: (mode: ThemeMode) => void;\n /**\n * Toggle between themes\n */\n toggleTheme: () => void;\n /**\n * Set a specific theme mode\n */\n setTheme: (mode: ThemeMode) => void;\n /**\n * Initialize theme on app start\n */\n initializeTheme: () => void;\n /**\n * Handle system theme change\n */\n handleSystemThemeChange: () => void;\n}\n\nexport type ThemeStore = ThemeState & ThemeActions;\n\n/**\n * Apply theme to DOM based on mode\n */\nconst applyThemeToDOM = (mode: ThemeMode): boolean => {\n const htmlElement = document.documentElement;\n const originalTheme = htmlElement.getAttribute('data-original-theme');\n\n if (mode === 'dark') {\n htmlElement.setAttribute('data-theme', 'dark');\n return true;\n } else if (mode === 'light') {\n if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n }\n return false;\n } else if (mode === 'system') {\n const isSystemDark = window.matchMedia(\n '(prefers-color-scheme: dark)'\n ).matches;\n if (isSystemDark) {\n htmlElement.setAttribute('data-theme', 'dark');\n return true;\n } else if (originalTheme) {\n htmlElement.setAttribute('data-theme', originalTheme);\n return false;\n }\n }\n return false;\n};\n\n/**\n * Save original theme from white label\n */\nconst saveOriginalTheme = () => {\n const htmlElement = document.documentElement;\n const currentTheme = htmlElement.getAttribute('data-theme');\n if (currentTheme && !htmlElement.getAttribute('data-original-theme')) {\n htmlElement.setAttribute('data-original-theme', currentTheme);\n }\n};\n\n/**\n * Theme store using Zustand with persistence\n */\nexport const useThemeStore = create<ThemeStore>()(\n devtools(\n persist(\n (set, get) => ({\n // Initial state\n themeMode: 'system',\n isDark: false,\n\n // Actions\n applyTheme: (mode: ThemeMode) => {\n const isDark = applyThemeToDOM(mode);\n set({ isDark });\n },\n\n toggleTheme: () => {\n const { themeMode, applyTheme } = get();\n let newMode: ThemeMode;\n\n if (themeMode === 'light') {\n newMode = 'dark';\n } else if (themeMode === 'dark') {\n newMode = 'light';\n } else {\n // Se estiver em 'system', vai para 'dark'\n newMode = 'dark';\n }\n\n set({ themeMode: newMode });\n applyTheme(newMode);\n },\n\n setTheme: (mode: ThemeMode) => {\n const { applyTheme } = get();\n set({ themeMode: mode });\n applyTheme(mode);\n },\n\n initializeTheme: () => {\n const { themeMode, applyTheme } = get();\n\n // Save original theme from white label\n saveOriginalTheme();\n\n // Apply the current theme mode\n applyTheme(themeMode);\n },\n\n handleSystemThemeChange: () => {\n const { themeMode, applyTheme } = get();\n // Only respond to system changes when in system mode\n if (themeMode === 'system') {\n applyTheme('system');\n }\n },\n }),\n {\n name: 'theme-store', // Nome da chave no localStorage\n partialize: (state) => ({\n themeMode: state.themeMode,\n }), // Só persiste o themeMode, não o isDark\n }\n ),\n {\n name: 'theme-store',\n }\n )\n);\n"],"mappings":";AAAA,SAAS,iBAAiB;;;ACA1B,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAiDlC,IAAM,kBAAkB,CAAC,SAA6B;AACpD,QAAM,cAAc,SAAS;AAC7B,QAAM,gBAAgB,YAAY,aAAa,qBAAqB;AAEpE,MAAI,SAAS,QAAQ;AACnB,gBAAY,aAAa,cAAc,MAAM;AAC7C,WAAO;AAAA,EACT,WAAW,SAAS,SAAS;AAC3B,QAAI,eAAe;AACjB,kBAAY,aAAa,cAAc,aAAa;AAAA,IACtD;AACA,WAAO;AAAA,EACT,WAAW,SAAS,UAAU;AAC5B,UAAM,eAAe,OAAO;AAAA,MAC1B;AAAA,IACF,EAAE;AACF,QAAI,cAAc;AAChB,kBAAY,aAAa,cAAc,MAAM;AAC7C,aAAO;AAAA,IACT,WAAW,eAAe;AACxB,kBAAY,aAAa,cAAc,aAAa;AACpD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAKA,IAAM,oBAAoB,MAAM;AAC9B,QAAM,cAAc,SAAS;AAC7B,QAAM,eAAe,YAAY,aAAa,YAAY;AAC1D,MAAI,gBAAgB,CAAC,YAAY,aAAa,qBAAqB,GAAG;AACpE,gBAAY,aAAa,uBAAuB,YAAY;AAAA,EAC9D;AACF;AAKO,IAAM,gBAAgB,OAAmB;AAAA,EAC9C;AAAA,IACE;AAAA,MACE,CAAC,KAAK,SAAS;AAAA;AAAA,QAEb,WAAW;AAAA,QACX,QAAQ;AAAA;AAAA,QAGR,YAAY,CAAC,SAAoB;AAC/B,gBAAM,SAAS,gBAAgB,IAAI;AACnC,cAAI,EAAE,OAAO,CAAC;AAAA,QAChB;AAAA,QAEA,aAAa,MAAM;AACjB,gBAAM,EAAE,WAAW,WAAW,IAAI,IAAI;AACtC,cAAI;AAEJ,cAAI,cAAc,SAAS;AACzB,sBAAU;AAAA,UACZ,WAAW,cAAc,QAAQ;AAC/B,sBAAU;AAAA,UACZ,OAAO;AAEL,sBAAU;AAAA,UACZ;AAEA,cAAI,EAAE,WAAW,QAAQ,CAAC;AAC1B,qBAAW,OAAO;AAAA,QACpB;AAAA,QAEA,UAAU,CAAC,SAAoB;AAC7B,gBAAM,EAAE,WAAW,IAAI,IAAI;AAC3B,cAAI,EAAE,WAAW,KAAK,CAAC;AACvB,qBAAW,IAAI;AAAA,QACjB;AAAA,QAEA,iBAAiB,MAAM;AACrB,gBAAM,EAAE,WAAW,WAAW,IAAI,IAAI;AAGtC,4BAAkB;AAGlB,qBAAW,SAAS;AAAA,QACtB;AAAA,QAEA,yBAAyB,MAAM;AAC7B,gBAAM,EAAE,WAAW,WAAW,IAAI,IAAI;AAEtC,cAAI,cAAc,UAAU;AAC1B,uBAAW,QAAQ;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA;AAAA,QACN,YAAY,CAAC,WAAW;AAAA,UACtB,WAAW,MAAM;AAAA,QACnB;AAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,MAAM;AAAA,IACR;AAAA,EACF;AACF;;;ADnJO,IAAM,WAAW,MAAM;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,YAAU,MAAM;AAEd,oBAAgB;AAGhB,UAAM,aAAa,OAAO,WAAW,8BAA8B;AAEnE,eAAW,iBAAiB,UAAU,uBAAuB;AAE7D,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,uBAAuB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,iBAAiB,uBAAuB,CAAC;AAE7C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
package/dist/index.d.mts CHANGED
@@ -33,7 +33,7 @@ export { MultipleChoiceList } from './MultipleChoice/index.mjs';
33
33
  export { default as IconRender } from './IconRender/index.mjs';
34
34
  export { d as SubjectData, e as SubjectEnum, I as SubjectIconProps, S as SubjectInfo, b as getSubjectColorClass, a as getSubjectIcon, g as getSubjectInfo, c as getSubjectName } from './SubjectInfo-Dvt0OodP.mjs';
35
35
  export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.mjs';
36
- export { ThemeMode, useTheme } from './hooks/useTheme/index.mjs';
36
+ export { useTheme } from './hooks/useTheme/index.mjs';
37
37
  export { cn } from './utils/index.mjs';
38
38
  export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger, ProfileToggleTheme } from './DropdownMenu/index.mjs';
39
39
  export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.mjs';
@@ -55,6 +55,8 @@ export { default as LoadingModal } from './LoadingModal/index.mjs';
55
55
  import { N as NotificationApiClient, a as Notification, F as FetchNotificationsParams, b as NotificationGroup, c as NotificationEntityType, d as NotificationType } from './NotificationCard-DMdkuVEr.mjs';
56
56
  export { B as BackendNotification, g as BackendNotificationsResponse, e as NotificationCard, f as NotificationItem, h as NotificationsResponse, s as syncNotificationState } from './NotificationCard-DMdkuVEr.mjs';
57
57
  export { ThemeToggle } from './ThemeToggle/index.mjs';
58
+ export { c as ThemeActions, T as ThemeMode, b as ThemeState, a as ThemeStore, u as useThemeStore } from './themeStore-P2X64zC-.mjs';
59
+ import 'zustand/middleware';
58
60
  import 'clsx';
59
61
 
60
62
  /**
package/dist/index.d.ts CHANGED
@@ -33,7 +33,7 @@ export { MultipleChoiceList } from './MultipleChoice/index.js';
33
33
  export { default as IconRender } from './IconRender/index.js';
34
34
  export { d as SubjectData, e as SubjectEnum, I as SubjectIconProps, S as SubjectInfo, b as getSubjectColorClass, a as getSubjectIcon, g as getSubjectInfo, c as getSubjectName } from './SubjectInfo-Dvt0OodP.js';
35
35
  export { DeviceType, getDeviceType, useMobile } from './hooks/useMobile/index.js';
36
- export { ThemeMode, useTheme } from './hooks/useTheme/index.js';
36
+ export { useTheme } from './hooks/useTheme/index.js';
37
37
  export { cn } from './utils/index.js';
38
38
  export { default as DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, MenuLabel, ProfileMenuFooter, ProfileMenuHeader, ProfileMenuSection, ProfileMenuTrigger, ProfileToggleTheme } from './DropdownMenu/index.js';
39
39
  export { default as Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './Select/index.js';
@@ -55,6 +55,8 @@ export { default as LoadingModal } from './LoadingModal/index.js';
55
55
  import { N as NotificationApiClient, a as Notification, F as FetchNotificationsParams, b as NotificationGroup, c as NotificationEntityType, d as NotificationType } from './NotificationCard-DMdkuVEr.js';
56
56
  export { B as BackendNotification, g as BackendNotificationsResponse, e as NotificationCard, f as NotificationItem, h as NotificationsResponse, s as syncNotificationState } from './NotificationCard-DMdkuVEr.js';
57
57
  export { ThemeToggle } from './ThemeToggle/index.js';
58
+ export { c as ThemeActions, T as ThemeMode, b as ThemeState, a as ThemeStore, u as useThemeStore } from './themeStore-P2X64zC-.js';
59
+ import 'zustand/middleware';
58
60
  import 'clsx';
59
61
 
60
62
  /**