/*! © 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_client_Menu_Menu_ItemBase = require("./Menu.ItemBase.cjs");
let _yahoo_uds_icons = require("@yahoo/uds-icons");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
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({ 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) => item.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 menuSlotProps = {
		root: { className: require_styles_styler.getStyles({
			menuitemItemCheckboxVariantRoot: "default",
			menuitemItemCheckboxVariantActiveRoot: isChecked ? "on" : "off"
		}) },
		text: { className: require_styles_styler.getStyles({
			menuitemItemCheckboxVariantText: "default",
			menuitemItemCheckboxVariantActiveText: isChecked ? "on" : "off"
		}) },
		startIcon: { className: require_styles_styler.getStyles({
			menuitemItemCheckboxVariantStartIcon: "default",
			menuitemItemCheckboxVariantActiveStartIcon: isChecked ? "on" : "off"
		}) },
		endIcon: { className: require_styles_styler.getStyles({
			menuitemItemCheckboxVariantEndIcon: "default",
			menuitemItemCheckboxVariantActiveEndIcon: 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),
		slotProps: menuSlotProps,
		name,
		rootProps: {
			onChange: handleChange,
			defaultChecked,
			checked: checked !== void 0 ? checked : void 0,
			hideOnClick
		},
		...props
	});
});
MenuItemCheckbox.displayName = "MenuItemCheckbox";
//#endregion
exports.MenuItemCheckbox = MenuItemCheckbox;
