apex-ui-kit 2.11.0 → 2.12.0

package/ReadMe.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/apex-ui-kit?color=a3e635)](https://www.npmjs.com/package/apex-ui-kit)
 [![license](https://img.shields.io/npm/l/apex-ui-kit?color=a3e635)](./Licence.md)
 
-**118 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
+**117 free, animated UI components for React.** Pick one, add it with a single command, and the source lands in your project so you can read it and change anything.
 
 Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL where a component needs them.
 
@@ -15,7 +15,7 @@ Built with React, Tailwind CSS and Framer Motion, plus GSAP, Canvas and WebGL wh
 
 ## Why ApexUI
 
-- **118 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
+- **117 components** across backgrounds, cards, text effects, navigation, buttons, interactive UI, AI interfaces, loaders and maps.
 - **You own the code.** The CLI copies plain `.jsx` files into your project, no runtime package to keep in sync.
 - **Every docs page has** a live preview, a playground to tweak props, a Desktop / Tablet / Mobile preview, the full props table and a ready prompt you can paste into ChatGPT or Claude.
 - **Smooth on real devices.** Animations stick to transform and opacity, respect reduced motion, and work with mouse, touch and keyboard.
@@ -141,7 +141,6 @@ Every component's props, variants and copy-ready code are on its docs page.
 | [Pricing Cards](https://apex-ui.in/components/pricing-cards) | `pricing-cards` |
 | [Profile](https://apex-ui.in/components/profile) | `flip-profile`, `parallax-profile`, `profile-card` |
 | [Scroll Stack](https://apex-ui.in/components/scroll-stack) | `scroll-stack` |
-| [Smart Grid Card](https://apex-ui.in/components/smart-grid-card) | `smart-grid-card` |
 | [Spotlight Grid](https://apex-ui.in/components/spotlight-grid) | `spotlight-grid` |
 | [Swipe Cards](https://apex-ui.in/components/swipe-cards) | `swipe-cards` |
 | [Testimonials](https://apex-ui.in/components/testimonials) | `testimonials` |

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

@@ -1,4 +1,4 @@
-import React, { useId, useRef, useState } from "react";
+import React, { useId, useLayoutEffect, useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 
 /*
@@ -19,7 +19,21 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
     const [active, setActive] = useState(defaultTab ?? tabs[0]?.id);
     const [dir, setDir] = useState(1);
     const refs = useRef([]);
+    const root = useRef(null);
     const dark = theme !== "light";
+    // Compact tabs when the box itself is narrow (not the screen), so labels never get cut.
+    const [compact, setCompact] = useState(false);
+
+    useLayoutEffect(() => {
+        const el = root.current;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            setCompact(el.clientWidth / rem < 30);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
     const index = tabs.findIndex((t) => t.id === active);
     const current = tabs[index];
 
@@ -44,7 +58,7 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
     }[variant];
 
     return (
-        <div className={`w-full max-w-xl ${dark ? "text-white" : "text-neutral-900"} ${className}`}>
+        <div ref={root} className={`w-full max-w-xl ${dark ? "text-white" : "text-neutral-900"} ${className}`}>
             <div role="tablist" aria-orientation="horizontal" onKeyDown={onKeyDown} className={`relative flex overflow-x-auto [scrollbar-width:none] ${list}`}>
                 {tabs.map((t, i) => {
                     const on = t.id === active;
@@ -58,7 +72,7 @@ const AnimatedTabs = ({ tabs = DEFAULT_TABS, defaultTab, variant = "pill", accen
                             aria-controls={`${id}-panel`}
                             tabIndex={on ? 0 : -1}
                             onClick={() => select(i)}
-                            className={`relative flex-1 whitespace-nowrap px-3 py-2 text-[0.82rem] max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:px-4 sm:text-[0.88rem] font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                            className={`relative flex-1 whitespace-nowrap py-2 ${compact ? "px-2 text-[0.76rem]" : "px-4 text-[0.88rem]"} font-medium outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-current/40 ${variant === "underline" ? "pb-3" : variant === "pill" ? "rounded-full" : "rounded-lg"} ${on ? (variant === "pill" ? "text-neutral-950" : "") : dark ? "text-white/55 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                         >
                             {on && (
                                 <motion.span

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

@@ -94,7 +94,7 @@ const FlipClock = ({ mode = "seconds", target, seconds = 3 * 86400 + 4 * 3600 +
         // The clock is sized in em; on narrow screens the font shrinks with the
         // container (cqw) so every unit fits instead of being cut off. The min
         // width keeps it from collapsing inside a shrink-to-fit parent.
-        <div className="flex w-full justify-center" style={{ containerType: "inline-size", minWidth: `min(${(size * parts.length * 2.55).toFixed(2)}rem, 92vw)` }}>
+        <div className="flex w-full justify-center" style={{ containerType: "inline-size", minWidth: `min(${(size * parts.length * 2.55).toFixed(2)}rem, 100%)` }}>
         <div role="timer" aria-live="off" aria-label={parts.map(([l, v]) => `${v} ${l}`).join(", ")} className={`inline-flex items-start gap-[0.35em] font-mono font-bold ${className}`} style={{ fontSize: `min(${size}rem, ${(100 / (parts.length * 2.55)).toFixed(2)}cqw)` }}>
             {parts.map(([label, value], i) => (
                 <React.Fragment key={label}>

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

@@ -123,6 +123,20 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
     const gooRef = useRef(goo);
     const glowRef = useRef(theme === "light" ? 0 : 0.22);
     const dark = theme !== "light";
+    // Sized from the space it sits in (not the screen), so it fits narrow columns too.
+    const [size, setSize] = useState("lg");
+
+    useLayoutEffect(() => {
+        const el = bar.current?.parentElement?.parentElement;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const w = el.clientWidth / rem;
+            setSize(w < 22 ? "xs" : w < 34 ? "sm" : "lg");
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
 
     useEffect(() => {
         color.current = hexToRgb(accentColor);
@@ -289,7 +303,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
 
     return (
         <nav className={`relative inline-flex max-w-full ${className}`} aria-label="Main">
-            <div ref={bar} className={`relative flex items-center gap-0 rounded-full p-1 sm:gap-0.5 sm:p-1.5 ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
+            <div ref={bar} className={`relative flex items-center gap-0 rounded-full ${size === "lg" ? "gap-0.5 p-1.5" : "p-1"} ${dark ? "bg-neutral-950 ring-1 ring-white/10" : "bg-white shadow-sm ring-1 ring-black/10"}`}>
                 <canvas ref={canvas} aria-hidden="true" className="pointer-events-none absolute" style={{ left: -PAD, top: -PAD, display: fallback ? "none" : "block" }} />
                 {fallback && <span ref={fallbackPill} aria-hidden="true" className="pointer-events-none absolute rounded-full" style={{ background: accentColor }} />}
                 {items.map((item, i) => (
@@ -299,7 +313,7 @@ const GooeyNav = ({ items = DEFAULT_ITEMS, initialActive = 0, onChange, accentCo
                         href={item.href}
                         onClick={(e) => select(i, e)}
                         aria-current={i === active ? "page" : undefined}
-                        className={`relative z-[1] shrink-0 rounded-full px-2.5 py-2 text-[0.82rem] font-medium max-[380px]:px-2 max-[380px]:text-[0.76rem] sm:py-2.5 sm:text-[0.95rem] outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 sm:px-5 ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
+                        className={`relative z-[1] shrink-0 whitespace-nowrap rounded-full font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-current/30 ${{ lg: "px-5 py-2.5 text-[0.95rem]", sm: "px-2.5 py-2 text-[0.82rem]", xs: "px-2 py-2 text-[0.76rem]" }[size]} ${i === active ? "text-neutral-950" : dark ? "text-white/65 hover:text-white" : "text-neutral-500 hover:text-neutral-900"}`}
                     >
                         {item.label}
                     </a>

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

@@ -24,6 +24,7 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
     const list = items.length ? items : DEFAULT_ITEMS;
     const [active, setActive] = useState(Math.min(defaultActive, list.length - 1));
     const [vertical, setVertical] = useState(false);
+    const [panelW, setPanelW] = useState(416);
     const root = useRef(null);
     const hovering = useRef(false);
 
@@ -34,13 +35,20 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
         });
     };
 
-    // Stack vertically when the box is narrow (a container check, not the viewport).
+    // Stack vertically when the box is narrow (a container check, not the viewport),
+    // and work out how wide the open panel ends up so its text never overflows it.
     useEffect(() => {
         const el = root.current;
-        const ro = new ResizeObserver(([entry]) => setVertical(entry.contentRect.width < 520));
+        const ro = new ResizeObserver(([entry]) => {
+            const w = entry.contentRect.width;
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const stacked = w < 520;
+            setVertical(stacked);
+            setPanelW(stacked ? w : ((w - gap * rem * (list.length - 1)) * openRatio) / (openRatio + list.length - 1));
+        });
         ro.observe(el);
         return () => ro.disconnect();
-    }, []);
+    }, [gap, openRatio, list.length]);
 
     useEffect(() => {
         if (!autoPlay) return undefined;
@@ -101,8 +109,8 @@ const ImageAccordion = ({ items = DEFAULT_ITEMS, defaultActive = 0, autoPlay = 0
 
                         {/* Open: title and text rise in once the panel has room. A fixed width keeps them from re-wrapping as it grows. */}
                         <span
-                            className="absolute bottom-0 left-0 block w-[min(26rem,85vw)] p-[clamp(1rem,3cqw,1.75rem)] [backface-visibility:hidden]"
-                            style={{ opacity: on ? 1 : 0, transform: on ? "none" : "translateY(0.75rem)", transition: `opacity ${duration * 0.6}ms ${EASE} ${on ? duration * 0.35 : 0}ms, transform ${duration * 0.8}ms ${EASE} ${on ? duration * 0.3 : 0}ms` }}
+                            className="absolute bottom-0 left-0 block p-[clamp(1rem,3cqw,1.75rem)] [backface-visibility:hidden]"
+                            style={{ width: `min(26rem, ${Math.round(panelW)}px)`, opacity: on ? 1 : 0, transform: on ? "none" : "translateY(0.75rem)", transition: `opacity ${duration * 0.6}ms ${EASE} ${on ? duration * 0.35 : 0}ms, transform ${duration * 0.8}ms ${EASE} ${on ? duration * 0.3 : 0}ms` }}
                         >
                             <span className="block font-mono text-[0.7rem] tracking-[0.2em] text-white/60">{String(i + 1).padStart(2, "0")}</span>
                             <span className="mt-1 block truncate text-[1.6rem] font-bold leading-tight">{item.title}</span>

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

@@ -1,159 +1,176 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { gsap } from "gsap";
-const NavMenu = ({
-    indicatorColor = "#a3e635",
-    backgroundColor = "rgba(17, 24, 39, 0.5)",
-    activeColor = "#ffffff",
-    indicatorAnimation = "elastic",
-    onNavItemClick
-}) => {
-    const [activeIdx, setActiveIdx] = useState(0);
-    const navItemsRef = useRef([]);
-    const indicatorRef = useRef(null);
-    const navContainerRef = useRef(null);
-    useEffect(() => {
-        if (!navContainerRef.current) return;
-        gsap.fromTo(
-            navContainerRef.current,
-            { width: 0, opacity: 0 },
-            { width: "auto", opacity: 1, duration: 0.8, ease: "power2.out", delay: 0.5 }
-        );
-    }, []);
-
-    useEffect(() => {
-        const indicator = indicatorRef.current;
-        const el = navItemsRef.current[activeIdx];
-
-        if (!indicator || !el) return;
-
-        const getEase = () => {
-            switch (indicatorAnimation) {
-                case "spring": return "bounce.out";
-                case "power": return "power3.out";
-                case "elastic":
-                default: return "elastic.out(1, 0.6)";
-            }
-        };
-
-        const moveWithGSAP = () => {
-            const rect = el.getBoundingClientRect();
-            const parentRect = el.parentElement.getBoundingClientRect();
-            const left = rect.left - parentRect.left;
-            const width = rect.width;
-
-            gsap.to(indicator, {
-                x: left,
-                width,
-                duration: 0.5,
-                ease: getEase(),
-            });
-        };
-
-        const timeoutId = setTimeout(moveWithGSAP, 50);
-        return () => clearTimeout(timeoutId);
-
-    }, [activeIdx, indicatorAnimation]);
-
-    // Handle resize
-    useEffect(() => {
-        const handleResize = () => {
-            const el = navItemsRef.current[activeIdx];
-            if (el) {
-                const rect = el.getBoundingClientRect();
-                const parentRect = el.parentElement.getBoundingClientRect();
-                const left = rect.left - parentRect.left;
-                const width = rect.width;
-
-                gsap.set(indicatorRef.current, {
-                    x: left,
-                    width: width
-                });
-            }
-        };
-
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [activeIdx]);
-
-    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
-
-    return (
-        <nav
-            ref={navContainerRef}
-            className="rounded px-3 py-2 shadow-lg border border-white/10 overflow-hidden"
-            style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: backgroundColor ,  }}
-        >
-            <div
-                ref={indicatorRef}
-                className="absolute top-1.5 h-[calc(100%-0.75rem)] rounded-lg z-0 "
-                style={{ background: indicatorColor, opacity: 0.3 }}
-            />
-            <div className="relative flex gap-2 z-10 whitespace-nowrap">
-                {navItems.map((label, i) => (
-                    <button
-                        key={label}
-                        ref={(el) => (navItemsRef.current[i] = el)}
-                        onClick={() => {
-                            setActiveIdx(i);
-                            if (onNavItemClick) onNavItemClick();
-                        }}
-                        className={`nav-item px-6 py-2 text-base font-semibold rounded-full relative z-10 transition-colors duration-300 ${i === activeIdx ? '' : 'text-gray-400 hover:text-white'}`}
-                        style={{ color: i === activeIdx ? activeColor : undefined }}
-                    >
-                        {label}
-                    </button>
-                ))}
-            </div>
-        </nav>
-    );
-};
-
-
-// Responsive Wrapper Component
-const ResponsiveNavMenu = (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
-
-    return (
-        <nav className="flex items-center justify-center p-4 sticky top-0 left-0 w-full z-50 bg-transparent">
-            <div className="hidden md:flex w-full justify-center">
-                <NavMenu {...props} />
-            </div>
-
-            <div className="md:hidden flex w-full justify-end">
-                {/* Same backdrop as the desktop bar, so the icon stays visible on light pages too. */}
-                <button
-                    onClick={() => setIsOpen(!isOpen)}
-                    aria-label={isOpen ? "Close menu" : "Open menu"}
-                    className="rounded-full border border-white/10 p-2.5 text-white shadow-lg focus:outline-none"
-                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: props.backgroundColor ?? 'rgba(17, 24, 39, 0.7)' }}
-                >
-                    <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"} />
-                    </svg>
-                </button>
-            </div>
-
-            {isOpen && (
-                <div className="md:hidden absolute top-20 left-4 right-4 rounded-xl shadow-lg border border-white/10"
-                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: 'rgba(17, 24, 39, 0.7)' }}>
-                    <div className="flex flex-col items-center gap-2 p-4">
-                        {navItems.map((label) => (
-                            <button
-                                key={label}
-                                onClick={() => {
-                                    console.log(`${label} clicked`);
-                                    setIsOpen(false);
-                                }}
-                                className="w-full text-center px-6 py-3 text-lg font-semibold rounded-full text-gray-300 hover:text-white hover:bg-white/10 transition-colors duration-300"
-                            >
-                                {label}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </nav>
-    );
-};
+import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { gsap } from "gsap";
+const NavMenu = ({
+    indicatorColor = "#a3e635",
+    backgroundColor = "rgba(17, 24, 39, 0.5)",
+    activeColor = "#ffffff",
+    indicatorAnimation = "elastic",
+    onNavItemClick
+}) => {
+    const [activeIdx, setActiveIdx] = useState(0);
+    const navItemsRef = useRef([]);
+    const indicatorRef = useRef(null);
+    const navContainerRef = useRef(null);
+    useEffect(() => {
+        if (!navContainerRef.current) return;
+        gsap.fromTo(
+            navContainerRef.current,
+            { width: 0, opacity: 0 },
+            { width: "auto", opacity: 1, duration: 0.8, ease: "power2.out", delay: 0.5 }
+        );
+    }, []);
+
+    useEffect(() => {
+        const indicator = indicatorRef.current;
+        const el = navItemsRef.current[activeIdx];
+
+        if (!indicator || !el) return;
+
+        const getEase = () => {
+            switch (indicatorAnimation) {
+                case "spring": return "bounce.out";
+                case "power": return "power3.out";
+                case "elastic":
+                default: return "elastic.out(1, 0.6)";
+            }
+        };
+
+        const moveWithGSAP = () => {
+            const rect = el.getBoundingClientRect();
+            const parentRect = el.parentElement.getBoundingClientRect();
+            const left = rect.left - parentRect.left;
+            const width = rect.width;
+
+            gsap.to(indicator, {
+                x: left,
+                width,
+                duration: 0.5,
+                ease: getEase(),
+            });
+        };
+
+        const timeoutId = setTimeout(moveWithGSAP, 50);
+        return () => clearTimeout(timeoutId);
+
+    }, [activeIdx, indicatorAnimation]);
+
+    // Handle resize
+    useEffect(() => {
+        const handleResize = () => {
+            const el = navItemsRef.current[activeIdx];
+            if (el) {
+                const rect = el.getBoundingClientRect();
+                const parentRect = el.parentElement.getBoundingClientRect();
+                const left = rect.left - parentRect.left;
+                const width = rect.width;
+
+                gsap.set(indicatorRef.current, {
+                    x: left,
+                    width: width
+                });
+            }
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [activeIdx]);
+
+    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
+
+    return (
+        <nav
+            ref={navContainerRef}
+            className="relative rounded px-3 py-2 shadow-lg border border-white/10 overflow-hidden"
+            style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: backgroundColor ,  }}
+        >
+            <div
+                ref={indicatorRef}
+                className="absolute top-1.5 h-[calc(100%-0.75rem)] rounded-lg z-0 "
+                style={{ background: indicatorColor, opacity: 0.3 }}
+            />
+            <div className="relative flex gap-2 z-10 whitespace-nowrap">
+                {navItems.map((label, i) => (
+                    <button
+                        key={label}
+                        ref={(el) => (navItemsRef.current[i] = el)}
+                        onClick={() => {
+                            setActiveIdx(i);
+                            if (onNavItemClick) onNavItemClick();
+                        }}
+                        className={`nav-item px-6 py-2 text-base font-semibold rounded-full relative z-10 transition-colors duration-300 ${i === activeIdx ? '' : 'text-gray-400 hover:text-white'}`}
+                        style={{ color: i === activeIdx ? activeColor : undefined }}
+                    >
+                        {label}
+                    </button>
+                ))}
+            </div>
+        </nav>
+    );
+};
+
+
+// Responsive Wrapper Component
+const ResponsiveNavMenu = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const navItems = ['Home', 'Docs', 'UI Kit', 'Contact'];
+    // Switch to the menu button when the space it sits in is narrow (not the
+    // screen), so it also fits sidebars, preview frames and small columns.
+    const wrap = useRef(null);
+    const [narrow, setNarrow] = useState(false);
+
+    useLayoutEffect(() => {
+        const el = wrap.current;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            setNarrow(el.clientWidth / rem < 34);
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    return (
+        <nav ref={wrap} className="flex items-center justify-center p-4 sticky top-0 left-0 w-full z-50 bg-transparent">
+            {!narrow ? (
+                <div className="flex w-full justify-center">
+                    <NavMenu {...props} />
+                </div>
+            ) : (
+                <div className="flex w-full justify-end">
+                    {/* Same backdrop as the desktop bar, so the icon stays visible on light pages too. */}
+                    <button
+                        onClick={() => setIsOpen(!isOpen)}
+                        aria-label={isOpen ? "Close menu" : "Open menu"}
+                        className="rounded-full border border-white/10 p-2.5 text-white shadow-lg focus:outline-none"
+                        style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: props.backgroundColor ?? 'rgba(17, 24, 39, 0.7)' }}
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16m-7 6h7"} />
+                        </svg>
+                    </button>
+                </div>
+            )}
+
+            {narrow && isOpen && (
+                <div className="absolute top-20 left-4 right-4 rounded-xl shadow-lg border border-white/10"
+                    style={{ backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', background: 'rgba(17, 24, 39, 0.7)' }}>
+                    <div className="flex flex-col items-center gap-2 p-4">
+                        {navItems.map((label) => (
+                            <button
+                                key={label}
+                                onClick={() => {
+                                    setIsOpen(false);
+                                    props.onNavItemClick?.();
+                                }}
+                                className="w-full text-center px-6 py-3 text-lg font-semibold rounded-full text-gray-300 hover:text-white hover:bg-white/10 transition-colors duration-300"
+                            >
+                                {label}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </nav>
+    );
+};
 export default ResponsiveNavMenu;

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

@@ -1,120 +1,140 @@
-/* eslint-disable no-unused-vars */
-import React, { useState } from 'react';
-import { motion, AnimatePresence } from "framer-motion";
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-
-// --- Testimonials Component ---
-const Testimonials = ({ testimonials }) => {
-    const [activeIndex, setActiveIndex] = useState(0);
-
-    const handleNext = () => {
-        setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
-    };
-
-    const handlePrev = () => {
-        setActiveIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
-    };
-
-    // Animation variants for the text content
-    const textVariants = {
-        enter: { opacity: 0, y: 20, filter: "blur(5px)" },
-        center: { opacity: 1, y: 0, filter: "blur(0px)" },
-        exit: { opacity: 0, y: -20, filter: "blur(5px)" },
-    };
-
-    return (
-        <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, 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}
-                            variants={textVariants}
-                            initial="enter"
-                            animate="center"
-                            exit="exit"
-                            transition={{ duration: 0.4, ease: "easeInOut" }}
-                            className="w-full"
-                        >
-                            <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">"{testimonials[activeIndex].text}"</p>
-                        </motion.div>
-                    </AnimatePresence>
-                </div>
-
-                {/* Navigation Buttons with Microinteractions */}
-                <div className="flex items-center justify-center md:justify-start gap-4 mt-8">
-                    <motion.button
-                        onClick={handlePrev}
-                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-                    >
-                        <ArrowLeft size={20} />
-                    </motion.button>
-                    <motion.button
-                        onClick={handleNext}
-                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
-                    >
-                        <ArrowRight size={20} />
-                    </motion.button>
-                </div>
-            </div>
-
-            {/* Right Part: Stacked Images */}
-            <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;
-
-                    // Only render the top 4 cards for performance and visual clarity
-                    if (position > 3) return null;
-
-                    return (
-                        <motion.div
-                            key={testimonial.id || index}
-                            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,
-                                rotate: -4 + position * 4, // Add a fanned rotation effect
-                                left: `${position * 20}px`, // Fan out horizontally
-                                top: `${position * 10}px`, // Stagger vertically
-                                zIndex: testimonials.length - position,
-                                opacity: position === 0 ? 1 : 0.5, // Only top image is fully opaque
-                            }}
-                            transition={{
-                                type: 'spring',
-                                stiffness: 260,
-                                damping: 25,
-                            }}
-                        >
-                            <img
-                                src={testimonial.image}
-                                alt={testimonial.author}
-                                className="w-full h-full object-cover"
-                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/256x320/0f172a/a3e635?text=${testimonial.author.split(' ')[0]}`; }}
-                            />
-                        </motion.div>
-                    );
-                })}
-                </div>
-            </div>
-        </div>
-    );
-};
-
-
-
-export default Testimonials;
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { motion, AnimatePresence } from "framer-motion";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+
+// --- Testimonials Component ---
+const Testimonials = ({ testimonials }) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    // The layout follows the card's own width (not the screen), so it also
+    // fits sidebars, preview frames and narrow columns.
+    const root = useRef(null);
+    const [size, setSize] = useState("lg");
+
+    useLayoutEffect(() => {
+        const el = root.current;
+        if (!el) return undefined;
+        const ro = new ResizeObserver(() => {
+            const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+            const w = el.clientWidth / rem;
+            setSize(w < 26 ? "sm" : w < 44 ? "md" : "lg");
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, []);
+
+    const wide = size === "lg";
+    const small = size === "sm";
+
+    const handleNext = () => {
+        setActiveIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+    };
+
+    const handlePrev = () => {
+        setActiveIndex((prevIndex) => (prevIndex - 1 + testimonials.length) % testimonials.length);
+    };
+
+    // Animation variants for the text content
+    const textVariants = {
+        enter: { opacity: 0, y: 20, filter: "blur(5px)" },
+        center: { opacity: 1, y: 0, filter: "blur(0px)" },
+        exit: { opacity: 0, y: -20, filter: "blur(5px)" },
+    };
+
+    return (
+        <div ref={root} className={`w-full max-w-4xl mx-auto bg-slate-950 rounded-2xl border border-slate-800 grid items-center overflow-hidden ${wide ? "grid-cols-2 gap-12 p-12" : small ? "gap-6 p-5" : "gap-8 p-8"}`}>
+
+            {/* Left Part: Text Content and Navigation */}
+            <div className={`flex flex-col justify-center h-full ${wide ? "text-left order-1" : "text-center order-2"}`}>
+                {/* Title, subtitle and quote with animation; the min height keeps the buttons from jumping. */}
+                <div className={`relative ${small ? "min-h-[15rem]" : "min-h-[12rem]"}`}>
+                    <AnimatePresence initial={false} mode="wait">
+                        <motion.div
+                            key={activeIndex}
+                            variants={textVariants}
+                            initial="enter"
+                            animate="center"
+                            exit="exit"
+                            transition={{ duration: 0.4, ease: "easeInOut" }}
+                            className="w-full"
+                        >
+                            <h2 className={`${small ? "text-2xl" : "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">"{testimonials[activeIndex].text}"</p>
+                        </motion.div>
+                    </AnimatePresence>
+                </div>
+
+                {/* Navigation Buttons with Microinteractions */}
+                <div className={`flex items-center gap-4 ${wide ? "justify-start mt-8" : "justify-center mt-5"}`}>
+                    <motion.button
+                        onClick={handlePrev}
+                        aria-label="Previous testimonial"
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowLeft size={20} />
+                    </motion.button>
+                    <motion.button
+                        onClick={handleNext}
+                        aria-label="Next testimonial"
+                        className="bg-slate-800/80 hover:bg-slate-800 rounded-full p-3 transition-colors duration-300 text-slate-400 hover:text-lime-400 focus:outline-none"
+                        whileHover={{ scale: 1.1 }}
+                        whileTap={{ scale: 0.95 }}
+                        transition={{ type: 'spring', stiffness: 400, damping: 17 }}
+                    >
+                        <ArrowRight size={20} />
+                    </motion.button>
+                </div>
+            </div>
+
+            {/* Right Part: Stacked Images */}
+            <div className={`flex w-full items-center justify-center ${wide ? "order-2" : "order-1"}`}>
+                {/* Sized to the card plus the fan, so the stack stays centred and inside the panel. */}
+                <div className={`relative ${small ? "h-[calc(14rem+30px)] w-[calc(10.5rem+60px)]" : "h-[calc(20rem+30px)] 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;
+
+                    // Only render the top 4 cards for performance and visual clarity
+                    if (position > 3) return null;
+
+                    return (
+                        <motion.div
+                            key={testimonial.id || index}
+                            className={`absolute ${small ? "w-[10.5rem] h-56" : "w-64 h-80"} bg-slate-800 rounded-xl shadow-2xl overflow-hidden border-2 border-slate-700`}
+                            initial={false}
+                            animate={{
+                                scale: 1 - position * 0.08,
+                                rotate: -4 + position * 4, // Add a fanned rotation effect
+                                left: `${position * 20}px`, // Fan out horizontally
+                                top: `${position * 10}px`, // Stagger vertically
+                                zIndex: testimonials.length - position,
+                                opacity: position === 0 ? 1 : 0.5, // Only top image is fully opaque
+                            }}
+                            transition={{
+                                type: 'spring',
+                                stiffness: 260,
+                                damping: 25,
+                            }}
+                        >
+                            <img
+                                src={testimonial.image}
+                                alt={testimonial.author}
+                                className="w-full h-full object-cover"
+                                onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/256x320/0f172a/a3e635?text=${testimonial.author.split(' ')[0]}`; }}
+                            />
+                        </motion.div>
+                    );
+                })}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+
+export default Testimonials;

package/dist/cli/index.js

@@ -40,7 +40,6 @@ const componentMap = {
     "rain-background": "RainBackground",
     "ripple-background": "RippleBackground",
     "scroll-marquee": "ScrollMarquee",
-    "smart-grid-card": "SmartGridCard",
     "smoke-background": "SmokeBackground",
     "tooltip": "ToolTip",
     "tool-tip": "ToolTip",

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "apex-ui-kit",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "license": "MIT",
-  "description": "118 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
+  "description": "117 free, animated UI components for React, styled with Tailwind CSS. Add any of them with one CLI command.",
   "homepage": "https://apex-ui.in",
   "repository": {
     "type": "git",

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

@@ -1,243 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { gsap } from "gsap";
-import {
-    Box,
-    Settings,
-    Lock,
-    Sparkles,
-    Search,
-    LaptopMinimal,
-} from "lucide-react";
-
-const CARD_HEIGHT = 264;
-const CARD_EXPANDED_HEIGHT = 2 * CARD_HEIGHT + 10; // two rows plus the grid gap
-
-const SmartGridCard = ({
-    cards = defaultCards(),
-    mergeMap = {}, // Example: { 5: 2 }
-    borderColor = "cyan"
-}) => {
-    // Track screen width for responsive mergeMap logic
-    const [screenWidth, setScreenWidth] = useState(() => typeof window !== 'undefined' ? window.innerWidth : 1200);
-    useEffect(() => {
-        const handleResize = () => setScreenWidth(window.innerWidth);
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-    const isLargeScreen = screenWidth >= 1080;
-    const isThreeCol = screenWidth >= 1024;
-    const isTwoCol = screenWidth >= 768 && screenWidth < 1024;
-    const cardRefs = useRef({});
-    const [mousePos, setMousePos] = useState({});
-
-    useEffect(() => {
-        if (!isLargeScreen) return; // Only run mergeMap effect on large screens
-        // Defensive: never trigger a reload, only animate
-        if (Object.keys(mergeMap).length === 0) return; // No merges to process
-        // Animate cards based on mergeMap
-        Object.entries(mergeMap).forEach(([sourceId, targetId]) => {
-            const sourceEl = cardRefs.current[sourceId];
-            const targetEl = cardRefs.current[targetId];
-
-            if (targetEl) {
-                gsap.to(targetEl, {
-                    height: CARD_EXPANDED_HEIGHT,
-                    duration: 0.5,
-                    ease: "power2.out",
-                });
-            }
-
-            if (sourceEl) {
-                gsap.to(sourceEl, {
-                    opacity: 0,
-                    scale: 0.9,
-                    duration: 0.3,
-                    onComplete: () => {
-                        if (sourceEl) sourceEl.style.display = "none";
-                    },
-                });
-            }
-        });
-        // No reload, no navigation, no window.location
-        return () => { };
-    }, [mergeMap, isLargeScreen]);
-
-    const handleMouseMove = (e, id) => {
-        const bounds = e.currentTarget.getBoundingClientRect();
-        const x = e.clientX - bounds.left;
-        const y = e.clientY - bounds.top;
-        setMousePos((prev) => ({
-            ...prev,
-            [id]: { x, y },
-        }));
-    };
-
-    const getCardStyle = (id) => {
-        // <768px: 1 column
-        if (screenWidth < 768) {
-            return {
-                display: 'block',
-                height: CARD_HEIGHT,
-                gridColumnStart: 'auto',
-                gridRowStart: 'auto',
-            };
-        }
-        // 768px - 1023px: 2 columns
-        if (isTwoCol) {
-            const col = ((id - 1) % 2) + 1;
-            const row = Math.floor((id - 1) / 2) + 1;
-            return {
-                display: 'block',
-                height: CARD_HEIGHT,
-                gridColumnStart: col,
-                gridRowStart: row,
-            };
-        }
-        // 1024px and above: 3 columns (mergeMap only for >=1080px)
-        if (isThreeCol) {
-            if (screenWidth < 1080) {
-                const col = ((id - 1) % 3) + 1;
-                const row = Math.floor((id - 1) / 3) + 1;
-                return {
-                    display: 'block',
-                    height: CARD_HEIGHT,
-                    gridColumnStart: col,
-                    gridRowStart: row,
-                };
-            }
-            // >=1080px: 3 columns, merging enabled
-            const isMerged = mergeMap[id];
-            const isTarget = Object.values(mergeMap).includes(id);
-            if (isMerged) return { display: "none" };
-            const col = ((id - 1) % 3) + 1;
-            const row = Math.floor((id - 1) / 3) + 1;
-            return {
-                gridColumnStart: col,
-                gridRowStart: row,
-                height: isTarget ? CARD_EXPANDED_HEIGHT : CARD_HEIGHT,
-            };
-        }
-    };
-
-    return (
-        <div
-            className={`grid gap-2 justify-center p-4 w-full ${screenWidth >= 1024 ? 'grid-cols-3' : screenWidth >= 768 ? 'grid-cols-2' : 'grid-cols-1'}`}
-            style={screenWidth >= 1024 ? {
-                // minmax(0, …): columns share the container's width instead of overflowing it.
-                gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
-                gridTemplateRows: `repeat(2, ${CARD_HEIGHT}px)`
-            } : screenWidth >= 768 ? {
-                gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
-                gridTemplateRows: `repeat(3, ${CARD_HEIGHT}px)`
-            } : {}}
-        >
-            {cards.map((card) => {
-                const style = getCardStyle(card.id);
-                if (style.display === "none") return null;
-
-                const pos = mousePos[card.id] || { x: 0, y: 0 };
-
-                return (
-                    <div
-                        key={card.id}
-                        ref={(el) => (cardRefs.current[card.id] = el)}
-                        style={style}
-                        onMouseMove={(e) => handleMouseMove(e, card.id)}
-                        className="group relative overflow-hidden p-[1px] rounded-2xl bg-zinc-900 border border-zinc-700 shadow-2xl transition-all duration-500"
-                    >
-                        {/* Mouse Glow Border */}
-                        <div
-                            className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition duration-300"
-                            style={{
-                                maskImage: `radial-gradient(circle at ${pos.x}px ${pos.y}px, white 40%, transparent 80%)`,
-                                WebkitMaskImage: `radial-gradient(circle at ${pos.x}px ${pos.y}px, white 40%, transparent 80%)`,
-                                background: `radial-gradient(circle at ${pos.x}px ${pos.y}px, ${borderColor}, transparent 80%)`,
-                                borderRadius: "1rem",
-                            }}
-                        />
-
-                        {/* Card Content */}
-                        {/* Compact enough that the button always fits inside the fixed card height */}
-                        <div className="relative z-10 flex flex-col items-start h-full w-full p-5 rounded-2xl bg-zinc-900 text-white gap-3">
-                            <div className="flex h-11 w-11 shrink-0 items-center justify-center border border-dashed rounded-lg border-purple-600">{card.icon}</div>
-                            <div className="min-h-0">
-                                <h3 className="text-lg font-bold mb-1.5 break-words leading-tight">{card.title}</h3>
-                                <p className="text-sm leading-relaxed w-full text-white/70 break-words line-clamp-3">{card.description}</p>
-                            </div>
-                            <button
-                                type="button"
-                                className="mt-auto shrink-0 relative overflow-hidden whitespace-nowrap px-4 py-2 rounded-lg border border-purple-400/60 text-white transition hover:text-white bg-black/20 group flex items-center gap-2 text-sm"
-                            >
-                                <span className="relative z-10 flex items-center gap-2">
-                                    {card.buttonText}
-                                    <span className="arrow-icon transition-transform duration-200 group-hover:translate-x-2 flex items-center">
-                                        <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                                            <path d="M5 12h14M13 6l6 6-6 6" />
-                                        </svg>
-                                    </span>
-                                </span>
-                                <span
-                                    className="absolute bottom-0 left-0 w-full h-full opacity-0 group-hover:opacity-100 origin-bottom transition-all ease-in-out duration-500 rounded-lg"
-                                    style={{
-                                        background: "radial-gradient(circle at bottom, purple, transparent 69%)",
-                                        mixBlendMode: "screen",
-                                    }}
-                                />
-                            </button>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
-
-// Default Cards
-function defaultCards() {
-    return [
-        {
-            id: 1,
-            icon: <LaptopMinimal className="w-6 h-6 text-white" />,
-            title: "Responsive Layout",
-            description: "Works across all screen sizes with smooth animation.",
-            buttonText: "Learn More",
-        },
-        {
-            id: 2,
-            icon: <Box className="w-6 h-6 text-white" />,
-            title: "Composable Components",
-            description: "Each card is modular and easy to customize.",
-            buttonText: "Explore",
-        },
-        {
-            id: 3,
-            icon: <Settings className="w-6 h-6 text-white" />,
-            title: "Easy Config",
-            description: "Use props like mergeMap to control logic.",
-            buttonText: "Settings",
-        },
-        {
-            id: 4,
-            icon: <Lock className="w-6 h-6 text-white" />,
-            title: "Secure UI",
-            description: "Perfect for dashboards and secure apps.",
-            buttonText: "Secure Now",
-        },
-        {
-            id: 5,
-            icon: <Sparkles className="w-6 h-6 text-white" />,
-            title: "Edge Effects",
-            description: "Glowing borders that follow your mouse.",
-            buttonText: "Try It",
-        },
-        {
-            id: 6,
-            icon: <Search className="w-6 h-6 text-white" />,
-            title: "Fast Search",
-            description: "Lightning-fast component navigation.",
-            buttonText: "Search",
-        },
-    ];
-}
-
-export default SmartGridCard;