@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/draggable-list/index.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import React, { ReactNode } from "react"
-import { DragDropContext, Droppable, Draggable, DropResult } from "@hello-pangea/dnd"
-import { cn } from '../../lib/utils'
-
-export interface DraggableListProps<T> {
-  items: T[]
-  onReorder: (items: T[]) => void
-  renderItem: (item: T, index: number) => ReactNode
-  keyExtractor: (item: T) => string
-  direction?: "vertical" | "horizontal"
-  className?: string
-  droppableId?: string
-  disabled?: boolean
-}
-
-export function DraggableList<T>({
-  items,
-  onReorder,
-  renderItem,
-  keyExtractor,
-  direction = "vertical",
-  className,
-  droppableId = "draggable-list",
-  disabled = false,
-}: DraggableListProps<T>) {
-  const handleDragEnd = (result: DropResult) => {
-    if (!result.destination || disabled) {
-      return
-    }
-
-    const sourceIndex = result.source.index
-    const destinationIndex = result.destination.index
-
-    if (sourceIndex === destinationIndex) {
-      return
-    }
-
-    const newItems = Array.from(items)
-    const [reorderedItem] = newItems.splice(sourceIndex, 1)
-    newItems.splice(destinationIndex, 0, reorderedItem)
-
-    onReorder(newItems)
-  }
-
-  return (
-    <DragDropContext onDragEnd={handleDragEnd}>
-      <Droppable 
-        droppableId={droppableId} 
-        direction={direction}
-        isDropDisabled={disabled}
-      >
-        {(provided, snapshot) => (
-          <div
-            {...provided.droppableProps}
-            ref={provided.innerRef}
-            className={cn(
-              "space-y-2",
-              direction === "horizontal" && "flex space-y-0 space-x-2",
-              snapshot.isDraggingOver && "bg-muted/50 rounded-lg",
-              className
-            )}
-          >
-            {items.map((item, index) => (
-              <Draggable
-                key={keyExtractor(item)}
-                draggableId={keyExtractor(item)}
-                index={index}
-                isDragDisabled={disabled}
-              >
-                {(provided, snapshot) => (
-                  <div
-                    ref={provided.innerRef}
-                    {...provided.draggableProps}
-                    {...provided.dragHandleProps}
-                    className={cn(
-                      "transition-all duration-200",
-                      snapshot.isDragging && "rotate-2 scale-105 shadow-lg z-50",
-                      disabled && "cursor-not-allowed opacity-50"
-                    )}
-                    style={{
-                      ...provided.draggableProps.style,
-                      transform: snapshot.isDragging
-                        ? provided.draggableProps.style?.transform
-                        : "none",
-                    }}
-                  >
-                    {renderItem(item, index)}
-                  </div>
-                )}
-              </Draggable>
-            ))}
-            {provided.placeholder}
-          </div>
-        )}
-      </Droppable>
-    </DragDropContext>
-  )
-}

package/src/components/enhanced/badge.tsx

