/** * Named breakpoints matching Tailwind's default scale. * * - `xs`: 0–639 px (phones) * - `sm`: 640–767 px (large phones / small tablets) * - `md`: 768–1023 px (tablets) * - `lg`: 1024–1279 px (desktops) * - `xl`: 1280 px+ (large desktops) */ export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl"; type ThresholdBreakpoint = Exclude; export type BreakpointResult = { /** Current breakpoint name. */ current: Breakpoint; /** True when the viewport is narrower than the given breakpoint. */ below(bp: ThresholdBreakpoint): boolean; /** True when the viewport is at or wider than the given breakpoint (same as Tailwind `md:`, `lg:`, etc.). */ above(bp: ThresholdBreakpoint): boolean; }; /** * Reactive breakpoint hook — updates when the viewport crosses a Tailwind breakpoint boundary. * * Uses ResizeObserver on `` so it responds to DevTools responsive mode, * iframe resizing, and regular window resize. * * ```ts * const bp = useBreakpoint(); * bp.current // "md" * bp.below("md") // true when viewport < 768px * bp.above("lg") // true when viewport >= 1024px * ``` */ export declare function useBreakpoint(): BreakpointResult; export {}; //# sourceMappingURL=useBreakpoint.d.ts.map