/**
 * Responsive Utilities and Breakpoints
 *
 * Shared responsive design utilities for all dropdown components
 */
import type { CSSProperties } from 'react';
export declare const breakpoints: {
    readonly xs: 0;
    readonly sm: 480;
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
};
export type Breakpoint = keyof typeof breakpoints;
export declare const mediaQueries: {
    readonly xs: `@media (max-width: ${number}px)`;
    readonly sm: `@media (min-width: 480px) and (max-width: ${number}px)`;
    readonly md: `@media (min-width: 768px) and (max-width: ${number}px)`;
    readonly lg: `@media (min-width: 1024px) and (max-width: ${number}px)`;
    readonly xl: "@media (min-width: 1280px)";
    readonly mobile: `@media (max-width: ${number}px)`;
    readonly tablet: `@media (min-width: 768px) and (max-width: ${number}px)`;
    readonly desktop: "@media (min-width: 1024px)";
    readonly touch: "@media (hover: none) and (pointer: coarse)";
    readonly mouse: "@media (hover: hover) and (pointer: fine)";
};
export declare const touchTargets: {
    /** Minimum touch target size per WCAG guidelines */
    readonly minimum: 44;
    /** Comfortable touch target size */
    readonly comfortable: 48;
    /** Large touch target for primary actions */
    readonly large: 56;
};
export declare const responsiveSpacing: {
    readonly mobile: {
        readonly xs: "4px";
        readonly sm: "8px";
        readonly md: "12px";
        readonly lg: "16px";
        readonly xl: "20px";
    };
    readonly desktop: {
        readonly xs: "4px";
        readonly sm: "8px";
        readonly md: "16px";
        readonly lg: "24px";
        readonly xl: "32px";
    };
};
export declare const responsiveTypography: {
    readonly mobile: {
        readonly xs: "11px";
        readonly sm: "13px";
        readonly md: "15px";
        readonly lg: "17px";
        readonly xl: "20px";
        readonly xxl: "24px";
    };
    readonly desktop: {
        readonly xs: "11px";
        readonly sm: "12px";
        readonly md: "14px";
        readonly lg: "16px";
        readonly xl: "18px";
        readonly xxl: "24px";
    };
};
/**
 * Generate responsive CSS class string
 */
export declare const generateResponsiveCSS: (componentName: string) => string;
/**
 * Inject responsive styles into document
 */
export declare const injectResponsiveStyles: (componentName: string) => void;
export interface ResponsiveState {
    isMobile: boolean;
    isTablet: boolean;
    isDesktop: boolean;
    isTouch: boolean;
    width: number;
    height: number;
    breakpoint: Breakpoint;
}
export declare const useResponsive: () => ResponsiveState;
export interface ResponsiveStyles {
    base: CSSProperties;
    mobile?: CSSProperties;
    tablet?: CSSProperties;
    desktop?: CSSProperties;
}
/**
 * Get styles for current breakpoint
 */
export declare const getResponsiveStyle: (styles: ResponsiveStyles, responsive: ResponsiveState) => CSSProperties;
export declare const safeAreaInsets: {
    readonly top: "env(safe-area-inset-top, 0px)";
    readonly bottom: "env(safe-area-inset-bottom, 0px)";
    readonly left: "env(safe-area-inset-left, 0px)";
    readonly right: "env(safe-area-inset-right, 0px)";
};
/**
 * Get padding with safe area insets
 */
export declare const getSafeAreaPadding: (position: 'top' | 'bottom' | 'left' | 'right', additionalPadding?: string) => string;
//# sourceMappingURL=responsive.d.ts.map