@yahoo/uds 3.66.0 → 3.67.0-beta.1

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

@@ -0,0 +1,79 @@
+"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 };

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

@@ -0,0 +1,163 @@
+"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_HStack = require('../../HStack.cjs');
+const require_components_IconSlot = require('../../IconSlot.cjs');
+const require_components_client_Pressable = require('../Pressable.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Menu/Menu.ItemBase.tsx
+const ITEM_CLASS_NAME = "uds-menu-item";
+const iconAnimationVariants = {
+	visible: {
+		scale: 1,
+		opacity: 1
+	},
+	hidden: {
+		scale: .7,
+		opacity: 0
+	}
+};
+/** Builds the class names for the menu item */
+const buildMenuItemClasses = ({ active, disabled, className }) => {
+	return require_styles_styler.cx(ITEM_CLASS_NAME, "flex", "focus-visible:text-brand", "focus-visible:bg-brand-secondary", "focus-visible:z-10", "uds-ring", "!-outline-offset-2", active && ["[&:not([aria-checked])]:cursor-default"], disabled && "opacity-25 cursor-not-allowed", "duration-20 transition-[font-variation-settings] ease-in-out", "z-0", className);
+};
+/**
+* @private This is an internal component shared by [Menu.Item](https://uds.build/docs/components/menu#menu-item) and [Menu.ItemCheckbox](https://uds.build/docs/components/menu#menu-item-checkbox)
+* and may change without notice. Please do not use this component directly.
+*/
+const MenuItemBase = (0, react.forwardRef)(function MenuItemBase$1({ spacing = "0", spacingBottom, spacingEnd, spacingHorizontal = "4", spacingStart, spacingTop, spacingVertical = "3.5", columnGap = "2", className, children, endIcon, startIcon, hideEndIcon, active, disabled, as: RootComponent, name, alignItems = "center", justifyContent = "space-between", layerClassNames, slots, rootProps, ...props }, ref) {
+	const hasMultipleChildren = react.Children.count(children) > 1;
+	const menuItemClassName = buildMenuItemClasses({
+		active,
+		disabled,
+		className
+	});
+	/**
+	* Get content styles based on children layout needs
+	*/
+	const contentStyles = require_styles_styler.getStyles({
+		className: require_styles_styler.cx(`${ITEM_CLASS_NAME}-content truncate`, layerClassNames?.text),
+		textAlign: "start",
+		...hasMultipleChildren && {
+			columnGap,
+			display: "flex",
+			alignItems: "center",
+			width: "full",
+			justifyContent: "space-between"
+		}
+	});
+	/**
+	* Styles
+	*/
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_styles_styler.getStyles({
+			menuSizeRoot: "default",
+			flexDirection: "row",
+			spacing,
+			spacingBottom,
+			spacingEnd,
+			spacingHorizontal,
+			spacingStart,
+			spacingTop,
+			spacingVertical,
+			columnGap,
+			alignItems,
+			justifyContent,
+			className: require_styles_styler.cx(menuItemClassName, layerClassNames?.root)
+		}),
+		startIcon: require_styles_styler.getStyles({
+			menuSizeStartIcon: "default",
+			className: layerClassNames?.startIcon
+		}),
+		endIcon: require_styles_styler.getStyles({
+			menuSizeEndIcon: "default",
+			className: layerClassNames?.endIcon
+		})
+	}), [
+		alignItems,
+		columnGap,
+		justifyContent,
+		layerClassNames?.endIcon,
+		layerClassNames?.root,
+		layerClassNames?.startIcon,
+		menuItemClassName,
+		spacing,
+		spacingBottom,
+		spacingEnd,
+		spacingHorizontal,
+		spacingStart,
+		spacingTop,
+		spacingVertical
+	]);
+	const rootRender = slots?.root ?? ((p) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
+		...p,
+		...props,
+		onClick: (e) => {
+			p.onClick?.(e);
+			props.onClick?.(e);
+		}
+	}));
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootComponent, {
+		ref,
+		name: name ?? "",
+		...rootProps,
+		render: rootRender,
+		disabled,
+		className: classNames.root,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
+			gap: columnGap,
+			alignItems: "center",
+			width: "full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+				initial: false,
+				children: startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+					variants: iconAnimationVariants,
+					initial: "hidden",
+					animate: "visible",
+					exit: "hidden",
+					className: "uds-start-icon",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+						icon: startIcon,
+						className: classNames.startIcon,
+						iconProps: {
+							size: "sm",
+							variant: active ? "fill" : "outline",
+							color: "current"
+						}
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: contentStyles,
+				children
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: !hideEndIcon && endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
+				variants: iconAnimationVariants,
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				className: "uds-end-icon",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+					icon: endIcon,
+					className: classNames.endIcon,
+					iconProps: {
+						size: "sm",
+						variant: active ? "fill" : "outline",
+						color: "current"
+					}
+				})
+			})
+		})]
+	});
+});
+MenuItemBase.displayName = "MenuItemBase";
+
+//#endregion
+exports.ITEM_CLASS_NAME = ITEM_CLASS_NAME;
+exports.MenuItemBase = MenuItemBase;

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

