welcome-ui/dist/types/utils/use-breakpoint.d.ts

Customizable design system with react, typescript, tailwindcss and ariakit.

import { ScreenSizes } from '../theme/types';
export type Breakpoint = Exclude<ScreenSizes, 'xxl'>;
export type BreakpointBoundary = 'excludeThreshold' | 'includeThreshold';
/**
 * Reactive current breakpoint name, derived from the theme's screen tokens
 * and the live viewport width.
 *
 * @param boundary - How to resolve a viewport that's exactly at a breakpoint's threshold:
 * - `'includeThreshold'` (default): the breakpoint starts as soon as the viewport reaches its
 *   threshold (`width >= threshold`). E.g. at exactly 736px, `useBreakpoint()` returns `'md'`.
 * - `'excludeThreshold'`: the breakpoint only starts once the viewport strictly passes its
 *   threshold (`width > threshold`). E.g. at exactly 736px, `useBreakpoint('excludeThreshold')`
 *   returns `'sm'` — `'md'` only kicks in at 737px.
 */
export declare function useBreakpoint(boundary?: BreakpointBoundary): Breakpoint;