Toast

1"use client";
2
3import * as React from "react";
4import { Toast } from "@base-ui/react/toast";
5
6import { cn } from "@/lib/classes";
7import { buttonVariants } from "@/registry/pure-ui/ui/button";
8import { Spinner } from "@/registry/pure-ui/ui/spinner";
9
10const toastManager = Toast.createToastManager();
11
12type ToastPosition =
13  | "top-left"
14  | "top-center"
15  | "top-right"
16  | "bottom-left"
17  | "bottom-center"
18  | "bottom-right";
19
20type ToastRadius = "none" | "sm" | "md" | "lg" | "full";
21
22interface CustomToastData {
23  radius?: ToastRadius;
24}
25
26function getRadiusClass(radius?: ToastRadius): string {
27  switch (radius) {
28    case "none":
29      return "rounded-none";
30    case "sm":
31      return "rounded-sm";
32    case "md":
33      return "rounded-md";
34    case "lg":
35      return "rounded-lg";
36    case "full":
37      return "rounded-full px-5.5!";
38    default:
39      return "rounded-none"; // default radius
40  }
41}
42
43interface ToastProviderProps extends Toast.Provider.Props {
44  position?: ToastPosition;
45}
46
47function ToastProvider({
48  children,
49  position = "bottom-right",
50  ...props
51}: ToastProviderProps) {
52  return (
53    <Toast.Provider toastManager={toastManager} {...props}>
54      {children}
55      <ToastList position={position} />
56    </Toast.Provider>
57  );
58}
59
60function ToastList({
61  position = "bottom-right",
62}: {
63  position?: ToastPosition;
64}) {
65  const { toasts } = Toast.useToastManager();
66  const isTop = position.startsWith("top");
67
68  return (
69    <Toast.Portal data-slot="toast-portal">
70      <Toast.Viewport
71        data-slot="toast-viewport"
72        data-position={position}
73        className={cn(
74          "fixed z-100 mx-auto max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)] w-[calc(100%-var(--toast-inset)*2)]",
75          // Vertical positioning
76          "data-[position*=top]:top-(--toast-inset)",
77          "data-[position*=bottom]:bottom-(--toast-inset)",
78          // Horizontal positioning
79          "data-[position*=left]:left-(--toast-inset)",
80          "data-[position*=right]:right-(--toast-inset)",
81          "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"
82        )}
83      >
84        {toasts.map((toast) => {
85          console.log("toast type", toast.type);
86
87          return (
88            <Toast.Root
89              data-slot="toast-root"
90              key={toast.id}
91              toast={toast}
92// … truncated