@moontra/moonui-pro 2.18.6 → 2.19.0

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

@@ -1,55 +1,246 @@
 "use client";
 
 import * as React from "react";
-import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
+import { motion, useMotionValue, useSpring, useTransform, type SpringOptions } from "framer-motion";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
-export interface HoverCard3DProps extends React.HTMLAttributes<HTMLDivElement> {
+// 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;
-  rotateAmount?: number;
+  /** Maksimum rotasyon açısı (derece) */
+  maxRotation?: number;
+  /** Hover durumunda ölçekleme faktörü */
   scale?: number;
+  /** 3D perspektif değeri (px) */
   perspective?: number;
-  springConfig?: {
-    stiffness?: number;
-    damping?: 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,
-      rotateAmount = 15,
-      scale = 1.05,
+      variant = "subtle",
+      shadowIntensity = "medium",
+      glowEffect = "none",
+      maxRotation,
+      scale,
       perspective = 1000,
-      springConfig = { stiffness: 300, damping: 20 },
+      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], [rotateAmount, -rotateAmount]),
-      springConfig
+      useTransform(
+        mouseY, 
+        [-0.5, 0.5], 
+        rotateAxes.x ? [finalMaxRotation, -finalMaxRotation] : [0, 0]
+      ),
+      adjustedSpringConfig
     );
     const rotateY = useSpring(
-      useTransform(mouseX, [-0.5, 0.5], [-rotateAmount, rotateAmount]),
-      springConfig
+      useTransform(
+        mouseX, 
+        [-0.5, 0.5], 
+        rotateAxes.y ? [-finalMaxRotation, finalMaxRotation] : [0, 0]
+      ),
+      adjustedSpringConfig
     );
 
-    const handleMouseMove = React.useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
+    // 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 = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
 
         const xPct = x / width - 0.5;
         const yPct = y / height - 0.5;
@@ -60,10 +251,131 @@ const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
       [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);
-    }, [mouseX, mouseY]);
+      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
@@ -74,23 +386,80 @@ const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
       >
         <motion.div
           ref={cardRef}
-          className="w-full h-full transition-shadow duration-300 hover:shadow-xl"
+          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}
-          whileHover={{ scale }}
-          transition={{ type: "spring", ...springConfig }}
+          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}
         >
-          <div
-            className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/20 to-white/0 opacity-0 hover:opacity-100 transition-opacity duration-300"
-            style={{
-              transform: "translateZ(1px)",
-            }}
-          />
+          {/* 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>
@@ -100,4 +469,4 @@ const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
 
 HoverCard3D.displayName = "HoverCard3D";
 
-export { HoverCard3D };
+export { HoverCard3D, hoverCard3DVariants };

package/src/components/ui/index.ts

@@ -170,4 +170,9 @@ export {
   HoverCard, HoverCardTrigger, HoverCardContent
 } from './hover-card';
 
+export {
+  HoverCard3D, hoverCard3DVariants
+} from './hover-card-3d';
+export type { HoverCard3DProps, SpringConfig, OverlayRenderProp } from './hover-card-3d';
+
 // Note: Micro-interaction components are exported from their individual directories

package/src/components/ui/animated-button.tsx

@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Check, X, Loader2 } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-
-const animatedButtonVariants = cva(
-  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    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",
-      },
-      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",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface AnimatedButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof animatedButtonVariants> {
-  state?: "idle" | "loading" | "success" | "error";
-  loadingText?: string;
-  successText?: string;
-  errorText?: string;
-}
-
-const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      state = "idle",
-      loadingText = "Loading...",
-      successText = "Success!",
-      errorText = "Error!",
-      children,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const [buttonWidth, setButtonWidth] = React.useState<number | "auto">("auto");
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-
-    React.useEffect(() => {
-      if (buttonRef.current && state === "idle") {
-        setButtonWidth(buttonRef.current.offsetWidth);
-      }
-    }, [state, children]);
-
-    const isDisabled = disabled || state !== "idle";
-
-    const contentVariants = {
-      idle: { opacity: 1, y: 0 },
-      loading: { opacity: 0, y: 10 },
-      success: { opacity: 0, y: 10 },
-      error: { opacity: 0, y: 10 },
-    };
-
-    const iconVariants = {
-      hidden: { opacity: 0, scale: 0.8, y: -10 },
-      visible: { opacity: 1, scale: 1, y: 0 },
-    };
-
-    return (
-      <motion.button
-        ref={(el) => {
-          buttonRef.current = el;
-          if (ref) {
-            if (typeof ref === "function") ref(el);
-            else ref.current = el;
-          }
-        }}
-        className={cn(animatedButtonVariants({ variant, size, className }))}
-        disabled={isDisabled}
-        animate={{
-          width: state !== "idle" ? buttonWidth : "auto",
-        }}
-        transition={{ duration: 0.2 }}
-        {...props}
-      >
-        <AnimatePresence mode="wait">
-          {state === "idle" && (
-            <motion.span
-              key="idle"
-              variants={contentVariants}
-              initial="loading"
-              animate="idle"
-              exit="loading"
-              transition={{ duration: 0.2 }}
-              className="inline-flex items-center"
-            >
-              {children}
-            </motion.span>
-          )}
-
-          {state === "loading" && (
-            <motion.span
-              key="loading"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {loadingText}
-            </motion.span>
-          )}
-
-          {state === "success" && (
-            <motion.span
-              key="success"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <motion.div
-                variants={iconVariants}
-                initial="hidden"
-                animate="visible"
-                transition={{ duration: 0.3, delay: 0.1 }}
-              >
-                <Check className="h-4 w-4" />
-              </motion.div>
-              {successText}
-            </motion.span>
-          )}
-
-          {state === "error" && (
-            <motion.span
-              key="error"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <motion.div
-                variants={iconVariants}
-                initial="hidden"
-                animate="visible"
-                transition={{ duration: 0.3, delay: 0.1 }}
-                animate={{
-                  x: [0, -2, 2, -2, 2, 0],
-                }}
-                transition={{
-                  duration: 0.4,
-                  delay: 0.1,
-                }}
-              >
-                <X className="h-4 w-4" />
-              </motion.div>
-              {errorText}
-            </motion.span>
-          )}
-        </AnimatePresence>
-      </motion.button>
-    );
-  }
-);
-
-AnimatedButton.displayName = "AnimatedButton";
-
-export { AnimatedButton, animatedButtonVariants };