apex-ui-kit 2.0.6 → 2.1.0

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

@@ -24,12 +24,12 @@ const Testimonials = ({ testimonials }) => {
     };
 
     return (
-        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-12 items-center overflow-hidden">
+        <div className="w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl p-6 sm:p-8 md:p-12 border border-slate-800 grid md:grid-cols-2 gap-8 md:gap-12 items-center overflow-hidden">
 
             {/* Left Part: Text Content and Navigation */}
             <div className="flex flex-col justify-center h-full text-center md:text-left order-2 md:order-1">
-                {/* Title and Subtitle with Animation */}
-                <div className="relative h-32">
+                {/* Title, subtitle and quote with animation; the min height keeps the buttons from jumping. */}
+                <div className="relative min-h-[13rem] sm:min-h-[12rem]">
                     <AnimatePresence initial={false} mode="wait">
                         <motion.div
                             key={activeIndex}
@@ -38,11 +38,11 @@ const Testimonials = ({ testimonials }) => {
                             animate="center"
                             exit="exit"
                             transition={{ duration: 0.4, ease: "easeInOut" }}
-                            className="absolute w-full"
+                            className="w-full"
                         >
-                            <h2 className="text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
+                            <h2 className="text-2xl sm:text-3xl font-bold text-white tracking-tight">{testimonials[activeIndex].author}</h2>
                             <p className="mt-2 text-lime-400 font-medium">{testimonials[activeIndex].title}</p>
-                            <p className="mt-4 text-slate-400 text-sm leading-relaxed hidden md:block">"{testimonials[activeIndex].text}"</p>
+                            <p className="mt-4 text-slate-400 text-sm leading-relaxed">"{testimonials[activeIndex].text}"</p>
                         </motion.div>
                     </AnimatePresence>
                 </div>
@@ -71,7 +71,9 @@ const Testimonials = ({ testimonials }) => {
             </div>
 
             {/* Right Part: Stacked Images */}
-            <div className="relative h-80 w-full flex items-center justify-center order-1 md:order-2">
+            <div className="flex w-full items-center justify-center order-1 md:order-2">
+                {/* Sized to the card plus the fan, so the stack stays centred and inside the panel. */}
+                <div className="relative h-[calc(16rem+30px)] w-[calc(12rem+60px)] sm:h-[calc(20rem+30px)] sm:w-[calc(16rem+60px)]">
                 {testimonials.map((testimonial, index) => {
                     // Determine the position of the card in the stack
                     const position = (index - activeIndex + testimonials.length) % testimonials.length;
@@ -82,7 +84,7 @@ const Testimonials = ({ testimonials }) => {
                     return (
                         <motion.div
                             key={testimonial.id || index}
-                            className="absolute w-64 h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
+                            className="absolute w-48 h-64 sm:w-64 sm:h-80 bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700"
                             initial={false}
                             animate={{
                                 scale: 1 - position * 0.08,
@@ -107,6 +109,7 @@ const Testimonials = ({ testimonials }) => {
                         </motion.div>
                     );
                 })}
+                </div>
             </div>
         </div>
     );

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeAnimation.js

@@ -1,14 +1,42 @@
 // config/animations.js
 
-// Small utility to escape quotes in data-URIs
-const esc = (s = "") => s.replace(/#/g, "%23").replace(/\n/g, "");
+// Soft-edged circle that grows from `at` until it covers the screen. It animates
+// a radial-gradient mask through a registered property, which stays smooth;
+// scaling a blurred SVG mask to screen size re-rasterises every frame and flickers.
+const circleReveal = (at) => `
+  @property --vt-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
+  ::view-transition-new(root) {
+    -webkit-mask-image: radial-gradient(circle at ${at}, #000 var(--vt-r), transparent calc(var(--vt-r) + 12vmax));
+    mask-image: radial-gradient(circle at ${at}, #000 var(--vt-r), transparent calc(var(--vt-r) + 12vmax));
+    animation: vt-circle var(--vt-duration) var(--vt-ease);
+  }
+  ::view-transition-old(root) { animation: none; }
+  @keyframes vt-circle {
+    from { --vt-r: -12vmax; }
+    to   { --vt-r: 150vmax; }
+  }
+`;
+
+// Holds the last frame until the transition ends (no flash of the old theme)
+// and keeps the browser's default plus-lighter blending out of the reveal.
+const footer = `
+  ::view-transition-old(root), ::view-transition-new(root) {
+    animation-fill-mode: both;
+    mix-blend-mode: normal;
+  }
+`;
 
 export function buildAnimationCSS(animation, opts = {}) {
+  return presetCSS(animation, opts) + footer;
+}
+
+function presetCSS(animation, opts = {}) {
   const duration = opts.duration || "1.5s";
   const ease = opts.ease || "var(--vt-ease)";
 
+  // `var(--vt-ease)` would refer to itself here, so only set a real easing.
   const header = `
-    :root { --vt-duration: ${duration}; --vt-ease: ${ease}; }
+    :root { --vt-duration: ${duration};${ease === "var(--vt-ease)" ? "" : ` --vt-ease: ${ease};`} }
     ::view-transition-group(root){ animation-timing-function: var(--vt-ease); }
   `;
 
@@ -37,72 +65,15 @@ export function buildAnimationCSS(animation, opts = {}) {
   const preset = typeof animation === "string" ? animation : animation?.type;
 
   switch (preset) {
-    case "circle": {
-      const circleSVG = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>`
-      );
-      return header + `
-        ::view-transition-new(root) {
-          mask: url('data:image/svg+xml,${circleSVG}') center / 0 no-repeat;
-          -webkit-mask: url('data:image/svg+xml,${circleSVG}') center / 0 no-repeat;
-          animation: vt-scale var(--vt-duration);
-        }
-        ::view-transition-old(root), .dark::view-transition-old(root) {
-          animation: vt-scale var(--vt-duration);
-        }
-        @keyframes vt-scale {
-          to { mask-size: 200vmax; -webkit-mask-size: 200vmax; }
-        }
-      `;
-    }
+    case "circle":
+      // Grows from the clicked button (ThemeToggle sets --cx / --cy).
+      return header + circleReveal("var(--cx, 50%) var(--cy, 50%)");
 
-    case "circle-left": {
-      const svg = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><filter id="b"><feGaussianBlur stdDeviation="2"/></filter></defs><circle cx="0" cy="0" r="18" fill="white" filter="url(%23b)"/></svg>`
-      );
-      return header + `
-        ::view-transition-new(root) {
-          mask: url('data:image/svg+xml,${svg}') top left / 0 no-repeat;
-          -webkit-mask: url('data:image/svg+xml,${svg}') top left / 0 no-repeat;
-          transform-origin: top left;
-          animation: vt-scale-tl var(--vt-duration);
-        }
-        ::view-transition-old(root), .dark::view-transition-old(root) {
-          transform-origin: top left;
-          animation: vt-scale-tl var(--vt-duration);
-        }
-        @keyframes vt-scale-tl { to { mask-size: 350vmax; -webkit-mask-size: 350vmax; } }
-      `;
-    }
-    case "circle-right": {
-      const svg = esc(
-        `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
-       <defs><filter id="b"><feGaussianBlur stdDeviation="2"/></filter></defs>
-       <circle cx="40" cy="0" r="18" fill="white" filter="url(%23b)"/>
-     </svg>`
-      );
-
-      return header + `
-    ::view-transition-new(root) {
-      mask: url('data:image/svg+xml,${svg}') top right / 0 no-repeat;
-      -webkit-mask: url('data:image/svg+xml,${svg}') top right / 0 no-repeat;
-      transform-origin: top right;
-      animation: vt-scale-tr 0.9s;
-    }
+    case "circle-left":
+      return header + circleReveal("0 0");
 
-    ::view-transition-old(root), .dark::view-transition-old(root) {
-      transform-origin: top right;
-      animation: vt-scale-tr 0.9s;
-    }
-
-    @keyframes vt-scale-tr {
-      to {
-        mask-size: 350vmax;
-        -webkit-mask-size: 350vmax;
-      }
-    }
-  `;
-    }
+    case "circle-right":
+      return header + circleReveal("100% 0");
     case "split-reveal-horizontal": {
       return header + `
     ::view-transition-new(root) {
@@ -241,7 +212,7 @@ export function buildAnimationCSS(animation, opts = {}) {
     }
   `;
     }
-   // Add more animation 
+    // Add more animation 
 
 
 
@@ -249,4 +220,4 @@ export function buildAnimationCSS(animation, opts = {}) {
     default:
       return header; // no-op if unknown
   }
-}
+}

package/dist/ApexUI-Kit/templates/ThemeToggle/ThemeToggle.css

@@ -71,7 +71,7 @@
   --color-aside-beam: #fff;
 
   /* animation defaults (can be overridden) */
-  --vt-duration: 1s;
+  --vt-duration: 1.7s;
   --vt-ease: ease-in-out;
 }
 
@@ -95,6 +95,8 @@
   --color-template-border: #fdc700;
   --color-template-text: #fdc700;
   --color-scan: #460809;
+  --selection-bg: #460809;
+  --selection-text: #fdc700;
 
   /* Hero Component */
   --right-color-bg: #e5c287;
@@ -246,6 +248,8 @@
   --color-btn-hover-text: #d9f99d;
   --color-stroke-color: #9ae600;
   --color-scan: #9ae600;
+  --selection-bg: #9ae600;
+  --selection-text: #1e2939;
   /* Hero Component */
   --color-stroke-color: #9ae600;
   --color-template: #101828;

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

@@ -1,7 +1,15 @@
 import { useState, useEffect, useRef, useId } from "react";
+import { flushSync } from "react-dom";
 import { FiSun, FiMoon } from "react-icons/fi";
 import { buildAnimationCSS } from "./ThemeAnimation.js";
 
+// Swaps the theme-* class on <html>.
+function applyThemeClass(theme) {
+    const html = document.documentElement;
+    [...html.classList].forEach((c) => c.startsWith("theme-") && html.classList.remove(c));
+    html.classList.add(`theme-${theme}`);
+}
+
 export default function ThemeToggle({
     animation = "circle",
     duration = "1.5s",
@@ -29,12 +37,19 @@ export default function ThemeToggle({
     // ------------------------------
     useEffect(() => {
         const rawCSS = buildAnimationCSS(animation, { duration, ease });
+        const suffix = uid.replace(/[^\w-]/g, "");
 
-        // ✅ Scope selectors with html[vt-owner]
+        // ✅ Scope selectors with html[vt-owner]; :root variables and keyframe names
+        // too, so several toggles on one page don't override each other's settings.
         const scopedCSS = rawCSS
+            .replace(/(?<![-\w])vt-(?=[a-z])/g, `vt-${suffix}-`)
+            .replace(/:root\b/g, `html[vt-owner="${uid}"]`)
             .replaceAll("::view-transition-new", `html[vt-owner="${uid}"]::view-transition-new`)
             .replaceAll("::view-transition-old", `html[vt-owner="${uid}"]::view-transition-old`)
-            .replaceAll("::view-transition-group", `html[vt-owner="${uid}"]::view-transition-group`);
+            .replaceAll("::view-transition-group", `html[vt-owner="${uid}"]::view-transition-group`)
+            // No CSS transitions while the view transition runs, otherwise elements are
+            // captured mid-fade in the old colours and snap to the new ones afterwards.
+            + `html[vt-owner="${uid}"] *, html[vt-owner="${uid}"] *::before, html[vt-owner="${uid}"] *::after { transition: none !important; }`;
 
         let styleEl = document.getElementById(`vt-style-${uid}`);
         if (!styleEl) {
@@ -49,9 +64,7 @@ export default function ThemeToggle({
     // Apply theme globally + notify
     // ------------------------------
     useEffect(() => {
-        const html = document.documentElement;
-        html.classList.forEach((c) => c.startsWith("theme-") && html.classList.remove(c));
-        html.classList.add(`theme-${theme}`);
+        applyThemeClass(theme);
 
         try {
             localStorage.setItem("apexui-theme", theme);
@@ -88,7 +101,12 @@ export default function ThemeToggle({
         // ✅ Use html instead of body
         document.documentElement.setAttribute("vt-owner", uid);
 
-        const run = () => setTheme(nextTheme);
+        // Apply the theme synchronously: the browser takes the transition's "new"
+        // snapshot as soon as this returns, before a normal React update would land.
+        const run = () => {
+            applyThemeClass(nextTheme);
+            flushSync(() => setTheme(nextTheme));
+        };
 
         if (document.startViewTransition) {
             const vt = document.startViewTransition(run);
@@ -115,4 +133,4 @@ export default function ThemeToggle({
             {isLight ? <FiMoon /> : <FiSun />}
         </button>
     );
-}
+}

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",
-    "glass-card-stack": "GlassCardStack",
-    "glass-profile": "GlassProfile",
+    "card-stack": "CardStack",
     "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.6",
+  "version": "2.1.0",
   "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"