@moontra/moonui-pro 2.19.0 → 2.20.0

package/src/components/hover-card-3d/index.tsx

@@ -1,125 +1,488 @@
 "use client"
 
-import React, { useRef, useState } from "react"
+import React, { useRef, useState, useCallback, useEffect, useMemo } from "react"
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
 import { cn } from "../../lib/utils"
 import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { Lock, Sparkles } from "lucide-react"
 import { useSubscription } from "../../hooks/use-subscription"
+import { cva, type VariantProps } from "class-variance-authority"
 
-export interface HoverCard3DProps extends React.HTMLAttributes<HTMLDivElement> {
+const hoverCard3DVariants = cva(
+  "relative rounded-lg border bg-card text-card-foreground shadow-sm transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        subtle: "hover:bg-card/95",
+        dramatic: "hover:bg-gradient-to-br hover:from-card hover:to-card/80",
+        gaming: "hover:border-primary/50 hover:shadow-lg hover:shadow-primary/25",
+        elegant: "hover:border-border/50 hover:bg-gradient-to-br hover:from-card hover:via-card/95 hover:to-card/90",
+        neon: "hover:border-primary hover:shadow-[0_0_30px_rgba(var(--primary),0.3)]"
+      },
+      shadowIntensity: {
+        none: "",
+        light: "hover:shadow-md",
+        medium: "hover:shadow-lg",
+        heavy: "hover:shadow-xl",
+        extreme: "hover:shadow-2xl"
+      },
+      glowEffect: {
+        none: "",
+        subtle: "",
+        vibrant: "",
+        neon: ""
+      }
+    },
+    defaultVariants: {
+      variant: "subtle",
+      shadowIntensity: "medium",
+      glowEffect: "none"
+    }
+  }
+)
+
+export interface SpringConfig {
+  stiffness?: number
+  damping?: number
+  mass?: number
+  velocity?: number
+  restSpeed?: number
+  restDelta?: number
+}
+
+export type OverlayRenderProp = (props: {
+  isHovered: boolean
+  rotateX: number
+  rotateY: number
+}) => React.ReactNode
+
+export interface HoverCard3DProps 
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof hoverCard3DVariants> {
+  /**
+   * The perspective value for 3D transformation
+   * @default 1000
+   */
   perspective?: number
+  
+  /**
+   * Maximum rotation angle in degrees
+   * @default 15
+   */
+  maxRotation?: number
+  
+  /**
+   * @deprecated Use maxRotation instead
+   */
   rotationIntensity?: number
-  springConfig?: {
-    stiffness?: number
-    damping?: number
+  
+  /**
+   * Scale factor when hovered
+   * @default 1.05
+   */
+  scale?: number
+  
+  /**
+   * Spring animation configuration
+   */
+  springConfig?: SpringConfig
+  
+  /**
+   * Animation speed multiplier (0-1)
+   * @default 1
+   */
+  animationSpeed?: number
+  
+  /**
+   * Static or dynamic overlay content
+   */
+  overlay?: React.ReactNode | OverlayRenderProp
+  
+  /**
+   * Show overlay even when not hovered
+   * @default false
+   */
+  overlayAlwaysVisible?: boolean
+  
+  /**
+   * Glow color (CSS color value)
+   */
+  glowColor?: string
+  
+  /**
+   * Glow blur amount in pixels
+   * @default 20
+   */
+  glowBlur?: number
+  
+  /**
+   * Glow spread amount
+   * @default 1.2
+   */
+  glowSpread?: number
+  
+  /**
+   * Enable touch support for mobile devices
+   * @default true
+   */
+  enableTouch?: boolean
+  
+  /**
+   * Enable keyboard navigation
+   * @default true
+   */
+  enableKeyboard?: boolean
+  
+  /**
+   * Callback when hover starts
+   */
+  onHoverStart?: () => void
+  
+  /**
+   * Callback when hover ends
+   */
+  onHoverEnd?: () => void
+  
+  /**
+   * Callback when rotation changes
+   */
+  onRotationChange?: (rotateX: number, rotateY: number) => void
+  
+  /**
+   * Animation delay in ms
+   * @default 0
+   */
+  animationDelay?: number
+  
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel?: string
+  
+  /**
+   * Auto focus on mount
+   * @default false
+   */
+  autoFocus?: boolean
+  
+  /**
+   * Control which axes can rotate
+   * @default { x: true, y: true }
+   */
+  rotateAxes?: {
+    x?: boolean
+    y?: boolean
   }
 }
 
 const HoverCard3DInternal = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
   ({ 
     children, 
-    className, 
+    className,
+    variant,
+    shadowIntensity,
+    glowEffect,
     perspective = 1000,
-    rotationIntensity = 15,
-    springConfig = { stiffness: 200, damping: 15 },
-    ...props 
+    maxRotation = 15,
+    rotationIntensity,
+    scale = 1.05,
+    springConfig = { 
+      stiffness: 200, 
+      damping: 15,
+      mass: 1,
+      velocity: 0
+    },
+    animationSpeed = 1,
+    overlay,
+    overlayAlwaysVisible = false,
+    glowColor = "rgb(var(--primary))",
+    glowBlur = 20,
+    glowSpread = 1.2,
+    enableTouch = true,
+    enableKeyboard = true,
+    onHoverStart,
+    onHoverEnd,
+    onRotationChange,
+    animationDelay = 0,
+    ariaLabel,
+    autoFocus = false,
+    rotateAxes = { x: true, y: true },
+    ...restProps 
   }, ref) => {
+    // Filter out drag and animation event handlers to avoid conflicts with Framer Motion
+    const { onDrag, onDragStart, onDragEnd, onDragOver, onDrop, onAnimationStart, onAnimationEnd, onAnimationIteration, ...props } = restProps
     const cardRef = useRef<HTMLDivElement>(null)
     const [isHovered, setIsHovered] = useState(false)
+    const [isFocused, setIsFocused] = useState(false)
+    
+    // Use maxRotation, fallback to rotationIntensity for backwards compatibility
+    const rotation = maxRotation || rotationIntensity || 15
 
     const x = useMotionValue(0)
     const y = useMotionValue(0)
 
-    const springX = useSpring(x, springConfig)
-    const springY = useSpring(y, springConfig)
+    const springX = useSpring(x, {
+      ...springConfig,
+      stiffness: springConfig.stiffness! * animationSpeed,
+      damping: springConfig.damping! / animationSpeed
+    })
+    const springY = useSpring(y, {
+      ...springConfig,
+      stiffness: springConfig.stiffness! * animationSpeed,
+      damping: springConfig.damping! / animationSpeed
+    })
 
-    const rotateX = useTransform(springY, [-0.5, 0.5], [rotationIntensity, -rotationIntensity])
-    const rotateY = useTransform(springX, [-0.5, 0.5], [-rotationIntensity, rotationIntensity])
+    const rotateX = useTransform(
+      springY, 
+      [-1, 1], 
+      rotateAxes.x ? [rotation, -rotation] : [0, 0]
+    )
+    const rotateY = useTransform(
+      springX, 
+      [-1, 1], 
+      rotateAxes.y ? [-rotation, rotation] : [0, 0]
+    )
 
-    const handleMouseMove = (e: React.MouseEvent) => {
+    const handleMouseMove = useCallback((e: React.MouseEvent | React.TouchEvent) => {
       if (!cardRef.current) return
 
       const rect = cardRef.current.getBoundingClientRect()
       const centerX = rect.left + rect.width / 2
       const centerY = rect.top + rect.height / 2
+      
+      let clientX: number, clientY: number
+      
+      if ('touches' in e && enableTouch) {
+        clientX = e.touches[0].clientX
+        clientY = e.touches[0].clientY
+      } else if ('clientX' in e) {
+        clientX = e.clientX
+        clientY = e.clientY
+      } else {
+        return
+      }
 
-      const rotateXValue = (e.clientY - centerY) / (rect.height / 2)
-      const rotateYValue = (e.clientX - centerX) / (rect.width / 2)
+      const rotateXValue = (clientY - centerY) / (rect.height / 2)
+      const rotateYValue = (clientX - centerX) / (rect.width / 2)
 
       x.set(rotateYValue)
       y.set(rotateXValue)
-    }
+      
+      if (onRotationChange) {
+        onRotationChange(rotateX.get(), rotateY.get())
+      }
+    }, [enableTouch, x, y, rotateX, rotateY, onRotationChange])
 
-    const handleMouseEnter = () => {
+    const handleMouseEnter = useCallback(() => {
       setIsHovered(true)
-    }
+      onHoverStart?.()
+    }, [onHoverStart])
 
-    const handleMouseLeave = () => {
+    const handleMouseLeave = useCallback(() => {
       setIsHovered(false)
       x.set(0)
       y.set(0)
-    }
+      onHoverEnd?.()
+    }, [x, y, onHoverEnd])
 
-    return (
-      <motion.div
-        ref={(node) => {
-          cardRef.current = node
-          if (typeof ref === "function") {
-            ref(node)
-          } else if (ref) {
-            ref.current = node
+    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+      if (!enableKeyboard || !isFocused) return
+
+      const step = 0.1
+      let newX = x.get()
+      let newY = y.get()
+
+      switch (e.key) {
+        case 'ArrowUp':
+          newY = Math.max(-0.5, newY - step)
+          y.set(newY)
+          e.preventDefault()
+          break
+        case 'ArrowDown':
+          newY = Math.min(0.5, newY + step)
+          y.set(newY)
+          e.preventDefault()
+          break
+        case 'ArrowLeft':
+          newX = Math.max(-0.5, newX - step)
+          x.set(newX)
+          e.preventDefault()
+          break
+        case 'ArrowRight':
+          newX = Math.min(0.5, newX + step)
+          x.set(newX)
+          e.preventDefault()
+          break
+        case 'Enter':
+        case ' ':
+          setIsHovered(!isHovered)
+          if (!isHovered) {
+            onHoverStart?.()
+          } else {
+            onHoverEnd?.()
           }
-        }}
-        className={cn(
-          "relative rounded-lg border bg-card text-card-foreground shadow-sm transition-colors duration-200 hover:bg-card/90",
-          className
-        )}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        style={{
-          transformPerspective: perspective,
-          transformStyle: "preserve-3d",
-        }}
-        animate={{
-          rotateX: isHovered ? rotateX.get() : 0,
-          rotateY: isHovered ? rotateY.get() : 0,
-          scale: isHovered ? 1.05 : 1,
-        }}
-        transition={{ duration: 0.15 }}
-      >
+          e.preventDefault()
+          break
+        case 'Escape':
+          x.set(0)
+          y.set(0)
+          setIsHovered(false)
+          onHoverEnd?.()
+          e.preventDefault()
+          break
+      }
+      
+      if (onRotationChange) {
+        onRotationChange(rotateX.get(), rotateY.get())
+      }
+    }, [enableKeyboard, isFocused, x, y, isHovered, onHoverStart, onHoverEnd, rotateX, rotateY, onRotationChange])
+
+    useEffect(() => {
+      if (autoFocus && cardRef.current) {
+        cardRef.current.focus()
+      }
+    }, [autoFocus])
+
+    const overlayContent = useMemo(() => {
+      if (!overlay) return null
+      
+      if (typeof overlay === 'function') {
+        return overlay({
+          isHovered,
+          rotateX: rotateX.get(),
+          rotateY: rotateY.get()
+        })
+      }
+      
+      return overlay
+    }, [overlay, isHovered, rotateX, rotateY])
+
+    const glowStyle = useMemo(() => {
+      if (glowEffect === 'none') return {}
+      
+      let opacity = 0
+      let blur = glowBlur
+      let spread = glowSpread
+      
+      switch (glowEffect) {
+        case 'subtle':
+          opacity = isHovered ? 0.3 : 0
+          break
+        case 'vibrant':
+          opacity = isHovered ? 0.6 : 0
+          blur = glowBlur * 1.5
+          break
+        case 'neon':
+          opacity = isHovered ? 0.8 : 0
+          blur = glowBlur * 2
+          spread = glowSpread * 1.3
+          break
+      }
+      
+      return {
+        opacity,
+        filter: `blur(${blur}px)`,
+        scale: spread,
+        backgroundColor: glowColor
+      }
+    }, [glowEffect, isHovered, glowBlur, glowSpread, glowColor])
+
+    return (
+      <div style={{ perspective: `${perspective}px` }}>
+        <motion.div
+          ref={(node) => {
+            cardRef.current = node
+            if (typeof ref === "function") {
+              ref(node)
+            } else if (ref) {
+              ref.current = node
+            }
+          }}
+          className={cn(
+            hoverCard3DVariants({ variant, shadowIntensity, glowEffect }),
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            className
+          )}
+          onMouseMove={handleMouseMove}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          onTouchMove={enableTouch ? handleMouseMove : undefined}
+          onTouchStart={enableTouch ? handleMouseEnter : undefined}
+          onTouchEnd={enableTouch ? handleMouseLeave : undefined}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          style={{
+            transformStyle: "preserve-3d",
+            transformOrigin: "center center",
+            rotateX: isHovered || isFocused ? rotateX : 0,
+            rotateY: isHovered || isFocused ? rotateY : 0,
+            scale: isHovered || isFocused ? scale : 1,
+          }}
+          transition={{ 
+            type: "spring",
+            stiffness: springConfig.stiffness,
+            damping: springConfig.damping,
+            duration: 0.15 * (1 / animationSpeed),
+            delay: animationDelay / 1000
+          }}
+          tabIndex={enableKeyboard ? 0 : undefined}
+          role={enableKeyboard ? "button" : undefined}
+          aria-label={ariaLabel}
+          {...props}
+        >
         <motion.div
           className="relative z-10"
           animate={{
-            z: isHovered ? 20 : 0,
+            z: isHovered || isFocused ? 20 : 0,
           }}
-          transition={{ duration: 0.2 }}
+          transition={{ duration: 0.2 * (1 / animationSpeed) }}
         >
           {children}
         </motion.div>
 
+        {/* Overlay */}
+        {overlayContent && (
+          <motion.div
+            className="absolute inset-0 rounded-lg pointer-events-none z-20"
+            animate={{
+              opacity: overlayAlwaysVisible ? 1 : (isHovered || isFocused ? 1 : 0),
+            }}
+            transition={{ duration: 0.3 * (1 / animationSpeed) }}
+          >
+            {overlayContent}
+          </motion.div>
+        )}
+
         {/* Gradient overlay */}
-        <motion.div
-          className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 via-transparent to-black/5 pointer-events-none"
-          animate={{
-            opacity: isHovered ? 1 : 0,
-          }}
-          transition={{ duration: 0.3 }}
-        />
+        {variant !== 'subtle' && (
+          <motion.div
+            className={cn(
+              "absolute inset-0 rounded-lg pointer-events-none",
+              variant === 'dramatic' && "bg-gradient-to-br from-white/10 via-transparent to-black/10",
+              variant === 'gaming' && "bg-gradient-to-br from-primary/10 via-transparent to-primary/5",
+              variant === 'elegant' && "bg-gradient-to-br from-white/5 via-transparent to-black/5",
+              variant === 'neon' && "bg-gradient-to-br from-primary/20 via-transparent to-primary/10"
+            )}
+            animate={{
+              opacity: isHovered || isFocused ? 1 : 0,
+            }}
+            transition={{ duration: 0.3 * (1 / animationSpeed) }}
+          />
+        )}
 
         {/* Glow effect */}
-        <motion.div
-          className="absolute inset-0 rounded-lg bg-primary/5 blur-xl"
-          animate={{
-            opacity: isHovered ? 0.8 : 0,
-            scale: isHovered ? 1.2 : 1,
-          }}
-          transition={{ duration: 0.3 }}
-          style={{ zIndex: -1 }}
-        />
+        {glowEffect !== 'none' && (
+          <motion.div
+            className="absolute inset-0 rounded-lg pointer-events-none"
+            animate={glowStyle}
+            transition={{ duration: 0.3 * (1 / animationSpeed) }}
+            style={{ zIndex: -1 }}
+          />
+        )}
       </motion.div>
+      </div>
     )
   }
 )
