@nex-ui/system/dist/esm/systemProvider/SystemProvider.mjs

A lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.

import { jsx, jsxs } from 'react/jsx-runtime';
import { useMemo } from 'react';
import { Global } from '@emotion/react';
import { merge } from '@nex-ui/utils';
import { createSystem } from '../system.mjs';
import { InnerSystemProvider } from './SystemContext.mjs';
import { createGetColorSchemeSelector, ColorSchemeProvider } from '../colorScheme/ColorSchemeProvider.mjs';

const SystemProvider = ({ children, prefix, aliases, tokens, semanticTokens, scales, breakpoints, selectors, colorSchemeNode, forcedMode, cssCascadeLayersDisabled = false, defaultMode = 'system', modeStorageKey = 'color-scheme', colorSchemeSelector = 'data' })=>{
    const getColorSchemeSelector = useMemo(()=>createGetColorSchemeSelector(colorSchemeSelector), [
        colorSchemeSelector
    ]);
    const { css, getGlobalCssVars, layers } = useMemo(()=>{
        return createSystem({
            prefix,
            aliases,
            tokens,
            semanticTokens,
            scales,
            breakpoints,
            cssCascadeLayersDisabled,
            selectors: {
                ...selectors,
                dark: getColorSchemeSelector('dark'),
                light: getColorSchemeSelector('light')
            }
        });
    }, [
        aliases,
        breakpoints,
        prefix,
        cssCascadeLayersDisabled,
        getColorSchemeSelector,
        scales,
        selectors,
        semanticTokens,
        tokens
    ]);
    const globalStyles = useMemo(()=>{
        const cssVarMap = getGlobalCssVars();
        const result = cssCascadeLayersDisabled ? {} : {
            [layers.atRules]: {}
        };
        cssVarMap.forEach((value, key)=>{
            const cssVar = Object.fromEntries(value.entries());
            if (key === 'base') {
                merge(result, layers.wrapWithLayer('global', {
                    ':root': cssVar
                }));
                return;
            }
            merge(result, layers.wrapWithLayer('global', {
                [getColorSchemeSelector(key)]: {
                    ':root': {
                        colorScheme: key,
                        ...cssVar
                    }
                }
            }));
        });
        return result;
    }, [
        cssCascadeLayersDisabled,
        getColorSchemeSelector,
        getGlobalCssVars,
        layers
    ]);
    const methods = useMemo(()=>({
            css: (styles)=>css(layers.wrapWithLayer('css', styles)),
            layers
        }), [
        css,
        layers
    ]);
    return /*#__PURE__*/ jsx(InnerSystemProvider, {
        value: methods,
        children: /*#__PURE__*/ jsxs(ColorSchemeProvider, {
            forcedMode: forcedMode,
            defaultMode: defaultMode,
            modeStorageKey: modeStorageKey,
            colorSchemeSelector: colorSchemeSelector,
            colorSchemeNode: colorSchemeNode,
            children: [
                /*#__PURE__*/ jsx(Global, {
                    styles: globalStyles
                }),
                children
            ]
        })
    });
};
SystemProvider.displayName = 'SystemProvider';

export { SystemProvider };