@arolariu/components/dist/esm/components/ui/navigation-menu.js

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import "react";
import { Content, Indicator, Item, Link, List, Root, Trigger, Viewport } from "@radix-ui/react-navigation-menu";
import { cva } from "class-variance-authority";
import { ChevronDownIcon } from "lucide-react";
import { cn } from "../../lib/utils.js";
function NavigationMenu({ className, children, viewport = true, ...props }) {
    return /*#__PURE__*/ jsxs(Root, {
        "data-slot": "navigation-menu",
        "data-viewport": viewport,
        className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
        ...props,
        children: [
            children,
            viewport && /*#__PURE__*/ jsx(NavigationMenuViewport, {})
        ]
    });
}
function NavigationMenuList({ className, ...props }) {
    return /*#__PURE__*/ jsx(List, {
        "data-slot": "navigation-menu-list",
        className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
        ...props
    });
}
function NavigationMenuItem({ className, ...props }) {
    return /*#__PURE__*/ jsx(Item, {
        "data-slot": "navigation-menu-item",
        className: cn("relative", className),
        ...props
    });
}
const navigationMenuTriggerStyle = cva("group inline-flex h-9 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-neutral-100 data-[state=open]:text-neutral-900 data-[state=open]:focus:bg-neutral-100 data-[state=open]:bg-neutral-100/50 focus-visible:ring-neutral-950/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:hover:bg-neutral-800 dark:data-[state=open]:text-neutral-50 dark:data-[state=open]:focus:bg-neutral-800 dark:data-[state=open]:bg-neutral-800/50 dark:focus-visible:ring-neutral-300/50");
function NavigationMenuTrigger({ className, children, ...props }) {
    return /*#__PURE__*/ jsxs(Trigger, {
        "data-slot": "navigation-menu-trigger",
        className: cn(navigationMenuTriggerStyle(), "group", className),
        ...props,
        children: [
            children,
            "",
            /*#__PURE__*/ jsx(ChevronDownIcon, {
                className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
                "aria-hidden": "true"
            })
        ]
    });
}
function NavigationMenuContent({ className, ...props }) {
    return /*#__PURE__*/ jsx(Content, {
        "data-slot": "navigation-menu-content",
        className: cn("data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", className),
        ...props
    });
}
function NavigationMenuViewport({ className, ...props }) {
    return /*#__PURE__*/ jsx("div", {
        className: cn("absolute top-full left-0 isolate z-50 flex justify-center"),
        children: /*#__PURE__*/ jsx(Viewport, {
            "data-slot": "navigation-menu-viewport",
            className: cn("origin-top-center bg-white text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-neutral-200 shadow md:w-[var(--radix-navigation-menu-viewport-width)] dark:bg-neutral-950 dark:text-neutral-50 dark:border-neutral-800", className),
            ...props
        })
    });
}
function NavigationMenuLink({ className, ...props }) {
    return /*#__PURE__*/ jsx(Link, {
        "data-slot": "navigation-menu-link",
        className: cn("data-[active=true]:focus:bg-neutral-100 data-[active=true]:hover:bg-neutral-100 data-[active=true]:bg-neutral-100/50 data-[active=true]:text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 focus-visible:ring-neutral-950/50 [&_svg:not([class*='text-'])]:text-neutral-500 flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 dark:data-[active=true]:focus:bg-neutral-800 dark:data-[active=true]:hover:bg-neutral-800 dark:data-[active=true]:bg-neutral-800/50 dark:data-[active=true]:text-neutral-50 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:focus-visible:ring-neutral-300/50 dark:[&_svg:not([class*='text-'])]:text-neutral-400", className),
        ...props
    });
}
function NavigationMenuIndicator({ className, ...props }) {
    return /*#__PURE__*/ jsx(Indicator, {
        "data-slot": "navigation-menu-indicator",
        className: cn("data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", className),
        ...props,
        children: /*#__PURE__*/ jsx("div", {
            className: "bg-neutral-200 relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md dark:bg-neutral-800"
        })
    });
}
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };

//# sourceMappingURL=navigation-menu.js.map