@arolariu/components/dist/components/ui/alert.d.ts

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import * as React from "react";
/**
 * Defines the supported visual treatments for the Alert component.
 */
export type AlertVariant = "default" | "destructive";
/**
 * Represents the configurable props for the Alert component.
 *
 * @remarks
 * Extends native `<div>` attributes so alerts can expose ARIA relationships,
 * data attributes, and custom event handlers while selecting a visual variant.
 *
 * @default variant `"default"`
 */
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Additional CSS classes merged with the base alert surface styles.
     */
    className?: string;
    /**
     * The visual tone used to communicate neutral or destructive feedback.
     *
     * @default "default"
     */
    variant?: AlertVariant;
}
/**
 * A bordered feedback container for inline status, warning, or error messaging.
 *
 * @remarks
 * **Rendering Context**: Server- and client-compatible presentational component.
 *
 * Renders a `<div>` with `role="alert"` so assistive technologies announce urgent
 * content. Use {@link AlertTitle} and {@link AlertDescription} to build a clear,
 * accessible message structure.
 *
 * @example
 * ```tsx
 * <Alert variant="destructive">
 *   <AlertTitle>Payment failed</AlertTitle>
 *   <AlertDescription>Verify your card details and try again.</AlertDescription>
 * </Alert>
 * ```
 *
 * @see {@link AlertTitle}
 * @see {@link AlertDescription}
 * @see {@link https://base-ui.com/react/overview Base UI documentation}
 */
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Represents the configurable props for the AlertTitle component.
 *
 * @remarks
 * Extends native heading attributes and exposes a class override for styling.
 */
interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
    /**
     * Additional CSS classes merged with the alert title styles.
     */
    className?: string;
}
/**
 * The heading slot for the primary alert message.
 *
 * @remarks
 * **Rendering Context**: Server- and client-compatible presentational component.
 *
 * Renders an `<h5>` element styled for compact but prominent messaging. Pair it with
 * {@link AlertDescription} when the alert needs supporting explanatory text.
 *
 * @example
 * ```tsx
 * <AlertTitle>Heads up</AlertTitle>
 * ```
 *
 * @see {@link AlertDescription}
 * @see {@link https://base-ui.com/react/overview Base UI documentation}
 */
declare const AlertTitle: React.ForwardRefExoticComponent<AlertTitleProps & React.RefAttributes<HTMLHeadingElement>>;
/**
 * Represents the configurable props for the AlertDescription component.
 *
 * @remarks
 * Extends native `<div>` attributes so rich supporting content can be rendered inside
 * an alert body while preserving the component's spacing and typography.
 */
interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Additional CSS classes merged with the alert description styles.
     */
    className?: string;
}
/**
 * A supporting content slot for additional alert details.
 *
 * @remarks
 * **Rendering Context**: Server- and client-compatible presentational component.
 *
 * Renders a styled `<div>` so the alert body can contain paragraphs, lists, links,
 * or other rich inline content beneath the title.
 *
 * @example
 * ```tsx
 * <AlertDescription>API access will be restored after the billing issue is resolved.</AlertDescription>
 * ```
 *
 * @see {@link AlertTitle}
 * @see {@link https://base-ui.com/react/overview Base UI documentation}
 */
declare const AlertDescription: React.ForwardRefExoticComponent<AlertDescriptionProps & React.RefAttributes<HTMLDivElement>>;
export { Alert, AlertDescription, AlertTitle };
//# sourceMappingURL=alert.d.ts.map