Aurora Banner

1"use client";
2 
3import * as React from "react";
4import { CircleCheck, CircleX, Info, TriangleAlert, X } from "lucide-react";
5import { Button } from "./button";
6import { cn } from "@/lib/utils";
7 
8// ---------------------------------------------------------------------------
9// Types
10// ---------------------------------------------------------------------------
11 
12export type BannerStatus = "success" | "warn" | "error" | "info";
13export type BannerStyle = "elevated" | "tag";
14 
15export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
16  variant?: BannerStatus;
17  /**
18   * CD-parity alias for {@link variant}. When provided it takes precedence so
19   * Claude Design compositions can drive tone directly (`success | warn | error`).
20   */
21  tone?: BannerStatus;
22  kind?: BannerStyle;
23  title?: string;
24  description?: string;
25  onDismiss?: () => void;
26  /** CD-parity alias for {@link onDismiss}. */
27  onClose?: () => void;
28  action?: React.ReactNode;
29  children?: React.ReactNode;
30}
31 
32// ---------------------------------------------------------------------------
33// Status colour map
34// ---------------------------------------------------------------------------
35 
36const STATUS_COLOR: Record<BannerStatus, string> = {
37  success: "var(--aurora-success)",
38  warn:    "var(--aurora-warn)",
39  error:   "var(--aurora-error)",
40  info:    "var(--aurora-accent-primary)",
41};
42 
43const STATUS_LABEL: Record<BannerStatus, string> = {
44  success: "OK",
45  warn:    "Warn",
46  error:   "Error",
47  info:    "Info",
48};
49 
50// ---------------------------------------------------------------------------
51// Status icons — Lucide, 20px, currentColor
52// ---------------------------------------------------------------------------
53 
54function StatusIcon({ status }: { status: BannerStatus }) {
55  const iconProps = { size: 20, strokeWidth: 1.75, "aria-hidden": true } as const;
56 
57  if (status === "success") return <CircleCheck {...iconProps} />;
58  if (status === "warn") return <TriangleAlert {...iconProps} />;
59  if (status === "error") return <CircleX {...iconProps} />;
60  return <Info {...iconProps} />;
61}
62 
63function getLiveProps(status: BannerStatus) {
64  if (status === "warn" || status === "error") {
65    return { role: "alert" as const, "aria-live": "assertive" as const };
66  }
67 
68  return { role: "status" as const, "aria-live": "polite" as const };
69}
70 
71// ---------------------------------------------------------------------------
72// Elevated variant — Style A1 (CD-parity)
73// <div class="banner-elev">
74// … truncated