/**
 * Layout Constants for Bitcoin Auth UI
 *
 * Centralized sizing and spacing constants to ensure consistent layouts
 * across all components. These values are designed to work well together
 * and create a cohesive visual hierarchy.
 */
/**
 * Container widths for different layout contexts
 */
export declare const CONTAINER_WIDTHS: {
    readonly PAGE_NARROW: "768px";
    readonly PAGE_DEFAULT: "1024px";
    readonly PAGE_WIDE: "1280px";
    readonly PAGE_FULL: "1440px";
    readonly CARD_SMALL: "320px";
    readonly CARD_MEDIUM: "400px";
    readonly CARD_LARGE: "560px";
    readonly MODAL_SMALL: "400px";
    readonly MODAL_MEDIUM: "560px";
    readonly MODAL_LARGE: "720px";
    readonly MODAL_XLARGE: "960px";
    readonly POPOVER_SMALL: "240px";
    readonly POPOVER_MEDIUM: "320px";
    readonly POPOVER_LARGE: "400px";
    readonly FORM_NARROW: "360px";
    readonly FORM_DEFAULT: "480px";
    readonly FORM_WIDE: "640px";
    readonly CONTENT_DEFAULT: "800px";
    readonly MODAL_DEFAULT: "560px";
};
/**
 * Sidebar and panel widths
 */
export declare const LAYOUT_WIDTHS: {
    readonly SIDEBAR_COLLAPSED: "64px";
    readonly SIDEBAR_NARROW: "200px";
    readonly SIDEBAR_DEFAULT: "260px";
    readonly SIDEBAR_WIDE: "320px";
    readonly PANEL_NARROW: "320px";
    readonly PANEL_DEFAULT: "400px";
    readonly PANEL_WIDE: "480px";
};
/**
 * Grid layouts and breakpoints
 */
export declare const GRID_LAYOUTS: {
    readonly GAP_SMALL: "16px";
    readonly GAP_MEDIUM: "24px";
    readonly GAP_LARGE: "32px";
    readonly COLUMNS: {
        readonly MOBILE: 1;
        readonly TABLET: 2;
        readonly DESKTOP: 3;
        readonly WIDE: 4;
    };
    readonly MIN_COLUMN_WIDTH: {
        readonly SMALL: "240px";
        readonly MEDIUM: "300px";
        readonly LARGE: "360px";
    };
    readonly RESPONSIVE_CARDS: {
        readonly GAP: "24px";
        readonly MIN_WIDTH: "320px";
    };
};
/**
 * Height constraints
 */
export declare const HEIGHTS: {
    readonly HEADER_MOBILE: "56px";
    readonly HEADER_DESKTOP: "64px";
    readonly BUTTON_SMALL: "32px";
    readonly BUTTON_MEDIUM: "40px";
    readonly BUTTON_LARGE: "48px";
    readonly DROPDOWN_MAX: "320px";
    readonly LIST_MAX: "400px";
    readonly MODAL_CONTENT_MAX: "80vh";
    readonly CARD_MIN: "120px";
    readonly SECTION_MIN: "200px";
};
/**
 * Spacing scale based on 8px grid
 */
export declare const SPACING: {
    readonly XS: "4px";
    readonly SM: "8px";
    readonly MD: "16px";
    readonly LG: "24px";
    readonly XL: "32px";
    readonly XXL: "48px";
    readonly XXXL: "64px";
};
/**
 * Z-index scale for layering
 */
export declare const Z_INDEX: {
    readonly BEHIND: -1;
    readonly BASE: 0;
    readonly DROPDOWN: 100;
    readonly STICKY: 200;
    readonly FIXED: 300;
    readonly MODAL_BACKDROP: 400;
    readonly MODAL: 500;
    readonly POPOVER: 600;
    readonly TOOLTIP: 700;
    readonly NOTIFICATION: 800;
    readonly CRITICAL: 999;
};
/**
 * Animation durations
 */
export declare const ANIMATION: {
    readonly INSTANT: "0ms";
    readonly FAST: "150ms";
    readonly NORMAL: "250ms";
    readonly SLOW: "350ms";
    readonly VERY_SLOW: "500ms";
};
/**
 * Border radius scale (matching Radix UI theme)
 */
export declare const RADIUS: {
    readonly NONE: "0";
    readonly SMALL: "var(--radius-1)";
    readonly MEDIUM: "var(--radius-2)";
    readonly LARGE: "var(--radius-3)";
    readonly XLARGE: "var(--radius-4)";
    readonly FULL: "var(--radius-full)";
};
/**
 * Media query breakpoints
 */
