@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/spotlight-card/index.tsx

@@ -1,191 +0,0 @@
-"use client"
-
-import React, { useRef, useState } from "react"
-import { motion } from "framer-motion"
-import { cn } from "../../lib/utils"
-import { Card, CardContent } from "../ui/card"
-import { Button } from "../ui/button"
-import { Lock, Sparkles } from "lucide-react"
-import { useSubscription } from "../../hooks/use-subscription"
-
-export interface SpotlightCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  spotlightColor?: string
-  spotlightSize?: number
-  intensity?: number
-  borderGlow?: boolean
-}
-
-const SpotlightCardInternal = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
-  ({ 
-    children, 
-    className, 
-    spotlightColor = "rgba(255, 255, 255, 0.25)",
-    spotlightSize = 300,
-    intensity = 0.8,
-    borderGlow = true,
-    ...props 
-  }, ref) => {
-    const cardRef = useRef<HTMLDivElement>(null)
-    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
-    const [isHovered, setIsHovered] = useState(false)
-
-    const handleMouseMove = (e: React.MouseEvent) => {
-      if (!cardRef.current) return
-
-      const rect = cardRef.current.getBoundingClientRect()
-      const x = e.clientX - rect.left
-      const y = e.clientY - rect.top
-
-      setMousePosition({ x, y })
-    }
-
-    const handleMouseEnter = () => {
-      setIsHovered(true)
-    }
-
-    const handleMouseLeave = () => {
-      setIsHovered(false)
-    }
-
-    return (
-      <motion.div
-        ref={(node) => {
-          cardRef.current = node
-          if (typeof ref === "function") {
-            ref(node)
-          } else if (ref) {
-            ref.current = node
-          }
-        }}
-        className={cn(
-          "relative overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm",
-          className
-        )}
-        onMouseMove={handleMouseMove}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        whileHover={{ scale: 1.02 }}
-        transition={{ duration: 0.2 }}
-      >
-        {/* Spotlight effect */}
-        <motion.div
-          className="absolute inset-0 pointer-events-none"
-          animate={{
-            opacity: isHovered ? intensity : 0,
-          }}
-          transition={{ duration: 0.3 }}
-          style={{
-            background: `radial-gradient(${spotlightSize}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor}, transparent 70%)`,
-          }}
-        />
-
-        {/* Secondary glow effect */}
-        <motion.div
-          className="absolute inset-0 pointer-events-none"
-          animate={{
-            opacity: isHovered ? intensity * 0.5 : 0,
-          }}
-          transition={{ duration: 0.4, delay: 0.1 }}
-          style={{
-            background: `radial-gradient(${spotlightSize * 1.5}px circle at ${mousePosition.x}px ${mousePosition.y}px, ${spotlightColor.replace('0.25', '0.1')}, transparent 80%)`,
-          }}
-        />
-
-        {/* Border glow */}
-        {borderGlow && (
-          <motion.div
-            className="absolute inset-0 rounded-lg pointer-events-none"
-            animate={{
-              opacity: isHovered ? 0.6 : 0,
-            }}
-            transition={{ duration: 0.3 }}
-            style={{
-              background: `linear-gradient(135deg, transparent 30%, ${spotlightColor.replace('0.25', '0.4')} 50%, transparent 70%)`,
-              backgroundSize: '200% 200%',
-              backgroundPosition: `${(mousePosition.x / cardRef.current?.offsetWidth!) * 100}% ${(mousePosition.y / cardRef.current?.offsetHeight!) * 100}%`,
-            }}
-          />
-        )}
-
-        {/* Content */}
-        <div className="relative z-10">
-          {children}
-        </div>
-
-        {/* Subtle animated particles */}
-        <motion.div
-          className="absolute inset-0 pointer-events-none"
-          animate={{
-            opacity: isHovered ? 0.3 : 0,
-          }}
-          transition={{ duration: 0.5 }}
-        >
-          {[...Array(3)].map((_, i) => (
-            <motion.div
-              key={i}
-              className="absolute w-1 h-1 bg-white rounded-full"
-              animate={isHovered ? {
-                x: [mousePosition.x, mousePosition.x + Math.random() * 100 - 50],
-                y: [mousePosition.y, mousePosition.y + Math.random() * 100 - 50],
-                opacity: [0, 1, 0],
-                scale: [0, 1, 0],
-              } : {}}
-              transition={{
-                duration: 2,
-                delay: i * 0.2,
-                repeat: isHovered ? Infinity : 0,
-                ease: "easeOut"
-              }}
-              style={{
-                left: mousePosition.x,
-                top: mousePosition.y,
-              }}
-            />
-          ))}
-        </motion.div>
-      </motion.div>
-    )
-  }
-)
-
-SpotlightCardInternal.displayName = "SpotlightCardInternal"
-
-export const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
-  ({ className, ...props }, ref) => {
-    // 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", 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">
-                  Spotlight Card 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 <SpotlightCardInternal className={className} ref={ref} {...props} />
-  }
-)
-
-SpotlightCard.displayName = "SpotlightCard"

