circuit-bricks/dist/utils/responsiveUtils.d.ts

A modular, Lego-style SVG circuit component system for React (ALPHA - Not for production use)

/**
 * Responsive Design Utilities
 *
 * Utilities for handling responsive design and adaptive layouts
 * in Circuit-Bricks across different screen sizes and devices.
 */
/**
 * Breakpoint definitions
 */
export declare const breakpoints: {
    readonly xs: 0;
    readonly sm: 576;
    readonly md: 768;
    readonly lg: 992;
    readonly xl: 1200;
    readonly xxl: 1400;
};
export type Breakpoint = keyof typeof breakpoints;
/**
 * Device type detection
 */
export type DeviceType = 'mobile' | 'tablet' | 'desktop';
/**
 * Screen size information
 */
export interface ScreenInfo {
    width: number;
    height: number;
    breakpoint: Breakpoint;
    deviceType: DeviceType;
    isPortrait: boolean;
    isLandscape: boolean;
    pixelRatio: number;
}
/**
 * Get current breakpoint based on width
 */
export declare const getBreakpoint: (width: number) => Breakpoint;
/**
 * Get device type based on width and user agent
 */
export declare const getDeviceType: (width: number, userAgent?: string) => DeviceType;
/**
 * Hook for responsive screen information
 */
export declare const useScreenInfo: () => ScreenInfo;
/**
 * Hook for breakpoint-specific values
 */
export declare const useBreakpointValue: <T>(values: Partial<Record<Breakpoint, T>>, fallback: T) => T;
/**
 * Responsive grid configuration
 */
export interface ResponsiveGridConfig {
    gridSize: number;
    snapThreshold: number;
    minZoom: number;
    maxZoom: number;
    zoomStep: number;
    panSensitivity: number;
}
/**
 * Get responsive grid configuration based on device type
 */
export declare const useResponsiveGridConfig: () => ResponsiveGridConfig;
/**
 * Responsive component sizing
 */
export interface ResponsiveComponentConfig {
    minComponentSize: number;
    maxComponentSize: number;
    portSize: number;
    wireStrokeWidth: number;
    fontSize: number;
    iconSize: number;
}
/**
 * Get responsive component configuration
 */
export declare const useResponsiveComponentConfig: () => ResponsiveComponentConfig;
/**
 * Check if current screen matches a breakpoint
 */
export declare const useMatchesBreakpoint: (targetBreakpoint: Breakpoint) => boolean;
/**
 * Get optimal canvas dimensions for current screen
 */
export declare const useOptimalCanvasDimensions: (containerWidth?: number, containerHeight?: number) => {
    width: number;
    height: number;
};
//# sourceMappingURL=responsiveUtils.d.ts.map