aura-ui-library 1.0.28 → 1.0.30

package/dist/index.js

@@ -256,11 +256,31 @@ var import_react2 = __toESM(require("react"));
 var import_react_router_dom2 = require("react-router-dom");
 var import_gsap2 = require("gsap");
 var import_fi = require("react-icons/fi");
+var SCROLLBAR_STYLE = `
+  .aura-no-scroll::-webkit-scrollbar {
+    display: none;
+  }
+  .aura-no-scroll {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+`;
 var Navbar = ({
   logoText = "AURA",
+  showBadge = true,
+  variant = "overlay",
+  // "overlay" | "classic" | "product"
   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 +294,49 @@ var Navbar = ({
     email: "hello@aura-ui.dev",
     address: "123 Innovation Drive, SF"
   },
+  // E-commerce & Action Triggers
+  showSearch = false,
+  onSearch = null,
+  searchContent = null,
+  // React Node rendered inside popover
+  showCart = false,
+  cartCount = 0,
+  onCartClick = null,
+  cartContent = null,
+  // React Node rendered inside popover
+  showUser = false,
+  onUserClick = null,
+  userContent = null,
+  // React Node rendered inside popover
+  showNotification = false,
+  notificationCount = 0,
+  onNotificationClick = null,
+  notificationContent = null,
+  // React Node rendered inside popover
+  // 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 [activePopover, setActivePopover] = (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 rightActionsRef = (0, import_react2.useRef)(null);
   const isLight2 = theme === "light";
   const bgMain = isLight2 ? "#ffffff" : "#050505";
   const textMain = isLight2 ? "#0f172a" : "#ffffff";
@@ -306,12 +348,19 @@ var Navbar = ({
   (0, import_react2.useEffect)(() => {
     const handleResize = () => setIsMobile(window.innerWidth < 1024);
     const handleScroll = () => setIsScrolled(window.scrollY > 50);
+    const handleClickOutside = (e) => {
+      if (rightActionsRef.current && !rightActionsRef.current.contains(e.target)) {
+        setActivePopover(null);
+      }
+    };
     handleResize();
     window.addEventListener("resize", handleResize);
     window.addEventListener("scroll", handleScroll);
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
       window.removeEventListener("resize", handleResize);
       window.removeEventListener("scroll", handleScroll);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
   (0, import_react2.useEffect)(() => {
@@ -343,34 +392,94 @@ 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 ActionItem = ({ id, icon: Icon, count, clickHandler, contentNode }) => {
+    const isActive = activePopover === id;
+    const handleActionClick = (e) => {
+      if (clickHandler) clickHandler(e);
+      if (contentNode) {
+        setActivePopover(isActive ? null : id);
+      }
+    };
+    return /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actionItemWrapper }, /* @__PURE__ */ import_react2.default.createElement(
+      "div",
+      {
+        style: { ...styles.iconBtn, color: isActive ? accentColor : textMain },
+        onClick: handleActionClick,
+        onMouseEnter: (e) => {
+          if (!isActive) e.currentTarget.style.color = accentColor;
+        },
+        onMouseLeave: (e) => {
+          if (!isActive) e.currentTarget.style.color = textMain;
+        }
+      },
+      /* @__PURE__ */ import_react2.default.createElement(Icon, null),
+      count > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: styles.actionBadge }, count)
+    ), contentNode && isActive && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actionPopover }, contentNode));
   };
+  const showHamburger = isMobile || variant === "overlay";
+  const showDesktopLinks = (variant === "classic" || variant === "product") && !isMobile;
   const styles = {
     header: {
       position: "fixed",
@@ -399,7 +508,6 @@ var Navbar = ({
       letterSpacing: "1px",
       textDecoration: "none",
       color: textMain,
-      // Text logic handles contrast via theme
       zIndex: 1001,
       cursor: "pointer",
       willChange: "transform",
@@ -412,6 +520,112 @@ var Navbar = ({
       backgroundColor: accentColor,
       boxShadow: `0 0 15px ${accentColor}88`
     },
+    desktopNav: {
+      display: "flex",
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "30px",
+      // If product variant, we might shift alignment slightly to balance the bulky right actions
+      marginRight: variant === "product" ? "-50px" : "0px"
+    },
+    desktopLinkWrapper: {
+      position: "relative",
+      padding: "10px 0"
+    },
+    desktopLink: {
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "15px",
+      fontWeight: variant === "product" ? "500" : "600",
+      // slightly more elegant in product mode
+      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",
+      zIndex: 1002
+    },
+    dropdownItem: {
+      padding: "12px 16px",
+      borderRadius: "10px",
+      color: textMain,
+      textDecoration: "none",
+      fontSize: "14px",
+      fontWeight: "500",
+      transition: "background-color 0.2s, color 0.2s"
+    },
+    rightActionsGroup: {
+      display: "flex",
+      alignItems: "center",
+      gap: variant === "product" ? "24px" : "20px",
+      // More spacious in product mode
+      zIndex: 1001
+    },
+    actionItemWrapper: {
+      position: "relative",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    iconBtn: {
+      fontSize: "22px",
+      color: textMain,
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      transition: "transform 0.2s ease, color 0.2s ease"
+    },
+    actionBadge: {
+      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",
+      pointerEvents: "none"
+    },
+    actionPopover: {
+      position: "absolute",
+      top: "200%",
+      right: 0,
+      backgroundColor: bgMain,
+      border: `1px solid ${borderCol}`,
+      borderRadius: "16px",
+      boxShadow: "0 20px 40px rgba(0,0,0,0.1)",
+      minWidth: "250px",
+      zIndex: 1002,
+      display: "flex",
+      flexDirection: "column",
+      overflow: "hidden"
+      // Keeps rounded corners clean around injected content
+    },
     hamburgerBtn: {
       position: "relative",
       width: "48px",
@@ -424,7 +638,7 @@ var Navbar = ({
       alignItems: "center",
       gap: "6px",
       cursor: "pointer",
-      zIndex: 1001,
+      marginLeft: showSearch || showCart || showUser || showNotification ? "10px" : "0",
       border: `1px solid ${isOpen ? borderCol : "transparent"}`,
       transition: "all 0.4s ease"
     },
@@ -432,7 +646,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 +654,22 @@ 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
+      // We use overflowY: auto so items CAN scroll on mobile,
+      // but rely on .aura-no-scroll to hide the ugly scrollbar track globally!
+      overflowY: isMobile ? "auto" : "none"
     },
     linksArea: {
       display: "flex",
@@ -465,7 +678,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 +699,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 +761,86 @@ 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("style", null, SCROLLBAR_STYLE), /* @__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", { ref: rightActionsRef, style: styles.rightActionsGroup }, showSearch && /* @__PURE__ */ import_react2.default.createElement(
+    ActionItem,
+    {
+      id: "search",
+      icon: import_fi.FiSearch,
+      clickHandler: onSearch,
+      contentNode: searchContent
+    }
+  ), showNotification && /* @__PURE__ */ import_react2.default.createElement(
+    ActionItem,
+    {
+      id: "bell",
+      icon: import_fi.FiBell,
+      count: notificationCount,
+      clickHandler: onNotificationClick,
+      contentNode: notificationContent
+    }
+  ), showUser && /* @__PURE__ */ import_react2.default.createElement(
+    ActionItem,
+    {
+      id: "user",
+      icon: import_fi.FiUser,
+      clickHandler: onUserClick,
+      contentNode: userContent
+    }
+  ), showCart && /* @__PURE__ */ import_react2.default.createElement(
+    ActionItem,
+    {
+      id: "cart",
+      icon: import_fi.FiShoppingBag,
+      count: cartCount,
+      clickHandler: onCartClick,
+      contentNode: cartContent
+    }
+  ), showHamburger && /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       style: styles.hamburgerBtn,
@@ -544,69 +858,112 @@ 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) => {
-    const isHovered = hoverIndex === idx;
-    const isAnyHovered = hoverIndex !== null;
-    const isActiveRoute = location.pathname === link.path;
-    return /* @__PURE__ */ import_react2.default.createElement(
+    /* @__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,
+      className: "aura-no-scroll"
+    },
+    /* @__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;
+      const isExpanded = expandedOverlay === idx;
+      return /* @__PURE__ */ import_react2.default.createElement("div", { key: idx, style: styles.overlayLinkItem }, /* @__PURE__ */ import_react2.default.createElement(
+        "a",
+        {
+          href: link.path,
+          onClick: (e) => {
+            if (link.children) {
+              e.preventDefault();
+              setExpandedOverlay(isExpanded ? null : idx);
+            } else {
+              handleNavigation(link.path, e);
+            }
+          },
+          onMouseEnter: () => setHoverIndex(idx),
+          onMouseLeave: () => setHoverIndex(null),
+          style: styles.overlayLinkMain
+        },
+        /* @__PURE__ */ import_react2.default.createElement("span", { style: {
+          ...styles.linkText,
+          color: isHovered || isActiveRoute ? accentColor : textMain,
+          opacity: isAnyHovered && !isHovered ? 0.3 : 1,
+          transform: isHovered || isActiveRoute ? "translateX(20px)" : "translateX(0px)",
+          transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)"
+        } }, link.label),
+        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: {
+              fontSize: "clamp(30px, 4vw, 60px)",
+              color: accentColor,
+              opacity: isHovered || isActiveRoute ? 1 : 0,
+              transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
+              transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
+            }
+          }
+        )
+      ), 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",
       {
         key: idx,
-        href: link.path,
-        onClick: (e) => handleNavigation(link.path, e),
-        onMouseEnter: () => setHoverIndex(idx),
-        onMouseLeave: () => setHoverIndex(null),
-        style: styles.linkItem
-      },
-      /* @__PURE__ */ import_react2.default.createElement("span", { style: {
-        ...styles.linkText,
-        color: isHovered || isActiveRoute ? accentColor : textMain,
-        opacity: isAnyHovered && !isHovered ? 0.3 : 1,
-        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(
-        import_fi.FiArrowUpRight,
-        {
-          style: {
-            fontSize: "clamp(30px, 4vw, 60px)",
-            color: accentColor,
-            opacity: isHovered || isActiveRoute ? 1 : 0,
-            transform: isHovered || isActiveRoute ? "translate(0px, 0px)" : "translate(-20px, 20px)",
-            transition: "all 0.5s cubic-bezier(0.16, 1, 0.3, 1)"
-          }
+        href: social.path,
+        style: styles.socialLink,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.borderColor = accentColor;
+          e.currentTarget.style.backgroundColor = `${accentColor}11`;
+          e.currentTarget.style.color = accentColor;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.borderColor = borderCol;
+          e.currentTarget.style.backgroundColor = "transparent";
+          e.currentTarget.style.color = textMain;
         }
-      )
-    );
-  })), /* @__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",
-    {
-      key: idx,
-      href: social.path,
-      style: styles.socialLink,
-      onMouseEnter: (e) => {
-        e.currentTarget.style.borderColor = accentColor;
-        e.currentTarget.style.backgroundColor = `${accentColor}11`;
-        e.currentTarget.style.color = accentColor;
       },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.borderColor = borderCol;
-        e.currentTarget.style.backgroundColor = "transparent";
-        e.currentTarget.style.color = textMain;
-      }
-    },
-    social.icon,
-    " ",
-    social.label
-  )))))));
+      social.icon,
+      " ",
+      social.label
+    )))))
+  ));
 };
 
 // src/components/Spotlight/Spotlight.jsx