aura-ui-library 1.0.28 → 1.0.29

package/dist/index.js

@@ -258,9 +258,20 @@ var import_gsap2 = require("gsap");
 var import_fi = require("react-icons/fi");
 var Navbar = ({
   logoText = "AURA",
+  showBadge = true,
+  variant = "overlay",
+  // "overlay" | "classic"
   links = [
     { label: "Home", path: "/" },
-    { label: "Products", path: "/products" },
+    {
+      label: "Products",
+      path: "/products",
+      children: [
+        { label: "New Arrivals", path: "/new" },
+        { label: "Best Sellers", path: "/best" },
+        { label: "Accessories", path: "/accessories" }
+      ]
+    },
     { label: "Workspace", path: "/workspace" },
     { label: "Pricing", path: "/pricing" }
   ],
@@ -274,27 +285,36 @@ var Navbar = ({
     email: "hello@aura-ui.dev",
     address: "123 Innovation Drive, SF"
   },
+  // E-commerce Triggers
+  showSearch = false,
+  onSearch = () => console.log("Search clicked"),
+  showCart = false,
+  cartCount = 0,
+  onCartClick = () => console.log("Cart clicked"),
+  showUser = false,
+  onUserClick = () => console.log("User clicked"),
+  // Theme & Styling
   accentColor = "#6366f1",
   theme = "dark",
   // "dark" | "light"
   transparent = false,
-  // Set to true to make navbar transparent until scrolled
   style = {},
   animationDuration = 1.2,
   easing = "expo.inOut",
   linkSize = "clamp(42px, 7vw, 100px)"
-  // Option to change navlink size
 }) => {
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
   const [isScrolled, setIsScrolled] = (0, import_react2.useState)(false);
   const [isMobile, setIsMobile] = (0, import_react2.useState)(false);
   const [hoverIndex, setHoverIndex] = (0, import_react2.useState)(null);
+  const [expandedOverlay, setExpandedOverlay] = (0, import_react2.useState)(null);
   const inRouter = (0, import_react_router_dom2.useInRouterContext)();
   const navigate = inRouter ? (0, import_react_router_dom2.useNavigate)() : null;
   const location = inRouter ? (0, import_react_router_dom2.useLocation)() : { pathname: "/" };
   const overlayRef = (0, import_react2.useRef)(null);
   const linksContainerRef = (0, import_react2.useRef)(null);
   const infoContainerRef = (0, import_react2.useRef)(null);
+  const desktopDropdownRefs = (0, import_react2.useRef)({});
   const isLight2 = theme === "light";
   const bgMain = isLight2 ? "#ffffff" : "#050505";
   const textMain = isLight2 ? "#0f172a" : "#ffffff";
@@ -343,34 +363,70 @@ var Navbar = ({
       }
     } else {
       document.body.style.overflow = "";
-      const tl = import_gsap2.gsap.timeline();
-      tl.to(overlayRef.current, {
+      import_gsap2.gsap.to(overlayRef.current, {
         clipPath: "circle(0% at 95% 40px)",
         pointerEvents: "none",
         duration: animationDuration * 0.7,
         ease: "expo.inOut"
       });
+      setExpandedOverlay(null);
     }
     return () => {
       document.body.style.overflow = "";
     };
   }, [isOpen, animationDuration, easing, prefersReducedMotion]);
+  const handleDropdownEnter = (idx) => {
+    if (desktopDropdownRefs.current[idx]) {
+      import_gsap2.gsap.killTweensOf(desktopDropdownRefs.current[idx]);
+      import_gsap2.gsap.to(desktopDropdownRefs.current[idx], {
+        opacity: 1,
+        y: 10,
+        pointerEvents: "auto",
+        visibility: "visible",
+        duration: 0.3,
+        ease: "power2.out"
+      });
+    }
+  };
+  const handleDropdownLeave = (idx) => {
+    if (desktopDropdownRefs.current[idx]) {
+      import_gsap2.gsap.to(desktopDropdownRefs.current[idx], {
+        opacity: 0,
+        y: 0,
+        pointerEvents: "none",
+        visibility: "hidden",
+        duration: 0.2,
+        ease: "power2.in"
+      });
+    }
+  };
   const handleNavigation = (path, e) => {
     e.preventDefault();
     if (location.pathname === path) {
       setIsOpen(false);
       return;
     }
-    setIsOpen(false);
-    setTimeout(() => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => {
+        if (navigate) {
+          navigate(path);
+          window.scrollTo(0, 0);
+        } else {
+          window.location.href = path;
+        }
+      }, animationDuration * 0.7 * 1e3);
+    } else {
       if (navigate) {
         navigate(path);
         window.scrollTo(0, 0);
       } else {
         window.location.href = path;
       }
-    }, animationDuration * 0.7 * 1e3);
+    }
   };
