@baseplate-dev/ui-components/dist/components/ui/navigation-menu/navigation-menu.js

Shared UI component library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cva } from 'class-variance-authority';
import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
import { MdExpandMore } from 'react-icons/md';
import { cn } from '#src/utils/index.js';
/**
 * A collection of links for navigating websites.
 *
 * Changes:
 * - Added ability to use `vertical` orientation
 *
 * https://ui.shadcn.com/docs/components/navigation-menu
 */
function NavigationMenu({ className, children, viewport = true, ...props }) {
    return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', 'data-[orientation="vertical"]:max-w-none data-[orientation="vertical"]:items-start data-[orientation="vertical"]:justify-start [&[data-orientation="vertical"]>*]:w-full', className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
}
function NavigationMenuList({ className, ...props }) {
    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('group flex flex-1 list-none items-center justify-center gap-1', 'data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:items-stretch', className), ...props }));
}
function NavigationMenuItem({ className, ...props }) {
    return (_jsx(NavigationMenuPrimitive.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-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent', {
    variants: {
        size: {
            default: 'px-4 py-2',
            skinny: 'p-2',
        },
    },
});
function NavigationMenuTrigger({ className, children, ...props }) {
    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(MdExpandMore, { className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
}
function NavigationMenuContent({ className, ...props }) {
    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('top-0 left-0 w-full p-2 pr-2.5 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 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto', '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:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground 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 group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95', className), ...props }));
}
function NavigationMenuViewport({ className, ...props }) {
    return (_jsx("div", { className: cn('absolute top-full left-0 isolate z-50 flex justify-center'), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', className), ...props }) }));
}
function NavigationMenuLink({ className, ...props }) {
    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm font-medium transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props }));
}
function NavigationMenuItemWithLink({ asChild, children, ...props }) {
    return (_jsx(NavigationMenuItem, { asChild: true, ...props, children: _jsx(NavigationMenuLink, { asChild: asChild, children: children }) }));
}
function NavigationMenuIndicator({ className, ...props }) {
    return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn('top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in', className), ...props, children: _jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" }) }));
}
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuItemWithLink, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };
//# sourceMappingURL=navigation-menu.js.map