import { Observable } from '@legendapp/state';
import { MaybeObservable, DeepMaybeObservable } from '@usels/core';
import { ConfigurableWindow } from '../../shared/configurable.mjs';
import { MaybeEventTarget } from '../../types.mjs';

interface UseCssVarOptions extends ConfigurableWindow {
    initialValue?: string;
    /**
     * Use MutationObserver to monitor variable changes
     * @default false
     */
    observe?: boolean;
}
type UseCssVarReturn = Observable<string>;
/**
 * Framework-agnostic reactive CSS custom property (CSS variable) tracker.
 *
 * Creates an `Observable<string>` that reflects (and writes back to) a CSS
 * custom property on a DOM element. Reactive inputs (`prop`, `target`, and
 * options) propagate through `observe()` — the old property is cleaned off
 * the previous element before the new one is written.
 *
 * Must be called inside a `useScope` factory.
 */
declare function createCssVar(prop: MaybeObservable<string | null | undefined>, target?: MaybeEventTarget, options?: DeepMaybeObservable<UseCssVarOptions>): UseCssVarReturn;

export { type UseCssVarOptions, type UseCssVarReturn, createCssVar };