import { ReactNode, HTMLAttributes } from 'react';
import { IconType } from '../Icon';
declare type MarkerOffset = 'top' | 'bottom' | 'left' | 'right';
declare type VerticalTabMarkerOffset = 'left' | 'right';
declare type HorizontalTabMarkerOffset = 'top' | 'bottom';
declare type BaseElement = HTMLDivElement;
declare type BaseProps = HTMLAttributes<BaseElement>;
/**
 *
 * Tab base
 *
 * A tab that is just a container for some content,
 * no icon/text is assumed and it's up to the user
 * to generate it. Use this if you need custom layout
 * for content inside the tab.
 *
 */
export interface TabBaseProps<T> extends Omit<BaseProps, 'id' | 'onSelect'> {
    readonly id: T;
    readonly selected: boolean;
    readonly disabled?: boolean;
    readonly onSelect: (id: T) => void;
    readonly markerOffset?: MarkerOffset;
    readonly children: ReactNode;
}
export declare function TabBase<T>({ id, selected, disabled, onSelect, markerOffset, children, onKeyDown, ...props }: TabBaseProps<T>): JSX.Element;
/**
 * Tab primitive
 */
export declare type ChangeEventHandler<T> = (id: T) => void;
interface InternalTabBaseProps<T> extends Omit<BaseProps, 'id' | 'onSelect'> {
    /**
     * `class` to be passed to the component.
     */
    readonly className?: BaseProps['className'];
    /**
     * Determines the Tab's ID.
     */
    readonly id: T;
    /**
     * Indicates if the Tab has been selected.
     */
    readonly selected?: boolean;
    /**
     * The icon element.
     */
    readonly icon?: IconType;
    /**
     * If `true`, the tab will be disabled.
     */
    readonly disabled?: boolean;
    /**
     * Executes a JavaScript upon being selected.
     */
    readonly onSelect: ChangeEventHandler<T>;
    /**
     * Changes the label written on the tab.
     */
    readonly label?: string;
}
/**
 * Tab
 */
export interface TabProps<T> extends InternalTabBaseProps<T> {
    readonly markerOffset?: HorizontalTabMarkerOffset;
}
export declare function Tabs<T>({ tabs, }: {
    readonly tabs: ReadonlyArray<TabProps<T>>;
}): JSX.Element;
/**
 * Vertical tab
 */
export interface VerticalTabProps<T> extends InternalTabBaseProps<T> {
    readonly markerOffset?: VerticalTabMarkerOffset;
}
export declare function VerticalTabs<T>({ tabs, }: {
    readonly tabs: ReadonlyArray<VerticalTabProps<T>>;
}): JSX.Element;
export {};