/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../styles/styler.cjs");
const require_components_Icon = require("../Icon.cjs");
const require_components_Box = require("../Box.cjs");
const require_components_FormLabel = require("../FormLabel.cjs");
const require_components_client_SpringMotionConfig = require("./SpringMotionConfig.cjs");
let _yahoo_uds_icons = require("@yahoo/uds-icons");
let react = require("react");
react = require_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let motion_react = require("motion/react");
//#region src/components/client/Checkbox.tsx
const VARIANTS = ["primary", "secondary"];
const SIZES = ["sm", "md"];
const VARIANT_ERROR_MAP = {
	primary: "alert",
	secondary: "alert-secondary"
};
const isIndeterminate = (checked) => checked === "indeterminate";
const getIcon = (checked) => {
	if (isIndeterminate(checked)) return _yahoo_uds_icons.Minus;
	return _yahoo_uds_icons.Check;
};
const MotionBox = motion_react.m.create(require_components_Box.Box);
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 = (0, react.forwardRef)(function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, disabled, required, hasError, className, style, slotProps, ...checkboxProps }, parentRef) {
	const generatedId = (0, react.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 = (0, react.useRef)(null);
	/**
	* State
	*/
	const isControlled = checkedProp !== void 0;
	const [checked, setChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked);
	const [isHovered, setIsHovered] = (0, react.useState)(false);
	const [isPressed, setIsPressed] = (0, react.useState)(false);
	/**
	* Derived values
	*/
	const variant = (0, react.useMemo)(() => hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
	const showHoverEffect = !disabled && isHovered;
	const showPressedEffect = !disabled && isPressed;
	const scale = (0, react.useMemo)(() => {
		if (showPressedEffect) return .9;
		if (showHoverEffect) return 1.1;
		return 1;
	}, [showPressedEffect, showHoverEffect]);
	const checkOpacity = (0, react.useMemo)(() => {
		if (!checked) return "opacity-0";
		if (showPressedEffect) return "opacity-55";
		return "opacity-100";
	}, [checked, showPressedEffect]);
	const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
	const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
	/**
	* Handlers
	*/
	const handleChange = (0, react.useCallback)((e) => {
		onChange?.(e);
		if (!isControlled) setChecked(e.target.checked);
	}, [isControlled, onChange]);
	const handleHoverStart = (0, react.useCallback)(() => {
		setIsHovered(true);
	}, []);
	const handleHoverEnd = (0, react.useCallback)(() => {
		setIsHovered(false);
	}, []);
	const handleTapStart = (0, react.useCallback)(() => {
		setIsPressed(true);
	}, []);
	const handleTapEnd = (0, react.useCallback)(() => {
		setIsPressed(false);
	}, []);
	/**
	* Helpers
	*/
	const setDOMIndeterminate = (checked_) => {
		if (!innerRef.current) return;
		innerRef.current.indeterminate = isIndeterminate(checked_);
	};
	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	/**
	* Effects
	*/
	(0, react.useEffect)(() => {
		if (isControlled) setChecked(checkedProp);
	}, [checkedProp, isControlled]);
	(0, react.useEffect)(() => {
		setDOMIndeterminate(checked);
	}, [checked]);
	const valueState = isIndeterminate(checked) ? "indeterminate" : checked ? "checked" : "unchecked";
	const classNames = {
		root: require_styles_styler.getStyles({
			checkboxSizeRoot: size,
			checkboxVariantRoot: variant,
			checkboxVariantValueRoot: valueState,
			display: "flex",
			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
			alignItems: "center",
			className: require_styles_styler.cx({
				"cursor-pointer": !disabled,
				"cursor-default": disabled,
				"opacity-50": disabled
			}, className)
		}),
		checkbox: require_styles_styler.getStyles({
			checkboxSizeCheckbox: size,
			checkboxVariantCheckbox: variant,
			checkboxVariantValueCheckbox: valueState,
			className: require_styles_styler.cx("uds-ring", "uds-ring-within", cssAnimationDuration, "transition-[background-color,border-color,box-shadow]")
		}),
		check: require_styles_styler.getStyles({
			checkboxVariantCheckboxIcon: variant,
			checkboxVariantValueCheckboxIcon: valueState,
			className: require_styles_styler.cx("pointer-events-none", checkOpacity, cssAnimationDuration, "transition-opacity")
		}),
		htmlCheckbox: require_styles_styler.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: require_styles_styler.cx(labelPosition === "start" ? "text-start" : "text-end")
	};
	const RootElement = label ? motion_react.m.label : motion_react.m.div;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
		reducedMotion: reduceMotion,
		...motionTransition,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RootElement, {
			className: classNames.root,
			"data-testid": "container",
			style,
			onHoverStart: handleHoverStart,
			onHoverEnd: handleHoverEnd,
			onTapStart: handleTapStart,
			onTap: handleTapEnd,
			onTapCancel: handleTapEnd,
			tabIndex: -1,
			...rootSlotProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
				position: "relative",
				className: classNames.checkbox,
				alignItems: "center",
				justifyContent: "center",
				flex: "none",
				animate: motionAnimate,
				...checkboxSlotProps,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.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
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
					name: getIcon(checked),
					size: "sm",
					className: classNames.check,
					...iconSlotProps
				})]
			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
				as: "div",
				variant: "inherit",
				color: "inherit",
				required,
				label,
				className: classNames.label,
				...labelSlotProps
			})]
		})
	});
});
Checkbox.displayName = "Checkbox";
//#endregion
exports.Checkbox = Checkbox;
exports.SIZES = SIZES;
exports.VARIANTS = VARIANTS;
