import "./danger_section.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type ConfirmRequest } from "./alert";
import { type StyleProps } from "./style_props";
/**
 * ONE ACT INSIDE THE FENCE, and the question it has to ask first.
 *
 * The confirm is not optional and not a prop the caller may forget: an act
 * declared here CANNOT run without it. That is the whole of what the fence has
 * been missing — it drew the hazard and confirmed nothing, so the kit's own
 * worked examples all shipped an unconfirmed delete under a heading that says
 * the act is irreversible.
 */
export interface DangerAction {
    key: string;
    /** The button's words — VERB AND NOUN ("Delete order"), the same phrase the
     *  confirm's commit carries. */
    label: string;
    confirm: ConfirmRequest;
}
export interface DangerSectionProps extends StyleProps {
    /** Section heading. Defaults to the locale's `dangerSection.title`
     *  ("Danger zone" / "Vùng nguy hiểm"). */
    title?: string;
    /** A short line spelling out the consequence of the action (it's usually
     *  irreversible — say so here). */
    description?: string;
    /**
     * THE FENCE'S ACTS, each confirming by construction — the standard shape, and
     * the one to reach for. Drawn as `danger` buttons whose press raises
     * {@link DangerAction.confirm}.
     */
    actions?: readonly DangerAction[];
    /** A NON-STANDARD body — an act that is not a button, a form, a second
     *  statement. Its own BLOCK above the acts row, because a form or a sentence
     *  laid out as one more item in a row of buttons reads as a button. An
     *  ordinary destructive act belongs in `actions`, where the confirm cannot be
     *  left out. */
    children?: React.ReactNode;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A destructive section set visually APART — for the irreversible record actions
 * (delete, archive, transfer ownership) that belong at the BOTTOM of a record or
 * settings surface, away from the everyday fields. A soft danger-tinted frame +
 * a danger heading mark it as a hazard without shouting; the consequence goes in
 * `description`, and the acts go in `actions` — each carrying the `ConfirmRequest`
 * it raises, so the fence CONFIRMS rather than merely warning.
 *
 * ```tsx
 * <DangerSection
 *   description={labels.deleteConsequence}
 *   actions={[{
 *     key: "delete",
 *     label: labels.deleteOrder,
 *     confirm: {
 *       title: labels.deleteQuestion(order.name),
 *       confirmLabel: labels.deleteOrder,
 *       onConfirm: remove,
 *     },
 *   }]}
 * />
 * ```
 *
 * ONE LEFT EDGE, and it is `Callout`'s anatomy that gets it: the glyph sits in
 * the root ROW beside a `body` column holding title, consequence and actions, so
 * all three derive from the same edge. Put the glyph INSIDE a heading row instead
 * — the obvious way to write it — and only the TITLE moves right, so the loudest
 * line in the block sits 22px past the sentence explaining it and the button
 * under both starts somewhere else again. Three edges inside one padded box, on
 * the one primitive that exists so a hazard is not hand-rolled.
 */
export declare function DangerSection({ title, description, actions, children, testID, render, ref, ...props }: DangerSectionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;