Sonner

1import { Toaster as Sonner, type ToasterProps } from "sonner"
2import {
3  CircleCheckIcon,
4  InfoIcon,
5  OctagonXIcon,
6  TriangleAlertIcon,
7} from "lucide-react"
8 
9import { cn } from "@/registry/lib/surface"
10import { Spinner } from "@/registry/ui/spinner"
11 
12const Toaster = ({ theme = "light", ...props }: ToasterProps) => {
13  return (
14    <Sonner
15      theme={theme}
16      className="toaster group"
17      icons={{
18        success: <CircleCheckIcon className="size-4" />,
19        info: <InfoIcon className="size-4" />,
20        warning: <TriangleAlertIcon className="size-4" />,
21        error: <OctagonXIcon className="size-4" />,
22        loading: <Spinner />,
23      }}
24      style={
25        {
26          "--normal-bg": "var(--popover)",
27          "--normal-text": "var(--popover-foreground)",
28          "--normal-border": "var(--border)",
29          "--border-radius": "var(--radius)",
30        } as React.CSSProperties
31      }
32      toastOptions={{
33        classNames: {
34          toast: cn(
35            "group/toast pointer-events-auto w-full rounded-md border border-border bg-popover p-4 font-sans text-sm text-popover-foreground shadow-none"
36          ),
37          title: "font-sans text-sm font-medium text-foreground",
38          description: "font-sans text-sm text-muted-foreground",
39          actionButton: cn(
40            "inline-flex h-7 shrink-0 items-center justify-center rounded-md border border-border bg-background px-2.5 font-sans text-sm font-medium text-foreground transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40"
41          ),
42          cancelButton: cn(
43            "inline-flex h-7 shrink-0 items-center justify-center rounded-md border border-border bg-background px-2.5 font-sans text-sm font-medium text-foreground transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40"
44          ),
45          closeButton: cn(
46            "absolute right-2 top-2 rounded-md border border-transparent text-foreground transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 active:opacity-40"
47          ),
48        },
49      }}
50      {...props}
51    />
52  )
53}
54 
55export { Toaster }