Sonner

1"use client";
2 
3import { CheckCircleIcon, CircleNotchIcon, InfoIcon, WarningIcon, WarningOctagonIcon } from "@phosphor-icons/react";
4import { Toaster as Sonner } from "sonner";
5 
6type ToasterProps = React.ComponentProps<typeof Sonner>;
7 
8/**
9 * Sistine Toaster - Toast notifications with glassmorphism effects
10 *
11 * Features:
12 * - Glass background with backdrop blur
13 * - Glass border and shadow effects
14 * - Smooth animations and transitions
15 * - Light/dark mode support
16 *
17 * @example
18 * ```tsx
19 * import { Toaster } from "@/components/ui/sonner"
20 * import { toast } from "sonner"
21 *
22 * // Add to root layout
23 * <Toaster />
24 *
25 * // Use in components
26 * toast.success('Success!', { description: 'Your action completed' })
27 * ```
28 */
29const Toaster = ({ theme = "system", ...props }: ToasterProps) => {
30  return (
31    <Sonner
32      theme={theme as ToasterProps["theme"]}
33      className="toaster group"
34      icons={{
35        success: <CheckCircleIcon className="size-4" />,
36        info: <InfoIcon className="size-4" />,
37        warning: <WarningIcon className="size-4" />,
38        error: <WarningOctagonIcon className="size-4" />,
39        loading: <CircleNotchIcon className="size-4 animate-spin" />,
40      }}
41      toastOptions={{
42        classNames: {
43          toast: "group toast group-[.toaster]:rounded-xl group-[.toaster]:glass group-[.toaster]:glass-border group-[.toaster]:text-foreground",
44          description: "group-[.toast]:text-muted-foreground",
45          actionButton:
46            "group-[.toast]:rounded-md group-[.toast]:glass group-[.toast]:glass-border group-[.toast]:text-foreground group-[.toast]:hover:opacity-90",
47          cancelButton:
48            "group-[.toast]:rounded-md group-[.toast]:glass group-[.toast]:glass-border group-[.toast]:text-muted-foreground group-[.toast]:hover:opacity-90",
49          success:
50            "group-[.toast]:border-green-500/30 [&_[data-title]]:text-green-600 dark:[&_[data-title]]:text-green-400 [&_[data-description]]:text-green-600/80! dark:[&_[data-description]]:text-green-400/80! [&_[data-icon]]:text-green-600! dark:[&_[data-icon]]:text-green-400!",
51          error:
52            "group-[.toast]:border-red-500/30 [&_[data-title]]:text-red-600 dark:[&_[data-title]]:text-red-400 [&_[data-description]]:text-red-600/80! dark:[&_[data-description]]:text-red-400/80! [&_[data-icon]]:text-red-600! dark:[&_[data-icon]]:text-red-400!",
53          warning:
54// … truncated