@yahoo/uds 3.58.2-beta.1 → 3.59.0-beta.2

package/dist/components/client/Menu/Menu.Divider.cjs

@@ -0,0 +1,74 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_Divider_DividerInternal = require('../../Divider/DividerInternal.cjs');
+let react = require("react");
+let react_jsx_runtime = require("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 = (0, react.forwardRef)(function MenuDivider$1({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className,...props }, ref) {
+	const layerClassNames = {
+		root: require_styles_styler.getStyles({
+			menuDividerVariantRoot: "default",
+			className
+		}),
+		text: require_styles_styler.getStyles({ menuDividerVariantText: "default" }),
+		line: require_styles_styler.getStyles({ menuDividerVariantLine: "default" })
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Divider_DividerInternal.DividerInternal, {
+		ref,
+		role,
+		variant: "inherit",
+		contentPosition,
+		gap,
+		spacingVertical,
+		spacingHorizontal,
+		className: layerClassNames.root,
+		layerClassNames,
+		...props,
+		children
+	});
+});
+MenuDivider.displayName = "MenuDivider";
+
+//#endregion
+exports.MenuDivider = MenuDivider;

package/dist/components/client/Menu/Menu.Divider.d.cts

@@ -0,0 +1,54 @@
+import { DividerProps } from "../../Divider/Divider.cjs";
+import * as react49 from "react";
+import { AriaRole } from "react";
+
+//#region src/components/client/Menu/Menu.Divider.d.ts
+interface MenuDividerProps extends Omit<DividerProps, 'variant'> {
+  /**
+   * The role of the divider.
+   * @default 'separator'
+   */
+  role?: AriaRole;
+}
+/**
+ * **〰️ 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)
+ **/
+declare const MenuDivider: react49.ForwardRefExoticComponent<MenuDividerProps & react49.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuDivider, type MenuDividerProps };
+//# sourceMappingURL=Menu.Divider.d.cts.map

package/dist/components/client/Menu/Menu.Divider.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Divider.d.cts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Divider.tsx"],"sourcesContent":[],"mappings":";;;;;UAOU,gBAAA,CAAA,OAAA,CAAyB,KAAK;;;AAHkB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,SAAA;;EAQjD,IAAA,CAAA,CAAA,CAAA,QAAA;;;AAL8B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,OAAA,CAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CjC,aAAW,OAAA,CAAA,0BAAA,mBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Divider.d.ts

@@ -0,0 +1,54 @@
+import { DividerProps } from "../../Divider/Divider.js";
+import * as react39 from "react";
+import { AriaRole } from "react";
+
+//#region src/components/client/Menu/Menu.Divider.d.ts
+interface MenuDividerProps extends Omit<DividerProps, 'variant'> {
+  /**
+   * The role of the divider.
+   * @default 'separator'
+   */
+  role?: AriaRole;
+}
+/**
+ * **〰️ 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)
+ **/
+declare const MenuDivider: react39.ForwardRefExoticComponent<MenuDividerProps & react39.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuDivider, type MenuDividerProps };
+//# sourceMappingURL=Menu.Divider.d.ts.map

package/dist/components/client/Menu/Menu.Divider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Divider.d.ts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Divider.tsx"],"sourcesContent":[],"mappings":";;;;;UAOU,gBAAA,CAAA,OAAA,CAAyB,KAAK;;;AAHkB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,SAAA;;EAQjD,IAAA,CAAA,CAAA,CAAA,QAAA;;;AAL8B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,OAAA,CAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CjC,aAAW,OAAA,CAAA,0BAAA,mBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Divider.js

