import { Observable } from '@legendapp/state';
import { DeepMaybeObservable } from '@usels/core';
import { MaybeEventTarget } from '../../types.mjs';

interface UseElementSizeOptions {
    box?: "content-box" | "border-box" | "device-pixel-content-box";
}
interface UseElementSizeReturn {
    width$: Observable<number>;
    height$: Observable<number>;
    stop: () => void;
}
/**
 * Framework-agnostic reactive element size tracker.
 *
 * Tracks the width and height of a DOM element using `ResizeObserver`.
 * SVG elements use `getBoundingClientRect()` as fallback.
 *
 * @param target - Element to observe (Ref$, Observable element, Document, Window, or null).
 * @param initialSize - Initial size values. Default `{ width: 0, height: 0 }`.
 * @param options - Optional box model option.
 * @returns `{ width$, height$, stop }` — reactive size observables and manual stop.
 */
declare function createElementSize(target: MaybeEventTarget, initialSize?: {
    width: number;
    height: number;
}, options?: DeepMaybeObservable<UseElementSizeOptions>): UseElementSizeReturn;

export { type UseElementSizeOptions, type UseElementSizeReturn, createElementSize };