import { Ref } from 'react';
import { Position } from '../types/global';
/**
 * Available modes for anchor and target elements.
 * Each mode corresponds to a specific HTML element type in the ElementTypeMap.
 */
type UseFloatingMode = "div" | "dialog" | "button";
/**
 * Map of UseFloatingMode strings to their corresponding HTML element types.
 */
type ElementTypeMap = {
    div: HTMLDivElement;
    dialog: HTMLDialogElement;
    button: HTMLButtonElement;
};
/**
 * Return type of the useFloating hook.
 *
 * Generic parameters:
 * - AnchorMode: The mode for the anchor element (defaults to "div")
 * - TargetMode: The mode for the target element (defaults to "div")
 *
 * Type inference:
 * - ElementTypeMap[AnchorMode] looks up the HTML element type for the anchor
 * - ElementTypeMap[TargetMode] looks up the HTML element type for the target
 *
 * @example
 * //If AnchorMode="div" and TargetMode="dialog", this resolves to:
 * {
 *   anchorRef: Ref<HTMLDivElement | null>
 *   targetRef: Ref<HTMLDialogElement | null>
 *   anchorWidth: number
 * }
 */
interface UseFloatingReturn<AnchorMode extends UseFloatingMode, TargetMode extends UseFloatingMode> {
    anchorRef: Ref<ElementTypeMap[AnchorMode] | null>;
    targetRef: Ref<ElementTypeMap[TargetMode] | null>;
    anchorWidth: number;
}
/**
 * Configuration options for the useFloating hook.
 *
 * Generic parameters:
 * - AnchorMode: Constrains anchorMode to valid UseFloatingMode values
 * - TargetMode: Constrains targetMode to valid UseFloatingMode values
 */
interface UseFloatingOptions {
    position?: Position;
    open: boolean;
}
/**
 * Custom hook to position a floating element (e.g., dropdowns, tooltips) relative to an anchor element.
 * It automatically updates the position on window resize, scroll, or content changes.
 *
 * Generic parameters:
 * - AnchorMode: Type of HTML element for the anchor (defaults to "div")
 * - TargetMode: Type of HTML element for the target (defaults to "div")
 *
 * @example
 * // Both refs default to HTMLDivElement
 * const { anchorRef, targetRef } = useFloating({ open: true, position: "bottom" })
 *
 * @example
 * // Anchor is HTMLDivElement, target is HTMLDialogElement
 * const { anchorRef, targetRef } = useFloating<"div", "dialog">({
 *   open: true,
 *   position: "bottom",
 * })
 */
declare function useFloating<AnchorMode extends UseFloatingMode = "div", TargetMode extends UseFloatingMode = "div">({ position, open, }: UseFloatingOptions): UseFloatingReturn<AnchorMode, TargetMode>;
export default useFloating;
//# sourceMappingURL=useFloating.d.ts.map