/**
 * @file Banner.tsx
 * @input Uses React useState/useRef/useId, Button, Icon (with registry string names), StyleX
 * @output Exports Banner component, BannerProps, BannerStatus, BannerContainer types
 * @position Core implementation; consumed by index.ts, tested by Banner.test.tsx
 *
 * Visual structure:
 * - Root container: layout-only wrapper (flex column), no visual styling, no theme target
 * - Header area (themeProps 'banner'): colored status background with icon, title, description, actions, dismiss
 * - Content area (themeProps 'banner-content'): collapsible card background for additional content (children)
 * - Status icon (themeProps 'banner-icon'): the target rides on the default
 *   <Icon> itself — the element that paints — so 'status:X' overrides reach
 *   the glyph (#4166); for a custom `icon` node it stays on the layout wrapper
 * - No left border accent — color is expressed through the full header background
 * - Each visual area owns its own border-radius (no overflow:clip on the container)
 * - When children are provided, a collapse/expand toggle button appears in the end area
 *
 * A status added through `BannerStatusMap` augmentation has no entry in the
 * status lookups, so it renders with no status fill, no default glyph and the
 * polite `role="status"` rather than losing its ARIA role entirely.
 *
 * Title and description render as <div> (not <p>): they accept arbitrary
 * ReactNode content, and <p> cannot legally contain block-level children
 * (the HTML parser reparents them, desyncing SSR markup from the hydrated
 * DOM). Using <div> keeps these slots composable with any content. Their
 * StyleX styles set margin: 0 and explicit typography, so the rendered
 * appearance is identical to the previous <p>.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Banner/Banner.doc.mjs (props table, features, implementation notes)
 * - /packages/core/src/Banner/Banner.test.tsx (tests for new/changed behavior)
 * - /packages/core/src/Banner/index.ts (exports if types change)
 * - /apps/storybook/stories/Banner.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Banner/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { Elevation } from '../utils/types';
import type { BannerStatusMap, BannerContainerMap } from './index';
/**
 * Status type controlling the banner's icon and color.
 * Extensible via module augmentation of BannerStatusMap.
 */
export type BannerStatus = keyof BannerStatusMap;
/**
 * Container type of the banner.
 * - `card`: standalone card with border-radius and shadow
 * - `section`: full-width section banner (no border-radius)
 *
 * Extensible via module augmentation of BannerContainerMap.
 */
export type BannerContainer = keyof BannerContainerMap;
export interface BannerProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Status type controlling the icon and color scheme.
     */
    status: BannerStatus;
    /**
     * Title text or ReactNode displayed prominently in the header area.
     */
    title: ReactNode;
    /**
     * Optional description text below the title in the header area.
     */
    description?: ReactNode;
    /**
     * Override the default status icon.
     */
    icon?: ReactNode;
    /**
     * Whether the banner can be dismissed.
     * When true, shows a close button and manages internal dismissed state
     * so the banner disappears even if `onDismiss` is not provided.
     * @default false
     */
    isDismissable?: boolean;
    /**
     * Called when the dismiss button is clicked.
     * The banner will hide itself regardless of whether this callback is provided.
     */
    onDismiss?: () => void;
    /**
     * Action button rendered in the header area (end-aligned).
     * Typically an Button with a secondary or ghost variant.
     *
     * When the header is too narrow to hold the actions and a readable text
     * column, the whole end area wraps to its own row below the text.
     *
     * @example
     * ```
     * endContent={<Button label="Retry" variant="ghost" onClick={handleRetry} />}
     * ```
     */
    endContent?: ReactNode;
    /**
     * Container type of the banner.
     * - `card`: standalone card with border-radius
     * - `section`: full-width section banner (no border-radius)
     * @default 'card'
     */
    container?: BannerContainer;
    /**
     * Resting elevation — the shadow depth the banner sits at. Use for a
     * floating banner that hovers above content. `none` is the default inline
     * banner.
     * @default 'none'
     */
    elevation?: Elevation;
    /**
     * Whether the content area (children) starts expanded.
     * Only relevant when children are provided.
     * @default false
     */
    defaultIsExpanded?: boolean;
    /**
     * Extra content rendered below the header in a collapsible card-background area.
     * Use for rich content like lists, links, or detailed information.
     * When provided, a collapse/expand toggle button appears in the header.
     */
    children?: ReactNode;
}
/**
 * A persistent status notification banner for info, warning, error, or success messages.
 *
 * Two-part visual structure:
 * - Header: colored status background with icon, title, description, and actions
 * - Content (optional): collapsible card background area for additional rich content
 *
 * When children are provided, a collapse/expand chevron button appears in the
 * header end area (to the left of the dismiss button if present). Clicking it
 * toggles the visibility of the content area.
 *
 * Manages its own dismissed state internally — the banner hides on dismiss
 * even if `onDismiss` is not provided, so product teams don't need to wire
 * up state management for basic dismiss behavior.
 *
 * Uses `role="alert"` for error/warning and `role="status"` for info/success.
 *
 * @example
 * ```
 * <Banner status="info" title="New update available" />
 * <Banner
 *   status="error"
 *   title="Something went wrong"
 *   description="Please try again later."
 *   isDismissable
 *   onDismiss={() => logDismiss()}
 * />
 * <Banner
 *   status="error"
 *   title="Multiple errors found"
 *   description="The following issues need to be resolved:"
 *   isDismissable>
 *   <ul>
 *     <li>Email address is invalid</li>
 *     <li>Password must be at least 8 characters</li>
 *   </ul>
 * </Banner>
 * <Banner
 *   status="warning"
 *   title="Configuration changes"
 *   defaultIsExpanded>
 *   <p>Details here...</p>
 * </Banner>
 * ```
 */
export declare function Banner({ status, title, description, icon, isDismissable, onDismiss, endContent, container, elevation, defaultIsExpanded, children, xstyle, className, style, ref, onFocusCapture, onPointerDownCapture, ...rest }: BannerProps): import("react").JSX.Element | null;
export declare namespace Banner {
    var displayName: string;
}
//# sourceMappingURL=Banner.d.ts.map