@pshah-lab/themeswitcher 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+const isBrowser = typeof window !== "undefined" &&
+    typeof document !== "undefined";
+class ThemeToggle {
+    constructor(config = {}) {
+        var _a, _b, _c;
+        this.handleSystemChange = () => {
+            if (this.currentTheme === "auto") {
+                this.applyTheme("auto");
+            }
+        };
+        this.storageKey = (_a = config.storageKey) !== null && _a !== void 0 ? _a : "app-theme";
+        this.useSystemPreference = (_b = config.useSystemPreference) !== null && _b !== void 0 ? _b : true;
+        this.onChange = config.onChange;
+        const stored = this.getStoredTheme();
+        this.currentTheme = (_c = stored !== null && stored !== void 0 ? stored : config.defaultTheme) !== null && _c !== void 0 ? _c : "auto";
+        this.init();
+    }
+    init() {
+        if (!isBrowser)
+            return;
+        if (this.useSystemPreference) {
+            this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            this.mediaQuery.addEventListener("change", this.handleSystemChange);
+        }
+        this.applyTheme(this.currentTheme);
+    }
+    getStoredTheme() {
+        if (!isBrowser)
+            return null;
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            return stored === "light" || stored === "dark" || stored === "auto"
+                ? stored
+                : null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    setStoredTheme(theme) {
+        if (!isBrowser)
+            return;
+        try {
+            localStorage.setItem(this.storageKey, theme);
+        }
+        catch (_a) {
+            /* noop */
+        }
+    }
+    getEffectiveTheme() {
+        var _a;
+        if (this.currentTheme === "auto") {
+            return ((_a = this.mediaQuery) === null || _a === void 0 ? void 0 : _a.matches) ? "dark" : "light";
+        }
+        return this.currentTheme;
+    }
+    applyTheme(theme) {
+        var _a;
+        if (!isBrowser)
+            return;
+        const effective = this.getEffectiveTheme();
+        document.documentElement.setAttribute("data-theme", effective);
+        document.documentElement.classList.remove("light", "dark");
+        document.documentElement.classList.add(effective);
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, theme, effective);
+    }
+    setTheme(theme) {
+        this.currentTheme = theme;
+        this.setStoredTheme(theme);
+        this.applyTheme(theme);
+    }
+    toggle() {
+        const next = this.getEffectiveTheme() === "dark" ? "light" : "dark";
+        this.setTheme(next);
+    }
+    getTheme() {
+        return this.currentTheme;
+    }
+    destroy() {
+        if (this.mediaQuery) {
+            this.mediaQuery.removeEventListener("change", this.handleSystemChange);
+        }
+    }
+}
+function createThemeToggle(config) {
+    return new ThemeToggle(config);
+}
+
+exports.ThemeToggle = ThemeToggle;
+exports.createThemeToggle = createThemeToggle;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["export type Theme = \"light\" | \"dark\" | \"auto\";\n\nexport interface ThemeConfig {\n  storageKey?: string;\n  defaultTheme?: Theme;\n  useSystemPreference?: boolean;\n  onChange?: (theme: Theme, effective: \"light\" | \"dark\") => void;\n}\n\nconst isBrowser =\n  typeof window !== \"undefined\" &&\n  typeof document !== \"undefined\";\n\nexport class ThemeToggle {\n  private storageKey: string;\n  private currentTheme: Theme;\n  private useSystemPreference: boolean;\n  private onChange?: ThemeConfig[\"onChange\"];\n  private mediaQuery?: MediaQueryList;\n\n  private handleSystemChange = () => {\n    if (this.currentTheme === \"auto\") {\n      this.applyTheme(\"auto\");\n    }\n  };\n\n  constructor(config: ThemeConfig = {}) {\n    this.storageKey = config.storageKey ?? \"app-theme\";\n    this.useSystemPreference = config.useSystemPreference ?? true;\n    this.onChange = config.onChange;\n\n    const stored = this.getStoredTheme();\n    this.currentTheme = stored ?? config.defaultTheme ?? \"auto\";\n\n    this.init();\n  }\n\n  private init(): void {\n    if (!isBrowser) return;\n\n    if (this.useSystemPreference) {\n      this.mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      this.mediaQuery.addEventListener(\"change\", this.handleSystemChange);\n    }\n\n    this.applyTheme(this.currentTheme);\n  }\n\n  private getStoredTheme(): Theme | null {\n    if (!isBrowser) return null;\n\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      return stored === \"light\" || stored === \"dark\" || stored === \"auto\"\n        ? stored\n        : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private setStoredTheme(theme: Theme): void {\n    if (!isBrowser) return;\n\n    try {\n      localStorage.setItem(this.storageKey, theme);\n    } catch {\n      /* noop */\n    }\n  }\n\n  public getEffectiveTheme(): \"light\" | \"dark\" {\n    if (this.currentTheme === \"auto\") {\n      return this.mediaQuery?.matches ? \"dark\" : \"light\";\n    }\n    return this.currentTheme;\n  }\n\n  private applyTheme(theme: Theme): void {\n    if (!isBrowser) return;\n\n    const effective = this.getEffectiveTheme();\n\n    document.documentElement.setAttribute(\"data-theme\", effective);\n    document.documentElement.classList.remove(\"light\", \"dark\");\n    document.documentElement.classList.add(effective);\n\n    this.onChange?.(theme, effective);\n  }\n\n  public setTheme(theme: Theme): void {\n    this.currentTheme = theme;\n    this.setStoredTheme(theme);\n    this.applyTheme(theme);\n  }\n\n  public toggle(): void {\n    const next =\n      this.getEffectiveTheme() === \"dark\" ? \"light\" : \"dark\";\n    this.setTheme(next);\n  }\n\n  public getTheme(): Theme {\n    return this.currentTheme;\n  }\n\n  public destroy(): void {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\n        \"change\",\n        this.handleSystemChange\n      );\n    }\n  }\n}\n\nexport function createThemeToggle(\n  config?: ThemeConfig\n): ThemeToggle {\n  return new ThemeToggle(config);\n}"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,44 +1,25 @@
-type Theme = "light" | "dark";
-type ThemeMode = Theme | "system";
-interface ThemeManagerOptions {
-    /**
-     * Attribute applied to the root element
-     * Example: data-theme="dark"
-     */
-    attribute?: string;
-    /**
-     * Storage key for persistence
-     */
-    storageKey?: string;
-    /**
-     * Default mode when nothing is stored
-     */
-    defaultMode?: ThemeMode;
-}
-type ThemeSubscriber = (theme: Theme, mode: ThemeMode) => void;
-interface ThemeManager {
-    get(): Theme;
-    getMode(): ThemeMode;
-    set(mode: ThemeMode): void;
-    toggle(): void;
-    subscribe(fn: ThemeSubscriber): () => void;
+type Theme = "light" | "dark" | "auto";
+
+interface ThemeConfig {
+  storageKey?: string;
+  defaultTheme?: Theme;
+  useSystemPreference?: boolean;
+  onChange?: (theme: Theme, effective: "light" | "dark") => void;
 }
 
-declare function createThemeManager(options?: ThemeManagerOptions): ThemeManager;
+declare class ThemeToggle {
+  constructor(config?: ThemeConfig);
+
+  setTheme(theme: Theme): void;
+  toggle(): void;
+  getTheme(): Theme;
+  getEffectiveTheme(): "light" | "dark";
+  destroy(): void;
+}
 
-type UseThemeResult = {
-    theme: Theme;
-    mode: ThemeMode;
-    setTheme: (mode: ThemeMode) => void;
-    toggleTheme: () => void;
-};
-/**
- * Create a React hook bound to a ThemeManager instance.
- *
- * IMPORTANT:
- * - Call this once (e.g. in a module or provider)
- * - Do NOT call inside components repeatedly
- */
-declare function createUseTheme(options?: ThemeManagerOptions): () => UseThemeResult;
+declare function createThemeToggle(
+  config?: ThemeConfig
+): ThemeToggle;
 
-export { type Theme, type ThemeManager, type ThemeManagerOptions, type ThemeMode, type ThemeSubscriber, createThemeManager, createUseTheme };
+export { ThemeToggle, createThemeToggle };
+export type { Theme, ThemeConfig };

package/dist/index.mjs

@@ -1,209 +1,90 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+const isBrowser = typeof window !== "undefined" &&
+    typeof document !== "undefined";
+class ThemeToggle {
+    constructor(config = {}) {
+        var _a, _b, _c;
+        this.handleSystemChange = () => {
+            if (this.currentTheme === "auto") {
+                this.applyTheme("auto");
+            }
+        };
+        this.storageKey = (_a = config.storageKey) !== null && _a !== void 0 ? _a : "app-theme";
+        this.useSystemPreference = (_b = config.useSystemPreference) !== null && _b !== void 0 ? _b : true;
+        this.onChange = config.onChange;
+        const stored = this.getStoredTheme();
+        this.currentTheme = (_c = stored !== null && stored !== void 0 ? stored : config.defaultTheme) !== null && _c !== void 0 ? _c : "auto";
+        this.init();
     }
-  return a;
-};
-
-// src/storage.ts
-function createPersistence(key) {
-  if (typeof window === "undefined") {
-    return memoryStorage();
-  }
-  try {
-    const testKey = "__theme_test__";
-    window.localStorage.setItem(testKey, testKey);
-    window.localStorage.removeItem(testKey);
-    return localStorageAdapter(key);
-  } catch (e) {
-    return memoryStorage();
-  }
-}
-function localStorageAdapter(key) {
-  return {
-    get() {
-      const value = window.localStorage.getItem(key);
-      if (value === "light" || value === "dark" || value === "system") {
-        return value;
-      }
-      if (value !== null) {
-        window.localStorage.removeItem(key);
-      }
-      return null;
-    },
-    set(value) {
-      window.localStorage.setItem(key, value);
-    },
-    clear() {
-      window.localStorage.removeItem(key);
+    init() {
+        if (!isBrowser)
+            return;
+        if (this.useSystemPreference) {
+            this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+            this.mediaQuery.addEventListener("change", this.handleSystemChange);
+        }
+        this.applyTheme(this.currentTheme);
     }
-  };
-}
-function memoryStorage() {
-  let value = null;
-  return {
-    get() {
-      return value;
-    },
-    set(v) {
-      value = v;
-    },
-    clear() {
-      value = null;
+    getStoredTheme() {
+        if (!isBrowser)
+            return null;
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            return stored === "light" || stored === "dark" || stored === "auto"
+                ? stored
+                : null;
+        }
+        catch (_a) {
+            return null;
+        }
     }
-  };
-}
-
-// src/system.ts
-var QUERY = "(prefers-color-scheme: dark)";
-function getSystemTheme() {
-  if (typeof window === "undefined") {
-    return "light";
-  }
-  if (!window.matchMedia) {
-    return "light";
-  }
-  return window.matchMedia(QUERY).matches ? "dark" : "light";
-}
-function subscribeSystemTheme(callback) {
-  if (typeof window === "undefined" || !window.matchMedia) {
-    return () => {
-    };
-  }
-  const media = window.matchMedia(QUERY);
-  const handler = (event) => {
-    callback(event.matches ? "dark" : "light");
-  };
-  if (media.addEventListener) {
-    media.addEventListener("change", handler);
-    return () => media.removeEventListener("change", handler);
-  }
-  media.addListener(handler);
-  return () => media.removeListener(handler);
-}
-
-// src/dom.ts
-function getRoot() {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  return document.documentElement;
-}
-function applyTheme(theme, attribute) {
-  const root = getRoot();
-  if (!root) return;
-  const current = root.getAttribute(attribute);
-  if (current === theme) return;
-  root.setAttribute(attribute, theme);
-}
-
-// src/manager.ts
-var DEFAULT_OPTIONS = {
-  attribute: "data-theme",
-  storageKey: "theme-mode",
-  defaultMode: "system"
-};
-function createThemeManager(options = {}) {
-  var _a;
-  const config = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options);
-  const storage = createPersistence(config.storageKey);
-  const subscribers = /* @__PURE__ */ new Set();
-  let mode = (_a = storage.get()) != null ? _a : config.defaultMode;
-  let theme = resolveTheme(mode);
-  applyTheme(theme, config.attribute);
-  let unsubscribeSystem = null;
-  if (mode === "system") {
-    unsubscribeSystem = subscribeSystemTheme(handleSystemChange);
-  }
-  function resolveTheme(m) {
-    return m === "system" ? getSystemTheme() : m;
-  }
-  let notifying = false;
-  function notify() {
-    if (notifying) return;
-    notifying = true;
-    subscribers.forEach((fn) => fn(theme, mode));
-    notifying = false;
-  }
-  function setMode(nextMode) {
-    if (nextMode === mode) return;
-    mode = nextMode;
-    storage.set(mode);
-    if (unsubscribeSystem) {
-      unsubscribeSystem();
-      unsubscribeSystem = null;
+    setStoredTheme(theme) {
+        if (!isBrowser)
+            return;
+        try {
+            localStorage.setItem(this.storageKey, theme);
+        }
+        catch (_a) {
+            /* noop */
+        }
+    }
+    getEffectiveTheme() {
+        var _a;
+        if (this.currentTheme === "auto") {
+            return ((_a = this.mediaQuery) === null || _a === void 0 ? void 0 : _a.matches) ? "dark" : "light";
+        }
+        return this.currentTheme;
+    }
+    applyTheme(theme) {
+        var _a;
+        if (!isBrowser)
+            return;
+        const effective = this.getEffectiveTheme();
+        document.documentElement.setAttribute("data-theme", effective);
+        document.documentElement.classList.remove("light", "dark");
+        document.documentElement.classList.add(effective);
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, theme, effective);
     }
-    theme = resolveTheme(mode);
-    applyTheme(theme, config.attribute);
-    if (mode === "system") {
-      unsubscribeSystem = subscribeSystemTheme(handleSystemChange);
+    setTheme(theme) {
+        this.currentTheme = theme;
+        this.setStoredTheme(theme);
+        this.applyTheme(theme);
     }
-    notify();
-  }
-  function handleSystemChange(nextTheme) {
-    if (mode !== "system") return;
-    if (theme === nextTheme) return;
-    theme = nextTheme;
-    applyTheme(theme, config.attribute);
-    notify();
-  }
-  return {
-    get() {
-      return theme;
-    },
-    getMode() {
-      return mode;
-    },
-    set(nextMode) {
-      setMode(nextMode);
-    },
     toggle() {
-      setMode(theme === "dark" ? "light" : "dark");
-    },
-    subscribe(fn) {
-      subscribers.add(fn);
-      fn(theme, mode);
-      return () => {
-        subscribers.delete(fn);
-      };
+        const next = this.getEffectiveTheme() === "dark" ? "light" : "dark";
+        this.setTheme(next);
+    }
+    getTheme() {
+        return this.currentTheme;
+    }
+    destroy() {
+        if (this.mediaQuery) {
+            this.mediaQuery.removeEventListener("change", this.handleSystemChange);
+        }
     }
-  };
 }
-
-// src/react.ts
-import { useEffect, useState } from "react";
-function createUseTheme(options) {
-  const manager = createThemeManager(options);
-  return function useTheme() {
-    const [theme, setThemeState] = useState(manager.get());
-    const [mode, setModeState] = useState(manager.getMode());
-    useEffect(() => {
-      const unsubscribe = manager.subscribe((t, m) => {
-        setThemeState(t);
-        setModeState(m);
-      });
-      return unsubscribe;
-    }, []);
-    return {
-      theme,
-      mode,
-      setTheme: (nextMode) => manager.set(nextMode),
-      toggleTheme: () => manager.toggle()
-    };
-  };
+function createThemeToggle(config) {
+    return new ThemeToggle(config);
 }
-export {
-  createThemeManager,
-  createUseTheme
-};
-//# sourceMappingURL=index.mjs.map
+
+export { ThemeToggle, createThemeToggle };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/storage.ts","../src/system.ts","../src/dom.ts","../src/manager.ts","../src/react.ts"],"sourcesContent":["// src/storage.ts\n\nimport type { ThemeMode } from \"./types\";\n\nexport interface StorageAdapter {\n  get(): ThemeMode | null;\n  set(value: ThemeMode): void;\n  clear(): void;\n}\n\nexport function createPersistence(key: string): StorageAdapter {\n  // SSR / non-browser guard\n  if (typeof window === \"undefined\") {\n    return memoryStorage();\n  }\n\n  try {\n    const testKey = \"__theme_test__\";\n    window.localStorage.setItem(testKey, testKey);\n    window.localStorage.removeItem(testKey);\n\n    return localStorageAdapter(key);\n  } catch {\n    return memoryStorage();\n  }\n}\n\nfunction localStorageAdapter(key: string): StorageAdapter {\n  return {\n    get() {\n      const value = window.localStorage.getItem(key);\n\n      if (value === \"light\" || value === \"dark\" || value === \"system\") {\n        return value;\n      }\n\n      // clear corrupted or unknown values\n      if (value !== null) {\n        window.localStorage.removeItem(key);\n      }\n\n      return null;\n    },\n\n    set(value) {\n      window.localStorage.setItem(key, value);\n    },\n\n    clear() {\n      window.localStorage.removeItem(key);\n    },\n  };\n}\n\nfunction memoryStorage(): StorageAdapter {\n  let value: ThemeMode | null = null;\n\n  return {\n    get() {\n      return value;\n    },\n    set(v) {\n      value = v;\n    },\n    clear() {\n      value = null;\n    },\n  };\n}\n","// src/system.ts\n\nimport type { Theme } from \"./types\";\n\nconst QUERY = \"(prefers-color-scheme: dark)\";\n\nexport function getSystemTheme(): Theme {\n  if (typeof window === \"undefined\") {\n    return \"light\"; // safe default for SSR\n  }\n\n  if (!window.matchMedia) {\n    return \"light\";\n  }\n\n  return window.matchMedia(QUERY).matches ? \"dark\" : \"light\";\n}\n\nexport function subscribeSystemTheme(\n  callback: (theme: Theme) => void\n): () => void {\n  if (typeof window === \"undefined\" || !window.matchMedia) {\n    return () => {};\n  }\n\n  const media = window.matchMedia(QUERY);\n\n  const handler = (event: MediaQueryListEvent) => {\n    callback(event.matches ? \"dark\" : \"light\");\n  };\n\n  // Modern browsers\n  if (media.addEventListener) {\n    media.addEventListener(\"change\", handler);\n    return () => media.removeEventListener(\"change\", handler);\n  }\n\n  // Legacy Safari fallback\n  media.addListener(handler);\n  return () => media.removeListener(handler);\n}","// src/dom.ts\n\nimport type { Theme } from \"./types\";\n\nfunction getRoot(): HTMLElement | null {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n  return document.documentElement;\n}\n\nexport function applyTheme(theme: Theme, attribute: string): void {\n  const root = getRoot();\n  if (!root) return;\n\n  const current = root.getAttribute(attribute);\n  if (current === theme) return; // avoid unnecessary DOM writes\n\n  root.setAttribute(attribute, theme);\n}\n\nexport function getAppliedTheme(attribute: string): Theme | null {\n  const root = getRoot();\n  if (!root) return null;\n\n  const value = root.getAttribute(attribute);\n  if (value === \"light\" || value === \"dark\") {\n    return value;\n  }\n\n  return null;\n}","// src/manager.ts\n\nimport type {\n  Theme,\n  ThemeMode,\n  ThemeManager,\n  ThemeManagerOptions,\n  ThemeSubscriber,\n} from \"./types\";\n\nimport { createPersistence } from \"./storage\";\nimport { getSystemTheme, subscribeSystemTheme } from \"./system\";\nimport { applyTheme } from \"./dom\";\n\nconst DEFAULT_OPTIONS: Required<ThemeManagerOptions> = {\n  attribute: \"data-theme\",\n  storageKey: \"theme-mode\",\n  defaultMode: \"system\",\n};\n\nexport function createThemeManager(\n  options: ThemeManagerOptions = {}\n): ThemeManager {\n  const config = { ...DEFAULT_OPTIONS, ...options };\n\n  const storage = createPersistence(config.storageKey);\n  const subscribers = new Set<ThemeSubscriber>();\n\n  let mode: ThemeMode = storage.get() ?? config.defaultMode;\n\n  let theme: Theme = resolveTheme(mode);\n\n  // Apply initial theme immediately\n  applyTheme(theme, config.attribute);\n\n  // Listen to OS theme changes only when needed\n  let unsubscribeSystem: (() => void) | null = null;\n  if (mode === \"system\") {\n    unsubscribeSystem = subscribeSystemTheme(handleSystemChange);\n  }\n\n  function resolveTheme(m: ThemeMode): Theme {\n    return m === \"system\" ? getSystemTheme() : m;\n  }\n  let notifying = false;\n\n  function notify() {\n    if (notifying) return;\n\n    notifying = true;\n    subscribers.forEach((fn) => fn(theme, mode));\n    notifying = false;\n  }\n\n  function setMode(nextMode: ThemeMode) {\n    if (nextMode === mode) return;\n\n    mode = nextMode;\n    storage.set(mode);\n\n    if (unsubscribeSystem) {\n      unsubscribeSystem();\n      unsubscribeSystem = null;\n    }\n\n    theme = resolveTheme(mode);\n    applyTheme(theme, config.attribute);\n\n    if (mode === \"system\") {\n      unsubscribeSystem = subscribeSystemTheme(handleSystemChange);\n    }\n\n    notify();\n  }\n\n  function handleSystemChange(nextTheme: Theme) {\n    if (mode !== \"system\") return;\n    if (theme === nextTheme) return;\n\n    theme = nextTheme;\n    applyTheme(theme, config.attribute);\n    notify();\n  }\n\n  return {\n    get() {\n      return theme;\n    },\n\n    getMode() {\n      return mode;\n    },\n\n    set(nextMode) {\n      setMode(nextMode);\n    },\n    toggle() {\n      setMode(theme === \"dark\" ? \"light\" : \"dark\");\n    },\n\n    subscribe(fn) {\n      subscribers.add(fn);\n      fn(theme, mode); // immediate sync\n      return () => {\n        subscribers.delete(fn);\n      };\n    },\n  };\n}\n","import { useEffect, useState } from \"react\";\nimport type { Theme, ThemeMode, ThemeManagerOptions } from \"./types\";\nimport { createThemeManager } from \"./manager\";\n\ntype UseThemeResult = {\n  theme: Theme;\n  mode: ThemeMode;\n  setTheme: (mode: ThemeMode) => void;\n  toggleTheme: () => void;\n};\n\n/**\n * Create a React hook bound to a ThemeManager instance.\n *\n * IMPORTANT:\n * - Call this once (e.g. in a module or provider)\n * - Do NOT call inside components repeatedly\n */\nexport function createUseTheme(options?: ThemeManagerOptions) {\n  const manager = createThemeManager(options);\n\n  return function useTheme(): UseThemeResult {\n    const [theme, setThemeState] = useState<Theme>(manager.get());\n    const [mode, setModeState] = useState<ThemeMode>(manager.getMode());\n\n    useEffect(() => {\n      const unsubscribe = manager.subscribe((t, m) => {\n        setThemeState(t);\n        setModeState(m);\n      });\n\n      return unsubscribe;\n    }, []);\n\n    return {\n      theme,\n      mode,\n      setTheme: (nextMode: ThemeMode) => manager.set(nextMode),\n      toggleTheme: () => manager.toggle(),\n    };\n  };\n}"],"mappings":"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","names":[]}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["export type Theme = \"light\" | \"dark\" | \"auto\";\n\nexport interface ThemeConfig {\n  storageKey?: string;\n  defaultTheme?: Theme;\n  useSystemPreference?: boolean;\n  onChange?: (theme: Theme, effective: \"light\" | \"dark\") => void;\n}\n\nconst isBrowser =\n  typeof window !== \"undefined\" &&\n  typeof document !== \"undefined\";\n\nexport class ThemeToggle {\n  private storageKey: string;\n  private currentTheme: Theme;\n  private useSystemPreference: boolean;\n  private onChange?: ThemeConfig[\"onChange\"];\n  private mediaQuery?: MediaQueryList;\n\n  private handleSystemChange = () => {\n    if (this.currentTheme === \"auto\") {\n      this.applyTheme(\"auto\");\n    }\n  };\n\n  constructor(config: ThemeConfig = {}) {\n    this.storageKey = config.storageKey ?? \"app-theme\";\n    this.useSystemPreference = config.useSystemPreference ?? true;\n    this.onChange = config.onChange;\n\n    const stored = this.getStoredTheme();\n    this.currentTheme = stored ?? config.defaultTheme ?? \"auto\";\n\n    this.init();\n  }\n\n  private init(): void {\n    if (!isBrowser) return;\n\n    if (this.useSystemPreference) {\n      this.mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      this.mediaQuery.addEventListener(\"change\", this.handleSystemChange);\n    }\n\n    this.applyTheme(this.currentTheme);\n  }\n\n  private getStoredTheme(): Theme | null {\n    if (!isBrowser) return null;\n\n    try {\n      const stored = localStorage.getItem(this.storageKey);\n      return stored === \"light\" || stored === \"dark\" || stored === \"auto\"\n        ? stored\n        : null;\n    } catch {\n      return null;\n    }\n  }\n\n  private setStoredTheme(theme: Theme): void {\n    if (!isBrowser) return;\n\n    try {\n      localStorage.setItem(this.storageKey, theme);\n    } catch {\n      /* noop */\n    }\n  }\n\n  public getEffectiveTheme(): \"light\" | \"dark\" {\n    if (this.currentTheme === \"auto\") {\n      return this.mediaQuery?.matches ? \"dark\" : \"light\";\n    }\n    return this.currentTheme;\n  }\n\n  private applyTheme(theme: Theme): void {\n    if (!isBrowser) return;\n\n    const effective = this.getEffectiveTheme();\n\n    document.documentElement.setAttribute(\"data-theme\", effective);\n    document.documentElement.classList.remove(\"light\", \"dark\");\n    document.documentElement.classList.add(effective);\n\n    this.onChange?.(theme, effective);\n  }\n\n  public setTheme(theme: Theme): void {\n    this.currentTheme = theme;\n    this.setStoredTheme(theme);\n    this.applyTheme(theme);\n  }\n\n  public toggle(): void {\n    const next =\n      this.getEffectiveTheme() === \"dark\" ? \"light\" : \"dark\";\n    this.setTheme(next);\n  }\n\n  public getTheme(): Theme {\n    return this.currentTheme;\n  }\n\n  public destroy(): void {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\n        \"change\",\n        this.handleSystemChange\n      );\n    }\n  }\n}\n\nexport function createThemeToggle(\n  config?: ThemeConfig\n): ThemeToggle {\n  return new ThemeToggle(config);\n}"],"names":[],"mappings":"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"}

package/dist/react.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.cjs');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/**
+ * Create a React hook bound to a single ThemeToggle instance.
+ *
+ * IMPORTANT:
+ * - Call this ONCE at module scope
+ * - Do NOT call inside components
+ */
+function createUseTheme(config) {
+    const manager = index.createThemeToggle(config);
+    return function useTheme() {
+        const [theme, setTheme] = React__namespace.useState(manager.getTheme());
+        const [effectiveTheme, setEffectiveTheme] = React__namespace.useState(manager.getEffectiveTheme());
+        React__namespace.useEffect(() => {
+            const prev = manager["onChange"];
+            manager["onChange"] = (t, e) => {
+                setTheme(t);
+                setEffectiveTheme(e);
+            };
+            return () => {
+                manager["onChange"] = prev;
+            };
+        }, []);
+        return {
+            theme,
+            effectiveTheme,
+            setTheme: (t) => manager.setTheme(t),
+            toggleTheme: () => manager.toggle(),
+        };
+    };
+}
+
+exports.createUseTheme = createUseTheme;
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.cjs","sources":["../src/react-adapter.ts"],"sourcesContent":["import * as React from \"react\";\nimport type { Theme, ThemeConfig } from \"./index\";\nimport { createThemeToggle } from \"./index\";\n\ntype UseThemeResult = {\n  theme: Theme;\n  effectiveTheme: \"light\" | \"dark\";\n  setTheme: (theme: Theme) => void;\n  toggleTheme: () => void;\n};\n\n/**\n * Create a React hook bound to a single ThemeToggle instance.\n *\n * IMPORTANT:\n * - Call this ONCE at module scope\n * - Do NOT call inside components\n */\nexport function createUseTheme(config?: ThemeConfig) {\n  const manager = createThemeToggle(config);\n\n  return function useTheme(): UseThemeResult {\n    const [theme, setTheme] = React.useState<Theme>(\n      manager.getTheme()\n    );\n    const [effectiveTheme, setEffectiveTheme] = React.useState<\n      \"light\" | \"dark\"\n    >(manager.getEffectiveTheme());\n\n    React.useEffect(() => {\n      const prev = manager[\"onChange\"];\n\n      manager[\"onChange\"] = (t, e) => {\n        setTheme(t);\n        setEffectiveTheme(e);\n      };\n\n      return () => {\n        manager[\"onChange\"] = prev;\n      };\n    }, []);\n\n    return {\n      theme,\n      effectiveTheme,\n      setTheme: (t) => manager.setTheme(t),\n      toggleTheme: () => manager.toggle(),\n    };\n  };\n}"],"names":["createThemeToggle","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;;;AAMG;AACG,SAAU,cAAc,CAAC,MAAoB,EAAA;AACjD,IAAA,MAAM,OAAO,GAAGA,uBAAiB,CAAC,MAAM,CAAC;AAEzC,IAAA,OAAO,SAAS,QAAQ,GAAA;AACtB,QAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,gBAAK,CAAC,QAAQ,CACtC,OAAO,CAAC,QAAQ,EAAE,CACnB;AACD,QAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,gBAAK,CAAC,QAAQ,CAExD,OAAO,CAAC,iBAAiB,EAAE,CAAC;AAE9B,QAAAA,gBAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC;YAEhC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;gBAC7B,QAAQ,CAAC,CAAC,CAAC;gBACX,iBAAiB,CAAC,CAAC,CAAC;AACtB,YAAA,CAAC;AAED,YAAA,OAAO,MAAK;AACV,gBAAA,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI;AAC5B,YAAA,CAAC;QACH,CAAC,EAAE,EAAE,CAAC;QAEN,OAAO;YACL,KAAK;YACL,cAAc;YACd,QAAQ,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;AACpC,YAAA,WAAW,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE;SACpC;AACH,IAAA,CAAC;AACH;;;;"}

package/dist/react.d.ts

@@ -0,0 +1,18 @@
+import { ThemeConfig, Theme } from './index.js';
+
+type UseThemeResult = {
+    theme: Theme;
+    effectiveTheme: "light" | "dark";
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+};
+/**
+ * Create a React hook bound to a single ThemeToggle instance.
+ *
+ * IMPORTANT:
+ * - Call this ONCE at module scope
+ * - Do NOT call inside components
+ */
+declare function createUseTheme(config?: ThemeConfig): () => UseThemeResult;
+
+export { createUseTheme };

package/dist/react.mjs

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { createThemeToggle } from './index.mjs';
+
+/**
+ * Create a React hook bound to a single ThemeToggle instance.
+ *
+ * IMPORTANT:
+ * - Call this ONCE at module scope
+ * - Do NOT call inside components
+ */
+function createUseTheme(config) {
+    const manager = createThemeToggle(config);
+    return function useTheme() {
+        const [theme, setTheme] = React.useState(manager.getTheme());
+        const [effectiveTheme, setEffectiveTheme] = React.useState(manager.getEffectiveTheme());
+        React.useEffect(() => {
+            const prev = manager["onChange"];
+            manager["onChange"] = (t, e) => {
+                setTheme(t);
+                setEffectiveTheme(e);
+            };
+            return () => {
+                manager["onChange"] = prev;
+            };
+        }, []);
+        return {
+            theme,
+            effectiveTheme,
+            setTheme: (t) => manager.setTheme(t),
+            toggleTheme: () => manager.toggle(),
+        };
+    };
+}
+
+export { createUseTheme };
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","sources":["../src/react-adapter.ts"],"sourcesContent":["import * as React from \"react\";\nimport type { Theme, ThemeConfig } from \"./index\";\nimport { createThemeToggle } from \"./index\";\n\ntype UseThemeResult = {\n  theme: Theme;\n  effectiveTheme: \"light\" | \"dark\";\n  setTheme: (theme: Theme) => void;\n  toggleTheme: () => void;\n};\n\n/**\n * Create a React hook bound to a single ThemeToggle instance.\n *\n * IMPORTANT:\n * - Call this ONCE at module scope\n * - Do NOT call inside components\n */\nexport function createUseTheme(config?: ThemeConfig) {\n  const manager = createThemeToggle(config);\n\n  return function useTheme(): UseThemeResult {\n    const [theme, setTheme] = React.useState<Theme>(\n      manager.getTheme()\n    );\n    const [effectiveTheme, setEffectiveTheme] = React.useState<\n      \"light\" | \"dark\"\n    >(manager.getEffectiveTheme());\n\n    React.useEffect(() => {\n      const prev = manager[\"onChange\"];\n\n      manager[\"onChange\"] = (t, e) => {\n        setTheme(t);\n        setEffectiveTheme(e);\n      };\n\n      return () => {\n        manager[\"onChange\"] = prev;\n      };\n    }, []);\n\n    return {\n      theme,\n      effectiveTheme,\n      setTheme: (t) => manager.setTheme(t),\n      toggleTheme: () => manager.toggle(),\n    };\n  };\n}"],"names":[],"mappings":";;;AAWA;;;;;;AAMG;AACG,SAAU,cAAc,CAAC,MAAoB,EAAA;AACjD,IAAA,MAAM,OAAO,GAAG,iBAAiB,CAAC,MAAM,CAAC;AAEzC,IAAA,OAAO,SAAS,QAAQ,GAAA;AACtB,QAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CACtC,OAAO,CAAC,QAAQ,EAAE,CACnB;AACD,QAAA,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAExD,OAAO,CAAC,iBAAiB,EAAE,CAAC;AAE9B,QAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,UAAU,CAAC;YAEhC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAI;gBAC7B,QAAQ,CAAC,CAAC,CAAC;gBACX,iBAAiB,CAAC,CAAC,CAAC;AACtB,YAAA,CAAC;AAED,YAAA,OAAO,MAAK;AACV,gBAAA,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI;AAC5B,YAAA,CAAC;QACH,CAAC,EAAE,EAAE,CAAC;QAEN,OAAO;YACL,KAAK;YACL,cAAc;YACd,QAAQ,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;AACpC,YAAA,WAAW,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE;SACpC;AACH,IAAA,CAAC;AACH;;;;"}

package/package.json

@@ -1,47 +1,56 @@
 {
-  "name": "@pshah-lab/themeswitcher",
-  "version": "0.1.1",
-  "description": "Light, dark, and system theme manager with SSR-safe no-flash support",
-  "license": "MIT",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+    "name": "@pshah-lab/themeswitcher",
+    "version": "0.1.3",
+    "description": "A lightweight, framework-agnostic theme manager with SSR-safe dark/light/system mode support",
+    "license": "MIT",
+    "type": "module",
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.cjs"
+        },
+        "./react": {
+            "import": "./dist/react.mjs",
+            "require": "./dist/react.cjs",
+            "types": "./dist/react.d.ts"
+        }
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "rollup -c",
+        "prepublishOnly": "npm run build"
+    },
+    "peerDependencies": {
+        "react": ">=16.8"
+    },
+    "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        }
+    },
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^11.1.6",
+        "@types/react": "^19.2.8",
+        "react": "^19.2.3",
+        "rollup": "^4.55.1",
+        "rollup-plugin-dts": "^6.3.0",
+        "typescript": "^5.9.3"
+    },
+    "keywords": [
+        "dark-mode",
+        "light-mode",
+        "theme",
+        "toggle",
+        "nextjs",
+        "react",
+        "ssr"
+    ],
+    "dependencies": {
+        "tslib": "^2.8.1"
     }
