@unicity/design-system/dist/theme/ThemeProvider.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useState, useEffect } from 'react';
import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import { CssBaseline } from '@mui/material';
import { getTheme } from './theme';
const ThemeContext = createContext(undefined);
// Theme persistence helper
const getStoredTheme = () => {
    if (typeof window !== 'undefined') {
        const stored = localStorage.getItem('unicity-theme');
        if (stored && ['light', 'dark', 'neumorphism-light', 'neumorphism-dark'].includes(stored)) {
            return stored;
        }
    }
    return 'light';
};
const setStoredTheme = (theme) => {
    if (typeof window !== 'undefined') {
        localStorage.setItem('unicity-theme', theme);
    }
};
export const ThemeProvider = ({ children, defaultMode, mode: controlledMode, }) => {
    const [mode, setMode] = useState(() => {
        return getStoredTheme() || defaultMode || 'light';
    });
    // Use controlled mode if provided, otherwise use internal state
    const effectiveMode = controlledMode !== undefined ? controlledMode : mode;
    // Only persist if not controlled
    useEffect(() => {
        if (controlledMode === undefined) {
            setStoredTheme(mode);
        }
    }, [mode, controlledMode]);
    const toggleTheme = () => {
        setMode((prevMode) => {
            switch (prevMode) {
                case 'light':
                    return 'dark';
                case 'dark':
                    return 'neumorphism-light';
                case 'neumorphism-light':
                    return 'neumorphism-dark';
                case 'neumorphism-dark':
                    return 'light';
                default:
                    return 'light';
            }
        });
    };
    const setTheme = (newMode) => {
        setMode(newMode);
    };
    const theme = getTheme(effectiveMode);
    return (_jsx(ThemeContext.Provider, { value: { mode: effectiveMode, toggleTheme, setTheme }, children: _jsxs(MuiThemeProvider, { theme: theme, children: [_jsx(CssBaseline, {}), children] }) }));
};
export const useTheme = () => {
    const context = useContext(ThemeContext);
    if (!context) {
        throw new Error('useTheme must be used within a ThemeProvider');
    }
    return context;
};
//# sourceMappingURL=ThemeProvider.js.map