@@ -127,16 +490,14 @@ const HoverCard3DInternal = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
 HoverCard3DInternal.displayName = "HoverCard3DInternal"
 
 export const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
-  ({ className, ...props }, ref) => {
-    // Check if we're in docs mode or have pro access
+  (props, ref) => {
+    // Pro package - always show component
     const { hasProAccess, isLoading } = useSubscription()
     
-    // In docs mode, always show the component
-    
-    // If not in docs mode and no pro access, show upgrade prompt
+    // Show upgrade prompt if no pro access
     if (!isLoading && !hasProAccess) {
       return (
-        <Card className={cn("w-fit", className)}>
+        <Card className={cn("w-fit", props.className)}>
           <CardContent className="py-6 text-center">
             <div className="space-y-4">
               <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
@@ -160,8 +521,10 @@ export const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
       )
     }
 
-    return <HoverCard3DInternal className={className} ref={ref} {...props} />
+    return <HoverCard3DInternal {...props} ref={ref} />
   }
 )
 
-HoverCard3D.displayName = "HoverCard3D"
+HoverCard3D.displayName = "HoverCard3D"
+
+export { hoverCard3DVariants }

package/src/components/index.ts

@@ -116,4 +116,13 @@ export {
   type QuizSettings as MoonUIQuizSettings,
   type UserAnswer as MoonUIUserAnswer,
   type QuizResult as MoonUIQuizResult
-} from "./moonui-quiz-form"
+} from "./moonui-quiz-form"
+
+// Gesture Drawer
+export { 
+  MoonUIGestureDrawerPro,
+  GestureDrawer,
+  type MoonUIGestureDrawerProProps,
+  type GestureDrawerProps,
+  moonUIGestureDrawerProVariants
+} from "./gesture-drawer"

