Announcement bar

1"use client";2 3import { useId, useState, type HTMLAttributes, type ReactNode } from "react";4import { X } from "lucide-react";5 6export type AnnouncementBarProps = Omit<7  HTMLAttributes<HTMLElement>,8  "children" | "onChange" | "title"9> & {10  /** The message. Keep it to one sentence. */11  children: ReactNode;12  /** Inline action rendered beside the message, usually a link. */13  action?: ReactNode;14  /** Called after the bar closes, for analytics or persistence. */15  onDismiss?: () => void;16  dismissLabel?: string;17  /** Visual weight. `accent` uses the tinted surface. */18  tone?: "accent" | "neutral";19  /** Controlled visibility. Omit to let the bar manage itself. */20  open?: boolean;21  defaultOpen?: boolean;22  onOpenChange?: (open: boolean) => void;23  /** Accessible name for the announcement region. */24  label?: string;25};26 27/**28 * A dismissible site message with an inline action. The bar collapses its