@@ -0,0 +1,74 @@
+"use client";
+/*! © 2025 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$1({ role = "separator", contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className,...props }, ref) {
+	const layerClassNames = {
+		root: getStyles({
+			menuDividerVariantRoot: "default",
+			className
+		}),
+		text: getStyles({ menuDividerVariantText: "default" }),
+		line: getStyles({ menuDividerVariantLine: "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 };
+//# sourceMappingURL=Menu.Divider.js.map

package/dist/components/client/Menu/Menu.Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Divider.js","names":["MenuDivider"],"sources":["../../../../src/components/client/Menu/Menu.Divider.tsx"],"sourcesContent":["import type { AriaRole } from 'react';\nimport { forwardRef } from 'react';\n\nimport { getStyles } from '../../../styles/styler';\nimport type { DividerProps } from '../../Divider/Divider';\nimport { DividerInternal } from '../../Divider/DividerInternal';\n\ninterface MenuDividerProps extends Omit<DividerProps, 'variant'> {\n  /**\n   * The role of the divider.\n   * @default 'separator'\n   */\n  role?: AriaRole;\n}\n\n/**\n * **〰️ A Menu Divider component**\n *\n * @componentType Client component\n *\n * @description\n * A divider component for the menu.\n *\n * @see The {@link https://uds.build/docs/components/menu-divider Menu.Divider Docs} for more info\n *\n * @example\n * ```tsx\n * 'use client'; // Next.js client component\n *\n * import { Menu, Button } from \"@yahoo/uds\";\n *\n * export function DividerExample() {\n *   return (\n *     <Menu>\n *       <Menu.Trigger asChild>\n *         <Button>Menu Options</Button>\n *       </Menu.Trigger>\n *       <Menu.Content>\n *         <Menu.Item>Calendar</Menu.Item>\n *         <Menu.Divider>Other actions</Menu.Divider>\n *         <Menu.Item>Clipboard</Menu.Item>\n *         <Menu.Item active>Active Item</Menu.Item>\n *       </Menu.Content>\n *     </Menu>\n *   )\n * }\n * ```\n *\n * @usage\n * Use MenuDivider to separate groups of menu items.\n *\n * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item), [Divider](https://uds.build/docs/components/divider)\n **/\nconst MenuDivider = forwardRef<HTMLDivElement, MenuDividerProps>(function MenuDivider(\n  {\n    role = 'separator',\n    contentPosition = 'start',\n    gap = '4',\n    children,\n    spacingVertical = children ? '2' : '0',\n    spacingHorizontal = children ? '4' : '0',\n    className,\n    ...props\n  },\n  ref,\n) {\n  const layerClassNames = {\n    root: getStyles({\n      menuDividerVariantRoot: 'default',\n      className,\n    }),\n\n    text: getStyles({\n      menuDividerVariantText: 'default',\n    }),\n\n    line: getStyles({\n      menuDividerVariantLine: 'default',\n    }),\n  };\n\n  return (\n    <DividerInternal\n      ref={ref}\n      role={role}\n      variant=\"inherit\"\n      contentPosition={contentPosition}\n      gap={gap}\n      spacingVertical={spacingVertical}\n      spacingHorizontal={spacingHorizontal}\n      className={layerClassNames.root}\n      layerClassNames={layerClassNames}\n      {...props}\n    >\n      {children}\n    </DividerInternal>\n  );\n});\n\nMenuDivider.displayName = 'MenuDivider';\n\nexport { MenuDivider, type MenuDividerProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAM,cAAc,WAA6C,SAASA,cACxE,EACE,OAAO,aACP,kBAAkB,SAClB,MAAM,KACN,UACA,kBAAkB,WAAW,MAAM,KACnC,oBAAoB,WAAW,MAAM,KACrC,UACA,GAAG,SAEL,KACA;CACA,MAAM,kBAAkB;EACtB,MAAM,UAAU;GACd,wBAAwB;GACxB;GACD,CAAC;EAEF,MAAM,UAAU,EACd,wBAAwB,WACzB,CAAC;EAEF,MAAM,UAAU,EACd,wBAAwB,WACzB,CAAC;EACH;AAED,QACE,oBAAC;EACM;EACC;EACN,SAAQ;EACS;EACZ;EACY;EACE;EACnB,WAAW,gBAAgB;EACV;EACjB,GAAI;EAEH;GACe;EAEpB;AAEF,YAAY,cAAc"}

package/dist/components/client/Menu/Menu.Item.cjs

@@ -0,0 +1,80 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = 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$1({ active, hideOnClick,...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
+		ref,
+		as: __ariakit_react_menu.MenuItem,
+		active,
+		layerClassNames: {
+			root: require_styles_styler.getStyles({
+				menuItemVariantRoot: "default",
+				menuItemVariantActiveRoot: active ? "on" : "off"
+			}),
+			text: require_styles_styler.getStyles({
+				menuItemVariantText: "default",
+				menuItemVariantActiveText: active ? "on" : "off"
+			}),
+			startIcon: require_styles_styler.getStyles({
+				menuItemVariantIcon: "default",
+				menuItemVariantActiveIcon: active ? "on" : "off"
+			})
+		},
+		rootProps: { hideOnClick },
+		...props
+	});
+});
+MenuItem.displayName = "MenuItem";
+
+//#endregion
+exports.MenuItem = MenuItem;