-  },
-  "files": [
-    "dist",
-    "scripts"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "theme",
-    "dark-mode",
-    "light-mode",
-    "theme-switcher",
-    "css-theme",
-    "ssr"
-  ],
-  "devDependencies": {
-    "@types/react": "^19.2.7",
-    "jsdom": "^27.4.0",
-    "tsup": "^8.5.1",
-    "typescript": "^5.0.0",
-    "vitest": "^4.0.16"
-  },
-  "peerDependencies": {
-    "react": ">=16.8"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  }
 }

package/README.md

@@ -1,207 +0,0 @@
-# @pshah-lab/themeswitcher
-
-A lightweight, framework-agnostic theme manager for **light**, **dark**, and **system** modes — with **SSR-safe no-flash support**.
-
-Designed to be:
-- Minimal
-- Predictable
-- Copy-paste friendly
-- Framework independent
-
----
-
-## Features
-
-- Light / Dark / System theme support
-- Prevents flash of incorrect theme (FOUC)
-- SSR-safe (works before JS bundle loads)
-- No dependencies
-- Fully typed (TypeScript)
-- Works with plain JS, React, Vue, or any framework
-
----
-
-## Installation
-```bash
-npm install @pshah-lab/themeswitcher
-```
-
----
-
-## Core Usage (Framework-agnostic)
-```javascript
-import { createThemeManager } from "@pshah-lab/themeswitcher";
-
-const theme = createThemeManager();
-
-theme.set("dark");        // "light" | "dark" | "system"
-theme.toggle();           // toggle light ↔ dark
-theme.get();              // resolved theme: "light" | "dark"
-theme.getMode();          // selected mode
-```
-
-The theme is applied to the document using a data attribute:
-```html
-<html data-theme="dark">
-```
-
-Style your app using this attribute:
-```css
-[data-theme="dark"] {
-  background: #000;
-  color: #fff;
-}
-```
-
----
-
-## React Usage
-
-Create the hook once at module scope.
-```typescript
-// theme.ts
-import { createUseTheme } from "@pshah-lab/themeswitcher";
-
-export const useTheme = createUseTheme();
-```
-
-Use it anywhere in your app:
-```jsx
-function ThemeToggle() {
-  const { theme, toggleTheme } = useTheme();
-
-  return (
-    <button onClick={toggleTheme}>
-      Current theme: {theme}
-    </button>
-  );
-}
-```
-
-⚠️ **Do not call `createUseTheme()` inside components.**  
-It must be created once and reused.
-
----
-
-## Prevent Theme Flash (Recommended)
-
-When using light/dark themes, browsers may briefly render the page in the default theme before JavaScript loads. This causes a visible flash of incorrect theme.
-
-To prevent this, add the following script inline in your HTML `<head>`, before any CSS is loaded.
-
-### Why this is needed
-
-- Runs before first paint
-- Applies the correct theme synchronously
-- Works before your JavaScript bundle loads
-- Required for SSR
-- Strongly recommended for all setups
-
-### Add this to `<head>`
-```html
-<script>
-(function () {
-  try {
-    var key = "theme-mode";
-    var attribute = "data-theme";
-
-    var stored = localStorage.getItem(key);
-    var mode =
-      stored === "light" || stored === "dark" || stored === "system"
-        ? stored
-        : "system";
-
-    var isDark =
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    var theme =
-      mode === "system"
-        ? isDark
-          ? "dark"
-          : "light"
-        : mode;
-
-    document.documentElement.setAttribute(attribute, theme);
-  } catch (e) {
-    // fail silently
-  }
-})();
-</script>
-```
-
-Place it before your CSS:
-```html
-<head>
-  <!-- Prevent theme flash -->
-  <script>/* pasted theme script */</script>
-
-  <link rel="stylesheet" href="styles.css" />
-</head>
-```
-
-### Important Notes
-
-- Do not import this script from the package
-- Do not bundle it
-- Copy-paste is intentional and required for correct timing
-- The script logic matches the internal theme manager
-
----
-
-## Configuration
-```javascript
-createThemeManager({
-  defaultMode: "system",        // default
-  storageKey: "theme-mode",     // localStorage key
-  attribute: "data-theme",      // HTML attribute
-});
-```
-
----
-
-## API Reference
-
-### `set(mode)`
-
-Set the theme mode.
-```javascript
-theme.set("dark");
-```
-
-### `toggle()`
-
-Toggle between light and dark.
-```javascript
-theme.toggle();
-```
-
-### `get()`
-
-Get the resolved theme.
-```javascript
-theme.get(); // "light" | "dark"
-```
-
-### `getMode()`
-
-Get the selected mode.
-```javascript
-theme.getMode(); // "light" | "dark" | "system"
-```
-
----
-
-## Design Philosophy
-
-- Explicit over magical
-- Copy-paste over runtime hacks
-- No global side effects
-- No framework lock-in
-- Predictable behavior
-
----
-
-## License
-
-MIT

