media-query-debugger/dist/index.d.ts

Advanced responsive debugger and responsive design testing tool with device mockups, media query monitoring, and debugging features for React applications

import * as React from 'react';
import React__default, { Component, ReactNode } from 'react';
import { ClassValue } from 'clsx';

interface Device {
    name: string;
    width: number;
    height: number;
    category: "mobile" | "tablet" | "desktop";
    pixelRatio: number;
    userAgent: string;
}
interface ResponsiveConfig {
    [key: string]: number;
}
interface ViewportInfo {
    width: number;
    height: number;
    aspectRatio: number;
    devicePixelRatio: number;
    orientation: "portrait" | "landscape";
}
interface ResponsiveDebuggerProps {
    /**
     * Custom breakpoint configuration
     * @default { sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }
     */
    breakpoints?: ResponsiveConfig;
    /**
     * Custom device presets
     */
    devices?: Device[];
    /**
     * Initial position of the debugger
     * @default 'bottom-right'
     */
    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    /**
     * Theme configuration
     * @default 'dark'
     */
    theme?: "light" | "dark" | "auto";
    /**
     * Whether to show the debugger by default
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Custom CSS class name
     */
    className?: string;
    /**
     * Custom styles
     */
    style?: React__default.CSSProperties;
    /**
     * Callback when breakpoint changes
     */
    onBreakpointChange?: (breakpoint: string) => void;
    /**
     * Callback when viewport changes
     */
    onViewportChange?: (viewport: ViewportInfo) => void;
    /**
     * Whether to enable keyboard shortcuts
     * @default true
     */
    enableKeyboardShortcuts?: boolean;
    /**
     * Custom keyboard shortcuts
     */
    keyboardShortcuts?: {
        toggle?: string;
        close?: string;
    };
}
interface DeviceMockupProps {
    device: Device;
    scale?: number;
    isRotated?: boolean;
    url?: string;
    onClose?: () => void;
    onScaleChange?: (scale: number) => void;
    onRotate?: (isRotated: boolean) => void;
    className?: string;
    style?: React__default.CSSProperties;
}
interface MediaQueryHookOptions {
    defaultMatches?: boolean;
    matchMedia?: (query: string) => MediaQueryList;
}
interface BreakpointHookOptions {
    breakpoints?: ResponsiveConfig;
    defaultBreakpoint?: string;
}

declare function ResponsiveDebugger({ breakpoints, devices, position, theme, defaultOpen, className, style, onBreakpointChange, onViewportChange, enableKeyboardShortcuts, keyboardShortcuts, }: ResponsiveDebuggerProps): React.JSX.Element;

declare function DeviceMockup({ device, scale, isRotated, url, onClose, onScaleChange, onRotate, className, style, }: DeviceMockupProps): React.JSX.Element;

interface ErrorBoundaryState {
    hasError: boolean;
    error?: Error;
}
interface ErrorBoundaryProps {
    children: ReactNode;
    fallback?: ReactNode;
    onError?: (error: Error, errorInfo: React__default.ErrorInfo) => void;
}
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: React__default.ErrorInfo): void;
    render(): string | number | boolean | React__default.JSX.Element | Iterable<React__default.ReactNode> | null | undefined;
}

declare function useMediaQuery(query: string, options?: MediaQueryHookOptions): boolean;

declare function useViewport(): ViewportInfo;

declare function useBreakpoint(options?: BreakpointHookOptions): {
    current: string;
    breakpoints: Record<string, boolean>;
    isAbove: (breakpoint: string) => boolean;
    isBelow: (breakpoint: string) => boolean;
};

declare const DEFAULT_BREAKPOINTS: ResponsiveConfig;
declare const DEFAULT_DEVICES: Device[];

declare function cn(...inputs: ClassValue[]): string;

export { DEFAULT_BREAKPOINTS, DEFAULT_DEVICES, type Device, DeviceMockup, type DeviceMockupProps, ErrorBoundary, type ResponsiveConfig, ResponsiveDebugger, type ResponsiveDebuggerProps, type ViewportInfo, cn, useBreakpoint, useMediaQuery, useViewport };