import { Provider } from '@tempots/dom';
import '../../styles/index.css';
import { AppearancePreference, ThemeValue } from './types';
/**
 * Configuration options for the Theme provider.
 */
export interface ThemeOptions {
    /** Initial appearance preference. Defaults to `'system'`. */
    defaultAppearance?: AppearancePreference;
    /** localStorage key for persisting appearance preference. Defaults to `'bui-appearance'`. */
    appearancePreferenceKey?: string;
}
/**
 * Theme provider that manages light/dark appearance mode.
 * Tracks system appearance, user preference, and persists settings to localStorage.
 * The resolved appearance is available as a reactive signal.
 *
 * @example
 * ```ts
 * import { Provide } from '@tempots/dom'
 * import { Theme } from '@tempots/beatui'
 *
 * Provide(Theme, { defaultAppearance: 'dark' },
 *   html.div({},
 *     html.p({}, 'Theme is active!')
 *   )
 * )
 * ```
 */
export declare const Theme: Provider<ThemeValue, ThemeOptions>;
/**
 * Reactive node that applies the current theme appearance as a CSS class
 * (`'dark'` or `'light'`) on the `<html>` element via a Portal.
 * This aligns with Tailwind CSS's built-in `dark:` variant which expects
 * a `dark` class on `<html>`.
 *
 * @returns A reactive Portal TNode
 *
 * @example
 * ```ts
 * import { html } from '@tempots/dom'
 * import { ThemeAppearance } from '@tempots/beatui'
 *
 * html.body(ThemeAppearance(),
 *   html.div({}, 'Content inherits theme appearance')
 * )
 * ```
 */
export declare const ThemeAppearance: () => import("@tempots/dom").Renderable;
