import { type ReactNode, type FC } from "react";
/**
 * Configuration options for the Document Picture-in-Picture window.
 */
export interface UsePipOptions {
    /** The initial width of the PIP window in pixels. */
    width?: number;
    /** The initial height of the PIP window in pixels. */
    height?: number;
}
/**
 * Return type for the usePip hook, containing state and control methods.
 */
export interface UsePipResult {
    /** True if the browser supports the Document Picture-in-Picture API. */
    isSupported: boolean;
    /** True if the PIP window is currently open. */
    isOpen: boolean;
    /**
     * Opens a new Picture-in-Picture window with the specified options.
     * Automatically copies stylesheets from the main document into the PIP window.
     * @param {UsePipOptions} [options] - Configuration options like width and height.
     * @returns {Promise<Window | undefined>} A promise resolving to the newly created PIP Window, or undefined if unsupported.
     */
    openPip: (options?: UsePipOptions) => Promise<Window | undefined>;
    /** Closes the currently active Picture-in-Picture window, if one exists. */
    closePip: () => void;
    /**
     * A React component that seamlessly portals its children into the PIP window.
     * Captures `width` and `height` options when passed as props.
     * Returns `null` if the PIP window is not currently open.
     */
    Pip: FC<UsePipOptions & {
        children: ReactNode;
    }>;
}
/**
 * Hook to portal React components into a separate Document Picture-in-Picture window.
 * It manages the lifecycle, styling inheritance, and state of the PIP window.
 *
 * @returns {UsePipResult} Object containing state and methods to manage the PIP window.
 *
 * @example
 * ```tsx
 * const { isSupported, isOpen, openPip, closePip, Pip } = usePip();
 *
 * return (
 *   <div>
 *     <button onClick={() => isOpen ? closePip() : openPip()}>
 *       {isOpen ? 'Close PIP' : 'Open PIP'}
 *     </button>
 *     <Pip width={300} height={300}>
 *       <MyComponent />
 *     </Pip>
 *   </div>
 * );
 * ```
 */
export declare function usePip(): UsePipResult;