qstd 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -7,6 +7,23 @@ 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
+
+- Added `useTheme` hook for managing light/dark theme
+  - Syncs with localStorage and across components using events
+  - Provides `theme`, `isManual` state and `toggleTheme`, `update` functions
+  - Available in `qstd/react`
+
 ## [0.2.1] - 2025-11-24
 
 ### Added

package/dist/react/index.cjs

@@ -3547,6 +3547,89 @@ var CompoundBlock = Object.assign(Block, {
 });
 var block_default = CompoundBlock;
 
+// src/react/use-theme/literals.ts
+var THEME_STORAGE_KEY = "theme";
+var THEME_STORE_STORAGE_KEY = "themeStore";
+var THEME_CHANGE_EVENT = "qstd:theme-change";
+
+// src/react/use-theme/fns.ts
+var getInitialTheme = () => {
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === "light" || stored === "dark" ? stored : "light";
+};
+var getInitialStore = () => {
+  try {
+    const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        value: parsed.theme ?? getInitialTheme(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    value: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  try {
+    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 })
+    );
+  } catch {
+  }
+};
+
+// src/react/use-theme/index.ts
+function useTheme() {
+  const [store, setStore] = React11__namespace.default.useState(getInitialStore);
+  React11__namespace.default.useEffect(() => {
+    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());
+      }
+    };
+    const handleThemeChange = (e) => {
+      const customEvent = e;
+      if (customEvent.detail) {
+        setStore(customEvent.detail);
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    };
+  }, []);
+  const update = (updates) => {
+    setStore((prev) => {
+      const next = { ...prev, ...updates };
+      saveStore(next);
+      return next;
+    });
+  };
+  const toggleTheme = (theme) => {
+    setStore((prev) => {
+      const next = {
+        value: theme ?? (prev.value === "light" ? "dark" : "light"),
+        isManual: true
+      };
+      saveStore(next);
+      return next;
+    });
+  };
+  return { ...store, update, toggleTheme };
+}
+
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
   const [debouncedValue, setDebouncedValue] = React11__namespace.default.useState(value);
