/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
"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_IconSlot = require("../../IconSlot.cjs");
const require_components_HStack = require("../../HStack.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 motion_react = require("motion/react");
//#region src/components/client/Select/SelectItem.tsx
const ITEM_CLASS_NAME = "uds-select-item";
const iconAnimationVariants = {
	visible: {
		scale: 1,
		opacity: 1
	},
	hidden: {
		scale: .7,
		opacity: 0
	}
};
/** Mirrors Menu.ItemBase row chrome so option rows match menu item height. */
const buildSelectItemClasses = ({ disabled, className }) => {
	return require_styles_styler.cx(ITEM_CLASS_NAME, "flex", "cursor-pointer", "outline-none", "data-[active-item]:z-10", "uds-ring", "!-outline-offset-2", "duration-20", "transition-[font-variation-settings]", "ease-in-out", "z-0", disabled && "opacity-50 cursor-not-allowed", className);
};
/**
* **▾ Select item**
*
* @componentType Client component
*/
const SelectItem = (0, react.forwardRef)(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
	const isSelected = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useSelectContext)(), "value") === value;
	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
	const { className: textClassName, ...textSlotProps } = slotProps?.text ?? {};
	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
	const selectItemClassName = buildSelectItemClasses({
		disabled,
		className
	});
	const selectSlotProps = (0, react.useMemo)(() => ({
		root: {
			className: require_styles_styler.cx(require_styles_styler.getStyles({
				selectitemItemVariantRoot: "default",
				selectitemItemVariantActiveRoot: isSelected ? "on" : "off"
			}), rootClassName),
			...rootSlotProps
		},
		text: {
			className: require_styles_styler.cx(require_styles_styler.getStyles({
				selectitemSizeText: "default",
				selectitemItemVariantText: "default",
				selectitemItemVariantActiveText: isSelected ? "on" : "off"
			}), textClassName),
			...textSlotProps
		},
		startIcon: {
			className: require_styles_styler.cx(require_styles_styler.getStyles({
				selectitemItemVariantIcon: "default",
				selectitemItemVariantActiveIcon: isSelected ? "on" : "off"
			}), startIconClassName),
			...startIconSlotProps
		}
	}), [
		isSelected,
		rootClassName,
		rootSlotProps,
		startIconClassName,
		startIconSlotProps,
		textClassName,
		textSlotProps
	]);
	const contentStyles = require_styles_styler.getStyles({
		className: require_styles_styler.cx(`${ITEM_CLASS_NAME}-content`, "truncate", selectSlotProps.text.className),
		textAlign: "start"
	});
	const classNames = (0, react.useMemo)(() => ({
		root: require_styles_styler.getStyles({
			selectitemSizeRoot: "default",
			flexDirection: "row",
			spacing: "0",
			spacingHorizontal: "4",
			spacingVertical: "3.5",
			columnGap: "2",
			alignItems: "center",
			justifyContent: "space-between",
			width: "full",
			className: require_styles_styler.cx(selectItemClassName, selectSlotProps.root.className)
		}),
		startIcon: require_styles_styler.getStyles({
			selectitemSizeStartIcon: "default",
			className: selectSlotProps.startIcon.className
		}),
		endIcon: require_styles_styler.getStyles({
			selectitemSizeEndIcon: "default",
			className: require_styles_styler.cx(require_styles_styler.getStyles({
				selectitemItemVariantIcon: "default",
				selectitemItemVariantActiveIcon: "on"
			}), endIconClassName)
		})
	}), [
		endIconClassName,
		selectItemClassName,
		selectSlotProps.root.className,
		selectSlotProps.startIcon.className
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.SelectItem, {
		ref,
		autoFocus: false,
		disabled,
		value,
		className: classNames.root,
		...rootSlotProps,
		...props,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_HStack.HStack, {
			gap: "2",
			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 inline-flex shrink-0 items-center",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
						icon: startIcon,
						className: classNames.startIcon,
						iconProps: {
							size: "sm",
							variant: isSelected ? "fill" : "outline",
							color: "current",
							...startIconSlotProps
						}
					})
				})
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				className: contentStyles,
				...textSlotProps,
				children
			})]
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
			initial: false,
			mode: "popLayout",
			children: isSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
				variants: iconAnimationVariants,
				initial: "hidden",
				animate: "visible",
				exit: "hidden",
				className: "uds-end-icon inline-flex shrink-0 items-center",
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
					icon: _yahoo_uds_icons.Check,
					className: classNames.endIcon,
					iconProps: {
						size: "sm",
						variant: "fill",
						color: "current",
						...endIconSlotProps
					}
				})
			})
		})]
	});
});
SelectItem.displayName = "SelectItem";
//#endregion
exports.SelectItem = SelectItem;
