toast

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { CircleCheck, CircleAlert, Info, TriangleAlert, X } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8import "./toast.css"
9 
10/* ------------------------------------------------------------------ */
11/*  Variant icons                                                      */
12/* ------------------------------------------------------------------ */
13 
14const variantIcons = {
15  brand: Info,
16  success: CircleCheck,
17  danger: CircleAlert,
18  warning: TriangleAlert,
19} as const
20 
21/* ------------------------------------------------------------------ */
22/*  CVA                                                                */
23/* ------------------------------------------------------------------ */
24 
25const toastVariants = cva(
26  "toast-base inline-flex w-[400px] items-center gap-[var(--layout-gap-md)] overflow-hidden rounded-[var(--layout-radius-xl)] p-[var(--layout-padding-lg)] text-content-note font-accent",
27  {
28    variants: {
29      variant: {
30        brand: "toast-brand",
31        success: "toast-success",
32        danger: "toast-danger",
33        warning: "toast-warning",
34      },
35    },
36    defaultVariants: {
37      variant: "success",
38    },
39  }
40)
41 
42/* ------------------------------------------------------------------ */
43/*  Toast                                                              */
44/* ------------------------------------------------------------------ */
45 
46function Toast({
47  className,
48  variant = "success",
49  children,
50  onClose,
51  ...props
52}: React.ComponentProps<"div"> &
53  VariantProps<typeof toastVariants> & {
54    onClose?: () => void
55  }) {
56  const Icon = variant ? variantIcons[variant] : variantIcons.success
57  return (
58    <div
59      data-slot="toast"
60      className={cn(toastVariants({ variant, className }))}
61      role="status"
62      aria-live="polite"
63      {...props}
64    >
65      <Icon className="toast-icon shrink-0 h-[var(--layout-size-md)] w-[var(--layout-size-md)]" />
66      <p className="flex-1 min-w-0">{children}</p>
67      {onClose && (
68        <button
69          type="button"
70          onClick={onClose}
71          className="toast-close shrink-0 cursor-pointer inline-flex items-center justify-center h-[var(--layout-size-md)] w-[var(--layout-size-md)]"
72          aria-label="Dismiss"
73        >
74          <X className="size-3.5" />
75        </button>
76      )}
77    </div>
78  )
79}
80 
81// … truncated