import { type ReactNode } from "react";
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;
export declare function resolveFromBucket<T>(bucket: BreakpointKey | "base", map: Responsive<T>): T;
export declare function seedWidth(bucket: BreakpointKey | "base", windowWidth: number): number;
/** 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. It renders only a context provider: no view, nothing painted,
 * nothing added to the accessibility tree.
 *
 * Three things to know:
 * - Portaled overlay content (menus, dialogs, toasts) resolves the override of
 *   the component that opened it, wherever the OverlayProvider sits: the kit
 *   Portal carries the publisher's override into the outlet it renders in, the
 *   way it carries the theme, because a card that closes on an outside tap
 *   paints in the window's outermost provider, above any override mounted
 *   around a nearer one (the docs playground's).
 * - It pins the tier, not the geometry. Window-level chrome under it (the
 *   Sidebar and FilterPanel drawers, AnchoredOverlay's phone sheet) switches to
 *   its phone presentation but lays out against the real window it paints in,
 *   the root overlay layer: a simulated 375 px phone in a desktop window opens
 *   its drawer or sheet across the desktop window.
 * - 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. Their
 *   pre-measurement seed (`seedViewport`, `useContainerWidth`'s fallback)
 *   follows the override, and the measured width wins once it lands.
 */
export declare function BreakpointOverride({ value, children }: {
    /** The bucket to resolve under the provider (`"sm"` for a phone, `"base"` for a
     *  desktop wider than 2xl), or `null` for the real window. */
    value: BreakpointKey | "base" | null;
    /** The subtree that resolves `value`. */
    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, and under one the
 *  reading holds no window subscription at all. */
export declare function useBreakpoint(): BreakpointKey | "base";
/**
 * KIT-INTERNAL: the window's width in px, for the one kind of reading that is sized by it
 * rather than switched by it: the hand-off's fluid headlines (`clamp(min, N vw, max)`, the
 * Typography `hero` and `pageTitle` roles). Unlike useBreakpoint it re-renders on every
 * resize pixel, so it is read only where `active` is set; inactive or on the server it holds
 * no subscription and reads 0, which a clamp resolves to its minimum. A BreakpointOverride
 * pins the tier, not the geometry, so this follows the real window under one, as the
 * window-level chrome does.
 */
export declare function useViewportWidth(active: boolean): number;
/** 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. The tier is the window's width
 *  alone, on every platform: a narrow or zoomed desktop window is the phone or
 *  tablet tier, and a landscape phone is usually the tablet tier. There is no
 *  separate desktop-OS tier; a macOS or desktop web window is placed by its width
 *  like any other. Derived from `breakpoints`, so the two can never drift. */
export type FormFactor = "phone" | "tablet" | "desktop";
/** Pure form of the tier: the form factor of a window the given width wide
 *  (non-positive widths are the unknown viewport and resolve to "desktop", like
 *  `base`). */
export declare function formFactor(width: number): FormFactor;
/** The current window's form factor, by its width (see `FormFactor`). App-shell
 *  vocabulary: prefer this over raw buckets for "rail or drawer" / "one column or
 *  three" decisions. A `BreakpointOverride` ancestor wins over the real window. */
export declare function useFormFactor(): FormFactor;
//# sourceMappingURL=responsive.d.ts.map