alert

1import * as React from "react"
2import { cva, VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const alertVariants = cva(
7	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
8	{
9		variants: {
10			variant: {
11				default:
12					"bg-card text-card-foreground [&_*[data-slot=alert-description]]:text-muted-foreground",
13				warning:
14					"bg-warning border-warning-border text-warning-foreground [&_*[data-slot=alert-description]]:text-warning-foreground/70",
15				danger:
16					"bg-danger border-danger-border text-danger-foreground [&_*[data-slot=alert-description]]:text-danger-foreground/70",
17				info: "bg-info border-info-border text-info-foreground [&_*[data-slot=alert-description]]:text-info-foreground/70",
18				success:
19					"bg-success border-success-border text-success-foreground [&_*[data-slot=alert-description]]:text-success-foreground/70",
20			},
21		},
22		defaultVariants: {
23			variant: "default",
24		},
25	}
26)
27 
28function Alert({
29	className,
30	variant,
31	...props
32}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
33	return (
34		<div
35			data-slot="alert"
36			role="alert"
37			className={cn(alertVariants({ variant }), className)}
38			{...props}
39		/>
40	)
41}
42 
43function AlertTitle({ className, ...props }: React.ComponentProps<"h4">) {
44	return (
45		<h4
46			data-slot="alert-title"
47			className={cn(
48				"col-start-2 min-h-4 font-medium tracking-tight",
49				className
50			)}
51			{...props}
52		/>
53	)
54}
55 
56function AlertDescription({
57	className,
58	...props
59}: React.ComponentProps<"div">) {
60	return (
61		<div
62			data-slot="alert-description"
63			className={cn(
64				"col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
65				className
66			)}
67			{...props}
68		/>
69	)
70}
71 
72export { Alert, AlertTitle, AlertDescription }