50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2b9a,"use client"; import { cn } from "@/lib/utils"; import { ChevronDown } from "lucide-react"; import React, { createContext, forwardRef, useContext, useRef, useState, } from "react"; import { getThemeStyles } from "./navigation-menu-theme"; // ========================================== // THEME & CONFIGURATION // ========================================== export type NavColor = "indigo" | "rose" | "emerald" | "zinc" | (string & {}); export type NavVariant = "default" | "minimal" | "glass"; // ========================================== // CONTEXT // ========================================== interface NavContextType { activeValue: string | null; setActiveValue: (val: string | null) => void; hoveredValue: string | null; setHoveredValue: (val: string | null) => void; indicatorStyle: React.CSSProperties; setIndicatorStyle: React.Dispatch>; theme: Record; variant: NavVariant; listRef: React.RefObject; } const NavContext = createContext(null); const useNavContext = () => { const ctx = useContext(NavContext); if (!ctx) throw new Error("Navigation components must be used within NavigationMenu"); return ctx; }; const NavItemContext = createContext<{ value: string } | null>(null); const useNavItemContext = () => { const ctx = useContext(NavItemContext); if (!ctx) throw new Error( "NavigationMenuItem components must be used within NavigationMenuItem", ); return ctx; }; // ========================================== // COMPONENTS // ========================================== export interface NavigationMenuProps extends React.HTMLAttributes { color?: NavColor; variant?: NavVariant; } export const NavigationMenu = forwardRef( ( { children, color = "primary", variant = "default", className, ...props }, ref, ) => { const [activeValue, setActiveValue] = useState(null); const [hoveredValue, setHoveredValue] = useState(null); const [indicatorStyle, setIndicatorStyle] = useState({ opacity: 0, }); const listRef = useRef(null); const { theme, style } = getThemeStyles(color as string); // Close dropdowns when mouse leaves the entire nav area const handleMouseLeave = () => { setActiveValue(null); setHoveredValue(null); setIndicatorStyle((prev) => ({ ...prev, opacity: 0 })); }; return ( ); }, ); NavigationMenu.displayName = "NavigationMenu"; export const NavigationMenuList = forwardRef< HTMLUListElement, React.HTMLAttributes >(({ children, className, ...props }, ref) => { const { listRef, variant } = useNavContext(); const variantStyles = { default: "bg-background border border-border shadow-sm", glass: "bg-background/60 backdrop-blur-xl border border-foreground/10 shadow-lg", minimal: "bg-transparent border-none", }; return (

