qstd 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.6] - 2025-11-25
+
+### Fixed
+
+- Improved `useTheme` hook reliability with refs to prevent stale closures
+  - Added `storeRef` to always access current state
+  - Added `isInternalUpdateRef` to distinguish internal vs external updates
+  - Fixed localStorage parsing to use correct `parsed.value` property
+  - Prevents duplicate state updates from custom events
+
+## [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

@@ -3563,7 +3563,7 @@ var getInitialStore = () => {
     if (stored) {
       const parsed = JSON.parse(stored);
       return {
-        value: parsed.theme ?? getInitialTheme(),
+        value: parsed.value ?? getInitialTheme(),
         isManual: parsed.isManual ?? false
       };
     }
@@ -3588,6 +3588,11 @@ var saveStore = (store) => {
 // src/react/use-theme/index.ts
 function useTheme() {
   const [store, setStore] = React11__namespace.default.useState(getInitialStore);
+  const storeRef = React11__namespace.default.useRef(store);
+  const isInternalUpdateRef = React11__namespace.default.useRef(false);
+  React11__namespace.default.useEffect(() => {
+    storeRef.current = store;
+  }, [store]);
   React11__namespace.default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
@@ -3598,6 +3603,10 @@ function useTheme() {
       }
     };
     const handleThemeChange = (e) => {
+      if (isInternalUpdateRef.current) {
+        isInternalUpdateRef.current = false;
+        return;
+      }
       const customEvent = e;
       if (customEvent.detail) {
         setStore(customEvent.detail);
@@ -3611,21 +3620,19 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    const newStore = { ...storeRef.current, ...updates };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   const toggle = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+    const newStore = {
+      value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
+      isManual: true
+    };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   return { ...store, update, toggle };
 }

package/dist/react/index.js

@@ -3540,7 +3540,7 @@ var getInitialStore = () => {
     if (stored) {
       const parsed = JSON.parse(stored);
       return {
-        value: parsed.theme ?? getInitialTheme(),
+        value: parsed.value ?? getInitialTheme(),
         isManual: parsed.isManual ?? false
       };
     }
@@ -3565,6 +3565,11 @@ var saveStore = (store) => {
 // src/react/use-theme/index.ts
 function useTheme() {
   const [store, setStore] = React11__default.useState(getInitialStore);
+  const storeRef = React11__default.useRef(store);
+  const isInternalUpdateRef = React11__default.useRef(false);
+  React11__default.useEffect(() => {
+    storeRef.current = store;
+  }, [store]);
   React11__default.useEffect(() => {
     document.documentElement.setAttribute("data-theme", store.value);
   }, [store.value]);
@@ -3575,6 +3580,10 @@ function useTheme() {
       }
     };
     const handleThemeChange = (e) => {
+      if (isInternalUpdateRef.current) {
+        isInternalUpdateRef.current = false;
+        return;
+      }
       const customEvent = e;
       if (customEvent.detail) {
         setStore(customEvent.detail);
@@ -3588,21 +3597,19 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => {
-      const next = { ...prev, ...updates };
-      saveStore(next);
-      return next;
-    });
+    const newStore = { ...storeRef.current, ...updates };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   const toggle = (theme) => {
-    setStore((prev) => {
-      const next = {
-        value: theme ?? (prev.value === "light" ? "dark" : "light"),
-        isManual: true
-      };
-      saveStore(next);
-      return next;
-    });
+    const newStore = {
+      value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
+      isManual: true
+    };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   return { ...store, update, toggle };
 }

package/package.json

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