@moontra/moonui-pro 2.18.6 → 2.20.0

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/calendar/event-dialog.tsx

@@ -57,7 +57,7 @@ export function EventDialog({
     startTime: string
     endTime: string
     location: string
-    type: 'meeting' | 'task' | 'reminder' | 'event'
+    type: 'meeting' | 'task' | 'reminder' | 'event' | 'birthday' | 'holiday' | 'conference'
     color: string
     attendees: string
   }>({

package/src/components/calendar/index.tsx

@@ -138,7 +138,7 @@ const EVENT_COLORS = {
 }
 
 const PRIORITY_COLORS = {
-  low: 'border-l-4 border-l-gray-400',
+  low: 'border-l-4 border-l-muted-foreground',
   medium: 'border-l-4 border-l-yellow-500',
   high: 'border-l-4 border-l-red-500'
 }

package/src/components/calendar-pro/index.tsx

@@ -1084,7 +1084,7 @@ END:VCALENDAR`
                     <div className="space-y-1">
                       {dayEvents.slice(0, 3).map(event => {
                         return (
-                          <motion.div
+                          <div
                             key={event.id}
                             draggable={allowEventDragging}
                             onDragStart={(e) => handleDragStart(e, event)}
@@ -1096,8 +1096,6 @@ END:VCALENDAR`
                               opacity: draggedEventId === event.id ? 0.5 : 1,
                               cursor: allowEventDragging ? 'move' : 'pointer'
                             }}
-                            whileHover={{ scale: 1.02 }}
-                            whileTap={{ scale: 0.98 }}
                             onClick={(e) => {
                               e.stopPropagation()
                               handleEventClick(event, e)
@@ -1110,7 +1108,7 @@ END:VCALENDAR`
                                 {format(new Date(event.start), 'HH:mm')} {event.title}
                               </>
                             )}
-                          </motion.div>
+                          </div>
                         )
                       })}
                       {dayEvents.length > 3 && (

package/src/components/dashboard/demo.tsx

@@ -282,7 +282,7 @@ const customUserMenuItems = [
     icon: <CreditCard className="h-4 w-4" />,
     onClick: () => console.log('Billing clicked')
   },
-  { id: 'sep1', separator: true },
+  { id: 'sep1', label: '', separator: true },
   {
     id: 'settings',
     label: 'Settings',
@@ -295,7 +295,7 @@ const customUserMenuItems = [
     icon: <HelpCircle className="h-4 w-4" />,
     onClick: () => console.log('Help clicked')
   },
-  { id: 'sep2', separator: true },
+  { id: 'sep2', label: '', separator: true },
   {
     id: 'logout',
     label: 'Sign Out',

package/src/components/dashboard/widgets/activity-feed.tsx

@@ -190,7 +190,7 @@ export function ActivityFeed({
             animate={{ scale: 1 }}
             className="inline-block mt-1"
           >
-            <Badge variant="default" className="text-xs">New</Badge>
+            <Badge variant="secondary" className="text-xs">New</Badge>
           </motion.div>
         )}
       </div>

package/src/components/dashboard/widgets/metric-card.tsx

@@ -65,7 +65,7 @@ export function MetricCard({
       case 'decrease':
         return 'text-red-600 dark:text-red-400'
       default:
-        return 'text-gray-600 dark:text-gray-400'
+        return 'text-muted-foreground'
     }
   }
 

package/src/components/enhanced/button.tsx

@@ -7,23 +7,23 @@ 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",
+  "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 overflow-hidden transform active:scale-[0.98] rounded-lg",
   {
     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",
+        default: "bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground hover:bg-primary/90 dark:hover:bg-primary/90 shadow-sm hover:shadow-md",
+        destructive: "bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground hover:bg-destructive/90 dark:hover:bg-destructive/90 shadow-sm hover:shadow-md",
+        outline: "border border-input dark:border-input bg-background dark:bg-background text-foreground dark:text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground transition-all duration-200",
+        secondary: "bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground hover:bg-muted/80 dark:hover:bg-muted/80 border border-input dark:border-input shadow-sm hover:shadow-md",
+        ghost: "text-foreground dark:text-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground transition-all duration-200",
+        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
+        gradient: "bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 shadow-md hover:shadow-lg",
         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",
+        sm: "h-9 px-3",
+        lg: "h-11 px-8",
         icon: "h-10 w-10",
       },
       animation: {
@@ -198,9 +198,9 @@ export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
     const getBackgroundColor = () => {
       switch (currentState) {
         case "success":
-          return "bg-green-600"
+          return "bg-success"
         case "error":
-          return "bg-red-600"
+          return "bg-destructive"
         default:
           return ""
       }
@@ -359,4 +359,4 @@ export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
 
 ButtonPro.displayName = "ButtonPro"
 
-export { enhancedButtonVariants }
+export { ButtonPro as Button, enhancedButtonVariants }