Alert

1import type * 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 items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-sm text-card-foreground has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-2 has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] [&>svg]:h-lh [&>svg]:w-4",
8  {
9    defaultVariants: {
10      variant: "default",
11    },
12    variants: {
13      variant: {
14        default:
15          "bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground",
16        error:
17          "border-destructive/32 bg-destructive/4 [&>svg]:text-destructive",
18        info: "border-info/32 bg-info/4 [&>svg]:text-info",
19        success: "border-success/32 bg-success/4 [&>svg]:text-success",
20        warning: "border-warning/32 bg-warning/4 [&>svg]:text-warning",
21      },
22    },
23  },
24);
25 
26export function Alert({
27  className,
28  variant,
29  ...props
30}: React.ComponentProps<"div"> &
31  VariantProps<typeof alertVariants>): React.ReactElement {
32  return (
33    <div
34      className={cn(alertVariants({ variant }), className)}
35      data-slot="alert"
36      role="alert"
37      {...props}
38    />
39  );
40}
41 
42export function AlertTitle({
43  className,
44  ...props
45}: React.ComponentProps<"div">): React.ReactElement {
46  return (
47    <div
48      className={cn("font-medium [svg~&]:col-start-2", className)}
49      data-slot="alert-title"
50      {...props}
51    />
52  );
53}
54 
55export function AlertDescription({
56  className,
57  ...props
58}: React.ComponentProps<"div">): React.ReactElement {
59  return (
60    <div
61      className={cn(
62        "text-muted-foreground flex flex-col gap-2.5 [svg~&]:col-start-2",
63        className,
64      )}
65      data-slot="alert-description"
66      {...props}
67    />
68  );
69}
70 
71export function AlertAction({
72  className,
73  ...props
74}: React.ComponentProps<"div">): React.ReactElement {
75  return (
76    <div
77      className={cn(
78        "flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3",
79        className,
80      )}
81      data-slot="alert-action"
82      {...props}
83    />
84  );
85}