/*! © 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";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/client/Button/ButtonBase.tsx
const defaultVariantRootClass = generateDefaultClassName("button", "variant", "root");
const defaultVariantIconClass = generateDefaultClassName("button", "variant", "icon");
const defaultSizeRootClass = generateDefaultClassName("button", "size", "root");
const defaultSizeIconClass = generateDefaultClassName("button", "size", "icon");
const ButtonBase = forwardRef(function ButtonBase({ size, variant, startIcon, endIcon, iconVariant, loading, disableEffects, children, asChild = false, slotProps, type = "button", className, width, renderStartContent, renderEndContent, renderRoot, ...rest }, forwardedRef) {
	const { className: startIconClassName, ...startIconSlotProps } = slotProps?.startIcon ?? {};
	const { className: endIconClassName, ...endIconSlotProps } = slotProps?.endIcon ?? {};
	const { className: contentClassName, ...contentSlotProps } = slotProps?.content ?? {};
	const gapVariant = loading || startIcon || endIcon ? "withIcon" : "withoutIcon";
	const Slot = useMemo(() => createSlot(), []);
	const rootSizeClass = useMemo(() => size ? getStyles({ buttonSizeRoot: size }) : defaultSizeRootClass, [size]);
	const rootVariantClass = useMemo(() => variant ? getStyles({ buttonVariantRoot: variant }) : defaultVariantRootClass, [variant]);
	const iconSizeClass = useMemo(() => size ? getStyles({ buttonSizeIcon: size }) : defaultSizeIconClass, [size]);
	const iconVariantClass = useMemo(() => variant ? getStyles({ buttonVariantIcon: variant }) : defaultVariantIconClass, [variant]);
	const styles = useMemo(() => ({
		root: getStyles({
			width,
			className: cx([
				"uds-ring",
				"uds-hit-target",
				"inline-flex max-w-full overflow-hidden justify-center items-center whitespace-nowrap select-none",
				"[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",
				gapVariant === "withIcon" && "uds-button-with-gap",
				className
			])
		}),
		iconContainer: cx(["flex shrink-0 overflow-clip uds-button-icon-container"]),
		icon: getStyles({ className: cx([iconSizeClass, iconVariantClass]) }),
		loadingIcon: getStyles({ className: cx([
			"animate-spin",
			iconSizeClass,
			iconVariantClass
		]) }),
		content: cx(["min-w-0 truncate"])
	}), [
		className,
		disableEffects,
		gapVariant,
		iconSizeClass,
		iconVariantClass,
		loading,
		rest?.disabled,
		rootSizeClass,
		rootVariantClass,
		width
	]);
	const iconRenderArgs = useMemo(() => ({
		iconVariant,
		loading,
		startIcon,
		endIcon,
		iconClassName: styles.icon,
		loadingIconClassName: styles.loadingIcon,
		iconContainerClassName: styles.iconContainer,
		startIconClassName,
		endIconClassName,
		startIconSlotProps,
		endIconSlotProps
	}), [
		endIcon,
		endIconClassName,
		endIconSlotProps,
		iconVariant,
		loading,
		startIcon,
		startIconClassName,
		startIconSlotProps,
		styles.icon,
		styles.iconContainer,
		styles.loadingIcon
	]);
	return renderRoot({
		asChild,
		Slot,
		children,
		buttonRef: forwardedRef,
		type,
		rootClassName: styles.root,
		rest,
		contentClassName: cx(styles.content, contentClassName),
		contentSlotProps,
		startContent: renderStartContent(iconRenderArgs),
		endContent: renderEndContent(iconRenderArgs)
	});
});
ButtonBase.displayName = "ButtonBase";
function renderButtonChildren(children, childProps, startContent, contentClassName, contentSlotProps, endContent) {
	return cloneElement(children, childProps, /* @__PURE__ */ jsxs(Fragment$1, { children: [
		startContent,
		/* @__PURE__ */ jsx("span", {
			className: contentClassName,
			...contentSlotProps,
			children: children.props.children
		}),
		endContent
	] }));
}
//#endregion
export { ButtonBase, renderButtonChildren };
