@helpwave/hightide 0.1.26 → 0.1.28

package/dist/theming/index.js

@@ -0,0 +1,174 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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/theming/index.ts
+var theming_exports = {};
+__export(theming_exports, {
+  ThemeContext: () => ThemeContext,
+  ThemeProvider: () => ThemeProvider,
+  ThemeUtil: () => ThemeUtil,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(theming_exports);
+
+// src/theming/useTheme.tsx
+var import_react2 = require("react");
+var import_react3 = require("react");
+var import_react4 = require("react");
+
+// src/hooks/useLocalStorage.ts
+var import_react = require("react");
+
+// src/utils/storage.ts
+var StorageService = class {
+  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
+  constructor(storage) {
+    this.storage = storage;
+  }
+  get(key) {
+    const value = this.storage.getItem(key);
+    if (value === null) {
+      return null;
+    }
+    return JSON.parse(value);
+  }
+  set(key, value) {
+    this.storage.setItem(key, JSON.stringify(value));
+  }
+  delete(key) {
+    this.storage.removeItem(key);
+  }
+  deleteAll() {
+    this.storage.clear();
+  }
+};
+var LocalStorageService = class extends StorageService {
+  constructor() {
+    super(window.localStorage);
+  }
+};
+
+// src/utils/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
+
+// src/hooks/useLocalStorage.ts
+var useLocalStorage = (key, initValue) => {
+  const get = (0, import_react.useCallback)(() => {
+    if (typeof window === "undefined") {
+      return initValue;
+    }
+    const storageService = new LocalStorageService();
+    const value = storageService.get(key);
+    return value || initValue;
+  }, [initValue, key]);
+  const [storedValue, setStoredValue] = (0, import_react.useState)(get);
+  const setValue = (0, import_react.useCallback)((action) => {
+    const newValue = resolveSetState(action, storedValue);
+    const storageService = new LocalStorageService();
+    storageService.set(key, newValue);
+    setStoredValue(newValue);
+  }, [storedValue, setStoredValue, key]);
+  return [storedValue, setValue];
+};
+
+// src/theming/useTheme.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var themes = ["light", "dark", "system"];
+var defaultThemeTypeTranslation = {
+  en: {
+    dark: "Dark",
+    light: "Light",
+    system: "System",
+    theme: {
+      one: "Theme",
+      other: "Themes"
+    }
+  },
+  de: {
+    dark: "Dunkel",
+    light: "Hell",
+    system: "System",
+    theme: {
+      one: "Farbschema",
+      other: "Farbschemas"
+    }
+  }
+};
+var ThemeUtil = {
+  themes,
+  translation: defaultThemeTypeTranslation
+};
+var ThemeContext = (0, import_react4.createContext)(null);
+var ThemeProvider = ({ children, initialTheme }) => {
+  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme ?? "system");
+  const [themePreference, setThemePreference] = (0, import_react4.useState)("system");
+  const resolvedTheme = (0, import_react3.useMemo)(() => {
+    if (storedTheme && storedTheme !== "system") {
+      return storedTheme;
+    }
+    return themePreference === "dark" ? "dark" : "light";
+  }, [storedTheme, themePreference]);
+  (0, import_react4.useEffect)(() => {
+    if (!!initialTheme && storedTheme !== initialTheme) {
+      console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
+      setStoredTheme(initialTheme);
+    }
+  }, [initialTheme]);
+  (0, import_react4.useEffect)(() => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme);
+  }, [resolvedTheme]);
+  const getPreference = (0, import_react2.useCallback)(() => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    getPreference();
+  }, [getPreference]);
+  (0, import_react4.useEffect)(() => {
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
+    darkQuery.addEventListener("change", getPreference);
+    lightQuery.addEventListener("change", getPreference);
+    noPrefQuery.addEventListener("change", getPreference);
+    return () => {
+      darkQuery.removeEventListener("change", getPreference);
+      lightQuery.removeEventListener("change", getPreference);
+      noPrefQuery.removeEventListener("change", getPreference);
+    };
+  }, [getPreference]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }, children });
+};
+var useTheme = () => {
+  const context = (0, import_react4.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeContext,
+  ThemeProvider,
+  ThemeUtil,
+  useTheme
+});
+//# sourceMappingURL=index.js.map

