import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import { DrawerBodyProps } from '@fluentui/react-drawer';
import { DrawerBodySlots } from '@fluentui/react-drawer';
import { DrawerBodyState } from '@fluentui/react-drawer';
import { DrawerContextValue } from '@fluentui/react-drawer';
import { DrawerFooterProps } from '@fluentui/react-drawer';
import { DrawerFooterSlots } from '@fluentui/react-drawer';
import { DrawerFooterState as DrawerFooterState_2 } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationProps } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationSlots } from '@fluentui/react-drawer';
import { DrawerHeaderNavigationState } from '@fluentui/react-drawer';
import { DrawerHeaderProps } from '@fluentui/react-drawer';
import { DrawerHeaderSlots } from '@fluentui/react-drawer';
import { DrawerHeaderState as DrawerHeaderState_2 } from '@fluentui/react-drawer';
import { DrawerHeaderTitleProps } from '@fluentui/react-drawer';
import { DrawerHeaderTitleSlots } from '@fluentui/react-drawer';
import { DrawerHeaderTitleState } from '@fluentui/react-drawer';
import { DrawerProvider } from '@fluentui/react-drawer';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { InlineDrawerBaseState } from '@fluentui/react-drawer';
import { InlineDrawerBaseProps as InlineDrawerProps } from '@fluentui/react-drawer';
import { InlineDrawerSlots } from '@fluentui/react-drawer';
import { JSXElement } from '@fluentui/react-utilities';
import type { OverlayDrawerProps as OverlayDrawerProps_2 } from '@fluentui/react-drawer';
import * as React_2 from 'react';
import { Ref } from 'react';
import type { Slot } from '@fluentui/react-utilities';
import { useDrawerContext_unstable as useDrawerContext } from '@fluentui/react-drawer';
import { useDrawerContextValue } from '@fluentui/react-drawer';

declare type DialogModalType = 'modal' | 'non-modal' | 'alert';

declare type DialogOpenChangeData = {
    type: 'escapeKeyDown';
    open: boolean;
    event: React_2.KeyboardEvent<HTMLDialogElement>;
} | {
    type: 'backdropClick';
    open: boolean;
    event: React_2.MouseEvent<HTMLDialogElement>;
} | {
    type: 'surfaceToggle';
    open: boolean;
    event: Event;
} | {
    type: 'triggerClick';
    open: boolean;
    event: React_2.MouseEvent;
};

declare type DialogProps = {
    /**
     * Dialog variations.
     *
     * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
     * The tab sequence is kept within the dialog. This is the default type of the component.
     *
     * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
     * and users can interact with the rest of the page.
     *
     * `alert`: is a special type of modal dialog that interrupts the user's workflow
     * to communicate an important message or ask for a decision.
     *
     * @default modal
     */
    modalType?: DialogModalType;
    /**
     * Controls the open state of the dialog.
     * @default false
     */
    open?: boolean;
    /**
     * Default value for the uncontrolled open state of the dialog.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Callback fired when the component changes value from open state.
     */
    onOpenChange?: EventHandler<DialogOpenChangeData>;
    /**
     * Dialog children in the expected order:
     * - `DialogTrigger` + `DialogSurface`, or
     * - `DialogSurface` only when opening/closing from outside or controlling state.
     */
    children: [JSXElement, JSXElement] | JSXElement;
    /**
     * Enables standard behavior according to the HTML dialog spec
     * where the focus trap involves setting outside elements inert.
     * Native `<dialog showModal()>` always uses inert focus trapping,
     * so this prop is accepted for API parity but does not change behavior.
     *
     * @default false
     */
    inertTrapFocus?: boolean;
    /**
     * Decides whether the dialog should be removed from the DOM when it is closed.
     *
     * @default true
     */
    unmountOnClose?: boolean;
};

/**
 * DialogSurface Props
 */
declare type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots>;