{ if (typeof ref === "function") ref(node); else if (ref) ref.current = node; listRef.current = node; }} className={cn( "group flex flex-nowrap flex-1 list-none items-center justify-center gap-0.5 sm:gap-1 max-w-full", className, )} {...props} > {children}

); }); NavigationMenuList.displayName = "NavigationMenuList"; export const NavigationMenuItem = forwardRef< HTMLLIElement, React.HTMLAttributes & { value: string } >(({ children, className, value, ...props }, ref) => { return ( {/* ── THE FIX: Removed 'relative' from li so dropdowns center to the entire

! ── */}

{children}

); }); NavigationMenuItem.displayName = "NavigationMenuItem"; export const NavigationMenuTrigger = forwardRef< HTMLButtonElement, React.ButtonHTMLAttributes >(({ children, className, ...props }, ref) => { const { activeValue, setActiveValue, setHoveredValue, setIndicatorStyle, listRef, } = useNavContext(); const { value } = useNavItemContext(); const triggerRef = useRef(null); const isActive = activeValue === value; const updateIndicator = () => { if (triggerRef.current && listRef.current) { const triggerRect = triggerRef.current.getBoundingClientRect(); const listRect = listRef.current.getBoundingClientRect(); setIndicatorStyle({ left: triggerRect.left - listRect.left, width: triggerRect.width, opacity: 1, }); } }; // ── TOUCH-SAFE HOVER (Only triggers for real mouse cursors) ────────── const handlePointerEnter = (e: React.PointerEvent) => { if (e.pointerType === "mouse") { setActiveValue(value); setHoveredValue(value); updateIndicator(); } }; // ── TOUCH/CLICK TOGGLE SUPPORT ─────────────────────────────────────── const handleClick = () => { if (isActive) { setActiveValue(null); setHoveredValue(null); setIndicatorStyle((prev) => ({ ...prev, opacity: 0 })); } else { setActiveValue(value); setHoveredValue(value); updateIndicator(); } }; return ( ); }); NavigationMenuTrigger.displayName = "NavigationMenuTrigger"; export const NavigationMenuContent = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ children, className, ...props }, ref) => { const { activeValue, variant } = useNavContext(); const { value } = useNavItemContext(); const isActive = activeValue === value; // A plain popover is the same white as most pages, so the panel reads as // part of the page. It wears a whisper of the accent (relative OKLCH, as // Folder does), a tinted edge and a layered drop shadow to lift it off. const tintedPanel = "text-popover-foreground border bg-[oklch(from_var(--nav-accent)_0.978_calc(c*0.1)_h)] border-[oklch(from_var(--nav-accent)_0.9_calc(c*0.22)_h)] dark:bg-[oklch(from_var(--nav-accent)_0.21_calc(c*0.1)_h)] dark:border-foreground/10"; const variantStyles = { default: cn( tintedPanel, "shadow-[0_2px_4px_rgb(0_0_0/0.04),0_24px_48px_-16px_rgb(0_0_0/0.22)]", ), glass: "bg-popover/80 text-popover-foreground backdrop-blur-2xl border border-foreground/10 shadow-[0_2px_4px_rgb(0_0_0/0.05),0_28px_56px_-16px_rgb(0_0_0/0.28)]", minimal: cn( tintedPanel, "shadow-[0_1px_2px_rgb(0_0_0/0.04),0_16px_32px_-16px_rgb(0_0_0/0.16)]", ), }; return (

{children}

); }); NavigationMenuContent.displayName = "NavigationMenuContent"; export const NavigationMenuLink = forwardRef< HTMLAnchorElement, React.AnchorHTMLAttributes & { active?: boolean } >(({ children, className, active, ...props }, ref) => { const navCtx = useContext(NavContext); const theme = navCtx?.theme; return ( {children} ); }); NavigationMenuLink.displayName = "NavigationMenuLink"; export const NavigationMenuIndicator = forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { const { indicatorStyle, theme } = useNavContext(); return (

); }); NavigationMenuIndicator.displayName = "NavigationMenuIndicator"; 53:T9d9,"use client"; import React from "react"; const colorThemes: Record> = { primary: { bg: "bg-primary text-primary-foreground", text: "text-primary", bgSoft: "bg-primary/10", border: "border-primary/30", }, indigo: { bg: "bg-indigo-600 text-white", text: "text-indigo-600 dark:text-indigo-400", bgSoft: "bg-indigo-50 dark:bg-indigo-500/10", border: "border-indigo-200 dark:border-indigo-800", }, rose: { bg: "bg-rose-600 text-white", text: "text-rose-600 dark:text-rose-400", bgSoft: "bg-rose-50 dark:bg-rose-500/10", border: "border-rose-200 dark:border-rose-800", }, emerald: { bg: "bg-emerald-600 text-white", text: "text-emerald-600 dark:text-emerald-400", bgSoft: "bg-emerald-50 dark:bg-emerald-500/10", border: "border-emerald-200 dark:border-emerald-800", }, zinc: { bg: "bg-zinc-900 text-white dark:bg-zinc-100 dark:text-zinc-900", text: "text-zinc-900 dark:text-zinc-100", bgSoft: "bg-zinc-100 dark:bg-zinc-800/50", border: "border-zinc-200 dark:border-zinc-800", }, }; const hexToRgb = (hex: string) => { let cleanHex = hex.replace(/^#/, ""); if (cleanHex.length === 3) cleanHex = cleanHex .split("") .map((x) => x + x) .join(""); const result = /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(cleanHex); return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : "99, 102, 241"; }; // One CSS colour per theme key, exposed as `--nav-accent` so surfaces can be // tinted from it with relative OKLCH / color-mix whatever the colour source. const accentColors: Record = { primary: "var(--primary)", indigo: "#4f46e5", rose: "#e11d48", emerald: "#059669", zinc: "#52525b", }; export const getThemeStyles = (color: string) => { if (color && color.startsWith("#")) { const rgb = hexToRgb(color); return { theme: { bg: "bg-[var(--nav-color)] text-white", text: "text-[var(--nav-color)]", bgSoft: "bg-[rgba(var(--nav-color-rgb),0.1)]", border: "border-[rgba(var(--nav-color-rgb),0.2)]", }, style: { "--nav-color": color, "--nav-color-rgb": rgb, "--nav-accent": color, } as React.CSSProperties, }; } return { theme: colorThemes[color] || colorThemes.primary, style: { "--nav-accent": accentColors[color] ?? accentColors.primary, } as React.CSSProperties, }; }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@avara-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/custom/blocks/NavigationMenu.tsx","content":"$52","type":"registry:component","target":"components/custom/blocks/NavigationMenu.tsx"},{"path":"src/components/custom/blocks/navigation-menu-theme.ts","content":"$53","type":"registry:component","target":"components/custom/blocks/navigation-menu-theme.ts"}],"className":"h-[70svh] min-h-80"}]]}]