"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { divider } from "../divider/styles.js";
import { useMenuConfiguration } from "./MenuConfigurationProvider.js";
/**
 * **Client Component**
 *
 * This component renders a `<li role="separator">` with the divider styles. It
 * will also automatically render itself vertically instead of horizontally if
 * the menu is rendering horizontally.
 *
 * @since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
 */ export const MenuItemSeparator = /*#__PURE__*/ forwardRef(function MenuItemSeparator(props, ref) {
    const { className, inset, vertical: propVertical, children, ...remaining } = props;
    const horizontal = useMenuConfiguration().horizontal;
    const vertical = propVertical ?? horizontal;
    return /*#__PURE__*/ _jsx("li", {
        ...remaining,
        "aria-orientation": vertical ? "vertical" : undefined,
        ref: ref,
        role: "separator",
        className: divider({
            inset: inset && !vertical,
            vertical,
            className
        }),
        children: children
    });
});

//# sourceMappingURL=MenuItemSeparator.js.map