@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)!
86 lines (85 loc) • 8.93 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import "react";
import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__ from "@radix-ui/react-navigation-menu";
import * as __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__ from "class-variance-authority";
import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from "lucide-react";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
function NavigationMenu({ className, children, viewport = true, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Root, {
"data-slot": "navigation-menu",
"data-viewport": viewport,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
...props,
children: [
children,
viewport && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(NavigationMenuViewport, {})
]
});
}
function NavigationMenuList({ className, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.List, {
"data-slot": "navigation-menu-list",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("group flex flex-1 list-none items-center justify-center gap-1", className),
...props
});
}
function NavigationMenuItem({ className, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Item, {
"data-slot": "navigation-menu-item",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative", className),
...props
});
}
const navigationMenuTriggerStyle = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.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-[active=true]:bg-neutral-100/50 data-[state=open]:bg-neutral-100/50 data-[active=true]:text-neutral-900 ring-neutral-950/10 dark:ring-neutral-950/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 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-[active=true]:bg-neutral-800/50 dark:data-[state=open]:bg-neutral-800/50 dark:data-[active=true]:text-neutral-50 dark:ring-neutral-300/10 dark:dark:ring-neutral-300/20");
function NavigationMenuTrigger({ className, children, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Trigger, {
"data-slot": "navigation-menu-trigger",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)(navigationMenuTriggerStyle(), "group", className),
...props,
children: [
children,
"",
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Content, {
"data-slot": "navigation-menu-content",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.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 data-[state=open]:group-data-[viewport=false]/navigation-menu:animate-in data-[state=closed]:group-data-[viewport=false]/navigation-menu: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-sm group-data-[viewport=false]/navigation-menu:duration-200 focus:data-[slot=navigation-menu-link]:**:ring-0 focus:data-[slot=navigation-menu-link]:**:outline-hidden", className),
...props
});
}
function NavigationMenuViewport({ className, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("absolute top-full left-0 isolate z-50 flex justify-center"),
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Viewport, {
"data-slot": "navigation-menu-viewport",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.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-sm 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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Link, {
"data-slot": "navigation-menu-link",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 data-[active=true]:bg-neutral-100/50 data-[active=true]:text-neutral-900 ring-neutral-950/10 dark:ring-neutral-950/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-neutral-500 flex flex-col gap-1 rounded-xs p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[active=true]:bg-neutral-800/50 dark:data-[active=true]:text-neutral-50 dark:ring-neutral-300/10 dark:dark:ring-neutral-300/20 dark:[&_svg:not([class*='text-'])]:text-neutral-400", className),
...props
});
}
function NavigationMenuIndicator({ className, ...props }) {
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_navigation_menu_25af01f6__.Indicator, {
"data-slot": "navigation-menu-indicator",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.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__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.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