@moontra/moonui-pro 2.0.22 → 2.0.23

package/src/components/enhanced/button.tsx

@@ -0,0 +1,360 @@
+"use client"
+
+import React, { useRef, useState, useEffect } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { Loader2, Check, X, Sparkles } from "lucide-react"
+import { cn } from "../../lib/utils"
+import { cva, type VariantProps } from "class-variance-authority"
+
+const enhancedButtonVariants = cva(
+  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        gradient: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700",
+        glow: "bg-primary text-primary-foreground shadow-lg shadow-primary/50 hover:shadow-xl hover:shadow-primary/60",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+      animation: {
+        ripple: "ripple-effect",
+        morph: "morph-effect",
+        particles: "particles-effect",
+        magnetic: "magnetic-effect",
+        glitch: "glitch-effect",
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      animation: "ripple",
+    },
+  }
+)
+
+interface RippleEffect {
+  x: number
+  y: number
+  id: number
+}
+
+export interface EnhancedButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof enhancedButtonVariants> {
+  state?: "idle" | "loading" | "success" | "error"
+  onStateChange?: (state: "idle" | "loading" | "success" | "error") => void
+  enableRipple?: boolean
+  enableMorph?: boolean
+  enableParticles?: boolean
+  enableMagnetic?: boolean
+  enableGlitch?: boolean
+}
+
+export const EnhancedButton = React.forwardRef<HTMLButtonElement, EnhancedButtonProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    animation,
+    state = "idle", 
+    onStateChange, 
+    children, 
+    onClick,
+    enableRipple = true,
+    enableMorph = true,
+    enableParticles = false,
+    enableMagnetic = false,
+    enableGlitch = false,
+    ...props 
+  }, ref) => {
+    const [internalState, setInternalState] = useState<"idle" | "loading" | "success" | "error">("idle")
+    const [ripples, setRipples] = useState<RippleEffect[]>([])
+    const [particles, setParticles] = useState<{ x: number; y: number; id: number }[]>([])
+    const [magneticPosition, setMagneticPosition] = useState({ x: 0, y: 0 })
+    const buttonRef = useRef<HTMLButtonElement>(null)
+    const currentState = state !== "idle" ? state : internalState
+
+    // Ripple effect
+    const createRipple = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!enableRipple) return
+      
+      const button = event.currentTarget
+      const rect = button.getBoundingClientRect()
+      const ripple = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+        id: Date.now()
+      }
+      
+      setRipples([...ripples, ripple])
+      setTimeout(() => {
+        setRipples(prev => prev.filter(r => r.id !== ripple.id))
+      }, 1000)
+    }
+
+    // Particle effect
+    const createParticles = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!enableParticles) return
+      
+      const button = event.currentTarget
+      const rect = button.getBoundingClientRect()
+      const newParticles = Array.from({ length: 8 }, (_, i) => ({
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+        id: Date.now() + i
+      }))
+      
+      setParticles([...particles, ...newParticles])
+      setTimeout(() => {
+        setParticles([])
+      }, 1000)
+    }
+
+    // Magnetic effect
+    const handleMouseMove = (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (!enableMagnetic) return
+      
+      const button = event.currentTarget
+      const rect = button.getBoundingClientRect()
+      const centerX = rect.width / 2
+      const centerY = rect.height / 2
+      const x = event.clientX - rect.left - centerX
+      const y = event.clientY - rect.top - centerY
+      
+      setMagneticPosition({
+        x: x * 0.2,
+        y: y * 0.2
+      })
+    }
+
+    const handleMouseLeave = () => {
+      if (enableMagnetic) {
+        setMagneticPosition({ x: 0, y: 0 })
+      }
+    }
+
+    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      createRipple(e)
+      createParticles(e)
+      
+      if (currentState === "loading") return
+
+      if (enableMorph) {
+        setInternalState("loading")
+        onStateChange?.("loading")
+      }
+
+      if (onClick) {
+        try {
+          await onClick(e)
+          if (enableMorph) {
+            setInternalState("success")
+            onStateChange?.("success")
+            
+            setTimeout(() => {
+              setInternalState("idle")
+              onStateChange?.("idle")
+            }, 2000)
+          }
+        } catch (error) {
+          if (enableMorph) {
+            setInternalState("error")
+            onStateChange?.("error")
+            
+            setTimeout(() => {
+              setInternalState("idle")
+              onStateChange?.("idle")
+            }, 2000)
+          }
+        }
+      }
+    }
+
+    const getIcon = () => {
+      switch (currentState) {
+        case "loading":
+          return <Loader2 className="h-4 w-4 animate-spin" />
+        case "success":
+          return <Check className="h-4 w-4" />
+        case "error":
+          return <X className="h-4 w-4" />
+        default:
+          return null
+      }
+    }
+
+    const getBackgroundColor = () => {
+      switch (currentState) {
+        case "success":
+          return "bg-green-600"
+        case "error":
+          return "bg-red-600"
+        default:
+          return ""
+      }
+    }
+
+    return (
+      <motion.button
+        className={cn(enhancedButtonVariants({ variant, size }), className)}
+        ref={buttonRef || ref}
+        onClick={handleClick}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+        disabled={currentState === "loading" || props.disabled}
+        animate={{
+          x: magneticPosition.x,
+          y: magneticPosition.y,
+        }}
+        transition={{
+          type: "spring",
+          stiffness: 150,
+          damping: 15,
+          mass: 0.1
+        }}
+        {...props}
+      >
+        {/* Ripple effects */}
+        <AnimatePresence>
+          {ripples.map((ripple) => (
+            <motion.span
+              key={ripple.id}
+              className="absolute rounded-full bg-white/30 pointer-events-none"
+              style={{
+                left: ripple.x,
+                top: ripple.y,
+              }}
+              initial={{ width: 0, height: 0, x: 0, y: 0, opacity: 1 }}
+              animate={{ 
+                width: 200, 
+                height: 200, 
+                x: -100, 
+                y: -100, 
+                opacity: 0 
+              }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 1, ease: "easeOut" }}
+            />
+          ))}
+        </AnimatePresence>
+
+        {/* Particle effects */}
+        <AnimatePresence>
+          {particles.map((particle, i) => (
+            <motion.span
+              key={particle.id}
+              className="absolute w-1 h-1 bg-primary rounded-full pointer-events-none"
+              style={{
+                left: particle.x,
+                top: particle.y,
+              }}
+              initial={{ scale: 0, opacity: 1 }}
+              animate={{ 
+                scale: [0, 1, 0],
+                x: (i % 2 === 0 ? 1 : -1) * (20 + Math.random() * 30),
+                y: -20 - Math.random() * 30,
+                opacity: [1, 1, 0]
+              }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+            />
+          ))}
+        </AnimatePresence>
+
+        {/* Morph content */}
+        <motion.div
+          className="flex items-center gap-2"
+          animate={{
+            width: currentState !== "idle" ? "auto" : "100%"
+          }}
+          transition={{ duration: 0.2 }}
+        >
+          <AnimatePresence mode="wait">
+            {currentState !== "idle" && (
+              <motion.div
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="flex items-center"
+              >
+                {getIcon()}
+              </motion.div>
+            )}
+          </AnimatePresence>
+          
+          <motion.span
+            animate={{
+              opacity: currentState === "idle" ? 1 : 0,
+              x: currentState !== "idle" ? -20 : 0
+            }}
+            transition={{ duration: 0.2 }}
+          >
+            {children}
+          </motion.span>
+        </motion.div>
+
+        {/* Background animation for success/error states */}
+        <AnimatePresence>
+          {(currentState === "success" || currentState === "error") && (
+            <motion.div
+              className={cn(
+                "absolute inset-0 rounded-md -z-10",
+                getBackgroundColor()
+              )}
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            />
+          )}
+        </AnimatePresence>
+
+        {/* Glitch effect overlay */}
+        {enableGlitch && (
+          <motion.div
+            className="absolute inset-0 pointer-events-none"
+            animate={{
+              opacity: [0, 0.1, 0, 0.2, 0],
+              clipPath: [
+                "inset(0 0 100% 0)",
+                "inset(20% 0 60% 0)",
+                "inset(40% 0 40% 0)",
+                "inset(80% 0 10% 0)",
+                "inset(0 0 100% 0)",
+              ]
+            }}
+            transition={{
+              duration: 0.5,
+              repeat: Infinity,
+              repeatDelay: 5,
+            }}
+            style={{
+              background: "linear-gradient(45deg, #ff0080, #00ff88, #0080ff)",
+              mixBlendMode: "screen"
+            }}
+          />
+        )}
+
+        {/* Sparkle decoration for special variants */}
+        {variant === "gradient" && (
+          <Sparkles className="absolute top-1 right-1 h-3 w-3 text-white/50 animate-pulse" />
+        )}
+      </motion.button>
+    )
+  }
+)
+
+EnhancedButton.displayName = "EnhancedButton"
+
+export { enhancedButtonVariants }

