@arolariu/components/dist/components/ui/menubar.js

🎨 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! ⚡

"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Menu } from "@base-ui/react/menu";
import { Menubar } from "@base-ui/react/menubar";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { Check, ChevronRight, Circle } from "lucide-react";
import { cn } from "../../lib/utilities.js";
import menubar_module from "./menubar.module.js";
import * as __rspack_external_react from "react";
const MenubarMenu = Menu.Root;
const MenubarGroup = Menu.Group;
const MenubarPortal = Menu.Portal;
const MenubarRadioGroup = Menu.RadioGroup;
const MenubarSub = Menu.SubmenuRoot;
function menubar_Menubar(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menubar, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.root, className)
            }, {})
        }),
        children: children
    });
}
const MenubarTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Trigger, {
        ref: ref,
        ...otherProps,
        render: useRender({
            defaultTagName: "button",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.trigger, className)
            }, {})
        }),
        children: children
    });
});
function MenubarSubTrigger(props) {
    const { className, children, inset = false, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.item, menubar_module.subTrigger, inset && menubar_module.inset, className)
            }, {})
        }),
        children: [
            children,
            /*#__PURE__*/ jsx(ChevronRight, {
                className: menubar_module.subTriggerIcon
            })
        ]
    });
}
function MenubarSubContent(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Positioner, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            props: mergeProps({
                className: menubar_module.positioner
            }, {})
        }),
        children: /*#__PURE__*/ jsx(Menu.Popup, {
            render: useRender({
                defaultTagName: "div",
                render: render,
                props: mergeProps({
                    className: cn(menubar_module.content, className)
                }, {})
            }),
            children: children
        })
    });
}
const MenubarContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { alignOffset = -4, className, children, render, sideOffset = 8, ...otherProps } = props;
    return /*#__PURE__*/ jsx(MenubarPortal, {
        children: /*#__PURE__*/ jsx(Menu.Positioner, {
            alignOffset: alignOffset,
            sideOffset: sideOffset,
            ...otherProps,
            render: useRender({
                defaultTagName: "div",
                props: mergeProps({
                    className: menubar_module.positioner
                }, {})
            }),
            children: /*#__PURE__*/ jsx(Menu.Popup, {
                ref: ref,
                render: useRender({
                    defaultTagName: "div",
                    render: render,
                    props: mergeProps({
                        className: cn(menubar_module.content, className)
                    }, {})
                }),
                children: children
            })
        })
    });
});
function MenubarItem(props) {
    const { className, children, inset = false, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Item, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.item, inset && menubar_module.inset, className)
            }, {})
        }),
        children: children
    });
}
function MenubarCheckboxItem(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.item, menubar_module.indicatorItem, className)
            }, {})
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: menubar_module.indicatorSlot,
                children: /*#__PURE__*/ jsx(Menu.CheckboxItemIndicator, {
                    children: /*#__PURE__*/ jsx(Check, {
                        className: menubar_module.indicatorIcon
                    })
                })
            }),
            children
        ]
    });
}
function MenubarRadioItem(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Menu.RadioItem, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.item, menubar_module.indicatorItem, className)
            }, {})
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: menubar_module.indicatorSlot,
                children: /*#__PURE__*/ jsx(Menu.RadioItemIndicator, {
                    children: /*#__PURE__*/ jsx(Circle, {
                        className: menubar_module.radioIndicatorIcon
                    })
                })
            }),
            children
        ]
    });
}
function MenubarLabel(props) {
    const { className, children, inset = false, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.GroupLabel, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.label, inset && menubar_module.inset, className)
            }, {})
        }),
        children: children
    });
}
function MenubarSeparator(props) {
    const { className, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Separator, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(menubar_module.separator, className)
            }, {})
        })
    });
}
function MenubarShortcut(props) {
    const { asChild = false, children, className, render, ...otherProps } = props;
    const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
    return useRender({
        defaultTagName: "span",
        render: renderProp,
        props: mergeProps({
            className: cn(menubar_module.shortcut, className)
        }, otherProps, {
            children: renderProp ? void 0 : children
        })
    });
}
MenubarMenu.displayName = "MenubarMenu";
MenubarGroup.displayName = "MenubarGroup";
MenubarPortal.displayName = "MenubarPortal";
MenubarRadioGroup.displayName = "MenubarRadioGroup";
MenubarSub.displayName = "MenubarSub";
menubar_Menubar.displayName = "Menubar";
MenubarTrigger.displayName = "MenubarTrigger";
MenubarSubTrigger.displayName = "MenubarSubTrigger";
MenubarSubContent.displayName = "MenubarSubContent";
MenubarContent.displayName = "MenubarContent";
MenubarItem.displayName = "MenubarItem";
MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
MenubarRadioItem.displayName = "MenubarRadioItem";
MenubarLabel.displayName = "MenubarLabel";
MenubarSeparator.displayName = "MenubarSeparator";
MenubarShortcut.displayName = "MenubarShortcut";
export { MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, menubar_Menubar as Menubar };

//# sourceMappingURL=menubar.js.map