@moontra/moonui-pro 2.18.6 → 2.20.0

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

@@ -1,185 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Check, X, Loader2 } from "lucide-react";
-import { cn } from "../../lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-
-const animatedButtonVariants = cva(
-  "relative inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    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",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface AnimatedButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof animatedButtonVariants> {
-  state?: "idle" | "loading" | "success" | "error";
-  loadingText?: string;
-  successText?: string;
-  errorText?: string;
-}
-
-const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      state = "idle",
-      loadingText = "Loading...",
-      successText = "Success!",
-      errorText = "Error!",
-      children,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const [buttonWidth, setButtonWidth] = React.useState<number | "auto">("auto");
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-
-    React.useEffect(() => {
-      if (buttonRef.current && state === "idle") {
-        setButtonWidth(buttonRef.current.offsetWidth);
-      }
-    }, [state, children]);
-
-    const isDisabled = disabled || state !== "idle";
-
-    const contentVariants = {
-      idle: { opacity: 1, y: 0 },
-      loading: { opacity: 0, y: 10 },
-      success: { opacity: 0, y: 10 },
-      error: { opacity: 0, y: 10 },
-    };
-
-    const iconVariants = {
-      hidden: { opacity: 0, scale: 0.8, y: -10 },
-      visible: { opacity: 1, scale: 1, y: 0 },
-    };
-
-    return (
-      <motion.button
-        ref={(el) => {
-          buttonRef.current = el;
-          if (ref) {
-            if (typeof ref === "function") ref(el);
-            else ref.current = el;
-          }
-        }}
-        className={cn(animatedButtonVariants({ variant, size, className }))}
-        disabled={isDisabled}
-        animate={{
-          width: state !== "idle" ? buttonWidth : "auto",
-        }}
-        transition={{ duration: 0.2 }}
-        {...props}
-      >
-        <AnimatePresence mode="wait">
-          {state === "idle" && (
-            <motion.span
-              key="idle"
-              variants={contentVariants}
-              initial="loading"
-              animate="idle"
-              exit="loading"
-              transition={{ duration: 0.2 }}
-              className="inline-flex items-center"
-            >
-              {children}
-            </motion.span>
-          )}
-
-          {state === "loading" && (
-            <motion.span
-              key="loading"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <Loader2 className="h-4 w-4 animate-spin" />
-              {loadingText}
-            </motion.span>
-          )}
-
-          {state === "success" && (
-            <motion.span
-              key="success"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <motion.div
-                variants={iconVariants}
-                initial="hidden"
-                animate="visible"
-                transition={{ duration: 0.3, delay: 0.1 }}
-              >
-                <Check className="h-4 w-4" />
-              </motion.div>
-              {successText}
-            </motion.span>
-          )}
-
-          {state === "error" && (
-            <motion.span
-              key="error"
-              className="inline-flex items-center gap-2"
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{ duration: 0.2 }}
-            >
-              <motion.div
-                variants={iconVariants}
-                initial="hidden"
-                animate="visible"
-                transition={{ duration: 0.3, delay: 0.1 }}
-                animate={{
-                  x: [0, -2, 2, -2, 2, 0],
-                }}
-                transition={{
-                  duration: 0.4,
-                  delay: 0.1,
-                }}
-              >
-                <X className="h-4 w-4" />
-              </motion.div>
-              {errorText}
-            </motion.span>
-          )}
-        </AnimatePresence>
-      </motion.button>
-    );
-  }
-);
-
-AnimatedButton.displayName = "AnimatedButton";
-
-export { AnimatedButton, animatedButtonVariants };

package/src/components/ui/hover-card-3d.tsx

@@ -1,103 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
-import { cn } from "../../lib/utils";
-
-export interface HoverCard3DProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  rotateAmount?: number;
-  scale?: number;
-  perspective?: number;
-  springConfig?: {
-    stiffness?: number;
-    damping?: number;
-  };
-}
-
-const HoverCard3D = React.forwardRef<HTMLDivElement, HoverCard3DProps>(
-  (
-    {
-      children,
-      className,
-      rotateAmount = 15,
-      scale = 1.05,
-      perspective = 1000,
-      springConfig = { stiffness: 300, damping: 20 },
-      ...props
-    },
-    ref
-  ) => {
-    const cardRef = React.useRef<HTMLDivElement>(null);
-    const mouseX = useMotionValue(0);
-    const mouseY = useMotionValue(0);
-
-    const rotateX = useSpring(
-      useTransform(mouseY, [-0.5, 0.5], [rotateAmount, -rotateAmount]),
-      springConfig
-    );
-    const rotateY = useSpring(
-      useTransform(mouseX, [-0.5, 0.5], [-rotateAmount, rotateAmount]),
-      springConfig
-    );
-
-    const handleMouseMove = React.useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (!cardRef.current) return;
-
-        const rect = cardRef.current.getBoundingClientRect();
-        const width = rect.width;
-        const height = rect.height;
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-
-        const xPct = x / width - 0.5;
-        const yPct = y / height - 0.5;
-
-        mouseX.set(xPct);
-        mouseY.set(yPct);
-      },
-      [mouseX, mouseY]
-    );
-
-    const handleMouseLeave = React.useCallback(() => {
-      mouseX.set(0);
-      mouseY.set(0);
-    }, [mouseX, mouseY]);
-
-    return (
-      <div
-        ref={ref}
-        className={cn("relative", className)}
-        style={{ perspective }}
-        {...props}
-      >
-        <motion.div
-          ref={cardRef}
-          className="w-full h-full transition-shadow duration-300 hover:shadow-xl"
-          style={{
-            rotateX,
-            rotateY,
-            transformStyle: "preserve-3d",
-          }}
-          onMouseMove={handleMouseMove}
-          onMouseLeave={handleMouseLeave}
-          whileHover={{ scale }}
-          transition={{ type: "spring", ...springConfig }}
-        >
-          <div
-            className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/20 to-white/0 opacity-0 hover:opacity-100 transition-opacity duration-300"
-            style={{
-              transform: "translateZ(1px)",
-            }}
-          />
-          {children}
-        </motion.div>
-      </div>
-    );
-  }
-);
-
-HoverCard3D.displayName = "HoverCard3D";
-
-export { HoverCard3D };