import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { DividerBaseProps } from '@fluentui/react-divider';
import { DividerBaseState } from '@fluentui/react-divider';
import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
import { DrawerBodyState } from '@fluentui/react-drawer';
import { DrawerFooterState } from '@fluentui/react-drawer';
import { DrawerHeaderState } from '@fluentui/react-drawer';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { InlineDrawerBaseProps } from '@fluentui/react-drawer';
import { InlineDrawerSlots } from '@fluentui/react-drawer';
import { JSXElement } from '@fluentui/react-utilities';
import type { NavBaseState } from '@fluentui/react-nav';
import { NavCategoryContextValues } from '@fluentui/react-nav';
import { NavCategoryItemProvider } from '@fluentui/react-nav';
import { NavCategoryProps } from '@fluentui/react-nav';
import { NavCategoryProvider } from '@fluentui/react-nav';
import { NavCategoryState } from '@fluentui/react-nav';
import { NavContextValue } from '@fluentui/react-nav';
import { NavContextValues } from '@fluentui/react-nav';
import { DrawerBodyProps as NavDrawerBodyProps } from '@fluentui/react-drawer';
import { DrawerBodySlots as NavDrawerBodySlots } from '@fluentui/react-drawer';
import { DrawerFooterProps as NavDrawerFooterProps } from '@fluentui/react-drawer';
import { DrawerFooterSlots as NavDrawerFooterSlots } from '@fluentui/react-drawer';
import { DrawerHeaderProps as NavDrawerHeaderProps } from '@fluentui/react-drawer';
import { DrawerHeaderSlots as NavDrawerHeaderSlots } from '@fluentui/react-drawer';
import type { NavItemBaseProps } from '@fluentui/react-nav';
import type { NavItemBaseState } from '@fluentui/react-nav';
import { NavItemRegisterData } from '@fluentui/react-nav';
import { NavItemSlots } from '@fluentui/react-nav';
import { NavItemValue } from '@fluentui/react-nav';
import { NavBaseProps as NavProps } from '@fluentui/react-nav';
import { NavProvider } from '@fluentui/react-nav';
import { NavSlots } from '@fluentui/react-nav';
import type { NavSubItemBaseState } from '@fluentui/react-nav';
import { NavSubItemBaseProps as NavSubItemProps } from '@fluentui/react-nav';
import { NavSubItemSlots } from '@fluentui/react-nav';
import { OnNavItemSelectData } from '@fluentui/react-nav';
import type { OverlayDrawerProps as OverlayDrawerProps_2 } from '@fluentui/react-drawer';
import * as React_2 from 'react';
import { RegisterNavItemEventHandler } from '@fluentui/react-nav';
import { renderNavCategory_unstable as renderNavCategory } from '@fluentui/react-nav';
import type { Slot } from '@fluentui/react-utilities';
import { useNavCategory_unstable as useNavCategory } from '@fluentui/react-nav';
import { useNavCategoryContext_unstable as useNavCategoryContext } from '@fluentui/react-nav';
import { useNavCategoryContextValues_unstable as useNavCategoryContextValues } from '@fluentui/react-nav';
import { useNavCategoryItemContext_unstable as useNavCategoryItemContext } from '@fluentui/react-nav';
import { useNavContext_unstable as useNavContext } from '@fluentui/react-nav';

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'>;
};

declare type DividerProps = DividerBaseProps;

declare type DividerSlots = DividerSlots_2;

declare type DividerState = DividerBaseState & {
    root: {
        /**
         * Data attribute set to indicate the orientation of the divider.
         */
        'data-orientation'?: 'vertical' | 'horizontal';
    };
};

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

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';
} & InlineDrawerBaseProps);

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

/**
 * Nav - A headless component that provides up to two levels of nesting for navigation.
 */
export declare const Nav: ForwardRefComponent<NavProps>;

/**
 * NavCategory component - a category in the navigation menu that can contain multiple items.
 */
export declare const NavCategory: ForwardRefComponent<NavCategoryProps>;

/** Value stored inside the NavCategory context. */
export declare type NavCategoryContextValue = {
    open: boolean;
    value: string;
};

export { NavCategoryContextValues }

/**
 * NavCategoryItem - a clickable header that expands a list of NavSubItems.
 */
export declare const NavCategoryItem: ForwardRefComponent<NavCategoryItemProps>;

/** Value stored inside the NavCategoryItem context. */
export declare type NavCategoryItemContextValue = {
    open: boolean;
    value: string;
};

export declare type NavCategoryItemContextValues = {
    navCategoryItem: NavCategoryItemContextValue;
};

/**
 * NavCategoryItem Props
 */
export declare type NavCategoryItemProps = ComponentProps<NavCategoryItemSlots>;

export { NavCategoryItemProvider }

export declare type NavCategoryItemSlots = {
    /**
     * The root element
     */
    root: NonNullable<Slot<'button'>>;
    /**
     * Icon that renders before the content.
     */
    icon?: Slot<'span'>;
    /**
     * Expand icon slot rendered after content.
     */
    expandIcon?: Slot<'span'>;
};

