/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../../styles/styler.cjs");
const require_components_client_Menu_Menu_ItemBase = require("./Menu.ItemBase.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react_menu = require("@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 = (0, react.forwardRef)(function MenuItem({ active, hideOnClick, slotProps, ...props }, ref) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
		ref,
		as: _ariakit_react_menu.MenuItem,
		active,
		slotProps: {
			root: {
				className: require_styles_styler.cx(require_styles_styler.getStyles({
					menuitemItemVariantRoot: "default",
					menuitemItemVariantActiveRoot: active ? "on" : "off"
				}), slotProps?.root?.className),
				...slotProps?.root
			},
			text: {
				className: require_styles_styler.cx(require_styles_styler.getStyles({
					menuitemItemVariantText: "default",
					menuitemItemVariantActiveText: active ? "on" : "off"
				}), slotProps?.text?.className),
				...slotProps?.text
			},
			startIcon: {
				className: require_styles_styler.cx(require_styles_styler.getStyles({
					menuitemItemVariantIcon: "default",
					menuitemItemVariantActiveIcon: active ? "on" : "off"
				}), slotProps?.startIcon?.className),
				...slotProps?.startIcon
			}
		},
		rootProps: { hideOnClick },
		...props
	});
});
MenuItem.displayName = "MenuItem";
//#endregion
exports.MenuItem = MenuItem;
