@plumile/ui 0.1.125 → 0.1.131

package/lib/esm/theme/ThemeProvider.js

@@ -1,56 +1,58 @@
 import "./accessibility.css.js";
 import "./global.css.js";
-import { darkThemeClass as e, lightThemeClass as t } from "./theme.css.js";
+import { publicDarkThemeClass as e, publicLightThemeClass as t } from "./theme.css.js";
 import { createContext as n, useContext as r, useEffect as i, useMemo as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 //#region src/theme/ThemeProvider.tsx
-var c = n(void 0), l = "plumile-theme-mode", u = () => typeof window > "u" || typeof window.matchMedia != "function" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", d = (e, t) => e === "system" ? t : e, f = (e) => {
+var c = n(void 0), l = "plumile-theme-mode", u = () => typeof window > "u" || typeof window.matchMedia != "function" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", d = (e, t) => e === "system" ? t : e, f = (e) => e === "system" || e === "light" || e === "dark", p = (e, t = l) => {
 	if (typeof window > "u") return e;
-	let t = window.localStorage.getItem(l);
-	return t === "system" || t === "light" || t === "dark" ? t : e;
-}, p = ({ children: n, defaultMode: r = "system" }) => {
-	let [p, m] = o(() => f(r)), [h, g] = o(() => u()), _ = d(p, h);
+	let n = window.localStorage.getItem(t);
+	return f(n) ? n : e;
+}, m = (e) => e.split(/\s+/).filter(Boolean), h = ({ children: n, defaultMode: r = "system" }) => {
+	let [f, h] = o(() => p(r)), [g, _] = o(() => u()), v = d(f, g);
 	i(() => {
-		if (p === "system" && typeof window < "u" && typeof window.matchMedia == "function") {
+		if (f === "system" && typeof window < "u" && typeof window.matchMedia == "function") {
 			let e = window.matchMedia("(prefers-color-scheme: dark)"), t = (t) => {
 				if (t?.matches ?? e.matches) {
-					g("dark");
+					_("dark");
 					return;
 				}
-				g("light");
+				_("light");
 			};
 			return t(e), e.addEventListener("change", t), () => {
 				e.removeEventListener("change", t);
 			};
 		}
-	}, [p]), i(() => {
-		typeof window > "u" || window.localStorage.setItem(l, p);
-	}, [p]), i(() => {
+	}, [f]), i(() => {
+		typeof window > "u" || window.localStorage.setItem(l, f);
+	}, [f]), i(() => {
 		if (typeof document > "u") return;
-		let n = document.documentElement, r = t;
-		return _ === "dark" && (r = e), n.classList.remove(t, e), n.classList.add(r), () => {
-			n.classList.remove(t, e);
+		let n = document.body, r = t;
+		return v === "dark" && (r = e), n.classList.remove(...m(t), ...m(e)), n.classList.add(...m(r)), () => {
+			n.classList.remove(...m(t), ...m(e));
 		};
-	}, [_]);
-	let v = a(() => ({
-		mode: p,
-		resolvedTheme: _,
-		setMode: m
-	}), [p, _]);
+	}, [v]);
+	let y = a(() => ({
+		mode: f,
+		resolvedTheme: v,
+		setMode: h
+	}), [f, v]);
 	return /* @__PURE__ */ s(c.Provider, {
-		value: v,
+		value: y,
 		children: n
 	});
-}, m = () => {
+}, g = () => {
 	let e = r(c);
 	if (e == null) throw Error("useTheme must be used within a ThemeProvider");
 	return e;
-}, h = {
+}, _ = {
 	getSystemTheme: u,
+	isThemeMode: f,
 	resolveTheme: d,
-	readStoredMode: f
+	readStoredMode: p,
+	splitClassName: m
 };
 //#endregion
-export { l as THEME_MODE_KEY, p as ThemeProvider, h as __test, m as useTheme };
+export { l as THEME_MODE_KEY, h as ThemeProvider, _ as __test, g as useTheme };
 
 //# sourceMappingURL=ThemeProvider.js.map

