@yahoo/uds-mobile 1.3.0-beta.9 → 1.4.0-beta.1

package/dist/components/Radio.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+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_Text = require('./Text.cjs');
@@ -9,7 +10,7 @@ let react = require("react");
 let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_reanimated = require("react-native-reanimated");
-react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 
 //#region src/components/Radio.tsx
 const VARIANT_ERROR_MAP = {
@@ -19,13 +20,14 @@ const VARIANT_ERROR_MAP = {
 /**
 * **⚙️ A radio component**
 *
-* @componentType Client component
-*
 * @description
 * A radio component allows users to select one option from a set.
 * Unlike checkbox, radio buttons cannot have multiple selected in a group,
 * allowing only one selection at a time.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Radio } from '@yahoo/uds-mobile';
@@ -38,9 +40,16 @@ const VARIANT_ERROR_MAP = {
 * - Forms: For selecting a single option from multiple choices
 * - Settings: For toggling between mutually exclusive preferences
 *
-* @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="radio"` automatically
+* - Announces checked/unchecked state
+* - Label is used as accessibility label
+* - Supports `reduceMotion` for users who prefer reduced motion
+*
+* @see {@link Checkbox} for multi-select options
+* @see {@link Switch} for binary toggles
 */
-const Radio = (0, react.memo)(function Radio$1({ 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: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${(0, react.useId)()}`;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = (0, react.useState)(isControlled ? checkedProp : defaultChecked ?? false);

package/dist/components/Radio.d.cts

@@ -1,11 +1,12 @@
 
 import { UniversalRadioProps } from "../types/dist/index.cjs";
-import * as react16 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Radio.d.ts
 interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
   /** Default checked state for uncontrolled mode */
   defaultChecked?: boolean;
@@ -19,13 +20,14 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
 /**
  * **⚙️ A radio component**
  *
- * @componentType Client component
- *
  * @description
  * A radio component allows users to select one option from a set.
  * Unlike checkbox, radio buttons cannot have multiple selected in a group,
  * allowing only one selection at a time.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Radio } from '@yahoo/uds-mobile';
@@ -38,9 +40,16 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  * - Forms: For selecting a single option from multiple choices
  * - Settings: For toggling between mutually exclusive preferences
  *
- * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="radio"` automatically
+ * - Announces checked/unchecked state
+ * - Label is used as accessibility label
+ * - Supports `reduceMotion` for users who prefer reduced motion
+ *
+ * @see {@link Checkbox} for multi-select options
+ * @see {@link Switch} for binary toggles
  */
-declare const Radio: react16.NamedExoticComponent<RadioProps>;
+declare const Radio: react.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,KAAK,qBAAqB;QAC/C,IAAI;;EADF,cAAW,CAAA,EAAA,OAAA;EAAa;EACtB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADqB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAmB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpE,OAAK,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR2B;EAU3B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Radio.d.mts

@@ -1,11 +1,12 @@
 
 import { UniversalRadioProps } from "../types/dist/index.mjs";
-import * as react4 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Radio.d.ts
 interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
+  /** Ref to the underlying View */
   ref?: Ref<View>;
   /** Default checked state for uncontrolled mode */
   defaultChecked?: boolean;
@@ -19,13 +20,14 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
 /**
  * **⚙️ A radio component**
  *
- * @componentType Client component
- *
  * @description
  * A radio component allows users to select one option from a set.
  * Unlike checkbox, radio buttons cannot have multiple selected in a group,
  * allowing only one selection at a time.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Radio } from '@yahoo/uds-mobile';
@@ -38,9 +40,16 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  * - Forms: For selecting a single option from multiple choices
  * - Settings: For toggling between mutually exclusive preferences
  *
- * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
+ * @accessibility
+ * - Sets `accessibilityRole="radio"` automatically
+ * - Announces checked/unchecked state
+ * - Label is used as accessibility label
+ * - Supports `reduceMotion` for users who prefer reduced motion
+ *
+ * @see {@link Checkbox} for multi-select options
+ * @see {@link Switch} for binary toggles
  */
-declare const Radio: react4.NamedExoticComponent<RadioProps>;
+declare const Radio: react.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,KAAK,qBAAqB;QAC/C,IAAI;;EADF,cAAW,CAAA,EAAA,OAAA;EAAa;EACtB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADqB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAmB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpE,OAAK,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../src/components/Radio.tsx"],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,cAAA;;EAEA,QAAA;EAJU;EAMV,QAAA;EAR2B;EAU3B,QAAA,IAAY,OAAA;AAAA;;;;;;;;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,KAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Radio.mjs

@@ -17,13 +17,14 @@ const VARIANT_ERROR_MAP = {
 /**
 * **⚙️ A radio component**
 *
-* @componentType Client component
-*
 * @description
 * A radio component allows users to select one option from a set.
 * Unlike checkbox, radio buttons cannot have multiple selected in a group,
 * allowing only one selection at a time.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Radio } from '@yahoo/uds-mobile';
@@ -36,9 +37,16 @@ const VARIANT_ERROR_MAP = {
 * - Forms: For selecting a single option from multiple choices
 * - Settings: For toggling between mutually exclusive preferences
 *
-* @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
+* @accessibility
+* - Sets `accessibilityRole="radio"` automatically
+* - Announces checked/unchecked state
+* - Label is used as accessibility label
+* - Supports `reduceMotion` for users who prefer reduced motion
+*
+* @see {@link Checkbox} for multi-select options
+* @see {@link Switch} for binary toggles
 */
-const Radio = memo(function Radio$1({ 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: variantProp = "primary", size = "md", checked: checkedProp, hasError, reduceMotion, defaultChecked, disabled, required, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${useId()}`;
 	const isControlled = checkedProp !== void 0;
 	const [internalChecked, setInternalChecked] = useState(isControlled ? checkedProp : defaultChecked ?? false);

package/dist/components/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":["VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant>","Radio","valueState: RadioValueState","styleVariant: RadioStyleVariant"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\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?: 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 * @componentType Client 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 * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\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 * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info\n */\nconst Radio = memo(function Radio({\n  // Radio props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\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 = isControlled ? checkedProp : internalChecked;\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  // Circle visibility animation (for the inner dot)\n  // When reduceMotion is true, still show/hide the circle but without animation\n  const circleProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0),\n    [checked, shouldAnimate],\n  );\n\n  const radioAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const circleAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(circleProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\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      circleAnimatedStyle,\n    ],\n    [radioStyles.radioCircle, circleAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, 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}>\n        <Animated.View style={circleStyle} />\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
+{"version":3,"file":"Radio.mjs","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\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';\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: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\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 = isControlled ? checkedProp : internalChecked;\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  // Circle visibility animation (for the inner dot)\n  // When reduceMotion is true, still show/hide the circle but without animation\n  const circleProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0),\n    [checked, shouldAnimate],\n  );\n\n  const radioAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const circleAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(circleProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\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      circleAnimatedStyle,\n    ],\n    [radioStyles.radioCircle, circleAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, 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}>\n        <Animated.View style={circleStyle} />\n      </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/Screen.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_HStack = require('./HStack.cjs');
 const require_components_VStack = require('./VStack.cjs');
 let react = require("react");
@@ -17,6 +18,9 @@ let react_native_unistyles = require("react-native-unistyles");
 * consistent padding and background styling. Uses Unistyles' built-in
 * safe area insets via the `rt` runtime object.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Screen } from '@yahoo/uds-mobile';
@@ -38,10 +42,12 @@ let react_native_unistyles = require("react-native-unistyles");
 * - Use as the root component for screens
 * - Use stickyHeader for persistent header content
 * - Content is automatically scrollable
+* - Safe area insets are handled automatically
 *
-* @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+* @see {@link VStack} for non-scrollable vertical layouts
+* @see {@link Box} for custom containers
 */
-const Screen = (0, react.memo)(function Screen$1({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
+const Screen = (0, react.memo)(function Screen({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
 	const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};
 	generated_styles.styles.useVariants({
 		backgroundColor,

package/dist/components/Screen.d.cts

@@ -1,18 +1,25 @@
 
 import { HStackProps } from "./HStack.cjs";
-import * as react14 from "react";
+import * as react from "react";
 import { ReactNode, Ref } from "react";
 import { ScrollView, ScrollViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Screen.d.ts
 interface ScreenProps extends ScrollViewProps {
+  /** Ref to the underlying ScrollView */
   ref?: Ref<ScrollView>;
+  /** Background color of the screen */
   backgroundColor?: StyleProps['backgroundColor'];
+  /** Horizontal padding for screen content */
   spacingHorizontal?: StyleProps['spacingHorizontal'];
+  /** Top padding for screen content */
   spacingTop?: StyleProps['spacingTop'];
+  /** Gap between child elements */
   gap?: StyleProps['columnGap'];
+  /** Content that sticks to the top of the screen when scrolling */
   stickyHeader?: ReactNode;
+  /** Props passed to the sticky header container */
   stickyHeaderProps?: HStackProps;
 }
 /**
@@ -23,6 +30,9 @@ interface ScreenProps extends ScrollViewProps {
  * consistent padding and background styling. Uses Unistyles' built-in
  * safe area insets via the `rt` runtime object.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Screen } from '@yahoo/uds-mobile';
@@ -44,10 +54,12 @@ interface ScreenProps extends ScrollViewProps {
  * - Use as the root component for screens
  * - Use stickyHeader for persistent header content
  * - Content is automatically scrollable
+ * - Safe area insets are handled automatically
  *
- * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+ * @see {@link VStack} for non-scrollable vertical layouts
+ * @see {@link Box} for custom containers
  */
-declare const Screen: react14.NamedExoticComponent<ScreenProps>;
+declare const Screen: react.NamedExoticComponent<ScreenProps>;
 //#endregion
 export { Screen, type ScreenProps };
 //# sourceMappingURL=Screen.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.cts","names":[],"sources":["../../src/components/Screen.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,WAAA,SAAoB;QACtB,IAAI;EADF,eAAY,CAAA,EAGF,UAHE,CAAA,iBAAA,CAAA;EACV,iBAAA,CAAA,EAIU,UAJV,CAAA,mBAAA,CAAA;EAAJ,UAAA,CAAA,EAKO,UALP,CAAA,YAAA,CAAA;EAEY,GAAA,CAAA,EAIZ,UAJY,CAAA,WAAA,CAAA;EAEE,YAAA,CAAA,EAIL,SAJK;EACP,iBAAA,CAAA,EAIO,WAJP;;;;;;AAN8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CvC,QAAM,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Screen.d.cts","names":[],"sources":["../../src/components/Screen.tsx"],"mappings":";;;;;;;;UAYU,WAAA,SAAoB,eAAA;;EAE5B,GAAA,GAAM,GAAA,CAAI,UAAA;EAFU;EAIpB,eAAA,GAAkB,UAAA;EAFR;EAIV,iBAAA,GAAoB,UAAA;EAFF;EAIlB,UAAA,GAAa,UAAA;EAAA;EAEb,GAAA,GAAM,UAAA;EAES;EAAf,YAAA,GAAe,SAAA;EAZa;EAc5B,iBAAA,GAAoB,WAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAW;;;;;;;;;;;;;;;;;;;cAwC3B,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Screen.d.mts

@@ -1,18 +1,25 @@
 
 import { HStackProps } from "./HStack.mjs";
-import * as react5 from "react";
+import * as react from "react";
 import { ReactNode, Ref } from "react";
 import { ScrollView, ScrollViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
 
 //#region src/components/Screen.d.ts
 interface ScreenProps extends ScrollViewProps {
+  /** Ref to the underlying ScrollView */
   ref?: Ref<ScrollView>;
+  /** Background color of the screen */
   backgroundColor?: StyleProps['backgroundColor'];
+  /** Horizontal padding for screen content */
   spacingHorizontal?: StyleProps['spacingHorizontal'];
+  /** Top padding for screen content */
   spacingTop?: StyleProps['spacingTop'];
+  /** Gap between child elements */
   gap?: StyleProps['columnGap'];
+  /** Content that sticks to the top of the screen when scrolling */
   stickyHeader?: ReactNode;
+  /** Props passed to the sticky header container */
   stickyHeaderProps?: HStackProps;
 }
 /**
@@ -23,6 +30,9 @@ interface ScreenProps extends ScrollViewProps {
  * consistent padding and background styling. Uses Unistyles' built-in
  * safe area insets via the `rt` runtime object.
  *
+ * @category Layout
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Screen } from '@yahoo/uds-mobile';
@@ -44,10 +54,12 @@ interface ScreenProps extends ScrollViewProps {
  * - Use as the root component for screens
  * - Use stickyHeader for persistent header content
  * - Content is automatically scrollable
+ * - Safe area insets are handled automatically
  *
- * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+ * @see {@link VStack} for non-scrollable vertical layouts
+ * @see {@link Box} for custom containers
  */
-declare const Screen: react5.NamedExoticComponent<ScreenProps>;
+declare const Screen: react.NamedExoticComponent<ScreenProps>;
 //#endregion
 export { Screen, type ScreenProps };
 //# sourceMappingURL=Screen.d.mts.map

package/dist/components/Screen.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.mts","names":[],"sources":["../../src/components/Screen.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAYU,WAAA,SAAoB;QACtB,IAAI;EADF,eAAY,CAAA,EAGF,UAHE,CAAA,iBAAA,CAAA;EACV,iBAAA,CAAA,EAIU,UAJV,CAAA,mBAAA,CAAA;EAAJ,UAAA,CAAA,EAKO,UALP,CAAA,YAAA,CAAA;EAEY,GAAA,CAAA,EAIZ,UAJY,CAAA,WAAA,CAAA;EAEE,YAAA,CAAA,EAIL,SAJK;EACP,iBAAA,CAAA,EAIO,WAJP;;;;;;AAN8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CvC,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Screen.d.mts","names":[],"sources":["../../src/components/Screen.tsx"],"mappings":";;;;;;;;UAYU,WAAA,SAAoB,eAAA;;EAE5B,GAAA,GAAM,GAAA,CAAI,UAAA;EAFU;EAIpB,eAAA,GAAkB,UAAA;EAFR;EAIV,iBAAA,GAAoB,UAAA;EAFF;EAIlB,UAAA,GAAa,UAAA;EAAA;EAEb,GAAA,GAAM,UAAA;EAES;EAAf,YAAA,GAAe,SAAA;EAZa;EAc5B,iBAAA,GAAoB,WAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAW;;;;;;;;;;;;;;;;;;;cAwC3B,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Screen.mjs

@@ -16,6 +16,9 @@ import { StyleSheet } from "react-native-unistyles";
 * consistent padding and background styling. Uses Unistyles' built-in
 * safe area insets via the `rt` runtime object.
 *
+* @category Layout
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Screen } from '@yahoo/uds-mobile';
@@ -37,10 +40,12 @@ import { StyleSheet } from "react-native-unistyles";
 * - Use as the root component for screens
 * - Use stickyHeader for persistent header content
 * - Content is automatically scrollable
+* - Safe area insets are handled automatically
 *
-* @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
+* @see {@link VStack} for non-scrollable vertical layouts
+* @see {@link Box} for custom containers
 */
-const Screen = memo(function Screen$1({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
+const Screen = memo(function Screen({ children, backgroundColor = "primary", spacingHorizontal = "6", spacingTop = "6", gap, stickyHeader, stickyHeaderProps, style, ref, ...props }) {
 	const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};
 	styles.useVariants({
 		backgroundColor,

package/dist/components/Screen.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.mjs","names":["Screen"],"sources":["../../src/components/Screen.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ScrollViewProps, ViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport { VStack } from './VStack';\n\ninterface ScreenProps extends ScrollViewProps {\n  ref?: Ref<ScrollView>;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Spacing\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingTop?: StyleProps['spacingTop'];\n  gap?: StyleProps['columnGap'];\n  // Header\n  stickyHeader?: ReactNode;\n  stickyHeaderProps?: HStackProps;\n}\n\n/**\n * **📱 A screen container with safe area handling**\n *\n * @description\n * A scrollable screen component that handles safe area insets and provides\n * consistent padding and background styling. Uses Unistyles' built-in\n * safe area insets via the `rt` runtime object.\n *\n * @example\n * ```tsx\n * import { Screen } from '@yahoo/uds-mobile';\n *\n * <Screen backgroundColor=\"primary\" spacingHorizontal=\"6\">\n *   <Text>Screen content</Text>\n * </Screen>\n *\n * // With sticky header\n * <Screen\n *   stickyHeader={<Text>Header</Text>}\n *   stickyHeaderProps={{ backgroundColor: 'secondary' }}\n * >\n *   <Text>Content</Text>\n * </Screen>\n * ```\n *\n * @usage\n * - Use as the root component for screens\n * - Use stickyHeader for persistent header content\n * - Content is automatically scrollable\n *\n * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info\n */\nconst Screen = memo(function Screen({\n  children,\n  // Background\n  backgroundColor = 'primary',\n  // Spacing\n  spacingHorizontal = '6',\n  spacingTop = '6',\n  gap,\n  // Header\n  stickyHeader,\n  stickyHeaderProps,\n  style,\n  ref,\n  ...props\n}: ScreenProps) {\n  const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};\n\n  styles.useVariants({\n    backgroundColor,\n    flex: '1',\n    flexDirection: 'column',\n    columnGap: gap,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const scrollStyles = useMemo(\n    () => [styles.foundation as ViewProps['style'], style],\n    [styles.foundation, style],\n  );\n\n  return (\n    <VStack backgroundColor=\"primary\" style={screenStyles.wrapper}>\n      <ScrollView\n        ref={ref}\n        style={scrollStyles}\n        stickyHeaderIndices={stickyHeader ? [0] : undefined}\n        {...props}\n      >\n        {stickyHeader && (\n          <HStack\n            spacingHorizontal=\"6\"\n            spacingBottom=\"4\"\n            backgroundColor=\"primary\"\n            justifyContent=\"flex-end\"\n            style={stickyHeaderStyle}\n            {...stickyHeaderPropsWithoutStyle}\n          >\n            {stickyHeader}\n          </HStack>\n        )}\n        <VStack flex=\"1\" spacingHorizontal={spacingHorizontal} spacingTop={spacingTop} gap={gap}>\n          {children}\n        </VStack>\n      </ScrollView>\n    </VStack>\n  );\n});\n\nScreen.displayName = 'Screen';\n\nconst screenStyles = StyleSheet.create((_theme, rt) => ({\n  wrapper: {\n    flex: 1, // apply insets to the container,\n    // so it will add required paddings\n    paddingTop: rt.insets.top,\n    paddingBottom: rt.insets.bottom,\n    paddingLeft: rt.insets.left,\n    paddingRight: rt.insets.right,\n  },\n}));\n\nexport { Screen, type ScreenProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAM,SAAS,KAAK,SAASA,SAAO,EAClC,UAEA,kBAAkB,WAElB,oBAAoB,KACpB,aAAa,KACb,KAEA,cACA,mBACA,OACA,KACA,GAAG,SACW;CACd,MAAM,EAAE,OAAO,mBAAmB,GAAG,kCAAkC,qBAAqB,EAAE;AAE9F,QAAO,YAAY;EACjB;EACA,MAAM;EACN,eAAe;EACf,WAAW;EACZ,CAAC;CAGF,MAAM,eAAe,cACb,CAAC,OAAO,YAAkC,MAAM,EACtD,CAAC,OAAO,YAAY,MAAM,CAC3B;AAED,QACE,oBAAC;EAAO,iBAAgB;EAAU,OAAO,aAAa;YACpD,qBAAC;GACM;GACL,OAAO;GACP,qBAAqB,eAAe,CAAC,EAAE,GAAG;GAC1C,GAAI;cAEH,gBACC,oBAAC;IACC,mBAAkB;IAClB,eAAc;IACd,iBAAgB;IAChB,gBAAe;IACf,OAAO;IACP,GAAI;cAEH;KACM,EAEX,oBAAC;IAAO,MAAK;IAAuB;IAA+B;IAAiB;IACjF;KACM;IACE;GACN;EAEX;AAEF,OAAO,cAAc;AAErB,MAAM,eAAe,WAAW,QAAQ,QAAQ,QAAQ,EACtD,SAAS;CACP,MAAM;CAEN,YAAY,GAAG,OAAO;CACtB,eAAe,GAAG,OAAO;CACzB,aAAa,GAAG,OAAO;CACvB,cAAc,GAAG,OAAO;CACzB,EACF,EAAE"}
+{"version":3,"file":"Screen.mjs","names":[],"sources":["../../src/components/Screen.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ScrollViewProps, ViewProps } from 'react-native';\nimport { ScrollView } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport type { HStackProps } from './HStack';\nimport { HStack } from './HStack';\nimport { VStack } from './VStack';\n\ninterface ScreenProps extends ScrollViewProps {\n  /** Ref to the underlying ScrollView */\n  ref?: Ref<ScrollView>;\n  /** Background color of the screen */\n  backgroundColor?: StyleProps['backgroundColor'];\n  /** Horizontal padding for screen content */\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  /** Top padding for screen content */\n  spacingTop?: StyleProps['spacingTop'];\n  /** Gap between child elements */\n  gap?: StyleProps['columnGap'];\n  /** Content that sticks to the top of the screen when scrolling */\n  stickyHeader?: ReactNode;\n  /** Props passed to the sticky header container */\n  stickyHeaderProps?: HStackProps;\n}\n\n/**\n * **📱 A screen container with safe area handling**\n *\n * @description\n * A scrollable screen component that handles safe area insets and provides\n * consistent padding and background styling. Uses Unistyles' built-in\n * safe area insets via the `rt` runtime object.\n *\n * @category Layout\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Screen } from '@yahoo/uds-mobile';\n *\n * <Screen backgroundColor=\"primary\" spacingHorizontal=\"6\">\n *   <Text>Screen content</Text>\n * </Screen>\n *\n * // With sticky header\n * <Screen\n *   stickyHeader={<Text>Header</Text>}\n *   stickyHeaderProps={{ backgroundColor: 'secondary' }}\n * >\n *   <Text>Content</Text>\n * </Screen>\n * ```\n *\n * @usage\n * - Use as the root component for screens\n * - Use stickyHeader for persistent header content\n * - Content is automatically scrollable\n * - Safe area insets are handled automatically\n *\n * @see {@link VStack} for non-scrollable vertical layouts\n * @see {@link Box} for custom containers\n */\nconst Screen = memo(function Screen({\n  children,\n  // Background\n  backgroundColor = 'primary',\n  // Spacing\n  spacingHorizontal = '6',\n  spacingTop = '6',\n  gap,\n  // Header\n  stickyHeader,\n  stickyHeaderProps,\n  style,\n  ref,\n  ...props\n}: ScreenProps) {\n  const { style: stickyHeaderStyle, ...stickyHeaderPropsWithoutStyle } = stickyHeaderProps ?? {};\n\n  styles.useVariants({\n    backgroundColor,\n    flex: '1',\n    flexDirection: 'column',\n    columnGap: gap,\n  });\n\n  // styles.foundation must be in deps - it returns a new reference when variants change\n  const scrollStyles = useMemo(\n    () => [styles.foundation as ViewProps['style'], style],\n    [styles.foundation, style],\n  );\n\n  return (\n    <VStack backgroundColor=\"primary\" style={screenStyles.wrapper}>\n      <ScrollView\n        ref={ref}\n        style={scrollStyles}\n        stickyHeaderIndices={stickyHeader ? [0] : undefined}\n        {...props}\n      >\n        {stickyHeader && (\n          <HStack\n            spacingHorizontal=\"6\"\n            spacingBottom=\"4\"\n            backgroundColor=\"primary\"\n            justifyContent=\"flex-end\"\n            style={stickyHeaderStyle}\n            {...stickyHeaderPropsWithoutStyle}\n          >\n            {stickyHeader}\n          </HStack>\n        )}\n        <VStack flex=\"1\" spacingHorizontal={spacingHorizontal} spacingTop={spacingTop} gap={gap}>\n          {children}\n        </VStack>\n      </ScrollView>\n    </VStack>\n  );\n});\n\nScreen.displayName = 'Screen';\n\nconst screenStyles = StyleSheet.create((_theme, rt) => ({\n  wrapper: {\n    flex: 1, // apply insets to the container,\n    // so it will add required paddings\n    paddingTop: rt.insets.top,\n    paddingBottom: rt.insets.bottom,\n    paddingLeft: rt.insets.left,\n    paddingRight: rt.insets.right,\n  },\n}));\n\nexport { Screen, type ScreenProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,UAEA,kBAAkB,WAElB,oBAAoB,KACpB,aAAa,KACb,KAEA,cACA,mBACA,OACA,KACA,GAAG,SACW;CACd,MAAM,EAAE,OAAO,mBAAmB,GAAG,kCAAkC,qBAAqB,EAAE;AAE9F,QAAO,YAAY;EACjB;EACA,MAAM;EACN,eAAe;EACf,WAAW;EACZ,CAAC;CAGF,MAAM,eAAe,cACb,CAAC,OAAO,YAAkC,MAAM,EACtD,CAAC,OAAO,YAAY,MAAM,CAC3B;AAED,QACE,oBAAC;EAAO,iBAAgB;EAAU,OAAO,aAAa;YACpD,qBAAC;GACM;GACL,OAAO;GACP,qBAAqB,eAAe,CAAC,EAAE,GAAG;GAC1C,GAAI;cAEH,gBACC,oBAAC;IACC,mBAAkB;IAClB,eAAc;IACd,iBAAgB;IAChB,gBAAe;IACf,OAAO;IACP,GAAI;cAEH;KACM,EAEX,oBAAC;IAAO,MAAK;IAAuB;IAA+B;IAAiB;IACjF;KACM;IACE;GACN;EAEX;AAEF,OAAO,cAAc;AAErB,MAAM,eAAe,WAAW,QAAQ,QAAQ,QAAQ,EACtD,SAAS;CACP,MAAM;CAEN,YAAY,GAAG,OAAO;CACtB,eAAe,GAAG,OAAO;CACzB,aAAa,GAAG,OAAO;CACvB,cAAc,GAAG,OAAO;CACzB,EACF,EAAE"}

package/dist/components/Switch.cjs

@@ -1,5 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
 const require_components_IconSlot = require('./IconSlot.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
@@ -9,7 +10,7 @@ let generated_styles = require("../../generated/styles");
 let react_jsx_runtime = require("react/jsx-runtime");
 let react_native_unistyles = require("react-native-unistyles");
 let react_native_reanimated = require("react-native-reanimated");
-react_native_reanimated = require_rolldown_runtime.__toESM(react_native_reanimated);
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
 
 //#region src/components/Switch.tsx
@@ -25,6 +26,9 @@ const ANIMATION_DURATION = 120;
 * A switch (also called a toggle) is a binary on/off input control.
 * It allows users to pick between two clearly opposite choices.
 *
+* @category Form
+* @platform mobile
+*
 * @example
 * ```tsx
 * import { Switch } from '@yahoo/uds-mobile';
@@ -34,9 +38,21 @@ const ANIMATION_DURATION = 120;
 * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
 * ```
 *
-* @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+* @usage
+* - Settings: For toggling preferences on/off
+* - Feature flags: For enabling/disabling features
+* - Immediate effect toggles (no submit button needed)
+*
+* @accessibility
+* - Sets `accessibilityRole="switch"` automatically
+* - Announces on/off state to screen readers
+* - Respects system reduce motion preference
+* - Supports `reduceMotion` prop to disable animations
+*
+* @see {@link Checkbox} for forms with submit actions
+* @see {@link Radio} for single-select options
 */
-const Switch = (0, react.memo)(function Switch$1({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref }) {
+const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref }) {
 	const isControlled = isOnProp !== void 0;
 	const [internalIsOn, setInternalIsOn] = (0, react.useState)(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);

package/dist/components/Switch.d.cts

@@ -1,7 +1,7 @@
 
 import { UniversalSwitchProps } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react17 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { AccessibilityProps, View } from "react-native";
 
@@ -25,6 +25,9 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  * A switch (also called a toggle) is a binary on/off input control.
  * It allows users to pick between two clearly opposite choices.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Switch } from '@yahoo/uds-mobile';
@@ -34,9 +37,21 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
  * ```
  *
- * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ * @usage
+ * - Settings: For toggling preferences on/off
+ * - Feature flags: For enabling/disabling features
+ * - Immediate effect toggles (no submit button needed)
+ *
+ * @accessibility
+ * - Sets `accessibilityRole="switch"` automatically
+ * - Announces on/off state to screen readers
+ * - Respects system reduce motion preference
+ * - Supports `reduceMotion` prop to disable animations
+ *
+ * @see {@link Checkbox} for forms with submit actions
+ * @see {@link Radio} for single-select options
  */
-declare const Switch: react17.NamedExoticComponent<SwitchProps>;
+declare const Switch: react.NamedExoticComponent<SwitchProps>;
 //#endregion
 export { Switch, type SwitchProps };
 //# sourceMappingURL=Switch.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,qBAAqB;;QAE3C,IAAI;EAFF;EAAyC,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAEvC;EAAJ,QAAA,CAAA,EAAA,OAAA;EAQc;EAVQ,QAAA,CAAA,EAAA,OAAA;EAAoB;EAsC5C,iBA8IJ,CAAA,EA1KoB,kBA4BV,CAAA,mBAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAN,QAAM,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,oBAAA,CAAqB,YAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAJU;EAMV,QAAA;EAEoB;EAApB,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Switch.d.mts

@@ -1,7 +1,7 @@
 
 import { UniversalSwitchProps } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react3 from "react";
+import * as react from "react";
 import { Ref } from "react";
 import { AccessibilityProps, View } from "react-native";
 
@@ -25,6 +25,9 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  * A switch (also called a toggle) is a binary on/off input control.
  * It allows users to pick between two clearly opposite choices.
  *
+ * @category Form
+ * @platform mobile
+ *
  * @example
  * ```tsx
  * import { Switch } from '@yahoo/uds-mobile';
@@ -34,9 +37,21 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  * <Switch onIcon="Check" offIcon="Cross" label="Sync" />
  * ```
  *
- * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
+ * @usage
+ * - Settings: For toggling preferences on/off
+ * - Feature flags: For enabling/disabling features
+ * - Immediate effect toggles (no submit button needed)
+ *
+ * @accessibility
+ * - Sets `accessibilityRole="switch"` automatically
+ * - Announces on/off state to screen readers
+ * - Respects system reduce motion preference
+ * - Supports `reduceMotion` prop to disable animations
+ *
+ * @see {@link Checkbox} for forms with submit actions
+ * @see {@link Radio} for single-select options
  */
-declare const Switch: react3.NamedExoticComponent<SwitchProps>;
+declare const Switch: react.NamedExoticComponent<SwitchProps>;
 //#endregion
 export { Switch, type SwitchProps };
 //# sourceMappingURL=Switch.d.mts.map

package/dist/components/Switch.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.mts","names":[],"sources":["../../src/components/Switch.tsx"],"sourcesContent":[],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,qBAAqB;;QAE3C,IAAI;EAFF;EAAyC,QAAA,CAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAEvC;EAAJ,QAAA,CAAA,EAAA,OAAA;EAQc;EAVQ,QAAA,CAAA,EAAA,OAAA;EAAoB;EAsC5C,iBA8IJ,CAAA,EA1KoB,kBA4BV,CAAA,mBAAA,CAAA;;;;;;;;;;;;;;;;;;;;cAAN,QAAM,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Switch.d.mts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAeU,WAAA,SAAoB,oBAAA,CAAqB,YAAA;;EAEjD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAJU;EAMV,QAAA;EAEoB;EAApB,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,KAAA,CAAA,oBAAA,CAAA,WAAA"}