Alert

1import * as React from "react";
2import { cva } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const alertVariants = cva(
7	"grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert",
8	{
9		variants: {
10			variant: {
11				default: "bg-card text-card-foreground",
12				destructive:
13					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
14			},
15		},
16		defaultVariants: {
17			variant: "default",
18		},
19	},
20);
21 
22function Alert({ className = "", variant = "default", ...props }) {
23	return (
24		<div
25			data-slot="alert"
26			role="alert"
27			className={cn(alertVariants({ variant }), className)}
28			{...props}
29		/>
30	);
31}
32 
33function AlertTitle({ className = "", ...props }) {
34	return (
35		<div
36			data-slot="alert-title"
37			className={cn(
38				"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
39				className,
40			)}
41			{...props}
42		/>
43	);
44}
45 
46function AlertDescription({ className = "", ...props }) {
47	return (
48		<div
49			data-slot="alert-description"
50			className={cn(
51				"text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
52				className,
53			)}
54			{...props}
55		/>
56	);
57}
58 
59function AlertAction({ className = "", ...props }) {
60	return (
61		<div
62			data-slot="alert-action"
63			className={cn("absolute top-1.5 right-2", className)}
64			{...props}
65		/>
66	);
67}
68 
69Alert.displayName = "Alert";
70AlertTitle.displayName = "AlertTitle";
71AlertDescription.displayName = "AlertDescription";
72AlertAction.displayName = "AlertAction";
73 
74export { Alert, AlertTitle, AlertDescription, AlertAction };