@yahoo/uds 3.161.0 → 3.162.0

package/dist/components/client/Radio/Radio.js

@@ -2,21 +2,16 @@
 "use client";
 import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
-import { FormLabel } from "../../FormLabel.js";
 import { usePrefersReducedMotion } from "../../../hooks/usePrefersReducedMotion.js";
 import { SpringMotionConfig } from "../SpringMotionConfig.js";
-import { useRadioGroup } from "./useRadioGroup.js";
-import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { RADIO_SIZES, RADIO_VARIANTS } from "./radioConstants.js";
+import { RadioBase } from "./RadioBase.js";
+import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { m } from "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 = m.create(Box);
+MotionBox.displayName = "RadioMotionBox";
 const hoverTransition = {
 	layoutVariant: "smooth",
 	layoutSpeed: "3"
@@ -49,175 +44,83 @@ const pressTransition = {
 *
 * @related [Radio](https://uds.build/docs/components/Radio).
 **/
-const Radio = 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, style, slotProps, ...radioProps }, parentRef) {
-	const generatedId = useId();
-	const uid = id ?? `uds-radio-${generatedId}`;
-	const rootSlotProps = slotProps?.root ?? {};
-	const radioSlotProps = slotProps?.radio ?? {};
-	const radioIconSlotProps = slotProps?.radioIcon ?? {};
-	const labelSlotProps = slotProps?.label ?? {};
-	const innerRef = useRef(null);
-	/**
-	* State
-	*/
-	const { name, isControlled, checked, setGroupValue } = useRadioGroup({
-		name: nameProp,
-		value: valueProp,
-		checked: 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 = useMemo(() => !disabled && isHovered, [disabled, isHovered]);
-	const showPressedEffect = useMemo(() => !disabled && !checked && isPressed, [
-		checked,
-		disabled,
-		isPressed
-	]);
-	const scale = useMemo(() => showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1, [showHoverEffect, showPressedEffect]);
-	const checkOpacity = useMemo(() => checked ? showPressedEffect ? "opacity-55" : "opacity-100" : "opacity-0", [checked, showPressedEffect]);
-	const showShadow = useMemo(() => {
-		return !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
-	}, [
-		checked,
-		disabled,
-		showHoverEffect,
-		showPressedEffect
-	]);
-	const motionAnimate = useMemo(() => ({ scale }), [scale]);
-	const motionTransition = useMemo(() => isPressed ? pressTransition : hoverTransition, [isPressed]);
-	/**
-	* Handlers
-	*/
-	const handleOnChange = useCallback((e) => {
-		setGroupValue(e.target.value);
-		onChange?.(e);
-	}, [onChange, setGroupValue]);
-	const handleFocus = useCallback((e) => {
-		onFocus?.(e);
-	}, [onFocus]);
-	const handleBlur = useCallback((e) => {
-		onBlur?.(e);
-	}, [onBlur]);
-	const handleHoverStart = useCallback(() => {
-		setIsHovered(true);
-	}, []);
-	const handleHoverEnd = useCallback(() => {
-		setIsHovered(false);
-	}, []);
-	const handleTapStart = useCallback(() => {
-		setIsPressed(true);
-	}, []);
-	const handleTapEnd = useCallback(() => {
-		setIsPressed(false);
-	}, []);
+const Radio = forwardRef(function Radio({ reduceMotion: forceReduceMotion, ...props }, parentRef) {
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const reduceMotion = forceReduceMotion ? "always" : "user";
 	const cssAnimationDuration = prefersReducedMotion || forceReduceMotion ? "duration-0" : "duration-120";
-	const classNames = {
-		root: getStyles({
-			radioSizeRoot: size,
-			radioVariantValueRoot: checked ? "checked" : "unchecked",
-			radioVariantRoot: variant,
-			display: "flex",
-			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
-			alignItems: "center",
-			className: cx([{
-				"cursor-pointer": !disabled,
-				"cursor-default": disabled,
-				"opacity-50": disabled
-			}, className])
-		}),
-		radio: getStyles({
-			radioSizeRadio: size,
-			radioVariantRadio: variant,
-			radioVariantValueRadio: checked ? "checked" : "unchecked",
-			className: cx([
-				"border",
-				"uds-ring",
-				"uds-ring-within",
-				cssAnimationDuration,
-				"transition-[background-color,border-color]",
-				"transition-shadow"
-			])
-		}),
-		radioCircle: getStyles({
-			radioVariantRadioCircle: variant,
-			radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
-			className: cx([
-				"pointer-events-none",
-				"w-[8px]",
-				"h-[8px]",
-				checkOpacity,
-				cssAnimationDuration,
-				"transition-opacity"
-			])
-		}),
-		htmlRadio: 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 RootElement = label ? m.label : m.div;
-	return /* @__PURE__ */ jsx(SpringMotionConfig, {
-		reducedMotion: reduceMotion,
-		...motionTransition,
-		children: /* @__PURE__ */ jsxs(RootElement, {
-			className: classNames.root,
-			"data-testid": "container",
-			style,
-			onHoverStart: handleHoverStart,
-			onHoverEnd: handleHoverEnd,
-			onTapStart: handleTapStart,
-			onTap: handleTapEnd,
-			onTapCancel: handleTapEnd,
-			tabIndex: -1,
-			...rootSlotProps,
-			children: [/* @__PURE__ */ jsxs(MotionBox, {
+	return /* @__PURE__ */ jsx(RadioBase, {
+		...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, checked, disabled, showHoverEffect, showPressedEffect, cssAnimationDuration, radioSlotProps, radioIconSlotProps, children }) => {
+			const scale = showPressedEffect ? .9 : showHoverEffect ? 1.1 : 1;
+			const checkOpacity = checked ? showPressedEffect ? cx("opacity-55") : cx("opacity-100") : cx("opacity-0");
+			const showShadow = !disabled && (showPressedEffect && !checked || showHoverEffect && checked);
+			const classNames = {
+				radio: getStyles({
+					radioSizeRadio: size,
+					radioVariantRadio: variant,
+					radioVariantValueRadio: checked ? "checked" : "unchecked",
+					className: cx([
+						"border",
+						"uds-ring",
+						"uds-ring-within",
+						cssAnimationDuration,
+						"transition-[background-color,border-color]",
+						"transition-shadow"
+					])
+				}),
+				radioCircle: getStyles({
+					radioVariantRadioCircle: variant,
+					radioVariantValueRadioCircle: checked ? "checked" : "unchecked",
+					className: cx([
+						"pointer-events-none",
+						"w-[8px]",
+						"h-[8px]",
+						checkOpacity,
+						cssAnimationDuration,
+						"transition-opacity"
+					])
+				})
+			};
+			return /* @__PURE__ */ jsxs(MotionBox, {
 				position: "relative",
 				borderRadius: "full",
 				alignItems: "center",
 				justifyContent: "center",
 				flex: "none",
 				className: classNames.radio,
-				animate: motionAnimate,
+				animate: { scale },
 				insetShadow: showShadow ? "lg-invert" : "none",
 				...radioSlotProps,
-				children: [/* @__PURE__ */ 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__ */ jsx(Box, {
+				children: [children, /* @__PURE__ */ jsx(Box, {
 					borderRadius: "full",
 					className: classNames.radioCircle,
 					...radioIconSlotProps
 				})]
-			}), label && /* @__PURE__ */ jsx(FormLabel, {
-				as: "div",
-				variant: "inherit",
-				color: "inherit",
-				label,
-				className: classNames.label,
-				...labelSlotProps
-			})]
-		})
+			});
+		}
 	});
 });
 Radio.displayName = "Radio";

package/dist/components/client/Radio/RadioBase.cjs

@@ -0,0 +1,133 @@
+/*! © 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_FormLabel = require("../../FormLabel.cjs");
+const require_components_client_Radio_radioConstants = require("./radioConstants.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");
+//#region src/components/client/Radio/RadioBase.tsx
+const RadioBase = (0, react.forwardRef)(function RadioBase({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...radioProps }, parentRef) {
+	const generatedId = (0, react.useId)();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	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 ? require_components_client_Radio_radioConstants.VARIANT_ERROR_MAP[variantProp] : variantProp, [hasError, variantProp]);
+	const showHoverEffect = enableInteractionTracking && !disabled && isHovered;
+	const showPressedEffect = enableInteractionTracking && !disabled && !checked && 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)(() => {
+		if (enableInteractionTracking) setIsHovered(true);
+	}, [enableInteractionTracking]);
+	const handleHoverEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsHovered(false);
+	}, [enableInteractionTracking]);
+	const handleTapStart = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(true);
+	}, [enableInteractionTracking]);
+	const handleTapEnd = (0, react.useCallback)(() => {
+		if (enableInteractionTracking) setIsPressed(false);
+	}, [enableInteractionTracking]);
+	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])
+		}),
+		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")
+	};
+	const input = /* @__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
+	});
+	return renderRoot({
+		className: classNames.root,
+		style,
+		rootSlotProps,
+		hasLabel: Boolean(label),
+		isPressed,
+		onHoverStart: handleHoverStart,
+		onHoverEnd: handleHoverEnd,
+		onTapStart: handleTapStart,
+		onTapEnd: handleTapEnd,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [renderIndicator({
+			size,
+			variant,
+			checked: Boolean(checked),
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			radioSlotProps,
+			radioIconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+RadioBase.displayName = "RadioBase";
+//#endregion
+exports.RadioBase = RadioBase;

package/dist/components/client/Radio/RadioBase.d.cts

@@ -0,0 +1,45 @@
+
+import { RadioVariant } from "../../../types/dist/index.cjs";
+import { DataAttributes, RadioProps } from "./types.cjs";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Radio/RadioBase.d.ts
+type ResolvedRadioVariant = RadioVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<RadioProps['size']>;
+  variant: ResolvedRadioVariant;
+  checked: boolean;
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  radioSlotProps: DataAttributes;
+  radioIconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type RadioBaseProps = RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const RadioBase: React.ForwardRefExoticComponent<RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RadioBase, type RadioBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedRadioVariant };

package/dist/components/client/Radio/RadioBase.d.ts

@@ -0,0 +1,46 @@
+
+"use client";
+import { RadioVariant } from "../../../types/dist/index.js";
+import { DataAttributes, RadioProps } from "./types.js";
+import React, { CSSProperties, ReactNode } from "react";
+
+//#region src/components/client/Radio/RadioBase.d.ts
+type ResolvedRadioVariant = RadioVariant | 'alert' | 'alert-secondary';
+type RenderRootArgs = {
+  className: string;
+  style?: CSSProperties;
+  rootSlotProps: DataAttributes;
+  hasLabel: boolean;
+  isPressed: boolean;
+  onHoverStart: () => void;
+  onHoverEnd: () => void;
+  onTapStart: () => void;
+  onTapEnd: () => void;
+  children: ReactNode;
+};
+type RenderIndicatorArgs = {
+  size: NonNullable<RadioProps['size']>;
+  variant: ResolvedRadioVariant;
+  checked: boolean;
+  disabled?: boolean;
+  showHoverEffect: boolean;
+  showPressedEffect: boolean;
+  cssAnimationDuration: string;
+  radioSlotProps: DataAttributes;
+  radioIconSlotProps: DataAttributes;
+  children: ReactNode;
+};
+type RadioBaseProps = RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+};
+declare const RadioBase: React.ForwardRefExoticComponent<RadioProps & {
+  cssAnimationDuration: string;
+  enableInteractionTracking?: boolean;
+  renderRoot: (args: RenderRootArgs) => ReactNode;
+  renderIndicator: (args: RenderIndicatorArgs) => ReactNode;
+} & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RadioBase, type RadioBaseProps, type RenderIndicatorArgs, type RenderRootArgs, type ResolvedRadioVariant };

package/dist/components/client/Radio/RadioBase.js

@@ -0,0 +1,130 @@
+/*! © 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 } from "./radioConstants.js";
+import { useRadioGroup } from "./useRadioGroup.js";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/client/Radio/RadioBase.tsx
+const RadioBase = forwardRef(function RadioBase({ id, name: nameProp, label, labelPosition = "start", variant: variantProp = "primary", size = "md", reduceMotion: _reduceMotion, value: valueProp = "", checked: checkedProp, defaultChecked, disabled, hasError, onChange, onFocus, onBlur, className, style, slotProps, cssAnimationDuration, enableInteractionTracking = false, renderRoot, renderIndicator, ...radioProps }, parentRef) {
+	const generatedId = useId();
+	const uid = id ?? `uds-radio-${generatedId}`;
+	const rootSlotProps = slotProps?.root ?? {};
+	const radioSlotProps = slotProps?.radio ?? {};
+	const radioIconSlotProps = slotProps?.radioIcon ?? {};
+	const labelSlotProps = slotProps?.label ?? {};
+	const innerRef = useRef(null);
+	/**
+	* State
+	*/
+	const { name, isControlled, checked, setGroupValue } = useRadioGroup({
+		name: nameProp,
+		value: valueProp,
+		checked: 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 && !checked && isPressed;
+	/**
+	* Handlers
+	*/
+	const handleOnChange = useCallback((e) => {
+		setGroupValue(e.target.value);
+		onChange?.(e);
+	}, [onChange, setGroupValue]);
+	const handleFocus = useCallback((e) => {
+		onFocus?.(e);
+	}, [onFocus]);
+	const handleBlur = useCallback((e) => {
+		onBlur?.(e);
+	}, [onBlur]);
+	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]);
+	const classNames = {
+		root: getStyles({
+			radioSizeRoot: size,
+			radioVariantValueRoot: checked ? "checked" : "unchecked",
+			radioVariantRoot: variant,
+			display: "flex",
+			flexDirection: labelPosition === "start" ? "row" : "row-reverse",
+			alignItems: "center",
+			className: cx([{
+				"cursor-pointer": !disabled,
+				"cursor-default": disabled,
+				"opacity-50": disabled
+			}, className])
+		}),
+		htmlRadio: 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: "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
+	});
+	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,
+			checked: Boolean(checked),
+			disabled,
+			showHoverEffect,
+			showPressedEffect,
+			cssAnimationDuration,
+			radioSlotProps,
+			radioIconSlotProps,
+			children: input
+		}), label && /* @__PURE__ */ jsx(FormLabel, {
+			as: "div",
+			variant: "inherit",
+			color: "inherit",
+			label,
+			className: classNames.label,
+			...labelSlotProps
+		})] })
+	});
+});
+RadioBase.displayName = "RadioBase";
+//#endregion
+export { RadioBase };

