@arolariu/components/dist/components/ui/dropdown-menu.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 { 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 dropdown_menu_module from "./dropdown-menu.module.js";
import * as __rspack_external_react from "react";
function DropdownMenu(props) {
    return /*#__PURE__*/ jsx(Menu.Root, {
        ...props
    });
}
const DropdownMenuGroup = Menu.Group;
const DropdownMenuPortal = Menu.Portal;
const DropdownMenuRadioGroup = Menu.RadioGroup;
const DropdownMenuSub = Menu.SubmenuRoot;
const DropdownMenuTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { asChild = false, children, className, render, ...otherProps } = props;
    const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
    return /*#__PURE__*/ jsx(Menu.Trigger, {
        ref: ref,
        ...otherProps,
        render: useRender({
            defaultTagName: "button",
            render: renderProp,
            props: mergeProps({
                className
            }, {})
        }),
        children: renderProp ? void 0 : children
    });
});
function DropdownMenuSubTrigger(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(dropdown_menu_module.item, dropdown_menu_module.subTrigger, inset && dropdown_menu_module.inset, className)
            }, {})
        }),
        children: [
            children,
            /*#__PURE__*/ jsx(ChevronRight, {
                className: dropdown_menu_module.subTriggerIcon
            })
        ]
    });
}
function DropdownMenuSubContent(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Positioner, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            props: mergeProps({
                className: dropdown_menu_module.positioner
            }, {})
        }),
        children: /*#__PURE__*/ jsx(Menu.Popup, {
            render: useRender({
                defaultTagName: "div",
                render: render,
                props: mergeProps({
                    className: cn(dropdown_menu_module.content, className)
                }, {})
            }),
            children: children
        })
    });
}
const DropdownMenuContent = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>{
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(DropdownMenuPortal, {
        children: /*#__PURE__*/ jsx(Menu.Positioner, {
            ...otherProps,
            render: useRender({
                defaultTagName: "div",
                props: mergeProps({
                    className: dropdown_menu_module.positioner
                }, {})
            }),
            children: /*#__PURE__*/ jsx(Menu.Popup, {
                ref: ref,
                render: useRender({
                    defaultTagName: "div",
                    render: render,
                    props: mergeProps({
                        className: cn(dropdown_menu_module.content, className)
                    }, {})
                }),
                children: children
            })
        })
    });
});
function DropdownMenuItem(props) {
    const { asChild = false, children, className, inset = false, render, ...otherProps } = props;
    const renderProp = asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children) ? children : render;
    return /*#__PURE__*/ jsx(Menu.Item, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: renderProp,
            props: mergeProps({
                className: cn(dropdown_menu_module.item, inset && dropdown_menu_module.inset, className)
            }, {})
        }),
        children: renderProp ? void 0 : children
    });
}
function DropdownMenuCheckboxItem(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(dropdown_menu_module.item, dropdown_menu_module.indicatorItem, className)
            }, {})
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: dropdown_menu_module.indicatorSlot,
                children: /*#__PURE__*/ jsx(Menu.CheckboxItemIndicator, {
                    children: /*#__PURE__*/ jsx(Check, {
                        className: dropdown_menu_module.indicatorIcon
                    })
                })
            }),
            children
        ]
    });
}
function DropdownMenuRadioItem(props) {
    const { className, children, render, ...otherProps } = props;
    return /*#__PURE__*/ jsxs(Menu.RadioItem, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(dropdown_menu_module.item, dropdown_menu_module.indicatorItem, className)
            }, {})
        }),
        children: [
            /*#__PURE__*/ jsx("span", {
                className: dropdown_menu_module.indicatorSlot,
                children: /*#__PURE__*/ jsx(Menu.RadioItemIndicator, {
                    children: /*#__PURE__*/ jsx(Circle, {
                        className: dropdown_menu_module.radioIndicatorIcon
                    })
                })
            }),
            children
        ]
    });
}
function DropdownMenuLabel(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(dropdown_menu_module.label, inset && dropdown_menu_module.inset, className)
            }, {})
        }),
        children: children
    });
}
function DropdownMenuSeparator(props) {
    const { className, render, ...otherProps } = props;
    return /*#__PURE__*/ jsx(Menu.Separator, {
        ...otherProps,
        render: useRender({
            defaultTagName: "div",
            render: render,
            props: mergeProps({
                className: cn(dropdown_menu_module.separator, className)
            }, {})
        })
    });
}
function DropdownMenuShortcut(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(dropdown_menu_module.shortcut, className)
        }, otherProps, {
            children: renderProp ? void 0 : children
        })
    });
}
DropdownMenu.displayName = "DropdownMenu";
DropdownMenuGroup.displayName = "DropdownMenuGroup";
DropdownMenuPortal.displayName = "DropdownMenuPortal";
DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
DropdownMenuSub.displayName = "DropdownMenuSub";
DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
DropdownMenuContent.displayName = "DropdownMenuContent";
DropdownMenuItem.displayName = "DropdownMenuItem";
DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
DropdownMenuLabel.displayName = "DropdownMenuLabel";
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

//# sourceMappingURL=dropdown-menu.js.map