@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/enhanced/card.tsx

@@ -1,266 +0,0 @@
-"use client"
-
-import React, { useRef, useState } from "react"
-import { motion, useMotionValue, useSpring, useTransform } from "framer-motion"
-import { cn } from "../../lib/utils"
-
-export interface CardProProps extends React.HTMLAttributes<HTMLDivElement> {
-  enableGlassmorphism?: boolean
-  enableParallax?: boolean
-  enableTilt?: boolean
-  enableGlow?: boolean
-  enableReveal?: boolean
-  tiltMaxAngle?: number
-  glowColor?: string
-  parallaxOffset?: number
-}
-
-export const CardPro = React.forwardRef<HTMLDivElement, CardProProps>(
-  ({ 
-    className, 
-    children,
-    enableGlassmorphism = true,
-    enableParallax = false,
-    enableTilt = true,
-    enableGlow = false,
-    enableReveal = false,
-    tiltMaxAngle = 15,
-    glowColor = "rgba(59, 130, 246, 0.5)",
-    parallaxOffset = 20,
-    ...props 
-  }, ref) => {
-    const cardRef = useRef<HTMLDivElement>(null)
-    const [isHovered, setIsHovered] = useState(false)
-    
-    // Motion values for tilt effect
-    const mouseX = useMotionValue(0)
-    const mouseY = useMotionValue(0)
-    
-    // Spring physics for smooth animations
-    const springConfig = { damping: 20, stiffness: 300 }
-    const mouseXSpring = useSpring(mouseX, springConfig)
-    const mouseYSpring = useSpring(mouseY, springConfig)
-    
-    // Transform values for 3D tilt
-    const rotateX = useTransform(mouseYSpring, [-1, 1], [tiltMaxAngle, -tiltMaxAngle])
-    const rotateY = useTransform(mouseXSpring, [-1, 1], [-tiltMaxAngle, tiltMaxAngle])
-    
-    // Glow effect position
-    const glowX = useTransform(mouseXSpring, [-1, 1], [0, 100])
-    const glowY = useTransform(mouseYSpring, [-1, 1], [0, 100])
-
-    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!cardRef.current || (!enableTilt && !enableGlow)) return
-      
-      const rect = cardRef.current.getBoundingClientRect()
-      const centerX = rect.left + rect.width / 2
-      const centerY = rect.top + rect.height / 2
-      
-      const x = (e.clientX - centerX) / (rect.width / 2)
-      const y = (e.clientY - centerY) / (rect.height / 2)
-      
-      mouseX.set(x)
-      mouseY.set(y)
-    }
-
-    const handleMouseEnter = () => {
-      setIsHovered(true)
-    }
-
-    const handleMouseLeave = () => {
-      setIsHovered(false)
-      mouseX.set(0)
-      mouseY.set(0)
-    }
-
-    return (
-      <motion.div
-        ref={cardRef || ref}
-        className={cn(
-          "relative rounded-xl transition-all duration-300",
-          enableGlassmorphism && [
-            "backdrop-blur-md",
-            "bg-white/10 dark:bg-gray-900/10",
-            "border border-white/20 dark:border-gray-700/20",
-            "shadow-xl"
-          ],
-          !enableGlassmorphism && [
-            "bg-card",
-            "border border-border",
-            "shadow-sm"
-          ],
-          isHovered && "shadow-2xl",
-          className
-        )}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        style={{
-          transformStyle: "preserve-3d",
-          perspective: "1000px"
-        }}
-        animate={{
-          rotateX: enableTilt ? rotateX.get() : 0,
-          rotateY: enableTilt ? rotateY.get() : 0,
-        }}
-        transition={{ type: "spring", ...springConfig }}
-      >
-        {/* Glow effect overlay */}
-        {enableGlow && (
-          <motion.div
-            className="absolute inset-0 rounded-xl pointer-events-none opacity-0"
-            style={{
-              background: `radial-gradient(600px circle at ${glowX}% ${glowY}%, ${glowColor}, transparent 40%)`,
-            }}
-            animate={{
-              opacity: isHovered ? 1 : 0
-            }}
-            transition={{ duration: 0.3 }}
-          />
-        )}
-
-        {/* Glassmorphism noise texture */}
-        {enableGlassmorphism && (
-          <div 
-            className="absolute inset-0 rounded-xl opacity-[0.03] pointer-events-none"
-            style={{
-              backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' /%3E%3C/svg%3E")`,
-            }}
-          />
-        )}
-
-        {/* Content with parallax effect */}
-        <motion.div
-          className="relative z-10"
-          style={{
-            transform: enableParallax ? "translateZ(50px)" : undefined,
-          }}
-          animate={{
-            x: enableParallax && isHovered ? mouseXSpring.get() * parallaxOffset : 0,
-            y: enableParallax && isHovered ? mouseYSpring.get() * parallaxOffset : 0,
-          }}
-        >
-          {children}
-        </motion.div>
-
-        {/* Reveal effect border */}
-        {enableReveal && (
-          <motion.div
-            className="absolute inset-0 rounded-xl pointer-events-none"
-            style={{
-              background: `conic-gradient(from ${glowX}deg, transparent, ${glowColor}, transparent 30%)`,
-              opacity: 0,
-              filter: "blur(5px)",
-            }}
-            animate={{
-              opacity: isHovered ? 0.5 : 0,
-              rotate: isHovered ? 360 : 0,
-            }}
-            transition={{
-              opacity: { duration: 0.3 },
-              rotate: { duration: 20, repeat: Infinity, ease: "linear" }
-            }}
-          />
-        )}
-
-        {/* Soft shadow layers for depth */}
-        <div className="absolute inset-0 rounded-xl -z-10">
-          <motion.div
-            className="absolute inset-0 rounded-xl bg-black/5 dark:bg-white/5"
-            animate={{
-              scale: isHovered ? 1.02 : 1,
-              opacity: isHovered ? 0.5 : 0,
-            }}
-            transition={{ duration: 0.3 }}
-            style={{ filter: "blur(10px)" }}
-          />
-          <motion.div
-            className="absolute inset-0 rounded-xl bg-black/5 dark:bg-white/5"
-            animate={{
-              scale: isHovered ? 1.05 : 1,
-              opacity: isHovered ? 0.3 : 0,
-            }}
-            transition={{ duration: 0.3 }}
-            style={{ filter: "blur(20px)" }}
-          />
-        </div>
-      </motion.div>
-    )
-  }
-)
-
-CardPro.displayName = "CardPro"
-
-// Enhanced Card sub-components with animations
-export const CardProHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <motion.div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    initial={{ opacity: 0, y: -10 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.3, delay: 0.1 }}
-  />
-))
-CardProHeader.displayName = "CardProHeader"
-
-export const EnhancedCardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <motion.h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    initial={{ opacity: 0, x: -10 }}
-    animate={{ opacity: 1, x: 0 }}
-    transition={{ duration: 0.3, delay: 0.2 }}
-  />
-))
-EnhancedCardTitle.displayName = "EnhancedCardTitle"
-
-export const EnhancedCardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <motion.p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 1 }}
-    transition={{ duration: 0.3, delay: 0.3 }}
-  />
-))
-EnhancedCardDescription.displayName = "EnhancedCardDescription"
-
-export const CardProContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <motion.div
-    ref={ref}
-    className={cn("p-6 pt-0", className)}
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 1 }}
-    transition={{ duration: 0.3, delay: 0.4 }}
-  />
-))
-CardProContent.displayName = "CardProContent"
-
-export const CardProFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <motion.div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    initial={{ opacity: 0, y: 10 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ duration: 0.3, delay: 0.5 }}
-  />
-))
-CardProFooter.displayName = "CardProFooter"

