@equinor/fusion-react-styles/dist/ThemeProvider.d.ts

style lib inspired by @material-ui/styles

import { type ReactNode } from 'react';
import type { ReactElement } from 'react';
import type { FusionTheme } from './theme';
import '@equinor/fusion-wc-theme';
import type ThemeElement from '@equinor/fusion-wc-theme';
declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            'fwc-theme': React.DetailedHTMLProps<React.HTMLAttributes<ThemeElement>, ThemeElement>;
        }
    }
}
/**
 * Props for the ThemeProvider component
 *
 * @template T - Extended theme type that extends FusionTheme
 */
export interface ThemeProviderProps<T extends FusionTheme = FusionTheme> {
    /** Child components that will receive the theme context */
    children?: ReactNode;
    /** Theme object or function that receives outer theme and returns new theme */
    theme?: T | Partial<T> | ((outerTheme: T | null) => T);
}
/**
 * Provides theme values to child components
 *
 * This component wraps children with a theme context and the fwc-theme web component.
 * When nested, the theme can be a function that receives the outer theme and returns
 * a merged or customized theme.
 *
 * Supports extending FusionTheme with custom properties for application-specific themes.
 *
 * @template T - Extended theme type that extends FusionTheme
 * @param props - Theme provider configuration
 * @returns A React element that provides theme context to children
 *
 * @example
 * ```tsx
 * <ThemeProvider theme={myTheme}>
 *   <App />
 * </ThemeProvider>
 * ```
 *
 * @example
 * ```tsx
 * // Nested theme with function
 * <ThemeProvider theme={baseTheme}>
 *   <ThemeProvider theme={(outer) => ({ ...outer, custom: true })}>
 *     <App />
 *   </ThemeProvider>
 * </ThemeProvider>
 * ```
 *
 * @example
 * ```tsx
 * // Extended theme with custom properties
 * interface MyAppTheme extends FusionTheme {
 *   customProperty: string;
 * }
 *
 * const extendedTheme: MyAppTheme = {
 *   ...theme,
 *   customProperty: 'value'
 * };
 *
 * <ThemeProvider<MyAppTheme> theme={extendedTheme}>
 *   <App />
 * </ThemeProvider>
 * ```
 */
export declare function ThemeProvider<T extends FusionTheme = FusionTheme>(props: ThemeProviderProps<T>): ReactElement;
export declare namespace ThemeProvider {
    var displayName: string;
}
/**
 * Hook to access the current theme from ThemeProvider context
 *
 * Supports extended themes that extend FusionTheme. When used with an extended theme,
 * the generic type parameter should match the theme type used in ThemeProvider.
 *
 * @template Theme - The type of the theme (defaults to FusionTheme, but can be extended)
 * @returns The current theme value or null if no ThemeProvider is present
 *
 * @example
 * ```tsx
 * function Component() {
 *   const theme = useTheme();
 *   if (!theme) {
 *     return <div>No theme available</div>;
 *   }
 *   return (
 *     <div style={{
 *       color: theme.colors.text.static_icons__default.getVariable('color')
 *     }}>
 *       Hello
 *     </div>
 *   );
 * }
 * ```
 *
 * @example
 * ```tsx
 * // With extended theme type
 * interface MyAppTheme extends FusionTheme {
 *   customProperty: string;
 * }
 *
 * function Component() {
 *   const theme = useTheme<MyAppTheme>();
 *   return <div>{theme?.customProperty}</div>;
 * }
 * ```
 */
export declare function useTheme<Theme extends FusionTheme = FusionTheme>(): Theme | null;
export default ThemeProvider;
//# sourceMappingURL=ThemeProvider.d.ts.map