package/dist/index.d.mts

@@ -1,44 +0,0 @@
-type Theme = "light" | "dark";
-type ThemeMode = Theme | "system";
-interface ThemeManagerOptions {
-    /**
-     * Attribute applied to the root element
-     * Example: data-theme="dark"
-     */
-    attribute?: string;
-    /**
-     * Storage key for persistence
-     */
-    storageKey?: string;
-    /**
-     * Default mode when nothing is stored
-     */
-    defaultMode?: ThemeMode;
-}
-type ThemeSubscriber = (theme: Theme, mode: ThemeMode) => void;
-interface ThemeManager {
-    get(): Theme;
-    getMode(): ThemeMode;
-    set(mode: ThemeMode): void;
-    toggle(): void;
-    subscribe(fn: ThemeSubscriber): () => void;
-}
-
-declare function createThemeManager(options?: ThemeManagerOptions): ThemeManager;
-
-type UseThemeResult = {
-    theme: Theme;
-    mode: ThemeMode;
-    setTheme: (mode: ThemeMode) => void;
-    toggleTheme: () => void;
-};
-/**
- * Create a React hook bound to a ThemeManager instance.
- *
- * IMPORTANT:
- * - Call this once (e.g. in a module or provider)
- * - Do NOT call inside components repeatedly
- */
-declare function createUseTheme(options?: ThemeManagerOptions): () => UseThemeResult;
-
-export { type Theme, type ThemeManager, type ThemeManagerOptions, type ThemeMode, type ThemeSubscriber, createThemeManager, createUseTheme };

