@webpros/mui-theme 0.4.12 → 0.5.0

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@webpros/mui-theme",
     "description": "MUI v7 theme for WebPros products",
-    "version": "0.4.12",
+    "version": "0.5.0",
     "license": "MIT",
     "repository": {
         "type": "git",

package/dist/src/hooks/useLocalStorageThemeMode.d.ts

@@ -0,0 +1,3 @@
+import { ThemeMode } from '../tokens/ThemeMode';
+export declare const THEME_MODE_KEY = "ThemeModeKey";
+export declare const useLocalStorageThemeMode: () => readonly [ThemeMode, () => void, import("react").Dispatch<import("react").SetStateAction<ThemeMode>>];

package/dist/src/hooks/{useThemeMode.js → useLocalStorageThemeMode.js}

@@ -2,8 +2,7 @@
 import { useMediaQuery } from '@mui/material';
 import { useLocalStorage } from 'usehooks-ts';
 export const THEME_MODE_KEY = 'ThemeModeKey';
-// TODO get rid of this hook, as the theme shouldn't have any knowledge of the mode
-export const useThemeMode = () => {
+export const useLocalStorageThemeMode = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
     const [value, setValue] = useLocalStorage(THEME_MODE_KEY, prefersDarkMode ? 'dark' : 'light');
     const toggleTheme = () => {

package/dist/src/index.d.ts

@@ -1,6 +1,10 @@
 export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
+export { default as ThemeModeProvider } from './providers/ThemeModeProvider';
+export { ThemeModeContext, useThemeModeContext } from './providers/ThemeModeProvider';
+export type { ThemeModeContextType, ThemeModeProviderProps } from './providers/ThemeModeProvider';
+export { default as LocalStorageThemeModeProvider } from './providers/LocalStorageThemeModeProvider';
+export { useLocalStorageThemeMode, THEME_MODE_KEY } from './hooks/useLocalStorageThemeMode';
 export type { WebProsMuiThemeProviderProps } from './providers/WebProsMuiThemeProvider';
-export { useThemeModeContext } from './providers/ThemeModeProvider';
 export { ToggleButtonGroup } from './components/inputs/ToggleButtonGroup';
 export { ToggleButton } from './components/inputs/ToggleButton';
 export { Filter } from './components/inputs/Filter';

package/dist/src/index.js

@@ -1,6 +1,9 @@
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 export { default as WebProsMuiThemeProvider } from './providers/WebProsMuiThemeProvider';
-export { useThemeModeContext } from './providers/ThemeModeProvider';
+export { default as ThemeModeProvider } from './providers/ThemeModeProvider';
+export { ThemeModeContext, useThemeModeContext } from './providers/ThemeModeProvider';
+export { default as LocalStorageThemeModeProvider } from './providers/LocalStorageThemeModeProvider';
+export { useLocalStorageThemeMode, THEME_MODE_KEY } from './hooks/useLocalStorageThemeMode';
 export { ToggleButtonGroup } from './components/inputs/ToggleButtonGroup';
 export { ToggleButton } from './components/inputs/ToggleButton';
 export { Filter } from './components/inputs/Filter';

package/dist/src/providers/LocalStorageThemeModeProvider.d.ts

@@ -0,0 +1,5 @@
+export type LocalStorageThemeModeProviderProps = {
+    children?: React.ReactNode;
+};
+declare const LocalStorageThemeModeProvider: ({ children }: LocalStorageThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default LocalStorageThemeModeProvider;

package/dist/src/providers/LocalStorageThemeModeProvider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 2025 WebPros International GmbH. All rights reserved.
+import { useMemo } from 'react';
+import { useLocalStorageThemeMode } from '../hooks/useLocalStorageThemeMode';
+import { ThemeModeProvider } from '../index';
+const LocalStorageThemeModeProvider = ({ children }) => {
+    const [value, toggleTheme, setValue] = useLocalStorageThemeMode();
+    const contextValue = useMemo(() => ({
+        themeMode: value,
+        toggleTheme,
+        setThemeMode: setValue,
+    }), [value, toggleTheme, setValue]);
+    return _jsx(ThemeModeProvider, Object.assign({}, contextValue, { children: children }));
+};
+export default LocalStorageThemeModeProvider;

package/dist/src/providers/ThemeModeProvider.d.ts

@@ -6,8 +6,11 @@ export type ThemeModeContextType = {
 };
 export type ThemeModeProviderProps = {
     children?: React.ReactNode;
+    themeMode?: ThemeMode;
+    toggleTheme?: () => void;
+    setThemeMode?: (mode: ThemeMode) => void;
 };
 export declare const ThemeModeContext: import("react").Context<ThemeModeContextType>;
-declare const ThemeModeProvider: ({ children }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const ThemeModeProvider: ({ children, themeMode, toggleTheme, setThemeMode, }: ThemeModeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default ThemeModeProvider;
 export declare const useThemeModeContext: () => ThemeModeContextType;

package/dist/src/providers/ThemeModeProvider.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
 import { createContext, useContext, useMemo } from 'react';
-import { useThemeMode } from '../hooks/useThemeMode';
 export const ThemeModeContext = createContext({
     themeMode: 'light',
     toggleTheme: () => { },
     setThemeMode: () => { },
 });
-const ThemeModeProvider = ({ children }) => {
-    const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
-    const value = useMemo(() => ({ themeMode, toggleTheme, setThemeMode }), [themeMode, toggleTheme, setThemeMode]);
+const ThemeModeProvider = ({ children, themeMode = 'light', toggleTheme, setThemeMode, }) => {
+    const value = useMemo(() => ({
+        themeMode,
+        toggleTheme: toggleTheme !== null && toggleTheme !== void 0 ? toggleTheme : (() => { }),
+        setThemeMode: setThemeMode !== null && setThemeMode !== void 0 ? setThemeMode : (() => { }),
+    }), [themeMode, toggleTheme, setThemeMode]);
     return _jsx(ThemeModeContext.Provider, { value: value, children: children });
 };
 export default ThemeModeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.d.ts

@@ -1,10 +1,8 @@
 import { Localization } from '@mui/material/locale';
-import { ThemeMode } from '../tokens/ThemeMode';
 import { ThemeOptions, Theme } from '@mui/material';
 import { M3Components } from '../utils';
 export type WebProsMuiThemeProviderProps = {
     children?: React.ReactNode;
-    themeMode?: ThemeMode;
     localization?: Localization;
     /**
      * Modifier function to customize theme foundation (palette, typography, spacing, etc.).
@@ -21,5 +19,5 @@ export type WebProsMuiThemeProviderProps = {
      */
     themeComponentsModifier?: (options: M3Components, theme: Theme) => M3Components;
 };
-declare const WebProsMuiThemeProvider: ({ children, localization, themeMode, themeOptionsModifier, themeComponentsModifier, }: WebProsMuiThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const WebProsMuiThemeProvider: ({ children, localization, themeOptionsModifier, themeComponentsModifier, }: WebProsMuiThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default WebProsMuiThemeProvider;

package/dist/src/providers/WebProsMuiThemeProvider.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import ThemeModeProvider from './ThemeModeProvider';
 import WebProsTheme from './WebProsTheme';
-const WebProsMuiThemeProvider = ({ children, localization, themeMode, themeOptionsModifier, themeComponentsModifier, }) => (_jsx(ThemeModeProvider, { children: _jsx(WebProsTheme, { mode: themeMode, localization: localization, themeOptionsModifier: themeOptionsModifier, themeComponentsModifier: themeComponentsModifier, children: children }) }));
+const WebProsMuiThemeProvider = ({ children, localization, themeOptionsModifier, themeComponentsModifier, }) => (_jsx(WebProsTheme, { localization: localization, themeOptionsModifier: themeOptionsModifier, themeComponentsModifier: themeComponentsModifier, children: children }));
 export default WebProsMuiThemeProvider;

package/dist/src/providers/WebProsTheme.d.ts

@@ -1,11 +1,9 @@
 import { ThemeOptions, Theme } from '@mui/material';
 import '../utils/getMUIThemeCustoimzationType';
 import { M3Components } from '../utils/getMUIComponents';
-import { ThemeMode } from '../tokens/ThemeMode';
 import { Localization } from '@mui/material/locale';
 type WebProsThemeProps = {
     children?: React.ReactNode;
-    mode?: ThemeMode;
     localization?: Localization;
     /**
      * Modifier function for theme foundation (palette, typography, spacing, etc.).
@@ -24,5 +22,5 @@ type WebProsThemeProps = {
      */
     themeComponentsModifier?: (options: M3Components, theme: Theme) => M3Components;
 };
-export declare const WebProsTheme: ({ children, mode, localization, themeOptionsModifier, themeComponentsModifier, }: WebProsThemeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const WebProsTheme: ({ children, localization, themeOptionsModifier, themeComponentsModifier, }: WebProsThemeProps) => import("react/jsx-runtime").JSX.Element;
 export default WebProsTheme;

package/dist/src/providers/WebProsTheme.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2025 WebPros International GmbH. All rights reserved.
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import { CssBaseline, createTheme, ThemeProvider } from '@mui/material';
 import { deepmerge } from '@mui/utils';
-import { ThemeModeContext } from '../providers/ThemeModeProvider';
 import '../utils/getMUIThemeCustoimzationType';
 import { getMUIPalette } from '../utils/getMUIPalette';
 import { getMUIComponents } from '../utils/getMUIComponents';
@@ -11,9 +10,9 @@ import { enUS } from '@mui/material/locale';
 import { patchMUIShadows } from '../utils/patchMUIShadows';
 import { ThemeSchemeDefault } from '../tokens/ThemeScheme';
 import { getMUITypography } from '../utils/getMUITypography';
-export const WebProsTheme = ({ children, mode, localization = enUS, themeOptionsModifier, themeComponentsModifier, }) => {
-    const themeModeContext = useContext(ThemeModeContext);
-    const themeMode = mode !== null && mode !== void 0 ? mode : themeModeContext.themeMode;
+import { useThemeModeContext } from '../providers/ThemeModeProvider';
+export const WebProsTheme = ({ children, localization = enUS, themeOptionsModifier, themeComponentsModifier, }) => {
+    const { themeMode } = useThemeModeContext();
     const webprosTheme = useMemo(() => {
         const typography = getMUITypography();
         const muiPalette = getMUIPalette(themeMode, ThemeSchemeDefault);

package/dist/src/tokens/index.d.ts

@@ -1,3 +1,4 @@
+export type { ThemeMode } from './ThemeMode';
 export type { TypescaleTypographyVariants } from './typography';
 export { typographyVariants } from './typography';
 export type { M3ShadowLayer, M3ShadowTokenName, M3ShadowTokens } from './shadows';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webpros/mui-theme",
   "description": "MUI v7 theme for WebPros products",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -114,4 +114,4 @@
   "resolutions": {
     "react-is": "^18.3.1"
   }
-}
+}

package/dist/src/hooks/useThemeMode.d.ts

@@ -1,3 +0,0 @@
-import { ThemeMode } from '../tokens/ThemeMode';
-export declare const THEME_MODE_KEY = "ThemeModeKey";
-export declare const useThemeMode: () => readonly [ThemeMode, () => void, import("react").Dispatch<import("react").SetStateAction<ThemeMode>>];