"use client"; import React, { useState, useRef, useMemo } from "react"; import { motion, useMotionValue, useSpring, useTransform, HTMLMotionProps } from "framer-motion"; import { Sparkles } from "lucide-react"; // --- TYPES --- type CosmosVariant = "nebula" | "supernova" | "void"; export interface StarfieldButtonProps extends Omit, "ref" | "children"> { label?: string; variant?: CosmosVariant; disabled?: boolean; href?: string; ref?: React.Ref; } /** * Cosmos Starfield Pro (v2.2 Ultra - Bimodal Adaptive) * Fixed visibility for light/white themes. * Optimized for React 19, 100% bimodal, and strictly typed. */ export const StarfieldButton = ({ label = "Unlock Cosmos", variant = "nebula", disabled = false, href, className, ref: externalRef, ...props }: StarfieldButtonProps) => { const internalRef = useRef(null); const activeRef = (externalRef as React.RefObject) || internalRef; const x = useMotionValue(0); const y = useMotionValue(0); const springConfig = { damping: 25, stiffness: 200 }; const rotateX = useSpring(useTransform(y, [-0.5, 0.5], [15, -15]), springConfig); const rotateY = useSpring(useTransform(x, [-0.5, 0.5], [-15, 15]), springConfig); const glowX = useSpring(useTransform(x, [-0.5, 0.5], ["-20%", "20%"]), springConfig); const glowY = useSpring(useTransform(y, [-0.5, 0.5], ["-20%", "20%"]), springConfig); // Memoized Starfield Generation const stars = useMemo(() => { return Array.from({ length: 60 }).map((_, i) => ({ id: i, left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, size: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.7 + 0.3, duration: Math.random() * 3 + 2, })); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (disabled || !activeRef.current) return; const rect = activeRef.current.getBoundingClientRect(); x.set((e.clientX - rect.left) / rect.width - 0.5); y.set((e.clientY - rect.top) / rect.height - 0.5); }; const handleMouseLeave = () => { x.set(0); y.set(0); }; const Component = href ? motion.a : motion.button; // Variant Configuration const configs: Record = { nebula: { bg: "bg-neutral-950", border: "border-white/10 dark:border-white/5", glow: "from-indigo-500 via-purple-500 to-sky-500", accent: "text-sky-400", starColor: "bg-white", textColor: "text-white" }, supernova: { bg: "bg-neutral-950", border: "border-white/10 dark:border-white/5", glow: "from-amber-500 via-orange-500 to-rose-500", accent: "text-amber-500", starColor: "bg-white", textColor: "text-white" }, void: { bg: "bg-white dark:bg-neutral-950", border: "border-neutral-200 dark:border-white/5", glow: "from-neutral-200 via-neutral-300 to-neutral-200 dark:from-neutral-800 dark:via-neutral-700 dark:to-neutral-800", accent: "text-neutral-500 dark:text-neutral-400", starColor: "bg-neutral-400 dark:bg-white", // FIX: Estrellas oscuras en modo claro textColor: "text-neutral-900 dark:text-white" // FIX: Texto oscuro en modo claro } }; const current = configs[variant]; return (

{/* ADAPTIVE STARFIELD */}

{stars.map((star) => ( 1.2 && variant !== 'void' ? "0 0 4px rgba(255,255,255,0.8)" : "none", }} /> ))}

{/* INTERACTIVE GLOW */} {!disabled && ( )} {/* CONTENT */}

{label}

{/* INNER GLASS EDGE */}

); }; // --- DEMO --- export default function StarfieldButtonDemo() { return (

); }