alert

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