qstd 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.7] - 2025-11-25
+
+### Changed
+
+- Added console logging to `useTheme` toggle function for debugging
+
+## [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

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,16 +3588,14 @@ 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);
+  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]);
-  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) {
@@ -3605,6 +3603,10 @@ function useTheme() {
       }
     };
     const handleThemeChange = (e) => {
+      if (isInternalUpdateRef.current) {
+        isInternalUpdateRef.current = false;
+        return;
+      }
       const customEvent = e;
       if (customEvent.detail) {
         setStore(customEvent.detail);
@@ -3618,15 +3620,20 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => ({ ...prev, ...updates }));
-    setShouldSave(true);
+    const newStore = { ...storeRef.current, ...updates };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   const toggle = (theme) => {
-    setStore((prev) => ({
-      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+    console.log("toggle theme");
+    const newStore = {
+      value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
       isManual: true
-    }));
-    setShouldSave(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,16 +3565,14 @@ 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);
+  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]);
-  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) {
@@ -3582,6 +3580,10 @@ function useTheme() {
       }
     };
     const handleThemeChange = (e) => {
+      if (isInternalUpdateRef.current) {
+        isInternalUpdateRef.current = false;
+        return;
+      }
       const customEvent = e;
       if (customEvent.detail) {
         setStore(customEvent.detail);
@@ -3595,15 +3597,20 @@ function useTheme() {
     };
   }, []);
   const update = (updates) => {
-    setStore((prev) => ({ ...prev, ...updates }));
-    setShouldSave(true);
+    const newStore = { ...storeRef.current, ...updates };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   const toggle = (theme) => {
-    setStore((prev) => ({
-      value: theme ?? (prev.value === "light" ? "dark" : "light"),
+    console.log("toggle theme");
+    const newStore = {
+      value: theme ?? (storeRef.current.value === "light" ? "dark" : "light"),
       isManual: true
-    }));
-    setShouldSave(true);
+    };
+    setStore(newStore);
+    isInternalUpdateRef.current = true;
+    saveStore(newStore);
   };
   return { ...store, update, toggle };
 }

package/package.json

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