"use client" import * as React from "react" import { Toast as ToastPrimitive } from "@base-ui/react/toast" import { X } from "lucide-react" import { motion, useReducedMotion } from "motion/react" import { toastMotion, toastTween, exitTween, enterTween } from "@/lib/motion" import { cn } from "@/lib/utils" import { Button } from "./button" /** Layered pop elevation — ring-as-border + cast stack + top light. */ const toastElevation = "ds-elev-pop" function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) { return } function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) { return } function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) { return ( ) } /** * Soft-rect toast — edge enter/exit opacity + y (`toastTween`). * * Stack carefully: Root owns CSS-var stack (`--toast-index`, `--toast-offset-y`) * without Motion `y` on the same node. An inner surface runs opacity+y so enter * travel does not fight the stack transform. Root still animates opacity so * Base UI `getAnimations()` can await leave. */ function Toast({ className, toast, children, ...props }: ToastPrimitive.Root.Props) { const reduce = useReducedMotion() const ending = toast.transitionStatus === "ending" return ( } {...props} > {children} ) } function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) { return ( ) } function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) { return ( ) } function ToastDescription({ className, ...props }: ToastPrimitive.Description.Props) { return ( ) } function ToastAction({ className, ...props }: ToastPrimitive.Action.Props) { return ( ) } function ToastClose({ className, render, ...props }: ToastPrimitive.Close.Props) { return ( ) } {...props} > Close ) } /** * Opinionated stack renderer — maps `useToastManager().toasts`. * Place once under `ToastProvider` (usually near app root / demo stage). */ function Toaster({ className }: { className?: string }) { const { toasts } = ToastPrimitive.useToastManager() return ( {toasts.map((toast) => ( {toast.title ? {toast.title} : null} {toast.description ? ( {toast.description} ) : null} {toast.actionProps ? ( ) : null} ))} ) } const useToastManager = ToastPrimitive.useToastManager const createToastManager = ToastPrimitive.createToastManager export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, Toaster, ToastPortal, ToastProvider, ToastTitle, ToastViewport, createToastManager, useToastManager, }