qstd 0.2.2 → 0.2.3

package/CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.3] - 2025-11-24
+
+### Changed
+
+- Updated `useTheme` hook to automatically set `data-theme` attribute on `document.documentElement`
+- Renamed internal store property from `theme` to `value` for better clarity
+- Code cleanup in theme utility functions
+
 ## [0.2.2] - 2025-11-24
 
 ### Added

package/dist/react/index.cjs

@@ -3554,34 +3554,29 @@ var THEME_CHANGE_EVENT = "qstd:theme-change";
 
 // src/react/use-theme/fns.ts
 var getInitialTheme = () => {
-  if (typeof window === "undefined") return "light";
   const stored = localStorage.getItem(THEME_STORAGE_KEY);
   return stored === "light" || stored === "dark" ? stored : "light";
 };
 var getInitialStore = () => {
-  if (typeof window === "undefined") {
-    return { theme: "light", isManual: false };
-  }
   try {
     const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
     if (stored) {
       const parsed = JSON.parse(stored);
       return {
-        theme: parsed.theme ?? getInitialTheme(),
+        value: parsed.theme ?? getInitialTheme(),
         isManual: parsed.isManual ?? false
       };
     }
   } catch {
   }
   return {
-    theme: getInitialTheme(),
+    value: getInitialTheme(),
     isManual: false
   };
 };
 var saveStore = (store) => {
-  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    localStorage.setItem(THEME_STORAGE_KEY, store.value);
     localStorage.setItem(THEME_STORE_STORAGE_KEY, JSON.stringify(store));
     window.dispatchEvent(
       new CustomEvent(THEME_CHANGE_EVENT, { detail: store })
@@ -3594,7 +3589,9 @@ var saveStore = (store) => {
 function useTheme() {
   const [store, setStore] = React11__namespace.default.useState(getInitialStore);
   React11__namespace.default.useEffect(() => {
-    if (typeof window === "undefined") return;
+    document.documentElement.setAttribute("data-theme", store.value);
+  }, [store.value]);
+  React11__namespace.default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
         setStore(getInitialStore());
@@ -3623,7 +3620,7 @@ function useTheme() {
   const toggleTheme = (theme) => {
     setStore((prev) => {
       const next = {
-        theme: theme ?? (prev.theme === "light" ? "dark" : "light"),
+        value: theme ?? (prev.value === "light" ? "dark" : "light"),
         isManual: true
       };
       saveStore(next);

package/dist/react/index.d.cts

@@ -20993,7 +20993,7 @@ declare const CompoundBlock: BlockComponent;
 
 type Theme = "light" | "dark";
 type ThemeStore = {
-    theme: Theme;
+    value: Theme;
     isManual: boolean;
 };
 
@@ -21004,7 +21004,7 @@ type ThemeStore = {
 declare function useTheme(): {
     update: (updates: Partial<ThemeStore>) => void;
     toggleTheme: (theme?: "light" | "dark") => void;
-    theme: Theme;
+    value: Theme;
     isManual: boolean;
 };
 

package/dist/react/index.d.ts

@@ -20993,7 +20993,7 @@ declare const CompoundBlock: BlockComponent;
 
 type Theme = "light" | "dark";
 type ThemeStore = {
-    theme: Theme;
+    value: Theme;
     isManual: boolean;
 };
 
@@ -21004,7 +21004,7 @@ type ThemeStore = {
 declare function useTheme(): {
     update: (updates: Partial<ThemeStore>) => void;
     toggleTheme: (theme?: "light" | "dark") => void;
-    theme: Theme;
+    value: Theme;
     isManual: boolean;
 };
 

package/dist/react/index.js

@@ -3531,34 +3531,29 @@ var THEME_CHANGE_EVENT = "qstd:theme-change";
 
 // src/react/use-theme/fns.ts
 var getInitialTheme = () => {
-  if (typeof window === "undefined") return "light";
   const stored = localStorage.getItem(THEME_STORAGE_KEY);
   return stored === "light" || stored === "dark" ? stored : "light";
 };
 var getInitialStore = () => {
-  if (typeof window === "undefined") {
-    return { theme: "light", isManual: false };
-  }
   try {
     const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
     if (stored) {
       const parsed = JSON.parse(stored);
       return {
-        theme: parsed.theme ?? getInitialTheme(),
+        value: parsed.theme ?? getInitialTheme(),
         isManual: parsed.isManual ?? false
       };
     }
   } catch {
   }
   return {
-    theme: getInitialTheme(),
+    value: getInitialTheme(),
     isManual: false
   };
 };
 var saveStore = (store) => {
-  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    localStorage.setItem(THEME_STORAGE_KEY, store.value);
     localStorage.setItem(THEME_STORE_STORAGE_KEY, JSON.stringify(store));
     window.dispatchEvent(
       new CustomEvent(THEME_CHANGE_EVENT, { detail: store })
@@ -3571,7 +3566,9 @@ var saveStore = (store) => {
 function useTheme() {
   const [store, setStore] = React11__default.useState(getInitialStore);
   React11__default.useEffect(() => {
-    if (typeof window === "undefined") return;
+    document.documentElement.setAttribute("data-theme", store.value);
+  }, [store.value]);
+  React11__default.useEffect(() => {
     const handleStorageChange = (e) => {
       if (e.key === THEME_STORAGE_KEY || e.key === THEME_STORE_STORAGE_KEY) {
         setStore(getInitialStore());
@@ -3600,7 +3597,7 @@ function useTheme() {
   const toggleTheme = (theme) => {
     setStore((prev) => {
       const next = {
-        theme: theme ?? (prev.theme === "light" ? "dark" : "light"),
+        value: theme ?? (prev.value === "light" ? "dark" : "light"),
         isManual: true
       };
       saveStore(next);

package/package.json

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