/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { BUTTON_GAP_VAR, 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 { IconSlot } from "../../IconSlot.js";
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
import { SpringMotionConfig } from "../SpringMotionConfig.js";
import { ButtonBase, renderButtonChildren } from "./ButtonBase.js";
import "./buttonConstants.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/Button/Button.tsx
const iconContainerMotionVariants = {
	hide: {
		display: "none",
		width: "0px",
		opacity: 0
	},
	loading: {
		display: "flex",
		width: "auto",
		opacity: 1
	},
	icon: {
		display: "flex",
		width: "auto",
		opacity: 1
	}
};
const SCALE_DOWN = .7;
const hiddenState = {
	scale: SCALE_DOWN,
	opacity: 0
};
const visibleState = {
	scale: [
		SCALE_DOWN,
		SCALE_DOWN,
		1
	],
	opacity: [
		0,
		0,
		1
	],
	transition: { times: [
		0,
		.5,
		1
	] }
};
const iconMotionVariants = {
	hide: hiddenState,
	icon: visibleState,
	loading: hiddenState
};
const loadingMotionVariants = {
	hide: hiddenState,
	icon: hiddenState,
	loading: visibleState
};
/**
* **🖲️ A button element that can be used to trigger an action**
*
* @componentType Client component
*/
const Button = forwardRef(function Button(props, forwardedRef) {
	const prefersReducedMotion = usePrefersReducedMotion();
	const disableMotion = !!props.disableEffects || !!props.disabled;
	const layoutVariant = prefersReducedMotion ? "smooth" : "subtle";
	const endVariant = props.endIcon ? "icon" : "hide";
	const gapVariant = props.loading || props.startIcon || props.endIcon ? "withIcon" : "withoutIcon";
	const startVariant = props.loading ? "loading" : props.startIcon ? "icon" : "hide";
	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})` },
		withIcon: { columnGap: `var(${BUTTON_GAP_VAR})` },
		withoutIcon: { columnGap: "0px" }
	}), [disableMotion]);
	return /* @__PURE__ */ jsx(ButtonBase, {
		...props,
		ref: forwardedRef,
		renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
			className: iconContainerClassName,
			initial: false,
			variants: iconContainerMotionVariants,
			animate: startVariant,
			children: /* @__PURE__ */ jsxs(AnimatePresence, {
				initial: false,
				mode: "popLayout",
				children: [loading && /* @__PURE__ */ jsx(m.span, {
					variants: loadingMotionVariants,
					initial: "hide",
					animate: "loading",
					exit: "hide",
					children: /* @__PURE__ */ jsx(Icon, {
						className: loadingIconClassName,
						size: "sm",
						name: Progress,
						variant: iconVariant,
						color: "current"
					})
				}, "loading"), startIcon && !loading && /* @__PURE__ */ jsx(m.span, {
					variants: iconMotionVariants,
					initial: "hide",
					animate: "icon",
					exit: "hide",
					children: /* @__PURE__ */ jsx(IconSlot, {
						className: [iconClassName, startIconClassName].filter(Boolean).join(" "),
						icon: startIcon,
						iconProps: {
							size: "sm",
							variant: iconVariant,
							color: "current"
						},
						...startIconSlotProps
					})
				})]
			})
		}),
		renderEndContent: ({ endIcon, iconVariant, iconContainerClassName, iconClassName, endIconClassName, endIconSlotProps }) => /* @__PURE__ */ jsx(m.span, {
			className: iconContainerClassName,
			initial: false,
			variants: iconContainerMotionVariants,
			animate: endVariant,
			children: /* @__PURE__ */ jsx(AnimatePresence, {
				initial: false,
				mode: "popLayout",
				children: endIcon && /* @__PURE__ */ jsx(m.span, {
					variants: iconMotionVariants,
					initial: "hide",
					animate: "icon",
					exit: "hide",
					children: /* @__PURE__ */ jsx(IconSlot, {
						className: [iconClassName, endIconClassName].filter(Boolean).join(" "),
						icon: endIcon,
						iconProps: {
							size: "sm",
							variant: iconVariant,
							color: "current"
						},
						...endIconSlotProps
					})
				})
			})
		}),
		renderRoot: ({ asChild, children, buttonRef, type, rootClassName, rest, contentClassName, contentSlotProps, startContent, endContent }) => {
			if (asChild && isValidElement(children)) {
				const childProps = children.props;
				return /* @__PURE__ */ jsx(SpringMotionConfig, {
					layoutSpeed: "3",
					layoutVariant,
					children: /* @__PURE__ */ jsx(MotionSlot, {
						type,
						className: rootClassName,
						initial: ["rest", gapVariant],
						animate: [
							"hide",
							"rest",
							gapVariant
						],
						variants: buttonVariants,
						whileHover: "hover",
						whileTap: "pressed",
						...rest,
						children: renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent)
					})
				});
			}
			return /* @__PURE__ */ jsx(SpringMotionConfig, {
				layoutSpeed: "3",
				layoutVariant,
				children: /* @__PURE__ */ jsxs(m.button, {
					ref: buttonRef,
					type,
					className: rootClassName,
					initial: ["rest", gapVariant],
					animate: [
						"hide",
						"rest",
						gapVariant
					],
					variants: buttonVariants,
					whileHover: "hover",
					whileTap: "pressed",
					...rest,
					children: [
						startContent,
						/* @__PURE__ */ jsx("span", {
							className: contentClassName,
							...contentSlotProps,
							children
						}),
						endContent
					]
				})
			});
		}
	});
});
Button.displayName = "Button";
//#endregion
export { Button, iconMotionVariants, loadingMotionVariants };
