import { CSSObject } from 'styled-components';
import { ThemeType } from '../../tokens';
import { TabsVariant, TabsSize } from './types';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type TabsState = 'default' | 'hover' | 'active' | 'disabled';
/**
 * Tabs Tokens following the pattern: [target].CSSProp.[size].[variant].[state]
 *
 * Structure:
 * - target: container | trigger | text | underline (defines what element the token applies to)
 * - CSSProp: backgroundColor | borderRadius | padding | border | color | fontSize | fontWeight | gap | height
 * - size: sm | md | lg (only for size-dependent properties)
 * - variant: underline | boxed | floating | pills (tabs variant)
 * - state: default | hover | active | disabled (interaction state)
 *
 * Size-independent properties: backgroundColor, border, color
 * Size-dependent properties: borderRadius, padding, fontSize, fontWeight
 */
export type TabsTokensType = {
    gap: CSSObject['gap'];
    backgroundColor: {
        [key in TabsVariant]: {
            [key in TabsState]: CSSObject['backgroundColor'];
        };
    };
    borderRadius: {
        [key in TabsSize]: {
            [key in TabsVariant]: CSSObject['borderRadius'];
        };
    };
    padding: {
        [key in TabsSize]: {
            [key in TabsVariant]: {
                top: CSSObject['paddingTop'];
                right: CSSObject['paddingRight'];
                bottom: CSSObject['paddingBottom'];
                left: CSSObject['paddingLeft'];
            };
        };
    };
    border: {
        [key in TabsVariant]: CSSObject['border'];
    };
    borderBottom: {
        [key in TabsVariant]: CSSObject['borderBottom'];
    };
    container: {
        backgroundColor: {
            [key in TabsVariant]: CSSObject['backgroundColor'];
        };
        borderRadius: {
            [key in TabsSize]: {
                [key in TabsVariant]: CSSObject['borderRadius'];
            };
        };
        padding: {
            [key in TabsSize]: {
                [key in TabsVariant]: {
                    top: CSSObject['paddingTop'];
                    right: CSSObject['paddingRight'];
                    bottom: CSSObject['paddingBottom'];
                    left: CSSObject['paddingLeft'];
                };
            };
        };
    };
    trigger: {
        gap: CSSObject['gap'];
        activeIndicator: {
            height: CSSObject['height'];
            color: CSSObject['color'];
        };
        text: {
            color: {
                [key in TabsVariant]: {
                    [key in TabsState]: CSSObject['color'];
                };
            };
            fontSize: {
                [key in TabsSize]: CSSObject['fontSize'];
            };
            fontWeight: {
                [key in TabsSize]: CSSObject['fontWeight'];
            };
        };
    };
};
export type ResponsiveTabsTokens = {
    [key in keyof BreakpointType]: TabsTokensType;
};
export declare const getTabsTokens: (foundationToken: ThemeType) => ResponsiveTabsTokens;