/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
import { cx, getStyles } from "../../../styles/styler.js";
import { FormLabel } from "../../FormLabel.js";
import { VARIANT_ERROR_MAP, getIcon, isIndeterminate } from "./checkboxConstants.js";
import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/client/Checkbox/CheckboxBase.tsx
const CheckboxBase = forwardRef(function CheckboxBase({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, disabled, required, hasError, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...checkboxProps }, parentRef) {
	const generatedId = useId();
	const uid = id ?? `uds-input-${generatedId}`;
	const rootSlotProps = slotProps?.root ?? {};
	const checkboxSlotProps = slotProps?.checkbox ?? {};
	const iconSlotProps = slotProps?.icon ?? {};
	const labelSlotProps = slotProps?.label ?? {};
	const innerRef = useRef(null);
	/**
	* State
	*/
	const isControlled = checkedProp !== void 0;
	const [checked, setChecked] = useState(isControlled ? checkedProp : defaultChecked);
	const [isHovered, setIsHovered] = useState(false);
	const [isPressed, setIsPressed] = useState(false);
	/**
	* Derived values
	*/
	const variant = useMemo(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
	const showPressedEffect = enableInteractionTracking && !disabled && isPressed;
	/**
	* Handlers
	*/
	const handleChange = useCallback((e) => {
		onChange?.(e);
		if (!isControlled) setChecked(e.target.checked);
	}, [isControlled, onChange]);
	const handleHoverStart = useCallback(() => {
		if (enableInteractionTracking) setIsHovered(true);
	}, [enableInteractionTracking]);
	const handleHoverEnd = useCallback(() => {
		if (enableInteractionTracking) setIsHovered(false);
	}, [enableInteractionTracking]);
	const handleTapStart = useCallback(() => {
		if (enableInteractionTracking) setIsPressed(true);
	}, [enableInteractionTracking]);
	const handleTapEnd = useCallback(() => {
		if (enableInteractionTracking) setIsPressed(false);
	}, [enableInteractionTracking]);
	/**
	* Helpers
	*/
	const setDOMIndeterminate = (checked_) => {
		if (!innerRef.current) return;
		innerRef.current.indeterminate = isIndeterminate(checked_);
	};
	/**
	* Effects
	*/
	useEffect(() => {
		if (isControlled) setChecked(checkedProp);
	}, [checkedProp, isControlled]);
	useEffect(() => {
		setDOMIndeterminate(checked);
	}, [checked]);
	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
	const classNames = {
		root: getStyles({
			checkboxSizeRoot: size,
			checkboxVariantRoot: variant,
			checkboxVariantValueRoot: valueState,
			display: "flex",
			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
			alignItems: "center",
			className: cx({
				"cursor-pointer": !disabled,
				"cursor-default": disabled,
				"opacity-50": disabled
			}, className)
		}),
		htmlCheckbox: cx("cursor-[inherit]", "absolute", "opacity-0", "top-1/2", "left-1/2", "w-[calc(100%+2px)]", "h-[calc(100%+2px)]", "transform", "translate-x-[-50%]", "translate-y-[-50%]"),
		label: cx(labelPosition === "start" ? "text-start" : "text-end")
	};
	const input = /* @__PURE__ */ jsx("input", {
		type: "checkbox",
		tabIndex: 0,
		...checkboxProps,
		ref: (ref) => {
			innerRef.current = ref;
			setDOMIndeterminate(checked);
			if (typeof parentRef === "function") parentRef(ref);
			else if (parentRef !== null) parentRef.current = ref;
		},
		id: uid,
		disabled,
		required,
		"aria-invalid": hasError,
		checked: isControlled ? isIndeterminate(checked) ? false : checked : void 0,
		defaultChecked: isControlled ? void 0 : defaultChecked,
		onChange: handleChange,
		className: classNames.htmlCheckbox
	});
	return renderRoot({
		className: classNames.root,
		style,
		rootSlotProps,
		hasLabel: Boolean(label),
		isPressed,
		onHoverStart: handleHoverStart,
		onHoverEnd: handleHoverEnd,
		onTapStart: handleTapStart,
		onTapEnd: handleTapEnd,
		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [renderIndicator({
			size,
			variant,
			valueState,
			checked,
			disabled,
			showHoverEffect,
			showPressedEffect,
			cssAnimationDuration,
			checkIcon: getIcon(checked),
			checkboxSlotProps,
			iconSlotProps,
			children: input
		}), label && /* @__PURE__ */ jsx(FormLabel, {
			as: "div",
			variant: "inherit",
			color: "inherit",
			required,
			label,
			className: classNames.label,
			...labelSlotProps
		})] })
	});
});
CheckboxBase.displayName = "CheckboxBase";
//#endregion
export { CheckboxBase };