/**
 * State used in rendering NavCategoryItem
 */
export declare type NavCategoryItemState = ComponentState<NavCategoryItemSlots> & NavCategoryItemContextValue & {
    /**
     * If this navCategoryItem is selected
     */
    selected: boolean;
    root: {
        'data-open'?: string;
        'data-selected'?: string;
    };
};

export { NavCategoryProps }

export { NavCategoryProvider }

export { NavCategoryState }

export { NavContextValue }

export { NavContextValues }

/**
 * NavDivider component - a separator used within navigation to divide items.
 */
export declare const NavDivider: ForwardRefComponent<NavDividerProps>;

/**
 * NavDivider Props
 */
export declare type NavDividerProps = Omit<DividerProps, 'vertical'>;

export declare type NavDividerSlots = DividerSlots;

/**
 * State used in rendering NavDivider
 */
export declare type NavDividerState = DividerState;

/**
 * NavDrawer component — a navigation drawer combining Nav behavior with Drawer layout.
 */
export declare const NavDrawer: ForwardRefComponent<NavDrawerProps>;

/**
 * NavDrawerBody component — the main scrollable content area of a NavDrawer.
 */
export declare const NavDrawerBody: ForwardRefComponent<NavDrawerBodyProps>;

export { NavDrawerBodyProps }

export { NavDrawerBodySlots }

export declare type NavDrawerBodyState = DrawerBodyState & {
    root: DrawerBodyState['root'] & {
        focusgroup?: string;
    };
};

/**
 * NavDrawerFooter component — the footer area of a NavDrawer.
 */
export declare const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps>;

export { NavDrawerFooterProps }

export { NavDrawerFooterSlots }

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

/**
 * NavDrawerHeader component — the header area of a NavDrawer.
 */
export declare const NavDrawerHeader: ForwardRefComponent<NavDrawerHeaderProps>;

export { NavDrawerHeaderProps }

export { NavDrawerHeaderSlots }

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

/**
 * NavDrawer Props
 */
export declare type NavDrawerProps = DrawerProps & NavProps;

declare type NavDrawerSlots = {
    /**
     * The root of the NavDrawer which contains the navigation items.
     */
    root: Slot<typeof Drawer>;
};

/**
 * State used in rendering NavDrawer
 */
export declare type NavDrawerState = ComponentState<NavDrawerSlots> & Omit<NavContextValue, 'tabbable'>;

/**
 * NavItem component - a single item in the navigation menu.
 */
export declare const NavItem: ForwardRefComponent<NavItemProps>;

export declare type NavItemProps = NavItemBaseProps;

export { NavItemRegisterData }

export { NavItemSlots }

export declare type NavItemState = NavItemBaseState & {
    root: {
        'data-selected'?: string;
    };
};

export { NavItemValue }

export { NavProps }

export { NavProvider }

/**
 * NavSectionHeader component - a heading for a section within navigation.
 */
export declare const NavSectionHeader: ForwardRefComponent<NavSectionHeaderProps>;

/**
 * NavSectionHeader Props
 */
export declare type NavSectionHeaderProps = ComponentProps<NavSectionHeaderSlots>;

export declare type NavSectionHeaderSlots = {
    root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;
};

/**
 * State used in rendering NavSectionHeader
 */
export declare type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;

export { NavSlots }

export declare type NavState = NavBaseState & {
    root: NavBaseState['root'] & {
        focusgroup?: string;
    };
};

/**
 * NavSubItem component - a sub-item within a navigation structure.
 */
export declare const NavSubItem: ForwardRefComponent<NavSubItemProps>;

/**
 * NavSubItemGroup component - a group of sub-items within a navigation structure.
 */
export declare const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps>;

/**
 * NavSubItemGroup Props
 */
export declare type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;

export declare type NavSubItemGroupSlots = {
    /**
     * The root element
     */
    root: NonNullable<Slot<'div'>>;
};

/**
 * State used in rendering NavSubItemGroup
 */
export declare type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {
    /**
     * Internal open state, provided by context.
     */
    open: boolean;
};

export { NavSubItemProps }

export { NavSubItemSlots }

export declare type NavSubItemState = NavSubItemBaseState & {
    root: {
        'data-selected'?: string;
    };
};

export { OnNavItemSelectData }

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

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

export { RegisterNavItemEventHandler }

export declare const renderNav: (state: NavState, contextValues: NavContextValues) => JSXElement;

export { renderNavCategory }

/**
 * Render the final JSX of NavCategoryItem
 */
export declare const renderNavCategoryItem: (state: NavCategoryItemState, contextValues: NavCategoryItemContextValues) => JSXElement;

/**
 * Renders the final JSX of the Divider component, given the state.
 */
export declare const renderNavDivider: (state: DividerBaseState) => JSXElement;

