import { ReactNode } from 'react';
export interface Tab {
    /**
     * Unique identifier for the tab, for handling click events.
     */
    id: string;
    /**
     * Display label for the tab.
     */
    label: string;
    /**
     * The content to display when this tab is active.
     */
    component?: JSX.Element | React.ReactNode;
    /**
     * Optional property to indicate if the tab is disabled.
     */
    disabled?: boolean;
    /**
     * Optional count to display next to the label.
     */
    count?: number | string;
    /**
     * Status indicator for the tab.
     */
    status?: 'success' | 'error' | 'transparent';
    /**
     * Whether the tab is removable.
     */
    isRemovable?: boolean;
    /**
     * Icon to display before the label.
     */
    icon?: ReactNode;
    /**
     * Additional class name for the tab.
     */
    className?: string;
    /**
     * Whether the tab is in error state.
     */
    isError?: boolean;
}
export interface TabsProps {
    /**
     * An array of tab objects containing label, component, and optional disabled status.
     */
    tabsData: Tab[];
    /**
     * Defines the styling variant of the tabs.
     */
    variant?: 'default' | 'capsule' | 'website';
    /**
     * activeTabId : The ID of the currently active tab.
     */
    activeTabId: string;
    /**
     * onTabClick : function updates the active tab state when a user interacts with the tabs,
     */
    onTabClick: (id: string) => void;
    /**
     * noBorder:true , removes the outer border from tabs
     */
    noBorder?: boolean;
    noPadding?: boolean;
    /**
     * titleSize is to accept dynamic font size
     */
    titleSize?: number | string;
    /**
     * Array of disabled tab IDs
     */
    disabledTabs?: string[];
    /**
     * Callback for when a tab is removed
     */
    onRemoveTab?: (id: string) => void;
    /**
     * Whether to show separators between tabs
     */
    isSeparator?: boolean;
}