import { type ReactNode } from "react";
import { useWindowDimensions } from "react-native";
import { type BreakpointKey } from "./tokens.js";
export type { BreakpointKey } from "./tokens.js";
/** A value that varies by breakpoint. `base` is the desktop default (required). */
export type Responsive<T> = {
    base: T;
} & Partial<Record<BreakpointKey, T>>;
/** Pure picker: resolve a Responsive map to its active value at the given width.
 *  A non-positive width (unknown viewport: SSR, the pre-layout first frame)
 *  resolves to `base`, the desktop variant. */
export declare function responsive<T>(width: number, map: Responsive<T>): T;
/** The server-render breakpoint assumption. ThemeProvider's `ssrBreakpoint`
 *  prop feeds this; components never read it directly (useBreakpoint does). */
export declare const SsrBreakpointContext: import("react").Context<"base" | BreakpointKey>;
/**
 * Pin the viewport bucket for a subtree: every `useBreakpoint` /
 * `useResponsive` / `useFormFactor` consumer under the provider resolves
 * `value` instead of the real window, so a preview stage or a test can
 * exercise a phone or tablet branch inside a desktop window (the docs
 * playground's form-factor switcher). `null` clears the override (the real
 * viewport applies), which lets a switcher's "desktop" state simply stop
 * simulating.
 *
 * Two boundaries to know:
 * - Context reaches REACT descendants. The kit Portal renders overlay
 *   children at the OverlayProvider's outlet, so an override mounted BELOW
 *   the provider never reaches portaled overlay content (menus, dialogs,
 *   toasts): mount the override above the OverlayProvider when overlays
 *   should simulate too, as the docs playground does.
 * - This simulates the VIEWPORT tier only. Container-measured components
 *   (DataTable, Grid, Row `stacks`) follow their real measured width:
 *   constrain the subtree's width to the matching size alongside the
 *   override, and both mechanisms tell the same story.
 */
export declare function BreakpointOverride({ value, children }: {
    value: BreakpointKey | "base" | null;
    children?: ReactNode;
}): import("react").JSX.Element;
/** The active viewport bucket: the smallest breakpoint covering the current
 *  window width ("sm" on phones), or "base" on a desktop wider than 2xl.
 *  Re-renders only when the bucket changes, never per resize pixel. A
 *  `BreakpointOverride` ancestor wins over the real window. */
export declare function useBreakpoint(): BreakpointKey | "base";
/** Hook form: resolve a Responsive map against the current viewport width. */
export declare function useResponsive<T>(map: Responsive<T>): T;
/** The semantic form-factor tier over the breakpoints: phone at/below sm (640),
 *  tablet at/below lg (1024), desktop above (macOS and desktop web included).
 *  Derived from `breakpoints`, so the two can never drift. */
export type FormFactor = "phone" | "tablet" | "desktop";
/** Pure form of the tier: the form factor at the given width (non-positive
 *  widths are the unknown viewport and resolve to "desktop", like `base`). */
export declare function formFactor(width: number): FormFactor;
/** The current viewport's form factor. App-shell vocabulary: prefer this over
 *  raw buckets for "rail or drawer" / "one column or three" decisions. */
export declare function useFormFactor(): FormFactor;
export { useWindowDimensions };
//# sourceMappingURL=responsive.d.ts.map