"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { getStyles } from "../../../styles/styler.js";
import { MenuItemBase } from "./Menu.ItemBase.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
import { MenuItem as MenuItem$1 } from "@ariakit/react/menu";

//#region src/components/client/Menu/Menu.Item.tsx
/**
* **📋 A Menu Item component for navigation and actions**
*
* @componentType Client component
*
* @description
* A standard menu item that can be used for navigation, actions, or displaying options in a menu.
* Menu items can be styled with active states, icons, and can trigger callbacks when clicked.
* They support both visual and functional customization.
*
* @see The {@link https://uds.build/docs/components/menu-item Menu.Item Docs} for more info
*
* @example
* ```tsx
* 'use client'; // Next.js client component
*
* import { Menu, Button } from "@yahoo/uds";
* import { Calendar, Clipboard } from "@yahoo/uds-icons";
*
* export function MenuItemExample() {
*   return (
*     <Menu.Provider>
*       <Menu.Trigger asChild>
*         <Button>Menu Options</Button>
*       </Menu.Trigger>
*       <Menu.Content>
*         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>
*         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>
*           Clipboard
*         </Menu.Item>
*         <Menu.Item active>Active Item</Menu.Item>
*       </Menu.Content>
*     </Menu>
*   )
* }
* ```
*
* @usage
* Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.
* The active prop can be used to highlight the currently selected item.
*
* @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
**/
const MenuItem = forwardRef(function MenuItem({ active, hideOnClick, ...props }, ref) {
	return /* @__PURE__ */ jsx(MenuItemBase, {
		ref,
		as: MenuItem$1,
		active,
		layerClassNames: {
			root: getStyles({
				menuitemItemVariantRoot: "default",
				menuitemItemVariantActiveRoot: active ? "on" : "off"
			}),
			text: getStyles({
				menuitemItemVariantText: "default",
				menuitemItemVariantActiveText: active ? "on" : "off"
			}),
			startIcon: getStyles({
				menuitemItemVariantIcon: "default",
				menuitemItemVariantActiveIcon: active ? "on" : "off"
			})
		},
		rootProps: { hideOnClick },
		...props
	});
});
MenuItem.displayName = "MenuItem";

//#endregion
export { MenuItem };