export declare const renderNavDrawer: (state: NavDrawerState, contextValues: NavContextValues) => JSXElement;

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

/**
 * Renders the final JSX of NavDrawerFooter.
 */
export declare const renderNavDrawerFooter: (state: DrawerFooterState) => JSXElement;

/**
 * Renders the final JSX of NavDrawerHeader.
 */
export declare const renderNavDrawerHeader: (state: DrawerHeaderState) => JSXElement;

export declare const renderNavItem: (state: NavItemState) => JSXElement;

/**
 * Render the final JSX of NavSectionHeader
 */
export declare const renderNavSectionHeader: (state: NavSectionHeaderState) => JSXElement;

export declare const renderNavSubItem: (state: NavSubItemState) => JSXElement;

/**
 * Render the final JSX of NavSubItemGroup
 *
 * Headless version — renders children only when open, without motion.
 */
export declare const renderNavSubItemGroup: (state: NavSubItemGroupState) => JSXElement | null;

export declare const useNav: (props: NavProps, ref: React_2.Ref<HTMLDivElement>) => NavState;

export { useNavCategory }

export { useNavCategoryContext }

export { useNavCategoryContextValues }

/**
 * Create the state required to render NavCategoryItem.
 *
 * Headless version — no motion, no default expand icon.
 *
 * @param props - props from this instance of NavCategoryItem
 * @param ref - reference to root HTMLButtonElement of NavCategoryItem
 */
export declare const useNavCategoryItem: (props: NavCategoryItemProps, ref: React_2.Ref<HTMLButtonElement>) => NavCategoryItemState;

export { useNavCategoryItemContext }

/**
 * Self-contained context values hook for headless NavCategoryItem.
 */
export declare function useNavCategoryItemContextValues(state: NavCategoryItemState): NavCategoryItemContextValues;

export { useNavContext }

export declare function useNavContextValues(state: NavState): NavContextValues;

/**
 * Create the state required to render NavDivider.
 *
 * @param props - props from this instance of NavDivider
 * @param ref - reference to root HTMLDivElement of NavDivider
 */
export declare const useNavDivider: (props: NavDividerProps, ref: React_2.Ref<HTMLDivElement>) => NavDividerState;

/**
 * Create the state required to render NavDrawer.
 *
 * Combines headless Nav state with a headless Drawer as root.
 *
 * @param props - props from this instance of NavDrawer
 * @param ref - reference to root HTMLElement of NavDrawer
 */
export declare const useNavDrawer: (props: NavDrawerProps, ref: React_2.Ref<HTMLElement>) => NavDrawerState;

/**
 * Create the state required to render NavDrawerBody.
 *
 * Arrow-key navigation is enabled by default via the native `focusgroup` attribute
 * with the `toolbar` behavior (vertical, wraps at ends). `toolbar` was chosen over
 * `block wrap` alone because the scoped-focusgroup spec requires an explicit
 * `<behavior>` token (see https://open-ui.org/components/scoped-focusgroup.explainer/#supported-behaviors).
 *
 * Since `toolbar` implies `role="toolbar"`, we override the role back to
 * `navigation` to preserve the landmark semantics expected of a nav drawer.
 */
export declare const useNavDrawerBody: (props: NavDrawerBodyProps, ref: React_2.Ref<HTMLElement>) => NavDrawerBodyState;

/**
 * Create the state required to render NavDrawerFooter.
 *
 * @param props - props from this instance of NavDrawerFooter
 * @param ref - reference to root HTMLElement of NavDrawerFooter
 */
export declare const useNavDrawerFooter: (props: NavDrawerFooterProps, ref: React_2.Ref<HTMLElement>) => NavDrawerFooterState;

/**
 * Create the state required to render NavDrawerHeader.
 *
 * @param props - props from this instance of NavDrawerHeader
 * @param ref - reference to root HTMLElement of NavDrawerHeader
 */
export declare const useNavDrawerHeader: (props: NavDrawerHeaderProps, ref: React_2.Ref<HTMLElement>) => NavDrawerHeaderState;

export declare const useNavItem: (props: NavItemProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => NavItemState;

/**
 * Create the state required to render NavSectionHeader.
 *
 * @param props - props from this instance of NavSectionHeader
 * @param ref - reference to root HTMLDivElement of NavSectionHeader
 */
export declare const useNavSectionHeader: (props: NavSectionHeaderProps, ref: React_2.Ref<HTMLDivElement>) => NavSectionHeaderState;

export declare const useNavSubItem: (props: NavSubItemProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => NavSubItemState;

/**
 * Create the state required to render NavSubItemGroup.
 *
 * Headless version — conditionally renders based on open state without motion.
 *
 * @param props - props from this instance of NavSubItemGroup
 * @param ref - reference to root HTMLDivElement of NavSubItemGroup
 */
export declare const useNavSubItemGroup: (props: NavSubItemGroupProps, ref: React_2.Ref<HTMLDivElement>) => NavSubItemGroupState;

export { }