@ai-growth/nextjs/dist/components/ThemeProvider.d.ts

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

import React, { ReactNode } from 'react';
import { type CmsTheme } from './CmsProvider';
import { type ThemeAdapterOptions, type ThemeAccessor as ThemeAccessorType } from '../utils/themeAdapters';
export interface ThemeProviderProps {
    /** Theme configuration object */
    theme: CmsTheme;
    /** Child components */
    children: ReactNode;
    /** CSS selector to apply theme variables to (default: ':root') */
    selector?: string;
    /** Custom CSS prefix for theme variables (default: '--cms') */
    cssPrefix?: string;
    /** Additional CSS custom properties to merge with theme */
    customProperties?: Record<string, string>;
    /** Theme adapter options */
    adapterOptions?: Omit<ThemeAdapterOptions, 'cssPrefix'>;
    /** Whether to inject theme variables as inline styles (default: false) */
    inline?: boolean;
    /** Custom CSS class name for the theme container */
    className?: string;
    /** Whether to enable smooth transitions when theme changes */
    enableTransitions?: boolean;
}
export interface ThemeContextValue {
    theme: CmsTheme;
    accessor: ThemeAccessorType;
    cssPrefix: string;
    customProperties: Record<string, string>;
}
export declare const ThemeContext: React.Context<ThemeContextValue | null>;
/**
 * Enhanced ThemeProvider component that injects CSS custom properties
 * and provides theme accessor utilities
 */
export declare function ThemeProvider({ theme, children, selector, cssPrefix, customProperties, adapterOptions, inline, className, enableTransitions, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
/**
 * Hook to access theme context with type safety
 */
export declare function useThemeContext(): ThemeContextValue;
/**
 * Hook to access theme accessor utilities
 */
export declare function useThemeAccessor(): ThemeAccessorType;
/**
 * Hook to get theme values with built-in fallbacks
 */
export declare function useThemeValue(): {
    color: (key: string, fallback?: string) => import("../utils").ThemeValue;
    spacing: (key: string, fallback?: string) => import("../utils").ThemeValue;
    typography: (category: string, key: string, fallback?: string) => import("../utils").ThemeValue;
    borderRadius: (key: string, fallback?: string) => import("../utils").ThemeValue;
    shadow: (key: string, fallback?: string) => import("../utils").ThemeValue;
    breakpoint: (key: string, fallback?: string) => import("../utils").ThemeValue;
    cssVar: (category: string, key: string) => string;
    cssVarWithFallback: (category: string, key: string, fallback: string) => string;
};
/**
 * Lightweight ThemeProvider for CSS-only applications
 * (no React Context, just CSS injection)
 */
export declare function CssOnlyThemeProvider({ theme, children, selector, cssPrefix, customProperties, adapterOptions, enableTransitions, }: Omit<ThemeProviderProps, 'inline'>): import("react/jsx-runtime").JSX.Element;
/**
 * Higher-order component to wrap components with ThemeProvider
 */
export declare function withTheme<P extends object>(Component: React.ComponentType<P>, themeProviderProps: Omit<ThemeProviderProps, 'children'>): {
    (props: P): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
export default ThemeProvider;
//# sourceMappingURL=ThemeProvider.d.ts.map