"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getStyles } from "../../../styles/styler.js";
import { DividerInternal } from "../../Divider/DividerInternal.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/client/Menu/Menu.Divider.tsx
/**
* **〰️ A Menu Divider component**
*
* @componentType Client component
*
* @description
* A divider component for the menu.
*
* @see The {@link https://uds.build/docs/components/menu-divider Menu.Divider Docs} for more info
*
* @example
* ```tsx
* 'use client'; // Next.js client component
*
* import { Menu, Button } from "@yahoo/uds";
*
* export function DividerExample() {
*   return (
*     <Menu>
*       <Menu.Trigger asChild>
*         <Button>Menu Options</Button>
*       </Menu.Trigger>
*       <Menu.Content>
*         <Menu.Item>Calendar</Menu.Item>
*         <Menu.Divider>Other actions</Menu.Divider>
*         <Menu.Item>Clipboard</Menu.Item>
*         <Menu.Item active>Active Item</Menu.Item>
*       </Menu.Content>
*     </Menu>
*   )
* }
* ```
*
* @usage
* Use MenuDivider to separate groups of menu items.
*
* @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)
**/
const MenuDivider = forwardRef(function MenuDivider({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
	const layerClassNames = {
		root: getStyles({
			menuitemDividerVariantRoot: "default",
			className
		}),
		text: getStyles({ menuitemDividerVariantText: "default" }),
		line: getStyles({ menuitemDividerVariantLine: "default" })
	};
	return /* @__PURE__ */ jsx(DividerInternal, {
		ref,
		role,
		variant: "inherit",
		contentPosition,
		gap,
		spacingVertical,
		spacingHorizontal,
		className: layerClassNames.root,
		layerClassNames,
		...props,
		children
	});
});
MenuDivider.displayName = "MenuDivider";

//#endregion
export { MenuDivider };