package/lib/esm/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport './accessibility.css.js';\nimport './global.css.js';\nimport { darkThemeClass, lightThemeClass } from './theme.css.js';\n\nexport type ThemeMode = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\ntype ThemeContextValue = {\n  mode: ThemeMode;\n  resolvedTheme: ResolvedTheme;\n  setMode: (mode: ThemeMode) => void;\n};\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport const THEME_MODE_KEY = 'plumile-theme-mode';\n\ntype ThemeProviderProps = {\n  children: ReactNode;\n  defaultMode?: ThemeMode;\n};\n\nconst getSystemTheme = (): ResolvedTheme => {\n  if (\n    typeof window === 'undefined' ||\n    typeof window.matchMedia !== 'function'\n  ) {\n    return 'light';\n  }\n\n  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n\nconst resolveTheme = (\n  mode: ThemeMode,\n  systemTheme: ResolvedTheme,\n): ResolvedTheme => {\n  if (mode === 'system') {\n    return systemTheme;\n  }\n\n  return mode;\n};\n\nconst readStoredMode = (defaultMode: ThemeMode): ThemeMode => {\n  if (typeof window === 'undefined') {\n    return defaultMode;\n  }\n\n  const savedMode = window.localStorage.getItem(THEME_MODE_KEY);\n\n  if (savedMode === 'system' || savedMode === 'light' || savedMode === 'dark') {\n    return savedMode;\n  }\n\n  return defaultMode;\n};\n\nexport const ThemeProvider = ({\n  children,\n  defaultMode = 'system',\n}: ThemeProviderProps): JSX.Element => {\n  const [mode, setMode] = useState<ThemeMode>(() => {\n    return readStoredMode(defaultMode);\n  });\n  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => {\n    return getSystemTheme();\n  });\n  const resolvedTheme = resolveTheme(mode, systemTheme);\n\n  useEffect(() => {\n    if (\n      mode === 'system' &&\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function'\n    ) {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n      const updateSystemTheme = (\n        event?: MediaQueryList | MediaQueryListEvent,\n      ): void => {\n        const matchesDarkTheme = event?.matches ?? mediaQuery.matches;\n\n        if (matchesDarkTheme) {\n          setSystemTheme('dark');\n          return;\n        }\n\n        setSystemTheme('light');\n      };\n\n      updateSystemTheme(mediaQuery);\n      mediaQuery.addEventListener('change', updateSystemTheme);\n\n      return () => {\n        mediaQuery.removeEventListener('change', updateSystemTheme);\n      };\n    }\n\n    return undefined;\n  }, [mode]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return undefined;\n    }\n\n    window.localStorage.setItem(THEME_MODE_KEY, mode);\n    return undefined;\n  }, [mode]);\n\n  useEffect(() => {\n    if (typeof document === 'undefined') {\n      return undefined;\n    }\n\n    const root = document.documentElement;\n    let themeClass = lightThemeClass;\n\n    if (resolvedTheme === 'dark') {\n      themeClass = darkThemeClass;\n    }\n\n    root.classList.remove(lightThemeClass, darkThemeClass);\n    root.classList.add(themeClass);\n\n    return () => {\n      root.classList.remove(lightThemeClass, darkThemeClass);\n    };\n  }, [resolvedTheme]);\n\n  const value = useMemo(() => {\n    return {\n      mode,\n      resolvedTheme,\n      setMode,\n    };\n  }, [mode, resolvedTheme]);\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n  const context = useContext(ThemeContext);\n\n  if (context == null) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n\n  return context;\n};\n\nexport const __test = {\n  getSystemTheme,\n  resolveTheme,\n  readStoredMode,\n} as const;\n"],"mappings":";;;;;;AAuBA,IAAM,IAAe,EAA6C,KAAA,EAAU,EAE/D,IAAiB,sBAOxB,UAEF,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,aAEtB,UAGL,OAAO,WAAW,+BAA+B,CAAC,UAC7C,SAGF,SAGH,KACJ,GACA,MAEI,MAAS,WACJ,IAGF,GAGH,KAAkB,MAAsC;CAC5D,IAAI,OAAO,SAAW,KACpB,OAAO;CAGT,IAAM,IAAY,OAAO,aAAa,QAAQ,EAAe;CAM7D,OAJI,MAAc,YAAY,MAAc,WAAW,MAAc,SAC5D,IAGF;GAGI,KAAiB,EAC5B,aACA,iBAAc,eACuB;CACrC,IAAM,CAAC,GAAM,KAAW,QACf,EAAe,EAAY,CAClC,EACI,CAAC,GAAa,KAAkB,QAC7B,GAAgB,CACvB,EACI,IAAgB,EAAa,GAAM,EAAY;CA2CrD,AAzCA,QAAgB;EACd,IACE,MAAS,YACT,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,YAC7B;GACA,IAAM,IAAa,OAAO,WAAW,+BAA+B,EAE9D,KACJ,MACS;IAGT,IAFyB,GAAO,WAAW,EAAW,SAEhC;KACpB,EAAe,OAAO;KACtB;;IAGF,EAAe,QAAQ;;GAMzB,OAHA,EAAkB,EAAW,EAC7B,EAAW,iBAAiB,UAAU,EAAkB,QAE3C;IACX,EAAW,oBAAoB,UAAU,EAAkB;;;IAK9D,CAAC,EAAK,CAAC,EAEV,QAAgB;EACV,OAAO,SAAW,OAItB,OAAO,aAAa,QAAQ,GAAgB,EAAK;IAEhD,CAAC,EAAK,CAAC,EAEV,QAAgB;EACd,IAAI,OAAO,WAAa,KACtB;EAGF,IAAM,IAAO,SAAS,iBAClB,IAAa;EASjB,OAPI,MAAkB,WACpB,IAAa,IAGf,EAAK,UAAU,OAAO,GAAiB,EAAe,EACtD,EAAK,UAAU,IAAI,EAAW,QAEjB;GACX,EAAK,UAAU,OAAO,GAAiB,EAAe;;IAEvD,CAAC,EAAc,CAAC;CAEnB,IAAM,IAAQ,SACL;EACL;EACA;EACA;EACD,GACA,CAAC,GAAM,EAAc,CAAC;CAEzB,OACE,kBAAC,EAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA;GAI9D,UAAoC;CAC/C,IAAM,IAAU,EAAW,EAAa;CAExC,IAAI,KAAW,MACb,MAAU,MAAM,+CAA+C;CAGjE,OAAO;GAGI,IAAS;CACpB;CACA;CACA;CACD"}
+{"version":3,"file":"ThemeProvider.js","names":[],"sources":["../../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport './accessibility.css.js';\nimport './global.css.js';\nimport { publicDarkThemeClass, publicLightThemeClass } from './theme.css.js';\n\nexport type ThemeMode = 'system' | 'light' | 'dark';\nexport type ResolvedTheme = 'light' | 'dark';\n\ntype ThemeContextValue = {\n  mode: ThemeMode;\n  resolvedTheme: ResolvedTheme;\n  setMode: (mode: ThemeMode) => void;\n};\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\nexport const THEME_MODE_KEY = 'plumile-theme-mode';\n\ntype ThemeProviderProps = {\n  children: ReactNode;\n  defaultMode?: ThemeMode;\n};\n\nconst getSystemTheme = (): ResolvedTheme => {\n  if (\n    typeof window === 'undefined' ||\n    typeof window.matchMedia !== 'function'\n  ) {\n    return 'light';\n  }\n\n  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n\nconst resolveTheme = (\n  mode: ThemeMode,\n  systemTheme: ResolvedTheme,\n): ResolvedTheme => {\n  if (mode === 'system') {\n    return systemTheme;\n  }\n\n  return mode;\n};\n\nconst isThemeMode = (value: string | null): value is ThemeMode => {\n  return value === 'system' || value === 'light' || value === 'dark';\n};\n\nconst readStoredMode = (\n  defaultMode: ThemeMode,\n  storageKey = THEME_MODE_KEY,\n): ThemeMode => {\n  if (typeof window === 'undefined') {\n    return defaultMode;\n  }\n\n  const storage = window.localStorage;\n  const savedMode = storage.getItem(storageKey);\n\n  if (isThemeMode(savedMode)) {\n    return savedMode;\n  }\n\n  return defaultMode;\n};\n\nconst splitClassName = (className: string): string[] => {\n  return className.split(/\\s+/).filter(Boolean);\n};\n\nexport const ThemeProvider = ({\n  children,\n  defaultMode = 'system',\n}: ThemeProviderProps): JSX.Element => {\n  const [mode, setMode] = useState<ThemeMode>(() => {\n    return readStoredMode(defaultMode);\n  });\n  const [systemTheme, setSystemTheme] = useState<ResolvedTheme>(() => {\n    return getSystemTheme();\n  });\n  const resolvedTheme = resolveTheme(mode, systemTheme);\n\n  useEffect(() => {\n    if (\n      mode === 'system' &&\n      typeof window !== 'undefined' &&\n      typeof window.matchMedia === 'function'\n    ) {\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n      const updateSystemTheme = (\n        event?: MediaQueryList | MediaQueryListEvent,\n      ): void => {\n        const matchesDarkTheme = event?.matches ?? mediaQuery.matches;\n\n        if (matchesDarkTheme) {\n          setSystemTheme('dark');\n          return;\n        }\n\n        setSystemTheme('light');\n      };\n\n      updateSystemTheme(mediaQuery);\n      mediaQuery.addEventListener('change', updateSystemTheme);\n\n      return () => {\n        mediaQuery.removeEventListener('change', updateSystemTheme);\n      };\n    }\n\n    return undefined;\n  }, [mode]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return undefined;\n    }\n\n    const storage = window.localStorage;\n    storage.setItem(THEME_MODE_KEY, mode);\n    return undefined;\n  }, [mode]);\n\n  useEffect(() => {\n    if (typeof document === 'undefined') {\n      return undefined;\n    }\n\n    const root = document.body;\n    let themeClass = publicLightThemeClass;\n\n    if (resolvedTheme === 'dark') {\n      themeClass = publicDarkThemeClass;\n    }\n\n    root.classList.remove(\n      ...splitClassName(publicLightThemeClass),\n      ...splitClassName(publicDarkThemeClass),\n    );\n    root.classList.add(...splitClassName(themeClass));\n\n    return () => {\n      root.classList.remove(\n        ...splitClassName(publicLightThemeClass),\n        ...splitClassName(publicDarkThemeClass),\n      );\n    };\n  }, [resolvedTheme]);\n\n  const value = useMemo(() => {\n    return {\n      mode,\n      resolvedTheme,\n      setMode,\n    };\n  }, [mode, resolvedTheme]);\n\n  return (\n    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>\n  );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n  const context = useContext(ThemeContext);\n\n  if (context == null) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n\n  return context;\n};\n\nexport const __test = {\n  getSystemTheme,\n  isThemeMode,\n  resolveTheme,\n  readStoredMode,\n  splitClassName,\n} as const;\n"],"mappings":";;;;;;AAuBA,IAAM,IAAe,EAA6C,KAAA,EAAU,EAE/D,IAAiB,sBAOxB,UAEF,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,aAEtB,UAGL,OAAO,WAAW,+BAA+B,CAAC,UAC7C,SAGF,SAGH,KACJ,GACA,MAEI,MAAS,WACJ,IAGF,GAGH,KAAe,MACZ,MAAU,YAAY,MAAU,WAAW,MAAU,QAGxD,KACJ,GACA,IAAa,MACC;CACd,IAAI,OAAO,SAAW,KACpB,OAAO;CAIT,IAAM,IADU,OAAO,aACG,QAAQ,EAAW;CAM7C,OAJI,EAAY,EAAU,GACjB,IAGF;GAGH,KAAkB,MACf,EAAU,MAAM,MAAM,CAAC,OAAO,QAAQ,EAGlC,KAAiB,EAC5B,aACA,iBAAc,eACuB;CACrC,IAAM,CAAC,GAAM,KAAW,QACf,EAAe,EAAY,CAClC,EACI,CAAC,GAAa,KAAkB,QAC7B,GAAgB,CACvB,EACI,IAAgB,EAAa,GAAM,EAAY;CA4CrD,AA1CA,QAAgB;EACd,IACE,MAAS,YACT,OAAO,SAAW,OAClB,OAAO,OAAO,cAAe,YAC7B;GACA,IAAM,IAAa,OAAO,WAAW,+BAA+B,EAE9D,KACJ,MACS;IAGT,IAFyB,GAAO,WAAW,EAAW,SAEhC;KACpB,EAAe,OAAO;KACtB;;IAGF,EAAe,QAAQ;;GAMzB,OAHA,EAAkB,EAAW,EAC7B,EAAW,iBAAiB,UAAU,EAAkB,QAE3C;IACX,EAAW,oBAAoB,UAAU,EAAkB;;;IAK9D,CAAC,EAAK,CAAC,EAEV,QAAgB;EACV,OAAO,SAAW,OAKtB,OADuB,aACf,QAAQ,GAAgB,EAAK;IAEpC,CAAC,EAAK,CAAC,EAEV,QAAgB;EACd,IAAI,OAAO,WAAa,KACtB;EAGF,IAAM,IAAO,SAAS,MAClB,IAAa;EAYjB,OAVI,MAAkB,WACpB,IAAa,IAGf,EAAK,UAAU,OACb,GAAG,EAAe,EAAsB,EACxC,GAAG,EAAe,EAAqB,CACxC,EACD,EAAK,UAAU,IAAI,GAAG,EAAe,EAAW,CAAC,QAEpC;GACX,EAAK,UAAU,OACb,GAAG,EAAe,EAAsB,EACxC,GAAG,EAAe,EAAqB,CACxC;;IAEF,CAAC,EAAc,CAAC;CAEnB,IAAM,IAAQ,SACL;EACL;EACA;EACA;EACD,GACA,CAAC,GAAM,EAAc,CAAC;CAEzB,OACE,kBAAC,EAAa,UAAd;EAA8B;EAAQ;EAAiC,CAAA;GAI9D,UAAoC;CAC/C,IAAM,IAAU,EAAW,EAAa;CAExC,IAAI,KAAW,MACb,MAAU,MAAM,+CAA+C;CAGjE,OAAO;GAGI,IAAS;CACpB;CACA;CACA;CACA;CACA;CACD"}