"use client"; import React, { useState, useRef, useEffect } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { Bomb, Sparkles, Flame } from "lucide-react"; // --- TYPES --- type ExplosionVariant = "danger" | "accent" | "magic"; interface Particle { id: number; x: number; y: number; rotation: number; scale: number; type: "circle" | "line"; } export interface ParticleExplosionButtonProps extends Omit, "ref" | "children"> { label?: string; variant?: ExplosionVariant; disabled?: boolean; particleCount?: number; /** React 19 native ref support */ ref?: React.Ref; } /** * Particle Explosion Pro (v2.1 Ultra - TS Fixed) * A high-fidelity kinetic button with radial particle physics and bimodal support. * Optimized for React 19 and strictly typed to prevent inference errors. */ export const ParticleExplosionButton = ({ label = "Detonate", variant = "danger", disabled = false, particleCount = 15, className, onClick, ref, ...props }: ParticleExplosionButtonProps) => { const [particles, setParticles] = useState([]); const timerRef = useRef(null); // Cleanup to prevent memory leaks if unmounted during explosion useEffect(() => { return () => { if (timerRef.current) clearTimeout(timerRef.current); }; }, []); const explode = (e: React.MouseEvent) => { if (disabled) return; // Radial Physics Engine (Explicitly typed as Particle[]) const newParticles: Particle[] = Array.from({ length: particleCount }).map((_, i) => { const angle = (Math.random() * 360 * Math.PI) / 180; // Random angle in radians const velocity = 60 + Math.random() * 80; // Distance of the explosion return { id: Date.now() + i, x: Math.cos(angle) * velocity, y: Math.sin(angle) * velocity, rotation: Math.random() * 360, scale: Math.random() * 1 + 0.5, type: (Math.random() > 0.5 ? "circle" : "line") as "circle" | "line", // Explicit casting for TS }; }); setParticles(newParticles); if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(() => setParticles([]), 1000); if (onClick) onClick(e as any); }; // Variant Configuration const configs: Record = { danger: { bg: "bg-white dark:bg-neutral-900", border: "border-neutral-200 dark:border-neutral-800 hover:border-red-500/50", text: "text-neutral-900 dark:text-neutral-100 group-hover:text-red-500", particle: "bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.8)]", icon: Bomb }, accent: { bg: "bg-white dark:bg-neutral-950", border: "border-neutral-200 dark:border-neutral-800 hover:border-orange-500/50", text: "text-neutral-900 dark:text-neutral-100 group-hover:text-orange-500", particle: "bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.8)]", icon: Flame }, magic: { bg: "bg-neutral-950", border: "border-indigo-500/30 hover:border-indigo-500", text: "text-white group-hover:text-indigo-400", particle: "bg-indigo-400 shadow-[0_0_8px_rgba(129,140,248,0.8)]", icon: Sparkles } }; const current = configs[variant]; const Icon = current.icon; return (

{/* --- PARTICLE SYSTEM --- */} {particles.map((p) => ( ))} {/* --- MAIN BUTTON --- */} {label}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function ParticleExplosionDemo() { return (

{/* 1. Danger Bimodal */} {/* 2. Accent Bimodal (Uixtra Orange) */} {/* 3. Magic Dark */}

); }