apex-ui-kit 2.0.5

package/Licence.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Mohan Kumar Dalei
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell      
+copies of the Software, and to permit persons to whom the Software is          
+furnished to do so, subject to the following conditions:                        
+
+The above copyright notice and this permission notice shall be included in all 
+copies or substantial portions of the Software.                                 
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR     
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,       
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE    
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER         
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
+SOFTWARE.

package/ReadMe.md

@@ -0,0 +1,75 @@
+# Apex UI Kit
+
+Apex UI Kit is a modern, blazing-fast, beautifully animated React UI library built with Tailwind CSS, GSAP, and Framer Motion. Perfect for modern apps, portfolios, dashboards, and high-performance UIs.
+
+---
+
+## 🌐 Website & Docs
+
+- **Main Site:** [https://apex-ui.in/](https://apex-ui.in/)
+- **Introduction:** [https://apex-ui.in/components/docs/getting-started/introduction](https://apex-ui.in/components/docs/getting-started/introduction)
+- **Components:** [https://apex-ui.in/components/glass-navbar](https://apex-ui.in/components/glass-navbar)
+
+## 🚀 Installation
+
+### 1. Install the package
+
+```bash
+npm install apex-ui-kit
+```
+
+### 2. Add a component using the CLI
+
+```bash
+npx apex-ui-kit add hyper-card
+```
+
+---
+
+## 🧩 Usage Example
+
+```jsx
+import HyperCard from "./ApexUI-Kit/HyperCard/HyperCard.jsx";
+
+const App = () => {
+  return (
+    <div>
+      <HyperCard
+        starColor="#9f7aea"
+        glow={true}
+        beamCount={10}
+        starCount={250}
+      />
+    </div>
+  );
+};
+
+export default App;
+```
+
+---
+
+## 📦 Features
+
+- Modern, animated React components
+- Easy CLI for adding components
+- Built with Tailwind CSS, GSAP, Framer Motion
+- Perfect for dashboards, portfolios, and modern web apps
+
+---
+
+## 📚 Documentation
+
+- More components and usage: [Coming Soon]
+
+---
+
+## 🛠️ Contributing
+
+Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
+
+---
+
+## 📝 License
+
+MIT

package/dist/ApexUI-Kit/templates/Avatar/Avatar.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion } from "framer-motion";
+const Avatar = ({ users }) => {
+    const containerVariants = {
+        hidden: { opacity: 0 },
+        visible: {
+            opacity: 1,
+            transition: {
+                staggerChildren: 0.15,
+            },
+        },
+    };
+
+    const itemVariants = {
+        hidden: { y: 20, opacity: 0 },
+        visible: {
+            y: 0,
+            opacity: 1,
+            transition: {
+                type: 'spring',
+                stiffness: 100,
+            },
+        },
+    };
+
+    // Helper to get initials and fallback color
+    const getInitial = (name) => name ? name.charAt(0).toUpperCase() : "?";
+    const getBgColor = (color) => color || "#4a5568";
+
+    return (
+        <div className="font-sans flex flex-col items-center justify-center">
+            <motion.div
+                className="flex -space-x-6"
+                variants={containerVariants}
+                initial="hidden"
+                animate="visible"
+            >
+                {users.map((user, index) => (
+                    <motion.div key={index} variants={itemVariants}>
+                        <motion.div
+                            className="relative"
+                            whileHover={{ scale: 1.1, zIndex: 10 }}
+                            transition={{ type: 'spring', stiffness: 300, damping: 15 }}
+                        >
+                            {user.imageUrl ? (
+                                <img
+                                    src={user.imageUrl}
+                                    alt={user.name}
+                                    className="w-20 h-20 object-cover rounded-full border-2"
+                                    style={{ borderColor: getBgColor(user.color) }}
+                                    onError={(e) => { e.target.onerror = null; e.target.src = ""; }}
+                                />
+                            ) : (
+                                <div
+                                    className="w-20 h-20 flex items-center justify-center rounded-full border-4 text-5xl font-bold text-white/40"
+                                    style={{ backgroundColor: getBgColor(user.color), borderColor: getBgColor(user.color) }}
+                                >
+                                    {getInitial(user.name)}
+                                </div>
+                            )}
+                            <motion.span
+                                className="absolute bottom-1 right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-slate-900"
+                                animate={{
+                                    scale: [1, 1.2, 1],
+                                    opacity: [0.8, 1, 0.8],
+                                }}
+                                transition={{
+                                    duration: 1.5,
+                                    repeat: Infinity,
+                                    ease: "easeInOut",
+                                }}
+                            />
+                        </motion.div>
+                    </motion.div>
+                ))}
+            </motion.div>
+        </div>
+    );
+};
+
+export default Avatar;

package/dist/ApexUI-Kit/templates/BeamBar/BeamBar.jsx

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-vars */
+import React, { useEffect, useState } from 'react';
+import { motion, useAnimation } from 'framer-motion';
+
+const BeamBar = ({
+    fromColor = "#a855f7",
+    viaColor = "#38bdf8",
+    toColor = "#06b6d4",
+    barWidth: maxBarWidth = 320, // Prop ko maxBarWidth ki tarah use karenge
+    barHeight = 8,
+    duration = 1.2,
+    pulseDuration = 2.5
+}) => {
+    const controls = useAnimation();
+    const [pulse, setPulse] = useState(false);
+    const [beamOpacity, setBeamOpacity] = useState(0.1);
+
+    // Responsive width ke liye state
+    const [dynamicBarWidth, setDynamicBarWidth] = useState(0);
+
+    // Screen size change ko handle karne ke liye useEffect
+    useEffect(() => {
+        const updateWidth = () => {
+            // Screen width ka 80% ya maxBarWidth, jo bhi kam ho
+            const newWidth = Math.min(window.innerWidth * 0.8, maxBarWidth);
+            setDynamicBarWidth(newWidth);
+        };
+
+        updateWidth(); // Pehli baar set karne ke liye
+        window.addEventListener('resize', updateWidth); // Resize par update karne ke liye
+
+        // Cleanup function
+        return () => window.removeEventListener('resize', updateWidth);
+    }, [maxBarWidth]);
+
+    useEffect(() => {
+        // Jab dynamicBarWidth set ho jaye tab animation start karein
+        if (dynamicBarWidth > 0) {
+            controls.start({
+                width: dynamicBarWidth,
+                transition: { duration, ease: "easeInOut" }
+            });
+
+            // Animate beam opacity gradually during width expansion
+            let start = null;
+            function animateBeam(ts) {
+                if (!start) start = ts;
+                const elapsed = (ts - start) / 1000;
+                const progress = Math.min(elapsed / duration, 1);
+                setBeamOpacity(0.2 + 0.8 * progress); // from 0.2 to 1.0
+                if (progress < 1) {
+                    requestAnimationFrame(animateBeam);
+                } else {
+                    setPulse(true);
+                }
+            }
+            requestAnimationFrame(animateBeam);
+
+            // Cleanup
+            return () => {
+                setBeamOpacity(0.2);
+                setPulse(false);
+            };
+        }
+    }, [dynamicBarWidth, duration, controls]);
+
+    // Beam ka size ab bar ki width par depend karega
+    const beamWidth = dynamicBarWidth * 1.25;
+    const beamHeight = 800; // Ise bhi dynamic kar sakte hain agar zaroorat ho
+
+    return (
+        <div className="fixed top-10 left-0 w-full flex justify-center z-50 pointer-events-none">
+            <motion.div
+                initial={{ width: 0 }}
+                animate={controls}
+                // Class se 'hidden md:block' hataya gaya hai
+                className={`absolute top-0 left-1/2 -translate-x-1/2 rounded-md shadow-[0_0_10px_#fff,0_0_20px_#4f46e5,0_0_30px_#06b6d4] ${pulse ? 'animate-pulse' : ''}`}
+                style={{
+                    height: barHeight,
+                    background: `linear-gradient(to right, ${fromColor}, ${viaColor}, ${toColor})`,
+                    animationDuration: pulse ? `${pulseDuration}s` : undefined,
+                }}
+            >
+                {/* Beam from Bar using pseudo-element */}
+                <div
+                    className="absolute top-2 left-1/2 transform -translate-x-1/2 pointer-events-none z-0"
+                    style={{
+                        width: `${beamWidth}px`, // Dynamic width
+                        height: `${beamHeight}px`, // Dynamic height (optional)
+                        background: `linear-gradient(to bottom, rgba(111, 93, 245, 0.7), rgba(7, 7, 7, 0.3), transparent)`,
+                        filter: "blur(100px)",
+                        opacity: beamOpacity,
+                        animation: pulse ? `glow ${pulseDuration}s infinite alternate` : undefined
+                    }}
+                ></div>
+            </motion.div>
+        </div>
+    );
+};
+
+export default BeamBar;

package/dist/ApexUI-Kit/templates/Cards/BasicCard.jsx

@@ -0,0 +1,60 @@
+/* eslint-disable no-unused-vars */
+import React from "react";
+import { motion } from "framer-motion";
+import { SquareArrowOutUpRight, Wallpaper } from 'lucide-react';
+import { NavLink } from "react-router-dom";
+const ProfileCard = ({ title, summary, image, link }) => {
+    return (
+        <motion.div
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ type: "spring", stiffness: 300, damping: 20 }}
+            className="w-72 rounded-2xl bg-slate-950 border border-gray-800 shadow-2xl overflow-hidden p-2 shadow-lime-700/20"
+        >
+            {/* Image */}
+            <div className="h-[30vh] w-full rounded-b-4xl rounded-t-lg  overflow-hidden">
+                <motion.img
+                    src={image}
+                    alt={title}
+                    className="w-full object-cover h-full"
+                    whileHover={{ scale: 1.05 }}
+                    transition={{ duration: 0.4 }}
+                />
+            </div>
+            {/* Content */}
+            <div className="p-4 flex flex-col gap-2">
+                <h2 className="text-lg font-bold flex items-center gap-3 text-[var(--color-pages-side-active-text)]">
+                    <Wallpaper size={18} /> {title}
+                </h2>
+
+                <p className="text-sm text-gray-400 leading-relaxed">
+                    {summary}
+                </p>
+
+                {/* Stats + Button */}
+                <div className="flex items-center justify-center mt-3 transition-all duration-150 ease-in-out">
+                    {/* Visit Button */}
+                    <NavLink
+                        to={link}
+                        className="px-7 py-1.5 rounded-full bg-lime-600 text-white font-medium shadow hover:bg-lime-500/90 active:scale-95 transition-all duration-150 ease-in-out flex items-center justify-center gap-2 ring-4 ring-lime-600/30 active:ring-lime-600"
+                    >
+                        Visit <SquareArrowOutUpRight size={15} />
+                    </NavLink>
+                </div>
+            </div>
+        </motion.div>
+    );
+};
+
+// Wrapper to map array of objects
+const ProfileCardList = ({ data }) => {
+    return (
+        <div className="flex flex-wrap gap-3 justify-center items-center">
+            {data.map((item, index) => (
+                <ProfileCard key={index} {...item} />
+            ))}
+        </div>
+    );
+};
+
+export default ProfileCardList;

