toast

1"use client"
2
3import * as React from "react"
4import { Toast as BaseToast } from "@base-ui/react/toast"
5import { cn } from "@/lib/utils"
6
7type ToastPosition =
8    | "top-left"
9    | "top-right"
10    | "top-center"
11    | "bottom-left"
12    | "bottom-right"
13    | "bottom-center"
14
15interface ToastOptions {
16    title?: React.ReactNode
17    description?: React.ReactNode
18    timeout?: number
19    priority?: "low" | "high"
20    onClose?: () => void
21    onRemove?: () => void
22    actionProps?: React.ComponentPropsWithoutRef<"button">
23}
24
25interface ToastPromiseOptions<Value> {
26    loading: string | ToastOptions
27    success: string | ToastOptions | ((result: Value) => string | ToastOptions)
28    error: string | ToastOptions | ((error: unknown) => string | ToastOptions)
29}
30
31type ToastProps = React.ComponentPropsWithoutRef<typeof BaseToast.Root>
32
33interface ToasterProps {
34    position?: ToastPosition
35}
36
37const VIEWPORT_POSITIONS: Record<ToastPosition, string> = {
38    "top-left": "fixed top-4 left-4 z-50 w-full max-w-sm flex",
39    "top-right": "fixed top-4 right-4 z-50 w-full max-w-sm flex",
40    "top-center": "fixed top-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-sm flex",
41    "bottom-left": "fixed bottom-4 left-4 z-50 w-full max-w-sm flex",
42    "bottom-right": "fixed bottom-4 right-4 z-50 w-full max-w-sm flex",
43    "bottom-center": "fixed bottom-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-sm flex",
44}
45
46function getSwipeDirection(
47    position: ToastPosition,
48): ("up" | "down" | "left" | "right")[] {
49    const isTop = position.startsWith("top")
50    const isLeft = position.includes("left")
51    const isCenter = position.includes("center")
52    if (isCenter) return isTop ? ["up"] : ["down"]
53    if (isLeft) return isTop ? ["up", "left"] : ["down", "left"]
54    return isTop ? ["up", "right"] : ["down", "right"]
55}
56
57const COMMON_TOAST_CLASSES = [
58    "[--gap:0.75rem]",
59    "[--peek:0.75rem]",
60    "[--scale:calc(max(0,1-(var(--toast-index)*0.1)))]",
61    "[--shrink:calc(1-var(--scale))]",
62    "[--height:var(--toast-frontmost-height,var(--toast-height))]",
63    "absolute w-full z-[calc(1000-var(--toast-index))]",
64    "rounded-base border-2 bg-white bg-clip-padding p-6 pr-8 shadow-brutal select-none",
65    "after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
66    "data-ending-style:opacity-0",
67    "data-limited:opacity-0",
68    "h-(--height) data-expanded:h-(--toast-height)",
69// … truncated