import { ReactNode, ElementType } from 'react';
import { ThemeContext } from '../client.js';
import { Attribute } from '../client.js';

interface ScopedThemeProps<T extends string = string> {
    /** The theme to apply to this sub-tree. */
    theme: T;
    children?: ReactNode;
    /** Element tag to render (defaults to `'div'`). */
    as?: ElementType;
    /** Attribute to apply: class, data-* or array. Default `'class'`. */
    attribute?: Attribute | Attribute[];
    /** Map of logical theme → attribute value. */
    value?: Record<string, string>;
    className?: string;
    style?: React.CSSProperties;
    /**
     * Set `color-scheme` on the wrapper when the scoped theme is `light` or
     * `dark`, so native controls and scrollbars inside match it. Default: `true`.
     */
    enableColorScheme?: boolean;
}
/**
 * Apply a theme to a sub-tree without affecting the page root. Inside this
 * wrapper, `useTheme()` reports the scoped theme and `setTheme` is a no-op.
 * Useful for previews, modals with reversed color-schemes, or embedded widgets.
 *
 * Unlike the top-level `ThemeProvider`, there is no storage, no script, and
 * no DOM root mutation — only a wrapper element with the appropriate
 * attribute(s) and an overriding React context.
 */
declare function makeScopedTheme(Context: ThemeContext): <T extends string = string>({ theme, children, as: Component, attribute, value, className, style, enableColorScheme, ...rest }: ScopedThemeProps<T> & Record<string, unknown>) => React.JSX.Element;
declare const ScopedTheme: <T extends string = string>({ theme, children, as: Component, attribute, value, className, style, enableColorScheme, ...rest }: ScopedThemeProps<T> & Record<string, unknown>) => React.JSX.Element;

export { ScopedTheme, makeScopedTheme };
export type { ScopedThemeProps };