import React, { HTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
import { CommonProps } from '@contentful/f36-core';
import { IconButtonProps } from '@contentful/f36-button';
import { HeadingElement } from '@contentful/f36-typography';

type LayoutSidebarVariant = 'narrow' | 'wide';
type LayoutProps = {
    /**
     * The body of the layout.
     */
    children: React.ReactNode;
    header?: React.ReactNode;
    leftSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout left sidebar.
     * @default 'narrow' (280px)
     */
    leftSidebarVariant?: LayoutSidebarVariant;
    rightSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout right sidebar.
     * @default 'wide' (340px)
     */
    rightSidebarVariant?: LayoutSidebarVariant;
    /**
     * Defines the width of the layout and its content.
     * @default 'wide'
     */
    variant?: 'narrow' | 'wide' | 'fullscreen';
    withBoxShadow?: boolean;
    /**
     * Classname that will be passed to the main content div,
     * which holds the sidebars and children div
     */
    contentClassName?: string;
    contentTestId?: string;
    /**
     * Offset for layout heights calculation.
     * Set to `0` for layout usage without navbar.
     * @default 60 (= navbar height)
     */
    offsetTop?: number;
} & CommonProps & HTMLAttributes<HTMLDivElement>;
declare const Layout$1: React.ForwardRefExoticComponent<{
    /**
     * The body of the layout.
     */
    children: React.ReactNode;
    header?: React.ReactNode;
    leftSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout left sidebar.
     * @default 'narrow' (280px)
     */
    leftSidebarVariant?: LayoutSidebarVariant;
    rightSidebar?: React.ReactNode;
    /**
     * Defines the width of the layout right sidebar.
     * @default 'wide' (340px)
     */
    rightSidebarVariant?: LayoutSidebarVariant;
    /**
     * Defines the width of the layout and its content.
     * @default 'wide'
     */
    variant?: "narrow" | "wide" | "fullscreen";
    withBoxShadow?: boolean;
    /**
     * Classname that will be passed to the main content div,
     * which holds the sidebars and children div
     */
    contentClassName?: string;
    contentTestId?: string;
    /**
     * Offset for layout heights calculation.
     * Set to `0` for layout usage without navbar.
     * @default 60 (= navbar height)
     */
    offsetTop?: number;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutHeader: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutBody: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

declare const LayoutSidebar: React.ForwardRefExoticComponent<{
    children: React.ReactNode;
} & CommonProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

type BackButtonProps = Omit<Partial<IconButtonProps>, 'children' | 'icon' | 'variant' | 'size'> & {
    'aria-label'?: string;
};

type BreadcrumbProps = {
    breadcrumbs: Breadcrumb[];
};
type Breadcrumb = {
    content: string;
    url: string;
    onClick?: MouseEventHandler<HTMLAnchorElement>;
};
declare const Breadcrumb: {
    ({ breadcrumbs, ...otherProps }: BreadcrumbProps): React.JSX.Element;
    displayName: string;
};

type Variant = {
    /**
     * An (optional) list of navigable links to prepend to the current title.
     */
    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
    /**
     * Ensure that backbutton props can not be passed when `withBackButton` is false.
     * This is to prevent confusion, as the back button will not be rendered.
     */
    backButtonProps?: never;
    withBackButton?: false | never;
} | {
    /**
     * An (optional) list of navigable links to prepend to the current title.
     */
    breadcrumbs?: BreadcrumbProps['breadcrumbs'];
    /**
     * Props to spread on the back button. You almost certainly want to pass
     * an `onClick` handler.
     */
    backButtonProps?: BackButtonProps;
    /**
     * If `true`, renders a leading back button within the header.
     */
    withBackButton: true;
};
type LayoutHeaderInnerProps = CommonProps & Variant & {
    /**
     * Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
     */
    actions?: ReactElement | ReactElement[];
    /**
     * The title of the element this header pertains to.
     */
    title: string;
    titleProps?: {
        as?: HeadingElement;
        size?: 'medium' | 'large';
    };
    metadata?: ReactNode;
};
declare const LayoutHeaderInner: React.ForwardRefExoticComponent<LayoutHeaderInnerProps & React.RefAttributes<HTMLDivElement>>;

type CompoundLayout = typeof Layout$1 & {
    Header: typeof LayoutHeader;
    HeaderInner: typeof LayoutHeaderInner;
    Body: typeof LayoutBody;
    Sidebar: typeof LayoutSidebar;
};
declare const Layout: CompoundLayout;

export { Layout, type LayoutProps };