@moontra/moonui-pro 2.18.6 → 2.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.18.6",
+  "version": "2.19.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",

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

@@ -9,8 +9,8 @@ import { Card, CardContent } from "../ui/card"
 import { Button } from "../ui/button"
 import { useSubscription } from "../../hooks/use-subscription"
 
-const animatedButtonVariants = cva(
-  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 overflow-hidden",
+const moonUIAnimatedButtonProVariants = 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-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 overflow-hidden min-w-fit",
   {
     variants: {
       variant: {
@@ -20,68 +20,143 @@ const animatedButtonVariants = cva(
         secondary: "bg-secondary text-secondary-foreground shadow-sm 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 hover:shadow-xl hover:shadow-primary/25",
       },
       size: {
         default: "h-9 px-4 py-2",
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
-      },
+        xl: "h-11 rounded-md px-6 text-base font-medium",
+        icon: "h-9 w-9",
+      }
     },
     defaultVariants: {
       variant: "default",
-      size: "default",
+      size: "default"
     },
   }
 )
 
-interface AnimatedButtonProps
+interface MoonUIAnimatedButtonProProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof animatedButtonVariants> {
+    VariantProps<typeof moonUIAnimatedButtonProVariants> {
   state?: "idle" | "loading" | "success" | "error"
   onStateChange?: (state: "idle" | "loading" | "success" | "error") => void
+  loadingText?: string
+  successText?: string
+  errorText?: string
+  ripple?: boolean
+  iconRotate?: boolean
+  shimmerSpeed?: "slow" | "normal" | "fast"
+  glowIntensity?: "low" | "medium" | "high"
+  showProgressBar?: boolean
+  autoResetDelay?: number
+  animation?: "none" | "bounce" | "pulse" | "shimmer" | "slide" | "scale" | "rotate" | "shake"
 }
 
-const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  ({ className, variant, size, state = "idle", onStateChange, children, onClick, ...props }, ref) => {
+const MoonUIAnimatedButtonProInternal = React.forwardRef<HTMLButtonElement, MoonUIAnimatedButtonProProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    animation = "none",
+    state = "idle", 
+    onStateChange, 
+    children, 
+    onClick, 
+    loadingText = "Loading...",
+    successText = "Success!",
+    errorText = "Error!",
+    ripple = false,
+    iconRotate = false,
+    shimmerSpeed = "normal",
+    glowIntensity = "medium",
+    showProgressBar = false,
+    autoResetDelay = 2000,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    onAnimationStart,
+    onAnimationEnd,
+    ...props 
+  }, ref) => {
     const [internalState, setInternalState] = useState<"idle" | "loading" | "success" | "error">("idle")
+    const [ripples, setRipples] = useState<Array<{x: number, y: number, id: number}>>([])
+    const [progress, setProgress] = useState(0)
+    const [isHovered, setIsHovered] = useState(false)
     const currentState = state !== "idle" ? state : internalState
 
     const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
       if (currentState === "loading") return
 
+      // Ripple effect
+      if (ripple) {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const id = Date.now()
+        
+        setRipples([...ripples, { x, y, id }])
+        setTimeout(() => {
+          setRipples(prev => prev.filter(r => r.id !== id))
+        }, 600)
+      }
+
       setInternalState("loading")
       onStateChange?.("loading")
+      setProgress(0)
+
+      // Simulate progress
+      if (showProgressBar) {
+        const progressInterval = setInterval(() => {
+          setProgress(prev => {
+            if (prev >= 90) {
+              clearInterval(progressInterval)
+              return 90
+            }
+            return prev + 10
+          })
+        }, 200)
+      }
 
       if (onClick) {
         try {
           await onClick(e)
+          setProgress(100)
           setInternalState("success")
           onStateChange?.("success")
           
           setTimeout(() => {
             setInternalState("idle")
             onStateChange?.("idle")
-          }, 2000)
+            setProgress(0)
+          }, autoResetDelay)
         } catch (error) {
+          setProgress(0)
           setInternalState("error")
           onStateChange?.("error")
           
           setTimeout(() => {
             setInternalState("idle")
             onStateChange?.("idle")
-          }, 2000)
+          }, autoResetDelay)
         }
       }
     }
 
     const getIcon = () => {
+      const iconClass = cn("h-4 w-4", {
+        "animate-spin": currentState === "loading" || (iconRotate && currentState !== "idle"),
+      })
+      
       switch (currentState) {
         case "loading":
-          return <Loader2 className="h-4 w-4 animate-spin" />
+          return <Loader2 className={iconClass} />
         case "success":
-          return <Check className="h-4 w-4" />
+          return <Check className={cn(iconClass, "animate-scale-in")} />
         case "error":
-          return <X className="h-4 w-4" />
+          return <X className={cn(iconClass, "animate-shake")} />
         default:
           return null
       }
@@ -98,42 +173,140 @@ const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButto
       }
     }
 
