@arolariu/components
Version:
🎨 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! ⚡
144 lines (143 loc) • 10.4 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
NavigationMenuViewport: ()=>NavigationMenuViewport,
navigationMenuTriggerStyle: ()=>navigationMenuTriggerStyle,
NavigationMenuContent: ()=>NavigationMenuContent,
NavigationMenu: ()=>NavigationMenu,
NavigationMenuItem: ()=>NavigationMenuItem,
NavigationMenuLink: ()=>NavigationMenuLink,
NavigationMenuTrigger: ()=>NavigationMenuTrigger,
NavigationMenuIndicator: ()=>NavigationMenuIndicator,
NavigationMenuList: ()=>NavigationMenuList
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
require("react");
const react_navigation_menu_namespaceObject = require("@radix-ui/react-navigation-menu");
const external_class_variance_authority_namespaceObject = require("class-variance-authority");
const external_lucide_react_namespaceObject = require("lucide-react");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
function NavigationMenu({ className, children, viewport = true, ...props }) {
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_navigation_menu_namespaceObject.Root, {
"data-slot": "navigation-menu",
"data-viewport": viewport,
className: (0, utils_cjs_namespaceObject.cn)("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
...props,
children: [
children,
viewport && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(NavigationMenuViewport, {})
]
});
}
function NavigationMenuList({ className, ...props }) {
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.List, {
"data-slot": "navigation-menu-list",
className: (0, utils_cjs_namespaceObject.cn)("group flex flex-1 list-none items-center justify-center gap-1", className),
...props
});
}
function NavigationMenuItem({ className, ...props }) {
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Item, {
"data-slot": "navigation-menu-item",
className: (0, utils_cjs_namespaceObject.cn)("relative", className),
...props
});
}
const navigationMenuTriggerStyle = (0, external_class_variance_authority_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_navigation_menu_namespaceObject.Trigger, {
"data-slot": "navigation-menu-trigger",
className: (0, utils_cjs_namespaceObject.cn)(navigationMenuTriggerStyle(), "group", className),
...props,
children: [
children,
"",
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Content, {
"data-slot": "navigation-menu-content",
className: (0, utils_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
className: (0, utils_cjs_namespaceObject.cn)("absolute top-full left-0 isolate z-50 flex justify-center"),
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Viewport, {
"data-slot": "navigation-menu-viewport",
className: (0, utils_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Link, {
"data-slot": "navigation-menu-link",
className: (0, utils_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(react_navigation_menu_namespaceObject.Indicator, {
"data-slot": "navigation-menu-indicator",
className: (0, utils_cjs_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("div", {
className: "bg-neutral-200 relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md dark:bg-neutral-800"
})
});
}
exports.NavigationMenu = __webpack_exports__.NavigationMenu;
exports.NavigationMenuContent = __webpack_exports__.NavigationMenuContent;
exports.NavigationMenuIndicator = __webpack_exports__.NavigationMenuIndicator;
exports.NavigationMenuItem = __webpack_exports__.NavigationMenuItem;
exports.NavigationMenuLink = __webpack_exports__.NavigationMenuLink;
exports.NavigationMenuList = __webpack_exports__.NavigationMenuList;
exports.NavigationMenuTrigger = __webpack_exports__.NavigationMenuTrigger;
exports.NavigationMenuViewport = __webpack_exports__.NavigationMenuViewport;
exports.navigationMenuTriggerStyle = __webpack_exports__.navigationMenuTriggerStyle;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"NavigationMenu",
"NavigationMenuContent",
"NavigationMenuIndicator",
"NavigationMenuItem",
"NavigationMenuLink",
"NavigationMenuList",
"NavigationMenuTrigger",
"NavigationMenuViewport",
"navigationMenuTriggerStyle"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=navigation-menu.cjs.map