apex-ui-kit 2.0.7 → 2.1.1

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

@@ -5,81 +5,100 @@ const ToolTip = ({ items }) => {
     const [hoveredIndex, setHoveredIndex] = useState(null);
     const tooltipRefs = useRef([]);
     const avatarRefs = useRef([]);
+    const last = items.length - 1;
 
     useEffect(() => {
-        // Animate all avatars based on hover state
+        // Lift the active avatar, dim the others
         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",
+                y: isHovered ? -6 : 0,
+                scale: isHovered ? 1.12 : 1,
+                opacity: hoveredIndex === null || isHovered ? 1 : 0.55,
+                duration: 0.3,
+                ease: "power3.out",
             });
         });
 
-        // Animate the tooltip for the hovered item
+        // Pop the tooltip in
         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",
-                }
+                { opacity: 0, y: 12, scale: 0.85, rotate: 0 },
+                { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: "back.out(1.8)" }
             );
         }
     }, [hoveredIndex, items]);
 
+    // The tooltip swings toward the pointer while it moves across the avatar.
+    const handlePointerMove = (e, idx) => {
+        const tip = tooltipRefs.current[idx];
+        if (!tip || e.pointerType !== "mouse") return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offset = ((e.clientX - rect.left) / rect.width - 0.5) * 2; // -1 … 1
+        gsap.to(tip, { rotate: offset * 10, x: offset * 12, duration: 0.5, ease: "power3.out", overwrite: "auto" });
+    };
+
+    // Keep the end tooltips inside small screens: align them to their outer edge.
+    const placement = (idx) =>
+        idx === 0 && last > 0 ? { box: "left-0", arrow: "left-6" }
+            : idx === last && last > 0 ? { box: "right-0", arrow: "right-6" }
+                : { box: "left-1/2 -translate-x-1/2", arrow: "left-1/2 -translate-x-1/2" };
+
     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 className="flex items-end -space-x-3 sm:-space-x-4">
+            {items.map((item, idx) => {
+                const { box, arrow } = placement(idx);
+                return (
+                    <div
+                        key={item.id ?? item.name}
+                        onPointerEnter={(e) => e.pointerType === "mouse" && setHoveredIndex(idx)}
+                        onPointerLeave={(e) => e.pointerType === "mouse" && setHoveredIndex(null)}
+                        onPointerMove={(e) => handlePointerMove(e, idx)}
+                        // Tap to toggle on touch screens
+                        onClick={() => setHoveredIndex((cur) => (cur === idx ? null : idx))}
+                        className="relative cursor-pointer"
+                        style={{ zIndex: hoveredIndex === idx ? 50 : 10 + idx }}
+                    >
+                        {hoveredIndex === idx && (
+                            <div className={`pointer-events-none absolute bottom-full mb-4 z-50 ${box}`}>
+                                {/* The card and its arrow animate together, so the arrow follows every swing. */}
+                                <div ref={(el) => (tooltipRefs.current[idx] = el)} className="relative origin-bottom">
+                                    <div className="relative overflow-hidden rounded-xl border border-white/10 bg-zinc-950 px-3.5 py-2.5 shadow-[0_16px_40px_-12px_rgba(0,0,0,0.7)]">
+                                        <span className="absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-lime-400 to-cyan-400" />
+                                        <span className="flex items-center gap-1.5 whitespace-nowrap text-sm font-semibold text-white">
+                                            <span className="h-1.5 w-1.5 rounded-full bg-lime-400 shadow-[0_0_8px_#a3e635]" />
+                                            {item.name}
+                                        </span>
+                                        <span className="mt-0.5 block whitespace-nowrap text-xs text-zinc-400">{item.designation}</span>
+                                    </div>
+                                    {/* Downward arrow: filled triangle that covers the card's bottom border, with the border on its two sides only */}
+                                    <svg width="16" height="8" viewBox="0 0 16 8" className={`absolute top-full -mt-px ${arrow}`} aria-hidden="true">
+                                        <path d="M0 0 L8 8 L16 0 Z" fill="#09090b" />
+                                        <path d="M0.5 0 L8 7.5 L15.5 0" fill="none" stroke="rgba(255,255,255,0.1)" />
+                                    </svg>
+                                </div>
+                            </div>
+                        )}
+                        <div ref={(el) => (avatarRefs.current[idx] = el)} className="rounded-full bg-gradient-to-br from-lime-400 via-emerald-400 to-cyan-400 p-[2px] shadow-lg shadow-black/30">
+                            <img
+                                src={item.image}
+                                alt={item.name}
+                                draggable="false"
+                                className="h-12 w-12 sm:h-14 sm:w-14 rounded-full border-2 border-zinc-950 object-cover object-top"
+                            />
                         </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>
+                );
+            })}
         </div>
     );
 };
 
 export default function ToolTipInner({ items }) {
     return (
-        <div className="flex flex-row items-center justify-center">
+        <div className="flex flex-row items-center justify-center pt-24">
             <ToolTip items={items} />
         </div>
     );
-}
+}