package/dist/theming/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theming/index.ts","../../src/theming/useTheme.tsx","../../src/hooks/useLocalStorage.ts","../../src/utils/storage.ts","../../src/utils/resolveSetState.ts"],"sourcesContent":["export * from './useTheme'\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useCallback } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\nexport type ResolvedTheme = Exclude<ThemeType, 'system'>\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  resolvedTheme: ResolvedTheme,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType | null>(null)\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [themePreference, setThemePreference] = useState<ThemeType>('system')\n\n  const resolvedTheme = useMemo(() => {\n    if(storedTheme && storedTheme !== 'system') {\n      return storedTheme\n    }\n    return themePreference === 'dark' ? 'dark' : 'light'\n  }, [storedTheme, themePreference])\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', resolvedTheme)\n  }, [resolvedTheme])\n\n  const getPreference = useCallback(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches\n    setThemePreference(prefersDark ? 'dark' : (prefersLight ? 'light' : 'system'))\n  }, [])\n\n  useEffect(() => {\n    getPreference()\n  }, [getPreference])\n\n  useEffect(() => {\n    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const lightQuery = window.matchMedia('(prefers-color-scheme: light)')\n    const noPrefQuery = window.matchMedia('(prefers-color-scheme: no-preference)')\n    darkQuery.addEventListener('change', getPreference)\n    lightQuery.addEventListener('change', getPreference)\n    noPrefQuery.addEventListener('change', getPreference)\n    return () => {\n      darkQuery.removeEventListener('change', getPreference)\n      lightQuery.removeEventListener('change', getPreference)\n      noPrefQuery.removeEventListener('change', getPreference)\n    }\n  }, [getPreference])\n\n  return (\n    <ThemeContext.Provider value={{ theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext)\n  if(!context) {\n    throw new Error('useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.')\n  }\n  return context\n}\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}

package/dist/theming/index.mjs

@@ -0,0 +1,145 @@
+// src/theming/useTheme.tsx
+import { useCallback as useCallback2 } from "react";
+import { useMemo } from "react";
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState } from "react";
+
+// src/utils/storage.ts
+var StorageService = class {
+  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
+  constructor(storage) {
+    this.storage = storage;
+  }
+  get(key) {
+    const value = this.storage.getItem(key);
+    if (value === null) {
+      return null;
+    }
+    return JSON.parse(value);
+  }
+  set(key, value) {
+    this.storage.setItem(key, JSON.stringify(value));
+  }
+  delete(key) {
+    this.storage.removeItem(key);
+  }
+  deleteAll() {
+    this.storage.clear();
+  }
+};
+var LocalStorageService = class extends StorageService {
+  constructor() {
+    super(window.localStorage);
+  }
+};
+
+// src/utils/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
+
+// src/hooks/useLocalStorage.ts
+var useLocalStorage = (key, initValue) => {
+  const get = useCallback(() => {
+    if (typeof window === "undefined") {
+      return initValue;
+    }
+    const storageService = new LocalStorageService();
+    const value = storageService.get(key);
+    return value || initValue;
+  }, [initValue, key]);
+  const [storedValue, setStoredValue] = useState(get);
+  const setValue = useCallback((action) => {
+    const newValue = resolveSetState(action, storedValue);
+    const storageService = new LocalStorageService();
+    storageService.set(key, newValue);
+    setStoredValue(newValue);
+  }, [storedValue, setStoredValue, key]);
+  return [storedValue, setValue];
+};
+
+// src/theming/useTheme.tsx
+import { jsx } from "react/jsx-runtime";
+var themes = ["light", "dark", "system"];
+var defaultThemeTypeTranslation = {
+  en: {
+    dark: "Dark",
+    light: "Light",
+    system: "System",
+    theme: {
+      one: "Theme",
+      other: "Themes"
+    }
+  },
+  de: {
+    dark: "Dunkel",
+    light: "Hell",
+    system: "System",
+    theme: {
+      one: "Farbschema",
+      other: "Farbschemas"
+    }
+  }
+};
+var ThemeUtil = {
+  themes,
+  translation: defaultThemeTypeTranslation
+};
+var ThemeContext = createContext(null);
+var ThemeProvider = ({ children, initialTheme }) => {
+  const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme ?? "system");
+  const [themePreference, setThemePreference] = useState2("system");
+  const resolvedTheme = useMemo(() => {
+    if (storedTheme && storedTheme !== "system") {
+      return storedTheme;
+    }
+    return themePreference === "dark" ? "dark" : "light";
+  }, [storedTheme, themePreference]);
+  useEffect(() => {
+    if (!!initialTheme && storedTheme !== initialTheme) {
+      console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
+      setStoredTheme(initialTheme);
+    }
+  }, [initialTheme]);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme);
+  }, [resolvedTheme]);
+  const getPreference = useCallback2(() => {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
+  }, []);
+  useEffect(() => {
+    getPreference();
+  }, [getPreference]);
+  useEffect(() => {
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
+    darkQuery.addEventListener("change", getPreference);
+    lightQuery.addEventListener("change", getPreference);
+    noPrefQuery.addEventListener("change", getPreference);
+    return () => {
+      darkQuery.removeEventListener("change", getPreference);
+      lightQuery.removeEventListener("change", getPreference);
+      noPrefQuery.removeEventListener("change", getPreference);
+    };
+  }, [getPreference]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }, children });
+};
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
+};
+export {
+  ThemeContext,
+  ThemeProvider,
+  ThemeUtil,
+  useTheme
+};
+//# sourceMappingURL=index.mjs.map

