import type React from "react";
import type { MQ, SpaceSizes } from "../../types";
import type { IconName } from "../Icon/Icon";
export type IconProp = {
    name: IconName;
    position: "left" | "right";
};
/**
 * @param label - The text to display in the tab
 * @param sublabel - A subtext, encased in parentheses
 * @param icon - An icon to display. Can be either an icon name (defaults to left position) or an object with name and position
 * @param as - The element to render the tab as, defaults to `button`
 * @param disabled - Whether the tab is disabled
 * @param tooltipContent - The content of the tooltip to display when the tab is disabled
 */
export type Tab = {
    label: string;
    sublabel?: string;
    icon?: IconName | IconProp;
    as?: "a" | "button" | React.ElementType;
    disabled?: boolean;
    active?: boolean;
    tooltipContent?: string;
} & Partial<React.ComponentProps<"button">> & Partial<React.ComponentProps<"a">>;
export type TabsProps = {
    /** An array of tabs, contains `header`, `subtitle`, `iconLeft`, `as` (defining the tab as a button or a link) */
    tabs: Tab[];
    children?: React.ReactElement;
    /** The index of the active tab */
    activeTab?: number | null;
    onTabSelect?: (selectedTab: number) => void;
    activeTabClickable?: boolean;
    tabPanelId?: string;
    /** Horizontal padding space for the tab container, suited for tabs within a Card element */
    horizontalPadding?: SpaceSizes | MQ<SpaceSizes>;
    /** Whether to show a bottom border between tabs and content */
    hideBottomBorder?: boolean;
    "data-e2e-test-id"?: string;
};