@@ -3607,4 +3690,5 @@ function useMatchMedia2(queries, defaultValues = []) {
 exports.default = block_default;
 exports.useDebounce = useDebounce;
 exports.useMatchMedia = useMatchMedia2;
+exports.useTheme = useTheme;
 exports.useThrottle = useThrottle;

package/dist/react/index.d.cts

@@ -20991,6 +20991,23 @@ type BlockComponent = typeof Block & {
 };
 declare const CompoundBlock: BlockComponent;
 
+type Theme = "light" | "dark";
+type ThemeStore = {
+    value: Theme;
+    isManual: boolean;
+};
+
+/**
+ * Hook to manage light/dark theme
+ * Syncs with localStorage and across components using events
+ */
+declare function useTheme(): {
+    update: (updates: Partial<ThemeStore>) => void;
+    toggleTheme: (theme?: "light" | "dark") => void;
+    value: Theme;
+    isManual: boolean;
+};
+
 /**
  * React module - Block component, hooks, and types
  *
@@ -21033,4 +21050,4 @@ declare function useThrottle(value: string, interval?: number): string;
  */
 declare function useMatchMedia(queries: MediaQuery, defaultValues?: MatchedMedia): MatchedMedia;
 
-export { type MatchedMedia, type MediaQuery, type RadioOption, CompoundBlock as default, useDebounce, useMatchMedia, useThrottle };
+export { type MatchedMedia, type MediaQuery, type RadioOption, type Theme, type ThemeStore, CompoundBlock as default, useDebounce, useMatchMedia, useTheme, useThrottle };

package/dist/react/index.d.ts

@@ -20991,6 +20991,23 @@ type BlockComponent = typeof Block & {
 };
 declare const CompoundBlock: BlockComponent;
 
+type Theme = "light" | "dark";
+type ThemeStore = {
+    value: Theme;
+    isManual: boolean;
+};
+
+/**
+ * Hook to manage light/dark theme
+ * Syncs with localStorage and across components using events
+ */
+declare function useTheme(): {
+    update: (updates: Partial<ThemeStore>) => void;
+    toggleTheme: (theme?: "light" | "dark") => void;
+    value: Theme;
+    isManual: boolean;
+};
+
 /**
  * React module - Block component, hooks, and types
  *
@@ -21033,4 +21050,4 @@ declare function useThrottle(value: string, interval?: number): string;
  */
 declare function useMatchMedia(queries: MediaQuery, defaultValues?: MatchedMedia): MatchedMedia;
 
-export { type MatchedMedia, type MediaQuery, type RadioOption, CompoundBlock as default, useDebounce, useMatchMedia, useThrottle };
+export { type MatchedMedia, type MediaQuery, type RadioOption, type Theme, type ThemeStore, CompoundBlock as default, useDebounce, useMatchMedia, useTheme, useThrottle };

package/dist/react/index.js

@@ -3524,6 +3524,89 @@ var CompoundBlock = Object.assign(Block, {
 });
 var block_default = CompoundBlock;
 
+// src/react/use-theme/literals.ts
+var THEME_STORAGE_KEY = "theme";
+var THEME_STORE_STORAGE_KEY = "themeStore";
+var THEME_CHANGE_EVENT = "qstd:theme-change";
+
+// src/react/use-theme/fns.ts
+var getInitialTheme = () => {
+  const stored = localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === "light" || stored === "dark" ? stored : "light";
+};
+var getInitialStore = () => {
+  try {
+    const stored = localStorage.getItem(THEME_STORE_STORAGE_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      return {
+        value: parsed.theme ?? getInitialTheme(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    value: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  try {
+    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 })
+    );
+  } catch {
+  }
+};
+
+// src/react/use-theme/index.ts
+function useTheme() {
+  const [store, setStore] = React11__default.useState(getInitialStore);
+  React11__default.useEffect(() => {
+    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());
+      }
+    };
+    const handleThemeChange = (e) => {
+      const customEvent = e;
+      if (customEvent.detail) {
+        setStore(customEvent.detail);
+      }
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener(THEME_CHANGE_EVENT, handleThemeChange);
+    };
+  }, []);
+  const update = (updates) => {
+    setStore((prev) => {
+      const next = { ...prev, ...updates };
+      saveStore(next);
+      return next;
+    });
+  };
+  const toggleTheme = (theme) => {
+    setStore((prev) => {
+      const next = {
+        value: theme ?? (prev.value === "light" ? "dark" : "light"),
+        isManual: true
+      };
+      saveStore(next);
+      return next;
+    });
+  };
+  return { ...store, update, toggleTheme };
+}
+
 // src/react/index.ts
 function useDebounce(value, delay = 500) {
   const [debouncedValue, setDebouncedValue] = React11__default.useState(value);
@@ -3581,4 +3664,4 @@ function useMatchMedia2(queries, defaultValues = []) {
   return value;
 }
 
-export { block_default as default, useDebounce, useMatchMedia2 as useMatchMedia, useThrottle };
+export { block_default as default, useDebounce, useMatchMedia2 as useMatchMedia, useTheme, useThrottle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qstd",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Standard Block component and utilities library with Panda CSS",
   "author": "malin1",
   "license": "MIT",
@@ -41,6 +41,22 @@
   "sideEffects": [
     "dist/react/index.css"
   ],
+  "scripts": {
+    "build": "panda codegen && panda cssgen && tsup && node scripts/inject-css-import.js",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build",
+    "prepare:local": "pnpm build && cd playground && pnpm prepare",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:all": "pnpx tsx tests/test-all.ts",
+    "test:block": "node tests/test-block.tsx",
+    "test:playground": "node tests/playground-e2e.mjs",
+    "typecheck": "tsc --noEmit",
+    "typecheck:perf": "tsc --noEmit --extendedDiagnostics",
+    "typecheck:trace": "tsc --noEmit --generateTrace ./performance/ts-trace",
+    "analyze:tsserver": "bash performance/analyze-tsserver.sh",
+    "lint": "eslint src --ext ts,tsx"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -93,20 +109,5 @@
   "bugs": {
     "url": "https://github.com/55cancri/qstd/issues"
   },
-  "homepage": "https://github.com/55cancri/qstd#readme",
-  "scripts": {
-    "build": "panda codegen && panda cssgen && tsup && node scripts/inject-css-import.js",
-    "dev": "tsup --watch",
-    "prepare:local": "pnpm build && cd playground && pnpm prepare",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:all": "pnpx tsx tests/test-all.ts",
-    "test:block": "node tests/test-block.tsx",
-    "test:playground": "node tests/playground-e2e.mjs",
-    "typecheck": "tsc --noEmit",
-    "typecheck:perf": "tsc --noEmit --extendedDiagnostics",
-    "typecheck:trace": "tsc --noEmit --generateTrace ./performance/ts-trace",
-    "analyze:tsserver": "bash performance/analyze-tsserver.sh",
-    "lint": "eslint src --ext ts,tsx"
-  }
-}
+  "homepage": "https://github.com/55cancri/qstd#readme"
+}