package/src/components/enhanced/card.tsx

@@ -0,0 +1,272 @@
+"use client"
+
+import React, { useRef, useState } from "react"
+import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
+import { cn } from "../../lib/utils"
+
+export interface EnhancedCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  enableGlassmorphism?: boolean
+  enableParallax?: boolean
+  enableTilt?: boolean
+  enableGlow?: boolean
+  enableReveal?: boolean
+  tiltMaxAngle?: number
+  glowColor?: string
+  parallaxOffset?: number
+}
+
+export const EnhancedCard = React.forwardRef<HTMLDivElement, EnhancedCardProps>(
+  ({ 
+    className, 
+    children,
+    enableGlassmorphism = true,
+    enableParallax = false,
+    enableTilt = true,
+    enableGlow = false,
+    enableReveal = false,
+    tiltMaxAngle = 15,
+    glowColor = "rgba(59, 130, 246, 0.5)",
+    parallaxOffset = 20,
+    ...props 
+  }, ref) => {
+    const cardRef = useRef<HTMLDivElement>(null)
+    const [isHovered, setIsHovered] = useState(false)
+    
+    // Motion values for tilt effect
+    const mouseX = useMotionValue(0)
+    const mouseY = useMotionValue(0)
+    
+    // Spring physics for smooth animations
+    const springConfig = { damping: 20, stiffness: 300 }
+    const mouseXSpring = useSpring(mouseX, springConfig)
+    const mouseYSpring = useSpring(mouseY, springConfig)
+    
+    // Transform values for 3D tilt
+    const rotateX = useTransform(mouseYSpring, [-1, 1], [tiltMaxAngle, -tiltMaxAngle])
+    const rotateY = useTransform(mouseXSpring, [-1, 1], [-tiltMaxAngle, tiltMaxAngle])
+    
+    // Glow effect position
+    const glowX = useTransform(mouseXSpring, [-1, 1], [0, 100])
+    const glowY = useTransform(mouseYSpring, [-1, 1], [0, 100])
+
+    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+      if (!cardRef.current || (!enableTilt && !enableGlow)) return
+      
+      const rect = cardRef.current.getBoundingClientRect()
+      const centerX = rect.left + rect.width / 2
+      const centerY = rect.top + rect.height / 2
+      
+      const x = (e.clientX - centerX) / (rect.width / 2)
+      const y = (e.clientY - centerY) / (rect.height / 2)
+      
+      mouseX.set(x)
+      mouseY.set(y)
+    }
+
+    const handleMouseEnter = () => {
+      setIsHovered(true)
+    }
+
+    const handleMouseLeave = () => {
+      setIsHovered(false)
+      mouseX.set(0)
+      mouseY.set(0)
+    }
+
+    return (
+      <motion.div
+        ref={cardRef || ref}
+        className={cn(
+          "relative rounded-xl transition-all duration-300",
+          enableGlassmorphism && [
+            "backdrop-blur-md",
+            "bg-white/10 dark:bg-gray-900/10",
+            "border border-white/20 dark:border-gray-700/20",
+            "shadow-xl"
+          ],
+          !enableGlassmorphism && [
+            "bg-card",
+            "border border-border",
+            "shadow-sm"
+          ],
+          isHovered && "shadow-2xl",
+          className
+        )}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        style={{
+          transformStyle: "preserve-3d",
+          perspective: "1000px"
+        }}
+        animate={{
+          rotateX: enableTilt ? rotateX : 0,
+          rotateY: enableTilt ? rotateY : 0,
+        }}
+        transition={{ type: "spring", ...springConfig }}
+        {...props}
+      >
+        {/* Glow effect overlay */}
+        {enableGlow && (
+          <motion.div
+            className="absolute inset-0 rounded-xl pointer-events-none opacity-0"
+            style={{
+              background: `radial-gradient(600px circle at ${glowX}% ${glowY}%, ${glowColor}, transparent 40%)`,
+            }}
+            animate={{
+              opacity: isHovered ? 1 : 0
+            }}
+            transition={{ duration: 0.3 }}
+          />
+        )}
+
+        {/* Glassmorphism noise texture */}
+        {enableGlassmorphism && (
+          <div 
+            className="absolute inset-0 rounded-xl opacity-[0.03] pointer-events-none"
+            style={{
+              backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' /%3E%3C/svg%3E")`,
+            }}
+          />
+        )}
+
+        {/* Content with parallax effect */}
+        <motion.div
+          className="relative z-10"
+          style={{
+            transform: enableParallax ? "translateZ(50px)" : undefined,
+          }}
+          animate={{
+            x: enableParallax && isHovered ? mouseXSpring.get() * parallaxOffset : 0,
+            y: enableParallax && isHovered ? mouseYSpring.get() * parallaxOffset : 0,
+          }}
+        >
+          {children}
+        </motion.div>
+
+        {/* Reveal effect border */}
+        {enableReveal && (
+          <motion.div
+            className="absolute inset-0 rounded-xl pointer-events-none"
+            style={{
+              background: `conic-gradient(from ${glowX}deg, transparent, ${glowColor}, transparent 30%)`,
+              opacity: 0,
+              filter: "blur(5px)",
+            }}
+            animate={{
+              opacity: isHovered ? 0.5 : 0,
+              rotate: isHovered ? 360 : 0,
+            }}
+            transition={{
+              opacity: { duration: 0.3 },
+              rotate: { duration: 20, repeat: Infinity, ease: "linear" }
+            }}
+          />
+        )}
+
+        {/* Soft shadow layers for depth */}
+        <div className="absolute inset-0 rounded-xl -z-10">
+          <motion.div
+            className="absolute inset-0 rounded-xl bg-black/5 dark:bg-white/5"
+            animate={{
+              scale: isHovered ? 1.02 : 1,
+              opacity: isHovered ? 0.5 : 0,
+            }}
+            transition={{ duration: 0.3 }}
+            style={{ filter: "blur(10px)" }}
+          />
+          <motion.div
+            className="absolute inset-0 rounded-xl bg-black/5 dark:bg-white/5"
+            animate={{
+              scale: isHovered ? 1.05 : 1,
+              opacity: isHovered ? 0.3 : 0,
+            }}
+            transition={{ duration: 0.3 }}
+            style={{ filter: "blur(20px)" }}
+          />
+        </div>
+      </motion.div>
+    )
+  }
+)
+
+EnhancedCard.displayName = "EnhancedCard"
+
+// Enhanced Card sub-components with animations
+export const EnhancedCardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <motion.div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    initial={{ opacity: 0, y: -10 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.3, delay: 0.1 }}
+    {...props}
+  />
+))
+EnhancedCardHeader.displayName = "EnhancedCardHeader"
+
+export const EnhancedCardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <motion.h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    initial={{ opacity: 0, x: -10 }}
+    animate={{ opacity: 1, x: 0 }}
+    transition={{ duration: 0.3, delay: 0.2 }}
+    {...props}
+  />
+))
+EnhancedCardTitle.displayName = "EnhancedCardTitle"
+
+export const EnhancedCardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <motion.p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.3, delay: 0.3 }}
+    {...props}
+  />
+))
+EnhancedCardDescription.displayName = "EnhancedCardDescription"
+
+export const EnhancedCardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <motion.div
+    ref={ref}
+    className={cn("p-6 pt-0", className)}
+    initial={{ opacity: 0 }}
+    animate={{ opacity: 1 }}
+    transition={{ duration: 0.3, delay: 0.4 }}
+    {...props}
+  />
+))
+EnhancedCardContent.displayName = "EnhancedCardContent"
+
+export const EnhancedCardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <motion.div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    initial={{ opacity: 0, y: 10 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.3, delay: 0.5 }}
+    {...props}
+  />
+))
+EnhancedCardFooter.displayName = "EnhancedCardFooter"