declare type DialogSurfaceSlots = {
    /**
     * The native HTML `<dialog>` element.
     * Opened as modal via `showModal()` or non-modal via `showPopover()`.
     * The `::backdrop` CSS pseudo-element provides the native backdrop for modal dialogs.
     */
    root: Slot<'dialog'>;
};

/**
 * Drawer contains supplementary content for complex creation, edit, or management experiences.
 */
export declare const Drawer: ForwardRefComponent<DrawerProps>;

/**
 * DrawerBody provides a container for the main content of a Drawer.
 */
export declare const DrawerBody: ForwardRefComponent<DrawerBodyProps>;

export { DrawerBodyProps }

export { DrawerBodySlots }

export { DrawerBodyState }

export { DrawerContextValue }

/**
 * DrawerFooter contains footer content for a Drawer.
 */
export declare const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;

export { DrawerFooterProps }

export { DrawerFooterSlots }

export declare type DrawerFooterState = DrawerFooterState_2 & {
    root: {
        /**
         * Data attribute set to indicate the current scroll state of the drawer body.
         */
        'data-scroll-state'?: string;
    };
};

/**
 * DrawerHeader contains header content for a Drawer.
 */
export declare const DrawerHeader: ForwardRefComponent<DrawerHeaderProps>;

/**
 * DrawerHeaderNavigation contains navigation content for a Drawer header.
 */
export declare const DrawerHeaderNavigation: ForwardRefComponent<DrawerHeaderNavigationProps>;

export { DrawerHeaderNavigationProps }

export { DrawerHeaderNavigationSlots }

export { DrawerHeaderNavigationState }

export { DrawerHeaderProps }

export { DrawerHeaderSlots }

export declare type DrawerHeaderState = DrawerHeaderState_2 & {
    root: {
        /**
         * Data attribute set to indicate the current scroll state of the drawer body.
         */
        'data-scroll-state'?: string;
    };
};

/**
 * DrawerHeaderTitle contains the accessible title and optional action for a Drawer.
 */
export declare const DrawerHeaderTitle: ForwardRefComponent<DrawerHeaderTitleProps>;

export { DrawerHeaderTitleProps }

export { DrawerHeaderTitleSlots }

export { DrawerHeaderTitleState }

export declare type DrawerProps = (ComponentProps<DrawerSlots> & {
    /**
     * Type of the drawer.
     *
     * @default overlay
     */
    type?: 'overlay';
} & OverlayDrawerProps) | (ComponentProps<DrawerSlots> & {
    /**
     * Type of the drawer.
     *
     * - 'overlay' - Drawer is hidden by default and can be opened by clicking on the trigger.
     * - 'inline' - Drawer is stacked with the content.
     */
    type: 'inline';
} & InlineDrawerProps);

export { DrawerProvider }

export declare type DrawerSlots = Pick<OverlayDrawerSlots, 'root'> | Pick<InlineDrawerSlots, 'root'>;

export declare type DrawerState = {
    components: {
        root: React_2.FC<InlineDrawerProps | OverlayDrawerProps>;
    };
    root: InlineDrawerProps | OverlayDrawerProps;
};

/**
 * InlineDrawer is stacked with the content and keeps the rest of the page interactive.
 */
export declare const InlineDrawer: ForwardRefComponent<InlineDrawerProps>;

export { InlineDrawerProps }

export { InlineDrawerSlots }

export declare type InlineDrawerState = InlineDrawerBaseState & {
    root: {
        /**
         * Indicates whether the drawer is open, used for styling purposes.
         */
        'data-open'?: string;
        /**
         * The position of the drawer, used for styling purposes.
         */
        'data-position'?: InlineDrawerProps['position'];
    };
};

/**
 * OverlayDrawer contains supplementary content in a native dialog surface.
 */
export declare const OverlayDrawer: ForwardRefComponent<OverlayDrawerProps>;

declare type OverlayDrawerInternalSlots = OverlayDrawerSlots & {
    /**
     * Slot for the dialog component that wraps the drawer.
     */
    dialog: NonNullable<Slot<DialogProps>>;
};