package/dist/ApexUI-Kit/templates/Carousel/Carousel.jsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+
+// To use Framer Motion in this environment, we'll import it from a CDN.
+// In a local project, you would typically use: `npm install framer-motion`
+import { motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+// --- Custom Parallax Carousel Component ---
+const ParallaxCarousel = ({ slides }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const handleNext = () => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % slides.length);
+    };
+
+    const handlePrev = () => {
+        setActiveIndex((prevIndex) => (prevIndex - 1 + slides.length) % slides.length);
+    };
+
+
+    return (
+        <div className="w-full flex flex-col items-center px-2">
+            {/* 3D Carousel Container without drag/grab */}
+            <motion.div
+                className="relative w-full h-[440px] portrait:h-[480px] mb-8"
+                style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
+            >
+                {slides.map((slide, index) => {
+                    let positionOffset = index - activeIndex;
+                    if (positionOffset > slides.length / 2) {
+                        positionOffset -= slides.length;
+                    } else if (positionOffset < -slides.length / 2) {
+                        positionOffset += slides.length;
+                    }
+
+                    const isVisible = Math.abs(positionOffset) <= 2;
+
+                    return (
+                        <motion.div
+                            key={index}
+                            className={`absolute w-full h-[440px] portrait:w-full portrait:h-[480px] top-0 left-0 portrait:left-0 portrait:top-0 bg-slate-900 rounded-2xl overflow-hidden border-2 border-slate-800 md:w-[50%] md:h-[450px] md:top-[50px] md:left-[25%]`}
+                            initial={false}
+                            animate={{
+                                translateX: `${positionOffset * 50}%`,
+                                translateZ: -Math.abs(positionOffset) * 250,
+                                scale: 1 - Math.abs(positionOffset) * 0.15,
+                                opacity: isVisible ? (1 - Math.abs(positionOffset) * 0.35) : 0,
+                                zIndex: slides.length - Math.abs(positionOffset),
+                            }}
+                            transition={{ type: 'spring', stiffness: 260, damping: 30 }}
+                            style={{ transformStyle: 'preserve-3d' }}
+                        >
+                            {/* Slide Content */}
+                            <div className="absolute inset-0 w-full h-full">
+                                <img
+                                    src={slide.imageUrl}
+                                    alt={slide.title}
+                                    className="w-full h-full object-cover opacity-50 pointer-events-none"
+                                />
+                            </div>
+                            <div
+                                className="relative z-10 flex flex-col justify-end h-full p-8 text-white"
+                                style={{ transform: 'translateZ(60px)' }} // Content ko 3D space mein aage rakhta hai
+                            >
+                                <h2 className="text-3xl font-bold">{slide.title}</h2>
+                                <p className="text-lime-400 mt-1">{slide.subtitle}</p>
+                                <p className="text-slate-300 mt-4 text-sm leading-relaxed">{slide.text}</p>
+                            </div>
+                        </motion.div>
+                    );
+                })}
+            </motion.div>
+
+            {/* Navigation Buttons at the bottom */}
+            <div className="flex items-center justify-center gap-4 mt-10">
+                <motion.button
+                    onClick={handlePrev}
+                    className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors text-slate-400 hover:text-lime-400"
+                    whileTap={{ scale: 0.9 }}
+                >
+                    <ArrowLeft size={24} />
+                </motion.button>
+                <motion.button
+                    onClick={handleNext}
+                    className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors text-slate-400 hover:text-lime-400"
+                    whileTap={{ scale: 0.9 }}
+                >
+                    <ArrowRight size={24} />
+                </motion.button>
+            </div>
+        </div>
+    );
+};
+
+export default ParallaxCarousel;