+    const getShimmerSpeed = () => {
+      switch (shimmerSpeed) {
+        case "slow":
+          return "duration-1500"
+        case "fast":
+          return "duration-500"
+        default:
+          return "duration-1000"
+      }
+    }
+
+    const getGlowIntensity = () => {
+      switch (glowIntensity) {
+        case "low":
+          return "shadow-lg"
+        case "high":
+          return "shadow-2xl"
+        default:
+          return "shadow-xl"
+      }
+    }
+
+
+    // whileHover direkt olarak kullanılacak
+    let whileHoverAnimation: any = undefined
+    let whileTapAnimation: any = undefined
+
+    // Animation specific hover states
+    if (animation === "bounce") {
+      whileHoverAnimation = { 
+        y: [0, -10, 0],
+        transition: { 
+          duration: 0.6,
+          repeat: Infinity,
+          repeatType: "loop" 
+        }
+      }
+    } else if (animation === "pulse") {
+      whileHoverAnimation = { 
+        scale: [1, 1.1, 1],
+        transition: { 
+          duration: 1,
+          repeat: Infinity,
+          repeatType: "loop"
+        }
+      }
+    } else if (animation === "shake") {
+      // Shake için CSS animation kullanacağız
+      whileHoverAnimation = undefined
+    } else if (animation === "rotate") {
+      whileHoverAnimation = { 
+        rotate: 10,
+        transition: { type: "spring", stiffness: 300 }
+      }
+    } else if (animation === "scale") {
+      whileHoverAnimation = { scale: 1.05 }
+      whileTapAnimation = { scale: 0.95 }
+    } else if (animation === "slide") {
+      whileHoverAnimation = { y: -4 }
+    }
+
     return (
-      <button
-        className={cn(animatedButtonVariants({ variant, size }), className)}
+      <motion.button
+        {...props}
+        className={cn(
+          moonUIAnimatedButtonProVariants({ variant, size }), 
+          variant === "glow" && getGlowIntensity(),
+          animation === "shake" && isHovered && "animate-shake",
+          className
+        )}
         ref={ref}
         onClick={handleClick}
         disabled={currentState === "loading" || props.disabled}
-        {...props}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        whileHover={whileHoverAnimation}
+        whileTap={whileTapAnimation}
       >
-        <motion.div
-          className="flex items-center gap-2"
-          animate={{
-            width: currentState !== "idle" ? "auto" : "100%"
-          }}
-          transition={{ duration: 0.2 }}
-        >
+        {/* Progress Bar */}
+        {showProgressBar && currentState === "loading" && (
           <motion.div
-            animate={{
-              scale: currentState !== "idle" ? 1 : 0,
-              width: currentState !== "idle" ? "auto" : 0
-            }}
-            transition={{ duration: 0.2 }}
-            className="flex items-center"
-          >
-            {getIcon()}
-          </motion.div>
-          
-          <motion.span
-            animate={{
-              opacity: currentState === "idle" ? 1 : 0,
-              x: currentState !== "idle" ? -20 : 0
+            className="absolute bottom-0 left-0 h-1 bg-primary-foreground/20 rounded-full"
+            initial={{ width: 0 }}
+            animate={{ width: `${progress}%` }}
+            transition={{ duration: 0.3 }}
+          />
+        )}
+
+        {/* Shimmer Effect */}
+        {animation === "shimmer" && (
+          <motion.div 
+            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
+            initial={{ x: "-100%" }}
+            animate={{ x: "100%" }}
+            transition={{ 
+              duration: shimmerSpeed === "slow" ? 1.5 : shimmerSpeed === "fast" ? 0.5 : 1,
+              repeat: Infinity,
+              repeatDelay: 1
             }}
-            transition={{ duration: 0.2 }}
-          >
-            {children}
-          </motion.span>
-        </motion.div>
+          />
+        )}
+
+        {/* Content */}
+        <div className="relative flex items-center justify-center gap-2 z-10">
+          {/* Icon variant için özel düzenleme */}
+          {size === "icon" ? (
+            // Icon size için sadece icon göster
+            currentState === "idle" ? (
+              children
+            ) : (
+              getIcon()
+            )
+          ) : (
+            // Diğer boyutlar için normal akış
+            <>
+              {currentState === "idle" ? (
+                <>
+                  {React.isValidElement(children) && React.cloneElement(children as React.ReactElement)}
+                  {typeof children === 'string' && children}
+                  {React.isValidElement(children) || typeof children === 'string' ? null : children}
+                </>
+              ) : (
+                <>
+                  {getIcon()}
+                  <span className="ml-2">
+                    {currentState === "loading" && loadingText}
+                    {currentState === "success" && successText}
+                    {currentState === "error" && errorText}
+                  </span>
+                </>
+              )}
+            </>
+          )}
+        </div>
 
         {/* Background animation */}
         <motion.div
@@ -144,27 +317,41 @@ const AnimatedButtonInternal = React.forwardRef<HTMLButtonElement, AnimatedButto
           initial={{ scale: 0, opacity: 0 }}
           animate={{
             scale: currentState === "success" || currentState === "error" ? 1 : 0,
-            opacity: currentState === "success" || currentState === "error" ? 1 : 0
+            opacity: currentState === "success" || currentState === "error" ? 0.2 : 0
           }}
           transition={{ duration: 0.3 }}
-          style={{ zIndex: -1 }}
+          style={{ zIndex: 0 }}
         />
-      </button>
+
+        {/* Ripple Effect */}
+        {ripples.map(ripple => (
+          <span
+            key={ripple.id}
+            className="absolute bg-primary/20 rounded-full animate-ripple pointer-events-none"
+            style={{
+              left: ripple.x - 10,
+              top: ripple.y - 10,
+              width: 20,
+              height: 20,
+            }}
+          />
+        ))}
+      </motion.button>
     )
   }
 )
 
