import type { MaybeRefOrGetter, Ref } from "vue";
import type { XyCleanup } from "../shared";
export type XyResponsiveBreakpoint = "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | "xxxl";
export interface XyElementSize {
    height: number;
    width: number;
}
export type XyResizeHandler = (size: XyElementSize, entry?: ResizeObserverEntry) => void;
export type XyMediaQueryHandler = (matches: boolean, event: MediaQueryList | MediaQueryListEvent) => void;
export interface XyUseElementSizeApi {
    height: Ref<number>;
    stop: XyCleanup;
    update: () => void;
    width: Ref<number>;
}
export interface XyUseMediaQueryApi {
    matches: Ref<boolean>;
    media: Ref<string>;
    refresh: () => void;
    stop: XyCleanup;
}
export declare const xyResponsiveBreakpointWidths: Record<XyResponsiveBreakpoint, number>;
export declare function getResponsiveBreakpointQuery(breakpoint: XyResponsiveBreakpoint): string;
export declare function getElementSize(element?: Element | null | undefined): XyElementSize;
export declare function observeElementResize(element: Element | null | undefined, handler: XyResizeHandler): XyCleanup;
export declare function observeMediaQuery(query: string | undefined, handler: XyMediaQueryHandler): XyCleanup;
export declare function useElementSize(target: MaybeRefOrGetter<Element | null | undefined>): XyUseElementSizeApi;
export declare function useMediaQuery(query: MaybeRefOrGetter<string | undefined>): XyUseMediaQueryApi;