qstd 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.5] - 2025-11-25
+
+### Fixed
+
+- Fixed `useTheme` hook toggle function not updating `data-theme` attribute
+  - Moved localStorage save logic to effect to avoid race condition with event listeners
+  - State updates now properly trigger theme changes on HTML element
+
+## [0.2.4] - 2025-11-24
+
+### Changed
+
+- Renamed `toggleTheme` to `toggle` in `useTheme` hook for cleaner API
+
 ## [0.2.3] - 2025-11-24
 
 ### Changed

package/dist/react/index.cjs

@@ -3588,9 +3588,16 @@ var saveStore = (store) => {
 // src/react/use-theme/index.ts
 function useTheme() {
   const [store, setStore] = React11__namespace.default.useState(getInitialStore);
+  const [shouldSave, setShouldSave] = React11__namespace.default.useState(false);
   React11__namespace.default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
+  React11__namespace.default.useEffect(() => {
+    if (shouldSave) {
+      saveStore(store);
+      setShouldSave(false);
+    }
+  }, [store, shouldSave]);
   React11__namespace.default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
@@ -3611,23 +3618,17 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({ ...prev, ...updates }));
+    setShouldSave(true);
   };
-  const toggleTheme = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+  const toggle = (theme) => {
+    setStore((prev) => ({
+      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+      isManual: true
+    }));
+    setShouldSave(true);
   };
-  return { ...store, update, toggleTheme };
+  return { ...store, update, toggle };
 }
 
 // src/react/index.ts

package/dist/react/index.d.cts

@@ -21003,7 +21003,7 @@ type ThemeStore = {
  */
 declare function useTheme(): {
     update: (updates: Partial<ThemeStore>) => void;
-    toggleTheme: (theme?: "light" | "dark") => void;
+    toggle: (theme?: "light" | "dark") => void;
     value: Theme;
     isManual: boolean;
 };

package/dist/react/index.d.ts

@@ -21003,7 +21003,7 @@ type ThemeStore = {
  */
 declare function useTheme(): {
     update: (updates: Partial<ThemeStore>) => void;
-    toggleTheme: (theme?: "light" | "dark") => void;
+    toggle: (theme?: "light" | "dark") => void;
     value: Theme;
     isManual: boolean;
 };

package/dist/react/index.js

@@ -3565,9 +3565,16 @@ var saveStore = (store) => {
 // src/react/use-theme/index.ts
 function useTheme() {
   const [store, setStore] = React11__default.useState(getInitialStore);
+  const [shouldSave, setShouldSave] = React11__default.useState(false);
   React11__default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
+  React11__default.useEffect(() => {
+    if (shouldSave) {
+      saveStore(store);
+      setShouldSave(false);
+    }
+  }, [store, shouldSave]);
   React11__default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
@@ -3588,23 +3595,17 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({ ...prev, ...updates }));
+    setShouldSave(true);
   };
-  const toggleTheme = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+  const toggle = (theme) => {
+    setStore((prev) => ({
+      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+      isManual: true
+    }));
+    setShouldSave(true);
   };
-  return { ...store, update, toggleTheme };
+  return { ...store, update, toggle };
 }
 
 // src/react/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",