import React, { forwardRef } from "react"; import { cn } from "@/lib/utils"; export type BubblegumToastVariant = "success" | "info" | "warning" | "error" | "interactive"; export interface BubblegumToastProps extends React.HTMLAttributes { variant?: BubblegumToastVariant; icon?: React.ReactNode; title: string; description?: string; action?: React.ReactNode; } const variantClasses: Record< BubblegumToastVariant, { gradient: string; iconColor: string; circle1: string; circle2: string; } > = { success: { gradient: "bg-gradient-to-r from-green-100 to-blue-100", iconColor: "text-green-500", circle1: "bg-green-200", circle2: "bg-blue-200", }, info: { gradient: "bg-gradient-to-r from-blue-100 to-purple-100", iconColor: "text-blue-500", circle1: "bg-blue-200", circle2: "bg-purple-200", }, warning: { gradient: "bg-gradient-to-r from-yellow-100 to-orange-100", iconColor: "text-yellow-500", circle1: "bg-yellow-200", circle2: "bg-orange-200", }, error: { gradient: "bg-gradient-to-r from-red-100 to-pink-100", iconColor: "text-red-500", circle1: "bg-red-200", circle2: "bg-pink-200", }, interactive: { gradient: "bg-gradient-to-r from-purple-100 to-pink-100", iconColor: "text-pink-500", circle1: "bg-purple-200", circle2: "bg-pink-200", }, }; export const BubblegumToast = forwardRef( ({ className, variant = "info", icon, title, description, action, ...props }, ref) => { const styles = variantClasses[variant]; return (

{/* Decorative circles */}

{/* Main toast content */}

{/* Icon container */} {icon && (

{icon}

)} {/* Text content */}

{title}

{description &&

{description}

}

{/* Optional action button */} {action &&

{action}

}

); } ); BubblegumToast.displayName = "Bubblegum.Toast"; export default BubblegumToast;

Soft Components

Bubblegum Toast