package/dist/theming/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/hooks/useLocalStorage.ts","../../src/utils/storage.ts","../../src/utils/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useCallback } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\nexport type ResolvedTheme = Exclude<ThemeType, 'system'>\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  resolvedTheme: ResolvedTheme,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType | null>(null)\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [themePreference, setThemePreference] = useState<ThemeType>('system')\n\n  const resolvedTheme = useMemo(() => {\n    if(storedTheme && storedTheme !== 'system') {\n      return storedTheme\n    }\n    return themePreference === 'dark' ? 'dark' : 'light'\n  }, [storedTheme, themePreference])\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', resolvedTheme)\n  }, [resolvedTheme])\n\n  const getPreference = useCallback(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches\n    setThemePreference(prefersDark ? 'dark' : (prefersLight ? 'light' : 'system'))\n  }, [])\n\n  useEffect(() => {\n    getPreference()\n  }, [getPreference])\n\n  useEffect(() => {\n    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const lightQuery = window.matchMedia('(prefers-color-scheme: light)')\n    const noPrefQuery = window.matchMedia('(prefers-color-scheme: no-preference)')\n    darkQuery.addEventListener('change', getPreference)\n    lightQuery.addEventListener('change', getPreference)\n    noPrefQuery.addEventListener('change', getPreference)\n    return () => {\n      darkQuery.removeEventListener('change', getPreference)\n      lightQuery.removeEventListener('change', getPreference)\n      noPrefQuery.removeEventListener('change', getPreference)\n    }\n  }, [getPreference])\n\n  return (\n    <ThemeContext.Provider value={{ theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext)\n  if(!context) {\n    throw new Error('useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.')\n  }\n  return context\n}\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["useCallback","useState","useState","useCallback"]}

package/dist/theming/useTheme.d.mts

@@ -6,6 +6,7 @@ import '../localization/util.mjs';
 
 declare const themes: readonly ["light", "dark", "system"];
 type ThemeType = typeof themes[number];
+type ResolvedTheme = Exclude<ThemeType, 'system'>;
 type ThemeTypeTranslation = Record<ThemeType, string> & {
     theme: TranslationPlural;
 };