@@ -0,0 +1,31 @@
+import { UniversalMenuItemProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import { PressableProps } from "../Pressable.cjs";
+import * as react51 from "react";
+import { MenuItem, MenuItemCheckbox } from "@ariakit/react";
+
+//#region src/components/client/Menu/Menu.ItemBase.d.ts
+type MenuItemRootComponent = typeof MenuItem | typeof MenuItemCheckbox;
+interface MenuItemBaseProps extends Omit<PressableProps, 'asChild'>, UniversalMenuItemProps {
+  /** Whether to show the end icon */
+  hideEndIcon?: boolean;
+  /** The component to render as the root */
+  as: MenuItemRootComponent;
+  /** Additional props to pass to the root component */
+  rootProps?: Record<string, unknown>;
+  /** Internal overrides for downstream components. */
+  layerClassNames?: {
+    root?: string;
+    text?: string;
+    startIcon?: string;
+    endIcon?: string;
+  };
+}
+declare const ITEM_CLASS_NAME = "uds-menu-item";
+/**
+ * @private This is an internal component shared by [Menu.Item](https://uds.build/docs/components/menu#menu-item) and [Menu.ItemCheckbox](https://uds.build/docs/components/menu#menu-item-checkbox)
+ * and may change without notice. Please do not use this component directly.
+ */
+declare const MenuItemBase: react51.ForwardRefExoticComponent<MenuItemBaseProps & react51.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ITEM_CLASS_NAME, MenuItemBase };

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

@@ -0,0 +1,31 @@
+import { UniversalMenuItemProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import { PressableProps } from "../Pressable.js";
+import * as react53 from "react";
+import { MenuItem, MenuItemCheckbox } from "@ariakit/react";
+
+//#region src/components/client/Menu/Menu.ItemBase.d.ts
+type MenuItemRootComponent = typeof MenuItem | typeof MenuItemCheckbox;
+interface MenuItemBaseProps extends Omit<PressableProps, 'asChild'>, UniversalMenuItemProps {
+  /** Whether to show the end icon */
+  hideEndIcon?: boolean;
+  /** The component to render as the root */
+  as: MenuItemRootComponent;
+  /** Additional props to pass to the root component */
+  rootProps?: Record<string, unknown>;
+  /** Internal overrides for downstream components. */
+  layerClassNames?: {
+    root?: string;
+    text?: string;
+    startIcon?: string;
+    endIcon?: string;
+  };
+}
+declare const ITEM_CLASS_NAME = "uds-menu-item";
+/**
+ * @private This is an internal component shared by [Menu.Item](https://uds.build/docs/components/menu#menu-item) and [Menu.ItemCheckbox](https://uds.build/docs/components/menu#menu-item-checkbox)
+ * and may change without notice. Please do not use this component directly.
+ */
+declare const MenuItemBase: react53.ForwardRefExoticComponent<MenuItemBaseProps & react53.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ITEM_CLASS_NAME, MenuItemBase };

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