+  const showHamburger = isMobile || variant === "overlay";
+  const showDesktopLinks = variant === "classic" && !isMobile;
   const styles = {
     header: {
       position: "fixed",
@@ -399,7 +455,6 @@ var Navbar = ({
       letterSpacing: "1px",
       textDecoration: "none",
       color: textMain,
-      // Text logic handles contrast via theme
       zIndex: 1001,
       cursor: "pointer",
       willChange: "transform",
@@ -412,6 +467,86 @@ var Navbar = ({
       backgroundColor: accentColor,
       boxShadow: `0 0 15px ${accentColor}88`
     },
+    desktopNav: {
+      display: "flex",
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "30px"
+    },
+    desktopLinkWrapper: {
+      position: "relative",
+      padding: "10px 0"
+    },
+    desktopLink: {
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "15px",
+      fontWeight: "600",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      transition: "color 0.3s"
+    },
+    desktopDropdown: {
+      position: "absolute",
+      top: "100%",
+      left: "50%",
+      transform: "translateX(-50%) translateY(0)",
+      backgroundColor: bgMain,
+      border: `1px solid ${borderCol}`,
+      borderRadius: "16px",
+      padding: "8px",
+      minWidth: "200px",
+      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      opacity: 0,
+      visibility: "hidden",
+      pointerEvents: "none",
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px"
+    },
+    dropdownItem: {
+      padding: "12px 16px",
+      borderRadius: "10px",
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "14px",
+      fontWeight: "500",
+      transition: "background-color 0.2s, color 0.2s"
+    },
+    rightActions: {
+      display: "flex",
+      alignItems: "center",
+      gap: "20px",
+      zIndex: 1001
+    },
+    iconBtn: {
+      fontSize: "22px",
+      color: textMain,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      transition: "transform 0.2s ease, color 0.2s ease"
+    },
+    cartBadge: {
+      position: "absolute",
+      top: "-6px",
+      right: "-8px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      fontSize: "10px",
+      fontWeight: "800",
+      minWidth: "16px",
+      height: "16px",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "0 4px"
+    },
     hamburgerBtn: {
       position: "relative",
       width: "48px",
@@ -424,7 +559,6 @@ var Navbar = ({
       alignItems: "center",
       gap: "6px",
       cursor: "pointer",
-      zIndex: 1001,
       border: `1px solid ${isOpen ? borderCol : "transparent"}`,
       transition: "all 0.4s ease"
     },
@@ -432,7 +566,6 @@ var Navbar = ({
       width: "22px",
       height: "2px",
       backgroundColor: textMain,
-      // Uses theme for color
       borderRadius: "2px",
       transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
       transformOrigin: "center"
@@ -441,22 +574,21 @@ var Navbar = ({
       position: "fixed",
       top: 0,
       left: 0,
-      width: "100vw",
+      width: "100%",
       height: "100vh",
       backgroundColor: bgMain,
       zIndex: 999,
       clipPath: "circle(0% at 95% 40px)",
       pointerEvents: "none",
       display: "flex",
-      // Switch to flex for bulletproof layout
       flexDirection: isMobile ? "column" : "row",
       justifyContent: isMobile ? "flex-start" : "space-between",
       alignItems: isMobile ? "flex-start" : "center",
       padding: isMobile ? "120px 8% 60px" : "100px 10%",
       boxSizing: "border-box",
       fontFamily: '"Inter", -apple-system, sans-serif',
-      overflowY: isMobile ? "auto" : "hidden"
-      // Allow scroll on mobile if items overflow
+      overflowY: isMobile ? "auto" : "none"
+      // Prevent scroll lock bugs on desktop
     },
     linksArea: {
       display: "flex",
@@ -465,7 +597,12 @@ var Navbar = ({
       width: isMobile ? "100%" : "60%",
       marginBottom: isMobile ? "60px" : "0"
     },
-    linkItem: {
+    overlayLinkItem: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    },
+    overlayLinkMain: {
       display: "flex",
       alignItems: "center",
       gap: "20px",
@@ -481,6 +618,23 @@ var Navbar = ({
       textTransform: "uppercase",
       lineHeight: "1"
     },
+    accordionContent: {
+      display: "flex",
+      flexDirection: "column",
+      paddingLeft: "2%",
+      borderLeft: `2px solid ${borderCol}`,
+      marginLeft: "1%",
+      marginTop: "10px",
+      gap: "15px",
+      overflow: "hidden"
+    },
+    accordionLink: {
+      fontSize: "clamp(20px, 3vw, 32px)",
+      fontWeight: "600",
+      color: textMuted,
+      textDecoration: "none",
+      transition: "color 0.3s ease"
+    },
     infoArea: {
       display: "flex",
       flexDirection: "column",
@@ -526,7 +680,80 @@ var Navbar = ({
       transition: "all 0.3s ease"
     }
   };
-  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("header", { style: styles.header }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText), /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("header", { style: styles.header }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      key: idx,
+      style: styles.desktopLinkWrapper,
+      onMouseEnter: () => handleDropdownEnter(idx),
+      onMouseLeave: () => handleDropdownLeave(idx)
+    },
+    /* @__PURE__ */ import_react2.default.createElement(
+      "a",
+      {
+        href: link.path,
+        style: { ...styles.desktopLink, color: location.pathname === link.path ? accentColor : textMain },
+        onClick: (e) => {
+          if (!link.children) handleNavigation(link.path, e);
+        }
+      },
+      link.label,
+      link.children && /* @__PURE__ */ import_react2.default.createElement(import_fi.FiChevronDown, { style: { marginTop: "2px" }, size: 16 })
+    ),
+    link.children && /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        ref: (el) => desktopDropdownRefs.current[idx] = el,
+        style: styles.desktopDropdown
+      },
+      link.children.map((child, cIdx) => /* @__PURE__ */ import_react2.default.createElement(
+        "a",
+        {
+          key: cIdx,
+          href: child.path,
+          style: styles.dropdownItem,
+          onClick: (e) => handleNavigation(child.path, e),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)";
+            e.currentTarget.style.color = accentColor;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+            e.currentTarget.style.color = textMain;
+          }
+        },
+        child.label
+      ))
+    )
+  ))), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.rightActions }, showSearch && /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onSearch,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_fi.FiSearch, null)
+  ), showUser && /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onUserClick,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_fi.FiUser, null)
+  ), showCart && /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onCartClick,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ import_react2.default.createElement(import_fi.FiShoppingBag, null),
+    cartCount > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.cartBadge }, cartCount)
+  ), showHamburger && /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       style: styles.hamburgerBtn,
@@ -544,27 +771,28 @@ var Navbar = ({
         }
       }
     },
