qstd 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -7,6 +7,14 @@ 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

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,21 +3618,15 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({ ...prev, ...updates }));
+    setShouldSave(true);
   };
   const toggle = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({
+      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+      isManual: true
+    }));
+    setShouldSave(true);
   };
   return { ...store, update, toggle };
 }

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,21 +3595,15 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({ ...prev, ...updates }));
+    setShouldSave(true);
   };
   const toggle = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+    setStore((prev) => ({
+      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+      isManual: true
+    }));
+    setShouldSave(true);
   };
   return { ...store, update, toggle };
 }

package/package.json

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