alert

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