import { type RefCallback } from "react";
import { type ElementSize, type UseStateInitializer } from "./types.js";
import { type ResizeObserverHookOptions } from "./useResizeObserver.js";
/**
 * @since 6.0.0
 */
export interface ElementSizeOptions<E extends HTMLElement> extends Omit<ResizeObserverHookOptions<E>, "onUpdate"> {
    /** @defaultValue `{ height: 0, width: 0 }` */
    defaultValue?: UseStateInitializer<ElementSize>;
}
/**
 * @since 6.0.0
 */
export interface ElementSizeImplementation<E extends HTMLElement> extends ElementSize {
    elementRef: RefCallback<E>;
    /**
     * This will be `true` once the resize observer's callback is triggered at
     * least once.
     *
     * This was added so that generating custom properties that have a reasonable
     * default value set in css don't cause major layout shifts when a default
     * value cannot be provided.
     *
     * @example
     * ```tsx
     * const { height, width, observedOnce } = useElementSize();
     * useCSSVariables(useMemo(() => {
     *   if (!observedOnce) {
     *     return []
     *   }
     *
     *   // something that uses the element's height, width, or both
     *   return [{ var: "--something", value: height / width * 0.5 }];
     * }, [height, width, observedOnce]));
     * ```
     */
    observedOnce: boolean;
}
/**
 * A small wrapper around the {@link useResizeObserver} hook to calculate the
 * element's size.
 *
 * @example Simple Example
 * ```tsx
 * import { useElementSize } from "@react-md/core/useElementSize";
 * import { type ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const { height, width, elementRef } = useElementSize();
 *
 *   return (
 *     <div ref={elementRef}>
 *       {`height: ${height}, width: ${width}`}
 *     </div>
 *   );
 * }
 * ```
 *
 * @since 6.0.0
 */
export declare function useElementSize<E extends HTMLElement>(options?: ElementSizeOptions<E>): ElementSizeImplementation<E>;