"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
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_Box = require('../../Box.cjs');
const require_components_FormLabel = require('../../FormLabel.cjs');
const require_components_client_SpringMotionConfig = require('../SpringMotionConfig.cjs');
const require_components_client_Radio_useRadioGroup = require('./useRadioGroup.cjs');
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/Radio/Radio.tsx
const RADIO_VARIANTS = ["primary", "secondary"];
const RADIO_SIZES = ["sm", "md"];
const VARIANT_ERROR_MAP = {
	primary: "alert",
	secondary: "alert-secondary"
};
const MotionBox = motion_react.m.create(require_components_Box.Box);
const hoverTransition = {
	layoutVariant: "smooth",
	layoutSpeed: "3"
};
const pressTransition = {
	layoutVariant: "veryBouncy",
	layoutSpeed: "4"
};
/**
* **⚙️️ A Radio.
*
* @componentType Client component
*
* @description
* A radio component allows users to select one or multiple options from a set. Unlike checkbox, radio buttons cannot have multiple selected in a form, allowing only 1 selection in a group. It represents a binary state, typically as selected or unselected.
*
* @see
* Check out the {@link https://uds.build/docs/components/radio Radio Docs} for more info
*
* @usage
* - Forms: Radio
*
* @example
* ```tsx
* 'use client';
* import { Radio } from "@yahoo/uds";
*
* <Radio label="Name" />
*```
*
* @related [Radio](https://uds.build/docs/components/Radio).
**/
const Radio = (0, react.forwardRef)(function Radio({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: forceReduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, layerClassNames, ...radioProps }, parentRef) {
	const generatedId = (0, react.useId)();
	const uid = id ?? `uds-radio-${generatedId}`;
	const innerRef = (0, react.useRef)(null);
	/**
	* State
	*/
	const { name, isControlled, checked, setGroupValue } = require_components_client_Radio_useRadioGroup.useRadioGroup({
		name: nameProp,
		value: valueProp,
		checked: 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 = (0, react.useMemo)(() => !disabled && isHovered, [disabled, isHovered]);
	const showPressedEffect = (0, react.useMemo)(() => !disabled && !checked && isPressed, [
		checked,
		disabled,
		isPressed
	]);
	const scale = (0, react.useMemo)(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
	const checkOpacity = (0, react.useMemo)(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
	const showShadow = (0, react.useMemo)(() => {
		return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
	}, [
		checked,
		disabled,
		showHoverEffect,
		showPressedEffect
	]);
	const motionAnimate = (0, react.useMemo)(() => ({ scale }), [scale]);
	const motionTransition = (0, react.useMemo)(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
	/**
	* Handlers
	*/
	const handleOnChange = (0, react.useCallback)((e) => {
		setGroupValue(e.target.value);
		onChange?.(e);
	}, [onChange, setGroupValue]);
	const handleFocus = (0, react.useCallback)((e) => {
		onFocus?.(e);
	}, [onFocus]);
	const handleBlur = (0, react.useCallback)((e) => {
		onBlur?.(e);
	}, [onBlur]);
	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);
	}, []);
	const prefersReducedMotion = (0, motion_react.useReducedMotion)();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	const classNames = {
		root: require_styles_styler.getStyles({
			radioSizeRoot: size,
			radioVariantValueRoot: checked ? "checked" : "unchecked",
			radioVariantRoot: variant,
			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,
				layerClassNames?.root
			])
		}),
		radio: require_styles_styler.getStyles({
			radioSizeRadio: size,
			radioVariantRadio: variant,
			radioVariantValueRadio: checked ? "checked" : "unchecked",
			className: require_styles_styler.cx([
				"border",
				"uds-ring",
				"uds-ring-within",
				cssAnimationDuration,
				"transition-[background-color,border-color]",
				"transition-shadow",
				layerClassNames?.radio
			])
		}),
		radioCircle: require_styles_styler.getStyles({
			radioVariantRadioCircle: variant,
			radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
			className: require_styles_styler.cx([
				"pointer-events-none",
				"w-[8px]",
				"h-[8px]",
				checkOpacity,
				cssAnimationDuration,
				"transition-opacity"
			])
		}),
		htmlRadio: 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", layerClassNames?.label)
	};
	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",
			onHoverStart: handleHoverStart,
			onHoverEnd: handleHoverEnd,
			onTapStart: handleTapStart,
			onTap: handleTapEnd,
			onTapCancel: handleTapEnd,
			tabIndex: -1,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
				position: "relative",
				borderRadius: "full",
				alignItems: "center",
				justifyContent: "center",
				flex: "none",
				className: classNames.radio,
				animate: motionAnimate,
				insetShadow: showShadow ? "lg-invert" : "none",
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
					type: "radio",
					tabIndex: 0,
					...radioProps,
					ref: (ref) => {
						innerRef.current = ref;
						if (typeof parentRef === "function") parentRef(ref);
						else if (parentRef !== null) parentRef.current = ref;
					},
					onFocus: handleFocus,
					onBlur: handleBlur,
					id: uid,
					name,
					value: valueProp,
					disabled,
					"aria-invalid": hasError,
					onChange: handleOnChange,
					...isControlled ? { checked } : { defaultChecked },
					className: classNames.htmlRadio
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
					borderRadius: "full",
					className: classNames.radioCircle
				})]
			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
				as: "div",
				variant: "inherit",
				color: "inherit",
				label,
				className: classNames.label
			})]
		})
	});
});
Radio.displayName = "Radio";

//#endregion
exports.RADIO_SIZES = RADIO_SIZES;
exports.RADIO_VARIANTS = RADIO_VARIANTS;
exports.Radio = Radio;