@ai-growth/nextjs/dist/components/ThemeProvider.js

Seamlessly integrate Sanity CMS with Next.js applications for automated blog routing and rendering

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useMemo } from 'react';
import { createThemeAccessor, createCssVariablesAdapter } from '../utils/themeAdapters';
export const ThemeContext = React.createContext(null);
/**
 * Enhanced ThemeProvider component that injects CSS custom properties
 * and provides theme accessor utilities
 */
export function ThemeProvider({ theme, children, selector = ':root', cssPrefix = '--cms', customProperties = {}, adapterOptions = {}, inline = false, className, enableTransitions = false, }) {
    // Create theme accessor for child components
    const accessor = useMemo(() => {
        return createThemeAccessor(theme, cssPrefix);
    }, [theme, cssPrefix]);
    // Generate CSS custom properties from theme
    const cssVariables = useMemo(() => {
        const adapter = createCssVariablesAdapter(theme, {
            cssPrefix,
            ...adapterOptions,
        });
        const themeVars = adapter.toCssVariables();
        return { ...themeVars, ...customProperties };
    }, [theme, cssPrefix, customProperties, adapterOptions]);
    // Generate CSS string for injection
    const cssString = useMemo(() => {
        const declarations = Object.entries(cssVariables)
            .map(([property, value]) => `  ${property}: ${value};`)
            .join('\n');
        const transitionDeclaration = enableTransitions
            ? '  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n'
            : '';
        return `${selector} {\n${transitionDeclaration}${declarations}\n}`;
    }, [cssVariables, selector, enableTransitions]);
    // Context value
    const contextValue = useMemo(() => ({
        theme,
        accessor,
        cssPrefix,
        customProperties: cssVariables,
    }), [theme, accessor, cssPrefix, cssVariables]);
    // Inline styles for direct application
    const inlineStyles = useMemo(() => {
        if (!inline)
            return undefined;
        const styles = {};
        Object.entries(cssVariables).forEach(([property, value]) => {
            // Keep CSS custom properties as-is for inline styles
            styles[property] = value;
        });
        if (enableTransitions) {
            styles.transition = 'color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease';
        }
        return styles;
    }, [cssVariables, inline, enableTransitions]);
    return (_jsxs(ThemeContext.Provider, { value: contextValue, children: [!inline && (_jsx("style", { "data-theme-provider": "true", children: cssString })), _jsx("div", { className: className, style: inlineStyles, "data-theme-container": inline ? 'true' : undefined, children: children })] }));
}
/**
 * Hook to access theme context with type safety
 */
export function useThemeContext() {
    const context = React.useContext(ThemeContext);
    if (!context) {
        throw new Error('useThemeContext must be used within a ThemeProvider');
    }
    return context;
}
/**
 * Hook to access theme accessor utilities
 */
export function useThemeAccessor() {
    const { accessor } = useThemeContext();
    return accessor;
}
/**
 * Hook to get theme values with built-in fallbacks
 */
export function useThemeValue() {
    const { accessor } = useThemeContext();
    return {
        color: (key, fallback) => accessor.color(key, fallback),
        spacing: (key, fallback) => accessor.spacing(key, fallback),
        typography: (category, key, fallback) => accessor.typography(category, key, fallback),
        borderRadius: (key, fallback) => accessor.borderRadius(key, fallback),
        shadow: (key, fallback) => accessor.shadow(key, fallback),
        breakpoint: (key, fallback) => accessor.breakpoint(key, fallback),
        cssVar: (category, key) => accessor.cssVar(category, key),
        cssVarWithFallback: (category, key, fallback) => accessor.cssVarWithFallback(category, key, fallback),
    };
}
/**
 * Lightweight ThemeProvider for CSS-only applications
 * (no React Context, just CSS injection)
 */
export function CssOnlyThemeProvider({ theme, children, selector = ':root', cssPrefix = '--cms', customProperties = {}, adapterOptions = {}, enableTransitions = false, }) {
    const cssString = useMemo(() => {
        const adapter = createCssVariablesAdapter(theme, {
            cssPrefix,
            ...adapterOptions,
        });
        const themeVars = adapter.toCssVariables();
        const allVars = { ...themeVars, ...customProperties };
        const declarations = Object.entries(allVars)
            .map(([property, value]) => `  ${property}: ${value};`)
            .join('\n');
        const transitionDeclaration = enableTransitions
            ? '  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n'
            : '';
        return `${selector} {\n${transitionDeclaration}${declarations}\n}`;
    }, [theme, selector, cssPrefix, customProperties, adapterOptions, enableTransitions]);
    return (_jsxs(_Fragment, { children: [_jsx("style", { "data-css-only-theme-provider": "true", children: cssString }), children] }));
}
/**
 * Higher-order component to wrap components with ThemeProvider
 */
export function withTheme(Component, themeProviderProps) {
    const displayName = Component.displayName || Component.name || 'Component';
    const WithThemeComponent = (props) => (_jsx(ThemeProvider, { ...themeProviderProps, children: _jsx(Component, { ...props }) }));
    WithThemeComponent.displayName = `withTheme(${displayName})`;
    return WithThemeComponent;
}
export default ThemeProvider;