Alert

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