Toast

1"use client";
2 
3import { Toast as ToastPrimitive } from "@base-ui/react/toast";
4import type { ToastObject } from "@base-ui/react/toast";
5import {
6  IconAlertTriangle,
7  IconCheck,
8  IconChevronDown,
9  IconChevronUp,
10  IconCircleCheck,
11  IconCircleX,
12  IconCopy,
13  IconInfoCircle,
14  IconX,
15} from "@tabler/icons-react";
16import {
17  type CSSProperties,
18  type MouseEvent,
19  type ReactNode,
20  useEffect,
21  useRef,
22  useState,
23} from "react";
24 
25import { buttonVariants } from "@/components/ui/button";
26import { Spinner } from "@/components/ui/spinner";
27import { cn } from "@/lib/utils";
28 
29export type ToastType = "default" | "success" | "error" | "warning" | "info" | "loading";
30 
31export type ToastPosition =
32  | "top-left"
33  | "top-center"
34  | "top-right"
35  | "bottom-left"
36  | "bottom-center"
37  | "bottom-right";
38 
39export interface ToastAction {
40  label: ReactNode;
41  onClick: (event: MouseEvent<HTMLButtonElement>) => void;
42}
43 
44export interface ToastExpandableLabels {
45  expand?: ReactNode;
46  collapse?: ReactNode;
47}
48 
49export interface ToastData {
50  type: ToastType;
51  icon?: ReactNode;
52  action?: ToastAction;
53  cancel?: ToastAction;
54  dismissible?: boolean;
55  closeButton?: boolean;
56  richColors?: boolean;
57  hideCopyButton?: boolean;
58  expandableContent?: ReactNode;
59  expandableLabels?: ToastExpandableLabels;
60  expandableDescriptionTrigger?: boolean;
61  actionLayout?: "inline" | "stacked-end";
62  actionVariant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
63}
64 
65export interface ToastOptions extends Omit<ToastData, "type"> {
66  id?: string;
67  description?: ReactNode;
68  duration?: number;
69  onDismiss?: () => void;
70  onAutoClose?: () => void;
71}
72 
73export interface PromiseStateOption {
74  title?: ReactNode;
75  description?: ReactNode;
76}
77 
78export type PromiseState<T> =
79  | string
80  | PromiseStateOption
81  | ((value: T) => string | PromiseStateOption);
82 
83export interface PromiseToastOptions<T> {
84  loading: string | PromiseStateOption;
85  success: PromiseState<T>;
86  error: PromiseState<unknown>;
87}
88 
89type PromiseToastStateData = {
90  title?: ReactNode;
91  description?: ReactNode;
92  type: string;
93  data: ToastData;
94};
95 
96type MappedPromiseState<T> =
97  | string
98  | PromiseToastStateData
99  | ((value: T) => string | PromiseToastStateData);
100 
101const toastManager = ToastPrimitive.createToastManager<ToastData>();
102const activeToastIds = new Set<string>();
103 
104// Base UI exposes this subscription hook under a key with a leading space.
105// … truncated