/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { createSlot } from "../../../utils/createSlot.js";
import { generateDefaultClassName } from "../../../automated-config/dist/utils/generateDefaultClassName.js";
import { cloneElement, forwardRef, useMemo } from "react";
//#region src/components/client/IconButton/IconButtonBase.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");
const IconButtonBase = forwardRef(function IconButtonBase({ variant, size, iconVariant, loading, disableEffects, name, asChild = false, slotProps, type = "button", htmlName, className, children, renderIconContent, renderRoot, ...rest }, forwardedRef) {
	const { className: iconSlotClassName, ...iconSlotProps } = slotProps?.icon ?? {};
	const Slot = useMemo(() => createSlot(), []);
	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 renderRoot({
		asChild,
		Slot,
		children,
		buttonRef: forwardedRef,
		type,
		htmlName,
		rootClassName: styles.root,
		rest,
		iconContent: renderIconContent({
			asChild,
			loading,
			name,
			iconVariant,
			children,
			iconClassName: styles.icon,
			loadingIconClassName: styles.loadingIcon,
			iconSlotClassName,
			iconSlotProps
		})
	});
});
IconButtonBase.displayName = "IconButtonBase";
function renderIconButtonAsChild(children, content) {
	const childProps = children.props;
	return cloneElement(children, childProps, content);
}
//#endregion
export { IconButtonBase, renderIconButtonAsChild };
