import { type MaybePromise } from '@augment-vir/common';
import { type PartInfo } from '../../lit-exports/all-lit-exports.js';
/**
 * Callback called by the {@link onResize} directive.
 *
 * @category Internal
 */
export type OnResizeCallback = (size: Readonly<Pick<ResizeObserverEntry, 
/** Only these two properties are supported in all major modern browsers */
'target' | 'contentRect'>>, element: Element) => MaybePromise<void>;
/**
 * A directive that fires its listener any time the element that it's attached to is resized. This
 * uses the [built-in `ResizeObserver`
 * API](https://developer.mozilla.org/docs/Web/API/ResizeObserver), so it is very efficient.
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, onResize} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render() {
 *         return html`
 *             <div
 *                 ${onResize((size, element) => {
 *                     console.log('resized!', element, size);
 *                 })}
 *             >
 *                 Some div
 *             </div>
 *         `;
 *     },
 * });
 * ```
 */
export declare const onResize: (callback: OnResizeCallback) => import("lit-html/directive.js").DirectiveResult<{
    new (partInfo: PartInfo): {
        element: Element | undefined;
        readonly resizeObserver: ResizeObserver;
        callback: OnResizeCallback | undefined;
        update(partInfo: PartInfo, [callback]: [OnResizeCallback]): undefined;
        render(callback: OnResizeCallback): undefined;
        disconnected(): void;
        reconnected(): void;
        isConnected: boolean;
        _$initialize(part: import("lit-html").Part, parent: import("lit-html").Disconnectable, attributeIndex: number | undefined): void;
        setValue(value: unknown): void;
        get _$isConnected(): boolean;
    };
}>;
/**
 * A function that attaches a
 * [`ResizeObserver`](https://developer.mozilla.org/docs/Web/API/ResizeObserver) to any given
 * element, so it is very efficient.
 *
 * @category Directives
 * @example
 *
 * ```ts
 * import {html, defineElement, attachOnResize} from 'element-vir';
 *
 * const MyElement = defineElement()({
 *     tagName: 'my-element',
 *     render({host}) {
 *         attachOnResize(host, (size, element) => {
 *             console.log('resized!', element, size);
 *         });
 *
 *         return '';
 *     },
 * });
 * ```
 */
export declare function attachOnResize(element: Element, callback: OnResizeCallback): {
    resizeObserver: ResizeObserver;
    element: Element;
};