package/src/components/swipeable-card/index.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-import React, { ReactNode } from "react"
-import { motion, useMotionValue, useTransform, animate, PanInfo } from "framer-motion"
-import { cn } from "../../lib/utils"
-
-interface SwipeableCardProps {
-  children: ReactNode
-  onSwipeLeft?: () => void
-  onSwipeRight?: () => void
-  onSwipeStart?: () => void
-  onSwipeEnd?: () => void
-  threshold?: number
-  disabled?: boolean
-  className?: string
-  style?: React.CSSProperties
-}
-
-export const SwipeableCard = React.forwardRef<HTMLDivElement, SwipeableCardProps>(
-  ({
-    children,
-    onSwipeLeft,
-    onSwipeRight,
-    onSwipeStart,
-    onSwipeEnd,
-    threshold = 100,
-    disabled = false,
-    className,
-    style,
-    ...props
-  }, ref) => {
-    const x = useMotionValue(0)
-    const rotate = useTransform(x, [-200, 200], [-30, 30])
-    const likeOpacity = useTransform(x, [0, threshold], [0, 1])
-    const nopeOpacity = useTransform(x, [-threshold, 0], [1, 0])
-
-    const handleDragStart = () => {
-      if (disabled) return
-      onSwipeStart?.()
-    }
-
-    const handleDragEnd = (event: any, info: PanInfo) => {
-      if (disabled) return
-      
-      onSwipeEnd?.()
-      
-      if (Math.abs(info.offset.x) > threshold) {
-        const direction = info.offset.x > 0 ? "right" : "left"
-        const exitX = info.offset.x > 0 ? 400 : -400
-        
-        animate(x, exitX, { duration: 0.3 })
-        
-        if (direction === "right" && onSwipeRight) {
-          onSwipeRight()
-        } else if (direction === "left" && onSwipeLeft) {
-          onSwipeLeft()
-        }
-      } else {
-        animate(x, 0, { type: "spring", stiffness: 300, damping: 20 })
-      }
-    }
-
-    return (
-      <motion.div
-        ref={ref}
-        drag={disabled ? false : "x"}
-        dragConstraints={{ left: -300, right: 300 }}
-        style={{ x, rotate, ...style }}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-        className={cn(
-          "relative cursor-grab active:cursor-grabbing select-none",
-          disabled && "cursor-default",
-          className
-        )}
-        {...props}
-      >
-        {/* Like indicator */}
-        <motion.div
-          style={{ opacity: likeOpacity }}
-          className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-lg font-bold text-lg rotate-[15deg] pointer-events-none z-10"
-        >
-          LIKE
-        </motion.div>
-        
-        {/* Nope indicator */}
-        <motion.div
-          style={{ opacity: nopeOpacity }}
-          className="absolute top-4 left-4 bg-red-500 text-white px-3 py-1 rounded-lg font-bold text-lg rotate-[-15deg] pointer-events-none z-10"
-        >
-          NOPE
-        </motion.div>
-        
-        {children}
-      </motion.div>
-    )
-  }
-)
-
-SwipeableCard.displayName = "SwipeableCard"