-AnimatedButtonInternal.displayName = "AnimatedButtonInternal"
+MoonUIAnimatedButtonProInternal.displayName = "MoonUIAnimatedButtonProInternal"
 
-export const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  ({ className, ...props }, ref) => {
+export const MoonUIAnimatedButtonPro = React.forwardRef<HTMLButtonElement, MoonUIAnimatedButtonProProps>(
+  (props, ref) => {
     // Pro package - always show component
     const { hasProAccess, isLoading } = useSubscription()
     
     // 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">
@@ -188,11 +375,11 @@ export const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButton
       )
     }
 
-    return <AnimatedButtonInternal className={className} ref={ref} {...props} />
+    return <MoonUIAnimatedButtonProInternal {...props} ref={ref} />
   }
 )
 
-AnimatedButton.displayName = "AnimatedButton"
+MoonUIAnimatedButtonPro.displayName = "MoonUIAnimatedButtonPro"
 
-export { animatedButtonVariants }
-export type { AnimatedButtonProps }
+export { moonUIAnimatedButtonProVariants }
+export type { MoonUIAnimatedButtonProProps }

package/src/components/index.ts

@@ -4,7 +4,11 @@
 export * from "./ui"
 
 // Animated Button
-export * from "./animated-button"
+export { 
+  MoonUIAnimatedButtonPro,
+  moonUIAnimatedButtonProVariants,
+  type MoonUIAnimatedButtonProProps
+} from "./animated-button"
 
 // Error Boundary
 export * from "./error-boundary"