Alert

1import { Alert, AlertTitle, AlertDescription, AlertAction } from "@/components/ui/alert";
2
3<Alert />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import type React from "react";
5import { tv, type VariantProps } from "tailwind-variants";
6import { cn } from "@/lib/utils";
7
8export const alertVariants = tv({
9  base: [
10    "relative",
11    "px-3.5 py-3",
12    "grid w-full items-start gap-x-2 gap-y-0.5",
13    "text-card-foreground text-sm",
14    "rounded-xl border",
15    "has-[>svg]:has-data-[slot=alert-action]:grid-cols-[--spacing(4)_1fr_auto] has-[>svg]:grid-cols-[--spacing(4)_1fr]",
16    "has-[>svg]:gap-x-2 [&_svg]:h-lh [&_svg]:w-4",
17    "has-data-[slot=alert-action]:grid-cols-[1fr_auto]",
18  ],
19  variants: {
20    variant: {
21      default: [
22        "bg-input/4",
23        "[&_svg]:text-muted-foreground",
24        "[&_[data-slot=alert-action]_[data-variant=ghost]]:hover:bg-muted",
25      ],
26      destructive: [
27        "bg-destructive/4",
28        "border-destructive/32",