
"use client";
import { UniversalMenuItemProps } from "../../../types/dist/index.js";
import { IconPropsWithSVGProps } from "../../../tokens/types.js";
import { PressableProps } from "../Pressable.js";
import * as _$react from "react";
import { AriaRole } from "react";
import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";

//#region src/components/client/Menu/Menu.Item.d.ts
type DataAttributes = {
  [name: `data-${string}`]: string;
};
interface MenuItemProps extends Omit<PressableProps, 'asChild'>, Omit<UniversalMenuItemProps, 'name'> {
  /**
   * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
   * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or
   * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.
   */
  store?: MenuItemProps$1['store'];
  /**
   * Determines if the menu should hide when this item is clicked.
   *
   * **Note**: This behavior isn't triggered if this menu item is rendered as a
   * link and modifier keys are used to either open the link in a new tab or
   * download it.
   *
   * @default true
   */
  hideOnClick?: MenuItemProps$1['hideOnClick'];
  /**
   * The role of the menu item.
   *
   * @default 'menuitem'
   */
  role?: AriaRole;
  /** Props to be passed into various slots within the component. */
  slotProps?: {
    root?: Partial<React.HTMLAttributes<HTMLDivElement> & DataAttributes>;
    text?: Partial<Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & DataAttributes>;
    startIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
    endIcon?: Partial<IconPropsWithSVGProps & DataAttributes>;
  };
}
/**
 * **📋 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)
 **/
declare const MenuItem: _$react.ForwardRefExoticComponent<MenuItemProps & _$react.RefAttributes<HTMLDivElement>>;
//#endregion
export { MenuItem, type MenuItemProps };