@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
155 lines (154 loc) • 6.2 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { mergeProps } from "@base-ui/react/merge-props";
import { NavigationMenu } from "@base-ui/react/navigation-menu";
import { useRender } from "@base-ui/react/use-render";
import { ChevronDown } from "lucide-react";
import { cn } from "../../lib/utilities.js";
import navigation_menu_module from "./navigation-menu.module.js";
import * as __rspack_external_react from "react";
function navigationMenuTriggerStyle(className) {
return cn(navigation_menu_module.trigger, className);
}
function navigation_menu_NavigationMenu(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsxs(NavigationMenu.Root, {
...otherProps,
render: useRender({
defaultTagName: "nav",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.root, className)
}, {})
}),
children: [
children,
/*#__PURE__*/ jsx(NavigationMenuViewport, {})
]
});
}
function NavigationMenuList(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(NavigationMenu.List, {
...otherProps,
render: useRender({
defaultTagName: "ul",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.list, className)
}, {})
}),
children: children
});
}
const NavigationMenuItem = NavigationMenu.Item;
const NavigationMenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsxs(NavigationMenu.Trigger, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "button",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.trigger, className)
}, {})
}),
children: [
children,
/*#__PURE__*/ jsx(ChevronDown, {
className: navigation_menu_module.triggerIcon
})
]
});
});
const NavigationMenuContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(NavigationMenu.Content, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.content, className)
}, {})
}),
children: children
});
});
const NavigationMenuLink = /*#__PURE__*/ __rspack_external_react.forwardRef((props, forwardedRef)=>{
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx(NavigationMenu.Link, {
...otherProps,
ref: forwardedRef,
render: useRender({
defaultTagName: "a",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.link, className)
}, {})
}),
children: children
});
});
function NavigationMenuViewport(props) {
const { className, children, render, ...otherProps } = props;
return /*#__PURE__*/ jsx("div", {
className: navigation_menu_module.viewportWrapper,
children: /*#__PURE__*/ jsx(NavigationMenu.Portal, {
children: /*#__PURE__*/ jsx(NavigationMenu.Positioner, {
render: useRender({
defaultTagName: "div",
props: mergeProps({
className: navigation_menu_module.positioner
}, {})
}),
children: /*#__PURE__*/ jsx(NavigationMenu.Popup, {
render: useRender({
defaultTagName: "div",
props: mergeProps({
className: navigation_menu_module.popup
}, {})
}),
children: /*#__PURE__*/ jsx(NavigationMenu.Viewport, {
...otherProps,
render: useRender({
defaultTagName: "div",
render: render,
props: mergeProps({
className: cn(navigation_menu_module.viewport, className)
}, {})
}),
children: children
})
})
})
})
});
}
function NavigationMenuIndicator(props) {
const { asChild = false, children, className, render, ...otherProps } = props;
const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
return useRender({
defaultTagName: "div",
render: renderProp,
props: mergeProps({
className: cn(navigation_menu_module.indicator, className)
}, otherProps, {
children: renderProp ? void 0 : children ?? /*#__PURE__*/ jsx("div", {
className: navigation_menu_module.indicatorInner
})
})
});
}
navigation_menu_NavigationMenu.displayName = "NavigationMenu";
NavigationMenuList.displayName = "NavigationMenuList";
NavigationMenuItem.displayName = "NavigationMenuItem";
NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
NavigationMenuContent.displayName = "NavigationMenuContent";
NavigationMenuLink.displayName = "NavigationMenuLink";
NavigationMenuViewport.displayName = "NavigationMenuViewport";
NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
export { NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle, navigation_menu_NavigationMenu as NavigationMenu };
//# sourceMappingURL=navigation-menu.js.map