/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { Icon } from "../../Icon.js";
import { pickDefaultPaddleIcon } from "./paddleButtonIcons.js";
import { usePaddleNavContext } from "./paddleNavContext.js";
import { forwardRef, useLayoutEffect, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/client/PaddleNav/PaddleButton.tsx
const PaddleButton = forwardRef(function PaddleButton({ onClick, disabled = false, hidden = false, icon, paddleRole, className, ...rest }, ref) {
	const { variant, size, orientation, registerPaddleHidden } = usePaddleNavContext();
	useLayoutEffect(() => {
		registerPaddleHidden(paddleRole, hidden);
		return () => registerPaddleHidden(paddleRole, false);
	}, [
		paddleRole,
		hidden,
		registerPaddleHidden
	]);
	const resolvedIcon = icon ?? pickDefaultPaddleIcon(orientation, paddleRole);
	const rootClass = useMemo(() => cx(getStyles({ paddlenavSizeRoot: size }), getStyles({ paddlenavVariantRoot: variant })), [size, variant]);
	const backgroundClass = useMemo(() => getStyles({ paddlenavVariantBackground: variant }), [variant]);
	const iconSizeClass = useMemo(() => getStyles({ paddlenavSizeIcon: size }), [size]);
	const iconVariantClass = useMemo(() => getStyles({ paddlenavVariantIcon: variant }), [variant]);
	const styles = cx("relative inline-flex items-center justify-center box-border overflow-hidden", "border-solid select-none uds-nested-radius", "transition-[color,border-color,box-shadow] duration-[180ms] ease-[cubic-bezier(0,0,0.2,1)]", "uds-ring", !disabled && !hidden && "cursor-pointer", disabled && "cursor-not-allowed opacity-50", hidden && "pointer-events-none hidden", rootClass, className);
	return /* @__PURE__ */ jsxs("button", {
		...rest,
		ref,
		type: "button",
		className: styles,
		onClick: hidden ? void 0 : onClick,
		disabled,
		"aria-hidden": hidden || void 0,
		"data-paddle-button-hidden": hidden ? "true" : void 0,
		"data-paddle-button-role": paddleRole,
		children: [/* @__PURE__ */ jsx("span", {
			"aria-hidden": true,
			className: cx("absolute inset-0 -z-10 pointer-events-none rounded-[var(--uds-nested-radius)]", "transition-[background-color,opacity] duration-[180ms] ease-[cubic-bezier(0,0,0.2,1)]", backgroundClass)
		}), /* @__PURE__ */ jsx(Icon, {
			size: "md",
			name: resolvedIcon,
			color: "current",
			className: cx(iconSizeClass, iconVariantClass)
		})]
	});
});
PaddleButton.displayName = "PaddleButton";
//#endregion
export { PaddleButton };
