/*! © 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_Box = require("../../Box.cjs");
const require_hooks_usePrefersReducedMotion = require("../../../hooks/usePrefersReducedMotion.cjs");
const require_components_client_SpringMotionConfig = require("../SpringMotionConfig.cjs");
const require_components_client_Radio_radioConstants = require("./radioConstants.cjs");
const require_components_client_Radio_RadioBase = require("./RadioBase.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 MotionBox = motion_react.m.create(require_components_Box.Box);
MotionBox.displayName = "RadioMotionBox";
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({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
	const prefersReducedMotion = require_hooks_usePrefersReducedMotion.usePrefersReducedMotion();
	const reduceMotion = forceReduceMotion ? "always" : "user";
	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Radio_RadioBase.RadioBase, {
		...props,
		ref: parentRef,
		cssAnimationDuration,
		enableInteractionTracking: true,
		renderRoot: ({ className, style, rootSlotProps, hasLabel, isPressed, onHoverStart, onHoverEnd, onTapStart, onTapEnd, children }) => {
			const RootElement = hasLabel ? motion_react.m.label : motion_react.m.div;
			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
				reducedMotion: reduceMotion,
				...isPressed ? pressTransition : hoverTransition,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RootElement, {
					className,
					"data-testid": "container",
					style,
					onHoverStart,
					onHoverEnd,
					onTapStart,
					onTap: onTapEnd,
					onTapCancel: onTapEnd,
					tabIndex: -1,
					...rootSlotProps,
					children
				})
			});
		},
		renderIndicator: ({ size, variant, checked, disabled, showHoverEffect, showPressedEffect, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
			const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
			const checkOpacity = checked ? showPressedEffect ? require_styles_styler.cx("opacity-55") : require_styles_styler.cx("opacity-100") : require_styles_styler.cx("opacity-0");
			const showShadow = !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
			const classNames = {
				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"
					])
				}),
				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"
					])
				})
			};
			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(MotionBox, {
				position: "relative",
				borderRadius: "full",
				alignItems: "center",
				justifyContent: "center",
				flex: "none",
				className: classNames.radio,
				animate: { scale },
				insetShadow: showShadow ? "lg-invert" : "none",
				...radioSlotProps,
				children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
					borderRadius: "full",
					className: classNames.radioCircle,
					...radioIconSlotProps
				})]
			});
		}
	});
});
Radio.displayName = "Radio";
//#endregion
exports.RADIO_SIZES = require_components_client_Radio_radioConstants.RADIO_SIZES;
exports.RADIO_VARIANTS = require_components_client_Radio_radioConstants.RADIO_VARIANTS;
exports.Radio = Radio;
