@yahoo/uds-mobile 2.13.0 → 2.15.0

package/dist/components/Chip/types.d.cts

@@ -0,0 +1,76 @@
+
+import { ChipSize, ChipVariant } from "../../types/dist/index.cjs";
+import { IconSlotType } from "../IconSlot.cjs";
+import { ReactNode, Ref } from "react";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Chip/types.d.ts
+type ChipInteractionState = 'rest' | 'pressed';
+type ChipKind = 'dismissible' | 'link' | 'toggle';
+type ChipToggleState = 'off' | 'on';
+interface ChipSharedProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+  /** The visual style variant. @default 'primary' */
+  variant?: ChipVariant;
+  /** The size of the chip. @default 'md' */
+  size?: ChipSize;
+  /** Minimum width of the chip in pixels. */
+  minWidth?: number;
+  /** Maximum width of the chip in pixels. @default 200 */
+  maxWidth?: number;
+  /** Icon displayed at the start of the chip. */
+  startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip. */
+  endIcon?: IconSlotType;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  /** Chip label content. */
+  children?: ReactNode;
+  /** Style override for the chip root. */
+  style?: StyleProp<ViewStyle>;
+}
+interface ChipButtonProps extends ChipSharedProps {
+  /** Called when the chip is pressed. */
+  onPress?: () => void;
+}
+interface ChipDismissibleProps extends Omit<ChipSharedProps, 'endIcon'> {
+  /** Called when the dismiss button is pressed. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipToggleProps extends ChipSharedProps {
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+}
+interface ChipProps extends ChipSharedProps {
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+  /** Called when the dismiss button is pressed. Shows a dismiss icon. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipBaseProps extends ChipSharedProps {
+  kind: ChipKind;
+  toggleState?: ChipToggleState;
+  interactionState?: ChipInteractionState;
+  pressable?: boolean;
+  accessibilityRole?: ViewProps['accessibilityRole'];
+  onPress?: () => void;
+  endContent?: ReactNode;
+}
+//#endregion
+export { type ChipBaseProps, type ChipButtonProps, type ChipDismissibleProps, type ChipInteractionState, type ChipKind, type ChipProps, type ChipSharedProps, type ChipSize, type ChipToggleProps, type ChipToggleState, type ChipVariant };
+//# sourceMappingURL=types.d.cts.map

package/dist/components/Chip/types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Chip/types.ts"],"mappings":";;;;;;;KAMK,oBAAA;AAAA,KACA,QAAA;AAAA,KACA,eAAA;AAAA,UAEK,eAAA,SAAwB,IAAA,CAAK,SAAA;;EAErC,GAAA,GAAM,GAAA,CAAI,IAAA;EANa;EAQvB,OAAA,GAAU,WAAA;EAPC;EASX,IAAA,GAAO,QAAA;EATI;EAWX,QAAA;EAVG;EAYH,QAAA;;EAEA,SAAA,GAAY,YAAA;EAdM;EAgBlB,OAAA,GAAU,YAAA;EAdc;EAgBxB,QAAA;EAhBqC;EAkBrC,QAAA,GAAW,SAAA;EAhBL;EAkBN,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAAA,UAGV,eAAA,SAAwB,eAAA;EATtB;EAWV,OAAA;AAAA;AAAA,UAGQ,oBAAA,SAA6B,IAAA,CAAK,eAAA;EA5BV;EA8BhC,SAAA;EA9BoC;EAgCpC,sBAAA;EAhCqC;EAkCrC,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,eAAA,SAAwB,eAAA;EAjChC;EAmCA,SAAA;EAjCA;EAmCA,QAAA,IAAY,SAAA;AAAA;AAAA,UAGJ,SAAA,SAAkB,eAAA;EAhC1B;EAkCA,OAAA;EAhCA;EAkCA,SAAA;EAhCA;EAkCA,QAAA,IAAY,SAAA;EAhCD;EAkCX,SAAA;EAhCQ;EAkCR,sBAAA;EAlC2B;EAoC3B,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,aAAA,SAAsB,eAAA;EAC9B,IAAA,EAAM,QAAA;EACN,WAAA,GAAc,eAAA;EACd,gBAAA,GAAmB,oBAAA;EACnB,SAAA;EACA,iBAAA,GAAoB,SAAA;EACpB,OAAA;EACA,UAAA,GAAa,SAAA;AAAA"}

package/dist/components/Chip/types.d.ts

@@ -0,0 +1,76 @@
+
+import { ChipSize, ChipVariant } from "../../types/dist/index.js";
+import { IconSlotType } from "../IconSlot.js";
+import { ReactNode, Ref } from "react";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Chip/types.d.ts
+type ChipInteractionState = 'rest' | 'pressed';
+type ChipKind = 'dismissible' | 'link' | 'toggle';
+type ChipToggleState = 'off' | 'on';
+interface ChipSharedProps extends Omit<ViewProps, 'children' | 'style'> {
+  /** Ref to the underlying View. */
+  ref?: Ref<View>;
+  /** The visual style variant. @default 'primary' */
+  variant?: ChipVariant;
+  /** The size of the chip. @default 'md' */
+  size?: ChipSize;
+  /** Minimum width of the chip in pixels. */
+  minWidth?: number;
+  /** Maximum width of the chip in pixels. @default 200 */
+  maxWidth?: number;
+  /** Icon displayed at the start of the chip. */
+  startIcon?: IconSlotType;
+  /** Icon displayed at the end of the chip. */
+  endIcon?: IconSlotType;
+  /** Whether the chip is disabled. */
+  disabled?: boolean;
+  /** Chip label content. */
+  children?: ReactNode;
+  /** Style override for the chip root. */
+  style?: StyleProp<ViewStyle>;
+}
+interface ChipButtonProps extends ChipSharedProps {
+  /** Called when the chip is pressed. */
+  onPress?: () => void;
+}
+interface ChipDismissibleProps extends Omit<ChipSharedProps, 'endIcon'> {
+  /** Called when the dismiss button is pressed. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipToggleProps extends ChipSharedProps {
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+}
+interface ChipProps extends ChipSharedProps {
+  /** Called when the chip is pressed. Makes the chip interactive. */
+  onPress?: () => void;
+  /** Whether the chip is toggled/selected. */
+  isToggled?: boolean;
+  /** Called when the chip toggle state changes. */
+  onToggle?: (isToggled: boolean) => void;
+  /** Called when the dismiss button is pressed. Shows a dismiss icon. */
+  onDismiss?: () => void;
+  /** Accessibility label for the dismiss button. */
+  dismissButtonAriaLabel?: string;
+  /** Custom icon for the dismiss button. */
+  dismissIcon?: IconSlotType;
+}
+interface ChipBaseProps extends ChipSharedProps {
+  kind: ChipKind;
+  toggleState?: ChipToggleState;
+  interactionState?: ChipInteractionState;
+  pressable?: boolean;
+  accessibilityRole?: ViewProps['accessibilityRole'];
+  onPress?: () => void;
+  endContent?: ReactNode;
+}
+//#endregion
+export { type ChipBaseProps, type ChipButtonProps, type ChipDismissibleProps, type ChipInteractionState, type ChipKind, type ChipProps, type ChipSharedProps, type ChipSize, type ChipToggleProps, type ChipToggleState, type ChipVariant };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Chip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Chip/types.ts"],"mappings":";;;;;;;KAMK,oBAAA;AAAA,KACA,QAAA;AAAA,KACA,eAAA;AAAA,UAEK,eAAA,SAAwB,IAAA,CAAK,SAAA;;EAErC,GAAA,GAAM,GAAA,CAAI,IAAA;EANa;EAQvB,OAAA,GAAU,WAAA;EAPC;EASX,IAAA,GAAO,QAAA;EATI;EAWX,QAAA;EAVG;EAYH,QAAA;;EAEA,SAAA,GAAY,YAAA;EAdM;EAgBlB,OAAA,GAAU,YAAA;EAdc;EAgBxB,QAAA;EAhBqC;EAkBrC,QAAA,GAAW,SAAA;EAhBL;EAkBN,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;AAAA,UAGV,eAAA,SAAwB,eAAA;EATtB;EAWV,OAAA;AAAA;AAAA,UAGQ,oBAAA,SAA6B,IAAA,CAAK,eAAA;EA5BV;EA8BhC,SAAA;EA9BoC;EAgCpC,sBAAA;EAhCqC;EAkCrC,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,eAAA,SAAwB,eAAA;EAjChC;EAmCA,SAAA;EAjCA;EAmCA,QAAA,IAAY,SAAA;AAAA;AAAA,UAGJ,SAAA,SAAkB,eAAA;EAhC1B;EAkCA,OAAA;EAhCA;EAkCA,SAAA;EAhCA;EAkCA,QAAA,IAAY,SAAA;EAhCD;EAkCX,SAAA;EAhCQ;EAkCR,sBAAA;EAlC2B;EAoC3B,WAAA,GAAc,YAAA;AAAA;AAAA,UAGN,aAAA,SAAsB,eAAA;EAC9B,IAAA,EAAM,QAAA;EACN,WAAA,GAAc,eAAA;EACd,gBAAA,GAAmB,oBAAA;EACnB,SAAA;EACA,iBAAA,GAAoB,SAAA;EACpB,OAAA;EACA,UAAA,GAAa,SAAA;AAAA"}

