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  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-xl border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
8  {
9    variants: {
10      variant: {
11        default: "bg-card text-card-foreground",
12        destructive:
13          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
14        success:
15          "border-success/30 bg-success-muted text-success [&>svg]:text-current",
16        warning:
17          "border-warning/30 bg-warning-muted text-foreground [&>svg]:text-warning",
18        info:
19          "border-info/30 bg-info-muted text-info [&>svg]:text-current",
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<"div">) {
44  return (
45    <div
46      data-slot="alert-title"
47      className={cn(
48        "col-start-2 line-clamp-1 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 text-muted-foreground [&_p]:leading-relaxed",
65        className
66      )}
67      {...props}
68    />
69  )
70}
71 
72export { Alert, AlertTitle, AlertDescription }