Alert

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