apex-ui-kit 2.10.0 → 2.12.0

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/OrbitIcons/OrbitIcons.jsx

@@ -148,7 +148,7 @@ const OrbitIcons = ({ rings = DEFAULT_RINGS, size = 28, tilt = 0.55, speed = 1,
                 return (
                     <div key={idx} ref={(e) => (nodes.current[idx] = e)} className="group absolute left-1/2 top-1/2 will-change-transform">
                         <div
-                            className="grid place-items-center rounded-2xl border border-white/10 bg-neutral-900/90 text-white shadow-[0_10px_30px_-12px_rgba(0,0,0,0.7)] backdrop-blur transition-colors duration-300 group-hover:border-[var(--orbit-accent)]"
+                            className="grid place-items-center rounded-2xl border border-white/10 bg-neutral-900/90 text-white transition-colors duration-300 group-hover:border-[var(--orbit-accent)]"
                             style={{ width: "var(--orbit-item, 2.75rem)", aspectRatio: "1" }}
                             title={it.label}
                         >

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

@@ -25,53 +25,54 @@ const ParallaxCard = ({ cardData = [], tiltEnable, glareEnable, scale, perspecti
 
             if (!cardElement) return;
 
+            // quickTo builds each tween once and just retargets it, instead of
+            // creating six new tweens on every mouse move.
+            const to = (el, prop, duration) => (el ? gsap.quickTo(el, prop, { duration, ease: "power3.out" }) : () => {});
+            const card = { rx: to(cardElement, "rotationX", 0.8), ry: to(cardElement, "rotationY", 0.8), s: to(cardElement, "scale", 0.8) };
+            const layers = [
+                [titleElement, 0.8, 0.6],
+                [imageElement, 1.5, 0.7],
+                [descElement, 1.2, 0.8],
+                [buttonElement, 1.1, 0.9],
+                [linkElement, 1.1, 0.9],
+            ]
+                .filter(([el]) => el)
+                .map(([el, k, d]) => ({ k, x: to(el, "x", d), y: to(el, "y", d) }));
+            let rect = null;
+
+            const handleMouseEnter = () => {
+                rect = cardElement.getBoundingClientRect();
+            };
             const handleMouseMove = (e) => {
                 if (!tiltEnable) return;
-                const { left, top, width, height } = cardElement.getBoundingClientRect();
-                const x = e.clientX - left;
-                const y = e.clientY - top;
-                const rotateX = (y / height - 0.5) * -30;
-                const rotateY = (x / width - 0.5) * 30;
-
-                gsap.to(cardElement, {
-                    duration: 1,
-                    rotationX: rotateX,
-                    rotationY: rotateY,
-                    scale: scale,
-                    ease: "power3.out",
+                const r = rect ?? (rect = cardElement.getBoundingClientRect());
+                const rotateX = ((e.clientY - r.top) / r.height - 0.5) * -30;
+                const rotateY = ((e.clientX - r.left) / r.width - 0.5) * 30;
+                card.rx(rotateX);
+                card.ry(rotateY);
+                card.s(scale);
+                layers.forEach((l) => {
+                    l.x(rotateY * l.k);
+                    l.y(-rotateX * l.k);
                 });
-
-                if (titleElement) gsap.to(titleElement, { duration: 0.7, x: rotateY * 0.8, y: -rotateX * 0.8 });
-                if (imageElement) gsap.to(imageElement, { duration: 0.8, x: rotateY * 1.5, y: -rotateX * 1.5 });
-                if (descElement) gsap.to(descElement, { duration: 0.9, x: rotateY * 1.2, y: -rotateX * 1.2 });
-                if (buttonElement) gsap.to(buttonElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
-                if (linkElement) gsap.to(linkElement, { duration: 1, x: rotateY * 1.1, y: -rotateX * 1.1 });
             };
 
             const handleMouseLeave = () => {
-                if (tiltEnable) {
-                    gsap.to(cardElement, {
-                        duration: 1.2,
-                        rotationX: 0,
-                        rotationY: 0,
-                        scale: 1,
-                        ease: "elastic.out(1, 0.5)",
-                    });
-                    gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean), {
-                        duration: 1.2,
-                        x: 0,
-                        y: 0,
-                        ease: "elastic.out(1, 0.5)",
-                    });
-                }
+                rect = null;
+                if (!tiltEnable) return;
+                gsap.to(cardElement, { duration: 1.2, rotationX: 0, rotationY: 0, scale: 1, ease: "elastic.out(1, 0.5)", overwrite: "auto" });
+                gsap.to([titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean), { duration: 1.2, x: 0, y: 0, ease: "elastic.out(1, 0.5)", overwrite: "auto" });
             };
 
+            cardElement.addEventListener("mouseenter", handleMouseEnter);
             cardElement.addEventListener("mousemove", handleMouseMove, { passive: true });
             cardElement.addEventListener("mouseleave", handleMouseLeave);
 
             cleanups.push(() => {
+                cardElement.removeEventListener("mouseenter", handleMouseEnter);
                 cardElement.removeEventListener("mousemove", handleMouseMove);
                 cardElement.removeEventListener("mouseleave", handleMouseLeave);
+                gsap.killTweensOf([cardElement, titleElement, imageElement, descElement, buttonElement, linkElement].filter(Boolean));
             });
         });
         return () => cleanups.forEach((fn) => fn());