-    /* @__PURE__ */ import_react2.default.createElement("div", { style: {
-      ...styles.line,
-      transform: isOpen ? "translateY(4px) rotate(45deg)" : "none"
-    } }),
-    /* @__PURE__ */ import_react2.default.createElement("div", { style: {
-      ...styles.line,
-      transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none"
-    } })
-  )), /* @__PURE__ */ import_react2.default.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ import_react2.default.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(4px) rotate(45deg)" : "none" } }),
+    /* @__PURE__ */ import_react2.default.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none" } })
+  ))), /* @__PURE__ */ import_react2.default.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ import_react2.default.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
     const isHovered = hoverIndex === idx;
     const isAnyHovered = hoverIndex !== null;
     const isActiveRoute = location.pathname === link.path;
-    return /* @__PURE__ */ import_react2.default.createElement(
+    const isExpanded = expandedOverlay === idx;
+    return /* @__PURE__ */ import_react2.default.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ import_react2.default.createElement(
       "a",
       {
-        key: idx,
         href: link.path,
-        onClick: (e) => handleNavigation(link.path, e),
+        onClick: (e) => {
+          if (link.children) {
+            e.preventDefault();
+            setExpandedOverlay(isExpanded ? null : idx);
+          } else {
+            handleNavigation(link.path, e);
+          }
+        },
         onMouseEnter: () => setHoverIndex(idx),
         onMouseLeave: () => setHoverIndex(null),
-        style: styles.linkItem
+        style: styles.overlayLinkMain
       },
       /* @__PURE__ */ import_react2.default.createElement("span", { style: {
         ...styles.linkText,
@@ -573,7 +801,18 @@ var Navbar = ({
         transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
         transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
       } }, link.label),
-      /* @__PURE__ */ import_react2.default.createElement(
+      link.children ? /* @__PURE__ */ import_react2.default.createElement(
+        import_fi.FiChevronDown,
+        {
+          style: {
+            fontSize: "clamp(24px, 3vw, 40px)",
+            color: accentColor,
+            opacity: isHovered ? 1 : 0,
+            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "all 0.5s ease"
+          }
+        }
+      ) : /* @__PURE__ */ import_react2.default.createElement(
         import_fi.FiArrowUpRight,
         {
           style: {
@@ -585,7 +824,29 @@ var Navbar = ({
           }
         }
       )
-    );
+    ), link.children && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
+      ...styles.accordionContent,
+      maxHeight: isExpanded ? "500px" : "0px",
+      opacity: isExpanded ? 1 : 0,
+      transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
+    } }, link.children.map((child, cIdx) => /* @__PURE__ */ import_react2.default.createElement(
+      "a",
+      {
+        key: cIdx,
+        href: child.path,
+        onClick: (e) => handleNavigation(child.path, e),
+        style: styles.accordionLink,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.color = accentColor;
+          e.currentTarget.style.paddingLeft = "10px";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.color = textMuted;
+          e.currentTarget.style.paddingLeft = "0px";
+        }
+      },
+      child.label
+    ))));
   })), /* @__PURE__ */ import_react2.default.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ import_react2.default.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ import_react2.default.createElement(
     "a",
     {

package/dist/index.mjs

@@ -199,12 +199,32 @@ var Button = ({
 import React2, { useRef as useRef2, useEffect as useEffect2, useState } from "react";
 import { Link, useInRouterContext as useInRouterContext2, useNavigate as useNavigate2, useLocation } from "react-router-dom";
 import { gsap as gsap2 } from "gsap";
-import { FiArrowUpRight, FiTwitter, FiGithub, FiLinkedin } from "react-icons/fi";
+import {
+  FiArrowUpRight,
+  FiTwitter,
+  FiGithub,
+  FiLinkedin,
+  FiSearch,
+  FiShoppingBag,
+  FiUser,
+  FiChevronDown
+} from "react-icons/fi";
 var Navbar = ({
   logoText = "AURA",
+  showBadge = true,
+  variant = "overlay",
+  // "overlay" | "classic"
   links = [
     { label: "Home", path: "/" },
-    { label: "Products", path: "/products" },
+    {
+      label: "Products",
+      path: "/products",
+      children: [
+        { label: "New Arrivals", path: "/new" },
+        { label: "Best Sellers", path: "/best" },
+        { label: "Accessories", path: "/accessories" }
+      ]
+    },
     { label: "Workspace", path: "/workspace" },
     { label: "Pricing", path: "/pricing" }
   ],
@@ -218,27 +238,36 @@ var Navbar = ({
     email: "hello@aura-ui.dev",
     address: "123 Innovation Drive, SF"
   },
+  // E-commerce Triggers
+  showSearch = false,
+  onSearch = () => console.log("Search clicked"),
+  showCart = false,
+  cartCount = 0,
+  onCartClick = () => console.log("Cart clicked"),
+  showUser = false,
+  onUserClick = () => console.log("User clicked"),
+  // Theme & Styling
   accentColor = "#6366f1",
   theme = "dark",
   // "dark" | "light"
   transparent = false,
-  // Set to true to make navbar transparent until scrolled
   style = {},
   animationDuration = 1.2,
   easing = "expo.inOut",
   linkSize = "clamp(42px, 7vw, 100px)"
-  // Option to change navlink size
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const [hoverIndex, setHoverIndex] = useState(null);
+  const [expandedOverlay, setExpandedOverlay] = useState(null);
   const inRouter = useInRouterContext2();
   const navigate = inRouter ? useNavigate2() : null;
   const location = inRouter ? useLocation() : { pathname: "/" };
   const overlayRef = useRef2(null);
   const linksContainerRef = useRef2(null);
   const infoContainerRef = useRef2(null);
+  const desktopDropdownRefs = useRef2({});
   const isLight2 = theme === "light";
   const bgMain = isLight2 ? "#ffffff" : "#050505";
   const textMain = isLight2 ? "#0f172a" : "#ffffff";
@@ -287,34 +316,70 @@ var Navbar = ({
       }
     } else {
       document.body.style.overflow = "";
-      const tl = gsap2.timeline();
-      tl.to(overlayRef.current, {
+      gsap2.to(overlayRef.current, {
         clipPath: "circle(0% at 95% 40px)",
         pointerEvents: "none",
         duration: animationDuration * 0.7,
         ease: "expo.inOut"
       });
+      setExpandedOverlay(null);
     }
     return () => {
       document.body.style.overflow = "";
     };
   }, [isOpen, animationDuration, easing, prefersReducedMotion]);
+  const handleDropdownEnter = (idx) => {
+    if (desktopDropdownRefs.current[idx]) {
+      gsap2.killTweensOf(desktopDropdownRefs.current[idx]);
+      gsap2.to(desktopDropdownRefs.current[idx], {
+        opacity: 1,
+        y: 10,
+        pointerEvents: "auto",
+        visibility: "visible",
+        duration: 0.3,
+        ease: "power2.out"
+      });
+    }
+  };
+  const handleDropdownLeave = (idx) => {
+    if (desktopDropdownRefs.current[idx]) {
+      gsap2.to(desktopDropdownRefs.current[idx], {
+        opacity: 0,
+        y: 0,
+        pointerEvents: "none",
+        visibility: "hidden",
+        duration: 0.2,
+        ease: "power2.in"
+      });
+    }
+  };
   const handleNavigation = (path, e) => {
     e.preventDefault();
     if (location.pathname === path) {
       setIsOpen(false);
       return;
     }
-    setIsOpen(false);
-    setTimeout(() => {
+    if (isOpen) {
+      setIsOpen(false);
+      setTimeout(() => {
+        if (navigate) {
+          navigate(path);
+          window.scrollTo(0, 0);
+        } else {
+          window.location.href = path;
+        }
+      }, animationDuration * 0.7 * 1e3);
+    } else {
       if (navigate) {
         navigate(path);
         window.scrollTo(0, 0);
       } else {
         window.location.href = path;
       }
-    }, animationDuration * 0.7 * 1e3);
+    }
   };
+  const showHamburger = isMobile || variant === "overlay";
+  const showDesktopLinks = variant === "classic" && !isMobile;
   const styles = {
     header: {
       position: "fixed",
@@ -343,7 +408,6 @@ var Navbar = ({
       letterSpacing: "1px",
       textDecoration: "none",
       color: textMain,
-      // Text logic handles contrast via theme
       zIndex: 1001,
       cursor: "pointer",
       willChange: "transform",
@@ -356,6 +420,86 @@ var Navbar = ({
       backgroundColor: accentColor,
       boxShadow: `0 0 15px ${accentColor}88`
     },
+    desktopNav: {
+      display: "flex",
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "30px"
+    },
+    desktopLinkWrapper: {
+      position: "relative",
+      padding: "10px 0"
+    },
+    desktopLink: {
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "15px",
+      fontWeight: "600",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      transition: "color 0.3s"
+    },
+    desktopDropdown: {
+      position: "absolute",
+      top: "100%",
+      left: "50%",
+      transform: "translateX(-50%) translateY(0)",
+      backgroundColor: bgMain,
+      border: `1px solid ${borderCol}`,
+      borderRadius: "16px",
+      padding: "8px",
+      minWidth: "200px",
+      boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
+      opacity: 0,
+      visibility: "hidden",
+      pointerEvents: "none",
+      display: "flex",
+      flexDirection: "column",
+      gap: "4px"
+    },
+    dropdownItem: {
+      padding: "12px 16px",
+      borderRadius: "10px",
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "14px",
+      fontWeight: "500",
+      transition: "background-color 0.2s, color 0.2s"
+    },
+    rightActions: {
+      display: "flex",
+      alignItems: "center",
+      gap: "20px",
+      zIndex: 1001
+    },
+    iconBtn: {
+      fontSize: "22px",
+      color: textMain,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      position: "relative",
+      transition: "transform 0.2s ease, color 0.2s ease"
+    },
+    cartBadge: {
+      position: "absolute",
+      top: "-6px",
+      right: "-8px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      fontSize: "10px",
+      fontWeight: "800",
+      minWidth: "16px",
+      height: "16px",
+      borderRadius: "8px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      padding: "0 4px"
+    },
     hamburgerBtn: {
       position: "relative",
       width: "48px",
@@ -368,7 +512,6 @@ var Navbar = ({
       alignItems: "center",
       gap: "6px",
       cursor: "pointer",
-      zIndex: 1001,
       border: `1px solid ${isOpen ? borderCol : "transparent"}`,
       transition: "all 0.4s ease"
     },
@@ -376,7 +519,6 @@ var Navbar = ({
       width: "22px",
       height: "2px",
       backgroundColor: textMain,
-      // Uses theme for color
       borderRadius: "2px",
       transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
       transformOrigin: "center"
@@ -385,22 +527,21 @@ var Navbar = ({
       position: "fixed",
       top: 0,
       left: 0,
-      width: "100vw",
+      width: "100%",
       height: "100vh",
       backgroundColor: bgMain,
       zIndex: 999,
       clipPath: "circle(0% at 95% 40px)",
       pointerEvents: "none",
       display: "flex",
-      // Switch to flex for bulletproof layout
       flexDirection: isMobile ? "column" : "row",
       justifyContent: isMobile ? "flex-start" : "space-between",
       alignItems: isMobile ? "flex-start" : "center",
       padding: isMobile ? "120px 8% 60px" : "100px 10%",
       boxSizing: "border-box",
       fontFamily: '"Inter", -apple-system, sans-serif',
-      overflowY: isMobile ? "auto" : "hidden"
-      // Allow scroll on mobile if items overflow
+      overflowY: isMobile ? "auto" : "none"
+      // Prevent scroll lock bugs on desktop
     },
     linksArea: {
       display: "flex",
@@ -409,7 +550,12 @@ var Navbar = ({
       width: isMobile ? "100%" : "60%",
       marginBottom: isMobile ? "60px" : "0"
     },
-    linkItem: {
+    overlayLinkItem: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%"
+    },
+    overlayLinkMain: {
       display: "flex",
       alignItems: "center",
       gap: "20px",
@@ -425,6 +571,23 @@ var Navbar = ({
       textTransform: "uppercase",
       lineHeight: "1"
     },
+    accordionContent: {
+      display: "flex",
+      flexDirection: "column",
+      paddingLeft: "2%",
+      borderLeft: `2px solid ${borderCol}`,
+      marginLeft: "1%",
+      marginTop: "10px",
+      gap: "15px",
+      overflow: "hidden"
+    },
+    accordionLink: {
+      fontSize: "clamp(20px, 3vw, 32px)",
+      fontWeight: "600",
+      color: textMuted,
+      textDecoration: "none",
+      transition: "color 0.3s ease"
+    },
     infoArea: {
       display: "flex",
       flexDirection: "column",
@@ -470,7 +633,80 @@ var Navbar = ({
       transition: "all 0.3s ease"
     }
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("header", { style: styles.header }, /* @__PURE__ */ React2.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText), /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("header", { style: styles.header }, /* @__PURE__ */ React2.createElement("div", { style: styles.logo, onClick: (e) => handleNavigation("/", e) }, showBadge && /* @__PURE__ */ React2.createElement("div", { style: styles.logoDot }), logoText), showDesktopLinks && /* @__PURE__ */ React2.createElement("div", { style: styles.desktopNav }, links.map((link, idx) => /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      key: idx,
+      style: styles.desktopLinkWrapper,
+      onMouseEnter: () => handleDropdownEnter(idx),
+      onMouseLeave: () => handleDropdownLeave(idx)
+    },
+    /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        href: link.path,
+        style: { ...styles.desktopLink, color: location.pathname === link.path ? accentColor : textMain },
+        onClick: (e) => {
+          if (!link.children) handleNavigation(link.path, e);
+        }
+      },
+      link.label,
+      link.children && /* @__PURE__ */ React2.createElement(FiChevronDown, { style: { marginTop: "2px" }, size: 16 })
+    ),
+    link.children && /* @__PURE__ */ React2.createElement(
+      "div",
+      {
+        ref: (el) => desktopDropdownRefs.current[idx] = el,
+        style: styles.desktopDropdown
+      },
+      link.children.map((child, cIdx) => /* @__PURE__ */ React2.createElement(
+        "a",
+        {
+          key: cIdx,
+          href: child.path,
+          style: styles.dropdownItem,
+          onClick: (e) => handleNavigation(child.path, e),
+          onMouseEnter: (e) => {
+            e.currentTarget.style.backgroundColor = isLight2 ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)";
+            e.currentTarget.style.color = accentColor;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+            e.currentTarget.style.color = textMain;
+          }
+        },
+        child.label
+      ))
+    )
+  ))), /* @__PURE__ */ React2.createElement("div", { style: styles.rightActions }, showSearch && /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onSearch,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ React2.createElement(FiSearch, null)
+  ), showUser && /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onUserClick,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ React2.createElement(FiUser, null)
+  ), showCart && /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: styles.iconBtn,
+      onClick: onCartClick,
+      onMouseEnter: (e) => e.currentTarget.style.color = accentColor,
+      onMouseLeave: (e) => e.currentTarget.style.color = textMain
+    },
+    /* @__PURE__ */ React2.createElement(FiShoppingBag, null),
+    cartCount > 0 && /* @__PURE__ */ React2.createElement("span", { style: styles.cartBadge }, cartCount)
+  ), showHamburger && /* @__PURE__ */ React2.createElement(
     "div",
     {
       style: styles.hamburgerBtn,
@@ -488,27 +724,28 @@ var Navbar = ({
         }
       }
     },
-    /* @__PURE__ */ React2.createElement("div", { style: {
-      ...styles.line,
-      transform: isOpen ? "translateY(4px) rotate(45deg)" : "none"
-    } }),
-    /* @__PURE__ */ React2.createElement("div", { style: {
-      ...styles.line,
-      transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none"
-    } })
-  )), /* @__PURE__ */ React2.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ React2.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
+    /* @__PURE__ */ React2.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(4px) rotate(45deg)" : "none" } }),
+    /* @__PURE__ */ React2.createElement("div", { style: { ...styles.line, transform: isOpen ? "translateY(-4px) rotate(-45deg)" : "none" } })
+  ))), /* @__PURE__ */ React2.createElement("div", { ref: overlayRef, style: styles.overlay }, /* @__PURE__ */ React2.createElement("div", { ref: linksContainerRef, style: styles.linksArea }, links.map((link, idx) => {
     const isHovered = hoverIndex === idx;
     const isAnyHovered = hoverIndex !== null;
     const isActiveRoute = location.pathname === link.path;
-    return /* @__PURE__ */ React2.createElement(
+    const isExpanded = expandedOverlay === idx;
+    return /* @__PURE__ */ React2.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ React2.createElement(
       "a",
       {
-        key: idx,
         href: link.path,
-        onClick: (e) => handleNavigation(link.path, e),
+        onClick: (e) => {
+          if (link.children) {
+            e.preventDefault();
+            setExpandedOverlay(isExpanded ? null : idx);
+          } else {
+            handleNavigation(link.path, e);
+          }
+        },
         onMouseEnter: () => setHoverIndex(idx),
         onMouseLeave: () => setHoverIndex(null),
-        style: styles.linkItem
+        style: styles.overlayLinkMain
       },
       /* @__PURE__ */ React2.createElement("span", { style: {
         ...styles.linkText,
@@ -517,7 +754,18 @@ var Navbar = ({
         transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
         transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
       } }, link.label),
-      /* @__PURE__ */ React2.createElement(
+      link.children ? /* @__PURE__ */ React2.createElement(
+        FiChevronDown,
+        {
+          style: {
+            fontSize: "clamp(24px, 3vw, 40px)",
+            color: accentColor,
+            opacity: isHovered ? 1 : 0,
+            transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+            transition: "all 0.5s ease"
+          }
+        }
+      ) : /* @__PURE__ */ React2.createElement(
         FiArrowUpRight,
         {
           style: {
@@ -529,7 +777,29 @@ var Navbar = ({
           }
         }
       )
-    );
+    ), link.children && /* @__PURE__ */ React2.createElement("div", { style: {
+      ...styles.accordionContent,
+      maxHeight: isExpanded ? "500px" : "0px",
+      opacity: isExpanded ? 1 : 0,
+      transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
+    } }, link.children.map((child, cIdx) => /* @__PURE__ */ React2.createElement(
+      "a",
+      {
+        key: cIdx,
+        href: child.path,
+        onClick: (e) => handleNavigation(child.path, e),
+        style: styles.accordionLink,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.color = accentColor;
+          e.currentTarget.style.paddingLeft = "10px";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.color = textMuted;
+          e.currentTarget.style.paddingLeft = "0px";
+        }
+      },
+      child.label
+    ))));
   })), /* @__PURE__ */ React2.createElement("div", { ref: infoContainerRef, style: styles.infoArea }, /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, contact.title), /* @__PURE__ */ React2.createElement("span", { style: styles.infoText }, contact.email), /* @__PURE__ */ React2.createElement("span", { style: { ...styles.infoText, color: textMuted } }, contact.address)), /* @__PURE__ */ React2.createElement("div", { style: styles.infoBlock }, /* @__PURE__ */ React2.createElement("span", { style: styles.infoLabel }, "Socials"), /* @__PURE__ */ React2.createElement("div", { style: styles.socialGrid }, socials.map((social, idx) => /* @__PURE__ */ React2.createElement(
     "a",
     {
@@ -4148,7 +4418,7 @@ var Canvas = ({
 import React17, { useRef as useRef17, useEffect as useEffect17 } from "react";
 import { gsap as gsap17 } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { FiChevronDown, FiArrowRight as FiArrowRight5 } from "react-icons/fi";
+import { FiChevronDown as FiChevronDown2, FiArrowRight as FiArrowRight5 } from "react-icons/fi";
 if (typeof window !== "undefined") {
   gsap17.registerPlugin(ScrollTrigger);
 }
@@ -4384,7 +4654,7 @@ var ParallaxImage = ({
       onMouseLeave: handleMouseLeave
     },
     /* @__PURE__ */ React17.createElement("span", null, "Scroll"),
-    /* @__PURE__ */ React17.createElement(FiChevronDown, { fontSize: "24px" })
+    /* @__PURE__ */ React17.createElement(FiChevronDown2, { fontSize: "24px" })
   ));
 };
 
@@ -5637,7 +5907,7 @@ import { gsap as gsap22 } from "gsap";
 import {
   FiMail as FiMail3,
   FiLock as FiLock2,
-  FiUser,
+  FiUser as FiUser2,
   FiArrowRight as FiArrowRight9,
   FiCheckCircle,
   FiShield,
@@ -5949,7 +6219,7 @@ var AuraRegister = ({
     } }, /* @__PURE__ */ React22.createElement(FiShield, null))),
     /* @__PURE__ */ React22.createElement("h1", { ref: titleRef, style: styles.title }, /* @__PURE__ */ React22.createElement(SplitText, { text: title })),
     /* @__PURE__ */ React22.createElement("p", { style: styles.subtitle }, subtitle),
-    /* @__PURE__ */ React22.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ React22.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ React22.createElement("label", { style: styles.inputLabel }, "Full Name"), /* @__PURE__ */ React22.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ React22.createElement(FiUser, { style: styles.inputIcon }), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React22.createElement("form", { ref: formRef, style: styles.form, onSubmit: handleSubmit }, /* @__PURE__ */ React22.createElement("div", { style: styles.inputGroup }, /* @__PURE__ */ React22.createElement("label", { style: styles.inputLabel }, "Full Name"), /* @__PURE__ */ React22.createElement("div", { style: styles.inputWrapper }, /* @__PURE__ */ React22.createElement(FiUser2, { style: styles.inputIcon }), /* @__PURE__ */ React22.createElement(
       "input",
       {
         name: "name",

package/package.json

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