package/dist/components/client/Menu/Menu.Item.d.cts

@@ -0,0 +1,79 @@
+import { UniversalMenuItemProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { PressableProps } from "../Pressable.cjs";
+import * as react51 from "react";
+import { AriaRole } from "react";
+import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
+
+//#region src/components/client/Menu/Menu.Item.d.ts
+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;
+}
+/**
+ * **📋 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: react51.ForwardRefExoticComponent<MenuItemProps & react51.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuItem, type MenuItemProps };
+//# sourceMappingURL=Menu.Item.d.cts.map

package/dist/components/client/Menu/Menu.Item.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Item.d.cts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Item.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAUU,aAAA,CAAA,OAAA,CACA,KAAK,4BACX,KAAK;;;;AAL0C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA;;EAK1C,KAAA,CAAA,CAAA,CAMC,aAAA,CAAA,CAND,CAAA,CAAA,KAAA,CAAA,CAAA;EAMC,CAAA,CAAA;;;;;;AANF,CAAA,CAAA,CAAA;;;EAoEM,WAAA,CAAA,CAAA,CApDE,aAAA,CAAA,CAoDF,CAAA,CAAA,WAAA,CAAA,CAAA;EAAA,CAAA,CAAA;;;;;SA9CL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CH,UAAQ,OAAA,CAAA,0BAAA,gBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Item.d.ts

@@ -0,0 +1,79 @@
+import { UniversalMenuItemProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { PressableProps } from "../Pressable.js";
+import * as react41 from "react";
+import { AriaRole } from "react";
+import { MenuItemProps as MenuItemProps$1 } from "@ariakit/react/menu";
+
+//#region src/components/client/Menu/Menu.Item.d.ts
+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;
+}
+/**
+ * **📋 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: react41.ForwardRefExoticComponent<MenuItemProps & react41.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { MenuItem, type MenuItemProps };
+//# sourceMappingURL=Menu.Item.d.ts.map

package/dist/components/client/Menu/Menu.Item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Item.d.ts","names":[],"sources":["../../../../src/components/client/Menu/Menu.Item.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAUU,aAAA,CAAA,OAAA,CACA,KAAK,4BACX,KAAK;;;;AAL0C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,IAAA,CAAA,UAAA,CAAA,IAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,OAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA;;EAK1C,KAAA,CAAA,CAAA,CAMC,aAAA,CAAA,CAND,CAAA,CAAA,KAAA,CAAA,CAAA;EAMC,CAAA,CAAA;;;;;;AANF,CAAA,CAAA,CAAA;;;EAoEM,WAAA,CAAA,CAAA,CApDE,aAAA,CAAA,CAoDF,CAAA,CAAA,WAAA,CAAA,CAAA;EAAA,CAAA,CAAA;;;;;SA9CL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8CH,UAAQ,OAAA,CAAA,0BAAA,gBAAA,OAAA,CAAA,cAAA"}

package/dist/components/client/Menu/Menu.Item.js

@@ -0,0 +1,80 @@
+"use client";
+/*! © 2025 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$2({ active, hideOnClick,...props }, ref) {
+	return /* @__PURE__ */ jsx(MenuItemBase, {
+		ref,
+		as: MenuItem$1,
+		active,
+		layerClassNames: {
+			root: getStyles({
+				menuItemVariantRoot: "default",
+				menuItemVariantActiveRoot: active ? "on" : "off"
+			}),
+			text: getStyles({
+				menuItemVariantText: "default",
+				menuItemVariantActiveText: active ? "on" : "off"
+			}),
+			startIcon: getStyles({
+				menuItemVariantIcon: "default",
+				menuItemVariantActiveIcon: active ? "on" : "off"
+			})
+		},
+		rootProps: { hideOnClick },
+		...props
+	});
+});
+MenuItem.displayName = "MenuItem";
+
+//#endregion
+export { MenuItem };
+//# sourceMappingURL=Menu.Item.js.map