@@ -0,0 +1,161 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { cx, getStyles } from "../../../styles/styler.js";
+import { HStack } from "../../HStack.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Pressable } from "../Pressable.js";
+import { Children, forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, m } from "motion/react";
+
+//#region src/components/client/Menu/Menu.ItemBase.tsx
+const ITEM_CLASS_NAME = "uds-menu-item";
+const iconAnimationVariants = {
+	visible: {
+		scale: 1,
+		opacity: 1
+	},
+	hidden: {
+		scale: .7,
+		opacity: 0
+	}
+};
+/** Builds the class names for the menu item */
+const buildMenuItemClasses = ({ active, disabled, className }) => {
+	return cx(ITEM_CLASS_NAME, "flex", "focus-visible:text-brand", "focus-visible:bg-brand-secondary", "focus-visible:z-10", "uds-ring", "!-outline-offset-2", active && ["[&:not([aria-checked])]:cursor-default"], disabled && "opacity-25 cursor-not-allowed", "duration-20 transition-[font-variation-settings] ease-in-out", "z-0", className);
+};
+/**
+* @private This is an internal component shared by [Menu.Item](https://uds.build/docs/components/menu#menu-item) and [Menu.ItemCheckbox](https://uds.build/docs/components/menu#menu-item-checkbox)
+* and may change without notice. Please do not use this component directly.
+*/
+const MenuItemBase = forwardRef(function MenuItemBase$1({ spacing = "0", spacingBottom, spacingEnd, spacingHorizontal = "4", spacingStart, spacingTop, spacingVertical = "3.5", columnGap = "2", className, children, endIcon, startIcon, hideEndIcon, active, disabled, as: RootComponent, name, alignItems = "center", justifyContent = "space-between", layerClassNames, slots, rootProps, ...props }, ref) {
+	const hasMultipleChildren = Children.count(children) > 1;
+	const menuItemClassName = buildMenuItemClasses({
+		active,
+		disabled,
+		className
+	});
+	/**
+	* Get content styles based on children layout needs
+	*/
+	const contentStyles = getStyles({
+		className: cx(`${ITEM_CLASS_NAME}-content truncate`, layerClassNames?.text),
+		textAlign: "start",
+		...hasMultipleChildren && {
+			columnGap,
+			display: "flex",
+			alignItems: "center",
+			width: "full",
+			justifyContent: "space-between"
+		}
+	});
+	/**
+	* Styles
+	*/
+	const classNames = useMemo(() => ({
+		root: getStyles({
+			menuSizeRoot: "default",
+			flexDirection: "row",
+			spacing,
+			spacingBottom,
+			spacingEnd,
+			spacingHorizontal,
+			spacingStart,
+			spacingTop,
+			spacingVertical,
+			columnGap,
+			alignItems,
+			justifyContent,
+			className: cx(menuItemClassName, layerClassNames?.root)
+		}),
+		startIcon: getStyles({
+			menuSizeStartIcon: "default",
+			className: layerClassNames?.startIcon
+		}),
+		endIcon: getStyles({
+			menuSizeEndIcon: "default",
+			className: layerClassNames?.endIcon
+		})
+	}), [
+		alignItems,
+		columnGap,
+		justifyContent,
+		layerClassNames?.endIcon,
+		layerClassNames?.root,
+		layerClassNames?.startIcon,
+		menuItemClassName,
+		spacing,
+		spacingBottom,
+		spacingEnd,
+		spacingHorizontal,
+		spacingStart,
+		spacingTop,
+		spacingVertical
+	]);
+	const rootRender = slots?.root ?? ((p) => /* @__PURE__ */ jsx(Pressable, {
+		...p,
+		...props,
+		onClick: (e) => {
+			p.onClick?.(e);
+			props.onClick?.(e);
+		}
+	}));
+	return /* @__PURE__ */ jsxs(RootComponent, {
+		ref,
+		name: name ?? "",
+		...rootProps,
+		render: rootRender,
+		disabled,
+		className: classNames.root,
+		children: [/* @__PURE__ */ jsxs(HStack, {
+			gap: columnGap,
+			alignItems: "center",
+			width: "full",
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				initial: false,
+				children: startIcon && /* @__PURE__ */ jsx(m.span, {
+					variants: iconAnimationVariants,
+					initial: "hidden",
+					animate: "visible",
+					exit: "hidden",
+					className: "uds-start-icon",
+					children: /* @__PURE__ */ jsx(IconSlot, {
+						icon: startIcon,
+						className: classNames.startIcon,
+						iconProps: {
+							size: "sm",
+							variant: active ? "fill" : "outline",
+							color: "current"
+						}
+					})
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: contentStyles,
+				children
+			})]
+		}), /* @__PURE__ */ jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			children: !hideEndIcon && endIcon && /* @__PURE__ */ jsx(m.span, {
+				variants: iconAnimationVariants,
+				initial: "hidden",
+				animate: "visible",
+				exit: "hidden",
+				className: "uds-end-icon",
+				children: /* @__PURE__ */ jsx(IconSlot, {
+					icon: endIcon,
+					className: classNames.endIcon,
+					iconProps: {
+						size: "sm",
+						variant: active ? "fill" : "outline",
+						color: "current"
+					}
+				})
+			})
+		})]
+	});
+});
+MenuItemBase.displayName = "MenuItemBase";
+
+//#endregion
+export { ITEM_CLASS_NAME, MenuItemBase };

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

