import { type ReactNode } from "react";
import type { Accent } from "../../core/AlouetteConfig";
import type { IconButtonProps } from "../actions/IconButton";
import type { SVGIconElement } from "../primitives/Icon";
import { type BoxProps } from "./Box";
export interface EditableSectionProps extends Pick<BoxProps, "className"> {
    accent?: Accent;
    /** Heading of the section, and the label of the region for assistive tech. */
    title: string;
    /**
     * Rendered beside the title — a Badge, or anything short. It stays out of
     * the region's accessible name, which is the title alone.
     */
    titleBadge?: ReactNode;
    /** Muted helper text under the title. */
    details?: ReactNode;
    /** Names the edit button for assistive tech — it has no visible text. */
    editAriaLabel: string;
    editIcon?: SVGIconElement;
    /** Variant of the edit IconButton. Defaults to `tonal`, or `soft` when the
     * section has an `accent`, where a tonal ground would dissolve. */
    editIconVariant?: IconButtonProps["variant"];
    disabled?: boolean;
    onEdit: () => void;
    /** The read-only body: as many blocks as the section needs. */
    children: ReactNode;
}
/**
 * A titled section holding a block of read-only content behind a single edit
 * affordance. Where EditableItem is one label with a summary that fits beside
 * it, this is a section whose value spans several lines. Owns no editor: pair
 * it with FormEditableSection for a react-hook-form modal, or compose your own
 * Modal from `onEdit`.
 *
 * It brings no material of its own — the caller picks it through `className`:
 * `surface` for a card, `surface lowered`, an outline, or nothing inside a
 * container that already has one.
 */
export declare function EditableSection({ title, titleBadge, details, editAriaLabel, editIcon, editIconVariant, accent, className, disabled, onEdit, children, }: EditableSectionProps): ReactNode;
//# sourceMappingURL=EditableSection.d.ts.map