Toast

1"use client";
2 
3import { Toast as ToastPrimitive } from "@base-ui/react/toast";
4import {
5  CheckCircle,
6  Info,
7  Warning,
8  WarningCircle,
9  X,
10} from "@phosphor-icons/react/dist/ssr";
11import type * as React from "react";
12import { cn } from "@/lib/utils";
13import {
14  colorTransition,
15  coarseTarget,
16  controlSize,
17  overlayLayer,
18  selectionFocus,
19  stateStepping,
20} from "@/lib/recipes";
21import { Spinner } from "@/components/ui/spinner";
22 
23/* ----------------------------- types ----------------------------- */
24 
25export type ToastType =
26  | "default"
27  | "success"
28  | "error"
29  | "warning"
30  | "info"
31  | "loading";
32 
33export type ToastPosition =
34  | "top-left"
35  | "top-center"
36  | "top-right"
37  | "bottom-left"
38  | "bottom-center"
39  | "bottom-right";
40 
41export interface ToastAction {
42  label: React.ReactNode;
43  onClick: () => void;
44}
45 
46export interface ToastOptions {
47  id?: string;
48  description?: React.ReactNode;
49  duration?: number;
50  action?: ToastAction;
51}
52 
53type ToastData = {
54  action?: ToastAction;
55};
56 
57/* --------------------------- manager --------------------------- */
58 
59const DEFAULT_DURATIONS: Record<ToastType, number> = {
60  default: 5000,
61  success: 5000,
62  info: 5000,
63  warning: 6000,
64  error: 7000,
65  loading: 0,
66};
67 
68const HIGH_PRIORITY: Partial<Record<ToastType, true>> = {
69  warning: true,
70  error: true,
71};
72 
73const manager = ToastPrimitive.createToastManager<ToastData>();
74 
75function addToast(type: ToastType, title: React.ReactNode, options?: ToastOptions): string {
76  return manager.add({
77    id: options?.id,
78    type,
79    title,
80    description: options?.description,
81    timeout: options?.duration ?? DEFAULT_DURATIONS[type],
82    priority: HIGH_PRIORITY[type] ? "high" : "low",
83    data: options?.action ? { action: options.action } : undefined,
84  });
85}
86 
87type ToastFn = (title: React.ReactNode, options?: ToastOptions) => string;
88 
89interface ToastApi extends ToastFn {
90  success: ToastFn;
91  error: ToastFn;
92  warning: ToastFn;
93  info: ToastFn;
94  loading: ToastFn;
95  dismiss: (id?: string) => void;
96}
97 
98export const toast: ToastApi = Object.assign(
99  ((title, options) => addToast("default", title, options)) as ToastFn,
100  {
101    success: (title, options) => addToast("success", title, options),
102    error: (title, options) => addToast("error", title, options),
103    warning: (title, options) => addToast("warning", title, options),
104    info: (title, options) => addToast("info", title, options),
105    loading: (title, options) => addToast("loading", title, options),
106// … truncated