Alert

1import { cva } from "class-variance-authority";
2import type { VariantProps } from "class-variance-authority";
3import type * as React from "react";
4 
5import { cn } from "@/lib/utils";
6 
7const alertVariants = cva(
8  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg 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",
9  {
10    defaultVariants: {
11      variant: "default",
12    },
13    variants: {
14      variant: {
15        default: "bg-card text-card-foreground",
16        destructive:
17          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
18      },
19    },
20  },
21);
22 
23const Alert = ({
24  className,
25  variant,
26  ...props
27}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) => (
28  <div
29    className={cn(alertVariants({ variant }), className)}
30    data-slot="alert"
31    role="alert"
32    {...props}
33  />
34);
35 
36const AlertTitle = ({ className, ...props }: React.ComponentProps<"div">) => (
37  <div
38    className={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
39    data-slot="alert-title"
40    {...props}
41  />
42);
43 
44const AlertDescription = ({ className, ...props }: React.ComponentProps<"div">) => (
45  <div
46    className={cn(
47      "col-start-2 grid justify-items-start gap-1 text-muted-foreground text-sm [&_p]:leading-relaxed",
48      className,
49    )}
50    data-slot="alert-description"
51    {...props}
52  />
53);
54 
55export { Alert, AlertTitle, AlertDescription };