/**
 * Breakpoints Utility — reactive, JS-accessible breakpoint helpers.
 *
 * Mirror the same breakpoints used in the CSS utilities layer.
 * Provides imperative (`matches`) and reactive (`onChange`) APIs.
 *
 * @example
 * const bp = getBreakpoint();
 * // => 'md'
 *
 * const off = onBreakpointChange(({ name, matches }) => {
 *   console.log(`${name}: ${matches}`);
 * });
 * off(); // remove listener
 */
export type BreakpointName = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
export interface Breakpoint {
    name: BreakpointName;
    /** Minimum width in pixels (inclusive). */
    minWidth: number;
}
/** Breakpoints matching the CSS utilities layer (mobile-first). */
export declare const BREAKPOINTS: readonly Breakpoint[];
export interface BreakpointChangeEvent {
    name: BreakpointName;
    minWidth: number;
    /** Whether the viewport now matches (≥ minWidth). */
    matches: boolean;
}
type BreakpointHandler = (event: BreakpointChangeEvent) => void;
/**
 * Get the current active (largest matching) breakpoint name.
 * Falls back to `'xs'` in non-browser environments.
 */
export declare function getBreakpoint(): BreakpointName;
/**
 * Returns true if the viewport is at least the given breakpoint width.
 */
export declare function matchesBreakpoint(name: BreakpointName): boolean;
/** Convenience helpers */
export declare const isMobile: () => boolean;
export declare const isTablet: () => boolean;
export declare const isDesktop: () => boolean;
/**
 * Subscribe to breakpoint changes.
 * The callback fires whenever any breakpoint boundary is crossed.
 * Returns an unsubscribe function.
 */
export declare function onBreakpointChange(handler: BreakpointHandler): () => void;
/**
 * Watch a SPECIFIC breakpoint and fire callback when it activates or deactivates.
 * Returns an unsubscribe function.
 */
export declare function watchBreakpoint(name: BreakpointName, handler: (matches: boolean) => void): () => void;
/**
 * Returns a value based on the current breakpoint (Tailwind-like responsive helper).
 *
 * @example
 * const cols = responsive({ xs: 1, md: 2, lg: 3 });
 * // => 3 on large screens
 */
export declare function responsive<T>(values: Partial<Record<BreakpointName, T>>): T | undefined;
/**
 * Get the pixel value of a breakpoint.
 */
export declare function breakpointValue(name: BreakpointName): number;
export {};
//# sourceMappingURL=breakpoints.d.ts.map