@@ -15,6 +16,7 @@ declare const ThemeUtil: {
 };
 type ThemeContextType = {
     theme: ThemeType;
+    resolvedTheme: ResolvedTheme;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
 declare const ThemeContext: React.Context<ThemeContextType>;
@@ -24,4 +26,4 @@ type ThemeProviderProps = {
 declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const useTheme: () => ThemeContextType;
 
-export { ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };
+export { type ResolvedTheme, ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };

package/dist/theming/useTheme.d.ts

@@ -6,6 +6,7 @@ import '../localization/util.js';
 
 declare const themes: readonly ["light", "dark", "system"];
 type ThemeType = typeof themes[number];
+type ResolvedTheme = Exclude<ThemeType, 'system'>;
 type ThemeTypeTranslation = Record<ThemeType, string> & {
     theme: TranslationPlural;
 };
@@ -15,6 +16,7 @@ declare const ThemeUtil: {
 };
 type ThemeContextType = {
     theme: ThemeType;
+    resolvedTheme: ResolvedTheme;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
 declare const ThemeContext: React.Context<ThemeContextType>;
@@ -24,4 +26,4 @@ type ThemeProviderProps = {
 declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const useTheme: () => ThemeContextType;
 
-export { ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };
+export { type ResolvedTheme, ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };

package/dist/theming/useTheme.js

@@ -27,9 +27,7 @@ __export(useTheme_exports, {
 module.exports = __toCommonJS(useTheme_exports);
 var import_react2 = require("react");
 var import_react3 = require("react");
-
-// src/utils/noop.ts
-var noop = () => void 0;
+var import_react4 = require("react");
 
 // src/hooks/useLocalStorage.ts
 var import_react = require("react");
@@ -115,30 +113,55 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = (0, import_react3.createContext)({
-  theme: "light",
-  setTheme: noop
-});
+var ThemeContext = (0, import_react4.createContext)(null);
 var ThemeProvider = ({ children, initialTheme }) => {
   const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme ?? "system");
-  const [userTheme, setUserTheme] = (0, import_react3.useState)();
-  (0, import_react3.useEffect)(() => {
+  const [themePreference, setThemePreference] = (0, import_react4.useState)("system");
+  const resolvedTheme = (0, import_react3.useMemo)(() => {
+    if (storedTheme && storedTheme !== "system") {
+      return storedTheme;
+    }
+    return themePreference === "dark" ? "dark" : "light";
+  }, [storedTheme, themePreference]);
+  (0, import_react4.useEffect)(() => {
     if (!!initialTheme && storedTheme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setStoredTheme(initialTheme);
     }
   }, [initialTheme]);
-  const usedTheme = (0, import_react2.useMemo)(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
-  (0, import_react3.useEffect)(() => {
-    document.documentElement.setAttribute("data-theme", usedTheme);
-  }, [usedTheme]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme);
+  }, [resolvedTheme]);
+  const getPreference = (0, import_react2.useCallback)(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    setUserTheme(prefersDark ? "dark" : "light");
+    const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
+  (0, import_react4.useEffect)(() => {
+    getPreference();
+  }, [getPreference]);
+  (0, import_react4.useEffect)(() => {
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
+    darkQuery.addEventListener("change", getPreference);
+    lightQuery.addEventListener("change", getPreference);
+    noPrefQuery.addEventListener("change", getPreference);
+    return () => {
+      darkQuery.removeEventListener("change", getPreference);
+      lightQuery.removeEventListener("change", getPreference);
+      noPrefQuery.removeEventListener("change", getPreference);
+    };
+  }, [getPreference]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }, children });
+};
+var useTheme = () => {
+  const context = (0, import_react4.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
 };
-var useTheme = () => (0, import_react3.useContext)(ThemeContext);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeContext,

package/dist/theming/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/utils/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/utils/storage.ts","../../src/utils/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '@/src/utils/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n  theme: 'light',\n  setTheme: noop\n})\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [userTheme, setUserTheme] = useState<ThemeType>()\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const usedTheme = useMemo(() => storedTheme !== 'system' ? storedTheme : userTheme, [storedTheme, userTheme])\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', usedTheme)\n  }, [usedTheme])\n\n  useEffect(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    setUserTheme(prefersDark ? 'dark' : 'light')\n  }, [])\n\n  return (\n    <ThemeContext.Provider value={{ theme: storedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/hooks/useLocalStorage.ts","../../src/utils/storage.ts","../../src/utils/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useCallback } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\nexport type ResolvedTheme = Exclude<ThemeType, 'system'>\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  resolvedTheme: ResolvedTheme,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType | null>(null)\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [themePreference, setThemePreference] = useState<ThemeType>('system')\n\n  const resolvedTheme = useMemo(() => {\n    if(storedTheme && storedTheme !== 'system') {\n      return storedTheme\n    }\n    return themePreference === 'dark' ? 'dark' : 'light'\n  }, [storedTheme, themePreference])\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', resolvedTheme)\n  }, [resolvedTheme])\n\n  const getPreference = useCallback(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    const prefersLight = window.matchMedia('(prefers-color-scheme: light)').matches\n    setThemePreference(prefersDark ? 'dark' : (prefersLight ? 'light' : 'system'))\n  }, [])\n\n  useEffect(() => {\n    getPreference()\n  }, [getPreference])\n\n  useEffect(() => {\n    const darkQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const lightQuery = window.matchMedia('(prefers-color-scheme: light)')\n    const noPrefQuery = window.matchMedia('(prefers-color-scheme: no-preference)')\n    darkQuery.addEventListener('change', getPreference)\n    lightQuery.addEventListener('change', getPreference)\n    noPrefQuery.addEventListener('change', getPreference)\n    return () => {\n      darkQuery.removeEventListener('change', getPreference)\n      lightQuery.removeEventListener('change', getPreference)\n      noPrefQuery.removeEventListener('change', getPreference)\n    }\n  }, [getPreference])\n\n  return (\n    <ThemeContext.Provider value={{ theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\nexport const useTheme = () => {\n  const context = useContext(ThemeContext)\n  if(!context) {\n    throw new Error('useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.')\n  }\n  return context\n}\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}

package/dist/theming/useTheme.mjs

@@ -1,10 +1,8 @@
 // src/theming/useTheme.tsx
+import { useCallback as useCallback2 } from "react";
 import { useMemo } from "react";
 import { createContext, useContext, useEffect, useState as useState2 } from "react";
 
-// src/utils/noop.ts
-var noop = () => void 0;
-
 // src/hooks/useLocalStorage.ts
 import { useCallback, useState } from "react";
 
@@ -89,30 +87,55 @@ var ThemeUtil = {
   themes,
   translation: defaultThemeTypeTranslation
 };
-var ThemeContext = createContext({
-  theme: "light",
-  setTheme: noop
-});
+var ThemeContext = createContext(null);
 var ThemeProvider = ({ children, initialTheme }) => {
   const [storedTheme, setStoredTheme] = useLocalStorage("theme", initialTheme ?? "system");
-  const [userTheme, setUserTheme] = useState2();
+  const [themePreference, setThemePreference] = useState2("system");
+  const resolvedTheme = useMemo(() => {
+    if (storedTheme && storedTheme !== "system") {
+      return storedTheme;
+    }
+    return themePreference === "dark" ? "dark" : "light";
+  }, [storedTheme, themePreference]);
   useEffect(() => {
     if (!!initialTheme && storedTheme !== initialTheme) {
       console.warn("ThemeProvider initial state changed: Prefer using useTheme's setTheme instead");
       setStoredTheme(initialTheme);
     }
   }, [initialTheme]);
-  const usedTheme = useMemo(() => storedTheme !== "system" ? storedTheme : userTheme, [storedTheme, userTheme]);
-  useEffect(() => {
-    document.documentElement.setAttribute("data-theme", usedTheme);
-  }, [usedTheme]);
   useEffect(() => {
+    document.documentElement.setAttribute("data-theme", resolvedTheme);
+  }, [resolvedTheme]);
+  const getPreference = useCallback2(() => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    setUserTheme(prefersDark ? "dark" : "light");
+    const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setThemePreference(prefersDark ? "dark" : prefersLight ? "light" : "system");
   }, []);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
+  useEffect(() => {
+    getPreference();
+  }, [getPreference]);
+  useEffect(() => {
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const lightQuery = window.matchMedia("(prefers-color-scheme: light)");
+    const noPrefQuery = window.matchMedia("(prefers-color-scheme: no-preference)");
+    darkQuery.addEventListener("change", getPreference);
+    lightQuery.addEventListener("change", getPreference);
+    noPrefQuery.addEventListener("change", getPreference);
+    return () => {
+      darkQuery.removeEventListener("change", getPreference);
+      lightQuery.removeEventListener("change", getPreference);
+      noPrefQuery.removeEventListener("change", getPreference);
+    };
+  }, [getPreference]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: storedTheme, resolvedTheme, setTheme: setStoredTheme }, children });
+};
+var useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeContext. Try adding a ThemeProvider around your app.");
+  }
+  return context;
 };
-var useTheme = () => useContext(ThemeContext);
 export {
   ThemeContext,
   ThemeProvider,