alert

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import {
4  Info,
5  CheckCircle2,
6  AlertTriangle,
7  XCircle,
8  X,
9} from "lucide-react"
10 
11import { cn } from "@/lib/utils"
12import "./alert.css"
13 
14/* ------------------------------------------------------------------ */
15/*  Variant icons                                                      */
16/* ------------------------------------------------------------------ */
17 
18const variantIcons = {
19  brand: Info,
20  success: CheckCircle2,
21  warning: AlertTriangle,
22  danger: XCircle,
23} as const
24 
25/* ------------------------------------------------------------------ */
26/*  CVA                                                                */
27/* ------------------------------------------------------------------ */
28 
29const alertVariants = cva(
30  "flex items-start gap-[var(--layout-gap-md)] rounded-[var(--layout-radius-lg)] p-[var(--layout-padding-lg)] [&_svg]:shrink-0 [&_svg]:size-4",
31  {
32    variants: {
33      variant: {
34        brand: "alert-brand",
35        success: "alert-success",
36        warning: "alert-warning",
37        danger: "alert-danger",
38      },
39    },
40    defaultVariants: {
41      variant: "brand",
42    },
43  }
44)
45 
46/* ------------------------------------------------------------------ */
47/*  Alert                                                              */
48/* ------------------------------------------------------------------ */
49 
50function Alert({
51  className,
52  variant = "brand",
53  icon,
54  action,
55  actionPlacement = "bottom",
56  onDismiss,
57  children,
58  ...props
59}: React.ComponentProps<"div"> &
60  VariantProps<typeof alertVariants> & {
61    icon?: React.ReactNode | null
62    action?: React.ReactNode
63    actionPlacement?: "bottom" | "right"
64    onDismiss?: () => void
65  }) {
66  const showIcon = icon !== null
67  const IconComponent = variant ? variantIcons[variant] : variantIcons.brand
68 
69  return (
70    <div
71      data-slot="alert"
72      role="alert"
73      aria-live="polite"
74      className={cn(alertVariants({ variant, className }))}
75      {...props}
76    >
77      {showIcon && (
78        <span className="alert-icon mt-0.5 shrink-0" aria-hidden="true">
79          {icon !== undefined ? icon : <IconComponent />}
80        </span>
81      )}
82 
83      <div className="flex min-w-0 flex-1 flex-col gap-[var(--layout-gap-xs)]">
84        {children}
85        {action && actionPlacement === "bottom" && (
86          <div className="mt-[var(--layout-gap-sm)]">{action}</div>
87        )}
88      </div>
89 
90// … truncated