@nex-ui/react/dist/esm/components/provider/Provider.mjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
import { jsx } from 'react/jsx-runtime';
import { SystemProvider, mergeRecipeConfigs, useSystem } from '@nex-ui/system';
import { useMemo } from 'react';
import { mergeWith } from '@nex-ui/utils';
import { defaultConfig } from '../../theme/preset.mjs';
import { useNexUI, DEFAULT_CONTEXT_VALUE, NexContextProvider } from './Context.mjs';

function InnerProvider({ components, prefix, children, primaryThemeColor = 'blue' }) {
    const { css } = useSystem();
    const contextValue = useMemo(()=>({
            components,
            prefix,
            css,
            primaryThemeColor
        }), [
        components,
        css,
        prefix,
        primaryThemeColor
    ]);
    return /*#__PURE__*/ jsx(NexContextProvider, {
        value: contextValue,
        children: children
    });
}
InnerProvider.displayName = 'InnerProvider';
function TopLevelProvider(props) {
    const { theme, children, colorScheme, prefix = 'nui' } = props;
    const systemProviderProps = useMemo(()=>{
        return {
            cssVarsPrefix: prefix,
            scales: theme?.scales ?? defaultConfig.scales,
            selectors: theme?.selectors ?? defaultConfig.selectors,
            aliases: theme?.aliases ?? defaultConfig.aliases,
            tokens: theme?.tokens ?? defaultConfig.tokens,
            semanticTokens: theme?.semanticTokens ?? defaultConfig.semanticTokens,
            breakpoints: theme?.breakpoints ?? defaultConfig.breakpoints,
            colorSchemeNode: colorScheme?.colorSchemeNode,
            modeStorageKey: colorScheme?.modeStorageKey ?? `${prefix}-color-scheme`,
            colorSchemeSelector: colorScheme?.colorSchemeSelector ?? `data-${prefix}-color-scheme`,
            forcedMode: colorScheme?.forcedMode,
            defaultMode: colorScheme?.defaultMode ?? 'light'
        };
    }, [
        prefix,
        theme?.scales,
        theme?.selectors,
        theme?.aliases,
        theme?.tokens,
        theme?.semanticTokens,
        theme?.breakpoints,
        colorScheme
    ]);
    return /*#__PURE__*/ jsx(SystemProvider, {
        ...systemProviderProps,
        children: /*#__PURE__*/ jsx(InnerProvider, {
            components: theme?.components,
            primaryThemeColor: theme?.primaryThemeColor,
            prefix: prefix,
            children: children
        })
    });
}
TopLevelProvider.displayName = 'TopLevelProvider';
function NestedProvider(props) {
    const { theme, children } = props;
    const ctx = useNexUI();
    const mergedComponents = useMemo(()=>{
        return mergeWith({}, ctx.components, theme?.components, (target, source, key)=>{
            if (key === 'styleOverrides') {
                return mergeRecipeConfigs(target, source);
            }
            if (key === 'defaultProps') {
                return {
                    ...target,
                    ...source
                };
            }
        });
    }, [
        theme?.components,
        ctx.components
    ]);
    return /*#__PURE__*/ jsx(InnerProvider, {
        prefix: ctx.prefix,
        components: mergedComponents,
        primaryThemeColor: theme?.primaryThemeColor ?? ctx.primaryThemeColor,
        children: children
    });
}
NestedProvider.displayName = 'NestedProvider';
function NexUIProvider(props) {
    const outer = useNexUI();
    const isTopLevel = outer === DEFAULT_CONTEXT_VALUE;
    return isTopLevel ? /*#__PURE__*/ jsx(TopLevelProvider, {
        ...props
    }) : /*#__PURE__*/ jsx(NestedProvider, {
        ...props
    });
}
NexUIProvider.displayName = 'NexUIProvider';

export { NexUIProvider };