export declare type OverlayDrawerProps = ComponentProps<OverlayDrawerSlots> & Pick<OverlayDrawerProps_2, 'position'> & Pick<DialogProps, 'open' | 'modalType' | 'onOpenChange' | 'unmountOnClose'>;

export declare type OverlayDrawerSlots = {
    /**
     * Slot for the root element.
     */
    root: Slot<DialogSurfaceProps>;
};

export declare type OverlayDrawerState = ComponentState<OverlayDrawerInternalSlots> & Required<Pick<OverlayDrawerProps, 'open' | 'position' | 'unmountOnClose' | 'modalType'>> & Pick<OverlayDrawerProps, 'onOpenChange'>;

/**
 * Renders the final JSX of the Drawer component, given the state.
 */
export declare const renderDrawer: (state: DrawerState) => JSXElement;

/**
 * Renders the final JSX of the DrawerBody component, given the state.
 */
export declare const renderDrawerBody: (state: DrawerBodyState) => JSXElement;

/**
 * Renders the final JSX of the DrawerFooter component, given the state.
 */
export declare const renderDrawerFooter: (state: DrawerFooterState_2) => JSXElement;

/**
 * Renders the final JSX of the DrawerHeader component, given the state.
 */
export declare const renderDrawerHeader: (state: DrawerHeaderState_2) => JSXElement;

/**
 * Renders the final JSX of the DrawerHeaderNavigation component, given the state.
 */
export declare const renderDrawerHeaderNavigation: (state: DrawerHeaderNavigationState) => JSXElement;

/**
 * Renders the final JSX of the DrawerHeaderTitle component, given the state.
 */
export declare const renderDrawerHeaderTitle: (state: DrawerHeaderTitleState) => JSXElement;

/**
 * Renders the final JSX of the InlineDrawer component, given the state.
 */
export declare const renderInlineDrawer: (state: InlineDrawerState, contextValue: DrawerContextValue) => JSXElement | null;

/**
 * Renders the final JSX of the OverlayDrawer component, given the state.
 */
export declare const renderOverlayDrawer: (state: OverlayDrawerState, contextValue: DrawerContextValue) => JSXElement;

/**
 * Returns the state for a Drawer component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderDrawer`.
 */
export declare const useDrawer: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;

/**
 * Returns the state for a DrawerBody component, given its props and ref.
 */
export declare const useDrawerBody: (props: DrawerBodyProps, ref: Ref<HTMLElement>) => DrawerBodyState;

export { useDrawerContext }

export { useDrawerContextValue }

/**
 * Returns the state for a DrawerFooter component, given its props and ref.
 */
export declare const useDrawerFooter: (props: DrawerFooterProps, ref: React_2.Ref<HTMLElement>) => DrawerFooterState;

/**
 * Returns the state for a DrawerHeader component, given its props and ref.
 */
export declare const useDrawerHeader: (props: DrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => DrawerHeaderState;

/**
 * Returns the state for a DrawerHeaderNavigation component, given its props and ref.
 */
export declare const useDrawerHeaderNavigation: (props: DrawerHeaderNavigationProps, ref: Ref<HTMLElement>) => DrawerHeaderNavigationState;

/**
 * Returns the state for a DrawerHeaderTitle component, given its props and ref.
 */
export declare const useDrawerHeaderTitle: (props: DrawerHeaderTitleProps, ref: React_2.Ref<HTMLDivElement>) => DrawerHeaderTitleState;

/**
 * Returns the state for an InlineDrawer component, given its props and ref.
 */
export declare const useInlineDrawer: (props: InlineDrawerProps, ref: React_2.Ref<HTMLElement>) => InlineDrawerState;

/**
 * Returns the state for an OverlayDrawer component, given its props and ref.
 */
export declare const useOverlayDrawer: (props: OverlayDrawerProps, ref: React_2.Ref<HTMLDialogElement>) => OverlayDrawerState;

export { }