package/dist/components/client/Menu/Menu.Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Item.js","names":["MenuItem","AriakitMenuItem"],"sources":["../../../../src/components/client/Menu/Menu.Item.tsx"],"sourcesContent":["import type { MenuItemProps as AriakitMenuItemProps } from '@ariakit/react/menu';\nimport { MenuItem as AriakitMenuItem } from '@ariakit/react/menu';\nimport type { UniversalMenuItemProps } from '@yahoo/uds/tokens';\nimport type { AriaRole } from 'react';\nimport { forwardRef } from 'react';\n\nimport { getStyles } from '../../../styles/styler';\nimport type { PressableProps } from '../Pressable';\nimport { MenuItemBase } from './Menu.ItemBase';\n\ninterface MenuItemProps\n  extends Omit<PressableProps, 'asChild'>,\n    Omit<UniversalMenuItemProps, 'name'> {\n  /**\n   * Object returned by the [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.\n   * If not provided, the closest [`Menu.Content`](https://uds.build/docs/components/menu#menu-content) or\n   * [`Menu.Provider`](https://uds.build/docs/components/menu#menu-provider) context will be used.\n   */\n  store?: AriakitMenuItemProps['store'];\n  /**\n   * Determines if the menu should hide when this item is clicked.\n   *\n   * **Note**: This behavior isn't triggered if this menu item is rendered as a\n   * link and modifier keys are used to either open the link in a new tab or\n   * download it.\n   *\n   * @default true\n   */\n  hideOnClick?: AriakitMenuItemProps['hideOnClick'];\n  /**\n   * The role of the menu item.\n   *\n   * @default 'menuitem'\n   */\n  role?: AriaRole;\n}\n\n/**\n * **📋 A Menu Item component for navigation and actions**\n *\n * @componentType Client component\n *\n * @description\n * A standard menu item that can be used for navigation, actions, or displaying options in a menu.\n * Menu items can be styled with active states, icons, and can trigger callbacks when clicked.\n * They support both visual and functional customization.\n *\n * @see The {@link https://uds.build/docs/components/menu-item Menu.Item Docs} for more info\n *\n * @example\n * ```tsx\n * 'use client'; // Next.js client component\n *\n * import { Menu, Button } from \"@yahoo/uds\";\n * import { Calendar, Clipboard } from \"@yahoo/uds-icons\";\n *\n * export function MenuItemExample() {\n *   return (\n *     <Menu.Provider>\n *       <Menu.Trigger asChild>\n *         <Button>Menu Options</Button>\n *       </Menu.Trigger>\n *       <Menu.Content>\n *         <Menu.Item startIcon={Calendar}>Calendar</Menu.Item>\n *         <Menu.Item startIcon={Clipboard} endIcon={DiagonalRightUp}>\n *           Clipboard\n *         </Menu.Item>\n *         <Menu.Item active>Active Item</Menu.Item>\n *       </Menu.Content>\n *     </Menu>\n *   )\n * }\n * ```\n *\n * @usage\n * Use MenuItem for standard menu options that trigger actions or navigate to other parts of the application.\n * The active prop can be used to highlight the currently selected item.\n *\n * @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)\n **/\nconst MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { active, hideOnClick, ...props },\n  ref,\n) {\n  const layerClassNames = {\n    root: getStyles({\n      menuItemVariantRoot: 'default',\n      menuItemVariantActiveRoot: active ? 'on' : 'off',\n    }),\n    text: getStyles({\n      menuItemVariantText: 'default',\n      menuItemVariantActiveText: active ? 'on' : 'off',\n    }),\n    startIcon: getStyles({\n      menuItemVariantIcon: 'default',\n      menuItemVariantActiveIcon: active ? 'on' : 'off',\n    }),\n  };\n\n  return (\n    <MenuItemBase\n      ref={ref}\n      as={AriakitMenuItem}\n      active={active}\n      layerClassNames={layerClassNames}\n      rootProps={{ hideOnClick }}\n      {...props}\n    />\n  );\n});\n\nMenuItem.displayName = 'MenuItem';\n\nexport { MenuItem, type MenuItemProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,MAAM,WAAW,WAA0C,SAASA,WAClE,EAAE,QAAQ,YAAa,GAAG,SAC1B,KACA;AAgBA,QACE,oBAAC;EACM;EACL,IAAIC;EACI;EACR,iBApBoB;GACtB,MAAM,UAAU;IACd,qBAAqB;IACrB,2BAA2B,SAAS,OAAO;IAC5C,CAAC;GACF,MAAM,UAAU;IACd,qBAAqB;IACrB,2BAA2B,SAAS,OAAO;IAC5C,CAAC;GACF,WAAW,UAAU;IACnB,qBAAqB;IACrB,2BAA2B,SAAS,OAAO;IAC5C,CAAC;GACH;EAQG,WAAW,EAAE,aAAa;EAC1B,GAAI;GACJ;EAEJ;AAEF,SAAS,cAAc"}