import { type ReactNode } from 'react';
import { type BreakpointDefinition } from './breakpoint-contract.js';
/** Tailwind's breakpoints, minus the ones no phone or tablet reaches. */
export declare const BREAKPOINTS: {
    readonly sm: 640;
    readonly md: 768;
    readonly lg: 1024;
    readonly xl: 1280;
};
export type Breakpoint = keyof typeof BREAKPOINTS;
export interface UseBreakpointResult {
    /** Largest breakpoint the window currently satisfies, or `base`. */
    current: Breakpoint | 'base';
    /** True when the window is at least this wide. */
    isAtLeast: (breakpoint: Breakpoint) => boolean;
    width: number;
    height: number;
    isLandscape: boolean;
}
export interface BreakpointResult<Name extends string> {
    current: Name | 'base';
    isAtLeast: (breakpoint: Name) => boolean;
    width: number;
    height: number;
    isLandscape: boolean;
}
export interface BreakpointProviderProps {
    children?: ReactNode;
}
export interface BreakpointContract<Name extends string> {
    Provider: (props: BreakpointProviderProps) => ReactNode;
    useBreakpoint: () => BreakpointResult<Name>;
    breakpoints: Readonly<Record<Name, number>>;
}
/**
 * Create app-specific responsive names. One Provider owns the window
 * subscription; every bound hook below it reads the same dimensions.
 */
export declare function createBreakpoints<const T extends BreakpointDefinition>(definition: T): BreakpointContract<keyof T & string>;
/**
 * Responsive state from the window size — the React Native answer to a media
 * query, which has no equivalent here.
 *
 * For styling, prefer Uniwind's responsive class prefixes (`md:flex-row`).
 * Reach for this when the *behaviour* changes, not just the look — rendering
 * a sheet on a phone and a dialog on a tablet, say.
 *
 * ```tsx
 * const { isAtLeast } = useBreakpoint();
 * return isAtLeast('md') ? <Dialog …/> : <BottomSheet …/>;
 * ```
 */
export declare function useBreakpoint(): UseBreakpointResult;
//# sourceMappingURL=use-breakpoint.d.ts.map