/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { Pressable } from "../Pressable.js";
import { IconSlot } from "../../IconSlot.js";
import { HStack } from "../../HStack.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({ 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", slotProps, slots, rootProps, ...props }, ref) {
	const hasMultipleChildren = Children.count(children) > 1;
	const menuItemClassName = buildMenuItemClasses({
		active,
		disabled,
		className
	});
	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
	/**
	* Get content styles based on children layout needs
	*/
	const contentStyles = getStyles({
		className: cx(`${ITEM_CLASS_NAME}-content truncate`, textClassName),
		textAlign: "start",
		...hasMultipleChildren && {
			columnGap,
			display: "flex",
			alignItems: "center",
			width: "full",
			justifyContent: "space-between"
		}
	});
	/**
	* Styles
	*/
	const classNames = useMemo(() => ({
		root: getStyles({
			menuitemSizeRoot: "default",
			flexDirection: "row",
			spacing,
			spacingBottom,
			spacingEnd,
			spacingHorizontal,
			spacingStart,
			spacingTop,
			spacingVertical,
			columnGap,
			alignItems,
			justifyContent,
			className: cx(menuItemClassName, rootClassName)
		}),
		startIcon: getStyles({
			menuitemSizeStartIcon: "default",
			className: startIconClassName
		}),
		endIcon: getStyles({
			menuitemSizeEndIcon: "default",
			className: endIconClassName
		})
	}), [
		alignItems,
		columnGap,
		justifyContent,
		endIconClassName,
		rootClassName,
		startIconClassName,
		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,
		...rootSlotProps,
		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",
							...endIconSlotProps,
							...startIconSlotProps
						}
					})
				})
			}), /* @__PURE__ */ jsx("span", {
				className: contentStyles,
				...textSlotProps,
				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 };
