/**
 * Web Tabs Component
 *
 */
import React from 'react';
import type { DynamicElement, InnerSpaceType, SpaceType, SpacingProps } from '../../shared/types';
import CustomContent from './TabsCustomContent';
import ContentWrapper from './TabsContentWrapper';
import type { ButtonProps } from '../Button';
import type { AnchorAllProps } from '../Anchor';
import type { SectionVariants } from '../Section';
import type { SkeletonShow } from '../Skeleton';
export type TabsData = string | {
    title: string | React.ReactNode | (() => React.ReactNode);
    key: string | number;
    selected?: boolean;
    disabled?: boolean;
    content?: TabsContent;
}[] | any;
export type TabsContent = Record<string, unknown> | React.ReactNode | ((key: TabsSelectedKey) => React.ReactNode);
export type TabsTabElement = DynamicElement<null, ButtonProps | AnchorAllProps>;
export type TabsSelectedKey = string | number;
export type TabsAlign = 'left' | 'center' | 'right';
export type TabsChildren = Record<string, unknown> | React.ReactNode | ((key: TabsSelectedKey) => React.ReactNode);
export type TabsProps = Omit<React.HTMLProps<HTMLElement>, 'ref' | 'data' | 'content' | 'children' | 'label' | 'onChange' | 'onClick' | 'onFocus' | 'onMouseEnter'> & SpacingProps & {
    data?: TabsData;
    /**
     * the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
     */
    content?: TabsContent;
    /**
     * To enable the visual helper `.dnb-section` on to the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
     */
    contentStyle?: SectionVariants | string;
    /**
     * To modify the inner space of the content wrapper. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `{ top: 'large' }`.
     */
    contentInnerSpace?: InnerSpaceType | boolean;
    label?: string;
    /**
     * Define what HTML element should be used. You can provide e.g. `tabElement={GatsbyLink}` – you may then provide the `to` property inside every entry (`data={[{ to: '/url', ... }]}`). Defaults to `<button>`.
     */
    tabElement?: TabsTabElement;
    /**
     * In case one of the tabs should be opened by a `key`.
     */
    selectedKey?: TabsSelectedKey;
    /**
     * To align the tab list on the right side `align="right"`. Defaults to `left`.
     */
    align?: TabsAlign;
    /**
     * To enable the visual helper `.dnb-section` inside the tabs list. Use a supported modifier from the [Section component](/uilib/components/section/properties). Defaults to `null`.
     */
    tabsStyle?: SectionVariants | string;
    /**
     * To modify the top padding of the tab list. Only applies `paddingTop`. Defaults to `undefined`.
     */
    tabsInnerSpace?: SpaceType | boolean;
    /**
     * If set to `true`, the default horizontal border line under the tablist will be removed. Defaults to `false`.
     */
    noBorder?: boolean;
    /**
     * If set to `false`, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to `true`.
     */
    breakout?: boolean;
    /**
     * If set to `true`, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to `false`.
     */
    navButtonEdge?: boolean;
    onOpenTabNavigationFn?: (selectedKey: TabsSelectedKey) => void;
    /**
     * If set to `true`, the Tabs content will pre-render all contents. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Defaults to `false`.
     */
    keepInDOM?: boolean;
    /**
     * If set to `true`, the Tabs content will stay in the DOM. The visibility will be handled by using the `hidden` and `aria-hidden` HTML attributes. Similar to `keepInDOM`, but in contrast, the content will render once the user is activating a tab. Defaults to `false`.
     */
    preventRerender?: boolean;
    /**
     * If set to `true`, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to `false`.
     */
    scroll?: boolean;
    /**
     * If set to `true`, an overlaying skeleton with animation will be shown.
     */
    skeleton?: SkeletonShow;
    id?: string;
    className?: string;
    /**
     * the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
     */
    children?: TabsChildren;
    render?: (components: TabsRenderComponents) => React.ReactNode;
    onChange?: (event: TabsEvent) => void;
    onMouseEnter?: (event: TabsEvent) => void;
    onClick?: (event: TabsEvent) => void | boolean;
    onFocus?: (event: TabsEvent) => void;
};
export type TabsEvent = {
    key: TabsSelectedKey;
    selectedKey: TabsSelectedKey;
    focusKey: TabsSelectedKey;
    title: string | React.ReactNode;
    event?: React.SyntheticEvent;
};
export type TabsRenderComponents = {
    Wrapper: React.ComponentType<React.PropsWithChildren<{
        className?: string;
    } & Record<string, unknown>>>;
    Content: React.ComponentType<Record<string, unknown>>;
    TabsList: React.ComponentType<React.PropsWithChildren<{
        className?: string;
    } & Record<string, unknown>>>;
    Tabs: React.ComponentType<Record<string, unknown>>;
};
export type TabsDummyProps = {
    /**
     * the content to render. Can be a function, returning the current tab content `(key) => ('Current tab')`, a React Component or an object with the keys and content `{key1: 'Current tab'}`.
     */
    children: React.ReactNode;
};
type TabsWithStatics = React.FC<TabsProps> & {
    Content: typeof CustomContent;
    ContentWrapper: typeof ContentWrapper;
};
declare const Tabs: TabsWithStatics;
export default Tabs;
export declare const Dummy: ({ children }: {
    children: React.ReactNode;
}) => import("react/jsx-runtime").JSX.Element;