/*! © 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_VStack = require("../../VStack.cjs");
let react = require("react");
let _yahoo_uds_fixtures = require("@yahoo/uds/fixtures");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react = require("@ariakit/react");
let motion_react = require("motion/react");
let _ariakit_react_menu = require("@ariakit/react/menu");
//#region src/components/client/Menu/Menu.Content.tsx
const MotionVStack = motion_react.m.create(require_components_VStack.VStack);
const ANIMATION_CONFIG = {
	distance: 5,
	scale: .97
};
const variants = {
	top: {
		x: 0,
		y: ANIMATION_CONFIG.distance
	},
	bottom: {
		x: 0,
		y: -ANIMATION_CONFIG.distance
	},
	left: {
		x: ANIMATION_CONFIG.distance,
		y: 0
	},
	right: {
		x: -ANIMATION_CONFIG.distance,
		y: 0
	}
};
const getMenuAnimationVariants = (placement = "bottom") => {
	const [base = "top"] = placement?.split("-");
	return {
		closed: {
			...variants[base],
			opacity: 0,
			scale: ANIMATION_CONFIG.scale
		},
		open: {
			y: 0,
			x: 0,
			opacity: 1,
			scale: 1
		}
	};
};
const useMenuAnimationVariants = (placement) => {
	return (0, react.useMemo)(() => getMenuAnimationVariants(placement), [placement]);
};
/**
* **📦 A Menu Content component**
*
* @componentType Client component
*
* @description
* A content component for the menu, which is used to provide the menu context to the menu items.
*
* @see The {@link https://uds.build/docs/components/menu-content Menu.Content 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 MenuProviderExample() {
*   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.Provider>
*   )
* }
* ```
*
* @usage
* Using Menu.Content is required to use Menu.Item and Menu.ItemCheckbox. It acts as the actual menu container.
*
* @related [Menu](https://uds.build/docs/components/menu), [Menu.ItemCheckbox](https://uds.build/docs/components/menu-item-checkbox)
**/
const MenuContent = (0, react.forwardRef)(function MenuContent({ size = "default", variant = "default", gutter = "1", overflow, className, slotProps, sameWidth, focusable, children, portalElement, portal = true, disableAutoBorderRadius, nestedBorderRadius = !disableAutoBorderRadius, nestedBorderRadiusSize, nestedBorderRadiusSpacing, nestedBorderRadiusWidth, ...props }, ref) {
	const context = (0, _ariakit_react_menu.useMenuContext)();
	const open = (0, _ariakit_react.useStoreState)(context, "open");
	const mounted = (0, _ariakit_react.useStoreState)(context, "mounted");
	const currentPlacement = (0, _ariakit_react.useStoreState)(context, "currentPlacement");
	const placement = (0, _ariakit_react.useStoreState)(context, "placement");
	const [prevPlacement, setPrevPlacement] = (0, react.useState)(currentPlacement);
	const [nextPlacement, setNextPlacement] = (0, react.useState)(currentPlacement);
	(0, react.useEffect)(() => {
		if (placement !== nextPlacement) setNextPlacement(placement);
	}, [placement]);
	(0, react.useEffect)(() => {
		if (currentPlacement !== nextPlacement) setNextPlacement(currentPlacement);
	}, [currentPlacement]);
	(0, react.useEffect)(() => {
		if (mounted && nextPlacement !== prevPlacement) setPrevPlacement(nextPlacement);
	}, [
		mounted,
		nextPlacement,
		prevPlacement
	]);
	const motionState = (0, react.useMemo)(() => {
		if (!open || !mounted) return "closed";
		return "open";
	}, [open, mounted]);
	const variants = useMenuAnimationVariants(nextPlacement);
	const gutterValue = (0, react.useMemo)(() => _yahoo_uds_fixtures.spacingMap[gutter], [gutter]);
	const classNames = { root: require_styles_styler.getStyles({
		menucontentSizeRoot: size,
		menucontentVariantRoot: variant,
		className: require_styles_styler.cx("uds-menu-content", "transition-shadow", "duration-200", "ease-in-out", "min-w-60", "max-w-lg", "max-h-96", "overflow-auto", "uds-ring", "z-10", "group", className)
	}) };
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
		initial: false,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react_menu.Menu, {
			gutter: gutterValue,
			sameWidth,
			focusable,
			store: context,
			ref,
			portalElement,
			portal,
			...props,
			render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionVStack, {
				overflow,
				animate: motionState,
				variants,
				nestedBorderRadius,
				nestedBorderRadiusSize,
				nestedBorderRadiusSpacing,
				nestedBorderRadiusWidth,
				className: classNames.root,
				...slotProps?.root,
				children
			})
		})
	});
});
MenuContent.displayName = "MenuContent";
//#endregion
exports.MenuContent = MenuContent;