@@ -1,191 +0,0 @@
-import React from 'react'
-import { motion, AnimatePresence } from 'framer-motion'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../../lib/utils'
-
-const badgeVariants = cva(
-  ["inline-flex items-center gap-1.5", 
-  "font-medium transition-all duration-200", 
-  "border focus:outline-none",
-  "focus-visible:ring-2 focus-visible:ring-offset-1"],
-  {
-    variants: {
-      variant: {
-        default: [
-          "border-transparent bg-primary text-primary-foreground",
-          "hover:bg-primary/90",
-          "focus-visible:ring-primary/30",
-        ],
-        secondary: [
-          "border-transparent bg-secondary text-secondary-foreground",
-          "hover:bg-secondary/80",
-          "focus-visible:ring-gray-400/30",
-        ],
-        destructive: [
-          "border-transparent bg-destructive text-destructive-foreground",
-          "hover:bg-destructive/90",
-          "focus-visible:ring-destructive/30",
-        ],
-        outline: [
-          "border-input bg-transparent",
-          "hover:border-input/80",
-          "focus-visible:ring-gray-400/30",
-        ],
-        success: [
-          "border-transparent bg-green-500 text-white",
-          "hover:bg-green-600",
-          "focus-visible:ring-green-500/30",
-        ],
-        warning: [
-          "border-transparent bg-yellow-500 text-white",
-          "hover:bg-yellow-600",
-          "focus-visible:ring-yellow-500/30",
-        ],
-        pro: [
-          "border-transparent bg-gradient-to-r from-purple-600 to-pink-600 text-white",
-          "hover:from-purple-700 hover:to-pink-700",
-          "focus-visible:ring-purple-400/30",
-        ],
-      },
-      size: {
-        sm: "h-5 px-2 text-xs",
-        default: "h-6 px-3 text-sm",
-        lg: "h-8 px-4 text-base",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface BadgeProProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {
-  enablePulse?: boolean
-  enableGlow?: boolean
-  enableShimmer?: boolean
-  removable?: boolean
-  onRemove?: () => void
-  leftIcon?: React.ReactNode
-  rightIcon?: React.ReactNode
-}
-
-export const BadgePro = React.forwardRef<
-  HTMLDivElement,
-  BadgeProProps
->(({
-  className,
-  variant,
-  size,
-  enablePulse = false,
-  enableGlow = false,
-  enableShimmer = false,
-  removable = false,
-  onRemove,
-  leftIcon,
-  rightIcon,
-  children,
-  ...props
-}, ref) => {
-  const [isRemoving, setIsRemoving] = React.useState(false)
-
-  const handleRemove = () => {
-    setIsRemoving(true)
-    setTimeout(() => {
-      onRemove?.()
-    }, 300)
-  }
-
-  // Auto-assign icons for special variants
-  let autoLeftIcon = leftIcon
-  let autoChildren = children
-  
-  if (variant === 'pro' && !leftIcon) {
-    autoLeftIcon = (
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-3 h-3">
-        <path d="M12 0L13.09 8.26L22 9L13.09 9.74L12 18L10.91 9.74L2 9L10.91 8.26L12 0Z" fill="currentColor"/>
-        <path d="M19 5L19.5 7L21 7.5L19.5 8L19 10L18.5 8L17 7.5L18.5 7L19 5Z" fill="currentColor"/>
-        <path d="M19 15L19.5 17L21 17.5L19.5 18L19 20L18.5 18L17 17.5L18.5 17L19 15Z" fill="currentColor"/>
-      </svg>
-    )
-    autoChildren = children || 'Pro'
-  }
-
-  return (
-    <AnimatePresence>
-      {!isRemoving && (
-        <motion.div
-          ref={ref}
-          className={cn(
-            badgeVariants({ variant, size }),
-            enablePulse && "animate-pulse",
-            enableGlow && "shadow-lg shadow-current/50",
-            enableShimmer && "relative overflow-hidden",
-            className
-          )}
-          initial={{ opacity: 0, scale: 0.8 }}
-          animate={{ opacity: 1, scale: 1 }}
-          exit={{ opacity: 0, scale: 0.8 }}
-          transition={{ duration: 0.2 }}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
-        >
-          {enableShimmer && (
-            <motion.div
-              className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent"
-              animate={{ translateX: "200%" }}
-              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
-            />
-          )}
-          
-          {autoLeftIcon && (
-            <motion.span 
-              className="inline-flex shrink-0"
-              animate={enablePulse ? { scale: [1, 1.2, 1] } : {}}
-              transition={{ duration: 2, repeat: Infinity }}
-            >
-              {autoLeftIcon}
-            </motion.span>
-          )}
-          
-          <span className="truncate">{autoChildren}</span>
-          
-          {rightIcon && (
-            <span className="inline-flex shrink-0">
-              {rightIcon}
-            </span>
-          )}
-          
-          {removable && onRemove && (
-            <motion.button 
-              type="button"
-              className="ml-1 -mr-1 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center hover:bg-black/10 dark:hover:bg-white/10"
-              onClick={handleRemove}
-              whileHover={{ rotate: 90 }}
-              transition={{ type: "spring", stiffness: 300 }}
-              aria-label="Remove badge"
-            >
-              <svg 
-                width="8" 
-                height="8" 
-                viewBox="0 0 8 8" 
-                fill="none" 
-                xmlns="http://www.w3.org/2000/svg"
-                className="opacity-70"
-                aria-hidden="true"
-              >
-                <path d="M0.799988 7.19999L7.19999 0.799988M0.799988 0.799988L7.19999 7.19999" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-              </svg>
-            </motion.button>
-          )}
-        </motion.div>
-      )}
-    </AnimatePresence>
-  )
-})
-
-BadgePro.displayName = 'BadgePro'
-
-export { badgeVariants }

package/src/components/enhanced/button.tsx

@@ -1,362 +0,0 @@
-"use client"
-
-import React, { useRef, useState, useEffect } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Loader2, Check, X, Sparkles } from "lucide-react"
-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 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 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 px-3",
-        lg: "h-11 px-8",
-        icon: "h-10 w-10",
-      },
-      animation: {
-        ripple: "ripple-effect",
-        morph: "morph-effect",
-        particles: "particles-effect",
-        magnetic: "magnetic-effect",
-        glitch: "glitch-effect",
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      animation: "ripple",
-    },
-  }
-)
-
-interface RippleEffect {
-  x: number
-  y: number
-  id: number
-}
-
-export interface ButtonProProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof enhancedButtonVariants> {
-  state?: "idle" | "loading" | "success" | "error"
-  onStateChange?: (state: "idle" | "loading" | "success" | "error") => void
-  enableRipple?: boolean
-  enableMorph?: boolean
-  enableParticles?: boolean
-  enableMagnetic?: boolean
-  enableGlitch?: boolean
-}
-
-export const ButtonPro = React.forwardRef<HTMLButtonElement, ButtonProProps>(
-  ({ 
-    className, 
-    variant, 
-    size, 
-    animation,
-    state = "idle", 
-    onStateChange, 
-    children, 
-    onClick,
-    enableRipple = true,
-    enableMorph = true,
-    enableParticles = false,
-    enableMagnetic = false,
-    enableGlitch = false,
-    disabled,
-    type = "button",
-    ...props 
-  }, ref) => {
-    const [internalState, setInternalState] = useState<"idle" | "loading" | "success" | "error">("idle")
-    const [ripples, setRipples] = useState<RippleEffect[]>([])
-    const [particles, setParticles] = useState<{ x: number; y: number; id: number }[]>([])
-    const [magneticPosition, setMagneticPosition] = useState({ x: 0, y: 0 })
-    const buttonRef = useRef<HTMLButtonElement>(null)
-    const currentState = state !== "idle" ? state : internalState
-
-    // Ripple effect
-    const createRipple = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!enableRipple) return
-      
-      const button = event.currentTarget
-      const rect = button.getBoundingClientRect()
-      const ripple = {
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
-        id: Date.now()
-      }
-      
-      setRipples([...ripples, ripple])
-      setTimeout(() => {
-        setRipples(prev => prev.filter(r => r.id !== ripple.id))
-      }, 1000)
-    }
-
-    // Particle effect
-    const createParticles = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!enableParticles) return
-      
-      const button = event.currentTarget
-      const rect = button.getBoundingClientRect()
-      const newParticles = Array.from({ length: 8 }, (_, i) => ({
-        x: event.clientX - rect.left,
-        y: event.clientY - rect.top,
-        id: Date.now() + i
-      }))
-      
-      setParticles([...particles, ...newParticles])
-      setTimeout(() => {
-        setParticles([])
-      }, 1000)
-    }
-
-    // Magnetic effect
-    const handleMouseMove = (event: React.MouseEvent<HTMLButtonElement>) => {
-      if (!enableMagnetic) return
-      
-      const button = event.currentTarget
-      const rect = button.getBoundingClientRect()
-      const centerX = rect.width / 2
-      const centerY = rect.height / 2
-      const x = event.clientX - rect.left - centerX
-      const y = event.clientY - rect.top - centerY
-      
-      setMagneticPosition({
-        x: x * 0.2,
-        y: y * 0.2
-      })
-    }
-
-    const handleMouseLeave = () => {
-      if (enableMagnetic) {
-        setMagneticPosition({ x: 0, y: 0 })
-      }
-    }
-
-    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
-      createRipple(e)
-      createParticles(e)
-      
-      if (currentState === "loading") return
-
-      if (enableMorph) {
-        setInternalState("loading")
-        onStateChange?.("loading")
-      }
-
-      if (onClick) {
-        try {
-          await onClick(e)
-          if (enableMorph) {
-            setInternalState("success")
-            onStateChange?.("success")
-            
-            setTimeout(() => {
-              setInternalState("idle")
-              onStateChange?.("idle")
-            }, 2000)
-          }
-        } catch (error) {
-          if (enableMorph) {
-            setInternalState("error")
-            onStateChange?.("error")
-            
-            setTimeout(() => {
-              setInternalState("idle")
-              onStateChange?.("idle")
-            }, 2000)
-          }
-        }
-      }
-    }
-
-    const getIcon = () => {
-      switch (currentState) {
-        case "loading":
-          return <Loader2 className="h-4 w-4 animate-spin" />
-        case "success":
-          return <Check className="h-4 w-4" />
-        case "error":
-          return <X className="h-4 w-4" />
-        default:
-          return null
-      }
-    }
-
-    const getBackgroundColor = () => {
-      switch (currentState) {
-        case "success":
-          return "bg-success"
-        case "error":
-          return "bg-destructive"
-        default:
-          return ""
-      }
-    }
-
-    return (
-      <motion.button
-        className={cn(enhancedButtonVariants({ variant, size }), className)}
-        ref={buttonRef || ref}
-        onClick={handleClick}
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        disabled={currentState === "loading" || disabled}
-        type={type}
-        animate={{
-          x: magneticPosition.x,
-          y: magneticPosition.y,
-        }}
-        transition={{
-          type: "spring",
-          stiffness: 150,
-          damping: 15,
-          mass: 0.1
-        }}
-      >
-        {/* Ripple effects */}
-        <AnimatePresence>
-          {ripples.map((ripple) => (
-            <motion.span
-              key={ripple.id}
-              className="absolute rounded-full bg-white/30 pointer-events-none"
-              style={{
-                left: ripple.x,
-                top: ripple.y,
-              }}
-              initial={{ width: 0, height: 0, x: 0, y: 0, opacity: 1 }}
-              animate={{ 
-                width: 200, 
-                height: 200, 
-                x: -100, 
-                y: -100, 
-                opacity: 0 
-              }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 1, ease: "easeOut" }}
-            />
-          ))}
-        </AnimatePresence>
-
-        {/* Particle effects */}
-        <AnimatePresence>
-          {particles.map((particle, i) => (
-            <motion.span
-              key={particle.id}
-              className="absolute w-1 h-1 bg-primary rounded-full pointer-events-none"
-              style={{
-                left: particle.x,
-                top: particle.y,
-              }}
-              initial={{ scale: 0, opacity: 1 }}
-              animate={{ 
-                scale: [0, 1, 0],
-                x: (i % 2 === 0 ? 1 : -1) * (20 + Math.random() * 30),
-                y: -20 - Math.random() * 30,
-                opacity: [1, 1, 0]
-              }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: 0.6, ease: "easeOut" }}
-            />
-          ))}
-        </AnimatePresence>
-
-        {/* Morph content */}
-        <motion.div
-          className="flex items-center gap-2"
-          animate={{
-            width: currentState !== "idle" ? "auto" : "100%"
-          }}
-          transition={{ duration: 0.2 }}
-        >
-          <AnimatePresence mode="wait">
-            {currentState !== "idle" && (
-              <motion.div
-                initial={{ scale: 0, opacity: 0 }}
-                animate={{ scale: 1, opacity: 1 }}
-                exit={{ scale: 0, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-                className="flex items-center"
-              >
-                {getIcon()}
-              </motion.div>
-            )}
-          </AnimatePresence>
-          
-          <motion.span
-            animate={{
-              opacity: currentState === "idle" ? 1 : 0,
-              x: currentState !== "idle" ? -20 : 0
-            }}
-            transition={{ duration: 0.2 }}
-          >
-            {children}
-          </motion.span>
-        </motion.div>
-
-        {/* Background animation for success/error states */}
-        <AnimatePresence>
-          {(currentState === "success" || currentState === "error") && (
-            <motion.div
-              className={cn(
-                "absolute inset-0 rounded-md -z-10",
-                getBackgroundColor()
-              )}
-              initial={{ scale: 0, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0, opacity: 0 }}
-              transition={{ duration: 0.3 }}
-            />
-          )}
-        </AnimatePresence>
-
-        {/* Glitch effect overlay */}
-        {enableGlitch && (
-          <motion.div
-            className="absolute inset-0 pointer-events-none"
-            animate={{
-              opacity: [0, 0.1, 0, 0.2, 0],
-              clipPath: [
-                "inset(0 0 100% 0)",
-                "inset(20% 0 60% 0)",
-                "inset(40% 0 40% 0)",
-                "inset(80% 0 10% 0)",
-                "inset(0 0 100% 0)",
-              ]
-            }}
-            transition={{
-              duration: 0.5,
-              repeat: Infinity,
-              repeatDelay: 5,
-            }}
-            style={{
-              background: "linear-gradient(45deg, #ff0080, #00ff88, #0080ff)",
-              mixBlendMode: "screen"
-            }}
-          />
-        )}
-
-        {/* Sparkle decoration for special variants */}
-        {variant === "gradient" && (
-          <Sparkles className="absolute top-1 right-1 h-3 w-3 text-white/50 animate-pulse" />
-        )}
-      </motion.button>
-    )
-  }
-)
-
-ButtonPro.displayName = "ButtonPro"
-
-export { ButtonPro as Button, enhancedButtonVariants }