@@ -0,0 +1,138 @@
+"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 __yahoo_uds_icons = require("@yahoo/uds-icons");
+let __ariakit_react = require("@ariakit/react");
+let __ariakit_react_menu = require("@ariakit/react/menu");
+
+//#region src/components/client/Menu/Menu.ItemCheckbox.tsx
+/**
+* **✅ A Menu Item Checkbox component**
+*
+* @componentType Client component
+*
+* @description
+* A checkable menu item that toggles between selected and unselected states. Menu item checkboxes
+* allow users to select multiple options from a menu, displaying a checkmark when active. They maintain
+* their state even when the menu is closed and reopened.
+*
+* @see The {@link https://uds.build/docs/components/menu-item-checkbox Menu.ItemCheckbox Docs} for more info
+*
+* @example
+* ```tsx
+* 'use client'; // Next.js client component
+*
+* import { Menu, Button } from "@yahoo/uds";
+*
+* export function MenuItemCheckboxExample() {
+*   return (
+*     <Menu.Provider>
+*       <Menu.Trigger asChild>
+*         <Button>Filter Options</Button>
+*       </Menu.Trigger>
+*       <Menu.Content>
+*         <Menu.ItemCheckbox name="showArchived" defaultChecked={false}>
+*           Show Archived
+*         </Menu.ItemCheckbox>
+*         <Menu.ItemCheckbox name="includeComments" defaultChecked={true}>
+*           Include Comments
+*         </Menu.ItemCheckbox>
+*       </Menu.Content>
+*     </Menu.Provider>
+*   )
+* }
+* ```
+*
+* @usage
+* Use MenuItemCheckbox when you need to provide users with multiple selectable options within a menu.
+* Unlike radio options, checkboxes allow for multiple simultaneous selections.
+*
+* @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
+**/
+const MenuItemCheckbox = (0, react.forwardRef)(function MenuItemCheckbox$1({ name, endIcon = __yahoo_uds_icons.Check, checked, defaultChecked, hideOnClick, className, ...props }, ref) {
+	const itemName = name;
+	const hasInitialized = (0, react.useRef)(false);
+	const context = (0, __ariakit_react_menu.useMenuContext)();
+	const allState = (0, __ariakit_react.useStoreState)(context);
+	(0, react.useEffect)(() => {
+		if (!hasInitialized.current && defaultChecked !== void 0 && context) {
+			context.setValues((prev) => ({
+				...prev,
+				[itemName]: defaultChecked
+			}));
+			hasInitialized.current = true;
+		}
+	}, [
+		context,
+		defaultChecked,
+		itemName
+	]);
+	const isChecked = (0, react.useMemo)(() => {
+		if (checked !== void 0) return checked;
+		if (allState?.items?.length) {
+			const item = allState?.items.find((item$1) => item$1.element?.name === itemName);
+			if (item?.element) return item.element.checked;
+		}
+		const storeValue = allState?.values[itemName];
+		return typeof storeValue === "boolean" ? storeValue : defaultChecked ?? false;
+	}, [
+		allState?.items,
+		allState?.values,
+		itemName,
+		checked,
+		defaultChecked
+	]);
+	const handleChange = (0, react.useCallback)((d) => {
+		if (checked === void 0) context?.setValues((prev) => ({
+			...prev,
+			[itemName]: d.target.checked
+		}));
+	}, [
+		itemName,
+		context,
+		checked
+	]);
+	const layerClassNames = {
+		root: require_styles_styler.getStyles({
+			menuItemCheckboxVariantRoot: "default",
+			menuItemCheckboxVariantActiveRoot: isChecked ? "on" : "off"
+		}),
+		text: require_styles_styler.getStyles({
+			menuItemCheckboxVariantText: "default",
+			menuItemCheckboxVariantActiveText: isChecked ? "on" : "off"
+		}),
+		startIcon: require_styles_styler.getStyles({
+			menuItemCheckboxVariantStartIcon: "default",
+			menuItemCheckboxVariantActiveStartIcon: isChecked ? "on" : "off"
+		}),
+		endIcon: require_styles_styler.getStyles({
+			menuItemCheckboxVariantEndIcon: "default",
+			menuItemCheckboxVariantActiveEndIcon: isChecked ? "on" : "off"
+		})
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Menu_Menu_ItemBase.MenuItemBase, {
+		ref,
+		as: __ariakit_react_menu.MenuItemCheckbox,
+		hideEndIcon: !isChecked,
+		endIcon,
+		active: isChecked,
+		className: require_styles_styler.cx("uds-menu-item-checkbox", className),
+		layerClassNames,
+		name,
+		rootProps: {
+			onChange: handleChange,
+			defaultChecked,
+			checked: checked !== void 0 ? checked : void 0,
+			hideOnClick
+		},
+		...props
+	});
+});
+MenuItemCheckbox.displayName = "MenuItemCheckbox";
+
+//#endregion
+exports.MenuItemCheckbox = MenuItemCheckbox;