package/src/components/enhanced/dialog.tsx

@@ -1,246 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { motion, AnimatePresence } from "framer-motion"
-import { X } from "lucide-react"
-import { cn } from "../../lib/utils"
-
-const Dialog = DialogPrimitive.Root
-const DialogTrigger = DialogPrimitive.Trigger
-const DialogPortal = DialogPrimitive.Portal
-const DialogClose = DialogPrimitive.Close
-
-interface DialogProOverlayProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> {
-  blur?: "none" | "sm" | "md" | "lg" | "xl"
-  variant?: "default" | "dark" | "light" | "gradient"
-}
-
-const DialogProOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  DialogProOverlayProps
->(({ className, blur = "md", variant = "default", ...props }, ref) => {
-  const blurClasses = {
-    none: "",
-    sm: "backdrop-blur-sm",
-    md: "backdrop-blur-md",
-    lg: "backdrop-blur-lg",
-    xl: "backdrop-blur-xl",
-  }
-
-  const variantClasses = {
-    default: "bg-black/80",
-    dark: "bg-black/90",
-    light: "bg-white/80",
-    gradient: "bg-gradient-to-br from-black/80 via-gray-900/80 to-black/80",
-  }
-
-  return (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cn(
-        "fixed inset-0 z-50",
-        blurClasses[blur],
-        variantClasses[variant],
-        className
-      )}
-      {...props}
-    />
-  )
-})
-DialogProOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-interface DialogProContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  animation?: "fade" | "scale" | "slide" | "rotate" | "bounce"
-  animationDuration?: number
-  overlay?: boolean
-  overlayProps?: DialogProOverlayProps
-}
-
-const DialogProContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogProContentProps
->(({ 
-  className, 
-  children, 
-  animation = "scale",
-  animationDuration = 0.3,
-  overlay = true,
-  overlayProps = {},
-  ...props 
-}, ref) => {
-  const animationVariants = {
-    fade: {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 }
-    },
-    scale: {
-      initial: { opacity: 0, scale: 0.9, y: 20 },
-      animate: { opacity: 1, scale: 1, y: 0 },
-      exit: { opacity: 0, scale: 0.9, y: 20 }
-    },
-    slide: {
-      initial: { opacity: 0, y: 100 },
-      animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: 100 }
-    },
-    rotate: {
-      initial: { opacity: 0, scale: 0.9, rotate: -10 },
-      animate: { opacity: 1, scale: 1, rotate: 0 },
-      exit: { opacity: 0, scale: 0.9, rotate: 10 }
-    },
-    bounce: {
-      initial: { opacity: 0, scale: 0.3, y: -100 },
-      animate: { 
-        opacity: 1, 
-        scale: 1, 
-        y: 0,
-        transition: {
-          type: "spring",
-          duration: animationDuration,
-          bounce: 0.5
-        }
-      },
-      exit: { opacity: 0, scale: 0.5, y: -50 }
-    }
-  }
-
-  return (
-    <AnimatePresence>
-      <DialogPortal>
-        {overlay && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: animationDuration * 0.8 }}
-          >
-            <DialogProOverlay {...overlayProps} />
-          </motion.div>
-        )}
-        <motion.div
-          className="fixed inset-0 z-50 flex items-center justify-center p-4"
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          <DialogPrimitive.Content
-            ref={ref}
-            asChild
-            className={cn(
-              "relative w-full max-w-lg",
-              className
-            )}
-            {...props}
-          >
-            <motion.div
-              variants={animationVariants[animation]}
-              initial="initial"
-              animate="animate"
-              exit="exit"
-              transition={{ 
-                duration: animationDuration,
-                ease: "easeInOut"
-              }}
-              className={cn(
-                "relative bg-background rounded-lg shadow-2xl",
-                "border border-border",
-                "w-full max-w-lg",
-                "max-h-[90vh] overflow-auto",
-                className
-              )}
-            >
-              {/* Glass effect overlay */}
-              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-white/0 pointer-events-none" />
-              
-              {/* Content wrapper with padding */}
-              <div className="relative p-6">
-                {children}
-              </div>
-
-              {/* Close button with enhanced styling */}
-              <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all hover:opacity-100 hover:rotate-90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-                <X className="h-4 w-4" />
-                <span className="sr-only">Close</span>
-              </DialogPrimitive.Close>
-            </motion.div>
-          </DialogPrimitive.Content>
-        </motion.div>
-      </DialogPortal>
-    </AnimatePresence>
-  )
-})
-DialogProContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogProHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <motion.div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    initial={{ opacity: 0, y: -10 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ delay: 0.1, duration: 0.3 }}
-  />
-)
-DialogProHeader.displayName = "DialogProHeader"
-
-const DialogProFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <motion.div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    initial={{ opacity: 0, y: 10 }}
-    animate={{ opacity: 1, y: 0 }}
-    transition={{ delay: 0.2, duration: 0.3 }}
-  />
-)
-DialogProFooter.displayName = "DialogProFooter"
-
-const DialogProTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogProTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogProDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogProDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog as DialogPro,
-  DialogTrigger as DialogProTrigger,
-  DialogProContent,
-  DialogProHeader,
-  DialogProFooter,
-  DialogProTitle,
-  DialogProDescription,
-  DialogClose as DialogProClose,
-}

