qstd 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [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,92 @@ 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 = () => {
+  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(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    theme: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    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(() => {
+    if (typeof window === "undefined") return;
+    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 = {
+        theme: theme ?? (prev.theme === "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 +3693,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 = {
+    theme: 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;
+    theme: 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 = {
+    theme: 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;
+    theme: 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,92 @@ 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 = () => {
+  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(),
+        isManual: parsed.isManual ?? false
+      };
+    }
+  } catch {
+  }
+  return {
+    theme: getInitialTheme(),
+    isManual: false
+  };
+};
+var saveStore = (store) => {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, store.theme);
+    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(() => {
+    if (typeof window === "undefined") return;
+    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 = {
+        theme: theme ?? (prev.theme === "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 +3667,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.2",
   "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"
+}