/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { Icon } from "../../Icon.js";
import { Box } from "../../Box.js";
import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
import { SpringMotionConfig } from "../SpringMotionConfig.js";
import { SIZES, VARIANTS } from "./checkboxConstants.js";
import { CheckboxBase } from "./CheckboxBase.js";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { m } from "motion/react";
//#region src/components/client/Checkbox/Checkbox.tsx
const MotionBox = m.create(Box);
MotionBox.displayName = "CheckboxMotionBox";
const hoverTransition = {
	layoutVariant: "smooth",
	layoutSpeed: "3"
};
const pressTransition = {
	layoutVariant: "veryBouncy",
	layoutSpeed: "4"
};
/**
* **⚙️️ An checkbox.
*
* @componentType Client component
*
* @description
* A checkbox component allows users to select one or multiple options from a set. It represents a binary state, typically as checked or unchecked, and optionally includes a third "indeterminate" state to indicate partial selection.
*
* @see
* Check out the {@link https://uds.build/docs/components/checkbox Checkbox Docs} for more info
*
* @usage
* - Forms: checkbox
*
* @example
* ```tsx
* 'use client';
* import { Checkbox } from "@yahoo/uds";
*
* <Checkbox label="Name" required />
*```
*
* @related [Radio](https://uds.build/docs/components/radio), [Switch](https://uds.build/docs/components/switch), [Input](https://uds.build/docs/components/input).
**/
const Checkbox = forwardRef(function Checkbox({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
	const prefersReducedMotion = usePrefersReducedMotion();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	return /* @__PURE__ */ jsx(CheckboxBase, {
		...props,
		ref: parentRef,
		cssAnimationDuration,
		enableInteractionTracking: true,
		renderRoot: ({ className, style, rootSlotProps, hasLabel, isPressed, onHoverStart, onHoverEnd, onTapStart, onTapEnd, children }) => {
			const RootElement = hasLabel ? m.label : m.div;
			return /* @__PURE__ */ jsx(SpringMotionConfig, {
				reducedMotion: reduceMotion,
				...isPressed ? pressTransition : hoverTransition,
				children: /* @__PURE__ */ jsx(RootElement, {
					className,
					"data-testid": "container",
					style,
					onHoverStart,
					onHoverEnd,
					onTapStart,
					onTap: onTapEnd,
					onTapCancel: onTapEnd,
					tabIndex: -1,
					...rootSlotProps,
					children
				})
			});
		},
		renderIndicator: ({ size, variant, valueState, checked, showHoverEffect, showPressedEffect, cssAnimationDuration, checkIcon, checkboxSlotProps, iconSlotProps, children }) => {
			const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
			const checkOpacity = !checked ? cx("opacity-0") : showPressedEffect ? cx("opacity-55") : cx("opacity-100");
			const classNames = {
				checkbox: getStyles({
					checkboxSizeCheckbox: size,
					checkboxVariantCheckbox: variant,
					checkboxVariantValueCheckbox: valueState,
					className: cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
				}),
				check: getStyles({
					checkboxVariantCheckboxIcon: variant,
					checkboxVariantValueCheckboxIcon: valueState,
					className: cx("pointer-events-none", checkOpacity, cssAnimationDuration, "transition-opacity")
				})
			};
			return /* @__PURE__ */ jsxs(MotionBox, {
				position: "relative",
				className: classNames.checkbox,
				alignItems: "center",
				justifyContent: "center",
				flex: "none",
				animate: { scale },
				...checkboxSlotProps,
				children: [children, /* @__PURE__ */ jsx(Icon, {
					name: checkIcon,
					size: "sm",
					className: classNames.check,
					...iconSlotProps
				})]
			});
		}
	});
});
Checkbox.displayName = "Checkbox";
//#endregion
export { Checkbox, SIZES, VARIANTS };
