aura-ui-library 1.0.30 → 1.0.32

package/dist/index.js

@@ -50,7 +50,8 @@ __export(index_exports, {
   Spotlight: () => Spotlight,
   Testimonials: () => Testimonials,
   TextImage: () => TextImage,
-  TextWriting: () => TextWriting
+  TextWriting: () => TextWriting,
+  Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -264,11 +265,17 @@ var SCROLLBAR_STYLE = `
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+  
+  /* Input placeholder styling for internal search */
+  .aura-internal-input::placeholder {
+    color: inherit;
+    opacity: 0.4;
+  }
 `;
 var Navbar = ({
   logoText = "AURA",
   showBadge = true,
-  variant = "overlay",
+  variant = "product",
   // "overlay" | "classic" | "product"
   links = [
     { label: "Home", path: "/" },
@@ -294,28 +301,45 @@ var Navbar = ({
     email: "hello@aura-ui.dev",
     address: "123 Innovation Drive, SF"
   },
-  // E-commerce & Action Triggers
-  showSearch = false,
+  // E-commerce Action Triggers
+  showSearch = true,
   onSearch = null,
   searchContent = null,
-  // React Node rendered inside popover
-  showCart = false,
-  cartCount = 0,
+  // Override prebuilt UI with custom React Node
+  trendingSearches = ["Sneakers", "Minimalist Jackets", "Winter Collection", "Aura Exclusive"],
+  showCart = true,
+  cartCount = 2,
   onCartClick = null,
   cartContent = null,
-  // React Node rendered inside popover
-  showUser = false,
+  // Override prebuilt UI with custom React Node
+  cartCurrency = "$",
+  cartItems = [
+    { id: 1, title: "Aura Signature Hoodie", price: 89, image: "https://images.unsplash.com/photo-1556821840-3a63f95609a7?w=200&q=80" },
+    { id: 2, title: "Minimalist Sneakers", price: 120, image: "https://images.unsplash.com/photo-1549298916-b41d501d3772?w=200&q=80" }
+  ],
+  showUser = true,
   onUserClick = null,
   userContent = null,
-  // React Node rendered inside popover
-  showNotification = false,
-  notificationCount = 0,
+  // Override prebuilt UI
+  userData = { name: "Ritik", email: "ritik@aura-ui.dev", avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=Ritik" },
+  userOptions = [
+    { label: "My Profile", path: "/profile" },
+    { label: "Orders", path: "/orders" },
+    { label: "Wishlist", path: "/wishlist" },
+    { label: "Settings", path: "/settings" }
+  ],
+  showNotification = true,
+  notificationCount = 1,
   onNotificationClick = null,
   notificationContent = null,
-  // React Node rendered inside popover
+  // Override prebuilt UI
+  notifications = [
+    { id: 1, title: "Order Shipped", time: "2 hours ago", unread: true },
+    { id: 2, title: "Security Alert", time: "1 day ago", unread: false }
+  ],
   // Theme & Styling
   accentColor = "#6366f1",
-  theme = "dark",
+  theme = "light",
   // "dark" | "light"
   transparent = false,
   style = {},
@@ -454,13 +478,72 @@ var Navbar = ({
       }
     }
   };
+  const PrebuiltSearch = () => /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "24px", minWidth: "340px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(import_fi.FiSearch, { style: { position: "absolute", left: "16px", top: "50%", transform: "translateY(-50%)", color: textMuted } }), /* @__PURE__ */ import_react2.default.createElement(
+    "input",
+    {
+      className: "aura-internal-input",
+      placeholder: "Search products...",
+      style: { width: "100%", padding: "14px 14px 14px 44px", borderRadius: "12px", border: `1px solid ${borderCol}`, background: isLight2 ? "rgba(0,0,0,0.02)" : "rgba(255,255,255,0.02)", color: textMain, fontSize: "15px", outline: "none", boxSizing: "border-box" }
+    }
+  )), /* @__PURE__ */ import_react2.default.createElement("div", { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "12px", fontWeight: "700", textTransform: "uppercase", letterSpacing: "1px", color: textMuted } }, "Trending"), /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "12px" } }, trendingSearches.map((t, idx) => /* @__PURE__ */ import_react2.default.createElement(
+    "span",
+    {
+      key: idx,
+      style: { padding: "8px 14px", background: isLight2 ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.06)", color: textMain, borderRadius: "100px", fontSize: "13px", cursor: "pointer", transition: "background 0.2s", fontWeight: "500" },
+      onMouseEnter: (e) => e.currentTarget.style.background = isLight2 ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.1)",
+      onMouseLeave: (e) => e.currentTarget.style.background = isLight2 ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.06)"
+    },
+    t
+  )))));
+  const PrebuiltCart = () => {
+    const total = cartItems.reduce((acc, curr) => acc + curr.price, 0);
+    return /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "360px", padding: "24px", boxSizing: "border-box" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: 0, fontSize: "18px", color: textMain, fontWeight: "700" } }, "Your Basket"), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "12px", background: `${accentColor}22`, color: accentColor, padding: "4px 8px", borderRadius: "100px", fontWeight: "700" } }, cartItems.length, " items")), /* @__PURE__ */ import_react2.default.createElement("div", { className: "aura-no-scroll", style: { display: "flex", flexDirection: "column", gap: "16px", marginTop: "20px", maxHeight: "300px", overflowY: "auto" } }, cartItems.map((item) => /* @__PURE__ */ import_react2.default.createElement("div", { key: item.id, style: { display: "flex", gap: "16px", alignItems: "center" } }, /* @__PURE__ */ import_react2.default.createElement("img", { src: item.image, alt: item.title, style: { width: "64px", height: "64px", borderRadius: "12px", objectFit: "cover", background: borderCol } }), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement("p", { style: { fontWeight: 600, fontSize: "14px", margin: 0, color: textMain } }, item.title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { color: textMuted, fontSize: "13px", margin: "4px 0 0" } }, cartCurrency, item.price)), /* @__PURE__ */ import_react2.default.createElement(import_fi.FiX, { style: { cursor: "pointer", color: textMuted, padding: "4px" }, onMouseEnter: (e) => e.currentTarget.style.color = "#ef4444", onMouseLeave: (e) => e.currentTarget.style.color = textMuted })))), cartItems.length > 0 ? /* @__PURE__ */ import_react2.default.createElement("div", { style: { marginTop: "24px", paddingTop: "20px", borderTop: `1px solid ${borderCol}` } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "20px" } }, /* @__PURE__ */ import_react2.default.createElement("strong", { style: { color: textMuted, fontWeight: "500" } }, "Total"), /* @__PURE__ */ import_react2.default.createElement("strong", { style: { color: textMain, fontSize: "18px" } }, cartCurrency, total)), /* @__PURE__ */ import_react2.default.createElement(
+      "button",
+      {
+        style: { width: "100%", padding: "16px", background: accentColor, color: "#fff", border: "none", borderRadius: "12px", fontSize: "15px", fontWeight: "700", cursor: "pointer", transition: "transform 0.2s" },
+        onMouseEnter: (e) => e.currentTarget.style.transform = "translateY(-2px)",
+        onMouseLeave: (e) => e.currentTarget.style.transform = "translateY(0)"
+      },
+      "Proceed to Checkout"
+    )) : /* @__PURE__ */ import_react2.default.createElement("p", { style: { color: textMuted, textAlign: "center", margin: "30px 0" } }, "Your basket is empty."));
+  };
+  const PrebuiltNotifications = () => /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "340px", padding: "16px", boxSizing: "border-box" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px", marginBottom: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: 0, fontSize: "16px", color: textMain } }, "Notifications"), /* @__PURE__ */ import_react2.default.createElement("span", { style: { fontSize: "12px", color: accentColor, cursor: "pointer", fontWeight: "600" } }, "Mark all read")), /* @__PURE__ */ import_react2.default.createElement("div", { className: "aura-no-scroll", style: { maxHeight: "350px", overflowY: "auto" } }, notifications.map((n) => /* @__PURE__ */ import_react2.default.createElement("div", { key: n.id, style: { display: "flex", gap: "14px", padding: "16px", borderRadius: "12px", background: n.unread ? isLight2 ? "rgba(0,0,0,0.03)" : "rgba(255,255,255,0.03)" : "transparent", marginBottom: "4px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: n.unread ? accentColor : "transparent", marginTop: "6px", flexShrink: 0 } }), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontWeight: 600, fontSize: "14px", color: textMain } }, n.title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, color: textMuted, fontSize: "12px", marginTop: "4px" } }, n.time))))));
+  const PrebuiltUser = () => /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "280px", padding: "16px", boxSizing: "border-box" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "16px", padding: "8px 8px 24px", borderBottom: `1px solid ${borderCol}`, marginBottom: "8px" } }, /* @__PURE__ */ import_react2.default.createElement("img", { src: userData.avatar, alt: "Profile", style: { width: "48px", height: "48px", borderRadius: "50%", background: borderCol } }), /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontWeight: "700", color: textMain, fontSize: "15px" } }, userData.name), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, color: textMuted, fontSize: "13px", marginTop: "2px" } }, userData.email))), /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, userOptions.map((o, idx) => /* @__PURE__ */ import_react2.default.createElement(
+    "a",
+    {
+      key: idx,
+      href: o.path,
+      onClick: (e) => handleNavigation(o.path, e),
+      style: { padding: "12px 16px", cursor: "pointer", borderRadius: "10px", fontSize: "14px", fontWeight: 500, color: textMain, textDecoration: "none", transition: "background 0.2s" },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = isLight2 ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.04)";
+        e.currentTarget.style.color = accentColor;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+        e.currentTarget.style.color = textMain;
+      }
+    },
+    o.label
+  )), /* @__PURE__ */ import_react2.default.createElement("div", { style: { height: "1px", background: borderCol, margin: "8px 0" } }), /* @__PURE__ */ import_react2.default.createElement(
+    "a",
+    {
+      href: "#logout",
+      style: { padding: "12px 16px", cursor: "pointer", borderRadius: "10px", fontSize: "14px", fontWeight: 500, color: "#ef4444", textDecoration: "none", transition: "background 0.2s" },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#ef444411",
+      onMouseLeave: (e) => e.currentTarget.style.background = "transparent"
+    },
+    "Sign Out"
+  )));
+  const finalSearchContent = searchContent || /* @__PURE__ */ import_react2.default.createElement(PrebuiltSearch, null);
+  const finalCartContent = cartContent || /* @__PURE__ */ import_react2.default.createElement(PrebuiltCart, null);
+  const finalUserContent = userContent || /* @__PURE__ */ import_react2.default.createElement(PrebuiltUser, null);
+  const finalNotificationContent = notificationContent || /* @__PURE__ */ import_react2.default.createElement(PrebuiltNotifications, null);
   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);
