@stackshift-ui/navigation 6.1.0-alpha.5 → 6.1.0-alpha.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/navigation",
   "description": "",
-  "version": "6.1.0-alpha.5",
+  "version": "6.1.0-alpha.7",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -38,18 +38,18 @@
     "@react-spring/web": "^10.0.1",
     "@uidotdev/usehooks": "^2.4.1",
     "react-icons": "^5.3.0",
-    "@stackshift-ui/button": "6.0.11",
     "@stackshift-ui/container": "6.0.11",
-    "@stackshift-ui/flex": "6.0.11",
-    "@stackshift-ui/image": "6.0.11",
-    "@stackshift-ui/link": "6.0.11",
-    "@stackshift-ui/scripts": "6.0.10",
     "@stackshift-ui/section": "6.0.11",
     "@stackshift-ui/system": "6.0.11",
+    "@stackshift-ui/scripts": "6.0.10",
+    "@stackshift-ui/image": "6.0.11",
+    "@stackshift-ui/heading": "6.0.11",
+    "@stackshift-ui/social-icons": "6.0.12",
+    "@stackshift-ui/link": "6.0.11",
     "@stackshift-ui/text": "6.0.11",
     "@stackshift-ui/grid": "6.0.11",
-    "@stackshift-ui/heading": "6.0.11",
-    "@stackshift-ui/social-icons": "6.0.12"
+    "@stackshift-ui/button": "6.0.11",
+    "@stackshift-ui/flex": "6.0.11"
   },
   "peerDependencies": {
     "@stackshift-ui/system": ">=6.0.11",

package/src/navigation_g.tsx

@@ -232,8 +232,22 @@ function HoverMenu({
   onLeave: () => void;
   isNavHovered: boolean;
 }) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => {
+    setIsHovered(true);
+    onHover();
+  };
+
+  const handleMouseLeave = () => {
+    setTimeout(() => {
+      setIsHovered(false);
+      onLeave();
+    }, 100);
+  };
+
   return (
-    <div className="group relative" onMouseEnter={onHover} onMouseLeave={onLeave}>
+    <div className="group relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       <button
         className={`${navlinkStyle} group-hover:after:!w-full flex items-center space-x-2 ${
           isNavHovered ? "text-white" : "text-black"
@@ -241,8 +255,10 @@ function HoverMenu({
         <span>{link?.label}</span>
       </button>
 
-      <div className="fixed left-0 right-0 top-[80px] pointer-events-none group-hover:pointer-events-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-        <div className="w-3/4 mx-auto bg-black">
+      <div className="absolute left-0 right-0 top-full h-2 pointer-events-auto opacity-0 group-hover:pointer-events-auto"></div>
+
+      <div className="fixed left-0 right-0 top-[80px] pointer-events-none group-hover:pointer-events-auto opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-50">
+        <div className="w-3/4 mx-auto bg-black shadow-lg">
           <div className="max-w-[1440px] mx-auto px-4">
             <div className="p-[30px]">
               <div className="grid grid-cols-5 gap-[30px]">

package/src/navigation_h.tsx

@@ -666,14 +666,9 @@ function MegaDropdownGroupedLinks({ groupedLinks }: { groupedLinks: LabeledRoute
                       key={`MegaDropdownContent-Item-Link-${link._key}-${i}`}
                       direction="col"
                       className="h-fit w-fit">
-                      <Button
-                        ariaLabel={link.title ?? ""}
-                        as="link"
-                        link={link?.primaryButton ?? {}}
-                        variant="unstyled"
-                        className="text-black text-sm font-normal font-heading-kb leading-[30px] underline uppercase underline-offset-2">
-                        {link?.title}
-                      </Button>
+                      <Text fontSize="base" className="text-black font-medium leading-[30px]">
+                        {link.title}
+                      </Text>
                       <Flex
                         direction="col"
                         align="start"