import "./callout.css";
import type * as React from "react";
import { useRender } from "@base-ui/react/use-render";
import { type IconName } from "./icon";
import { type StyleProps } from "./style_props";
export type CalloutTone = "info" | "success" | "warning" | "error" | "neutral";
interface CalloutProps extends StyleProps {
    /** Sets the accent (icon + tint + border) and the default icon. Default "info". */
    tone?: CalloutTone;
    /** Override the per-tone default icon (any kit icon), or `null` to drop it. */
    icon?: IconName | null;
    /** Compose the body with `CalloutTitle`, `CalloutText`, and `CalloutActions`. */
    children: React.ReactNode;
    /** Test id on the container. */
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * An inline callout — a tinted, bordered box carrying a short status message
 * (info / success / warning / error / neutral). Use it inline in a flow: form
 * feedback, a heads-up, a failure INSIDE a flow. NOT for a dead region — a list
 * that came back empty or FAILED is a `RegionState`; a
 * tinted strip there leaves the area collapsed and reading as a render bug.
 * For a blocking, dismissible
 * prompt use `Alert`; for a one-word status use `Status`. The tone is carried by
 * the icon + tint + border (never color alone — the icon and text stay legible),
 * so it reads on a glance and meets contrast on the light tint.
 *
 * COMPOUND — compose the body from the sub-components (like `Card`); this lets a
 * callout carry rich content and inline actions, not just a string message:
 *
 * ```tsx
 * <Callout tone="warning">
 *   <CalloutTitle>Phí chưa nhập</CalloutTitle>
 *   <CalloutText>Nhập trước khi xuất chứng từ, hoặc đặt = 0.</CalloutText>
 *   <CalloutActions>
 *     <Button title="Đặt = 0" onPress={fill} />
 *   </CalloutActions>
 * </Callout>
 * ```
 */
export declare function Callout({ tone, icon, children, testID, render, ref, ...props }: CalloutProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export interface CalloutTitleProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Bold heading at the top of a `Callout`. */
export declare function CalloutTitle({ children, render, ref, ...props }: CalloutTitleProps): React.JSX.Element;
export interface CalloutTextProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** Message body of a `Callout` — default text color for legibility on the tint. */
export declare function CalloutText({ children, render, ref, ...props }: CalloutTextProps): React.JSX.Element;
export interface CalloutActionsProps extends StyleProps {
    children: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/** A row of actions (e.g. buttons) at the foot of a `Callout`. */
export declare function CalloutActions({ children, render, ref, ...props }: CalloutActionsProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
export type { CalloutProps };