Toast

1"use client";
2 
3import "./toast.css";
4import { Toast as BaseToast } from "@base-ui/react/toast";
5import React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ToastContext, useToastContext } from "./toast.context";
9import { toastVariants, type ToastVariants } from "./toast.variants";
10 
11export type ToastProviderProps = React.ComponentProps<typeof BaseToast.Provider> & {
12  /**
13   * Whether to render the default toast viewport and list automatically.
14   * @default true
15   */
16  defaultViewport?: boolean;
17};
18 
19function DefaultToastList() {
20  const { toasts } = BaseToast.useToastManager();
21 
22  if (!toasts || toasts.length === 0) return null;
23 
24  return (
25    <ToastPortal>
26      <ToastViewport>
27        {toasts.map((toast) => (
28          <ToastRoot key={toast.id} toast={toast} variant={(toast as any).variant ?? "default"}>
29            <ToastContent>
30              <div className="flex flex-col gap-1">
31                {toast.title && <ToastTitle>{toast.title}</ToastTitle>}
32                {toast.description && <ToastDescription>{toast.description}</ToastDescription>}
33              </div>
34              <ToastClose />
35            </ToastContent>
36          </ToastRoot>
37        ))}
38      </ToastViewport>
39    </ToastPortal>
40  );
41}
42 
43export const ToastProvider = ({
44  children,
45  defaultViewport = true,
46  ...props
47}: ToastProviderProps) => {
48  return (
49    <BaseToast.Provider {...props}>
50      {children}
51      {defaultViewport && <DefaultToastList />}
52    </BaseToast.Provider>
53  );
54};
55 
56export type ToastPortalProps = React.ComponentProps<typeof BaseToast.Portal>;
57 
58export const ToastPortal = (props: ToastPortalProps) => {
59  return <BaseToast.Portal {...props} />;
60};
61 
62export type ToastViewportProps = React.ComponentProps<typeof BaseToast.Viewport>;
63 
64export const ToastViewport = ({ className, ...props }: ToastViewportProps) => {
65  const slots = toastVariants();
66  return <BaseToast.Viewport className={cn(slots.viewport(), className)} {...props} />;
67};
68 
69export type ToastRootProps = ToastVariants & React.ComponentProps<typeof BaseToast.Root>;
70 
71export const ToastRoot = ({ children, className, variant, ...props }: ToastRootProps) => {
72  const slots = toastVariants({ variant });
73 
74  return (
75    <ToastContext.Provider value={{ slots }}>
76      <BaseToast.Root className={cn(slots.root(), className)} {...props}>
77        {children}
78      </BaseToast.Root>
79    </ToastContext.Provider>
80  );
81};
82 
83export type ToastContentProps = React.ComponentProps<typeof BaseToast.Content>;
84 
85// … truncated