@nex-ui/system/dist/cjs/systemProvider/SystemProvider.cjs

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

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var react$1 = require('@emotion/react');
var utils = require('@nex-ui/utils');
var system = require('../system.cjs');
var SystemContext = require('./SystemContext.cjs');
var ColorSchemeProvider = require('../colorScheme/ColorSchemeProvider.cjs');

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

exports.SystemProvider = SystemProvider;