1import * as React from "react"
 2import { cva, type VariantProps } from "class-variance-authority"
 3
 4import { cn } from "@marzneshin/utils"
 5
 6const alertVariants = cva(
 7    "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
 8    {
 9        variants: {
10            variant: {
11                default: "bg-background text-foreground",
12                warning:
13                    "border-yellow/50 text-yellow dark:border-yellow [&>svg]:text-yellow",
14                destructive:
15                    "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
16            },
17        },
18        defaultVariants: {
19            variant: "default",
20        },
21    }
22)
23
24const Alert = React.forwardRef<
25    HTMLDivElement,
26    React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
27>(({ className, variant, ...props }, ref) => (
28    <div
29        ref={ref}
30        role="alert"
31        className={cn(alertVariants({ variant }), className)}
32        {...props}
33    />
34))
35Alert.displayName = "Alert"
36
37const AlertTitle = React.forwardRef<
38    HTMLParagraphElement,
39    React.HTMLAttributes<HTMLHeadingElement>
40>(({ className, ...props }, ref) => (
41    <h5
42        ref={ref}
43        className={cn("mb-1 font-medium leading-none tracking-tight", className)}
44        {...props}
45    />
46))
47AlertTitle.displayName = "AlertTitle"
48
49const AlertDescription = React.forwardRef<
50    HTMLParagraphElement,
51    React.HTMLAttributes<HTMLParagraphElement>
52>(({ className, ...props }, ref) => (
53    <div
54        ref={ref}
55        className={cn("text-sm [&_p]:leading-relaxed", className)}
56        {...props}
57    />
58))
59AlertDescription.displayName = "AlertDescription"
60
61export { Alert, AlertTitle, AlertDescription }