"use client"; import { clsx, type ClassValue } from "clsx" import { twMerge } from "tailwind-merge" function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } import React from "react" import { VariantProps } from "class-variance-authority" /** * Available animation types for toast notifications */ type AnimationType = "slide" | "fade" | "scale" | "bounce" /** * Toast position variants derived from the toast position animations */ type ToastPosition = VariantProps< typeof toastPositionVariants >["position"] /** * Action configuration for interactive toast elements */ interface Action { /** Text label for the action */ label: string /** Click handler function */ onClick: () => void /** Visual style variant */ variant?: "button" | "icon" /** Optional icon to display */ icon?: React.ReactNode } /** * Parameters for configuring a toast notification */ interface ToastParams { /** Toast title content */ title?: React.ReactNode /** Main toast message content */ text?: React.ReactNode /** Additional descriptive content */ description?: React.ReactNode /** Duration in milliseconds before auto-dismissal */ duration?: number /** Unique identifier for the toast */ id?: string /** Callback executed when toast is closed */ onClose?: () => void /** Visual status type of the toast */ status?: "error" | "warning" | "success" | "info" | "default" | "loading" /** Visual variant for loading indicator */ loaderVariant?: "loader-1" | "loader-2" /** Screen position for the toast */ position?: ToastPosition /** Whether the toast can be manually closed */ closable?: boolean /** Whether to hide the progress bar */ hideProgressBar?: boolean /** Whether to prevent duplicate toasts with the same content */ preventDuplicates?: boolean /** Maximum number of toasts to show simultaneously */ maxToast?: number /** Interactive action buttons configuration */ actions?: { primary: Action dismiss?: Omit & { onClick?: () => void } } /** Custom CSS class names for toast elements */ classNames?: ToastClassNames /** Animation style for entry/exit */ animation?: AnimationType } /** * CSS class names configuration for toast components */ interface ToastClassNames { /** Class for error toast variant */ error?: string /** Class for success toast variant */ success?: string /** Class for warning toast variant */ warning?: string /** Class for info toast variant */ info?: string /** Class for loading toast variant */ loading?: string /** Class for close button */ closeButton?: string /** Class for toast title */ title?: string /** Class for toast description */ description?: string /** Class for loading indicator */ loader?: string /** Class for progress bar */ progressBar?: string /** Class for container element */ containerClassName?: string } /** * Options for promise-based toast notifications */ interface ToastPromiseOptions { /** Message to show during loading state */ loading: string /** Function to generate success message from resolved data */ success: (data: T) => string /** Message to show on promise rejection */ error?: string /** Screen position for the toast */ position?: ToastPosition /** Duration in milliseconds before auto-dismissal */ duration?: number /** Custom CSS class names */ classNames?: ToastClassNames /** Animation style for entry/exit */ animation?: AnimationType } /** * Props for the ToastProvider component */ interface ToastProviderProps { /** Child components */ children: React.ReactNode /** Default duration in milliseconds before auto-dismissal */ duration?: number /** Default screen position for toasts */ position?: ToastPosition /** Default CSS class names */ classNames?: ToastClassNames /** Whether toasts are closable by default */ closable?: boolean /** Whether to prevent duplicate toasts by default */ preventDuplicates?: boolean /** Default maximum number of toasts to show simultaneously */ maxToast?: number /** Whether to hide progress bars by default */ hideProgressBar?: boolean /** Default animation style */ animation?: AnimationType } /** * Function type for toast creation methods */ type ToastFunction = ( text: React.ReactNode, options?: Partial ) => string /** * Function type for promise-based toast handlers */ type PromiseHandler = ( promise: () => Promise, options: ToastPromiseOptions ) => string /** * Interface for toast API methods */ interface ToastMethods { /** Display a success toast */ success: ToastFunction /** Display an error toast */ error: ToastFunction /** Display a warning toast */ warning: ToastFunction /** Display an info toast */ info: ToastFunction /** Display a loading toast */ loading: ToastFunction /** Display a default toast */ default: ToastFunction /** Create a custom toast */ push: (params: ToastParams) => string /** Create a promise-based toast */ promise: PromiseHandler /** Dismiss a toast by ID */ dismiss: (id: string | number) => void } /** * Interface for toast state */ interface ToastState { /** Function to dismiss this toast */ dismiss: () => void /** Unique identifier for the toast */ id: string /** Configuration parameters */ params: ToastParams /** Whether toast is currently paused (e.g., during hover) */ paused: boolean } /** * Interface for toast state manager */ interface ToastStateManager { /** All active toasts */ toasts: ToastState[] /** Toasts organized by position */ toastsByPosition: Record /** Create a new toast */ push: (params: ToastParams) => string /** Create a promise-based toast */ pushPromise: ( promise: () => Promise, options: ToastPromiseOptions ) => string /** Dismiss a toast by ID */ dismiss: (id: string | number) => void /** Pause a toast's timeout */ pauseToast: (id: string) => void /** Resume a toast's timeout */ resumeToast: (id: string) => void } /** * Interface for managing toast timeout references */ interface ToastTimeoutRef { timeout: NodeJS.Timeout remaining: number startTime: number onClose?: () => void } import { cva } from "class-variance-authority" /** * Toast positioning variants for different screen positions * Defines positioning classes for each toast location option */ const toastPositionVariants = cva( "absolute w-full max-w-[420px] p-4 md:p-8", { variants: { position: { "top-left": "top-0 left-0 md:top-0", "top-center": "top-0 left-1/2 -translate-x-1/2 transform md:top-0", "top-right": "top-0 right-0 md:top-0", "bottom-left": "bottom-0 left-0 md:bottom-0", "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 transform md:bottom-0", "bottom-right": "right-0 bottom-0 md:bottom-0", }, }, defaultVariants: { position: "bottom-right", }, } ) /** * Toast type variants for different notification types * Defines style classes for success, error, warning, etc. */ const toastTypeVariants = cva("toast-base", { variants: { type: { success: "toast-success", error: "toast-error", warning: "toast-warning", info: "toast-info", loading: "toast-loading", default: "toast-default", }, }, defaultVariants: { type: "default", }, }) /** * Status styles for different notification types * Defines style classes for success, error, warning, etc. */ const statusStyles = { error: "dark:bg-[#24161b] bg-[#fff5f5] text-red-900 dark:text-[#ffdfdd] dark:border-red-900 border-red-200", warning: "dark:bg-[#1E1A1B] bg-[#fefae1] text-[#3b2212] dark:text-[#EADB90] dark:border-[#5C431B] border-[#ddcab8]", success: "dark:bg-[#131d1e] bg-[#e7fef6] text-[#0d311e] dark:text-[#abf9de] dark:border-[#1e5643] border-green-200", info: "dark:bg-[#161831] bg-[#edf4ff] text-[#1e3a8a] dark:text-[#DCE6FF] dark:border-[#2f3873] border-[#bfdbfe]", default: "dark:bg-[#13141b] bg-white text-gray-900 dark:text-[#e4e5e9] dark:border-[#3a3c4a] border-gray-200", loading: "bg-white text-gray-900 border-gray-200 ", } as const /** * Toast variants for different notification types * Defines style classes for success, error, warning, etc. */ const toastVariants = cva( "relative flex w-full flex-col gap-1 overflow-hidden rounded-lg border p-[0.75rem] shadow-lg", { variants: { status: statusStyles, }, defaultVariants: { status: "default", }, } ) /** * Toast progress bar variants for different notification types * Defines style classes for success, error, warning, etc. */ const progressBarVariants = cva("absolute bottom-0 left-0 h-[2px]", { variants: { status: { error: "bg-red-600 dark:bg-[#f77a6f]", warning: "bg-yellow-500 dark:bg-[#fabe20]", success: "bg-green-600 dark:bg-[#12f0a5]", info: "bg-blue-600 dark:bg-[#7898ff]", default: "bg-gray-600 dark:bg-[#e4e5e9]", }, }, defaultVariants: { status: "default", }, }) /** * Toast action variants for different notification types * Defines style classes for success, error, warning, etc. */ const toastActionVariants = cva( "inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden", { variants: { variant: { primary: "bg-white text-black hover:bg-white/90 dark:text-black dark:hover:bg-white/90", dismiss: "bg-transparent hover:bg-black/10 dark:hover:bg-white/10", }, }, defaultVariants: { variant: "primary", }, } ) import * as React from "react" import { Loader, LoaderCircle, X } from "lucide-react" const ToastTitle = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes & { text: React.ReactNode } >(({ text, className, ...props }, ref) => (

{text}

)) const ToastDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes & { description?: ToastParams["description"] status: ToastParams["status"] } >(({ description, status, className, ...props }, ref) => { if (!description || status === "loading") return null return (

{description}

) }) const ToastCloseButton = React.forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes & { onClose: () => void status: string } >(({ onClose, status, className, ...props }, ref) => { if (status === "loading") return null return ( ) }) type ToastLoaderProps = { status: string variant?: ToastParams["loaderVariant"] className?: string } const ToastLoader = ({ status, variant = "loader-1", className, }: ToastLoaderProps) => { if (status !== "loading") return null const baseClass = "animate-spin size-4 text-black" return variant === "loader-2" ? : } const ToastProgressBar = React.forwardRef< HTMLDivElement, React.HTMLAttributes & { duration?: number status: ToastParams["status"] hideProgressBar?: boolean paused?: boolean } >(({ duration, status, hideProgressBar, className, paused, ...props }, ref) => { if (!duration || status === "loading" || hideProgressBar) return null return (

) }) export function ToastAction({ label, onClick, variant, status, }: { label: string onClick: () => void variant: "primary" | "dismiss" status: ToastParams["status"] }) { return ( ) } // Animation variants are now handled directly in the Toast provider export function Toast({ closable, description, duration, onClose, text, title, status = "default", loaderVariant, classNames = {}, hideProgressBar, actions, paused, }: ToastParams & { classNames?: ToastClassNames; paused?: boolean }) { return (

{closable && !actions && ( )}

{actions && (

{actions.dismiss && ( )}

)}

) } ToastTitle.displayName = "ToastTitle" ToastDescription.displayName = "ToastDescription" ToastCloseButton.displayName = "ToastCloseButton" ToastLoader.displayName = "ToastLoader" ToastProgressBar.displayName = "ToastProgressBar"