/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../styles/styler.js";
import { Icon } from "../../components/Icon.js";
import { Box } from "../../components/Box.js";
import { CheckboxBase } from "../../components/client/Checkbox/CheckboxBase.js";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/css-animation/Checkbox/Checkbox.tsx
/**
* CSS-animation Checkbox variant. This component intentionally never imports motion.
*
* @componentType Client component
*
* @example
* ```tsx
* 'use client';
* import { Checkbox } from '@yahoo/uds/css-animation';
*
* <Checkbox label="Name" required />
* ```
*/
const Checkbox = forwardRef(function Checkbox(props, parentRef) {
	const cssAnimationDuration = "duration-120";
	return /* @__PURE__ */ jsx(CheckboxBase, {
		...props,
		ref: parentRef,
		cssAnimationDuration,
		renderRoot: ({ className, style, rootSlotProps, hasLabel, children }) => {
			return /* @__PURE__ */ jsx(hasLabel ? "label" : "div", {
				className: cx("group", className),
				"data-testid": "container",
				style,
				tabIndex: -1,
				...rootSlotProps,
				children
			});
		},
		renderIndicator: ({ size, variant, valueState, checked, disabled, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
			const classNames = {
				checkbox: getStyles({
					checkboxSizeCheckbox: size,
					checkboxVariantCheckbox: variant,
					checkboxVariantValueCheckbox: valueState,
					className: cx("uds-ring", "uds-ring-within", !disabled && "group-hover:scale-110", !disabled && "group-active:scale-90", cssAnimationDuration, "transition-[background-color,border-color,box-shadow,transform]")
				}),
				check: getStyles({
					checkboxVariantCheckboxIcon: variant,
					checkboxVariantValueCheckboxIcon: valueState,
					className: cx("pointer-events-none", checked ? "opacity-100" : "opacity-0", Boolean(checked) && !disabled && "group-active:opacity-55", cssAnimationDuration, "transition-opacity")
				})
			};
			return /* @__PURE__ */ jsxs(Box, {
				position: "relative",
				className: classNames.checkbox,
				alignItems: "center",
				justifyContent: "center",
				flex: "none",
				...checkboxSlotProps,
				children: [children, /* @__PURE__ */ jsx(Icon, {
					name: checkIcon,
					size: "sm",
					className: classNames.check,
					...iconSlotProps
				})]
			});
		}
	});
});
Checkbox.displayName = "Checkbox";
//#endregion
export { Checkbox };
