import { default as React } from 'react';
import { ResponsiveValueType } from '../../utils/ui';

export type TabularTheme = 'light' | 'dark';
export type TabularRole = 'tablist' | 'navigation';
export type TabularSize = 'large' | 'medium' | 'small';
export interface TabularItem {
    id: string;
    label: React.ReactNode;
    disabled?: boolean;
    ariaLabel?: string;
    ariaControls?: string;
    hasNotification?: boolean;
}
export interface TabularItemComponentProps {
    disabled?: boolean;
    type: HTMLButtonElement['type'];
    role: HTMLButtonElement['role'];
    className?: string;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    'aria-label'?: string;
    'aria-controls'?: string;
    'data-text'?: React.ReactNode;
    'aria-selected'?: boolean;
}
export interface TabularProps {
    items: TabularItem[];
    activeItem?: string;
    onActivate?: (id: string) => void;
    itemClassName?: string;
    ItemComponent?: React.ElementType<TabularItemComponentProps>;
    className?: string;
    ariaLabel?: string;
    tabIndex?: number;
    theme?: TabularTheme;
    role?: TabularRole;
    size?: ResponsiveValueType<TabularSize>;
}
export declare function Tabular(props: TabularProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Tabular {
    var Root: (props: TabularRootProps) => import("react/jsx-runtime").JSX.Element;
    var Item: (props: TabularItemProps) => import("react/jsx-runtime").JSX.Element;
}
export interface TabularRootProps extends React.PropsWithChildren, Pick<TabularProps, 'className' | 'ariaLabel' | 'tabIndex' | 'theme' | 'role' | 'size'> {
    style?: React.CSSProperties;
}
export interface TabularItemProps extends TabularItem {
    active: boolean;
    onClick: (id: string) => void;
    className?: string;
    size?: ResponsiveValueType<TabularSize>;
    Component?: React.ElementType<TabularItemComponentProps>;
}