@syscore/ui-library 1.5.2 → 1.6.0

package/client/components/ui/navigation.tsx

@@ -1,1022 +1,672 @@
+"use client";
+
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@/lib/utils";
 import { NavLogo } from "../icons/NavLogo";
 import { NavAccount } from "../icons/NavAccount";
 import { NavBullet } from "../icons/NavBullet";
-import { Button } from "@/components/ui/button";
 import { UtilityClearRegular } from "../icons/UtilityClearRegular";
-import { StandardLogo } from "../icons/StandardLogo";
-export interface NavItem {
-  label: string;
-  active?: boolean;
+import { buttonVariants } from "./button";
+
+// =============================================================================
+// CONTEXT
+// =============================================================================
+
+interface NavigationContextValue {
+  light: boolean;
+  isOpen: boolean;
+  activeIndex: number | null;
+  setActiveIndex: (index: number | null) => void;
+  setIsOpen: (open: boolean) => void;
+  registerTrays: (trays: React.ReactNode[]) => void;
+}
+
+const NavigationContext = React.createContext<NavigationContextValue | null>(
+  null,
+);
+
+function useNavigation() {
+  const ctx = React.useContext(NavigationContext);
+  if (!ctx)
+    throw new Error("Navigation components must be used within <Navigation>");
+  return ctx;
 }
 
-// Define a Link component type that matches common routing patterns
-export type LinkComponent = React.ComponentType<{
-  href: string;
+// =============================================================================
+// NAVIGATION (Root)
+// =============================================================================
+
+interface NavigationProps extends React.ComponentPropsWithoutRef<"nav"> {
+  light?: boolean;
+}
+
+const Navigation = React.forwardRef<HTMLElement, NavigationProps>(
+  ({ className, light = false, children, ...props }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+    const [trays, setTrays] = React.useState<React.ReactNode[]>([]);
+
+    const handleMouseLeave = () => {
+      setIsOpen(false);
+      setActiveIndex(null);
+    };
+
+    const registerTrays = React.useCallback((newTrays: React.ReactNode[]) => {
+      setTrays(newTrays);
+    }, []);
+
+    const contextValue = React.useMemo(
+      () => ({
+        light,
+        isOpen,
+        activeIndex,
+        setActiveIndex,
+        setIsOpen,
+        registerTrays,
+      }),
+      [light, isOpen, activeIndex, registerTrays],
+    );
+
+    return (
+      <NavigationContext.Provider value={contextValue}>
+        <nav
+          ref={ref}
+          className={cn("navigation", light && "navigation--light", className)}
+          onMouseLeave={handleMouseLeave}
+          {...props}
+        >
+          {/* Animated backdrop blur overlay */}
+          {!light && (
+            <motion.div
+              className="navigation__backdrop"
+              initial={false}
+              animate={{
+                height: isOpen ? 340 : 64,
+                backgroundColor: isOpen
+                  ? "rgba(62, 64, 73, 0.90)"
+                  : "rgba(0, 0, 0, 0.16)",
+              }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              style={{ willChange: "transform" }}
+            />
+          )}
+
+          {/* Nav bar content */}
+          <div className="navigation__content">{children}</div>
+
+          {/* Separator line */}
+          {isOpen && !light && <div className="navigation__separator" />}
+
+          {/* Tray dropdown area */}
+          <div className="navigation__tray-container">
+            <AnimatePresence mode="wait">
+              {isOpen && activeIndex !== null && (
+                <motion.div
+                  key={activeIndex}
+                  initial={{ y: -10, opacity: 0 }}
+                  animate={{ y: 0, opacity: 1 }}
+                  exit={{ y: -10, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                  style={{ willChange: "transform, opacity" }}
+                >
+                  {trays[activeIndex - 1]}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </nav>
+      </NavigationContext.Provider>
+    );
+  },
+);
+Navigation.displayName = "Navigation";
+
+// =============================================================================
+// NAVIGATION BRAND (Left container)
+// =============================================================================
+
+interface NavigationBrandProps {
   className?: string;
-  "aria-label"?: string;
-  children: React.ReactNode;
-  onClick?: (e: React.MouseEvent) => void;
-}>;
-
-interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string;
-  LinkComponent?: LinkComponent;
-  onLinkClick?: (href: string) => void;
+  children?: React.ReactNode;
+}
+
+const NavigationBrand = React.forwardRef<HTMLDivElement, NavigationBrandProps>(
+  ({ className, children }, ref) => {
+    return (
+      <motion.div
+        ref={ref}
+        className={cn("navigation-brand", className)}
+        layout
+        transition={{ duration: 0.2, ease: "easeOut" }}
+      >
+        {children}
+      </motion.div>
+    );
+  },
+);
+NavigationBrand.displayName = "NavigationBrand";
+
+// =============================================================================
+// NAVIGATION BACK
+// =============================================================================
+
+interface NavigationBackProps extends React.ComponentPropsWithoutRef<"a"> {
+  show?: boolean;
+  asChild?: boolean;
 }
 
-const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
-  ({ href, LinkComponent, onLinkClick, children, ...props }, ref) => {
-    if (LinkComponent) {
+const NavigationBack = React.forwardRef<HTMLAnchorElement, NavigationBackProps>(
+  ({ className, show, asChild, children, ...props }, ref) => {
+    const { light } = useNavigation();
+
+    const linkClassName = cn(
+      buttonVariants({ size: "icon" }),
+      "navigation-back",
+      light ? "navigation-back--light" : "navigation-back--dark",
+      className,
+    );
+
+    const defaultIcon = (
+      <UtilityClearRegular
+        className={
+          light ? "navigation-back__icon--light" : "navigation-back__icon--dark"
+        }
+      />
+    );
+
+    return (
+      <AnimatePresence mode="popLayout">
+        {show && (
+          <motion.div
+            layout
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+            style={{ willChange: "transform, opacity" }}
+          >
+            {asChild && React.isValidElement(children) ? (
+              (() => {
+                const childElement = children as React.ReactElement<{
+                  children?: React.ReactNode;
+                }>;
+                const hasChildContent = childElement.props.children != null;
+                return (
+                  <Slot
+                    ref={ref}
+                    className={linkClassName}
+                    aria-label="Back"
+                    {...props}
+                  >
+                    {hasChildContent
+                      ? children
+                      : React.cloneElement(childElement, {}, defaultIcon)}
+                  </Slot>
+                );
+              })()
+            ) : (
+              <a
+                ref={ref}
+                className={linkClassName}
+                aria-label="Back"
+                href="/"
+                {...props}
+              >
+                {children || defaultIcon}
+              </a>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  },
+);
+NavigationBack.displayName = "NavigationBack";
+
+// =============================================================================
+// NAVIGATION LOGO
+// =============================================================================
+
+interface NavigationLogoProps extends React.ComponentPropsWithoutRef<"a"> {
+  asChild?: boolean;
+}
+
+const NavigationLogo = React.forwardRef<HTMLAnchorElement, NavigationLogoProps>(
+  ({ className, asChild, children, ...props }, ref) => {
+    const { light } = useNavigation();
+
+    const defaultLogo = <NavLogo dark={light} />;
+
+    const linkClassName = cn("navigation-logo", className);
+
+    // When asChild, render the child with merged props
+    // If child has its own children, use those as content; otherwise inject default logo
+    if (asChild && React.isValidElement(children)) {
+      const childElement = children as React.ReactElement<{
+        children?: React.ReactNode;
+      }>;
+      const hasChildContent = childElement.props.children != null;
+
       return (
-        <LinkComponent
-          href={href}
-          className={props.className}
-          aria-label={props["aria-label"]}
+        <motion.div
+          layout
+          transition={{ duration: 0.2, ease: "easeOut" }}
+          style={{ willChange: "transform" }}
         >
-          {children}
-        </LinkComponent>
+          <Slot
+            ref={ref}
+            className={linkClassName}
+            aria-label="Home"
+            {...props}
+          >
+            {hasChildContent
+              ? children
+              : React.cloneElement(childElement, {}, defaultLogo)}
+          </Slot>
+        </motion.div>
       );
     }
 
-    if (onLinkClick) {
-      return (
+    return (
+      <motion.div
+        layout
+        transition={{ duration: 0.2, ease: "easeOut" }}
+        style={{ willChange: "transform" }}
+      >
         <a
           ref={ref}
-          href={href}
+          className={linkClassName}
+          aria-label="Home"
+          href="/"
           {...props}
-          onClick={(e) => {
-            e.preventDefault();
-            onLinkClick(href);
-          }}
         >
+          {defaultLogo}
           {children}
         </a>
-      );
-    }
+      </motion.div>
+    );
+  },
+);
+NavigationLogo.displayName = "NavigationLogo";
+
+// =============================================================================
+// NAVIGATION MENU (Center container)
+// =============================================================================
+
+interface NavigationMenuProps extends React.ComponentPropsWithoutRef<"div"> {}
+
+const NavigationMenu = React.forwardRef<HTMLDivElement, NavigationMenuProps>(
+  ({ className, children, ...props }, ref) => {
+    const { registerTrays } = useNavigation();
+
+    // Register trays with Navigation on mount/update
+    React.useEffect(() => {
+      const trayElements = React.Children.toArray(children)
+        .filter(
+          (child) =>
+            React.isValidElement(child) && child.type === NavigationTray,
+        )
+        .map((child, index) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(
+              child as React.ReactElement<NavigationTrayProps>,
+              {
+                _index: index + 1,
+                _renderTriggerOnly: false,
+              },
+            );
+          }
+          return child;
+        });
+      registerTrays(trayElements);
+    }, [children, registerTrays]);
 
     return (
-      <a ref={ref} href={href} {...props}>
-        {children}
-      </a>
+      <div ref={ref} className={cn("navigation-menu", className)} {...props}>
+        <ul className="navigation-menu__list">
+          {React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child) && child.type === NavigationTray) {
+              return React.cloneElement(
+                child as React.ReactElement<NavigationTrayProps>,
+                {
+                  _index: index + 1,
+                  _renderTriggerOnly: true,
+                },
+              );
+            }
+            return child;
+          })}
+        </ul>
+      </div>
     );
-  }
+  },
 );
-NavLink.displayName = "NavLink";
-
-interface NavigationProps {
-  navItems?: NavItem[];
-  isStrategy?: boolean;
-  Link?: LinkComponent; // Optional Link component from routing library
-  onLinkClick?: (href: string) => void; // Fallback callback for navigation
-  onClose?: () => void;
-  pathname: string;
+NavigationMenu.displayName = "NavigationMenu";
+
+// =============================================================================
+// NAVIGATION TRAY
+// =============================================================================
+
+interface NavigationTrayProps extends React.ComponentPropsWithoutRef<"div"> {
+  trigger: string;
+  title: string;
+  /** @internal */
+  _index?: number;
+  /** @internal */
+  _renderTriggerOnly?: boolean;
 }
 
-const ALPHA_PATH =
-  "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
-
-const PATH_LENGTH = 60;
+const NavigationTray = React.forwardRef<HTMLDivElement, NavigationTrayProps>(
+  (
+    {
+      className,
+      trigger,
+      title,
+      children,
+      _index,
+      _renderTriggerOnly,
+      ...props
+    },
+    ref,
+  ) => {
+    const { light, activeIndex, setActiveIndex, setIsOpen } = useNavigation();
+    const isActive = activeIndex === _index;
+
+    const handleMouseEnter = () => {
+      setIsOpen(true);
+      setActiveIndex(_index ?? null);
+    };
+
+    // Render just the trigger in the menu bar
+    if (_renderTriggerOnly) {
+      return (
+        <li className="navigation-tray-trigger" onMouseEnter={handleMouseEnter}>
+          <span
+            className={cn(
+              "body-small navigation-tray-trigger__text",
+              light
+                ? "navigation-tray-trigger__text--light"
+                : "navigation-tray-trigger__text--dark",
+            )}
+          >
+            {trigger}
+          </span>
+
+          {/* Animated underline indicator */}
+          {isActive && (
+            <motion.div
+              className="navigation-tray-trigger__indicator"
+              layoutId="nav-underline"
+              transition={{ duration: 0.2, ease: "easeOut" }}
+            >
+              <div className="navigation-tray-trigger__indicator-shape" />
+            </motion.div>
+          )}
+
+          {/* Static indicator for first item */}
+          {_index === 1 && !light && (
+            <div className="navigation-tray-trigger__static-indicator">
+              <div className="navigation-tray-trigger__static-indicator-shape" />
+            </div>
+          )}
+        </li>
+      );
+    }
 
-const AlphaIcon = ({ dark }: { dark?: boolean }) => {
-  if (dark) {
+    // Render the tray content
     return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="10"
-        viewBox="0 0 12 10"
-        fill="none"
-        className="mt-1.5"
-        style={{ overflow: "visible" }}
-      >
-        <path d={ALPHA_PATH} fill="currentColor" />
-        {/* Animated stroke trace */}
-        {/* <motion.path
-          d={ALPHA_PATH}
-          fill="none"
-          stroke="#282A31"
-          strokeWidth="0.4"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          initial={{ strokeDashoffset: PATH_LENGTH }}
-          animate={{ strokeDashoffset: -PATH_LENGTH }}
-          style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
-          transition={{
-            duration: 4,
-            repeat: Infinity,
-            ease: "linear",
+      <div ref={ref} className={cn("navigation-tray", className)} {...props}>
+        <h2
+          className="heading-xsmall navigation-tray__title"
+          style={{
+            background:
+              "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
+            WebkitBackgroundClip: "text",
+            WebkitTextFillColor: "transparent",
+            backgroundClip: "text",
           }}
-        /> */}
-      </svg>
+        >
+          {title}
+        </h2>
+        <div className="navigation-tray__content">{children}</div>
+      </div>
     );
-  }
+  },
+);
+NavigationTray.displayName = "NavigationTray";
+
+// =============================================================================
+// NAVIGATION COLUMN
+// =============================================================================
 
+interface NavigationColumnProps extends React.ComponentPropsWithoutRef<"div"> {
+  title: string;
+}
+
+const NavigationColumn = React.forwardRef<
+  HTMLDivElement,
+  NavigationColumnProps
+>(({ className, title, children, ...props }, ref) => {
+  const { light } = useNavigation();
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="10"
-      viewBox="0 0 12 10"
-      fill="none"
-      className="mt-1.5"
-      style={{ overflow: "visible" }}
-    >
-      {/* Base fill with gradient */}
-      <path
-        d={ALPHA_PATH}
-        fill="url(#paint0_linear_10081_30848)"
-        opacity="0.4"
-      />
-      {/* Animated stroke trace with gradient */}
-      <motion.path
-        d={ALPHA_PATH}
-        fill="none"
-        stroke="url(#stroke_gradient)"
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        initial={{ strokeDashoffset: PATH_LENGTH }}
-        animate={{ strokeDashoffset: -PATH_LENGTH }}
-        style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
-        transition={{
-          duration: 2,
-          repeat: Infinity,
-          repeatDelay: 8,
-          ease: "linear",
-        }}
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_10081_30848"
-          x1="-3.27254"
-          y1="4.99923"
-          x2="6.36738"
-          y2="-2.36962"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#8AEFDB" />
-          <stop offset="0.5" stopColor="#D4BACE" />
-          <stop offset="1" stopColor="#CBE0F1" />
-        </linearGradient>
-        <linearGradient
-          id="stroke_gradient"
-          x1="0"
-          y1="0"
-          x2="12"
-          y2="10"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#8AEFDB" />
-          <stop offset="0.5" stopColor="#D4BACE" />
-          <stop offset="1" stopColor="#CBE0F1" />
-        </linearGradient>
-      </defs>
-    </svg>
+    <div ref={ref} className={cn("navigation-column", className)} {...props}>
+      <h3
+        className={cn(
+          "overline-medium navigation-column__title",
+          light
+            ? "navigation-column__title--light"
+            : "navigation-column__title--dark",
+        )}
+      >
+        {title}
+      </h3>
+      <ul className="navigation-column__list">{children}</ul>
+    </div>
   );
-};
+});
+NavigationColumn.displayName = "NavigationColumn";
+
+// =============================================================================
+// NAVIGATION LINK
+// =============================================================================
+
+/**
+ * Navigation link component that supports custom routing via the asChild pattern.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <NavigationLink href="/about">About</NavigationLink>
+ * ```
+ *
+ * @example With Next.js Link (asChild pattern)
+ * ```tsx
+ * <NavigationLink asChild>
+ *   <Link href="/about">About</Link>
+ * </NavigationLink>
+ * ```
+ *
+ * @example Sub-item with bullet
+ * ```tsx
+ * <NavigationLink sub bullet="#0F748A">
+ *   Performance Rating
+ * </NavigationLink>
+ * ```
+ */
+interface NavigationLinkProps extends React.ComponentPropsWithoutRef<"a"> {
+  /** Use child element instead of anchor tag (composition pattern using Radix UI Slot) */
+  asChild?: boolean;
+  /** Render as sub-item with smaller text and bullet point */
+  sub?: boolean;
+  /** Hex color for bullet point (implies sub-item styling) */
+  bullet?: string;
+  /** Badge text displayed next to link (e.g., "PILOT") */
+  badge?: string;
+}
+
+const NavigationLink = React.forwardRef<HTMLAnchorElement, NavigationLinkProps>(
+  ({ className, asChild, sub, bullet, badge, children, ...props }, ref) => {
+    const { light } = useNavigation();
+    const Comp = asChild ? Slot : "a";
+
+    const isSubItem = sub || bullet;
+    const baseClassName = isSubItem
+      ? cn(
+          "body-small navigation-link--sub",
+          light ? "navigation-link--sub-light" : "navigation-link--sub-dark",
+        )
+      : cn(
+          "body-base navigation-link",
+          light ? "navigation-link--light" : "navigation-link--dark",
+        );
+
+    // Sub-item with bullet
+    if (isSubItem) {
+      const bulletElement = bullet ? (
+        <NavBullet color={bullet} />
+      ) : (
+        <div className="navigation-link__bullet" />
+      );
 
-export const Navigation: React.FC<NavigationProps> = ({
-  navItems,
-  isStrategy = false,
-  Link: LinkComponent,
-  onLinkClick,
-  onClose,
-  pathname,
-}) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<number | null>(null);
-
-  const containerRef = React.useRef<HTMLElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const menuItemsRef = React.useRef<HTMLDivElement>(null);
-  const overlayRef = React.useRef<HTMLDivElement>(null);
-
-  const isHomepage = pathname === "/";
-
-  const handleMouseLeave = () => {
-    setIsOpen(false);
-    setActiveItem(null);
-  };
-
-  const handleNavItemMouseEnter = (index: number) => {
-    setIsOpen(true);
-    setActiveItem(index + 1);
-  };
-
-  // Internal NavLink component that handles different routing scenarios
-  const NavLink: React.FC<{
-    href: string;
-    className?: string;
-    "aria-label"?: string;
-    children: React.ReactNode;
-  }> = ({ href, className, "aria-label": ariaLabel, children }) => {
-    // If Link component is provided, use it
-    if (LinkComponent) {
       return (
-        <LinkComponent href={href} className={className} aria-label={ariaLabel}>
-          {children}
-        </LinkComponent>
+        <li>
+          <div className="navigation-link__container">
+            {bulletElement}
+            <Comp ref={ref} className={cn(baseClassName, className)} {...props}>
+              {children}
+            </Comp>
+          </div>
+        </li>
       );
     }
 
-    // If onLinkClick callback is provided, use anchor with click handler
-    if (onLinkClick) {
+    // Regular link (possibly with badge)
+    const linkClassName = cn(
+      baseClassName,
+      badge && "navigation-link__badge-wrapper",
+      className,
+    );
+
+    // When using asChild with a badge, we need to wrap both in a container
+    // because Slot expects a single child
+    if (badge) {
       return (
-        <a
-          href={href}
-          className={className}
-          aria-label={ariaLabel}
-          onClick={(e) => {
-            e.preventDefault();
-            onLinkClick(href);
-          }}
-        >
-          {children}
-        </a>
+        <li>
+          <span className="navigation-link__badge-wrapper">
+            <Comp ref={ref} className={cn(baseClassName, className)} {...props}>
+              {children}
+            </Comp>
+            <span className="overline-small navigation-link__badge">
+              {badge}
+            </span>
+          </span>
+        </li>
       );
     }
 
-    // Default: plain anchor tag (browser navigation)
     return (
-      <a href={href} className={className} aria-label={ariaLabel}>
-        {children}
-      </a>
+      <li>
+        <Comp ref={ref} className={linkClassName} {...props}>
+          {children}
+        </Comp>
+      </li>
     );
-  };
+  },
+);
+NavigationLink.displayName = "NavigationLink";
+
+// =============================================================================
+// NAVIGATION ACTIONS (Right container)
+// =============================================================================
 
+const NavigationActions = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, children, ...props }, ref) => {
   return (
-    <nav
-      ref={containerRef}
-      className={cn("navigation", isStrategy && "navigation--strategy")}
-      data-strategy={isStrategy}
-      onMouseLeave={handleMouseLeave}
-    >
-      {!isStrategy && (
-        <div
-          ref={overlayRef}
-          className="navigation-overlay"
-          data-open={isOpen}
-        />
-      )}
-
-      <div className="navigation-container">
-        <div className="navigation-logo-container">
-          <AnimatePresence mode="popLayout">
-            {!isHomepage && (
-              <motion.div
-                layout
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.8 }}
-                transition={{ duration: 0.2, ease: "easeOut" }}
-                style={{ willChange: "transform, opacity" }}
-              >
-                <Button
-                  size="icon"
-                  className=" mr-6"
-                  onClick={() => onClose?.()}
-                >
-                  <UtilityClearRegular />
-                </Button>
-              </motion.div>
-            )}
-          </AnimatePresence>
+    <div ref={ref} className={cn("navigation-actions", className)} {...props}>
+      {children}
+    </div>
+  );
+});
+NavigationActions.displayName = "NavigationActions";
 
-          <motion.div
-            layout
-            transition={{ duration: 0.2, ease: "easeOut" }}
-          >
-            <NavLink
-              href="/"
-              className={cn("navigation-logo-link")}
-              data-strategy={isStrategy}
-              aria-label="Home"
-            >
-              <NavLogo dark={isStrategy} />
+// =============================================================================
+// NAVIGATION ACCOUNT
+// =============================================================================
 
-              <StandardLogo className={cn(!isStrategy ? "text-white" : "text-black")} />
-              <AlphaIcon dark={isStrategy} />
-            </NavLink>
-          </motion.div>
-        </div>
-
-        {!isStrategy ? (
-          <div className="navigation-nav-container">
-            <ul className="navigation-nav-list">
-              {navItems
-                ? navItems.map((item, index) => (
-                  <li
-                    key={index + 1}
-                    className="navigation-nav-item"
-                    onMouseEnter={() => handleNavItemMouseEnter(index)}
-                  >
-                    <span className="navigation-nav-link">{item.label}</span>
-
-                    {/* Underline */}
-                    {activeItem === index + 1 && (
-                      <motion.div
-                        id="underline"
-                        className="navigation-underline"
-                        layoutId="underline"
-                        transition={{ duration: 0.2, ease: "easeOut" }}
-                      >
-                        <div
-                          className="navigation-underline-circle navigation-underline-circle--gradient"
-                          style={{
-                            width: "10px",
-                            height: "5px",
-                            borderBottomLeftRadius: "100px",
-                            borderBottomRightRadius: "100px",
-                            borderBottom: "0",
-                            boxSizing: "border-box",
-                          }}
-                        />
-                      </motion.div>
-                    )}
-                    {index === 0 && (
-                      <div
-                        className="navigation-underline navigation-underline--static"
-                        style={{ transition: "all 0.2s ease-out" }}
-                      >
-                        <div
-                          className="navigation-underline-circle navigation-underline-circle--white"
-                          style={{
-                            width: "10px",
-                            height: "5px",
-                            borderTopLeftRadius: "100px",
-                            borderTopRightRadius: "100px",
-                            borderBottom: "0",
-                            boxSizing: "border-box",
-                          }}
-                        />
-                      </div>
-                    )}
-                  </li>
-                ))
-                : null}
-            </ul>
-          </div>
-        ) : null}
-
-        <div className="navigation-actions">
-          <NavLink
-            href="/"
-            aria-label="Account link"
-            className={cn("navigation-account-link", isStrategy && "navigation-account-link--strategy")}
-            data-open={isOpen}
-            data-strategy={isStrategy}
-          >
-            <NavAccount
-              className={cn(
-                "navigation-account-icon",
-                isStrategy
-                  ? "navigation-account-icon--strategy"
-                  : "navigation-account-icon--default",
-              )}
-            />
-          </NavLink>
-        </div>
-      </div>
+interface NavigationAccountProps extends React.ComponentPropsWithoutRef<"a"> {
+  asChild?: boolean;
+}
 
-      {isOpen && <div className="navigation-divider" />}
+const NavigationAccount = React.forwardRef<
+  HTMLAnchorElement,
+  NavigationAccountProps
+>(({ className, asChild, children, ...props }, ref) => {
+  const { light } = useNavigation();
+
+  const linkClassName = cn(
+    buttonVariants({ size: "icon" }),
+    "navigation-account",
+    light && "navigation-account--light",
+    className,
+  );
 
-      {/* Tray */}
-      <div ref={menuRef} className="navigation-tray" data-open={isOpen}>
-        <div className="navigation-tray-content">
-          <div ref={menuItemsRef} className="navigation-tray-grid">
-            <AnimatePresence mode="wait">
-              <motion.div
-                key={activeItem ? activeItem + 1 : "empty"}
-                initial={{ y: 10, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                exit={{ y: -10, opacity: 0 }}
-                transition={{ duration: 0.2 }}
-              >
-                {/* WELL Tray */}
-                {activeItem === 1 && (
-                  <div className="navigation-tray-section">
-                    <h2
-                      className="navigation-tray-heading"
-                      style={{
-                        background:
-                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                        backgroundClip: "text",
-                      }}
-                    >
-                      WELL sets the standard for people-first places
-                    </h2>
-
-                    <div className="navigation-tray-columns">
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Everything
-                        </h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Explore WELL
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Enroll in WELL
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              What's new
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          WHY WELL
-                        </h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Performance
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              ROI
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Impact
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Standard
-                        </h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Strategies
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Themes
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Milestones
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Network
-                        </h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Organizations
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              People
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Solutions
-                        </h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Products
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Services
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">Places</h3>
-                        <ul className="navigation-tray-column-list navigation-tray-column-list--spacing-5">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Locations
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Portfolios
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Pursuits Tray */}
-                {activeItem === 2 && (
-                  <div className="navigation-tray-section">
-                    <h2
-                      className="navigation-tray-heading"
-                      style={{
-                        background:
-                          "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
-                        backgroundClip: "text",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                      }}
-                    >
-                      WELL works everywhere, at any scale
-                    </h2>
-                    <div className="navigation-tray-columns">
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          SUBSCRIBE
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL at scale
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink href="/">
-                                <span className="navigation-tray-link-small">
-                                  Pricing
-                                </span>
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink href="/">
-                                <span className="navigation-tray-link-small">
-                                  Leaderboard
-                                </span>
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Certify
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL Certification
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink
-                              href="/"
-                              className="navigation-tray-link navigation-tray-link--with-badge"
-                            >
-                              WELL Residence
-                              <span className="navigation-tray-badge">
-                                PILOT
-                              </span>
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Get rated
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL Ratings
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#F3E7D8" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Health-Safety Rating
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#0F748A" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Performance Rating
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#17AA8D" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Equity Rating
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Network Tray */}
-                {activeItem === 3 && (
-                  <div className="navigation-tray-section">
-                    <h2
-                      className="navigation-tray-heading"
-                      style={{
-                        background:
-                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                      }}
-                    >
-                      Our network drives our movement
-                    </h2>
-
-                    <div className="navigation-tray-columns">
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">JOIN</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Membership
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Works with WELL
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#2E74AD" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Enterprise Provider
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#149EBD" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Product Provider
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <NavBullet color="#ED896F" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Performance Testing Provider
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">EARN</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL AP
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL Faculty
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* Knowledge Tray */}
-                {activeItem === 4 && (
-                  <div className="navigation-tray-section">
-                    <h2
-                      className="navigation-tray-heading"
-                      style={{
-                        background:
-                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                      }}
-                    >
-                      Learn from the experts on health
-                    </h2>
-
-                    <div className="navigation-tray-columns">
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">LEARN</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL Forum
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Threads
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Webcasts
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Trainings
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">ATTEND</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              WELL 2025
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Flagship events
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Thematic summits
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Regional summits
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          GUIDANCE
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Knowledge base
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Tutorials
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Guides
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                FAQs
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Resources
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Resource library
-                            </NavLink>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Technical tools
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Sales tools
-                              </NavLink>
-                            </div>
-                          </li>
-                          <li>
-                            <div className="navigation-tray-bullet-item">
-                              <div className="navigation-tray-bullet" />
-                              <NavLink
-                                href="/"
-                                className="navigation-tray-link-small"
-                              >
-                                Media
-                              </NavLink>
-                            </div>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                )}
-
-                {/* IWBI Tray */}
-                {activeItem === 5 && (
-                  <div className="navigation-tray-section">
-                    <h2
-                      className="navigation-tray-heading"
-                      style={{
-                        background:
-                          "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
-                        WebkitBackgroundClip: "text",
-                        WebkitTextFillColor: "transparent",
-                      }}
-                    >
-                      The International WELL Building Institute (IWBI)
-                    </h2>
-
-                    <div className="navigation-tray-columns">
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">About</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              IWBI
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Research
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Advocacy
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">Meet</h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Team
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Advisories
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Governance Council
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                      <div className="navigation-tray-column">
-                        <h3 className="navigation-tray-column-title">
-                          Explore
-                        </h3>
-                        <ul className="navigation-tray-column-list">
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Newsroom
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Jobs
-                            </NavLink>
-                          </li>
-                          <li>
-                            <NavLink href="/" className="navigation-tray-link">
-                              Blog
-                            </NavLink>
-                          </li>
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                )}
-              </motion.div>
-            </AnimatePresence>
-          </div>
-        </div>
-      </div>
-    </nav>
+  const defaultIcon = (
+    <NavAccount
+      className={
+        light
+          ? "navigation-account__icon--light"
+          : "navigation-account__icon--dark"
+      }
+    />
+  );
+
+  // When asChild, render the child with merged props
+  // If child has its own children, use those as icon; otherwise inject default icon
+  if (asChild && React.isValidElement(children)) {
+    const childElement = children as React.ReactElement<{
+      children?: React.ReactNode;
+    }>;
+    const hasChildContent = childElement.props.children != null;
+
+    return (
+      <Slot ref={ref} className={linkClassName} aria-label="Account" {...props}>
+        {hasChildContent
+          ? children
+          : React.cloneElement(childElement, {}, defaultIcon)}
+      </Slot>
+    );
+  }
+
+  return (
+    <a
+      ref={ref}
+      className={linkClassName}
+      aria-label="Account"
+      href="/account"
+      {...props}
+    >
+      {children || defaultIcon}
+    </a>
   );
+});
+NavigationAccount.displayName = "NavigationAccount";
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+
+export {
+  Navigation,
+  NavigationBrand,
+  NavigationBack,
+  NavigationLogo,
+  NavigationMenu,
+  NavigationTray,
+  NavigationColumn,
+  NavigationLink,
+  NavigationActions,
+  NavigationAccount,
 };