package/dist/components/client/Radio/radioConstants.cjs

@@ -0,0 +1,14 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/client/Radio/radioConstants.ts
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+//#endregion
+exports.RADIO_SIZES = RADIO_SIZES;
+exports.RADIO_VARIANTS = RADIO_VARIANTS;
+exports.VARIANT_ERROR_MAP = VARIANT_ERROR_MAP;

package/dist/components/client/Radio/radioConstants.d.cts

@@ -0,0 +1,8 @@
+
+import { RadioSize, RadioVariant } from "../../../types/dist/index.cjs";
+//#region src/components/client/Radio/radioConstants.d.ts
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+declare const VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/radioConstants.d.ts

@@ -0,0 +1,9 @@
+
+"use client";
+import { RadioSize, RadioVariant } from "../../../types/dist/index.js";
+//#region src/components/client/Radio/radioConstants.d.ts
+declare const RADIO_VARIANTS: RadioVariant[];
+declare const RADIO_SIZES: RadioSize[];
+declare const VARIANT_ERROR_MAP: Record<RadioVariant, 'alert' | 'alert-secondary'>;
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/radioConstants.js

@@ -0,0 +1,11 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+//#region src/components/client/Radio/radioConstants.ts
+const RADIO_VARIANTS = ["primary", "secondary"];
+const RADIO_SIZES = ["sm", "md"];
+const VARIANT_ERROR_MAP = {
+	primary: "alert",
+	secondary: "alert-secondary"
+};
+//#endregion
+export { RADIO_SIZES, RADIO_VARIANTS, VARIANT_ERROR_MAP };

package/dist/components/client/Radio/types.cjs

@@ -0,0 +1,2 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";