/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { IconSlot } from "../../IconSlot.js";
import { HStack } from "../../HStack.js";
import { Check } from "@yahoo/uds-icons";
import { forwardRef, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { SelectItem as SelectItem$1, useSelectContext, useStoreState } from "@ariakit/react";
import { AnimatePresence, m } from "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 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 = forwardRef(function SelectItem({ children, className, slotProps, disabled, value, startIcon, ...props }, ref) {
	const isSelected = useStoreState(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 = useMemo(() => ({
		root: {
			className: cx(getStyles({
				selectitemItemVariantRoot: "default",
				selectitemItemVariantActiveRoot: isSelected ? "on" : "off"
			}), rootClassName),
			...rootSlotProps
		},
		text: {
			className: cx(getStyles({
				selectitemSizeText: "default",
				selectitemItemVariantText: "default",
				selectitemItemVariantActiveText: isSelected ? "on" : "off"
			}), textClassName),
			...textSlotProps
		},
		startIcon: {
			className: cx(getStyles({
				selectitemItemVariantIcon: "default",
				selectitemItemVariantActiveIcon: isSelected ? "on" : "off"
			}), startIconClassName),
			...startIconSlotProps
		}
	}), [
		isSelected,
		rootClassName,
		rootSlotProps,
		startIconClassName,
		startIconSlotProps,
		textClassName,
		textSlotProps
	]);
	const contentStyles = getStyles({
		className: cx(`${ITEM_CLASS_NAME}-content`, "truncate", selectSlotProps.text.className),
		textAlign: "start"
	});
	const classNames = useMemo(() => ({
		root: getStyles({
			selectitemSizeRoot: "default",
			flexDirection: "row",
			spacing: "0",
			spacingHorizontal: "4",
			spacingVertical: "3.5",
			columnGap: "2",
			alignItems: "center",
			justifyContent: "space-between",
			width: "full",
			className: cx(selectItemClassName, selectSlotProps.root.className)
		}),
		startIcon: getStyles({
			selectitemSizeStartIcon: "default",
			className: selectSlotProps.startIcon.className
		}),
		endIcon: getStyles({
			selectitemSizeEndIcon: "default",
			className: cx(getStyles({
				selectitemItemVariantIcon: "default",
				selectitemItemVariantActiveIcon: "on"
			}), endIconClassName)
		})
	}), [
		endIconClassName,
		selectItemClassName,
		selectSlotProps.root.className,
		selectSlotProps.startIcon.className
	]);
	return /* @__PURE__ */ jsxs(SelectItem$1, {
		ref,
		autoFocus: false,
		disabled,
		value,
		className: classNames.root,
		...rootSlotProps,
		...props,
		children: [/* @__PURE__ */ jsxs(HStack, {
			gap: "2",
			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 inline-flex shrink-0 items-center",
					children: /* @__PURE__ */ jsx(IconSlot, {
						icon: startIcon,
						className: classNames.startIcon,
						iconProps: {
							size: "sm",
							variant: isSelected ? "fill" : "outline",
							color: "current",
							...startIconSlotProps
						}
					})
				})
			}), /* @__PURE__ */ jsx("span", {
				className: contentStyles,
				...textSlotProps,
				children
			})]
		}), /* @__PURE__ */ jsx(AnimatePresence, {
			initial: false,
			mode: "popLayout",
			children: isSelected && /* @__PURE__ */ jsx(m.span, {
				variants: iconAnimationVariants,
				initial: "hidden",
				animate: "visible",
				exit: "hidden",
				className: "uds-end-icon inline-flex shrink-0 items-center",
				children: /* @__PURE__ */ jsx(IconSlot, {
					icon: Check,
					className: classNames.endIcon,
					iconProps: {
						size: "sm",
						variant: "fill",
						color: "current",
						...endIconSlotProps
					}
				})
			})
		})]
	});
});
SelectItem.displayName = "SelectItem";
//#endregion
export { SelectItem };
