@manafishrov/ui 1.3.8 → 1.3.9

package/dist/Theme.d.ts

@@ -1,5 +1,10 @@
 import { Component, JSXElement } from 'solid-js';
 export type Theme = 'light' | 'dark' | 'system';
+export declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+    readonly system: "system";
+};
 export type ThemeProviderProps = {
     theme?: Theme;
     defaultTheme?: Theme;

package/dist/Theme.js

@@ -1,52 +1,57 @@
-import { createComponent as f } from "solid-js/web";
-import { createSignal as c, onMount as y, createEffect as h, on as i, useContext as E, createContext as b } from "solid-js";
-const l = b(), S = "theme", m = "(prefers-color-scheme: dark)", g = () => typeof globalThis.matchMedia != "function" ? "light" : globalThis.matchMedia(m).matches ? "dark" : "light", v = (e, t) => {
+import { createComponent as y } from "solid-js/web";
+import { createSignal as h, onMount as E, createEffect as i, on as m, useContext as b, createContext as S } from "solid-js";
+const n = {
+  light: "light",
+  dark: "dark",
+  system: "system"
+}, l = S(), k = "theme", g = "(prefers-color-scheme: dark)", d = () => typeof globalThis.matchMedia != "function" ? "light" : globalThis.matchMedia(g).matches ? "dark" : "light", v = (e, t) => {
   if (!("localStorage" in globalThis))
     return t;
   const o = globalThis.localStorage.getItem(e);
-  return o === "light" || o === "dark" || o === "system" ? o : t;
-}, k = (e) => {
-  h(i(e, (t) => {
+  return o === n.light || o === n.dark || o === n.system ? o : t;
+}, C = (e) => {
+  i(m(e, (t) => {
     document.documentElement.classList.toggle("dark", t === "dark");
   }));
-}, C = (e) => {
+}, M = (e) => {
   if (typeof globalThis.matchMedia != "function")
     return () => {
-      e(g());
+      e(d());
     };
-  const t = globalThis.matchMedia(m), o = (n) => {
-    e(n.matches ? "dark" : "light");
+  const t = globalThis.matchMedia(g), o = (s) => {
+    e(s.matches ? "dark" : "light");
   };
   return t.addEventListener("change", o), () => {
     t.removeEventListener("change", o);
   };
-}, L = (e) => {
-  const t = () => e.storageKey ?? S, o = () => e.defaultTheme ?? "system", [n, s] = c(e.theme ?? v(t(), o())), [d, u] = c(g()), T = (r) => {
-    s(r), "localStorage" in globalThis && globalThis.localStorage.setItem(t(), r);
-  }, a = () => {
-    const r = n();
-    return r === "system" ? d() : r;
+}, K = (e) => {
+  const t = () => e.storageKey ?? k, o = () => e.defaultTheme ?? n.system, [s, a] = h(e.theme ?? v(t(), o())), [u, T] = h(d()), f = (r) => {
+    a(r), "localStorage" in globalThis && globalThis.localStorage.setItem(t(), r);
+  }, c = () => {
+    const r = s();
+    return r === n.system ? u() : r;
   };
-  return y(() => C(u)), h(i(() => e.theme, (r) => {
-    typeof r == "string" && s(r);
-  })), k(a), f(l.Provider, {
+  return E(() => M(T)), i(m(() => e.theme, (r) => {
+    typeof r == "string" && a(r);
+  })), C(c), y(l.Provider, {
     value: {
-      theme: n,
-      setTheme: T,
-      resolvedTheme: a
+      theme: s,
+      setTheme: f,
+      resolvedTheme: c
     },
     get children() {
       return e.children;
     }
   });
-}, K = () => {
-  const e = E(l);
+}, R = () => {
+  const e = b(l);
   if (!e)
     throw new Error("useTheme must be used within a ThemeProvider");
   return e;
 };
 export {
-  L as ThemeProvider,
-  K as useTheme
+  n as Theme,
+  K as ThemeProvider,
+  R as useTheme
 };
 //# sourceMappingURL=Theme.js.map

package/dist/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../src/Theme.tsx"],"sourcesContent":["import type { Component, JSXElement } from 'solid-js';\n\nexport type Theme = 'light' | 'dark' | 'system';\n\nexport type ThemeProviderProps = {\n  theme?: Theme;\n  defaultTheme?: Theme;\n  storageKey?: string;\n  children: JSXElement;\n};\n\ntype ThemeContextValue = {\n  theme: () => Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: () => 'light' | 'dark';\n};\n\nconst ThemeContext = createContext<ThemeContextValue>();\nconst DEFAULT_STORAGE_KEY = 'theme';\nconst DARK_THEME_QUERY = '(prefers-color-scheme: dark)';\n\nconst getSystemTheme = (): 'light' | 'dark' => {\n  if (typeof globalThis.matchMedia !== 'function') {\n    return 'light';\n  }\n  return globalThis.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light';\n};\n\nconst readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {\n  if (!('localStorage' in globalThis)) {\n    return defaultTheme;\n  }\n  const stored = globalThis.localStorage.getItem(storageKey);\n  if (stored === 'light' || stored === 'dark' || stored === 'system') {\n    return stored;\n  }\n  return defaultTheme;\n};\n\nconst applyRootThemeClass = (resolvedTheme: () => 'light' | 'dark'): void => {\n  createEffect(\n    on(resolvedTheme, (resolved) => {\n      const root = document.documentElement;\n      root.classList.toggle('dark', resolved === 'dark');\n    }),\n  );\n};\n\nconst createSystemThemeListener = (\n  setSystemTheme: (theme: 'light' | 'dark') => void,\n): (() => void) => {\n  if (typeof globalThis.matchMedia !== 'function') {\n    return (): void => {\n      setSystemTheme(getSystemTheme());\n    };\n  }\n  const mediaQuery = globalThis.matchMedia(DARK_THEME_QUERY);\n  const handleChange = (mediaQueryEvent: MediaQueryListEvent): void => {\n    setSystemTheme(mediaQueryEvent.matches ? 'dark' : 'light');\n  };\n  mediaQuery.addEventListener('change', handleChange);\n  return (): void => {\n    mediaQuery.removeEventListener('change', handleChange);\n  };\n};\n\nexport const ThemeProvider: Component<ThemeProviderProps> = (props) => {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const fallbackTheme = (): Theme => props.defaultTheme ?? 'system';\n  const [theme, setThemeState] = createSignal<Theme>(\n    props.theme ?? readStoredTheme(storageKey(), fallbackTheme()),\n  );\n  const [systemTheme, setSystemTheme] = createSignal<'light' | 'dark'>(getSystemTheme());\n\n  const setTheme = (newTheme: Theme): void => {\n    setThemeState(newTheme);\n    if ('localStorage' in globalThis) {\n      globalThis.localStorage.setItem(storageKey(), newTheme);\n    }\n  };\n\n  const resolvedTheme = (): 'light' | 'dark' => {\n    const current = theme();\n    return current === 'system' ? systemTheme() : current;\n  };\n\n  onMount(() => createSystemThemeListener(setSystemTheme));\n\n  createEffect(\n    on(\n      () => props.theme,\n      (propTheme) => {\n        if (typeof propTheme === 'string') {\n          setThemeState(propTheme);\n        }\n      },\n    ),\n  );\n  applyRootThemeClass(resolvedTheme);\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>\n      {props.children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};\n"],"names":["ThemeContext","createContext","DEFAULT_STORAGE_KEY","DARK_THEME_QUERY","getSystemTheme","globalThis","matchMedia","matches","readStoredTheme","storageKey","defaultTheme","stored","localStorage","getItem","applyRootThemeClass","resolvedTheme","createEffect","on","resolved","root","document","documentElement","classList","toggle","createSystemThemeListener","setSystemTheme","mediaQuery","handleChange","mediaQueryEvent","addEventListener","removeEventListener","ThemeProvider","props","fallbackTheme","theme","setThemeState","createSignal","systemTheme","setTheme","newTheme","setItem","current","onMount","propTheme","_$createComponent","Provider","value","children","useTheme","context","useContext","Error"],"mappings":";;AAiBA,MAAMA,IAAeC,EAAAA,GACfC,IAAsB,SACtBC,IAAmB,gCAEnBC,IAAiBA,MACjB,OAAOC,WAAWC,cAAe,aAC5B,UAEFD,WAAWC,WAAWH,CAAgB,EAAEI,UAAU,SAAS,SAG9DC,IAAkBA,CAACC,GAAoBC,MAA+B;AAC1E,MAAI,EAAE,kBAAkBL;AACtB,WAAOK;AAET,QAAMC,IAASN,WAAWO,aAAaC,QAAQJ,CAAU;AACzD,SAAIE,MAAW,WAAWA,MAAW,UAAUA,MAAW,WACjDA,IAEFD;AACT,GAEMI,IAAsBA,CAACC,MAAgD;AAC3EC,EAAAA,EACEC,EAAGF,GAAgBG,CAAAA,MAAa;AAE9BC,IADaC,SAASC,gBACjBC,UAAUC,OAAO,QAAQL,MAAa,MAAM;AAAA,EACnD,CAAC,CACH;AACF,GAEMM,IAA4BA,CAChCC,MACiB;AACjB,MAAI,OAAOpB,WAAWC,cAAe;AACnC,WAAO,MAAY;AACjBmB,MAAAA,EAAerB,GAAgB;AAAA,IACjC;AAEF,QAAMsB,IAAarB,WAAWC,WAAWH,CAAgB,GACnDwB,IAAeA,CAACC,MAA+C;AACnEH,IAAAA,EAAeG,EAAgBrB,UAAU,SAAS,OAAO;AAAA,EAC3D;AACAmB,SAAAA,EAAWG,iBAAiB,UAAUF,CAAY,GAC3C,MAAY;AACjBD,IAAAA,EAAWI,oBAAoB,UAAUH,CAAY;AAAA,EACvD;AACF,GAEaI,IAAgDC,CAAAA,MAAU;AACrE,QAAMvB,IAAaA,MAAcuB,EAAMvB,cAAcP,GAC/C+B,IAAgBA,MAAaD,EAAMtB,gBAAgB,UACnD,CAACwB,GAAOC,CAAa,IAAIC,EAC7BJ,EAAME,SAAS1B,EAAgBC,KAAcwB,EAAAA,CAAe,CAC9D,GACM,CAACI,GAAaZ,CAAc,IAAIW,EAA+BhC,GAAgB,GAE/EkC,IAAWA,CAACC,MAA0B;AAC1CJ,IAAAA,EAAcI,CAAQ,GAClB,kBAAkBlC,cACpBA,WAAWO,aAAa4B,QAAQ/B,EAAAA,GAAc8B,CAAQ;AAAA,EAE1D,GAEMxB,IAAgBA,MAAwB;AAC5C,UAAM0B,IAAUP,EAAAA;AAChB,WAAOO,MAAY,WAAWJ,EAAAA,IAAgBI;AAAAA,EAChD;AAEAC,SAAAA,EAAQ,MAAMlB,EAA0BC,CAAc,CAAC,GAEvDT,EACEC,EACE,MAAMe,EAAME,OACXS,CAAAA,MAAc;AACb,IAAI,OAAOA,KAAc,YACvBR,EAAcQ,CAAS;AAAA,EAE3B,CACF,CACF,GACA7B,EAAoBC,CAAa,GAEjC6B,EACG5C,EAAa6C,UAAQ;AAAA,IAACC,OAAO;AAAA,MAAEZ,OAAAA;AAAAA,MAAOI,UAAAA;AAAAA,MAAUvB,eAAAA;AAAAA,IAAAA;AAAAA,IAAe,IAAAgC,WAAA;AAAA,aAC7Df,EAAMe;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB,GAEaC,IAAWA,MAAyB;AAC/C,QAAMC,IAAUC,EAAWlD,CAAY;AACvC,MAAI,CAACiD;AACH,UAAM,IAAIE,MAAM,8CAA8C;AAEhE,SAAOF;AACT;"}
+{"version":3,"file":"Theme.js","sources":["../src/Theme.tsx"],"sourcesContent":["import type { Component, JSXElement } from 'solid-js';\n\nexport type Theme = 'light' | 'dark' | 'system';\n\nexport const Theme = {\n  light: 'light',\n  dark: 'dark',\n  system: 'system',\n} as const;\n\nexport type ThemeProviderProps = {\n  theme?: Theme;\n  defaultTheme?: Theme;\n  storageKey?: string;\n  children: JSXElement;\n};\n\ntype ThemeContextValue = {\n  theme: () => Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: () => 'light' | 'dark';\n};\n\nconst ThemeContext = createContext<ThemeContextValue>();\nconst DEFAULT_STORAGE_KEY = 'theme';\nconst DARK_THEME_QUERY = '(prefers-color-scheme: dark)';\n\nconst getSystemTheme = (): 'light' | 'dark' => {\n  if (typeof globalThis.matchMedia !== 'function') {\n    return 'light';\n  }\n  return globalThis.matchMedia(DARK_THEME_QUERY).matches ? 'dark' : 'light';\n};\n\nconst readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {\n  if (!('localStorage' in globalThis)) {\n    return defaultTheme;\n  }\n  const stored = globalThis.localStorage.getItem(storageKey);\n  if (stored === Theme.light || stored === Theme.dark || stored === Theme.system) {\n    return stored as Theme;\n  }\n  return defaultTheme;\n};\n\nconst applyRootThemeClass = (resolvedTheme: () => 'light' | 'dark'): void => {\n  createEffect(\n    on(resolvedTheme, (resolved) => {\n      const root = document.documentElement;\n      root.classList.toggle('dark', resolved === 'dark');\n    }),\n  );\n};\n\nconst createSystemThemeListener = (\n  setSystemTheme: (theme: 'light' | 'dark') => void,\n): (() => void) => {\n  if (typeof globalThis.matchMedia !== 'function') {\n    return (): void => {\n      setSystemTheme(getSystemTheme());\n    };\n  }\n  const mediaQuery = globalThis.matchMedia(DARK_THEME_QUERY);\n  const handleChange = (mediaQueryEvent: MediaQueryListEvent): void => {\n    setSystemTheme(mediaQueryEvent.matches ? 'dark' : 'light');\n  };\n  mediaQuery.addEventListener('change', handleChange);\n  return (): void => {\n    mediaQuery.removeEventListener('change', handleChange);\n  };\n};\n\nexport const ThemeProvider: Component<ThemeProviderProps> = (props) => {\n  const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;\n  const fallbackTheme = (): Theme => props.defaultTheme ?? Theme.system;\n  const [theme, setThemeState] = createSignal<Theme>(\n    props.theme ?? readStoredTheme(storageKey(), fallbackTheme()),\n  );\n  const [systemTheme, setSystemTheme] = createSignal<'light' | 'dark'>(getSystemTheme());\n\n  const setTheme = (newTheme: Theme): void => {\n    setThemeState(newTheme);\n    if ('localStorage' in globalThis) {\n      globalThis.localStorage.setItem(storageKey(), newTheme);\n    }\n  };\n\n  const resolvedTheme = (): 'light' | 'dark' => {\n    const current = theme();\n    return current === Theme.system ? systemTheme() : current;\n  };\n\n  onMount(() => createSystemThemeListener(setSystemTheme));\n\n  createEffect(\n    on(\n      () => props.theme,\n      (propTheme) => {\n        if (typeof propTheme === 'string') {\n          setThemeState(propTheme);\n        }\n      },\n    ),\n  );\n  applyRootThemeClass(resolvedTheme);\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>\n      {props.children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};\n"],"names":["Theme","light","dark","system","ThemeContext","createContext","DEFAULT_STORAGE_KEY","DARK_THEME_QUERY","getSystemTheme","globalThis","matchMedia","matches","readStoredTheme","storageKey","defaultTheme","stored","localStorage","getItem","applyRootThemeClass","resolvedTheme","createEffect","on","resolved","root","document","documentElement","classList","toggle","createSystemThemeListener","setSystemTheme","mediaQuery","handleChange","mediaQueryEvent","addEventListener","removeEventListener","ThemeProvider","props","fallbackTheme","theme","setThemeState","createSignal","systemTheme","setTheme","newTheme","setItem","current","onMount","propTheme","_$createComponent","Provider","value","children","useTheme","context","useContext","Error"],"mappings":";;AAIO,MAAMA,IAAQ;AAAA,EACnBC,OAAO;AAAA,EACPC,MAAM;AAAA,EACNC,QAAQ;AACV,GAeMC,IAAeC,EAAAA,GACfC,IAAsB,SACtBC,IAAmB,gCAEnBC,IAAiBA,MACjB,OAAOC,WAAWC,cAAe,aAC5B,UAEFD,WAAWC,WAAWH,CAAgB,EAAEI,UAAU,SAAS,SAG9DC,IAAkBA,CAACC,GAAoBC,MAA+B;AAC1E,MAAI,EAAE,kBAAkBL;AACtB,WAAOK;AAET,QAAMC,IAASN,WAAWO,aAAaC,QAAQJ,CAAU;AACzD,SAAIE,MAAWf,EAAMC,SAASc,MAAWf,EAAME,QAAQa,MAAWf,EAAMG,SAC/DY,IAEFD;AACT,GAEMI,IAAsBA,CAACC,MAAgD;AAC3EC,EAAAA,EACEC,EAAGF,GAAgBG,CAAAA,MAAa;AAE9BC,IADaC,SAASC,gBACjBC,UAAUC,OAAO,QAAQL,MAAa,MAAM;AAAA,EACnD,CAAC,CACH;AACF,GAEMM,IAA4BA,CAChCC,MACiB;AACjB,MAAI,OAAOpB,WAAWC,cAAe;AACnC,WAAO,MAAY;AACjBmB,MAAAA,EAAerB,GAAgB;AAAA,IACjC;AAEF,QAAMsB,IAAarB,WAAWC,WAAWH,CAAgB,GACnDwB,IAAeA,CAACC,MAA+C;AACnEH,IAAAA,EAAeG,EAAgBrB,UAAU,SAAS,OAAO;AAAA,EAC3D;AACAmB,SAAAA,EAAWG,iBAAiB,UAAUF,CAAY,GAC3C,MAAY;AACjBD,IAAAA,EAAWI,oBAAoB,UAAUH,CAAY;AAAA,EACvD;AACF,GAEaI,IAAgDC,CAAAA,MAAU;AACrE,QAAMvB,IAAaA,MAAcuB,EAAMvB,cAAcP,GAC/C+B,IAAgBA,MAAaD,EAAMtB,gBAAgBd,EAAMG,QACzD,CAACmC,GAAOC,CAAa,IAAIC,EAC7BJ,EAAME,SAAS1B,EAAgBC,KAAcwB,EAAAA,CAAe,CAC9D,GACM,CAACI,GAAaZ,CAAc,IAAIW,EAA+BhC,GAAgB,GAE/EkC,IAAWA,CAACC,MAA0B;AAC1CJ,IAAAA,EAAcI,CAAQ,GAClB,kBAAkBlC,cACpBA,WAAWO,aAAa4B,QAAQ/B,EAAAA,GAAc8B,CAAQ;AAAA,EAE1D,GAEMxB,IAAgBA,MAAwB;AAC5C,UAAM0B,IAAUP,EAAAA;AAChB,WAAOO,MAAY7C,EAAMG,SAASsC,EAAAA,IAAgBI;AAAAA,EACpD;AAEAC,SAAAA,EAAQ,MAAMlB,EAA0BC,CAAc,CAAC,GAEvDT,EACEC,EACE,MAAMe,EAAME,OACXS,CAAAA,MAAc;AACb,IAAI,OAAOA,KAAc,YACvBR,EAAcQ,CAAS;AAAA,EAE3B,CACF,CACF,GACA7B,EAAoBC,CAAa,GAEjC6B,EACG5C,EAAa6C,UAAQ;AAAA,IAACC,OAAO;AAAA,MAAEZ,OAAAA;AAAAA,MAAOI,UAAAA;AAAAA,MAAUvB,eAAAA;AAAAA,IAAAA;AAAAA,IAAe,IAAAgC,WAAA;AAAA,aAC7Df,EAAMe;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAGrB,GAEaC,IAAWA,MAAyB;AAC/C,QAAMC,IAAUC,EAAWlD,CAAY;AACvC,MAAI,CAACiD;AACH,UAAM,IAAIE,MAAM,8CAA8C;AAEhE,SAAOF;AACT;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.3.8",
+  "version": "1.3.9",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/Theme.tsx

@@ -2,6 +2,12 @@ import type { Component, JSXElement } from 'solid-js';
 
 export type Theme = 'light' | 'dark' | 'system';
 
+export const Theme = {
+  light: 'light',
+  dark: 'dark',
+  system: 'system',
+} as const;
+
 export type ThemeProviderProps = {
   theme?: Theme;
   defaultTheme?: Theme;
@@ -31,8 +37,8 @@ const readStoredTheme = (storageKey: string, defaultTheme: Theme): Theme => {
     return defaultTheme;
   }
   const stored = globalThis.localStorage.getItem(storageKey);
-  if (stored === 'light' || stored === 'dark' || stored === 'system') {
-    return stored;
+  if (stored === Theme.light || stored === Theme.dark || stored === Theme.system) {
+    return stored as Theme;
   }
   return defaultTheme;
 };
@@ -66,7 +72,7 @@ const createSystemThemeListener = (
 
 export const ThemeProvider: Component<ThemeProviderProps> = (props) => {
   const storageKey = (): string => props.storageKey ?? DEFAULT_STORAGE_KEY;
-  const fallbackTheme = (): Theme => props.defaultTheme ?? 'system';
+  const fallbackTheme = (): Theme => props.defaultTheme ?? Theme.system;
   const [theme, setThemeState] = createSignal<Theme>(
     props.theme ?? readStoredTheme(storageKey(), fallbackTheme()),
   );
@@ -81,7 +87,7 @@ export const ThemeProvider: Component<ThemeProviderProps> = (props) => {
 
   const resolvedTheme = (): 'light' | 'dark' => {
     const current = theme();
-    return current === 'system' ? systemTheme() : current;
+    return current === Theme.system ? systemTheme() : current;
   };
 
   onMount(() => createSystemThemeListener(setSystemTheme));