Sonner

1"use client";
2 
3import { Toaster as Sonner, toast } from "sonner";
4 
5import { cn } from "@/lib/utils";
6import { toastMotion } from "@/components/ui/recipes";
7 
8/* ------------------------------------------------------------------ */
9/*  Toaster – Provider component (place once in layout.tsx)           */
10/* ------------------------------------------------------------------ */
11 
12export type ToasterProps = React.ComponentProps<typeof Sonner> & {
13  surface?: "solid" | "soft" | "glass";
14  radius?: "sm" | "md" | "lg" | "xl";
15  motion?: "spring" | "slide" | "fade";
16};
17 
18const Toaster = ({
19  className,
20  motion = "spring",
21  radius = "xl",
22  surface = "glass",
23  ...props
24}: ToasterProps) => {
25  return (
26    <Sonner
27      className={cn("toaster group", className)}
28      toastOptions={{
29        unstyled: true,
30        classNames: {
31          toast: cn(
32            "poyraz-toast relative flex min-h-16 w-full items-start gap-3 overflow-hidden p-4",
33            toastMotion,
34            "border border-border text-foreground shadow-lg",
35            surface === "solid" && "bg-surface",
36            surface === "soft" && "bg-surface-subtle/95",
37            surface === "glass" && "border-glass-border-outer bg-glass backdrop-blur-xl",
38            radius === "sm" && "rounded-sm",
39            radius === "md" && "rounded-md",
40            radius === "lg" && "rounded-lg",
41            radius === "xl" && "rounded-xl",
42            motion === "spring" && "ease-[var(--poyraz-motion-ease-spring)]",
43            motion === "slide" && "ease-[var(--poyraz-motion-ease-out)]",
44            motion === "fade" &&
45              "data-[mounted=false]:translate-y-0 data-[removed=true]:translate-y-0",
46            "text-sm font-medium",
47          ),
48          content: "min-w-0 flex-1 pt-0.5",
49          icon: "relative mt-0.5 flex size-5 shrink-0 items-center justify-center text-muted-foreground [&>svg]:size-4",
50          loader: "text-primary",
51          loading: "!border-primary/20",
52          title: "text-sm font-semibold leading-5",
53          description: "mt-0.5 text-sm leading-5 text-muted-foreground",
54          actionButton: cn(
55            "inline-flex items-center justify-center",
56            "px-3 py-1.5 text-xs font-semibold",
57            "rounded-md border border-primary/20 shadow-none",
58            "bg-primary text-primary-foreground",
59            "hover:bg-primary-hover transition-colors",
60            "cursor-pointer",
61          ),
62          cancelButton: cn(
63// … truncated