import { Popover as HeadlessPopover, PopoverBackdrop as HeadlessPopoverBackdrop, PopoverGroup as HeadlessPopoverGroup, PopoverPanel as HeadlessPopoverPanel } from '@headlessui/react';
import React from 'react';
import type { RefObject } from 'react';
import type { ExtractProps, RenderProps } from '../../util/utility-types';
export type PopoverProps = ExtractProps<typeof HeadlessPopover> & {
    /**
     * Custom classname for additional styles
     */
    className?: string;
};
export type PopoverContentProps = ExtractProps<typeof HeadlessPopoverPanel> & {
    /**
     * Custom classname for additional styles for the arrow.
     */
    arrowClassName?: string;
    /**
     * Custom classname for additional styles on the generic popover container.
     */
    bodyClassName?: string;
    /**
     * Custom classname for additional styles for the entire popover content.
     */
    className?: string;
} & RenderProps<{
    /**
     * Render prop indicating popover open status.
     */
    open: boolean;
    /**
     * Render prop that closes popover when called.
     */
    close: (focusableElement?: HTMLElement | RefObject<HTMLElement>) => void;
}>;
export type PopoverButtonProps = {
    as?: React.ElementType;
    className?: string;
} & RenderProps<{
    open: boolean;
}>;
/**
 * `import {Popover} from "@chanzuckerberg/eds";`
 *
 * General-purpose floating containers that appear proximal to a trigger point.
 *
 * @see https://headlessui.com/react/popover
 */
export declare const Popover: {
    ({ ...other }: PopoverProps): React.JSX.Element;
    displayName: string;
    /**
     * A button that when clicked, can show or hide the Popover Menu
     * (Product teams can decide how a Popover will close, if it is on click, release, hover, etc.)
     *
     * If you need to use some sort of special button, pass it as the `as` prop. Make sure the
     * component accepts `aria-expanded` and `aria-controls` props for accessibility.
     *
     */
    Button: {
        (props: PopoverButtonProps): React.JSX.Element;
        displayName: string;
    };
    /**
     * A floating container that can be resized to fit content inside
     */
    Content: {
        ({ anchor, arrowClassName, bodyClassName, children, className, ...other }: PopoverContentProps): React.JSX.Element;
        displayName: string;
    };
    Overlay: {
        (props: ExtractProps<typeof HeadlessPopoverBackdrop>): React.JSX.Element;
        displayName: string;
    };
    Group: {
        (props: ExtractProps<typeof HeadlessPopoverGroup>): React.JSX.Element;
        displayName: string;
    };
};