import { type ReactNode } from 'react';
/**
 * Long content cut at a height behind a fade, with "Show more" under it
 * (Katerina, 7 October: a long description on a side panel pushed what was
 * under it out of sight).
 *
 * Content no taller than `maxHeight` is drawn whole, with no fade and no
 * button: the cut is for what would not fit, never a look. The height is
 * measured, and measured again whenever the content changes size, so an
 * edit that makes it long or short brings the button or takes it away.
 *
 * The fade ends in the surface the content sits on, which only the caller
 * knows: `surface`, by name, so no app writes a colour into the part.
 *
 * Focus arriving inside the cut content opens it: a field or a link there,
 * reached by Tab or a click, is never worked on out of sight.
 *
 * `action` is one more small button on the toggle's row, at its right
 * (Katerina, 8 October: Peek's block card puts "Open in Estiva Ship" level with
 * Show more). The row is drawn for it whether or not the content is cut.
 */
export interface ShowMoreProps {
    children: ReactNode;
    /** The height to cut at, in px. Default 96: about seven lines of caption text. */
    maxHeight?: number;
    /** What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`. */
    surface?: 'surface' | 'inset';
    /** A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives. Its words end where the content does. */
    action?: ReactNode;
    className?: string;
}
export declare function ShowMore({ children, maxHeight, surface, action, className }: ShowMoreProps): import("react").JSX.Element;
//# sourceMappingURL=ShowMore.d.ts.map