-      }
+      if (contentNode) setActivePopover(isActive ? null : id);
     };
     return /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.actionItemWrapper }, /* @__PURE__ */ import_react2.default.createElement(
       "div",
@@ -513,334 +596,53 @@ var Navbar = ({
       willChange: "transform",
       transition: "transform 0.3s ease"
     },
-    logoDot: {
-      width: "8px",
-      height: "8px",
-      borderRadius: "50%",
-      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",
-      height: "48px",
-      borderRadius: "50%",
-      backgroundColor: isOpen ? borderCol : "transparent",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "6px",
-      cursor: "pointer",
-      marginLeft: showSearch || showCart || showUser || showNotification ? "10px" : "0",
-      border: `1px solid ${isOpen ? borderCol : "transparent"}`,
-      transition: "all 0.4s ease"
-    },
-    line: {
-      width: "22px",
-      height: "2px",
-      backgroundColor: textMain,
-      borderRadius: "2px",
-      transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
-      transformOrigin: "center"
-    },
-    overlay: {
-      position: "fixed",
-      top: 0,
-      left: 0,
-      width: "100%",
-      height: "100vh",
-      backgroundColor: bgMain,
-      zIndex: 999,
-      clipPath: "circle(0% at 95% 40px)",
-      pointerEvents: "none",
-      display: "flex",
-      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',
-      // 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",
-      flexDirection: "column",
-      gap: "10px",
-      width: isMobile ? "100%" : "60%",
-      marginBottom: isMobile ? "60px" : "0"
-    },
-    overlayLinkItem: {
-      display: "flex",
-      flexDirection: "column",
-      width: "100%"
-    },
-    overlayLinkMain: {
-      display: "flex",
-      alignItems: "center",
-      gap: "20px",
-      textDecoration: "none",
-      padding: "10px 0",
-      cursor: "pointer",
-      willChange: "transform, opacity, color"
-    },
-    linkText: {
-      fontSize: linkSize,
-      fontWeight: "900",
-      letterSpacing: "-2px",
-      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",
-      gap: "40px",
-      width: isMobile ? "100%" : "30%",
-      paddingLeft: isMobile ? "0" : "5%",
-      borderLeft: isMobile ? "none" : `1px solid ${borderCol}`
-    },
-    infoBlock: {
-      display: "flex",
-      flexDirection: "column",
-      gap: "12px"
-    },
-    infoLabel: {
-      fontSize: "12px",
-      textTransform: "uppercase",
-      letterSpacing: "2px",
-      fontWeight: "700",
-      color: accentColor
-    },
-    infoText: {
-      fontSize: "16px",
-      fontWeight: "500",
-      color: textMain,
-      lineHeight: "1.5"
-    },
-    socialGrid: {
-      display: "flex",
-      flexWrap: "wrap",
-      gap: "12px"
-    },
-    socialLink: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "12px 20px",
-      borderRadius: "100px",
-      border: `1px solid ${borderCol}`,
-      color: textMain,
-      textDecoration: "none",
-      fontSize: "14px",
-      fontWeight: "600",
-      transition: "all 0.3s ease"
-    }
+    logoDot: { width: "8px", height: "8px", borderRadius: "50%", backgroundColor: accentColor, boxShadow: `0 0 15px ${accentColor}88` },
+    desktopNav: { display: "flex", flex: 1, justifyContent: "center", alignItems: "center", gap: "30px", marginRight: variant === "product" ? "-50px" : "0px" },
+    desktopLinkWrapper: { position: "relative", padding: "10px 0" },
+    desktopLink: { color: textMain, textDecoration: "none", fontSize: "15px", fontWeight: variant === "product" ? "500" : "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", 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", 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: "calc(100% + 20px)", right: 0, backgroundColor: bgMain, border: `1px solid ${borderCol}`, borderRadius: "20px", boxShadow: headerShadow, zIndex: 1002, display: "flex", flexDirection: "column", overflow: "hidden" },
+    hamburgerBtn: { position: "relative", width: "48px", height: "48px", borderRadius: "50%", backgroundColor: isOpen ? borderCol : "transparent", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: "6px", cursor: "pointer", marginLeft: showSearch || showCart || showUser || showNotification ? "10px" : "0", border: `1px solid ${isOpen ? borderCol : "transparent"}`, transition: "all 0.4s ease" },
+    line: { width: "22px", height: "2px", backgroundColor: textMain, borderRadius: "2px", transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)", transformOrigin: "center" },
+    overlay: { position: "fixed", top: 0, left: 0, width: "100%", height: "100vh", backgroundColor: bgMain, zIndex: 999, clipPath: "circle(0% at 95% 40px)", pointerEvents: "none", display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: isMobile ? "flex-start" : "space-between", alignItems: "center", padding: isMobile ? "120px 8% 60px" : "100px 10%", boxSizing: "border-box", fontFamily: '"Inter", -apple-system, sans-serif', overflowY: isMobile ? "auto" : "none" },
+    linksArea: { display: "flex", flexDirection: "column", gap: "10px", width: isMobile ? "100%" : "60%", marginBottom: isMobile ? "60px" : "0" },
+    overlayLinkItem: { display: "flex", flexDirection: "column", width: "100%" },
+    overlayLinkMain: { display: "flex", alignItems: "center", gap: "20px", textDecoration: "none", padding: "10px 0", cursor: "pointer", willChange: "transform, opacity, color" },
+    linkText: { fontSize: linkSize, fontWeight: "900", letterSpacing: "-2px", 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", gap: "40px", width: isMobile ? "100%" : "30%", paddingLeft: isMobile ? "0" : "5%", borderLeft: isMobile ? "none" : `1px solid ${borderCol}` },
+    infoBlock: { display: "flex", flexDirection: "column", gap: "12px" },
+    infoLabel: { fontSize: "12px", textTransform: "uppercase", letterSpacing: "2px", fontWeight: "700", color: accentColor },
+    infoText: { fontSize: "16px", fontWeight: "500", color: textMain, lineHeight: "1.5" },
+    socialGrid: { display: "flex", flexWrap: "wrap", gap: "12px" },
+    socialLink: { display: "flex", alignItems: "center", gap: "8px", padding: "12px 20px", borderRadius: "100px", border: `1px solid ${borderCol}`, color: textMain, textDecoration: "none", fontSize: "14px", fontWeight: "600", transition: "all 0.3s ease" }
   };
-  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",
+  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: 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
+      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;
       },
-      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(
+      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: finalSearchContent }), showNotification && /* @__PURE__ */ import_react2.default.createElement(ActionItem, { id: "bell", icon: import_fi.FiBell, count: notificationCount, clickHandler: onNotificationClick, contentNode: finalNotificationContent }), showUser && /* @__PURE__ */ import_react2.default.createElement(ActionItem, { id: "user", icon: import_fi.FiUser, clickHandler: onUserClick, contentNode: finalUserContent }), showCart && /* @__PURE__ */ import_react2.default.createElement(ActionItem, { id: "cart", icon: import_fi.FiShoppingBag, count: cartCount, clickHandler: onCartClick, contentNode: finalCartContent }), showHamburger && /* @__PURE__ */ import_react2.default.createElement(
     "div",
     {
       style: styles.hamburgerBtn,
@@ -860,110 +662,34 @@ 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,
-      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: 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
-    )))))
-  ));
+  ))), /* @__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: 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)))))));
 };
 
 // src/components/Spotlight/Spotlight.jsx
@@ -6425,6 +6151,115 @@ var AuraRegister = ({
     ))
   ));
 };
+
+// src/components/Tooltip/Tooltip.jsx
+var import_react23 = __toESM(require("react"));
+var import_gsap23 = require("gsap");
+var import_fi20 = require("react-icons/fi");
+var Tooltip = ({
+  children,
+  content = "Tooltip Information",
+  theme = "dark",
+  // "dark" | "light"
+  accentColor = "#6366f1",
+  duration = 0.4,
+  easing = "power3.out",
+  offsetX = 20,
+  offsetY = 20,
+  style = {}
+}) => {
+  const containerRef = (0, import_react23.useRef)(null);
+  const tooltipRef = (0, import_react23.useRef)(null);
+  const [isHovered, setIsHovered] = (0, import_react23.useState)(false);
+  const isLight2 = theme === "light";
+  const bgMain = isLight2 ? "rgba(255, 255, 255, 0.65)" : "rgba(10, 10, 10, 0.65)";
+  const textMain = isLight2 ? "#0f172a" : "#ffffff";
+  const borderCol = isLight2 ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.08)";
+  (0, import_react23.useEffect)(() => {
+    if (!tooltipRef.current) return;
+    if (isHovered) {
+      import_gsap23.gsap.to(tooltipRef.current, {
+        opacity: 1,
+        scale: 1,
+        duration,
+        ease: easing
+      });
+    } else {
+      import_gsap23.gsap.to(tooltipRef.current, {
+        opacity: 0,
+        scale: 0.9,
+        duration: duration * 0.7,
+        ease: "power2.inOut"
+      });
+    }
+  }, [isHovered, duration, easing]);
+  const handleMouseMove = (e) => {
+    if (!isHovered || !tooltipRef.current) return;
+    const moveX = e.movementX || 0;
+    const rotateValue = Math.min(Math.max(moveX * 0.2, -15), 15);
+    import_gsap23.gsap.to(tooltipRef.current, {
+      x: e.clientX + offsetX,
+      y: e.clientY + offsetY,
+      rotationZ: rotateValue,
+      duration: 0.6,
+      ease: "power3.out"
+    });
+    import_gsap23.gsap.to(tooltipRef.current, {
+      rotationZ: 0,
+      duration: 0.4,
+      delay: 0.1,
+      ease: "power2.out"
+    });
+  };
+  const styles = {
+    wrapper: {
+      display: "inline-block",
+      cursor: "pointer"
+    },
+    tooltipCard: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      pointerEvents: "none",
+      opacity: 0,
+      scale: 0.9,
+      zIndex: 9999,
+      padding: "12px 16px",
+      backgroundColor: bgMain,
+      color: textMain,
+      backdropFilter: "blur(16px)",
+      WebkitBackdropFilter: "blur(16px)",
+      border: `1px solid ${borderCol}`,
+      borderRadius: "12px",
+      boxShadow: "0 10px 40px rgba(0,0,0,0.15)",
+      fontFamily: '"Inter", -apple-system, sans-serif',
+      fontSize: "14px",
+      fontWeight: "500",
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      willChange: "transform, opacity",
+      transformOrigin: "top left",
+      ...style
+    },
+    icon: {
+      color: accentColor,
+      fontSize: "16px",
+      flexShrink: 0
+    }
+  };
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+    "div",
+    {
+      ref: containerRef,
+      style: styles.wrapper,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onMouseMove: handleMouseMove
+    },
+    children
+  ), /* @__PURE__ */ import_react23.default.createElement("div", { ref: tooltipRef, style: styles.tooltipCard }, /* @__PURE__ */ import_react23.default.createElement(import_fi20.FiInfo, { style: styles.icon }), content));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AuraLogin,
@@ -6448,5 +6283,6 @@ var AuraRegister = ({
   Spotlight,
   Testimonials,
   TextImage,
-  TextWriting
+  TextWriting,
+  Tooltip
 });