/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { BUTTON_SCALE_EFFECT_HOVER, BUTTON_SCALE_EFFECT_PRESSED, BUTTON_SCALE_EFFECT_REST } from "../../../css-tokens/dist/index.js";
import { createSlot } from "../../../utils/createSlot.js";
import { Icon } from "../../Icon.js";
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
import { SpringMotionConfig } from "../SpringMotionConfig.js";
import "../Button/buttonConstants.js";
import { iconMotionVariants, loadingMotionVariants } from "../Button/Button.js";
import { IconButtonBase, renderIconButtonAsChild } from "./IconButtonBase.js";
import { Progress } from "@yahoo/uds-icons";
import { forwardRef, isValidElement, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { AnimatePresence, m } from "motion/react";
//#region src/components/client/IconButton/IconButton.tsx
/**
* **⚙️️ An icon button element that can be used to trigger an action**
*
* @componentType Client component
*/
const IconButton = forwardRef(function IconButton(props, forwardedRef) {
	const prefersReducedMotion = usePrefersReducedMotion();
	const disableMotion = !!props.disableEffects || !!props.disabled;
	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
	const Slot = useMemo(() => createSlot(), []);
	const MotionSlot = useMemo(() => m.create(Slot), [Slot]);
	const buttonVariants = useMemo(() => ({
		rest: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_REST})` },
		hover: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_HOVER})` },
		pressed: { scale: disableMotion ? 1 : `var(${BUTTON_SCALE_EFFECT_PRESSED})` }
	}), [disableMotion]);
	return /* @__PURE__ */ jsx(IconButtonBase, {
		...props,
		ref: forwardedRef,
		renderIconContent: ({ asChild, loading, name, iconVariant, children, iconClassName, loadingIconClassName, iconSlotClassName, iconSlotProps }) => /* @__PURE__ */ jsxs(AnimatePresence, {
			initial: false,
			mode: "popLayout",
			children: [loading && /* @__PURE__ */ jsx(m.span, {
				variants: loadingMotionVariants,
				initial: "loading",
				animate: "loading",
				exit: "hide",
				children: /* @__PURE__ */ jsx(Icon, {
					size: "sm",
					name: Progress,
					variant: iconVariant,
					color: "current",
					className: loadingIconClassName
				})
			}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
				variants: iconMotionVariants,
				initial: "icon",
				animate: "icon",
				exit: "hide",
				children: !asChild && children || /* @__PURE__ */ jsx(Icon, {
					size: "sm",
					name,
					variant: iconVariant,
					color: "current",
					className: [iconClassName, iconSlotClassName].filter(Boolean).join(" "),
					...iconSlotProps
				})
			}, name.name)]
		}),
		renderRoot: ({ asChild, children, buttonRef, type, htmlName, rootClassName, rest, iconContent }) => {
			if (asChild && isValidElement(children)) return /* @__PURE__ */ jsx(SpringMotionConfig, {
				layoutSpeed: "3",
				layoutVariant,
				reducedMotion: props.disableEffects ? "always" : "user",
				children: /* @__PURE__ */ jsx(MotionSlot, {
					type,
					className: rootClassName,
					initial: "icon",
					variants: buttonVariants,
					whileHover: "hover",
					whileTap: "pressed",
					...rest,
					children: renderIconButtonAsChild(children, iconContent)
				})
			});
			return /* @__PURE__ */ jsx(SpringMotionConfig, {
				layoutSpeed: "3",
				layoutVariant,
				reducedMotion: props.disableEffects ? "always" : "user",
				children: /* @__PURE__ */ jsx(m.button, {
					ref: buttonRef,
					type,
					className: rootClassName,
					name: htmlName,
					initial: "icon",
					variants: buttonVariants,
					whileHover: "hover",
					whileTap: "pressed",
					...rest,
					children: iconContent
				})
			});
		}
	});
});
IconButton.displayName = "IconButton";
//#endregion
export { IconButton };
