/*! © 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 { cx, getStyles } from "../../styles/styler.js";
import { Icon } from "../Icon.js";
import { generateDefaultClassName } from "../../automated-config/dist/utils/generateDefaultClassName.js";
import "./buttonConstants.js";
import { SpringMotionConfig } from "./SpringMotionConfig.js";
import { iconMotionVariants, loadingMotionVariants } from "./Button.js";
import { Progress } from "@yahoo/uds-icons";
import { forwardRef, useImperativeHandle, useMemo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { AnimatePresence, m, useReducedMotion } from "motion/react";
//#region src/components/client/IconButton.tsx
const defaultSizeRootClass = generateDefaultClassName("iconbutton", "size", "root");
const defaultSizeIconClass = generateDefaultClassName("iconbutton", "size", "icon");
const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
/**
* **⚙️️ An icon button element that can be used to trigger an action**
*
* @componentType Client component
*
* @description An icon button is essentially an interactive icon. They should be used to display an icon which, when clicked, allows the user to trigger an action. Icon buttons provide additional features such hover states, focus states, and pressable functionality.
*
* @see
* Check out the {@link https://uds.build/docs/components/icon-button IconButton Docs} for more info
*
* @usage
* - When you need a button that is represented by an icon rather than text. This is useful in compact spaces, toolbars, or when the action is commonly understood through a visual symbol.
* - If you need a button that is used to trigger a non-critical action.
*
* @example
* ```tsx
* 'use client';
* import { IconButton } from "@yahoo/uds";
* import { AddFolder } from "@yahoo/uds-icons";
*
* <IconButton name={AddFolder} variant="primary" />
* ```
*
* @related [Icon](https://uds.build/docs/components/icon), [Button](https://uds.build/docs/components/button), and [Pressable](https://uds.build/docs/components/pressable)
*
**/
const IconButton = forwardRef(function IconButton({ variant, size, iconVariant, loading, disableEffects, name, slotProps, type = "button", htmlName, className, children, ...rest }, forwardedRef) {
	const ref = useRef(null);
	useImperativeHandle(forwardedRef, () => ref.current);
	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
	const prefersReducedMotion = useReducedMotion();
	const disableMotion = !!disableEffects || !!rest?.disabled;
	const layoutVariant = useMemo(() => prefersReducedMotion ? "smooth" : "subtle", [prefersReducedMotion]);
	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]);
	const rootSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeRoot: size }) : defaultSizeRootClass, [size]);
	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
	const iconSizeClass = useMemo(() => size ? getStyles({ iconbuttonSizeIcon: size }) : defaultSizeIconClass, [size]);
	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
	const styles = useMemo(() => ({
		root: cx("uds-ring", "uds-hit-target", "inline-flex overflow-hidden justify-center items-center", "[transform-origin:center]", "[backface-visibility:hidden]", "[transition-property:color,background-color,border-color, box-shadow,text-decoration-color,fill,stroke]", "[transition-timing-function:cubic-bezier(0,0,0.2,1)]", "[transition-duration:220ms]", rootSizeClass, rootVariantClass, rest?.disabled && "cursor-not-allowed", loading && "uds-button-loading", disableEffects && "uds-button-without-effects", className),
		icon: getStyles({ className: cx(iconSizeClass, iconVariantClass) }),
		loadingIcon: getStyles({ className: cx([
			"animate-spin",
			iconSizeClass,
			iconVariantClass
		]) })
	}), [
		className,
		disableEffects,
		iconSizeClass,
		iconVariantClass,
		loading,
		rest?.disabled,
		rootSizeClass,
		rootVariantClass
	]);
	return /* @__PURE__ */ jsx(SpringMotionConfig, {
		layoutSpeed: "3",
		layoutVariant,
		reducedMotion: disableEffects ? "always" : "user",
		children: /* @__PURE__ */ jsx(m.button, {
			ref,
			type,
			className: styles.root,
			name: htmlName,
			initial: "icon",
			variants: buttonVariants,
			whileHover: "hover",
			whileTap: "pressed",
			...rest,
			children: /* @__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: styles.loadingIcon
					})
				}, "loading"), name && !loading && /* @__PURE__ */ jsx(m.span, {
					variants: iconMotionVariants,
					initial: "icon",
					animate: "icon",
					exit: "hide",
					children: children || /* @__PURE__ */ jsx(Icon, {
						size: "sm",
						name,
						variant: iconVariant,
						color: "current",
						className: cx(styles.icon, iconSlotClassName),
						...iconSlotProps
					})
				}, name.name)]
			})
		})
	});
});
IconButton.displayName = "IconButton";
//#endregion
export { IconButton };
