import { CSSObject } from 'styled-components';
import { FoundationTokenType } from '../../tokens/theme.token';
import { BreakpointType } from '../../breakpoints/breakPoints';
export type SidebarState = 'default' | 'hover' | 'active';
export type SidebarVariant = 'expanded' | 'collapsed';
/**
 * Sidebar Tokens following the pattern: [target].CSSProp.[variant].[state]
 *
 * Structure matches Card pattern for consistency:
 * - Base properties: maxWidth, borderRadius, zIndex, transition, backgroundColor.[state]
 * - Target sections: leftPanel.*, header.*, body.*, footer.*, mainContent.*
 * - Each target has: backgroundColor, padding, border, gap, specific properties
 * - Interactive elements have state-based styling: [state] = default | hover | active
 *
 * Pattern examples:
 * - maxWidth.[variant] (sidebar's maximum width based on state)
 * - backgroundColor.[state] (sidebar background with states)
 * - leftPanel.backgroundColor (tenant panel background)
 * - header.toggleButton.backgroundColor.[state] (interactive toggle button)
 * - body.padding (directory content area spacing)
 * - footer.height (footer section height)
 * - mainContent.topbar.transition (topbar auto-hide animation)
 */
export type SidebarTokenType = {
    maxWidth: {
        withLeftPanel: CSSObject['maxWidth'];
        withoutLeftPanel: CSSObject['maxWidth'];
        iconOnly?: CSSObject['maxWidth'];
    };
    backgroundColor: CSSObject['backgroundColor'];
    borderRight: CSSObject['border'];
    leftPanel: {
        width: CSSObject['width'];
        backgroundColor: CSSObject['backgroundColor'];
        borderRight: CSSObject['border'];
        padding: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        gap: CSSObject['gap'];
        item: {
            width: CSSObject['width'];
            borderRadius: CSSObject['borderTopLeftRadius'];
            border: {
                [key in SidebarState]: CSSObject['border'];
            };
            backgroundColor: {
                [key in SidebarState]: CSSObject['backgroundColor'];
            };
        };
    };
    header: {
        backgroundColor: CSSObject['backgroundColor'];
        padding: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        gap: CSSObject['gap'];
        borderBottom: CSSObject['border'];
        toggleButton: {
            backgroundColor: {
                [key in SidebarState]: CSSObject['backgroundColor'];
            };
            width: CSSObject['width'];
        };
    };
    directory: {
        gap: CSSObject['gap'];
        paddingX: CSSObject['padding'];
        paddingY: CSSObject['padding'];
    };
    footer: {
        backgroundColor: CSSObject['backgroundColor'];
        padding: {
            x: CSSObject['padding'];
            y: CSSObject['padding'];
        };
        borderTop: CSSObject['border'];
    };
};
export type ResponsiveSidebarTokens = {
    [key in keyof BreakpointType]: SidebarTokenType;
};
export declare const getSidebarTokens: (foundationToken: FoundationTokenType) => ResponsiveSidebarTokens;