export declare const BREAKPOINTS: {
    readonly MOBILE: "640px";
    readonly TABLET: "768px";
    readonly DESKTOP: "1024px";
    readonly WIDE: "1280px";
    readonly ULTRAWIDE: "1536px";
};
/**
 * Numerical sizes for component props that require numbers (e.g., width, height, size)
 */
export declare const NUMERIC_SIZES: {
    readonly ICON_SMALL: 16;
    readonly ICON_MEDIUM: 24;
    readonly ICON_LARGE: 32;
    readonly AVATAR_SMALL: 32;
    readonly AVATAR_MEDIUM: 48;
    readonly AVATAR_LARGE: 64;
    readonly QR_CODE_DEFAULT: 128;
    readonly QR_CODE_LARGE: 256;
};
/**
 * Utility functions for responsive values
 */
export declare const responsive: {
    /**
     * Get container width based on viewport
     */
    container: (viewport?: "mobile" | "tablet" | "desktop" | "wide") => "768px" | "1024px" | "1280px" | "1440px";
    /**
     * Get grid columns based on viewport
     */
    gridColumnsCount: (viewport?: "mobile" | "tablet" | "desktop" | "wide") => 1 | 2 | 4 | 3;
    /**
     * Responsive maxWidth values using our container constants
     */
    maxWidth: {
        cardSmall: {
            initial: string;
            sm: "320px";
        };
        cardMedium: {
            initial: string;
            sm: "400px";
        };
        cardLarge: {
            initial: string;
            sm: "560px";
        };
        modalSmall: {
            initial: string;
            sm: "400px";
        };
        modalMedium: {
            initial: string;
            sm: "560px";
        };
        modalLarge: {
            initial: string;
            sm: "720px";
        };
        popoverSmall: {
            initial: string;
            sm: "240px";
        };
        popoverMedium: {
            initial: string;
            sm: "320px";
        };
        popoverLarge: {
            initial: string;
            sm: "400px";
        };
        formNarrow: {
            initial: string;
            sm: "360px";
        };
        formDefault: {
            initial: string;
            sm: "480px";
        };
        formWide: {
            initial: string;
            sm: "640px";
        };
    };
    /**
     * Responsive grid columns using our grid constants
     */
    gridColumns: {
        responsive: {
            initial: "1";
            sm: "2";
            md: "3";
            lg: "4";
        };
        twoColumn: {
            initial: "1";
            sm: "2";
        };
        threeColumn: {
            initial: "1";
            sm: "2";
            md: "3";
        };
        fourColumn: {
            initial: "1";
            sm: "2";
            md: "3";
            lg: "4";
        };
    };
    /**
     * Responsive padding/margin using Radix space scale
     */
    spacing: {
        cardPadding: {
            initial: "3";
            sm: "4";
        };
        modalPadding: {
            initial: "4";
            sm: "6";
        };
        sectionPadding: {
            initial: "4";
            sm: "6";
            md: "8";
        };
        formPadding: {
            initial: "3";
            sm: "4";
            md: "5";
        };
    };
    /**
     * Responsive sizes using Radix size scale
     */
    size: {
        small: {
            initial: "1";
            sm: "2";
        };
        medium: {
            initial: "2";
            sm: "3";
        };
        large: {
            initial: "3";
            sm: "4";
        };
        xlarge: {
            initial: "4";
            sm: "5";
        };
    };
    /**
     * Responsive gap values
     */
    gap: {
        tight: {
            initial: "1";
            sm: "2";
        };
        normal: {
            initial: "2";
            sm: "3";
        };
        loose: {
            initial: "3";
            sm: "4";
        };
        spacious: {
            initial: "4";
            sm: "6";
        };
    };
};
/**
 * CSS helper for container queries
 */
export declare const containerQuery: (minWidth: string) => string;
/**
 * CSS helper for media queries
 */
export declare const mediaQuery: (minWidth: string) => string;
export type ContainerWidth = (typeof CONTAINER_WIDTHS)[keyof typeof CONTAINER_WIDTHS];
export type LayoutWidth = (typeof LAYOUT_WIDTHS)[keyof typeof LAYOUT_WIDTHS];
export type Spacing = (typeof SPACING)[keyof typeof SPACING];
export type ZIndex = (typeof Z_INDEX)[keyof typeof Z_INDEX];
export type AnimationDuration = (typeof ANIMATION)[keyof typeof ANIMATION];
export type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
//# sourceMappingURL=layout-constants.d.ts.map