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; /** * Reactive node that applies the current theme appearance as a CSS class * (`'dark'` or `'light'`) on the `` element via a Portal. * This aligns with Tailwind CSS's built-in `dark:` variant which expects * a `dark` class on ``. * * @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/core").Renderable;