/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
const require_index = require("../../../css-tokens/dist/index.cjs");
const require_utils_createSlot = require("../../../utils/createSlot.cjs");
const require_components_Icon = require("../../Icon.cjs");
const require_components_IconSlot = require("../../IconSlot.cjs");
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
const require_components_client_Button_ButtonBase = require("./ButtonBase.cjs");
require("./buttonConstants.cjs");
let _yahoo_uds_icons = require("@yahoo/uds-icons");
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let motion_react = require("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 = (0, react.forwardRef)(function Button(props, forwardedRef) {
	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.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 = (0, react.useMemo)(() => require_utils_createSlot.createSlot(), []);
	const MotionSlot = (0, react.useMemo)(() => motion_react.m.create(Slot), [Slot]);
	const buttonVariants = (0, react.useMemo)(() => ({
		rest: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_REST})` },
		hover: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_HOVER})` },
		pressed: { scale: disableMotion ? 1 : `var(${require_index.BUTTON_SCALE_EFFECT_PRESSED})` },
		withIcon: { columnGap: `var(${require_index.BUTTON_GAP_VAR})` },
		withoutIcon: { columnGap: "0px" }
	}), [disableMotion]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Button_ButtonBase.ButtonBase, {
		...props,
		ref: forwardedRef,
		renderStartContent: ({ iconVariant, loading, startIcon, iconContainerClassName, loadingIconClassName, iconClassName, startIconClassName, startIconSlotProps }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
			className: iconContainerClassName,
			initial: false,
			variants: iconContainerMotionVariants,
			animate: startVariant,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.AnimatePresence, {
				initial: false,
				mode: "popLayout",
				children: [loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
					variants: loadingMotionVariants,
					initial: "hide",
					animate: "loading",
					exit: "hide",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
						className: loadingIconClassName,
						size: "sm",
						name: _yahoo_uds_icons.Progress,
						variant: iconVariant,
						color: "current"
					})
				}, "loading"), startIcon && !loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
					variants: iconMotionVariants,
					initial: "hide",
					animate: "icon",
					exit: "hide",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.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__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
			className: iconContainerClassName,
			initial: false,
			variants: iconContainerMotionVariants,
			animate: endVariant,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
				initial: false,
				mode: "popLayout",
				children: endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.span, {
					variants: iconMotionVariants,
					initial: "hide",
					animate: "icon",
					exit: "hide",
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.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 && (0, react.isValidElement)(children)) {
				const childProps = children.props;
				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
					layoutSpeed: "3",
					layoutVariant,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionSlot, {
						type,
						className: rootClassName,
						initial: ["rest", gapVariant],
						animate: [
							"hide",
							"rest",
							gapVariant
						],
						variants: buttonVariants,
						whileHover: "hover",
						whileTap: "pressed",
						...rest,
						children: require_components_client_Button_ButtonBase.renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent)
					})
				});
			}
			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
				layoutSpeed: "3",
				layoutVariant,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(motion_react.m.button, {
					ref: buttonRef,
					type,
					className: rootClassName,
					initial: ["rest", gapVariant],
					animate: [
						"hide",
						"rest",
						gapVariant
					],
					variants: buttonVariants,
					whileHover: "hover",
					whileTap: "pressed",
					...rest,
					children: [
						startContent,
						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
							className: contentClassName,
							...contentSlotProps,
							children
						}),
						endContent
					]
				})
			});
		}
	});
});
Button.displayName = "Button";
//#endregion
exports.Button = Button;
exports.iconMotionVariants = iconMotionVariants;
exports.loadingMotionVariants = loadingMotionVariants;
