import type { HTMLAttributes, ReactNode } from "react";
import type { BreakpointName } from "../../hooks/useBreakpoint";
export type ShowBreakpoint = Exclude<BreakpointName, "base">;
export interface ShowProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
    /** Render only when viewport width ≥ this breakpoint (inclusive). */
    above?: ShowBreakpoint;
    /** Render only when viewport width < this breakpoint (exclusive). */
    below?: ShowBreakpoint;
    children?: ReactNode;
}
/**
 * Declarative responsive show/hide gated by the v1 breakpoint scale.
 *
 * Implementation: CSS-driven via `[data-ods-show-above]` / `[data-ods-show-below]`
 * attribute selectors in `@octaviaflow/styles`. There's no hydration mismatch
 * because the server and client emit identical markup — the visibility
 * decision lives in CSS @media rules, not in JS state.
 *
 * The wrapper uses `display: contents` so it doesn't affect layout flow.
 *
 * @example
 *   // Mobile-only navigation drawer
 *   <Show below="md"><MobileNav /></Show>
 *
 *   // Desktop-only sidebar
 *   <Show above="lg"><Sidebar /></Show>
 *
 *   // Tablet-only strip (md range)
 *   <Show above="md" below="lg"><TabletStrip /></Show>
 */
export declare function Show({ above, below, children, ...rest }: ShowProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Show {
    var displayName: string;
}
//# sourceMappingURL=Show.d.ts.map