import React from 'react';
import { type EmptyStateHeadingLevel } from './EmptyState.js';
export interface NotificationItem {
    /** Stable id; what `onReadChange` and `onOpen` are called with. */
    id: string;
    /** What happened, in a line: "Invoice agent needs approval". */
    title: string;
    /** The detail, in a sentence or two. */
    description?: React.ReactNode;
    /** When it happened. A Date, or an ISO 8601 string. */
    timestamp: Date | string;
    isRead?: boolean;
    /** Where opening it goes. Without `href` or `onOpen` the title is text. */
    href?: string;
    /** A decorative mark before the text — an Avatar, an Icon. Hidden from AT. */
    icon?: React.ReactNode;
}
export interface NotificationsPanelLabels {
    today: string;
    yesterday: string;
    earlier: string;
    /** The count in the bar. */
    unread: (count: number) => string;
    markAllRead: string;
    markRead: string;
    markUnread: string;
    /** Read before the title of an unread notification. */
    unreadPrefix: string;
    /** Announced after each change. */
    markedRead: string;
    markedUnread: string;
    markedAllRead: string;
    emptyTitle: string;
    emptyDescription: string;
    loading: string;
}
export interface NotificationsPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
    notifications: NotificationItem[];
    /**
     * A notification's read state changed — its toggle was pressed, or it was
     * opened while unread. The caller owns the data and updates it.
     */
    onReadChange?: (id: string, isRead: boolean) => void;
    /** Shows "Mark all as read" while anything is unread. */
    onMarkAllRead?: () => void;
    /**
     * A notification was opened — its title pressed. With `href` it is also a
     * link. An unread one is marked read as well.
     */
    onOpen?: (id: string) => void;
    /** Rows of Skeleton in place of the list, while the first fetch runs. */
    isLoading?: boolean;
    /** "Today" and "Yesterday" are counted from here. Defaults to now. */
    now?: Date;
    /** For the times shown; defaults to the browser's. */
    locale?: string;
    /** The group headings' level. Defaults to 3, under the popover's title. */
    headingLevel?: EmptyStateHeadingLevel;
    /** Every string it shows or announces, for translation. */
    labels?: Partial<NotificationsPanelLabels>;
}
/**
 * NotificationsPanel — what the bell opens: notifications grouped by day,
 * unread ones marked, each one openable and markable, and a way to clear
 * them all.
 *
 * CONTENT, NOT A CONTAINER. It is the panel's contents; put it in a Popover
 * under the bell on a desktop — whose `title` names it — or a Drawer on a
 * phone. It owns no data: the caller passes `notifications` and updates them
 * from `onReadChange` and `onMarkAllRead`.
 *
 * UNREAD IS SAID, NOT ONLY SHOWN. An unread notification has a dot and a
 * heavier title; to a screen reader its title begins "Unread:". The bar
 * counts them in words. The bell that opens it should say the count too —
 * "Notifications, 3 unread" — for the same reason.
 *
 * NOTHING THAT HAS FOCUS DISAPPEARS. Each notification's toggle stays where
 * it is and swaps "Mark as read" for "Mark as unread", rather than vanishing
 * once pressed. "Mark all as read" does go — there is nothing left to mark —
 * so focus moves to the first notification first, not to the top of the page.
 * Each change is announced in a status region that is always mounted.
 *
 * GROUPED BY DAY, NEWEST FIRST. Today, Yesterday, Earlier — each a heading,
 * so a screen reader can jump between them — counted from the local calendar
 * day, not from 24-hour windows.
 */
export declare const NotificationsPanel: React.ForwardRefExoticComponent<NotificationsPanelProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=NotificationsPanel.d.ts.map