aura-ui-library 1.0.9 → 1.0.10

package/dist/index.js

@@ -244,6 +244,15 @@ var Navbar = ({
   const linksRef = (0, import_react2.useRef)([]);
   const buttonRef = (0, import_react2.useRef)(null);
   const menuOverlayRef = (0, import_react2.useRef)(null);
+  const inRouter = (0, import_react_router_dom2.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom2.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react2.useEffect)(() => {
     const handleResize = () => {
       const mobile = window.innerWidth <= 1024;
@@ -422,23 +431,36 @@ var Navbar = ({
       onMouseEnter: (e) => import_gsap2.gsap.to(e.currentTarget, { scale: 1.02 }),
       onMouseLeave: (e) => import_gsap2.gsap.to(e.currentTarget, { scale: 1 })
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom2.Link, { to: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText)
-  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.navLinks }, links.map((link, i) => /* @__PURE__ */ import_react2.default.createElement(
-    import_react_router_dom2.NavLink,
-    {
-      key: link.path,
-      to: link.path,
+    inRouter ? /* @__PURE__ */ import_react2.default.createElement(import_react_router_dom2.Link, { to: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText) : /* @__PURE__ */ import_react2.default.createElement("a", { href: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText)
+  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.navLinks }, links.map((link, i) => {
+    const linkProps = {
       ref: (el) => linksRef.current[i] = el,
       onMouseEnter: handleMouseEnter,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      style: ({ isActive }) => ({
-        ...styles.link,
-        color: isActive ? accentColor : textColor
-      })
-    },
-    link.label
-  ))), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actions }, !isMobile && /* @__PURE__ */ import_react2.default.createElement(
+      key: link.path
+    };
+    return inRouter ? /* @__PURE__ */ import_react2.default.createElement(
+      import_react_router_dom2.NavLink,
+      {
+        to: link.path,
+        ...linkProps,
+        style: ({ isActive }) => ({
+          ...styles.link,
+          color: isActive ? accentColor : textColor
+        })
+      },
+      link.label
+    ) : /* @__PURE__ */ import_react2.default.createElement(
+      "a",
+      {
+        href: link.path,
+        ...linkProps,
+        style: styles.link
+      },
+      link.label
+    );
+  })), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actions }, !isMobile && /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
       ref: buttonRef,
@@ -449,7 +471,7 @@ var Navbar = ({
     },
     "Start Building",
     /* @__PURE__ */ import_react2.default.createElement(import_fi.FiArrowUpRight, { size: 18 })
-  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.menuToggle, onClick: () => setIsMenuOpen(!isMenuOpen) }, isMenuOpen ? /* @__PURE__ */ import_react2.default.createElement(import_fi.FiX, null) : /* @__PURE__ */ import_react2.default.createElement(import_fi.FiMenu, null)))), isMobile && isMenuOpen && /* @__PURE__ */ import_react2.default.createElement("div", { ref: menuOverlayRef, style: styles.mobileOverlay }, links.map((link, i) => /* @__PURE__ */ import_react2.default.createElement(
+  ), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.menuToggle, onClick: () => setIsMenuOpen(!isMenuOpen) }, isMenuOpen ? /* @__PURE__ */ import_react2.default.createElement(import_fi.FiX, null) : /* @__PURE__ */ import_react2.default.createElement(import_fi.FiMenu, null)))), isMobile && isMenuOpen && /* @__PURE__ */ import_react2.default.createElement("div", { ref: menuOverlayRef, style: styles.mobileOverlay }, links.map((link, i) => inRouter ? /* @__PURE__ */ import_react2.default.createElement(
     import_react_router_dom2.Link,
     {
       key: link.path,
@@ -464,6 +486,21 @@ var Navbar = ({
       }
     },
     link.label
+  ) : /* @__PURE__ */ import_react2.default.createElement(
+    "a",
+    {
+      key: link.path,
+      href: link.path,
+      onClick: () => setIsMenuOpen(false),
+      style: {
+        fontSize: "32px",
+        fontWeight: "800",
+        color: textColor,
+        textDecoration: "none",
+        letterSpacing: "-1px"
+      }
+    },
+    link.label
   )), /* @__PURE__ */ import_react2.default.createElement(
     "button",
     {
@@ -500,7 +537,15 @@ var Spotlight = ({
   const descriptionRef = (0, import_react3.useRef)(null);
   const ctaRef = (0, import_react3.useRef)(null);
   const iconsRef = (0, import_react3.useRef)([]);
-  const navigate = (0, import_react_router_dom3.useNavigate)();
+  const inRouter = (0, import_react_router_dom3.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom3.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react3.useEffect)(() => {
     const container = containerRef.current;
     const spotlight = spotlightRef.current;
@@ -679,7 +724,7 @@ var Spotlight = ({
       style: { display: "inline-block" },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => navigate(ctaLink)
+      onClick: () => ctaLink && handleNavigate(ctaLink)
     },
     /* @__PURE__ */ import_react3.default.createElement("button", { style: styles.cta }, ctaText, /* @__PURE__ */ import_react3.default.createElement(import_fi2.FiArrowUpRight, { size: 22 }))
   )));
@@ -730,7 +775,15 @@ var Carousel = ({
   const navRef = (0, import_react4.useRef)(null);
   const progressRef = (0, import_react4.useRef)(null);
   const timerRef = (0, import_react4.useRef)(null);
-  const navigate = (0, import_react_router_dom4.useNavigate)();
+  const inRouter = (0, import_react_router_dom4.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom4.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   const isAnimating = (0, import_react4.useRef)(false);
   const moveSlide = (0, import_react4.useCallback)((nextIndex, direction = 1) => {
     if (isAnimating.current || nextIndex === index) return;
@@ -1008,7 +1061,7 @@ var Carousel = ({
           style: styles.cta,
           onMouseEnter: (e) => e.currentTarget.style.filter = "brightness(1.1)",
           onMouseLeave: (e) => e.currentTarget.style.filter = "brightness(1)",
-          onClick: () => slide.path && navigate(slide.path)
+          onClick: () => slide.path && handleNavigate(slide.path)
         },
         slide.cta,
         /* @__PURE__ */ import_react4.default.createElement(import_fi3.FiArrowRight, { size: 20 })
@@ -1079,7 +1132,15 @@ var ProductCard = ({
   const infoRef = (0, import_react5.useRef)(null);
   const actionsRef = (0, import_react5.useRef)(null);
   const buttonRefs = (0, import_react5.useRef)([]);
-  const navigate = (0, import_react_router_dom5.useNavigate)();
+  const inRouter = (0, import_react_router_dom5.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom5.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react5.useEffect)(() => {
     const ctx = import_gsap5.gsap.context(() => {
       const tl = import_gsap5.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -1269,7 +1330,7 @@ var ProductCard = ({
       style: styles.card,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => product.path && navigate(product.path)
+      onClick: () => product.path && handleNavigate(product.path)
     },
     /* @__PURE__ */ import_react5.default.createElement("div", { style: styles.imageContainer }, /* @__PURE__ */ import_react5.default.createElement(
       "img",
@@ -1355,7 +1416,15 @@ var Image = ({
   const overlayRef = (0, import_react6.useRef)(null);
   const revealRef = (0, import_react6.useRef)(null);
   const textRef = (0, import_react6.useRef)(null);
-  const navigate = (0, import_react_router_dom6.useNavigate)();
+  const inRouter = (0, import_react_router_dom6.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom6.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   const [isLoaded, setIsLoaded] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
     if (!reveal) return;
@@ -1501,7 +1570,7 @@ var Image = ({
       style: styles.container,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      onClick: () => to && navigate(to)
+      onClick: () => to && handleNavigate(to)
     },
     reveal && /* @__PURE__ */ import_react6.default.createElement("div", { ref: revealRef, style: styles.reveal }),
     /* @__PURE__ */ import_react6.default.createElement(
@@ -1564,6 +1633,7 @@ var TextWriting = ({
   showCursor = true,
   scramble = true,
   loop = true,
+  autoStart = true,
   onComplete
 }) => {
   const [currentTextIndex, setCurrentTextIndex] = (0, import_react7.useState)(0);
@@ -1574,15 +1644,17 @@ var TextWriting = ({
   const timelineRef = (0, import_react7.useRef)(null);
   const characters = (0, import_react7.useMemo)(() => "!@#$%^&*()_+{}|:<>?abcdefghijklmnopqrstuvwxyz0123456789", []);
   const getRandomChar = () => characters[Math.floor(Math.random() * characters.length)];
-  const animateText = (targetText) => {
+  (0, import_react7.useEffect)(() => {
+    if (!autoStart) return;
+    const targetText = texts[currentTextIndex];
+    if (!targetText) return;
     if (timelineRef.current) timelineRef.current.kill();
     const ctx = import_gsap7.gsap.context(() => {
       const tl = import_gsap7.gsap.timeline({
         onComplete: () => {
           if (loop) {
             import_gsap7.gsap.delayedCall(delay, () => {
-              const nextIndex = (currentTextIndex + 1) % texts.length;
-              setCurrentTextIndex(nextIndex);
+              setCurrentTextIndex((prev) => (prev + 1) % texts.length);
             });
           }
           if (onComplete) onComplete();
@@ -1590,7 +1662,6 @@ var TextWriting = ({
       });
       timelineRef.current = tl;
       const textArray = targetText.split("");
-      let frame = 0;
       tl.to({}, {
         duration: textArray.length * speed,
         onUpdate: function() {
@@ -1601,7 +1672,7 @@ var TextWriting = ({
             if (i < charCount) {
               display += textArray[i];
             } else if (i === charCount && scramble) {
-              display += getRandomChar();
+              display += characters[Math.floor(Math.random() * characters.length)];
             } else {
               display += "";
             }
@@ -1611,20 +1682,16 @@ var TextWriting = ({
       });
       tl.fromTo(
         containerRef.current,
-        { scale: 0.98, opacity: 0.8 },
-        { scale: 1, opacity: 1, duration: 0.4, ease: "power2.out" },
+        { scale: 0.98, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.6, ease: "power2.out" },
         0
       );
     }, containerRef);
-    return ctx;
-  };
-  (0, import_react7.useEffect)(() => {
-    const ctx = animateText(texts[currentTextIndex]);
     return () => {
       ctx.revert();
       if (timelineRef.current) timelineRef.current.kill();
     };
-  }, [currentTextIndex]);
+  }, [currentTextIndex, texts, loop, delay, speed, scramble, autoStart]);
   (0, import_react7.useEffect)(() => {
     if (!showCursor) return;
     const ctx = import_gsap7.gsap.context(() => {
@@ -1701,10 +1768,15 @@ var TextWriting = ({
     "div",
     {
       ref: containerRef,
-      style: styles.container,
+      style: { ...styles.container, opacity: 1 },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => animateText(texts[currentTextIndex])
+      onClick: () => {
+        var _a;
+        if (!((_a = timelineRef.current) == null ? void 0 : _a.isActive())) {
+          setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+        }
+      }
     },
     /* @__PURE__ */ import_react7.default.createElement("div", { style: styles.iconWrap }, /* @__PURE__ */ import_react7.default.createElement(import_fi6.FiTerminal, { size: 20 })),
     /* @__PURE__ */ import_react7.default.createElement("div", { ref: textRef, style: styles.text }, currentText, /* @__PURE__ */ import_react7.default.createElement("span", { ref: cursorRef, style: styles.cursor })),
@@ -1738,7 +1810,15 @@ var SideBar = ({
   const sidebarRef = (0, import_react8.useRef)(null);
   const itemsRef = (0, import_react8.useRef)([]);
   const indicatorRef = (0, import_react8.useRef)(null);
-  const navigate = (0, import_react_router_dom7.useNavigate)();
+  const inRouter = (0, import_react_router_dom7.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom7.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react8.useEffect)(() => {
     const ctx = import_gsap8.gsap.context(() => {
       const tl = import_gsap8.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -1913,22 +1993,36 @@ var SideBar = ({
       onMouseLeave: () => setIsExpanded(false)
     },
     /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.logoContainer }, /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.logo }, /* @__PURE__ */ import_react8.default.createElement(import_fi7.FiLayers, { size: 22 })), /* @__PURE__ */ import_react8.default.createElement("span", { style: styles.logoText }, "Aura UI")),
-    /* @__PURE__ */ import_react8.default.createElement("nav", { style: styles.nav }, /* @__PURE__ */ import_react8.default.createElement("div", { ref: indicatorRef, style: styles.indicator }), items.map((item, index) => /* @__PURE__ */ import_react8.default.createElement(
-      import_react_router_dom7.NavLink,
-      {
-        key: item.path,
-        to: item.path,
+    /* @__PURE__ */ import_react8.default.createElement("nav", { style: styles.nav }, /* @__PURE__ */ import_react8.default.createElement("div", { ref: indicatorRef, style: styles.indicator }), items.map((item, index) => {
+      const itemProps = {
         ref: (el) => itemsRef.current[index] = el,
-        style: ({ isActive }) => ({
-          ...styles.item,
-          ...isActive ? styles.activeItem : {}
-        }),
         onMouseEnter: (e) => handleItemHover(e, index),
-        onMouseLeave: () => handleItemLeave(index)
-      },
-      /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
-      /* @__PURE__ */ import_react8.default.createElement("span", { style: styles.label }, item.label)
-    ))),
+        onMouseLeave: () => handleItemLeave(index),
+        key: item.path
+      };
+      return inRouter ? /* @__PURE__ */ import_react8.default.createElement(
+        import_react_router_dom7.NavLink,
+        {
+          to: item.path,
+          ...itemProps,
+          style: ({ isActive }) => ({
+            ...styles.item,
+            ...isActive ? styles.activeItem : {}
+          })
+        },
+        /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
+        /* @__PURE__ */ import_react8.default.createElement("span", { style: styles.label }, item.label)
+      ) : /* @__PURE__ */ import_react8.default.createElement(
+        "a",
+        {
+          href: item.path,
+          ...itemProps,
+          style: styles.item
+        },
+        /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
+        /* @__PURE__ */ import_react8.default.createElement("span", { style: styles.label }, item.label)
+      );
+    })),
     /* @__PURE__ */ import_react8.default.createElement("div", { style: styles.footer }, /* @__PURE__ */ import_react8.default.createElement(
       "button",
       {
@@ -1994,7 +2088,15 @@ var ProjectShowCase = ({
   const lineRef = (0, import_react9.useRef)(null);
   const cardsRef = (0, import_react9.useRef)([]);
   const nodesRef = (0, import_react9.useRef)([]);
-  const navigate = (0, import_react_router_dom8.useNavigate)();
+  const inRouter = (0, import_react_router_dom8.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom8.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react9.useEffect)(() => {
     const ctx = import_gsap9.gsap.context(() => {
       const tl = import_gsap9.gsap.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -2161,7 +2263,7 @@ var ProjectShowCase = ({
       style: styles.card,
       onMouseEnter: (e) => import_gsap9.gsap.to(e.currentTarget, { y: -10, boxShadow: "0 30px 60px rgba(0,0,0,0.5)" }),
       onMouseLeave: (e) => import_gsap9.gsap.to(e.currentTarget, { y: 0, boxShadow: "none" }),
-      onClick: () => navigate(project.link)
+      onClick: () => project.link && handleNavigate(project.link)
     },
     /* @__PURE__ */ import_react9.default.createElement("span", { style: styles.year }, project.year),
     /* @__PURE__ */ import_react9.default.createElement("h3", { style: styles.title }, project.title),
@@ -2411,7 +2513,15 @@ var PinterestGrid = ({
 }) => {
   const containerRef = (0, import_react11.useRef)(null);
   const itemsRef = (0, import_react11.useRef)([]);
-  const navigate = (0, import_react_router_dom9.useNavigate)();
+  const inRouter = (0, import_react_router_dom9.useInRouterContext)();
+  const navigate = inRouter ? (0, import_react_router_dom9.useNavigate)() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   (0, import_react11.useEffect)(() => {
     const ctx = import_gsap11.gsap.context(() => {
       import_gsap11.gsap.fromTo(
@@ -2556,7 +2666,7 @@ var PinterestGrid = ({
         import_gsap11.gsap.to(e.currentTarget.firstChild, { scale: 1, duration: 0.8 });
         e.currentTarget.querySelector(".overlay").style.opacity = 0;
       },
-      onClick: () => item.path && navigate(item.path)
+      onClick: () => item.path && handleNavigate(item.path)
     },
     /* @__PURE__ */ import_react11.default.createElement(
       "img",

package/dist/index.mjs

@@ -173,7 +173,7 @@ var Button = ({
 
 // src/components/Navbar/Navbar.jsx
 import React2, { useRef as useRef2, useEffect as useEffect2, useState } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useInRouterContext, useNavigate as useNavigate2 } from "react-router-dom";
 import { gsap as gsap2 } from "gsap";
 import { FiMenu, FiX, FiArrowRight, FiArrowUpRight } from "react-icons/fi";
 var Navbar = ({
@@ -199,6 +199,15 @@ var Navbar = ({
   const linksRef = useRef2([]);
   const buttonRef = useRef2(null);
   const menuOverlayRef = useRef2(null);
+  const inRouter = useInRouterContext();
+  const navigate = inRouter ? useNavigate2() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect2(() => {
     const handleResize = () => {
       const mobile = window.innerWidth <= 1024;
@@ -377,23 +386,36 @@ var Navbar = ({
       onMouseEnter: (e) => gsap2.to(e.currentTarget, { scale: 1.02 }),
       onMouseLeave: (e) => gsap2.to(e.currentTarget, { scale: 1 })
     },
-    /* @__PURE__ */ React2.createElement(Link, { to: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText)
-  ), /* @__PURE__ */ React2.createElement("div", { style: styles.navLinks }, links.map((link, i) => /* @__PURE__ */ React2.createElement(
-    NavLink,
-    {
-      key: link.path,
-      to: link.path,
+    inRouter ? /* @__PURE__ */ React2.createElement(Link, { to: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText) : /* @__PURE__ */ React2.createElement("a", { href: "/", style: { ...styles.logo, color: "inherit" } }, /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText)
+  ), /* @__PURE__ */ React2.createElement("div", { style: styles.navLinks }, links.map((link, i) => {
+    const linkProps = {
       ref: (el) => linksRef.current[i] = el,
       onMouseEnter: handleMouseEnter,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      style: ({ isActive }) => ({
-        ...styles.link,
-        color: isActive ? accentColor : textColor
-      })
-    },
-    link.label
-  ))), /* @__PURE__ */ React2.createElement("div", { style: styles.actions }, !isMobile && /* @__PURE__ */ React2.createElement(
+      key: link.path
+    };
+    return inRouter ? /* @__PURE__ */ React2.createElement(
+      NavLink,
+      {
+        to: link.path,
+        ...linkProps,
+        style: ({ isActive }) => ({
+          ...styles.link,
+          color: isActive ? accentColor : textColor
+        })
+      },
+      link.label
+    ) : /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        href: link.path,
+        ...linkProps,
+        style: styles.link
+      },
+      link.label
+    );
+  })), /* @__PURE__ */ React2.createElement("div", { style: styles.actions }, !isMobile && /* @__PURE__ */ React2.createElement(
     "button",
     {
       ref: buttonRef,
@@ -404,7 +426,7 @@ var Navbar = ({
     },
     "Start Building",
     /* @__PURE__ */ React2.createElement(FiArrowUpRight, { size: 18 })
-  ), /* @__PURE__ */ React2.createElement("div", { style: styles.menuToggle, onClick: () => setIsMenuOpen(!isMenuOpen) }, isMenuOpen ? /* @__PURE__ */ React2.createElement(FiX, null) : /* @__PURE__ */ React2.createElement(FiMenu, null)))), isMobile && isMenuOpen && /* @__PURE__ */ React2.createElement("div", { ref: menuOverlayRef, style: styles.mobileOverlay }, links.map((link, i) => /* @__PURE__ */ React2.createElement(
+  ), /* @__PURE__ */ React2.createElement("div", { style: styles.menuToggle, onClick: () => setIsMenuOpen(!isMenuOpen) }, isMenuOpen ? /* @__PURE__ */ React2.createElement(FiX, null) : /* @__PURE__ */ React2.createElement(FiMenu, null)))), isMobile && isMenuOpen && /* @__PURE__ */ React2.createElement("div", { ref: menuOverlayRef, style: styles.mobileOverlay }, links.map((link, i) => inRouter ? /* @__PURE__ */ React2.createElement(
     Link,
     {
       key: link.path,
@@ -419,6 +441,21 @@ var Navbar = ({
       }
     },
     link.label
+  ) : /* @__PURE__ */ React2.createElement(
+    "a",
+    {
+      key: link.path,
+      href: link.path,
+      onClick: () => setIsMenuOpen(false),
+      style: {
+        fontSize: "32px",
+        fontWeight: "800",
+        color: textColor,
+        textDecoration: "none",
+        letterSpacing: "-1px"
+      }
+    },
+    link.label
   )), /* @__PURE__ */ React2.createElement(
     "button",
     {
@@ -432,7 +469,7 @@ var Navbar = ({
 
 // src/components/Spotlight/Spotlight.jsx
 import React3, { useRef as useRef3, useEffect as useEffect3, useState as useState2 } from "react";
-import { useNavigate as useNavigate2 } from "react-router-dom";
+import { useNavigate as useNavigate3, useInRouterContext as useInRouterContext2 } from "react-router-dom";
 import { gsap as gsap3 } from "gsap";
 import { FiArrowUpRight as FiArrowUpRight2, FiZap, FiTarget, FiStar } from "react-icons/fi";
 var Spotlight = ({
@@ -455,7 +492,15 @@ var Spotlight = ({
   const descriptionRef = useRef3(null);
   const ctaRef = useRef3(null);
   const iconsRef = useRef3([]);
-  const navigate = useNavigate2();
+  const inRouter = useInRouterContext2();
+  const navigate = inRouter ? useNavigate3() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect3(() => {
     const container = containerRef.current;
     const spotlight = spotlightRef.current;
@@ -634,7 +679,7 @@ var Spotlight = ({
       style: { display: "inline-block" },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => navigate(ctaLink)
+      onClick: () => ctaLink && handleNavigate(ctaLink)
     },
     /* @__PURE__ */ React3.createElement("button", { style: styles.cta }, ctaText, /* @__PURE__ */ React3.createElement(FiArrowUpRight2, { size: 22 }))
   )));
@@ -642,7 +687,7 @@ var Spotlight = ({
 
 // src/components/Carousel/Carousel.jsx
 import React4, { useRef as useRef4, useEffect as useEffect4, useState as useState3, useCallback } from "react";
-import { useNavigate as useNavigate3 } from "react-router-dom";
+import { useNavigate as useNavigate4, useInRouterContext as useInRouterContext3 } from "react-router-dom";
 import { gsap as gsap4 } from "gsap";
 import { FiChevronLeft, FiChevronRight, FiArrowRight as FiArrowRight2 } from "react-icons/fi";
 var Carousel = ({
@@ -685,7 +730,15 @@ var Carousel = ({
   const navRef = useRef4(null);
   const progressRef = useRef4(null);
   const timerRef = useRef4(null);
-  const navigate = useNavigate3();
+  const inRouter = useInRouterContext3();
+  const navigate = inRouter ? useNavigate4() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   const isAnimating = useRef4(false);
   const moveSlide = useCallback((nextIndex, direction = 1) => {
     if (isAnimating.current || nextIndex === index) return;
@@ -963,7 +1016,7 @@ var Carousel = ({
           style: styles.cta,
           onMouseEnter: (e) => e.currentTarget.style.filter = "brightness(1.1)",
           onMouseLeave: (e) => e.currentTarget.style.filter = "brightness(1)",
-          onClick: () => slide.path && navigate(slide.path)
+          onClick: () => slide.path && handleNavigate(slide.path)
         },
         slide.cta,
         /* @__PURE__ */ React4.createElement(FiArrowRight2, { size: 20 })
@@ -1007,7 +1060,7 @@ var Carousel = ({
 
 // src/components/ProductCard/ProductCard.jsx
 import React5, { useRef as useRef5, useEffect as useEffect5, useState as useState4 } from "react";
-import { useNavigate as useNavigate4 } from "react-router-dom";
+import { useNavigate as useNavigate5, useInRouterContext as useInRouterContext4 } from "react-router-dom";
 import { gsap as gsap5 } from "gsap";
 import { FiShoppingCart, FiEye, FiHeart, FiArrowRight as FiArrowRight3 } from "react-icons/fi";
 var ProductCard = ({
@@ -1034,7 +1087,15 @@ var ProductCard = ({
   const infoRef = useRef5(null);
   const actionsRef = useRef5(null);
   const buttonRefs = useRef5([]);
-  const navigate = useNavigate4();
+  const inRouter = useInRouterContext4();
+  const navigate = inRouter ? useNavigate5() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect5(() => {
     const ctx = gsap5.context(() => {
       const tl = gsap5.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -1224,7 +1285,7 @@ var ProductCard = ({
       style: styles.card,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => product.path && navigate(product.path)
+      onClick: () => product.path && handleNavigate(product.path)
     },
     /* @__PURE__ */ React5.createElement("div", { style: styles.imageContainer }, /* @__PURE__ */ React5.createElement(
       "img",
@@ -1286,7 +1347,7 @@ var ProductCard = ({
 
 // src/components/Image/Image.jsx
 import React6, { useRef as useRef6, useEffect as useEffect6, useState as useState5 } from "react";
-import { useNavigate as useNavigate5 } from "react-router-dom";
+import { useNavigate as useNavigate6, useInRouterContext as useInRouterContext5 } from "react-router-dom";
 import { gsap as gsap6 } from "gsap";
 import { FiMaximize, FiLink, FiInfo, FiDownload } from "react-icons/fi";
 var Image = ({
@@ -1310,7 +1371,15 @@ var Image = ({
   const overlayRef = useRef6(null);
   const revealRef = useRef6(null);
   const textRef = useRef6(null);
-  const navigate = useNavigate5();
+  const inRouter = useInRouterContext5();
+  const navigate = inRouter ? useNavigate6() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   const [isLoaded, setIsLoaded] = useState5(false);
   useEffect6(() => {
     if (!reveal) return;
@@ -1456,7 +1525,7 @@ var Image = ({
       style: styles.container,
       onMouseMove: handleMouseMove,
       onMouseLeave: handleMouseLeave,
-      onClick: () => to && navigate(to)
+      onClick: () => to && handleNavigate(to)
     },
     reveal && /* @__PURE__ */ React6.createElement("div", { ref: revealRef, style: styles.reveal }),
     /* @__PURE__ */ React6.createElement(
@@ -1519,6 +1588,7 @@ var TextWriting = ({
   showCursor = true,
   scramble = true,
   loop = true,
+  autoStart = true,
   onComplete
 }) => {
   const [currentTextIndex, setCurrentTextIndex] = useState6(0);
@@ -1529,15 +1599,17 @@ var TextWriting = ({
   const timelineRef = useRef7(null);
   const characters = useMemo(() => "!@#$%^&*()_+{}|:<>?abcdefghijklmnopqrstuvwxyz0123456789", []);
   const getRandomChar = () => characters[Math.floor(Math.random() * characters.length)];
-  const animateText = (targetText) => {
+  useEffect7(() => {
+    if (!autoStart) return;
+    const targetText = texts[currentTextIndex];
+    if (!targetText) return;
     if (timelineRef.current) timelineRef.current.kill();
     const ctx = gsap7.context(() => {
       const tl = gsap7.timeline({
         onComplete: () => {
           if (loop) {
             gsap7.delayedCall(delay, () => {
-              const nextIndex = (currentTextIndex + 1) % texts.length;
-              setCurrentTextIndex(nextIndex);
+              setCurrentTextIndex((prev) => (prev + 1) % texts.length);
             });
           }
           if (onComplete) onComplete();
@@ -1545,7 +1617,6 @@ var TextWriting = ({
       });
       timelineRef.current = tl;
       const textArray = targetText.split("");
-      let frame = 0;
       tl.to({}, {
         duration: textArray.length * speed,
         onUpdate: function() {
@@ -1556,7 +1627,7 @@ var TextWriting = ({
             if (i < charCount) {
               display += textArray[i];
             } else if (i === charCount && scramble) {
-              display += getRandomChar();
+              display += characters[Math.floor(Math.random() * characters.length)];
             } else {
               display += "";
             }
@@ -1566,20 +1637,16 @@ var TextWriting = ({
       });
       tl.fromTo(
         containerRef.current,
-        { scale: 0.98, opacity: 0.8 },
-        { scale: 1, opacity: 1, duration: 0.4, ease: "power2.out" },
+        { scale: 0.98, opacity: 0 },
+        { scale: 1, opacity: 1, duration: 0.6, ease: "power2.out" },
         0
       );
     }, containerRef);
-    return ctx;
-  };
-  useEffect7(() => {
-    const ctx = animateText(texts[currentTextIndex]);
     return () => {
       ctx.revert();
       if (timelineRef.current) timelineRef.current.kill();
     };
-  }, [currentTextIndex]);
+  }, [currentTextIndex, texts, loop, delay, speed, scramble, autoStart]);
   useEffect7(() => {
     if (!showCursor) return;
     const ctx = gsap7.context(() => {
@@ -1656,10 +1723,15 @@ var TextWriting = ({
     "div",
     {
       ref: containerRef,
-      style: styles.container,
+      style: { ...styles.container, opacity: 1 },
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      onClick: () => animateText(texts[currentTextIndex])
+      onClick: () => {
+        var _a;
+        if (!((_a = timelineRef.current) == null ? void 0 : _a.isActive())) {
+          setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+        }
+      }
     },
     /* @__PURE__ */ React7.createElement("div", { style: styles.iconWrap }, /* @__PURE__ */ React7.createElement(FiTerminal, { size: 20 })),
     /* @__PURE__ */ React7.createElement("div", { ref: textRef, style: styles.text }, currentText, /* @__PURE__ */ React7.createElement("span", { ref: cursorRef, style: styles.cursor })),
@@ -1669,7 +1741,7 @@ var TextWriting = ({
 
 // src/components/SideBar/SideBar.jsx
 import React8, { useRef as useRef8, useEffect as useEffect8, useState as useState7 } from "react";
-import { NavLink as NavLink2, useNavigate as useNavigate6 } from "react-router-dom";
+import { NavLink as NavLink2, useNavigate as useNavigate7, useInRouterContext as useInRouterContext6 } from "react-router-dom";
 import { gsap as gsap8 } from "gsap";
 import {
   FiHome,
@@ -1702,7 +1774,15 @@ var SideBar = ({
   const sidebarRef = useRef8(null);
   const itemsRef = useRef8([]);
   const indicatorRef = useRef8(null);
-  const navigate = useNavigate6();
+  const inRouter = useInRouterContext6();
+  const navigate = inRouter ? useNavigate7() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect8(() => {
     const ctx = gsap8.context(() => {
       const tl = gsap8.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -1877,22 +1957,36 @@ var SideBar = ({
       onMouseLeave: () => setIsExpanded(false)
     },
     /* @__PURE__ */ React8.createElement("div", { style: styles.logoContainer }, /* @__PURE__ */ React8.createElement("div", { style: styles.logo }, /* @__PURE__ */ React8.createElement(FiLayers, { size: 22 })), /* @__PURE__ */ React8.createElement("span", { style: styles.logoText }, "Aura UI")),
-    /* @__PURE__ */ React8.createElement("nav", { style: styles.nav }, /* @__PURE__ */ React8.createElement("div", { ref: indicatorRef, style: styles.indicator }), items.map((item, index) => /* @__PURE__ */ React8.createElement(
-      NavLink2,
-      {
-        key: item.path,
-        to: item.path,
+    /* @__PURE__ */ React8.createElement("nav", { style: styles.nav }, /* @__PURE__ */ React8.createElement("div", { ref: indicatorRef, style: styles.indicator }), items.map((item, index) => {
+      const itemProps = {
         ref: (el) => itemsRef.current[index] = el,
-        style: ({ isActive }) => ({
-          ...styles.item,
-          ...isActive ? styles.activeItem : {}
-        }),
         onMouseEnter: (e) => handleItemHover(e, index),
-        onMouseLeave: () => handleItemLeave(index)
-      },
-      /* @__PURE__ */ React8.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
-      /* @__PURE__ */ React8.createElement("span", { style: styles.label }, item.label)
-    ))),
+        onMouseLeave: () => handleItemLeave(index),
+        key: item.path
+      };
+      return inRouter ? /* @__PURE__ */ React8.createElement(
+        NavLink2,
+        {
+          to: item.path,
+          ...itemProps,
+          style: ({ isActive }) => ({
+            ...styles.item,
+            ...isActive ? styles.activeItem : {}
+          })
+        },
+        /* @__PURE__ */ React8.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
+        /* @__PURE__ */ React8.createElement("span", { style: styles.label }, item.label)
+      ) : /* @__PURE__ */ React8.createElement(
+        "a",
+        {
+          href: item.path,
+          ...itemProps,
+          style: styles.item
+        },
+        /* @__PURE__ */ React8.createElement("div", { style: styles.icon }, renderIcon(item.icon)),
+        /* @__PURE__ */ React8.createElement("span", { style: styles.label }, item.label)
+      );
+    })),
     /* @__PURE__ */ React8.createElement("div", { style: styles.footer }, /* @__PURE__ */ React8.createElement(
       "button",
       {
@@ -1914,7 +2008,7 @@ var SideBar = ({
 
 // src/components/ProjectShowCase/ProjectShowCase.jsx
 import React9, { useRef as useRef9, useEffect as useEffect9 } from "react";
-import { useNavigate as useNavigate7 } from "react-router-dom";
+import { useNavigate as useNavigate8, useInRouterContext as useInRouterContext7 } from "react-router-dom";
 import { gsap as gsap9 } from "gsap";
 import {
   FiExternalLink,
@@ -1965,7 +2059,15 @@ var ProjectShowCase = ({
   const lineRef = useRef9(null);
   const cardsRef = useRef9([]);
   const nodesRef = useRef9([]);
-  const navigate = useNavigate7();
+  const inRouter = useInRouterContext7();
+  const navigate = inRouter ? useNavigate8() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect9(() => {
     const ctx = gsap9.context(() => {
       const tl = gsap9.timeline({ defaults: { ease: easing, duration: animationDuration } });
@@ -2132,7 +2234,7 @@ var ProjectShowCase = ({
       style: styles.card,
       onMouseEnter: (e) => gsap9.to(e.currentTarget, { y: -10, boxShadow: "0 30px 60px rgba(0,0,0,0.5)" }),
       onMouseLeave: (e) => gsap9.to(e.currentTarget, { y: 0, boxShadow: "none" }),
-      onClick: () => navigate(project.link)
+      onClick: () => project.link && handleNavigate(project.link)
     },
     /* @__PURE__ */ React9.createElement("span", { style: styles.year }, project.year),
     /* @__PURE__ */ React9.createElement("h3", { style: styles.title }, project.title),
@@ -2369,7 +2471,7 @@ var Skills = ({
 
 // src/components/PinterestGrid/PinterestGrid.jsx
 import React11, { useRef as useRef11, useEffect as useEffect11, useState as useState8 } from "react";
-import { useNavigate as useNavigate8 } from "react-router-dom";
+import { useNavigate as useNavigate9, useInRouterContext as useInRouterContext8 } from "react-router-dom";
 import { gsap as gsap11 } from "gsap";
 import { FiHeart as FiHeart2, FiShare2, FiMaximize2, FiPlus } from "react-icons/fi";
 var PinterestGrid = ({
@@ -2391,7 +2493,15 @@ var PinterestGrid = ({
 }) => {
   const containerRef = useRef11(null);
   const itemsRef = useRef11([]);
-  const navigate = useNavigate8();
+  const inRouter = useInRouterContext8();
+  const navigate = inRouter ? useNavigate9() : null;
+  const handleNavigate = (path) => {
+    if (navigate) {
+      navigate(path);
+    } else {
+      window.location.assign(path);
+    }
+  };
   useEffect11(() => {
     const ctx = gsap11.context(() => {
       gsap11.fromTo(
@@ -2536,7 +2646,7 @@ var PinterestGrid = ({
         gsap11.to(e.currentTarget.firstChild, { scale: 1, duration: 0.8 });
         e.currentTarget.querySelector(".overlay").style.opacity = 0;
       },
-      onClick: () => item.path && navigate(item.path)
+      onClick: () => item.path && handleNavigate(item.path)
     },
     /* @__PURE__ */ React11.createElement(
       "img",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aura-ui-library",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A modern and customizable UI library for React applications.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",