import { type HTMLAttributes, type ReactNode } from 'react';
import { type VariantProps } from 'class-variance-authority';
export interface NotificationItem {
    /** Unique identifier for the notification. */
    id: string;
    /** Notification title — rendered on the first line. */
    title: string;
    /** Notification body — rendered as plain text. */
    description?: string;
    /** Optional leading glyph — a React node (usually a Lucide icon). */
    icon?: ReactNode;
    /** Optional action URL — when present the card title is an anchor. */
    url?: string;
    /** ISO-8601 timestamp of when the notification was created. */
    createdAt: string;
    /** Whether the notification has been seen. Unread items get accent styling. */
    read?: boolean;
}
export interface NotificationCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>, VariantProps<typeof cardVariants> {
    /** The notification to render. */
    item: NotificationItem;
    /**
     * Layout shape.
     * - `compact` — single-line row with the whole card clickable (used by
     *   NotificationTray).
     * - `dashboard` — alert-style block with explicit CTA and mark-as-read
     *   controls (used by dashboards / sidebars).
     */
    variant?: 'compact' | 'dashboard';
    /**
     * Row chrome for the `compact` variant (ignored for `dashboard`, which
     * always carries its own card border). `'flat'` (default) — chrome-less row
     * for use inside a bordered tray. `'elevated'` — each row carries its own
     * card chrome (border + `--shadow-sm`), matching `AppointmentCard` /
     * `ClinicalNoteCard` for placing rows directly on a rail (e.g. the Inbox).
     */
    surface?: 'flat' | 'elevated';
    /** Visual density. */
    size?: 'sm' | 'md';
    /** Fires when the card title / body is activated. */
    onActivate?: (item: NotificationItem) => void;
    /**
     * Fires when the read/unread status ball (the corner badge on the category
     * icon) is activated. Supply to make the ball an interactive toggle; omit and
     * it renders as a static read-state indicator.
     */
    onToggleRead?: (item: NotificationItem) => void;
    /** Fires when the dismiss control is activated. */
    onDismiss?: (item: NotificationItem) => void;
    /**
     * Label for the dashboard-variant CTA. Only rendered when `variant` is
     * `'dashboard'` and the item has a `url`.
     */
    ctaLabel?: string;
    /**
     * Label for the dashboard-variant mark-as-read link. Only rendered when
     * `variant` is `'dashboard'` and `onDismiss` is supplied.
     */
    dismissLabel?: string;
    /**
     * External exit-animation control. When supplied the card plays its
     * fade-out when this turns `true` and the consumer owns the subsequent
     * unmount (see NotificationTray). If omitted, the card self-manages the
     * exit on internal dismiss.
     */
    leaving?: boolean;
}
declare const cardVariants: (props?: ({
    variant?: "compact" | "dashboard" | null | undefined;
    size?: "sm" | "md" | null | undefined;
    state?: "read" | "unread" | null | undefined;
    surface?: "elevated" | "flat" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export declare function isSafeNotificationUrl(url: string): boolean;
export declare const NotificationCard: import("react").ForwardRefExoticComponent<NotificationCardProps & import("react").RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=notification-card.d.ts.map