@moontra/moonui-pro 2.19.0 → 2.20.1

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

@@ -1,472 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { motion, useMotionValue, useSpring, useTransform, type SpringOptions } from "framer-motion";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-// Gelişmiş spring konfigürasyonu tipleri
-export interface SpringConfig extends SpringOptions {
-  stiffness?: number;
-  damping?: number;
-  mass?: number;
-  velocity?: number;
-  restDelta?: number;
-  restSpeed?: number;
-}
-
-// Overlay render prop tipi
-export type OverlayRenderProp = (props: {
-  isHovered: boolean;
-  rotateX: number;
-  rotateY: number;
-}) => React.ReactNode;
-
-// 3D efekt varyantları
-const hoverCard3DVariants = cva(
-  "relative w-full h-full",
-  {
-    variants: {
-      variant: {
-        subtle: "",
-        dramatic: "",
-        gaming: "",
-        elegant: "",
-        neon: "",
-      },
-      shadowIntensity: {
-        none: "",
-        light: "",
-        medium: "",
-        heavy: "",
-        extreme: "",
-      },
-      glowEffect: {
-        none: "",
-        subtle: "",
-        vibrant: "",
-        neon: "",
-      }
-    },
-    defaultVariants: {
-      variant: "subtle",
-      shadowIntensity: "medium",
-      glowEffect: "none",
-    }
-  }
-);
-
-export interface HoverCard3DProps 
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof hoverCard3DVariants> {
-  /** İçerik */
-  children: React.ReactNode;
-  /** Maksimum rotasyon açısı (derece) */
-  maxRotation?: number;
-  /** Hover durumunda ölçekleme faktörü */
-  scale?: number;
-  /** 3D perspektif değeri (px) */
-  perspective?: number;
-  /** Animasyon hızı (0-1 arası, 1 en hızlı) */
-  animationSpeed?: number;
-  /** Spring animasyon konfigürasyonu */
-  springConfig?: SpringConfig;
-  /** Özel overlay içeriği veya render prop */
-  overlay?: React.ReactNode | OverlayRenderProp;
-  /** Overlay'in her zaman görünür olup olmayacağı */
-  overlayAlwaysVisible?: boolean;
-  /** Glow efekti rengi (CSS color değeri) */
-  glowColor?: string;
-  /** Glow efekti blur değeri (px) */
-  glowBlur?: number;
-  /** Glow efekti spread değeri (px) */
-  glowSpread?: number;
-  /** Touch desteği aktif mi? */
-  enableTouch?: boolean;
-  /** Klavye desteği aktif mi? */
-  enableKeyboard?: boolean;
-  /** Rotasyon eksenleri */
-  rotateAxes?: {
-    x?: boolean;
-    y?: boolean;
-  };
-  /** Animasyon başlangıç gecikmesi (ms) */
-  animationDelay?: number;
-  /** Hover'da tetiklenecek callback */
-  onHoverStart?: () => void;
-  /** Hover bittiğinde tetiklenecek callback */
-  onHoverEnd?: () => void;
-  /** Rotasyon değiştiğinde tetiklenecek callback */
-  onRotationChange?: (rotateX: number, rotateY: number) => void;
-  /** ARIA label */
-  ariaLabel?: string;
-  /** Otomatik odaklanma */
-  autoFocus?: boolean;
-}
-
-// Varyant bazlı konfigürasyonlar
-const variantConfigs = {
-  subtle: {
-    maxRotation: 10,
-    scale: 1.02,
-    springConfig: { stiffness: 400, damping: 30 },
-  },
-  dramatic: {
-    maxRotation: 25,
-    scale: 1.1,
-    springConfig: { stiffness: 200, damping: 20 },
-  },
-  gaming: {
-    maxRotation: 30,
-    scale: 1.15,
-    springConfig: { stiffness: 300, damping: 15 },
-  },
-  elegant: {
-    maxRotation: 8,
-    scale: 1.03,
-    springConfig: { stiffness: 500, damping: 40 },
-  },
-  neon: {
-    maxRotation: 20,
-    scale: 1.08,
-    springConfig: { stiffness: 250, damping: 25 },
-  },
-};
-
-// Shadow intensity değerleri
-const shadowIntensityMap = {
-  none: "none",
-  light: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-  medium: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-  heavy: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-  extreme: "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-};
-
-const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
-  (
-    {
-      children,
-      className,
-      variant = "subtle",
-      shadowIntensity = "medium",
-      glowEffect = "none",
-      maxRotation,
-      scale,
-      perspective = 1000,
-      animationSpeed = 1,
-      springConfig,
-      overlay,
-      overlayAlwaysVisible = false,
-      glowColor = "rgb(99, 102, 241)",
-      glowBlur = 20,
-      glowSpread = 5,
-      enableTouch = true,
-      enableKeyboard = true,
-      rotateAxes = { x: true, y: true },
-      animationDelay = 0,
-      onHoverStart,
-      onHoverEnd,
-      onRotationChange,
-      ariaLabel,
-      autoFocus = false,
-      ...props
-    },
-    ref
-  ) => {
-    const cardRef = React.useRef<HTMLDivElement>(null);
-    const [isHovered, setIsHovered] = React.useState(false);
-    const [isFocused, setIsFocused] = React.useState(false);
-    
-    // Varyant bazlı default değerler
-    const variantConfig = variantConfigs[variant as keyof typeof variantConfigs] || variantConfigs.subtle;
-    const finalMaxRotation = maxRotation ?? variantConfig.maxRotation;
-    const finalScale = scale ?? variantConfig.scale;
-    const finalSpringConfig = springConfig ?? variantConfig.springConfig;
-    
-    // Animasyon hızı faktörü
-    const speedFactor = Math.max(0.1, Math.min(1, animationSpeed));
-    const adjustedSpringConfig = {
-      ...finalSpringConfig,
-      stiffness: (finalSpringConfig.stiffness || 300) * speedFactor,
-      damping: (finalSpringConfig.damping || 20) / speedFactor,
-    };
-
-    const mouseX = useMotionValue(0);
-    const mouseY = useMotionValue(0);
-
-    // Rotasyon değerleri
-    const rotateX = useSpring(
-      useTransform(
-        mouseY, 
-        [-0.5, 0.5], 
-        rotateAxes.x ? [finalMaxRotation, -finalMaxRotation] : [0, 0]
-      ),
-      adjustedSpringConfig
-    );
-    const rotateY = useSpring(
-      useTransform(
-        mouseX, 
-        [-0.5, 0.5], 
-        rotateAxes.y ? [-finalMaxRotation, finalMaxRotation] : [0, 0]
-      ),
-      adjustedSpringConfig
-    );
-
-    // Rotasyon değişim callback'i
-    React.useEffect(() => {
-      if (onRotationChange) {
-        const unsubscribeX = rotateX.on("change", (x) => {
-          const y = rotateY.get();
-          onRotationChange(x, y);
-        });
-        const unsubscribeY = rotateY.on("change", (y) => {
-          const x = rotateX.get();
-          onRotationChange(x, y);
-        });
-        
-        return () => {
-          unsubscribeX();
-          unsubscribeY();
-        };
-      }
-    }, [rotateX, rotateY, onRotationChange]);
-
-    // Mouse/Touch pozisyon hesaplama
-    const calculatePosition = React.useCallback(
-      (clientX: number, clientY: number) => {
-        if (!cardRef.current) return;
-
-        const rect = cardRef.current.getBoundingClientRect();
-        const width = rect.width;
-        const height = rect.height;
-        const x = clientX - rect.left;
-        const y = clientY - rect.top;
-
-        const xPct = x / width - 0.5;
-        const yPct = y / height - 0.5;
-
-        mouseX.set(xPct);
-        mouseY.set(yPct);
-      },
-      [mouseX, mouseY]
-    );
-
-    // Event handler'lar
-    const handleMouseMove = React.useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        calculatePosition(e.clientX, e.clientY);
-      },
-      [calculatePosition]
-    );
-
-    const handleTouchMove = React.useCallback(
-      (e: React.TouchEvent<HTMLDivElement>) => {
-        if (!enableTouch) return;
-        const touch = e.touches[0];
-        calculatePosition(touch.clientX, touch.clientY);
-      },
-      [calculatePosition, enableTouch]
-    );
-
-    const handleMouseEnter = React.useCallback(() => {
-      setIsHovered(true);
-      onHoverStart?.();
-    }, [onHoverStart]);
-
-    const handleMouseLeave = React.useCallback(() => {
-      mouseX.set(0);
-      mouseY.set(0);
-      setIsHovered(false);
-      onHoverEnd?.();
-    }, [mouseX, mouseY, onHoverEnd]);
-
-    const handleTouchEnd = React.useCallback(() => {
-      if (!enableTouch) return;
-      handleMouseLeave();
-    }, [handleMouseLeave, enableTouch]);
-
-    // Klavye desteği
-    const handleKeyDown = React.useCallback(
-      (e: React.KeyboardEvent<HTMLDivElement>) => {
-        if (!enableKeyboard) return;
-        
-        const step = 0.1;
-        let newX = mouseX.get();
-        let newY = mouseY.get();
-
-        switch (e.key) {
-          case "ArrowUp":
-            newY = Math.max(-0.5, newY - step);
-            break;
-          case "ArrowDown":
-            newY = Math.min(0.5, newY + step);
-            break;
-          case "ArrowLeft":
-            newX = Math.max(-0.5, newX - step);
-            break;
-          case "ArrowRight":
-            newX = Math.min(0.5, newX + step);
-            break;
-          case "Enter":
-          case " ":
-            setIsHovered(!isHovered);
-            if (!isHovered) {
-              onHoverStart?.();
-            } else {
-              onHoverEnd?.();
-            }
-            break;
-          case "Escape":
-            newX = 0;
-            newY = 0;
-            setIsHovered(false);
-            onHoverEnd?.();
-            break;
-          default:
-            return;
-        }
-
-        e.preventDefault();
-        mouseX.set(newX);
-        mouseY.set(newY);
-      },
-      [mouseX, mouseY, isHovered, enableKeyboard, onHoverStart, onHoverEnd]
-    );
-
-    const handleFocus = React.useCallback(() => {
-      setIsFocused(true);
-    }, []);
-
-    const handleBlur = React.useCallback(() => {
-      setIsFocused(false);
-      if (!isHovered) {
-        mouseX.set(0);
-        mouseY.set(0);
-      }
-    }, [mouseX, mouseY, isHovered]);
-
-    // Glow efekti stili
-    const glowStyle = React.useMemo(() => {
-      if (glowEffect === "none") return {};
-      
-      const intensity = {
-        subtle: 0.3,
-        vibrant: 0.6,
-        neon: 1,
-      }[glowEffect as string] || 0.3;
-
-      return {
-        boxShadow: isHovered 
-          ? `0 0 ${glowBlur}px ${glowSpread}px ${glowColor}${Math.round(intensity * 255).toString(16).padStart(2, '0')}`
-          : undefined,
-      };
-    }, [glowEffect, glowColor, glowBlur, glowSpread, isHovered]);
-
-    // Overlay içeriği
-    const overlayContent = React.useMemo(() => {
-      if (!overlay) return null;
-      
-      if (typeof overlay === "function") {
-        return overlay({
-          isHovered,
-          rotateX: rotateX.get(),
-          rotateY: rotateY.get(),
-        });
-      }
-      
-      return overlay;
-    }, [overlay, isHovered, rotateX, rotateY]);
-
-    return (
-      <div
-        ref={ref}
-        className={cn("relative", className)}
-        style={{ perspective }}
-        {...props}
-      >
-        <motion.div
-          ref={cardRef}
-          className={cn(
-            hoverCard3DVariants({ variant, shadowIntensity, glowEffect }),
-            "transition-shadow duration-300",
-            isFocused && "ring-2 ring-primary ring-offset-2 ring-offset-background"
-          )}
-          style={{
-            rotateX,
-            rotateY,
-            transformStyle: "preserve-3d",
-            boxShadow: shadowIntensityMap[shadowIntensity as keyof typeof shadowIntensityMap],
-            ...glowStyle,
-          }}
-          onMouseMove={handleMouseMove}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onTouchMove={handleTouchMove}
-          onTouchEnd={handleTouchEnd}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          whileHover={{ scale: finalScale }}
-          initial={{ scale: 1 }}
-          transition={{
-            type: "spring",
-            delay: animationDelay / 1000,
-            ...adjustedSpringConfig,
-          }}
-          tabIndex={enableKeyboard ? 0 : -1}
-          role="button"
-          aria-label={ariaLabel || "3D hover card"}
-          autoFocus={autoFocus}
-        >
-          {/* Overlay katmanı */}
-          {(overlayAlwaysVisible || isHovered) && overlayContent && (
-            <div
-              className="absolute inset-0 rounded-lg pointer-events-none"
-              style={{
-                transform: "translateZ(1px)",
-              }}
-            >
-              {overlayContent}
-            </div>
-          )}
-          
-          {/* Varsayılan highlight efekti */}
-          {!overlay && variant !== "neon" && (
-            <div
-              className={cn(
-                "absolute inset-0 rounded-lg bg-gradient-to-br from-white/20 to-white/0",
-                "opacity-0 transition-opacity duration-300 pointer-events-none",
-                isHovered && "opacity-100"
-              )}
-              style={{
-                transform: "translateZ(1px)",
-              }}
-            />
-          )}
-          
-          {/* Neon varyantı için özel efekt */}
-          {variant === "neon" && (
-            <div
-              className={cn(
-                "absolute inset-0 rounded-lg",
-                "opacity-0 transition-opacity duration-300 pointer-events-none",
-                isHovered && "opacity-100"
-              )}
-              style={{
-                transform: "translateZ(2px)",
-                background: `linear-gradient(45deg, ${glowColor}20, transparent, ${glowColor}20)`,
-                filter: "blur(10px)",
-              }}
-            />
-          )}
-          
-          {children}
-        </motion.div>
-      </div>
-    );
-  }
-);
-
-HoverCard3D.displayName = "HoverCard3D";
-
-export { HoverCard3D, hoverCard3DVariants };