apex-ui-kit 2.0.5

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

@@ -0,0 +1,85 @@
+import React, { useState, useRef, useEffect } from "react";
+import gsap from "gsap";
+
+const ToolTip = ({ items }) => {
+    const [hoveredIndex, setHoveredIndex] = useState(null);
+    const tooltipRefs = useRef([]);
+    const avatarRefs = useRef([]);
+
+    useEffect(() => {
+        // Animate all avatars based on hover state
+        items.forEach((_, idx) => {
+            const isHovered = hoveredIndex === idx;
+
+            // Animate the avatar image
+            gsap.to(avatarRefs.current[idx], {
+                scale: isHovered ? 1.15 : 1,
+                filter: isHovered ? "blur(0px)" : hoveredIndex !== null ? "blur(1.5px)" : "blur(0px)",
+                duration: 0.25,
+                ease: "power2.inOut",
+            });
+        });
+
+        // Animate the tooltip for the hovered item
+        if (hoveredIndex !== null && tooltipRefs.current[hoveredIndex]) {
+            gsap.fromTo(
+                tooltipRefs.current[hoveredIndex],
+                { opacity: 0, y: 10, scale: 0.8 },
+                {
+                    opacity: 1,
+                    y: 0,
+                    scale: 1,
+                    duration: 0.4,
+                    ease: "power3.out",
+                }
+            );
+        }
+    }, [hoveredIndex, items]);
+
+    return (
+        <div className="flex items-end -space-x-4">
+            {items.map((item, idx) => (
+                <div
+                    key={item.name}
+                    onMouseEnter={() => setHoveredIndex(idx)}
+                    onMouseLeave={() => setHoveredIndex(null)}
+                    className="relative group cursor-pointer"
+                    style={{ zIndex: hoveredIndex === idx ? 50 : 10 }}
+                >
+                    {hoveredIndex === idx && (
+                        <div
+                            ref={(el) => (tooltipRefs.current[idx] = el)}
+                            className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 z-50 flex flex-col items-center justify-center rounded-lg border border-teal-500/50 bg-gradient-to-br from-black/90 to-zinc-900/80 px-4 py-2 shadow-2xl backdrop-blur-md"
+                        >
+                            <div className="absolute bottom-[-6px] left-1/2 -translate-x-1/2 w-0 h-0 border-t-[8px] border-l-[8px] border-r-[8px] border-t-teal-500/40 border-l-transparent border-r-transparent" />
+                            <span className="text-sm font-bold text-teal-300 drop-shadow-sm whitespace-nowrap">
+                                {item.name}
+                            </span>
+                            <span className="text-xs text-zinc-300 italic whitespace-nowrap">
+                                {item.designation}
+                            </span>
+                        </div>
+                    )}
+                    <img
+                        ref={(el) => (avatarRefs.current[idx] = el)}
+                        src={item.image}
+                        alt={item.name}
+                        className="h-14 w-14 object-cover object-center rounded-full border-2 border-white shadow-lg transition-transform"
+                        style={{
+                            zIndex: hoveredIndex === idx ? 50 : 10,
+                            transition: "all 0.25s ease-in-out",
+                        }}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default function ToolTipInner({ items }) {
+    return (
+        <div className="flex flex-row items-center justify-center">
+            <ToolTip items={items} />
+        </div>
+    );
+}

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

@@ -0,0 +1,151 @@
+import React, { useState, useRef, useEffect } from "react";
+import gsap from "gsap";
+
+const WaterDropReveal = ({
+    text = "Discover the Water Drop Reveal Effect!\nMake your UI interactive, modern, and magical.\nHover to experience the reveal.",
+    dropCount = 3,
+    dropColor = "#a855f7",
+    animationSpeed = 0.4,
+}) => {
+    // Limit dropCount to max 10
+    const safeDropCount = Math.min(Math.max(1, dropCount), 10);
+    const [hovered, setHovered] = useState(false);
+    const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
+    const dropRef = useRef(null);
+    const textRef = useRef(null);
+    const mouseAnim = useRef({ x: 0.5, y: 0.5 });
+
+    useEffect(() => {
+        if (!hovered) return;
+        gsap.to(mouseAnim.current, {
+            x: mouse.x,
+            y: mouse.y,
+            duration: animationSpeed,
+            ease: "power2.out",
+            onUpdate: () => {
+                if (dropRef.current) {
+                    dropRef.current.setAttribute("data-x", mouseAnim.current.x);
+                    dropRef.current.setAttribute("data-y", mouseAnim.current.y);
+                }
+                if (textRef.current) {
+                    const xShift = (mouseAnim.current.x - 0.5) * 20;
+                    const yShift = (mouseAnim.current.y - 0.5) * 10;
+                    const rotateX = -(mouseAnim.current.y - 0.5) * 10;
+                    const rotateY = (mouseAnim.current.x - 0.5) * 15;
+                    gsap.to(textRef.current, {
+                        x: xShift,
+                        y: yShift,
+                        rotateX,
+                        rotateY,
+                        scale: 1.08,
+                        transformPerspective: 600,
+                        transformOrigin: "center",
+                        duration: animationSpeed,
+                        ease: "power3.out",
+                    });
+                }
+            },
+        });
+    }, [mouse, hovered, animationSpeed]);
+
+    const handleMouseMove = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / rect.width;
+        const y = (e.clientY - rect.top) / rect.height;
+        setMouse({ x, y });
+    };
+
+    const animX = hovered ? mouseAnim.current.x : 0.5;
+    const animY = hovered ? mouseAnim.current.y : 0.5;
+    const cx = 200 + (animX - 0.5) * 40;
+    const cy = 80 + (animY - 0.5) * 20;
+
+    return (
+        <div
+            className="relative w-full h-full rounded-2xl shadow-2xl flex items-center justify-center cursor-pointer overflow-hidden group border border-gray-800 transition-all duration-300"
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => {
+                setHovered(false);
+                gsap.to(textRef.current, {
+                    x: 0,
+                    y: 0,
+                    rotateX: 0,
+                    rotateY: 0,
+                    scale: 1,
+                    duration: 0.6,
+                    ease: "power2.out",
+                });
+            }}
+            onMouseMove={handleMouseMove}
+            style={{ minHeight: 260 }}
+        >
+            {/* Water Drop Layer */}
+            <div
+                ref={dropRef}
+                className={`pointer-events-none absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 transition-opacity duration-700 ${hovered ? "opacity-100" : "opacity-0"}`}
+                style={{ width: "100%", height: "100%" }}
+            >
+                <svg width="100%" height="100%" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid slice">
+                    <defs>
+                        <filter id="drop-shadow" x="-30%" y="-30%" width="160%" height="160%">
+                            <feDropShadow dx="0" dy="6" stdDeviation="18" flood-color="black" flood-opacity="60" />
+                        </filter>
+                    </defs>
+                    {(() => {
+                        // Dynamic radii and opacities for unique drops
+                        const maxRadius = 160;
+                        const minRadius = 36;
+                        const maxOpacity = 0.7;
+                        const minOpacity = 0.18;
+                        const step = safeDropCount > 1 ? (maxRadius - minRadius) / (safeDropCount - 1) : 0;
+                        const opacityStep = safeDropCount > 1 ? (maxOpacity - minOpacity) / (safeDropCount - 1) : 0;
+                        return [...Array(safeDropCount)].map((_, i) => {
+                            const r = Math.round(maxRadius - i * step);
+                            const opacity = +(maxOpacity - i * opacityStep).toFixed(2);
+                            return (
+                                <circle
+                                    key={i}
+                                    cx={cx}
+                                    cy={cy}
+                                    r={hovered ? r : 0}
+                                    fill={dropColor}
+                                    fillOpacity={hovered ? opacity : 0}
+                                    style={{ transition: `r 0.7s, fill-opacity 0.7s` }}
+                                    filter="url(#drop-shadow)"
+                                />
+                            );
+                        });
+                    })()}
+                </svg>
+            </div>
+
+            {/* Text Reveal with 3D */}
+            <span
+                ref={textRef}
+                className={`absolute whitespace-break-spaces z-20 max-sm:text-xl text-4xl font-semibold tracking-wide select-none transition-opacity duration-700 text-center w-full px-4 ${hovered ? "blur-0 opacity-100" : "text-gray-400 blur-sm opacity-60"}`}
+                style={{
+                    left: 0,
+                    letterSpacing: 0,
+                    willChange: "transform",
+                    background: hovered ? "linear-gradient(90deg, #fff, #38bdf8, #fff)" : undefined,
+                    WebkitBackgroundClip: hovered ? "text" : undefined,
+                    WebkitTextFillColor: hovered ? "transparent" : undefined,
+                    backgroundClip: hovered ? "text" : undefined,
+                    color: hovered ? undefined : undefined,
+                    fontFamily: "Bitcount Prop Double, system-ui",
+                }}
+            >
+                {text}
+            </span>
+
+            {/* Hover Hint */}
+            {!hovered && (
+                <span className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 text-xs sm:text-sm text-white bg-black/40 px-3 py-1 rounded-full shadow-md animate-pulse pointer-events-none select-none">
+                    Hover to reveal
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default WaterDropReveal;

package/dist/cli/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli/index.js

@@ -0,0 +1,145 @@
+#!/usr/bin/env node
+import fs from "fs-extra";
+import prompts from "prompts";
+import path from "path";
+import chalk from "chalk";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
+// Paths
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const componentRoot = path.join(__dirname, "..", "ApexUI-Kit", "templates");
+// Component name map
+const componentMap = {
+    "avatar": "Avatar",
+    "beam-bar": "BeamBar",
+    "carousel": "Carousel",
+    "parallax-carousel": "ParallaxCarousel",
+    "drag-carousel": "DragCarousel",
+    "basic-card": "Cards",
+    "edge-glow-from": "EdgeGlowFrom",
+    "glare-card": "GlareCard",
+    "glass-card-stack": "GlassCardStack",
+    "glass-profile": "GlassProfile",
+    "hover-text": "HoverText",
+    "hyper-card": "HyperCard",
+    "kinetic-threads-background": "KineticThreadsBackground",
+    "lens-flare-background": "LensFlareBackground",
+    "luminous-particle-ocean": "LuminousParticleOcean",
+    "nav-menu": "NavMenu",
+    "nav-dropdown": "NavDropDown",
+    "orbs-background": "OrbsBackground",
+    "pointer-follower": "PointerFollower",
+    "flip-profiler": "FlipProfile",
+    "parallax-profile": "ParallaxProfile",
+    "parallax-card": "ParallaxCard",
+    "rain-background": "RainBackground",
+    "ripple-background": "RippleBackground",
+    "scroll-marquee": "ScrollMarquee",
+    "smart-grid-card": "SmartGridCard",
+    "smoke-background": "SmokeBackground",
+    "tool-tip": "ToolTip",
+    "theme-toggle": "ThemeToggle",
+    "testimonials": "Testimonials",
+    "water-drop-reveal": "WaterDropReveal",
+};
+async function main() {
+    const args = process.argv.slice(2);
+    const command = args[0];
+    const rawInput = args[1];
+    if (command !== "add" || !rawInput) {
+        console.log(chalk.yellow("Usage:"));
+        console.log("  npx apex-ui-templete add <component-name>");
+        return;
+    }
+    const input = rawInput.toLowerCase();
+    const matchedName = componentMap[input];
+    if (!matchedName) {
+        console.log(chalk.red(`❌ Component '${rawInput}' not found in ApexUI-Kit.`));
+        console.log(chalk.gray("👉 Available components:"));
+        Object.values(componentMap).forEach((c) => console.log(`  • ${c}`));
+        return;
+    }
+    // Validate package.json
+    const pkgPath = path.join(process.cwd(), "package.json");
+    if (!(await fs.pathExists(pkgPath))) {
+        console.log(chalk.red("🚫 No package.json found. Are you in a React project?"));
+        return;
+    }
+    // Ask install path
+    const { dirInput } = await prompts({
+        type: "text",
+        name: "dirInput",
+        message: "📁 Install in which folder? (use . for current)",
+        initial: "."
+    });
+    let basePath = "";
+    if (dirInput.trim() === ".") {
+        const { confirmInside } = await prompts({
+            type: "select",
+            name: "confirmInside",
+            message: "📍 Are you currently inside the folder where ApexUI-Kit should be?",
+            choices: [
+                { title: "Yes (install here)", value: "yes" },
+                { title: "No (I'll choose a path)", value: "no" }
+            ]
+        });
+        if (confirmInside === "yes") {
+            basePath = process.cwd();
+        }
+        else {
+            const { targetPath } = await prompts({
+                type: "text",
+                name: "targetPath",
+                message: "📂 Enter target folder path (or use . for current)",
+                initial: "."
+            });
+            basePath = path.resolve(targetPath.trim());
+        }
+    }
+    else {
+        basePath = path.resolve(dirInput.trim());
+    }
+    // 🔠 Ask language
+    const { lang } = await prompts({
+        type: "select",
+        name: "lang",
+        message: "🧠 Choose language",
+        choices: [
+            { title: "JavaScript (JSX)", value: "jsx" },
+            { title: "TypeScript (Coming Soon)", value: "ts", disabled: true }
+        ]
+    });
+    // Install dependencies
+    console.log(chalk.cyan("📦 Installing dependencies..."));
+    const deps = [
+        "gsap",
+        "framer-motion",
+        "three",
+        "@fortawesome/fontawesome-svg-core",
+        "@fortawesome/free-solid-svg-icons",
+        "@fortawesome/react-fontawesome",
+        "react-icons"
+    ];
+    try {
+        execSync(`npm install ${deps.join(" ")}`, { stdio: "inherit" });
+    }
+    catch (err) {
+        console.log(chalk.red("❌ Failed to install dependencies."));
+        return;
+    }
+    // Prepare destination
+    const apexKitPath = path.join(basePath, "ApexUI-Kit");
+    const dest = path.join(apexKitPath, matchedName);
+    const source = path.join(componentRoot, matchedName);
+    console.log("🔍 Looking in:", source);
+    console.log("📁 Installing to:", dest);
+    if (!(await fs.pathExists(source))) {
+        console.log(chalk.red(`❌ Internal error: Component folder '${matchedName}' not found.`));
+        return;
+    }
+    await fs.ensureDir(dest);
+    await fs.copy(source, dest);
+    console.log(chalk.green(`✅ '${matchedName}' added to ${dest}`));
+}
+main();

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "apex-ui-kit",
+  "version": "2.0.5",
+  "license": "MIT",
+  "description": "Apex UI Kit - A React component library for building modern user interfaces",
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "library",
+    "design",
+    "kit",
+    "modern",
+    "user interface",
+    "frontend",
+    "web development",
+    "react components",
+    "ui components",
+    "react ui library",
+    "apex ui kit",
+    "ui components library"
+  ],
+  "type": "module",
+  "main": "dist/cli/index.js",
+  "bin": {
+    "apex-ui-kit": "./dist/cli/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && copyfiles -u 2 src/ApexUI-Kit/**/* dist/ApexUI-Kit"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^0.2.3",
+    "chalk": "^5.4.1",
+    "framer-motion": "^12.23.9",
+    "fs-extra": "^11.3.0",
+    "gsap": "^3.13.0",
+    "prompts": "^2.4.2",
+    "react-icons": "^5.5.0",
+    "three": "^0.178.0",
+    "react-three-fiber": "^6.0.13",
+    "@react-three/drei": "^10.7.3",
+    "@react-three/fiber": "^9.3.0",
+    "@react-three/postprocessing": "^3.0.4",
+    "lucide-react": "^0.525.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.0",
+    "copyfiles": "^2.4.1",
+    "typescript": "^5.4.0"
+  }
+}