package/dist/components/Chip/types.js

@@ -0,0 +1 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */

package/dist/components/Input.cjs

@@ -1,9 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
+const require_components_HStack = require("./HStack.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
 const require_components_Text = require("./Text.cjs");
-const require_components_HStack = require("./HStack.cjs");
 const require_components_VStack = require("./VStack.cjs");
 let react = require("react");
 let react_native = require("react-native");

package/dist/components/Input.js

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { HStack } from "./HStack.js";
 import { IconSlot } from "./IconSlot.js";
 import { Text as Text$1 } from "./Text.js";
-import { HStack } from "./HStack.js";
 import { VStack } from "./VStack.js";
 import { memo, useCallback, useId, useMemo, useState } from "react";
 import { TextInput, View } from "react-native";

package/dist/components/{Radio.cjs → Radio/Radio.cjs}

@@ -1,17 +1,18 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
-const require_index = require("../motion-tokens/dist/index.cjs");
-const require_motion = require("../motion.cjs");
-const require_components_Pressable = require("./Pressable.cjs");
-const require_components_FormLabel = require("./FormLabel.cjs");
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_index = require("../../motion-tokens/dist/index.cjs");
+const require_motion = require("../../motion.cjs");
+const require_components_Pressable = require("../Pressable.cjs");
+const require_components_FormLabel = require("../FormLabel.cjs");
+const require_components_Radio_RadioGroupContext = require("./RadioGroupContext.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
-let generated_styles = require("../../generated/styles");
+let generated_styles = require("../../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
-//#region src/components/Radio.tsx
+//#region src/components/Radio/Radio.tsx
 const VARIANT_ERROR_MAP = {
 	primary: "alert",
 	secondary: "alert-secondary"
@@ -48,12 +49,24 @@ const VARIANT_ERROR_MAP = {
 * @see {@link Checkbox} for multi-select options
 * @see {@link Switch} for binary toggles
 */
-const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", variant: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${(0, react.useId)()}`;
+	const radioGroup = require_components_Radio_RadioGroupContext.useRadioGroupContext();
+	const disabled = Boolean(disabledProp || radioGroup?.disabled);
+	const hasError = hasErrorProp ?? radioGroup?.hasError;
+	const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
+	const size = sizeInput ?? radioGroup?.size ?? "md";
+	const variantProp = variantInput ?? radioGroup?.variant ?? "primary";
+	const value = valueProp ?? "";
+	const isInRadioGroup = radioGroup !== void 0;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = (0, react.useState)(false);
-	const checked = isControlled ? checkedProp : internalChecked;
+	const checked = isInRadioGroup ? radioGroup.value === value : isControlled ? checkedProp : internalChecked;
+	(0, react.useEffect)(() => {
+		if (!__DEV__ || !isInRadioGroup || valueProp) return;
+		console.warn("[UDS Mobile] Radio: A Radio rendered inside RadioGroup requires a unique, non-empty value prop.");
+	}, [isInRadioGroup, valueProp]);
 	const valueState = (0, react.useMemo)(() => {
 		return checked ? "checked" : "unchecked";
 	}, [checked]);
@@ -62,14 +75,23 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
 	const radioAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
 	const handlePress = (0, react.useCallback)(() => {
 		if (disabled) return;
+		if (isInRadioGroup) {
+			if (radioGroup.value === value) return;
+			radioGroup.setValue(value);
+			onChange?.(true);
+			return;
+		}
 		const newChecked = !checked;
 		if (!isControlled) setInternalChecked(newChecked);
 		onChange?.(newChecked);
 	}, [
 		disabled,
+		isInRadioGroup,
 		checked,
 		isControlled,
-		onChange
+		onChange,
+		radioGroup,
+		value
 	]);
 	const handlePressIn = (0, react.useCallback)(() => {
 		setPressed(true);

package/dist/components/{Radio.d.cts → Radio/Radio.d.cts}

@@ -1,10 +1,10 @@
 
-import { UniversalRadioProps } from "../types/dist/index.cjs";
+import { UniversalRadioProps } from "../../types/dist/index.cjs";
 import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
-//#region src/components/Radio.d.ts
+//#region src/components/Radio/Radio.d.ts
 interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
   /** Ref to the underlying View */
   ref?: Ref<View>;

package/dist/components/Radio/Radio.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;;;UAoBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;EAUrD,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/{Radio.d.ts → Radio/Radio.d.ts}

@@ -1,10 +1,10 @@
 
-import { UniversalRadioProps } from "../types/dist/index.js";
+import { UniversalRadioProps } from "../../types/dist/index.js";
 import * as _$react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
-//#region src/components/Radio.d.ts
+//#region src/components/Radio/Radio.d.ts
 interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
   /** Ref to the underlying View */
   ref?: Ref<View>;

package/dist/components/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;;;UAoBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;EAUrD,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/{Radio.js → Radio/Radio.js}

@@ -1,14 +1,15 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
-import { BUTTON_SPRING_CONFIG } from "../motion.js";
-import { Pressable as Pressable$1 } from "./Pressable.js";
-import { FormLabel } from "./FormLabel.js";
-import { memo, useCallback, useId, useMemo, useState } from "react";
+import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
+import { BUTTON_SPRING_CONFIG } from "../../motion.js";
+import { Pressable as Pressable$1 } from "../Pressable.js";
+import { FormLabel } from "../FormLabel.js";
+import { useRadioGroupContext } from "./RadioGroupContext.js";
+import { memo, useCallback, useEffect, useId, useMemo, useState } from "react";
 import { View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { radioStyles } from "../../generated/styles";
+import { radioStyles } from "../../../generated/styles";
 import Animated, { useAnimatedStyle, useDerivedValue, withSpring } from "react-native-reanimated";
-//#region src/components/Radio.tsx
+//#region src/components/Radio/Radio.tsx
 const VARIANT_ERROR_MAP = {
 	primary: "alert",
 	secondary: "alert-secondary"
@@ -45,12 +46,24 @@ const VARIANT_ERROR_MAP = {
 * @see {@link Checkbox} for multi-select options
 * @see {@link Switch} for binary toggles
 */
-const Radio = memo(function Radio({ label, labelPosition = "start", variant: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
+const Radio = memo(function Radio({ label, labelPosition = "start", variant: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${useId()}`;
+	const radioGroup = useRadioGroupContext();
+	const disabled = Boolean(disabledProp || radioGroup?.disabled);
+	const hasError = hasErrorProp ?? radioGroup?.hasError;
+	const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
+	const size = sizeInput ?? radioGroup?.size ?? "md";
+	const variantProp = variantInput ?? radioGroup?.variant ?? "primary";
+	const value = valueProp ?? "";
+	const isInRadioGroup = radioGroup !== void 0;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);
 	const [pressed, setPressed] = useState(false);
-	const checked = isControlled ? checkedProp : internalChecked;
+	const checked = isInRadioGroup ? radioGroup.value === value : isControlled ? checkedProp : internalChecked;
+	useEffect(() => {
+		if (!__DEV__ || !isInRadioGroup || valueProp) return;
+		console.warn("[UDS Mobile] Radio: A Radio rendered inside RadioGroup requires a unique, non-empty value prop.");
+	}, [isInRadioGroup, valueProp]);
 	const valueState = useMemo(() => {
 		return checked ? "checked" : "unchecked";
 	}, [checked]);
@@ -59,14 +72,23 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
 	const radioAnimatedStyle = useAnimatedStyle(() => ({ transform: [{ scale: scaleProgress.value }] }));
 	const handlePress = useCallback(() => {
 		if (disabled) return;
+		if (isInRadioGroup) {
+			if (radioGroup.value === value) return;
+			radioGroup.setValue(value);
+			onChange?.(true);
+			return;
+		}
 		const newChecked = !checked;
 		if (!isControlled) setInternalChecked(newChecked);
 		onChange?.(newChecked);
 	}, [
 		disabled,
+		isInRadioGroup,
 		checked,
 		isControlled,
-		onChange
+		onChange,
+		radioGroup,
+		value
 	]);
 	const handlePressIn = useCallback(() => {
 		setPressed(true);

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["Pressable"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../../motion';\nimport { FormLabel } from '../FormLabel';\nimport { Pressable } from '../Pressable';\nimport { useRadioGroupContext } from './RadioGroupContext';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n  /** Whether the radio is required */\n  required?: boolean;\n  /** Callback fired when the checked state changes */\n  onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Variant Mapping                                */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Radio Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile/Radio';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n  // Radio props\n  label,\n  labelPosition = 'start',\n  variant: variantInput,\n  size: sizeInput,\n  value: valueProp,\n  checked: checkedProp,\n  hasError: hasErrorProp,\n  reduceMotion: reduceMotionProp,\n  // Native props\n  defaultChecked,\n  disabled: disabledProp,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n  const radioGroup = useRadioGroupContext();\n\n  const disabled = Boolean(disabledProp || radioGroup?.disabled);\n  const hasError = hasErrorProp ?? radioGroup?.hasError;\n  const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;\n  const size = sizeInput ?? radioGroup?.size ?? 'md';\n  const variantProp = variantInput ?? radioGroup?.variant ?? 'primary';\n  const value = valueProp ?? '';\n\n  /* --------------------------------- State ---------------------------------- */\n  const isInRadioGroup = radioGroup !== undefined;\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<boolean>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isInRadioGroup\n    ? radioGroup.value === value\n    : isControlled\n      ? checkedProp\n      : internalChecked;\n\n  useEffect(() => {\n    if (!__DEV__ || !isInRadioGroup || valueProp) {\n      return;\n    }\n\n    console.warn(\n      '[UDS Mobile] Radio: A Radio rendered inside RadioGroup requires a unique, non-empty value prop.',\n    );\n  }, [isInRadioGroup, valueProp]);\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: RadioValueState = useMemo(() => {\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  /* -------------------------------- Animation ------------------------------- */\n  const shouldAnimate = !reduceMotion;\n\n  // Scale animation for press feedback (disabled when reduceMotion is true)\n  const scaleProgress = useDerivedValue(\n    () =>\n      shouldAnimate\n        ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n        : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n    [pressed, shouldAnimate],\n  );\n\n  const radioAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    if (isInRadioGroup) {\n      if (radioGroup.value === value) {\n        return;\n      }\n\n      radioGroup.setValue(value);\n      onChange?.(true);\n      return;\n    }\n\n    const newChecked = !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, isInRadioGroup, checked, isControlled, onChange, radioGroup, value]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n  radioStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked\n    pressed,\n  });\n\n  const rootStyle = useMemo(\n    () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [radioStyles.root, disabled],\n  );\n\n  const radioBoxStyle = useMemo(\n    () => [\n      radioStyles.radio,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ],\n    [radioStyles.radio, radioAnimatedStyle],\n  );\n\n  // Inner circle size: fixed 8x8px to match web implementation\n  const INNER_CIRCLE_SIZE = 8;\n\n  const circleStyle = useMemo(\n    () => [\n      radioStyles.radioCircle,\n      {\n        width: INNER_CIRCLE_SIZE,\n        height: INNER_CIRCLE_SIZE,\n        borderRadius: 9999,\n      },\n    ],\n    [radioStyles.radioCircle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    return (\n      <FormLabel\n        color=\"inherit\"\n        variant=\"inherit\"\n        label={label}\n        required={required}\n        showRequiredAsterisk={required}\n        hasError={hasError}\n        style={radioStyles.text}\n      />\n    );\n  }, [label, required, hasError, radioStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked,\n    }),\n    [disabled, checked],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <Pressable\n      ref={ref}\n      nativeID={uid}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      disabled={disabled}\n      flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n      alignItems=\"center\"\n      alignSelf=\"flex-start\"\n      accessibilityRole=\"radio\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}

package/dist/components/Radio/RadioGroup.cjs

@@ -0,0 +1,84 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_Radio_RadioGroupContext = require("./RadioGroupContext.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Radio/RadioGroup.tsx
+/**
+* **⚙️ A radio group component**
+*
+* @description
+* A radio group coordinates multiple Radio components so one option can be selected at a time.
+*
+* @category Form
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Radio } from '@yahoo/uds-mobile/Radio';
+* import { RadioGroup } from '@yahoo/uds-mobile/RadioGroup';
+*
+* <RadioGroup value={value} onChange={setValue}>
+*   <Radio value="email" label="Email" />
+*   <Radio value="sms" label="SMS" />
+* </RadioGroup>
+* ```
+*
+* @accessibility
+* - Sets `accessibilityRole="radiogroup"` automatically
+* - Child Radio components keep `accessibilityRole="radio"` and checked state
+*/
+const RadioGroup = (0, react.memo)(function RadioGroup({ name, value: valueProp, defaultValue, onChange, disabled, hasError, reduceMotion, size, variant, nativeID, flexDirection = "column", accessibilityState, children, ref, ...boxProps }) {
+	const isControlled = valueProp !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue);
+	const value = isControlled ? valueProp : internalValue;
+	const setValue = (0, react.useCallback)((nextValue) => {
+		if (nextValue === value) return;
+		if (!isControlled) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	}, [
+		isControlled,
+		onChange,
+		value
+	]);
+	const contextValue = (0, react.useMemo)(() => ({
+		name,
+		value,
+		disabled,
+		hasError,
+		reduceMotion,
+		size,
+		variant,
+		setValue
+	}), [
+		name,
+		value,
+		disabled,
+		hasError,
+		reduceMotion,
+		size,
+		variant,
+		setValue
+	]);
+	const groupAccessibilityState = (0, react.useMemo)(() => ({
+		...accessibilityState,
+		disabled: accessibilityState?.disabled ?? disabled
+	}), [accessibilityState, disabled]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Radio_RadioGroupContext.RadioGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			ref,
+			nativeID: nativeID ?? name,
+			accessibilityRole: "radiogroup",
+			accessibilityState: groupAccessibilityState,
+			flexDirection,
+			...boxProps,
+			children
+		})
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+exports.RadioGroup = RadioGroup;

package/dist/components/Radio/RadioGroup.d.cts

@@ -0,0 +1,52 @@
+
+import { RadioSize, RadioVariant, UniversalRadioGroupProps } from "../../types/dist/index.cjs";
+import { BoxProps } from "../Box.cjs";
+import * as _$react from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/Radio/RadioGroup.d.ts
+interface RadioGroupProps extends Omit<BoxProps, 'ref' | 'onChange'>, Omit<UniversalRadioGroupProps, 'asChild' | 'onChange'> {
+  /** Ref to the underlying View */
+  ref?: Ref<View>;
+  /** Callback fired when the selected value changes */
+  onChange?: (value: string) => void;
+  /** Whether every radio in the group is disabled */
+  disabled?: boolean;
+  /** Whether radios in the group should render in an error state */
+  hasError?: boolean;
+  /** Disable motion and transition effects for radios in the group */
+  reduceMotion?: boolean;
+  /** Shared radio size. Child Radio props can override this. */
+  size?: RadioSize;
+  /** Shared radio variant. Child Radio props can override this. */
+  variant?: RadioVariant;
+}
+/**
+ * **⚙️ A radio group component**
+ *
+ * @description
+ * A radio group coordinates multiple Radio components so one option can be selected at a time.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Radio } from '@yahoo/uds-mobile/Radio';
+ * import { RadioGroup } from '@yahoo/uds-mobile/RadioGroup';
+ *
+ * <RadioGroup value={value} onChange={setValue}>
+ *   <Radio value="email" label="Email" />
+ *   <Radio value="sms" label="SMS" />
+ * </RadioGroup>
+ * ```
+ *
+ * @accessibility
+ * - Sets `accessibilityRole="radiogroup"` automatically
+ * - Child Radio components keep `accessibilityRole="radio"` and checked state
+ */
+declare const RadioGroup: _$react.NamedExoticComponent<RadioGroupProps>;
+//#endregion
+export { RadioGroup, type RadioGroupProps };
+//# sourceMappingURL=RadioGroup.d.cts.map

package/dist/components/Radio/RadioGroup.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.cts","names":[],"sources":["../../../src/components/Radio/RadioGroup.tsx"],"mappings":";;;;;;;;UASU,eAAA,SAEN,IAAA,CAAK,QAAA,uBACL,IAAA,CAAK,wBAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,IAAA;EALF;EAOR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EANO;EAQP,QAAA;EANM;EAQN,YAAA;EAIU;EAFV,IAAA,GAAO,SAAA;EAZL;EAcF,OAAA,GAAU,YAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAY;;;;;;cA2BlB,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Radio/RadioGroup.d.ts

@@ -0,0 +1,52 @@
+
+import { RadioSize, RadioVariant, UniversalRadioGroupProps } from "../../types/dist/index.js";
+import { BoxProps } from "../Box.js";
+import * as _$react from "react";
+import { Ref } from "react";
+import { View } from "react-native";
+
+//#region src/components/Radio/RadioGroup.d.ts
+interface RadioGroupProps extends Omit<BoxProps, 'ref' | 'onChange'>, Omit<UniversalRadioGroupProps, 'asChild' | 'onChange'> {
+  /** Ref to the underlying View */
+  ref?: Ref<View>;
+  /** Callback fired when the selected value changes */
+  onChange?: (value: string) => void;
+  /** Whether every radio in the group is disabled */
+  disabled?: boolean;
+  /** Whether radios in the group should render in an error state */
+  hasError?: boolean;
+  /** Disable motion and transition effects for radios in the group */
+  reduceMotion?: boolean;
+  /** Shared radio size. Child Radio props can override this. */
+  size?: RadioSize;
+  /** Shared radio variant. Child Radio props can override this. */
+  variant?: RadioVariant;
+}
+/**
+ * **⚙️ A radio group component**
+ *
+ * @description
+ * A radio group coordinates multiple Radio components so one option can be selected at a time.
+ *
+ * @category Form
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Radio } from '@yahoo/uds-mobile/Radio';
+ * import { RadioGroup } from '@yahoo/uds-mobile/RadioGroup';
+ *
+ * <RadioGroup value={value} onChange={setValue}>
+ *   <Radio value="email" label="Email" />
+ *   <Radio value="sms" label="SMS" />
+ * </RadioGroup>
+ * ```
+ *
+ * @accessibility
+ * - Sets `accessibilityRole="radiogroup"` automatically
+ * - Child Radio components keep `accessibilityRole="radio"` and checked state
+ */
+declare const RadioGroup: _$react.NamedExoticComponent<RadioGroupProps>;
+//#endregion
+export { RadioGroup, type RadioGroupProps };
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/components/Radio/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","names":[],"sources":["../../../src/components/Radio/RadioGroup.tsx"],"mappings":";;;;;;;;UASU,eAAA,SAEN,IAAA,CAAK,QAAA,uBACL,IAAA,CAAK,wBAAA;;EAEP,GAAA,GAAM,GAAA,CAAI,IAAA;EALF;EAOR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EANO;EAQP,QAAA;EANM;EAQN,YAAA;EAIU;EAFV,IAAA,GAAO,SAAA;EAZL;EAcF,OAAA,GAAU,YAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAY;;;;;;cA2BlB,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}