package/src/components/enhanced/index.ts

@@ -1,4 +0,0 @@
-export * from './button'
-export * from './card'
-export * from './dialog'
-export * from './badge'

package/src/components/error-boundary/index.tsx

@@ -1,109 +0,0 @@
-"use client"
-
-import React, { Component, ErrorInfo, ReactNode } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
-import { Button } from "../ui/button"
-import { AlertTriangle, RefreshCw, Lock, Sparkles } from "lucide-react"
-import { cn } from "../../lib/utils"
-import { useSubscription } from "../../hooks/use-subscription"
-
-interface ErrorBoundaryProps {
-  children: ReactNode
-  fallback?: ReactNode
-  className?: string
-  onError?: (error: Error, errorInfo: ErrorInfo) => void
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean
-  error?: Error
-}
-
-class ErrorBoundaryInternal extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    this.props.onError?.(error, errorInfo)
-    console.error('ErrorBoundary caught an error:', error, errorInfo)
-  }
-
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback
-      }
-
-      return (
-        <div className={cn("flex items-center justify-center min-h-[200px] p-4", this.props.className)}>
-          <Card className="w-full max-w-md">
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                <AlertTriangle className="h-6 w-6 text-red-600" />
-              </div>
-              <CardTitle>Something went wrong</CardTitle>
-              <CardDescription>
-                An error occurred while rendering this component
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="text-center">
-              <Button 
-                onClick={() => this.setState({ hasError: false, error: undefined })}
-                className="mt-4"
-              >
-                <RefreshCw className="mr-2 h-4 w-4" />
-                Try again
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
-
-function ErrorBoundaryWrapper(props: ErrorBoundaryProps) {
-  // Check if we're in docs mode or have pro access
-  const { hasProAccess, isLoading } = useSubscription()
-  
-  // In docs mode, always show the component
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!isLoading && !hasProAccess) {
-    return (
-      <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">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-sm mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-xs mb-4">
-                Error Boundary is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <a href="/pricing">
-                <Button size="sm">
-                  <Sparkles className="mr-2 h-4 w-4" />
-                  Upgrade to Pro
-                </Button>
-              </a>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return <ErrorBoundaryInternal {...props} />
-}
-
-export const ErrorBoundary = ErrorBoundaryWrapper