@nehal712521/inprogress 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nehal712521/inprogress",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "CLI to add beautiful UI components to your project",
   "keywords": [
     "inprogress",

package/registry/components/badge.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import React from "react";
+import { motion } from "framer-motion";
 
-type BadgeVariant = "default" | "secondary" | "outline" | "destructive";
+type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "animated";
 
 interface BadgeProps {
     children: React.ReactNode;
@@ -15,9 +16,46 @@ const variantStyles: Record<BadgeVariant, string> = {
     secondary: "bg-zinc-800 text-zinc-100 hover:bg-zinc-700",
     outline: "border border-zinc-700 text-zinc-100 hover:bg-zinc-800",
     destructive: "bg-red-500/10 text-red-500 hover:bg-red-500/20",
+    animated: "bg-black text-white",
 };
 
 export function Badge({ children, variant = "default", className = "" }: BadgeProps) {
+    if (variant === "animated") {
+        return (
+            <motion.span
+                className={`relative inline-flex items-center rounded-full px-3 py-1 text-xs font-medium overflow-hidden ${className}`}
+                whileHover={{ scale: 1.05 }}
+                transition={{ type: "spring", stiffness: 400 }}
+            >
+                {/* Rotating Border Light */}
+                <motion.div
+                    className="absolute inset-0 rounded-full"
+                    style={{
+                        background: "conic-gradient(from 0deg, transparent, #0ea5e9, transparent, #8b5cf6, transparent)",
+                        padding: "1px",
+                    }}
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
+                >
+                    <div className="absolute inset-[1px] rounded-full bg-black" />
+                </motion.div>
+                {/* Inner glow */}
+                <motion.div
+                    className="absolute inset-0 rounded-full opacity-50"
+                    animate={{
+                        boxShadow: [
+                            "inset 0 0 10px rgba(14, 165, 233, 0.3)",
+                            "inset 0 0 20px rgba(139, 92, 246, 0.3)",
+                            "inset 0 0 10px rgba(14, 165, 233, 0.3)",
+                        ],
+                    }}
+                    transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+                />
+                <span className="relative z-10">{children}</span>
+            </motion.span>
+        );
+    }
+
     return (
         <span
             className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors ${variantStyles[variant]} ${className}`}

package/registry/components/card.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React from "react";
+import { motion } from "framer-motion";
 
 interface CardProps {
     children: React.ReactNode;
@@ -9,9 +10,30 @@ interface CardProps {
 
 export function Card({ children, className = "" }: CardProps) {
     return (
-        <div className={`rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 ${className}`}>
+        <motion.div 
+            className={`relative rounded-xl border border-zinc-800 bg-zinc-900/50 p-6 overflow-hidden ${className}`}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ type: "spring", stiffness: 100, damping: 15 }}
+            whileHover={{ scale: 1.02, borderColor: "rgba(14, 165, 233, 0.3)" }}
+        >
+            {/* Animated Background Gradient */}
+            <div className="absolute inset-0 -z-10">
+                <div className="absolute inset-0 bg-gradient-to-br from-sky-500/5 via-transparent to-purple-500/5 animate-pulse" />
+                <motion.div
+                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                    animate={{
+                        background: [
+                            "radial-gradient(400px circle at 0% 0%, rgba(14, 165, 233, 0.1), transparent 60%)",
+                            "radial-gradient(400px circle at 100% 100%, rgba(14, 165, 233, 0.1), transparent 60%)",
+                            "radial-gradient(400px circle at 0% 0%, rgba(14, 165, 233, 0.1), transparent 60%)",
+                        ],
+                    }}
+                    transition={{ duration: 5, repeat: Infinity, ease: "linear" }}
+                />
+            </div>
             {children}
-        </div>
+        </motion.div>
     );
 }
 

package/registry/registry.json

@@ -12,9 +12,9 @@
     "card": {
       "name": "card",
       "displayName": "Card",
-      "description": "A card component with header, title, description, content, and footer",
+      "description": "A card component with animated background gradient and hover effects",
       "category": "Components",
-      "dependencies": [],
+      "dependencies": ["framer-motion"],
       "files": ["card.tsx"]
     },
     "input": {
@@ -28,9 +28,9 @@
     "badge": {
       "name": "badge",
       "displayName": "Badge",
-      "description": "A badge component with multiple variants",
+      "description": "A badge component with rotating border light animation",
       "category": "Components",
-      "dependencies": [],
+      "dependencies": ["framer-motion"],
       "files": ["badge.tsx"]
     },
     "floating-dock": {