package/src/components/lazy-component/index.tsx

@@ -366,7 +366,7 @@ const LazyComponentInternal: React.FC<LazyComponentProps> = ({
 }
 
 // Lazy Image Component
-export interface LazyImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onProgress'> {
   src: string
   alt: string
   fallbackSrc?: string
@@ -409,8 +409,10 @@ export const LazyImage: React.FC<LazyImageProps> = ({
   srcSet,
   enableProgressiveLoading = false,
   onProgress,
-  ...props
+  ...restProps
 }) => {
+  // Filter out LazyImage specific props and event handlers that shouldn't be passed to img element
+  const { onDrag, onDragStart, onDragEnd, onDragOver, onDrop, onAnimationStart, onAnimationEnd, onAnimationIteration, ...props } = restProps
   const [imageSrc, setImageSrc] = useState<string | null>(priority ? src : null)
   const [imageError, setImageError] = useState(false)
   const [isVisible, setIsVisible] = useState(priority)

package/src/components/license-error/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { cn } from '../../lib/utils'
+
+interface LicenseErrorProps {
+  className?: string
+}
+
+export function LicenseError({ className }: LicenseErrorProps) {
+  return (
+    <div className={cn(
+      "flex flex-col items-center justify-center p-8 text-center border-2 border-dashed border-red-500/20 rounded-lg bg-red-50/5",
+      className
+    )}>
+      <div className="text-red-500 mb-4">
+        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12 2L2 7V12C2 16.5 4.23 20.68 7.62 23.47L12 22L16.38 23.47C19.77 20.68 22 16.5 22 12V7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          <path d="M12 9V13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          <circle cx="12" cy="17" r="1" fill="currentColor"/>
+        </svg>
+      </div>
+      <h3 className="text-lg font-semibold text-red-600 mb-2">License Required</h3>
+      <p className="text-sm text-muted-foreground max-w-md">
+        This is a Pro component. Please ensure you have a valid MoonUI Pro license to use this component.
+      </p>
+    </div>
+  )
+}
+
+export default LicenseError

package/src/components/memory-efficient-data/index.tsx

@@ -831,7 +831,7 @@ export function RealTimePerformanceMonitor({
             "px-3 py-1 text-xs rounded-md transition-colors",
             isActive 
               ? "bg-green-500/10 text-green-500 hover:bg-green-500/20" 
-              : "bg-gray-500/10 text-gray-500 hover:bg-gray-500/20"
+              : "bg-muted text-muted-foreground hover:bg-muted/80"
           )}
         >
           {isActive ? 'Aktif' : 'Durduruldu'}