Alert

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { AlertCircle, AlertTriangle, CheckCircle2, Info, Terminal, X } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6 
7const alertVariants = cva(
8  "relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 border p-4 transition-[color,background-color,border-color,transform,opacity] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)] [&>svg]:mt-0.5 [&>svg]:size-4",
9  {
10    variants: {
11      variant: {
12        default:
13          "[--alert-bg:var(--poyraz-surface-subtle)] [--alert-border:var(--poyraz-border)] [--alert-fg:var(--poyraz-foreground)] [--alert-icon:var(--poyraz-muted-foreground)] [--alert-solid:var(--poyraz-foreground)]",
14        info: "[--alert-bg:var(--poyraz-info)] [--alert-border:var(--poyraz-info-border)] [--alert-fg:var(--poyraz-info-foreground)] [--alert-icon:var(--poyraz-info-icon)] [--alert-solid:var(--poyraz-info-solid)]",
15        success:
16          "[--alert-bg:var(--poyraz-success)] [--alert-border:var(--poyraz-success-border)] [--alert-fg:var(--poyraz-success-foreground)] [--alert-icon:var(--poyraz-success-icon)] [--alert-solid:var(--poyraz-success-solid)]",
17        warning:
18          "[--alert-bg:var(--poyraz-warning)] [--alert-border:var(--poyraz-warning-border)] [--alert-fg:var(--poyraz-warning-foreground)] [--alert-icon:var(--poyraz-warning-icon)] [--alert-solid:var(--poyraz-warning-solid)]",
19        destructive:
20          "[--alert-bg:var(--poyraz-destructive-muted)] [--alert-border:var(--poyraz-invalid-border)] [--alert-fg:var(--poyraz-destructive-muted-foreground)] [--alert-icon:var(--poyraz-destructive)] [--alert-solid:var(--poyraz-destructive)]",
21      },
22      appearance: {
23        soft: "border-[var(--alert-border)] bg-[var(--alert-bg)] text-[var(--alert-fg)] [&>svg]:text-[var(--alert-icon)]",
24        outline:
25          "border-[var(--alert-border)] bg-transparent text-[var(--alert-fg)] [&>svg]:text-[var(--alert-icon)]",
26        filled:
27          "border-transparent bg-[var(--alert-solid)] text-primary-foreground shadow-sm [&>svg]:text-current",
28        glass:
29          "border-[var(--alert-border)] bg-glass text-[var(--alert-fg)] shadow-md backdrop-blur-glass [&>svg]:text-[var(--alert-icon)]",
30        inline:
31// … truncated