| 1 | import * as React from "react"; |
| 2 | import { cva, type |
| 3 | import { cn } |
| 4 | |
| 5 | const alertVariants = cva |
| 6 | "group/alert relative grid w-full 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", |
| 7 | { |
| 8 | variants: { |
| 9 | variant: { |
| 10 | default: "bg-card text-card-foreground", |
| 11 | destructive: |
| 12 | "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current", |
| 13 | }, |
| 14 | }, |
| 15 | defaultVariants: { |
| 16 | variant: "default", |
| 17 | }, |
| 18 | }, |
| 19 | ); |
| 20 | |
| 21 | function Alert({ |
| 22 | className, |
| 23 | variant, |
| 24 | ...props |
| 25 | }: React. |
| 26 | return ( |
| 27 | <div |
| 28 | data-slot="alert" |
| 29 | role="alert" |
| 30 | className={cn(alertVariants |
| 31 | {...props} |
| 32 | /> |
| 33 | ); |
| 34 | } |
| 35 | |
| 36 | function AlertTitle({ className |
| 37 | return ( |
| 38 | <div |
| 39 | data-slot="alert-title" |
| 40 | className={cn( |
| 41 | "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", |
| 42 | className, |
| 43 | )} |
| 44 | {...props} |
| 45 | /> |
| 46 | ); |
| 47 | } |
| 48 | |
| 49 | function AlertDescription({ |
| 50 | className, |
| 51 | ...props |
| 52 | }: React. |
| 53 | return ( |
| 54 | <div |
| 55 | data-slot="alert-description" |
| 56 | className={cn( |
| 57 | "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", |
| 58 | className, |
| 59 | )} |
| 60 | {...props} |
| 61 | /> |
| 62 | ); |
| 63 | } |
| 64 | |
| 65 | function AlertAction({ className |
| 66 | return ( |
| 67 | <div |
| 68 | data-slot="alert-action" |
| 69 | className={cn(" |
| 70 | {...props} |
| 71 | /> |
| 72 | ); |
| 73 | } |
| 74 | |
| 75 | export { Alert, AlertTitle |