Alert

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