import * as class_variance_authority_types from 'class-variance-authority/types';
import * as React from 'react';
import { VariantProps } from 'class-variance-authority';

/** The four message statuses, matching `Toaster`'s vocabulary. */
type CalloutStatus = 'info' | 'success' | 'warning' | 'danger';
/**
 * Every colour funnels through a single `--callout-ink` per status, declared on
 * the root so the icon and the border both resolve from one declaration — the
 * same ink-token pattern as `footer.tsx`, `link.tsx` and `step-indicator.tsx`.
 *
 * Values are the RAW `@nswds/tokens` semantic ROLE tokens (`--info-surface`,
 * `--info-text`, …), not the `--color-*` Tailwind bridge aliases. Two reasons,
 * both load-bearing:
 *
 * 1. Tailwind v4 tree-shakes unreferenced `@theme` keys, and an
 *    arbitrary-property reference is not a usage signal — the same trap
 *    documented on `button.tsx`'s semantic colours and `step-indicator.tsx`'s
 *    status inks. The raw tokens are plain `:root` declarations that always
 *    resolve.
 * 2. The role tokens already carry their own dark values, scoped
 *    `[data-theme=dark], .dark` by `@nswds/tokens`' `semantic/oklch.dark.css`
 *    (imported by theme.css). So every status flips with the theme on its own
 *    and this component needs no `dark:` variant at all — nothing here can
 *    drift out of step with the token library.
 */
declare const calloutVariants: (props?: ({
    status?: "success" | "warning" | "danger" | "info" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type CalloutProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof calloutVariants> & {
    /** Optional bold lead line above the body copy. */
    title?: React.ReactNode;
    /**
     * Replaces the status glyph. Pass `null` to drop it entirely — the status
     * is still carried by the border and surface, and by `title` where one is
     * supplied.
     */
    icon?: React.ElementType | null;
    ref?: React.Ref<HTMLDivElement>;
};
/**
 * A bordered notice that marks a passage of page content as informational,
 * confirming, cautionary or dangerous.
 *
 * **This is for STATIC content, and carries no live-region semantics.** No
 * `role="alert"`, no `aria-live`: those announce on mount, so a callout that is
 * simply part of the page would interrupt a screen-reader user every time they
 * arrived. Use `Toaster` for a message that appears in response to something
 * the user just did, or `FieldError` for inline validation — both already
 * handle announcement. If you render a `Callout` dynamically and it genuinely
 * needs announcing, own that at the call site with your own live region.
 *
 * **Status is never carried by colour alone** (WCAG 2.2, 1.4.1). The glyph
 * distinguishes the four statuses visually; where the distinction also matters
 * to a screen-reader user, say so in the `title` or the body copy rather than
 * relying on the icon, which is decorative here by design.
 */
declare function Callout({ className, status, title, icon, children, ref, ...props }: CalloutProps): React.JSX.Element;

export { Callout, type CalloutProps, type CalloutStatus, calloutVariants };