import { CSSProperties, ElementType, ReactNode } from 'react';
export type ResponsiveLateProps = {
    children: (breakpoint: number) => ReactNode;
};
type ResponsiveMultiplePropsWithCases<TCase extends string> = {
    /**
     * Tuple of user defined identifiers for each breakpoint.
     * `null` means that the prior case should be used.
     *
     * @example ["tall", null, "grande", "venti"]
     */
    cases: (TCase | null)[];
    children: (caseName: TCase) => ReactNode;
};
type ResponsiveMultiplePropsWithoutCases = {
    cases?: never;
    children: () => (ReactNode | null)[];
};
export type ResponsiveMultipleProps<TCase extends string | null> = ([TCase] extends [string] ? ResponsiveMultiplePropsWithCases<TCase> : ResponsiveMultiplePropsWithoutCases) & {
    /** Element type to render. Defaults to `div`. */
    as?: ElementType;
    /** Value of the `display` CSS property for the container of the current breakpoint. Defaults to `contents`. */
    display?: CSSProperties['display'];
};
/**
 * Renders a different component (or piece of JSX) based on the current viewport breakpoint.
 * Two strategies are available: `Responsive.Late` and `Responsive.Multiple`.
 *
 * ⚠️ **Use responsibly!** We should always prefer using a simple media query or responsive
 * tuple when it’s possible. This component is meant for edge cases.
 *
 * Prior Art:
 * - @arsty/fresnel — https://github.com/artsy/fresnel
 * - The Perils of Rehydration — https://joshwcomeau.com/react/the-perils-of-rehydration
 */
export declare const Responsive: {
    Late: typeof ResponsiveLate;
    Multiple: typeof ResponsiveMultiple;
};
/**
 * Strategy "late" does not render anything on the server, and on the client, it just renders the
 * current breakpoint after the first `useEffect` is called. It should be used for components that
 * render data fetched on the client (e.g. that depends on the user), with a skeleton alongside it.
 */
declare function ResponsiveLate({ children }: ResponsiveLateProps): import("react").JSX.Element | null;
/**
 * Strategy "multiple" renders all breakpoints and hides all but the current one with a media query.
 * The `cases` prop is optional. When it's set, the API is similar to `Responsive.Late`, where `children`
 * is a function that receives the current case name (instead of the current breakpoint) and should return
 * a single `ReactNode`. When `cases` is not set, `children` doesn't receive any argument and is expected
 * to return an array of `ReactNode`s to render depending on the current breakpoint (or `null` to render
 * the previous one), similar to responsive tuples in the `sx` prop. Note that any `useEffect` used in
 * any of the breakpoints (not just the current one) will run simultaneously.
 */
declare function ResponsiveMultiple<TCase extends string | null>({ as: Element, display, ..._props }: ResponsiveMultipleProps<TCase>): import("react").JSX.Element;
export {};
//# sourceMappingURL=Responsive.d.ts.map