package/dist/index.js

@@ -1,234 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  createThemeManager: () => createThemeManager,
-  createUseTheme: () => createUseTheme
-});
-module.exports = __toCommonJS(index_exports);
-
-// src/storage.ts
-function createPersistence(key) {
-  if (typeof window === "undefined") {
-    return memoryStorage();
-  }
-  try {
-    const testKey = "__theme_test__";
-    window.localStorage.setItem(testKey, testKey);
-    window.localStorage.removeItem(testKey);
-    return localStorageAdapter(key);
-  } catch (e) {
-    return memoryStorage();
-  }
-}
-function localStorageAdapter(key) {
-  return {
-    get() {
-      const value = window.localStorage.getItem(key);
-      if (value === "light" || value === "dark" || value === "system") {
-        return value;
-      }
-      if (value !== null) {
-        window.localStorage.removeItem(key);
-      }
-      return null;
-    },
-    set(value) {
-      window.localStorage.setItem(key, value);
-    },
-    clear() {
-      window.localStorage.removeItem(key);
-    }
-  };
-}
-function memoryStorage() {
-  let value = null;
-  return {
-    get() {
-      return value;
-    },
-    set(v) {
-      value = v;
-    },
-    clear() {
-      value = null;
-    }
-  };
-}
-
-// src/system.ts
-var QUERY = "(prefers-color-scheme: dark)";
-function getSystemTheme() {
-  if (typeof window === "undefined") {
-    return "light";
-  }
-  if (!window.matchMedia) {
-    return "light";
-  }
-  return window.matchMedia(QUERY).matches ? "dark" : "light";
-}
-function subscribeSystemTheme(callback) {
-  if (typeof window === "undefined" || !window.matchMedia) {
-    return () => {
-    };
-  }
-  const media = window.matchMedia(QUERY);
-  const handler = (event) => {
-    callback(event.matches ? "dark" : "light");
-  };
-  if (media.addEventListener) {
-    media.addEventListener("change", handler);
-    return () => media.removeEventListener("change", handler);
-  }
-  media.addListener(handler);
-  return () => media.removeListener(handler);
-}
-
-// src/dom.ts
-function getRoot() {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  return document.documentElement;
-}
-function applyTheme(theme, attribute) {
-  const root = getRoot();
-  if (!root) return;
-  const current = root.getAttribute(attribute);
-  if (current === theme) return;
-  root.setAttribute(attribute, theme);
-}
-
-// src/manager.ts
-var DEFAULT_OPTIONS = {
-  attribute: "data-theme",
-  storageKey: "theme-mode",
-  defaultMode: "system"
-};
-function createThemeManager(options = {}) {
-  var _a;
-  const config = __spreadValues(__spreadValues({}, DEFAULT_OPTIONS), options);
-  const storage = createPersistence(config.storageKey);
-  const subscribers = /* @__PURE__ */ new Set();
-  let mode = (_a = storage.get()) != null ? _a : config.defaultMode;
-  let theme = resolveTheme(mode);
-  applyTheme(theme, config.attribute);
-  let unsubscribeSystem = null;
-  if (mode === "system") {
-    unsubscribeSystem = subscribeSystemTheme(handleSystemChange);
-  }
-  function resolveTheme(m) {
-    return m === "system" ? getSystemTheme() : m;
-  }
-  let notifying = false;
-  function notify() {
-    if (notifying) return;
-    notifying = true;
-    subscribers.forEach((fn) => fn(theme, mode));
-    notifying = false;
-  }
-  function setMode(nextMode) {
-    if (nextMode === mode) return;
-    mode = nextMode;
-    storage.set(mode);
-    if (unsubscribeSystem) {
-      unsubscribeSystem();
-      unsubscribeSystem = null;
-    }
-    theme = resolveTheme(mode);
-    applyTheme(theme, config.attribute);
-    if (mode === "system") {
-      unsubscribeSystem = subscribeSystemTheme(handleSystemChange);
-    }
-    notify();
-  }
-  function handleSystemChange(nextTheme) {
-    if (mode !== "system") return;
-    if (theme === nextTheme) return;
-    theme = nextTheme;
-    applyTheme(theme, config.attribute);
-    notify();
-  }
-  return {
-    get() {
-      return theme;
-    },
-    getMode() {
-      return mode;
-    },
-    set(nextMode) {
-      setMode(nextMode);
-    },
-    toggle() {
-      setMode(theme === "dark" ? "light" : "dark");
-    },
-    subscribe(fn) {
-      subscribers.add(fn);
-      fn(theme, mode);
-      return () => {
-        subscribers.delete(fn);
-      };
-    }
-  };
-}
-
-// src/react.ts
-var import_react = require("react");
-function createUseTheme(options) {
-  const manager = createThemeManager(options);
-  return function useTheme() {
-    const [theme, setThemeState] = (0, import_react.useState)(manager.get());
-    const [mode, setModeState] = (0, import_react.useState)(manager.getMode());
-    (0, import_react.useEffect)(() => {
-      const unsubscribe = manager.subscribe((t, m) => {
-        setThemeState(t);
-        setModeState(m);
-      });
-      return unsubscribe;
-    }, []);
-    return {
-      theme,
-      mode,
-      setTheme: (nextMode) => manager.set(nextMode),
-      toggleTheme: () => manager.toggle()
-    };
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createThemeManager,
-  createUseTheme
-});
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/storage.ts","../src/system.ts","../src/dom.ts","../src/manager.ts","../src/react.ts"],"sourcesContent":["export type {\n    Theme,\n    ThemeMode,\n    ThemeManager,\n    ThemeManagerOptions,\n    ThemeSubscriber,\n  } from \"./types\";\n  \n  export { createThemeManager } from \"./manager\";\n  export { createUseTheme } from \"./react\";","// src/storage.ts\n\nimport type { ThemeMode } from \"./types\";\n\nexport interface StorageAdapter {\n  get(): ThemeMode | null;\n  set(value: ThemeMode): void;\n  clear(): void;\n}\n\nexport function createPersistence(key: string): StorageAdapter {\n  // SSR / non-browser guard\n  if (typeof window === \"undefined\") {\n    return memoryStorage();\n  }\n\n  try {\n    const testKey = \"__theme_test__\";\n    window.localStorage.setItem(testKey, testKey);\n    window.localStorage.removeItem(testKey);\n\n    return localStorageAdapter(key);\n  } catch {\n    return memoryStorage();\n  }\n}\n\nfunction localStorageAdapter(key: string): StorageAdapter {\n  return {\n    get() {\n      const value = window.localStorage.getItem(key);\n\n      if (value === \"light\" || value === \"dark\" || value === \"system\") {\n        return value;\n      }\n\n      // clear corrupted or unknown values\n      if (value !== null) {\n        window.localStorage.removeItem(key);\n      }\n\n      return null;\n    },\n\n    set(value) {\n      window.localStorage.setItem(key, value);\n    },\n\n    clear() {\n      window.localStorage.removeItem(key);\n    },\n  };\n}\n\nfunction memoryStorage(): StorageAdapter {\n  let value: ThemeMode | null = null;\n\n  return {\n    get() {\n      return value;\n    },\n    set(v) {\n      value = v;\n    },\n    clear() {\n      value = null;\n    },\n  };\n}\n","// src/system.ts\n\nimport type { Theme } from \"./types\";\n\nconst QUERY = \"(prefers-color-scheme: dark)\";\n\nexport function getSystemTheme(): Theme {\n  if (typeof window === \"undefined\") {\n    return \"light\"; // safe default for SSR\n  }\n\n  if (!window.matchMedia) {\n    return \"light\";\n  }\n\n  return window.matchMedia(QUERY).matches ? \"dark\" : \"light\";\n}\n\nexport function subscribeSystemTheme(\n  callback: (theme: Theme) => void\n): () => void {\n  if (typeof window === \"undefined\" || !window.matchMedia) {\n    return () => {};\n  }\n\n  const media = window.matchMedia(QUERY);\n\n  const handler = (event: MediaQueryListEvent) => {\n    callback(event.matches ? \"dark\" : \"light\");\n  };\n\n  // Modern browsers\n  if (media.addEventListener) {\n    media.addEventListener(\"change\", handler);\n    return () => media.removeEventListener(\"change\", handler);\n  }\n\n  // Legacy Safari fallback\n  media.addListener(handler);\n  return () => media.removeListener(handler);\n}","// src/dom.ts\n\nimport type { Theme } from \"./types\";\n\nfunction getRoot(): HTMLElement | null {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n  return document.documentElement;\n}\n\nexport function applyTheme(theme: Theme, attribute: string): void {\n  const root = getRoot();\n  if (!root) return;\n\n  const current = root.getAttribute(attribute);\n  if (current === theme) return; // avoid unnecessary DOM writes\n\n  root.setAttribute(attribute, theme);\n}\n\nexport function getAppliedTheme(attribute: string): Theme | null {\n  const root = getRoot();\n  if (!root) return null;\n\n  const value = root.getAttribute(attribute);\n  if (value === \"light\" || value === \"dark\") {\n    return value;\n  }\n\n  return null;\n}","// src/manager.ts\n\nimport type {\n  Theme,\n  ThemeMode,\n  ThemeManager,\n  ThemeManagerOptions,\n  ThemeSubscriber,\n} from \"./types\";\n\nimport { createPersistence } from \"./storage\";\nimport { getSystemTheme, subscribeSystemTheme } from \"./system\";\nimport { applyTheme } from \"./dom\";\n\nconst DEFAULT_OPTIONS: Required<ThemeManagerOptions> = {\n  attribute: \"data-theme\",\n  storageKey: \"theme-mode\",\n  defaultMode: \"system\",\n};\n\nexport function createThemeManager(\n  options: ThemeManagerOptions = {}\n): ThemeManager {\n  const config = { ...DEFAULT_OPTIONS, ...options };\n\n  const storage = createPersistence(config.storageKey);\n  const subscribers = new Set<ThemeSubscriber>();\n\n  let mode: ThemeMode = storage.get() ?? config.defaultMode;\n\n  let theme: Theme = resolveTheme(mode);\n\n  // Apply initial theme immediately\n  applyTheme(theme, config.attribute);\n\n  // Listen to OS theme changes only when needed\n  let unsubscribeSystem: (() => void) | null = null;\n  if (mode === \"system\") {\n    unsubscribeSystem = subscribeSystemTheme(handleSystemChange);\n  }\n\n  function resolveTheme(m: ThemeMode): Theme {\n    return m === \"system\" ? getSystemTheme() : m;\n  }\n  let notifying = false;\n\n  function notify() {\n    if (notifying) return;\n\n    notifying = true;\n    subscribers.forEach((fn) => fn(theme, mode));\n    notifying = false;\n  }\n\n  function setMode(nextMode: ThemeMode) {\n    if (nextMode === mode) return;\n\n    mode = nextMode;\n    storage.set(mode);\n\n    if (unsubscribeSystem) {\n      unsubscribeSystem();\n      unsubscribeSystem = null;\n    }\n\n    theme = resolveTheme(mode);\n    applyTheme(theme, config.attribute);\n\n    if (mode === \"system\") {\n      unsubscribeSystem = subscribeSystemTheme(handleSystemChange);\n    }\n\n    notify();\n  }\n\n  function handleSystemChange(nextTheme: Theme) {\n    if (mode !== \"system\") return;\n    if (theme === nextTheme) return;\n\n    theme = nextTheme;\n    applyTheme(theme, config.attribute);\n    notify();\n  }\n\n  return {\n    get() {\n      return theme;\n    },\n\n    getMode() {\n      return mode;\n    },\n\n    set(nextMode) {\n      setMode(nextMode);\n    },\n    toggle() {\n      setMode(theme === \"dark\" ? \"light\" : \"dark\");\n    },\n\n    subscribe(fn) {\n      subscribers.add(fn);\n      fn(theme, mode); // immediate sync\n      return () => {\n        subscribers.delete(fn);\n      };\n    },\n  };\n}\n","import { useEffect, useState } from \"react\";\nimport type { Theme, ThemeMode, ThemeManagerOptions } from \"./types\";\nimport { createThemeManager } from \"./manager\";\n\ntype UseThemeResult = {\n  theme: Theme;\n  mode: ThemeMode;\n  setTheme: (mode: ThemeMode) => void;\n  toggleTheme: () => void;\n};\n\n/**\n * Create a React hook bound to a ThemeManager instance.\n *\n * IMPORTANT:\n * - Call this once (e.g. in a module or provider)\n * - Do NOT call inside components repeatedly\n */\nexport function createUseTheme(options?: ThemeManagerOptions) {\n  const manager = createThemeManager(options);\n\n  return function useTheme(): UseThemeResult {\n    const [theme, setThemeState] = useState<Theme>(manager.get());\n    const [mode, setModeState] = useState<ThemeMode>(manager.getMode());\n\n    useEffect(() => {\n      const unsubscribe = manager.subscribe((t, m) => {\n        setThemeState(t);\n        setModeState(m);\n      });\n\n      return unsubscribe;\n    }, []);\n\n    return {\n      theme,\n      mode,\n      setTheme: (nextMode: ThemeMode) => manager.set(nextMode),\n      toggleTheme: () => manager.toggle(),\n    };\n  };\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACUO,SAAS,kBAAkB,KAA6B;AAE7D,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO,cAAc;AAAA,EACvB;AAEA,MAAI;AACF,UAAM,UAAU;AAChB,WAAO,aAAa,QAAQ,SAAS,OAAO;AAC5C,WAAO,aAAa,WAAW,OAAO;AAEtC,WAAO,oBAAoB,GAAG;AAAA,EAChC,SAAQ;AACN,WAAO,cAAc;AAAA,EACvB;AACF;AAEA,SAAS,oBAAoB,KAA6B;AACxD,SAAO;AAAA,IACL,MAAM;AACJ,YAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAE7C,UAAI,UAAU,WAAW,UAAU,UAAU,UAAU,UAAU;AAC/D,eAAO;AAAA,MACT;AAGA,UAAI,UAAU,MAAM;AAClB,eAAO,aAAa,WAAW,GAAG;AAAA,MACpC;AAEA,aAAO;AAAA,IACT;AAAA,IAEA,IAAI,OAAO;AACT,aAAO,aAAa,QAAQ,KAAK,KAAK;AAAA,IACxC;AAAA,IAEA,QAAQ;AACN,aAAO,aAAa,WAAW,GAAG;AAAA,IACpC;AAAA,EACF;AACF;AAEA,SAAS,gBAAgC;AACvC,MAAI,QAA0B;AAE9B,SAAO;AAAA,IACL,MAAM;AACJ,aAAO;AAAA,IACT;AAAA,IACA,IAAI,GAAG;AACL,cAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AACN,cAAQ;AAAA,IACV;AAAA,EACF;AACF;;;AChEA,IAAM,QAAQ;AAEP,SAAS,iBAAwB;AACtC,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,OAAO,YAAY;AACtB,WAAO;AAAA,EACT;AAEA,SAAO,OAAO,WAAW,KAAK,EAAE,UAAU,SAAS;AACrD;AAEO,SAAS,qBACd,UACY;AACZ,MAAI,OAAO,WAAW,eAAe,CAAC,OAAO,YAAY;AACvD,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AAEA,QAAM,QAAQ,OAAO,WAAW,KAAK;AAErC,QAAM,UAAU,CAAC,UAA+B;AAC9C,aAAS,MAAM,UAAU,SAAS,OAAO;AAAA,EAC3C;AAGA,MAAI,MAAM,kBAAkB;AAC1B,UAAM,iBAAiB,UAAU,OAAO;AACxC,WAAO,MAAM,MAAM,oBAAoB,UAAU,OAAO;AAAA,EAC1D;AAGA,QAAM,YAAY,OAAO;AACzB,SAAO,MAAM,MAAM,eAAe,OAAO;AAC3C;;;ACpCA,SAAS,UAA8B;AACrC,MAAI,OAAO,aAAa,aAAa;AACnC,WAAO;AAAA,EACT;AACA,SAAO,SAAS;AAClB;AAEO,SAAS,WAAW,OAAc,WAAyB;AAChE,QAAM,OAAO,QAAQ;AACrB,MAAI,CAAC,KAAM;AAEX,QAAM,UAAU,KAAK,aAAa,SAAS;AAC3C,MAAI,YAAY,MAAO;AAEvB,OAAK,aAAa,WAAW,KAAK;AACpC;;;ACLA,IAAM,kBAAiD;AAAA,EACrD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,aAAa;AACf;AAEO,SAAS,mBACd,UAA+B,CAAC,GAClB;AAtBhB;AAuBE,QAAM,SAAS,kCAAK,kBAAoB;AAExC,QAAM,UAAU,kBAAkB,OAAO,UAAU;AACnD,QAAM,cAAc,oBAAI,IAAqB;AAE7C,MAAI,QAAkB,aAAQ,IAAI,MAAZ,YAAiB,OAAO;AAE9C,MAAI,QAAe,aAAa,IAAI;AAGpC,aAAW,OAAO,OAAO,SAAS;AAGlC,MAAI,oBAAyC;AAC7C,MAAI,SAAS,UAAU;AACrB,wBAAoB,qBAAqB,kBAAkB;AAAA,EAC7D;AAEA,WAAS,aAAa,GAAqB;AACzC,WAAO,MAAM,WAAW,eAAe,IAAI;AAAA,EAC7C;AACA,MAAI,YAAY;AAEhB,WAAS,SAAS;AAChB,QAAI,UAAW;AAEf,gBAAY;AACZ,gBAAY,QAAQ,CAAC,OAAO,GAAG,OAAO,IAAI,CAAC;AAC3C,gBAAY;AAAA,EACd;AAEA,WAAS,QAAQ,UAAqB;AACpC,QAAI,aAAa,KAAM;AAEvB,WAAO;AACP,YAAQ,IAAI,IAAI;AAEhB,QAAI,mBAAmB;AACrB,wBAAkB;AAClB,0BAAoB;AAAA,IACtB;AAEA,YAAQ,aAAa,IAAI;AACzB,eAAW,OAAO,OAAO,SAAS;AAElC,QAAI,SAAS,UAAU;AACrB,0BAAoB,qBAAqB,kBAAkB;AAAA,IAC7D;AAEA,WAAO;AAAA,EACT;AAEA,WAAS,mBAAmB,WAAkB;AAC5C,QAAI,SAAS,SAAU;AACvB,QAAI,UAAU,UAAW;AAEzB,YAAQ;AACR,eAAW,OAAO,OAAO,SAAS;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,MAAM;AACJ,aAAO;AAAA,IACT;AAAA,IAEA,UAAU;AACR,aAAO;AAAA,IACT;AAAA,IAEA,IAAI,UAAU;AACZ,cAAQ,QAAQ;AAAA,IAClB;AAAA,IACA,SAAS;AACP,cAAQ,UAAU,SAAS,UAAU,MAAM;AAAA,IAC7C;AAAA,IAEA,UAAU,IAAI;AACZ,kBAAY,IAAI,EAAE;AAClB,SAAG,OAAO,IAAI;AACd,aAAO,MAAM;AACX,oBAAY,OAAO,EAAE;AAAA,MACvB;AAAA,IACF;AAAA,EACF;AACF;;;AC5GA,mBAAoC;AAkB7B,SAAS,eAAe,SAA+B;AAC5D,QAAM,UAAU,mBAAmB,OAAO;AAE1C,SAAO,SAAS,WAA2B;AACzC,UAAM,CAAC,OAAO,aAAa,QAAI,uBAAgB,QAAQ,IAAI,CAAC;AAC5D,UAAM,CAAC,MAAM,YAAY,QAAI,uBAAoB,QAAQ,QAAQ,CAAC;AAElE,gCAAU,MAAM;AACd,YAAM,cAAc,QAAQ,UAAU,CAAC,GAAG,MAAM;AAC9C,sBAAc,CAAC;AACf,qBAAa,CAAC;AAAA,MAChB,CAAC;AAED,aAAO;AAAA,IACT,GAAG,CAAC,CAAC;AAEL,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU,CAAC,aAAwB,QAAQ,IAAI,QAAQ;AAAA,MACvD,aAAa,MAAM,QAAQ,OAAO;AAAA,IACpC;AAAA,EACF;AACF;","names":[]}

package/scripts/no-flash-theme.js

@@ -1,22 +0,0 @@
-(function () {
-  try {
-    var key = "theme-mode";
-    var attribute = "data-theme";
-
-    var stored = localStorage.getItem(key);
-    var mode =
-      stored === "light" || stored === "dark" || stored === "system"
-        ? stored
-        : "system";
-
-    var isDark =
-      window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-    var theme = mode === "system" ? (isDark ? "dark" : "light") : mode;
-
-    document.documentElement.setAttribute(attribute, theme);
-  } catch (e) {
-    // fail silently
-  }
-})();