package/dist/ApexUI-Kit/templates/Carousel/DragCarousel.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+// To use GSAP in this environment, we'll import it from a CDN.
+// In a local project: `npm install gsap`
+import { gsap } from 'gsap';
+import { Draggable } from 'gsap/Draggable';
+
+// GSAP Draggable plugin ko register karna zaroori hai
+gsap.registerPlugin(Draggable);
+
+// --- GSAP Drag Carousel Component ---
+const DragCarousel = ({ images }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const carouselRef = useRef(null);
+    const cardsRef = useRef([]);
+    const dragProxyRef = useRef(null);
+    useEffect(() => {
+        const cards = cardsRef.current;
+        gsap.to(cards, {
+            duration: 0.4,
+            ease: 'power4.Out',
+            stagger: 0.05,
+            // Har card ke liye naya transform calculate karta hai
+            transform: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) {
+                    positionOffset -= images.length;
+                } else if (positionOffset < -images.length / 2) {
+                    positionOffset += images.length;
+                }
+
+                const translateX = positionOffset * 50;
+                const translateZ = -Math.abs(positionOffset) * 250;
+                const scale = 1 - Math.abs(positionOffset) * 0.15;
+
+                return `translateX(${translateX}%) translateZ(${translateZ}px) scale(${scale})`;
+            },
+            zIndex: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) positionOffset -= images.length;
+                if (positionOffset < -images.length / 2) positionOffset += images.length;
+                return images.length - Math.abs(positionOffset);
+            },
+            opacity: (i) => {
+                let positionOffset = i - activeIndex;
+                if (positionOffset > images.length / 2) positionOffset -= images.length;
+                if (positionOffset < -images.length / 2) positionOffset += images.length;
+                return Math.abs(positionOffset) > 2 ? 0 : 1;
+            }
+        });
+    }, [activeIndex, images.length]);
+
+    // GSAP Draggable ko setup karta hai
+    useEffect(() => {
+        // BUG FIX: Draggable ab proxy element par lagaya gaya hai
+        const draggableInstance = Draggable.create(dragProxyRef.current, {
+            type: "x",
+            trigger: carouselRef.current,
+            inertia: true,
+            cursor: 'grab',
+            activeCursor: 'grabbing',
+            onDragEnd: function () {
+                gsap.to(this.target, { x: 0, duration: 0.3 });
+                if (this.getDirection("start") === "left") {
+                    setActiveIndex(prev => (prev + 1) % images.length);
+                } else if (this.getDirection("start") === "right") {
+                    setActiveIndex(prev => (prev - 1 + images.length) % images.length);
+                }
+            }
+        });
+
+        // Cleanup function
+        return () => {
+            if (draggableInstance && draggableInstance[0]) {
+                draggableInstance[0].kill();
+            }
+        };
+    }, [images.length]);
+
+    return (
+        <div
+            ref={carouselRef}
+            className="relative w-full h-[490px] lg:h-[590px] cursor-grab"
+            style={{ perspective: '1200px', transformStyle: 'preserve-3d' }}
+        >
+            <div ref={dragProxyRef} className="absolute inset-0 z-20"></div>
+
+            {images.map((src, index) => (
+                <div
+                    key={index}
+                    ref={el => cardsRef.current[index] = el}
+                    className="card-item absolute h-[480px] w-[300px] lg:h-[550px] lg:w-[350px] rounded-xl overflow-hidden shadow-2xl top-[25px] -left-4 md:left-36 lg:left-70"
+                >
+                    <img
+                        src={src}
+                        alt={`carousel-item-${index}`}
+                        className="w-full h-full object-cover pointer-events-none"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default DragCarousel;