package/dist/cli/index.js

@@ -9,7 +9,7 @@ import { execSync } from "child_process";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const componentRoot = path.join(__dirname, "..", "ApexUI-Kit", "templates");
-// Component name map
+// Component name map (CLI name -> folder in templates). Older names stay as aliases.
 const componentMap = {
     "avatar": "Avatar",
     "accordion-marquee": "AccordionMarquee",
@@ -19,10 +19,10 @@ const componentMap = {
     "parallax-carousel": "ParallaxCarousel",
     "drag-carousel": "DragCarousel",
     "basic-card": "Cards",
-    "edge-glow-from": "EdgeGlowFrom",
+    "edge-glow-form": "EdgeGlowForm",
+    "edge-glow-from": "EdgeGlowForm",
     "glare-card": "GlareCard",
     "card-stack": "CardStack",
-    "glass-profile": "GlassProfile",
     "hover-text": "HoverText",
     "hyper-card": "HyperCard",
     "kinetic-threads-background": "KineticThreadsBackground",
@@ -33,6 +33,7 @@ const componentMap = {
     "nav-dropdown": "NavDropDown",
     "orbs-background": "OrbsBackground",
     "pointer-follower": "PointerFollower",
+    "flip-profile": "FlipProfile",
     "flip-profiler": "FlipProfile",
     "parallax-profile": "ParallaxProfile",
     "parallax-card": "ParallaxCard",
@@ -41,10 +42,18 @@ const componentMap = {
     "scroll-marquee": "ScrollMarquee",
     "smart-grid-card": "SmartGridCard",
     "smoke-background": "SmokeBackground",
+    "tooltip": "ToolTip",
     "tool-tip": "ToolTip",
     "theme-toggle": "ThemeToggle",
     "testimonials": "Testimonials",
-    "water-drop-reveal": "WaterDropReveal",
+    "mask-view": "MaskView",
+    "water-drop-reveal": "MaskView",
+};
+// Packages only some components need, installed on top of the shared ones.
+const extraDeps = {
+    Cards: ["react-router-dom"],
+    LuminousParticleOcean: ["@react-three/fiber"],
+    SmokeBackground: ["ogl"],
 };
 async function main() {
     const args = process.argv.slice(2);
@@ -52,7 +61,7 @@ async function main() {
     const rawInput = args[1];
     if (command !== "add" || !rawInput) {
         console.log(chalk.yellow("Usage:"));
-        console.log("  npx apex-ui-templete add <component-name>");
+        console.log("  npx apex-ui-kit add <component-name>");
         return;
     }
     const input = rawInput.toLowerCase();
@@ -60,7 +69,7 @@ async function main() {
     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}`));
+        Object.keys(componentMap).forEach((c) => console.log(`  • ${c}`));
         return;
     }
     // Validate package.json
@@ -74,7 +83,7 @@ async function main() {
         type: "text",
         name: "dirInput",
         message: "📁 Install in which folder? (use . for current)",
-        initial: "."
+        initial: ".",
     });
     let basePath = "";
     if (dirInput.trim() === ".") {
@@ -84,8 +93,8 @@ async function main() {
             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" }
-            ]
+                { title: "No (I'll choose a path)", value: "no" },
+            ],
         });
         if (confirmInside === "yes") {
             basePath = process.cwd();
@@ -95,7 +104,7 @@ async function main() {
                 type: "text",
                 name: "targetPath",
                 message: "📂 Enter target folder path (or use . for current)",
-                initial: "."
+                initial: ".",
             });
             basePath = path.resolve(targetPath.trim());
         }
@@ -110,8 +119,8 @@ async function main() {
         message: "🧠 Choose language",
         choices: [
             { title: "JavaScript (JSX)", value: "jsx" },
-            { title: "TypeScript (Coming Soon)", value: "ts", disabled: true }
-        ]
+            { title: "TypeScript (Coming Soon)", value: "ts", disabled: true },
+        ],
     });
     // Install dependencies
     console.log(chalk.cyan("📦 Installing dependencies..."));
@@ -122,7 +131,9 @@ async function main() {
         "@fortawesome/fontawesome-svg-core",
         "@fortawesome/free-solid-svg-icons",
         "@fortawesome/react-fontawesome",
-        "react-icons"
+        "react-icons",
+        "lucide-react",
+        ...(extraDeps[matchedName] ?? []),
     ];
     try {
         execSync(`npm install ${deps.join(" ")}`, { stdio: "inherit" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.0.7",
+  "version": "2.1.1",
   "license": "MIT",
   "description": "Apex UI Kit - A React component library for building modern user interfaces",
   "keywords": [
@@ -23,7 +23,7 @@
   "type": "module",
   "main": "dist/cli/index.js",
   "bin": {
-    "apex-ui-kit": "./dist/cli/index.js"
+    "apex-ui-kit": "dist/cli/index.js"
   },
   "files": [
     "dist"

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

@@ -1,151 +0,0 @@
-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;