@yahoo/uds-mobile 2.23.2 → 2.24.0-beta.1

package/dist/components/Radio/Radio.cjs

@@ -3,6 +3,8 @@ 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_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
+const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
 const require_components_Pressable = require("../Pressable.cjs");
 const require_components_FormLabel = require("../FormLabel.cjs");
 const require_components_Radio_RadioGroupContext = require("./RadioGroupContext.cjs");
@@ -49,9 +51,11 @@ 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: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, 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, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${(0, react.useId)()}`;
 	const radioGroup = require_components_Radio_RadioGroupContext.useRadioGroupContext();
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier);
 	const disabled = Boolean(disabledProp || radioGroup?.disabled);
 	const hasError = hasErrorProp ?? radioGroup?.hasError;
 	const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
@@ -107,21 +111,33 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
 		pressed
 	});
 	const rootStyle = (0, react.useMemo)(() => [generated_styles.radioStyles.root, { opacity: disabled ? .5 : 1 }], [generated_styles.radioStyles.root, disabled]);
-	const radioBoxStyle = (0, react.useMemo)(() => [
+	const radioBoxStyle = (0, react.useMemo)(() => {
+		const { width, height } = generated_styles.radioStyles.radio;
+		const scaledBox = fontScaleFactor !== 1 && typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor)
+		} : void 0;
+		return [
+			generated_styles.radioStyles.radio,
+			scaledBox,
+			{
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: 9999
+			},
+			radioAnimatedStyle
+		];
+	}, [
 		generated_styles.radioStyles.radio,
-		{
-			alignItems: "center",
-			justifyContent: "center",
-			borderRadius: 9999
-		},
+		fontScaleFactor,
 		radioAnimatedStyle
-	], [generated_styles.radioStyles.radio, radioAnimatedStyle]);
+	]);
 	const INNER_CIRCLE_SIZE = 8;
 	const circleStyle = (0, react.useMemo)(() => [generated_styles.radioStyles.radioCircle, {
-		width: INNER_CIRCLE_SIZE,
-		height: INNER_CIRCLE_SIZE,
+		width: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),
+		height: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),
 		borderRadius: 9999
-	}], [generated_styles.radioStyles.radioCircle]);
+	}], [generated_styles.radioStyles.radioCircle, fontScaleFactor]);
 	const labelContent = (0, react.useMemo)(() => {
 		if (!label) return null;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_FormLabel.FormLabel, {
@@ -131,12 +147,14 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
 			required,
 			showRequiredAsterisk: required,
 			hasError,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.radioStyles.text
 		});
 	}, [
 		label,
 		required,
 		hasError,
+		resolvedMaxFontSizeMultiplier,
 		generated_styles.radioStyles.text
 	]);
 	const a11yState = (0, react.useMemo)(() => ({

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

@@ -14,6 +14,13 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
   disabled?: boolean;
   /** Whether the radio is required */
   required?: boolean;
+  /**
+   * Caps how far the circle, dot, and label grow with the OS text-size
+   * setting; all three scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Callback fired when the checked state changes */
   onChange?: (checked: boolean) => void;
 }

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

@@ -1 +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"}
+{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;;;UAsBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;;;;;;EAerD,qBAAA;EAbM;EAeN,QAAA,IAAY,OAAA;AAAA;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

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

@@ -14,6 +14,13 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
   disabled?: boolean;
   /** Whether the radio is required */
   required?: boolean;
+  /**
+   * Caps how far the circle, dot, and label grow with the OS text-size
+   * setting; all three scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Callback fired when the checked state changes */
   onChange?: (checked: boolean) => void;
 }

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

@@ -1 +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"}
+{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;;;UAsBU,UAAA,SAAmB,IAAA,CAAK,SAAA,YAAqB,mBAAA;;EAErD,GAAA,GAAM,GAAA,CAAI,IAAA;EAFS;EAInB,cAAA;EAJgC;EAMhC,QAAA;EAJM;EAMN,QAAA;EARqD;;;;;;EAerD,qBAAA;EAbM;EAeN,QAAA,IAAY,OAAA;AAAA;;;;;;;;AAAgB;;;;;;;;;;;;;;;;;;;;;;;;;cAmDxB,KAAA,EAAK,OAAA,CAAA,oBAAA,CAAA,UAAA"}

package/dist/components/Radio/Radio.js

@@ -1,6 +1,8 @@
 /*! © 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 { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
+import { useFontScale } from "../../fontScaling/useFontScale.js";
 import { Pressable as Pressable$1 } from "../Pressable.js";
 import { FormLabel } from "../FormLabel.js";
 import { useRadioGroupContext } from "./RadioGroupContext.js";
@@ -46,9 +48,11 @@ 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: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, 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, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
 	const uid = `uds-radio-${useId()}`;
 	const radioGroup = useRadioGroupContext();
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);
 	const disabled = Boolean(disabledProp || radioGroup?.disabled);
 	const hasError = hasErrorProp ?? radioGroup?.hasError;
 	const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
@@ -104,21 +108,33 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
 		pressed
 	});
 	const rootStyle = useMemo(() => [radioStyles.root, { opacity: disabled ? .5 : 1 }], [radioStyles.root, disabled]);
-	const radioBoxStyle = useMemo(() => [
+	const radioBoxStyle = useMemo(() => {
+		const { width, height } = radioStyles.radio;
+		const scaledBox = fontScaleFactor !== 1 && typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor)
+		} : void 0;
+		return [
+			radioStyles.radio,
+			scaledBox,
+			{
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: 9999
+			},
+			radioAnimatedStyle
+		];
+	}, [
 		radioStyles.radio,
-		{
-			alignItems: "center",
-			justifyContent: "center",
-			borderRadius: 9999
-		},
+		fontScaleFactor,
 		radioAnimatedStyle
-	], [radioStyles.radio, radioAnimatedStyle]);
+	]);
 	const INNER_CIRCLE_SIZE = 8;
 	const circleStyle = useMemo(() => [radioStyles.radioCircle, {
-		width: INNER_CIRCLE_SIZE,
-		height: INNER_CIRCLE_SIZE,
+		width: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),
+		height: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),
 		borderRadius: 9999
-	}], [radioStyles.radioCircle]);
+	}], [radioStyles.radioCircle, fontScaleFactor]);
 	const labelContent = useMemo(() => {
 		if (!label) return null;
 		return /* @__PURE__ */ jsx(FormLabel, {
@@ -128,12 +144,14 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
 			required,
 			showRequiredAsterisk: required,
 			hasError,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: radioStyles.text
 		});
 	}, [
 		label,
 		required,
 		hasError,
+		resolvedMaxFontSizeMultiplier,
 		radioStyles.text
 	]);
 	const a11yState = useMemo(() => ({

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

@@ -1 +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":";;;;;;;;;;;;AAwCA,MAAM,oBAA6D;CACjE,SAAS;CACT,WAAW;CACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCD,MAAM,QAAQ,KAAK,SAAS,MAAM,EAEhC,OACA,gBAAgB,SAChB,SAAS,cACT,MAAM,WACN,OAAO,WACP,SAAS,aACT,UAAU,cACV,cAAc,kBAEd,gBACA,UAAU,cACV,UACA,UACA,KACA,GAAG,aACU;CAEb,MAAM,MAAM,aADQ,OACgB;CACpC,MAAM,aAAa,sBAAsB;CAEzC,MAAM,WAAW,QAAQ,gBAAgB,YAAY,SAAS;CAC9D,MAAM,WAAW,gBAAgB,YAAY;CAC7C,MAAM,eAAe,oBAAoB,YAAY;CACrD,MAAM,OAAO,aAAa,YAAY,QAAQ;CAC9C,MAAM,cAAc,gBAAgB,YAAY,WAAW;CAC3D,MAAM,QAAQ,aAAa;CAG3B,MAAM,iBAAiB,eAAe,KAAA;CACtC,MAAM,eAAe,gBAAgB,KAAA;CACrC,MAAM,CAAC,iBAAiB,sBAAsB,SAC5C,eAAe,cAAe,kBAAkB,MACjD;CACD,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAG7C,MAAM,UAAU,iBACZ,WAAW,UAAU,QACrB,eACE,cACA;CAEN,gBAAgB;EACd,IAAI,CAAC,WAAW,CAAC,kBAAkB,WACjC;EAGF,QAAQ,KACN,kGACD;IACA,CAAC,gBAAgB,UAAU,CAAC;CAG/B,MAAM,aAA8B,cAAc;EAChD,OAAO,UAAU,YAAY;IAC5B,CAAC,QAAQ,CAAC;CAGb,MAAM,gBAAgB,CAAC;CAGvB,MAAM,gBAAgB,sBAElB,gBACI,WAAW,UAAU,cAAc,OAAO,cAAc,MAAM,qBAAqB,GACnF,cAAc,MACpB,CAAC,SAAS,cAAc,CACzB;CAED,MAAM,qBAAqB,wBAAwB,EACjD,WAAW,CAAC,EAAE,OAAO,cAAc,OAAO,CAAC,EAC5C,EAAE;CAGH,MAAM,cAAc,kBAAkB;EACpC,IAAI,UACF;EAGF,IAAI,gBAAgB;GAClB,IAAI,WAAW,UAAU,OACvB;GAGF,WAAW,SAAS,MAAM;GAC1B,WAAW,KAAK;GAChB;;EAGF,MAAM,aAAa,CAAC;EAEpB,IAAI,CAAC,cACH,mBAAmB,WAAW;EAGhC,WAAW,WAAW;IACrB;EAAC;EAAU;EAAgB;EAAS;EAAc;EAAU;EAAY;EAAM,CAAC;CAElF,MAAM,gBAAgB,kBAAkB;EACtC,WAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;EACvC,WAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,eAAkC,WAAW,kBAAkB,eAAe;CAEpF,YAAY,YAAY;EACtB;EACA,SAAS;EACT,OAAO;EACP;EACD,CAAC;CAEF,MAAM,YAAY,cACV,CAAC,YAAY,MAAM,EAAE,SAAS,WAAW,KAAM,GAAG,CAAC,EACzD,CAAC,YAAY,MAAM,SAAS,CAC7B;CAED,MAAM,gBAAgB,cACd;EACJ,YAAY;EACZ;GACE,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACf;EACD;EACD,EACD,CAAC,YAAY,OAAO,mBAAmB,CACxC;CAGD,MAAM,oBAAoB;CAE1B,MAAM,cAAc,cACZ,CACJ,YAAY,aACZ;EACE,OAAO;EACP,QAAQ;EACR,cAAc;EACf,CACF,EACD,CAAC,YAAY,YAAY,CAC1B;CAGD,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,OACH,OAAO;EAGT,OACE,oBAAC,WAAD;GACE,OAAM;GACN,SAAQ;GACD;GACG;GACV,sBAAsB;GACZ;GACV,OAAO,YAAY;GACnB,CAAA;IAEH;EAAC;EAAO;EAAU;EAAU,YAAY;EAAK,CAAC;CAEjD,MAAM,YAAY,eACT;EACL;EACA;EACD,GACD,CAAC,UAAU,QAAQ,CACpB;CAGD,OACE,qBAACA,aAAD;EACO;EACL,UAAU;EACV,SAAS;EACT,WAAW;EACX,YAAY;EACF;EACV,eAAe,kBAAkB,UAAU,QAAQ;EACnD,YAAW;EACX,WAAU;EACV,mBAAkB;EAClB,oBAAoB;EACpB,oBAAoB,OAAO,UAAU,WAAW,QAAQ,KAAA;EACxD,GAAI;EACJ,OAAO;YAdT,CAgBE,oBAAC,SAAS,MAAV;GAAe,OAAO;aAAgB,WAAW,oBAAC,MAAD,EAAM,OAAO,aAAe,CAAA;GAAiB,CAAA,EAE7F,aACS;;EAEd;AAEF,MAAM,cAAc"}
+{"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 { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\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  /**\n   * Caps how far the circle, dot, and label grow with the OS text-size\n   * setting; all three scale by the same factor. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\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  maxFontSizeMultiplier,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n  const radioGroup = useRadioGroupContext();\n\n  // One capped factor governs circle, dot, and label so they stay cohesive.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);\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    // The circle grows by the capped factor alongside its label; borderWidth\n    // stays fixed (stroke weight doesn't scale in the OS's own controls).\n    const { width, height } = radioStyles.radio;\n    const scaledBox =\n      fontScaleFactor !== 1 && typeof width === 'number' && typeof height === 'number'\n        ? {\n            width: Math.round(width * fontScaleFactor),\n            height: Math.round(height * fontScaleFactor),\n          }\n        : undefined;\n\n    return [\n      radioStyles.radio,\n      scaledBox,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ];\n  }, [radioStyles.radio, fontScaleFactor, radioAnimatedStyle]);\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: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n        height: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n        borderRadius: 9999,\n      },\n    ],\n    [radioStyles.radioCircle, fontScaleFactor],\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        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={radioStyles.text}\n      />\n    );\n  }, [label, required, hasError, resolvedMaxFontSizeMultiplier, 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/Switch.cjs

@@ -1,13 +1,16 @@
 /*! © 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_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
+const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
 const require_components_FormLabel = require("./FormLabel.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 react_native_unistyles = require("react-native-unistyles");
+let _yahoo_uds_icons_tokens = require("@yahoo/uds-icons/tokens");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_unistyles_reanimated = require("react-native-unistyles/reanimated");
@@ -50,13 +53,16 @@ const ANIMATION_DURATION = 120;
 * @see {@link Checkbox} for forms with submit actions
 * @see {@link Radio} for single-select options
 */
-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, ...viewProps }) {
+const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, maxFontSizeMultiplier, accessibilityHint, reduceMotion = false, ref, ...viewProps }) {
 	const isControlled = isOnProp !== void 0;
 	const [internalIsOn, setInternalIsOn] = (0, react.useState)(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = (0, react.useState)(false);
 	const isOn = isControlled ? isOnProp : internalIsOn;
 	const activeVariant = isOn ? "on" : "off";
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier);
+	const scaledHandleIconSize = Math.round(_yahoo_uds_icons_tokens.ICON_SIZE_MAP.sm * fontScaleFactor);
 	(0, react.useEffect)(() => {
 		const checkReducedMotion = async () => {
 			setPrefersReducedMotion(await react_native.AccessibilityInfo.isReduceMotionEnabled());
@@ -67,7 +73,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 	}, []);
 	const animationDuration = reduceMotion || prefersReducedMotion ? 0 : ANIMATION_DURATION;
 	const progress = (0, react_native_reanimated.useDerivedValue)(() => (0, react_native_reanimated.withTiming)(isOn ? 1 : 0, { duration: animationDuration }), [isOn, animationDuration]);
-	const travelDistance = HANDLE_TRAVEL[size] * (react_native.I18nManager.isRTL ? -1 : 1);
+	const travelDistance = Math.round(HANDLE_TRAVEL[size] * fontScaleFactor) * (react_native.I18nManager.isRTL ? -1 : 1);
 	const handlePress = (0, react.useCallback)(() => {
 		if (disabled) return;
 		const newValue = !isOn;
@@ -103,24 +109,36 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		return { transform: [{ translateX: progress.value * travelDistance }] };
 	});
 	const rootStyle = (0, react.useMemo)(() => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })], [resolvedSwitchStyles.root, disabled]);
+	const scaleDimensions = (0, react.useCallback)((style) => {
+		if (!style || fontScaleFactor === 1) return;
+		const { width, height } = style;
+		return typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor)
+		} : void 0;
+	}, [fontScaleFactor]);
 	const trackStyle = (0, react.useMemo)(() => [
 		resolvedSwitchStyles.switch,
 		switchStaticStyles.track,
 		variantLayerStyles.switch,
+		scaleDimensions(resolvedSwitchStyles.switch),
 		react_native.Platform.OS !== "web" && animatedTrackStyle
 	], [
 		resolvedSwitchStyles.switch,
 		variantLayerStyles.switch,
+		scaleDimensions,
 		animatedTrackStyle
 	]);
 	const handleStyle = (0, react.useMemo)(() => [
 		resolvedSwitchStyles.handle,
 		switchStaticStyles.handle,
 		variantLayerStyles.handle,
+		scaleDimensions(resolvedSwitchStyles.handle),
 		animatedHandleStyle
 	], [
 		resolvedSwitchStyles.handle,
 		variantLayerStyles.handle,
+		scaleDimensions,
 		animatedHandleStyle
 	]);
 	const accessibilityLabel = typeof label === "string" ? label : void 0;
@@ -131,6 +149,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		label,
 		required,
 		showRequiredAsterisk: required,
+		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 		style: [resolvedSwitchStyles.text, variantLayerStyles.text]
 	});
 	const a11yValue = (0, react.useMemo)(() => ({ text: isOn ? "On" : "Off" }), [isOn]);
@@ -161,6 +180,8 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 							icon: onIcon,
 							variant: "fill",
+							dangerouslySetSize: scaledHandleIconSize,
+							allowFontScaling: false,
 							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					}), offIcon && !isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
@@ -168,6 +189,8 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
 							icon: offIcon,
 							variant: "fill",
+							dangerouslySetSize: scaledHandleIconSize,
+							allowFontScaling: false,
 							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					})]

package/dist/components/Switch.d.cts

@@ -15,6 +15,13 @@ interface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<Ico
   disabled?: boolean;
   /** Whether the switch is required (shows asterisk with label) */
   required?: boolean;
+  /**
+   * Caps how far the track, handle, and label grow with the OS text-size
+   * setting; all scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Accessibility hint describing what happens when activated */
   accessibilityHint?: AccessibilityProps['accessibilityHint'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAsBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Switch.d.ts

@@ -15,6 +15,13 @@ interface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<Ico
   disabled?: boolean;
   /** Whether the switch is required (shows asterisk with label) */
   required?: boolean;
+  /**
+   * Caps how far the track, handle, and label grow with the OS text-size
+   * setting; all scale by the same factor. Set null to remove the cap;
+   * override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Accessibility hint describing what happens when activated */
   accessibilityHint?: AccessibilityProps['accessibilityHint'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAsBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;EAQN,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cA2ClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Switch.js

@@ -1,11 +1,14 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
 import { IconSlot } from "./IconSlot.js";
+import { useFontScale } from "../fontScaling/useFontScale.js";
 import { FormLabel } from "./FormLabel.js";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { AccessibilityInfo, I18nManager, Platform, Pressable } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { switchStyles } from "../../generated/styles";
 import { StyleSheet as StyleSheet$1, useUnistyles } from "react-native-unistyles";
+import { ICON_SIZE_MAP } from "@yahoo/uds-icons/tokens";
 import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
 import { useAnimatedVariantColor } from "react-native-unistyles/reanimated";
 //#region src/components/Switch.tsx
@@ -47,13 +50,16 @@ const ANIMATION_DURATION = 120;
 * @see {@link Checkbox} for forms with submit actions
 * @see {@link Radio} for single-select options
 */
-const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, accessibilityHint, reduceMotion = false, ref, ...viewProps }) {
+const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onChange, label, labelPosition = "start", size = "md", onIcon, offIcon, disabled = false, required, maxFontSizeMultiplier, accessibilityHint, reduceMotion = false, ref, ...viewProps }) {
 	const isControlled = isOnProp !== void 0;
 	const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
 	const isOn = isControlled ? isOnProp : internalIsOn;
 	const activeVariant = isOn ? "on" : "off";
 	const { theme } = useUnistyles();
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);
+	const scaledHandleIconSize = Math.round(ICON_SIZE_MAP.sm * fontScaleFactor);
 	useEffect(() => {
 		const checkReducedMotion = async () => {
 			setPrefersReducedMotion(await AccessibilityInfo.isReduceMotionEnabled());
@@ -64,7 +70,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 	}, []);
 	const animationDuration = reduceMotion || prefersReducedMotion ? 0 : ANIMATION_DURATION;
 	const progress = useDerivedValue(() => withTiming(isOn ? 1 : 0, { duration: animationDuration }), [isOn, animationDuration]);
-	const travelDistance = HANDLE_TRAVEL[size] * (I18nManager.isRTL ? -1 : 1);
+	const travelDistance = Math.round(HANDLE_TRAVEL[size] * fontScaleFactor) * (I18nManager.isRTL ? -1 : 1);
 	const handlePress = useCallback(() => {
 		if (disabled) return;
 		const newValue = !isOn;
@@ -100,24 +106,36 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		return { transform: [{ translateX: progress.value * travelDistance }] };
 	});
 	const rootStyle = useMemo(() => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })], [resolvedSwitchStyles.root, disabled]);
+	const scaleDimensions = useCallback((style) => {
+		if (!style || fontScaleFactor === 1) return;
+		const { width, height } = style;
+		return typeof width === "number" && typeof height === "number" ? {
+			width: Math.round(width * fontScaleFactor),
+			height: Math.round(height * fontScaleFactor)
+		} : void 0;
+	}, [fontScaleFactor]);
 	const trackStyle = useMemo(() => [
 		resolvedSwitchStyles.switch,
 		switchStaticStyles.track,
 		variantLayerStyles.switch,
+		scaleDimensions(resolvedSwitchStyles.switch),
 		Platform.OS !== "web" && animatedTrackStyle
 	], [
 		resolvedSwitchStyles.switch,
 		variantLayerStyles.switch,
+		scaleDimensions,
 		animatedTrackStyle
 	]);
 	const handleStyle = useMemo(() => [
 		resolvedSwitchStyles.handle,
 		switchStaticStyles.handle,
 		variantLayerStyles.handle,
+		scaleDimensions(resolvedSwitchStyles.handle),
 		animatedHandleStyle
 	], [
 		resolvedSwitchStyles.handle,
 		variantLayerStyles.handle,
+		scaleDimensions,
 		animatedHandleStyle
 	]);
 	const accessibilityLabel = typeof label === "string" ? label : void 0;
@@ -128,6 +146,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		label,
 		required,
 		showRequiredAsterisk: required,
+		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 		style: [resolvedSwitchStyles.text, variantLayerStyles.text]
 	});
 	const a11yValue = useMemo(() => ({ text: isOn ? "On" : "Off" }), [isOn]);
@@ -158,6 +177,8 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 						children: /* @__PURE__ */ jsx(IconSlot, {
 							icon: onIcon,
 							variant: "fill",
+							dangerouslySetSize: scaledHandleIconSize,
+							allowFontScaling: false,
 							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					}), offIcon && !isOn && /* @__PURE__ */ jsx(Animated.View, {
@@ -165,6 +186,8 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 						children: /* @__PURE__ */ jsx(IconSlot, {
 							icon: offIcon,
 							variant: "fill",
+							dangerouslySetSize: scaledHandleIconSize,
+							allowFontScaling: false,
 							style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
 						})
 					})]

package/dist/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type {\n  AccessibilityProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native';\nimport { AccessibilityInfo, I18nManager, Platform, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- switch variant layers need concrete web styles\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile/Switch';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n  ...viewProps\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n  const activeVariant = isOn ? 'on' : 'off';\n  const { theme } = useUnistyles();\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  // RTL mirrors the track layout but not transforms, so travel flips sign\n  const travelDistance = HANDLE_TRAVEL[size] * (I18nManager.isRTL ? -1 : 1);\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  // On web, useVariants returns the resolved style object instead of mutating\n  // switchStyles in place.\n  const variantSwitchStyles = switchStyles.useVariants({\n    size,\n    variant: activeVariant,\n  }) as unknown as typeof switchStyles | undefined;\n  const resolvedSwitchStyles = variantSwitchStyles ?? switchStyles;\n\n  const variantLayerStyles = useMemo(() => {\n    const components = theme.components as unknown as Record<string, Record<string, unknown>>;\n    const getLayerStyle = <TStyle,>(layer: string) =>\n      components[`switch/variant/default/active/${activeVariant}/${layer}/rest`] as\n        | TStyle\n        | undefined;\n\n    return {\n      handle: getLayerStyle<ViewStyle>('handle'),\n      handleIcon: getLayerStyle<TextStyle>('handleIcon'),\n      switch: getLayerStyle<ViewStyle>('switch'),\n      text: getLayerStyle<TextStyle>('rootText'),\n    };\n  }, [activeVariant, theme]);\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(\n    resolvedSwitchStyles.switch,\n    'backgroundColor',\n  );\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })],\n    [resolvedSwitchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.switch,\n      switchStaticStyles.track,\n      variantLayerStyles.switch,\n      // On web, the animated variant color hook currently resolves to Unistyles'\n      // black fallback, so the concrete variant layer provides the track color.\n      Platform.OS !== 'web' && animatedTrackStyle,\n    ],\n    [resolvedSwitchStyles.switch, variantLayerStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.handle,\n      switchStaticStyles.handle,\n      variantLayerStyles.handle,\n      animatedHandleStyle,\n    ],\n    [resolvedSwitchStyles.handle, variantLayerStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const labelContent = label && (\n    <FormLabel\n      color=\"inherit\"\n      variant=\"inherit\"\n      label={label}\n      required={required}\n      showRequiredAsterisk={required}\n      style={[resolvedSwitchStyles.text, variantLayerStyles.text]}\n    />\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {labelPosition === 'start' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot\n                icon={onIcon}\n                variant=\"fill\"\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot\n                icon={offIcon}\n                variant=\"fill\"\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'end' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.js","names":["StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type {\n  AccessibilityProps,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native';\nimport { AccessibilityInfo, I18nManager, Platform, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- switch variant layers need concrete web styles\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { FormLabel } from './FormLabel';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\n\ninterface SwitchProps extends Omit<ViewProps, 'style'>, UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /**\n   * Caps how far the track, handle, and label grow with the OS text-size\n   * setting; all scale by the same factor. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile/Switch';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @usage\n * - Settings: For toggling preferences on/off\n * - Feature flags: For enabling/disabling features\n * - Immediate effect toggles (no submit button needed)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"switch\"` automatically\n * - Announces on/off state to screen readers\n * - Respects system reduce motion preference\n * - Supports `reduceMotion` prop to disable animations\n *\n * @see {@link Checkbox} for forms with submit actions\n * @see {@link Radio} for single-select options\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  maxFontSizeMultiplier,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n  ...viewProps\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n  const activeVariant = isOn ? 'on' : 'off';\n  const { theme } = useUnistyles();\n\n  // One capped factor governs track, handle, travel, and label.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);\n  // Size the handle glyph from the same factor as the handle it sits in, rather\n  // than letting native font scaling size it on a separate path.\n  const scaledHandleIconSize = Math.round(ICON_SIZE_MAP.sm * fontScaleFactor);\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  // RTL mirrors the track layout but not transforms, so travel flips sign.\n  // Travel scales with the track/handle so the handle still lands flush.\n  const travelDistance =\n    Math.round(HANDLE_TRAVEL[size] * fontScaleFactor) * (I18nManager.isRTL ? -1 : 1);\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  // On web, useVariants returns the resolved style object instead of mutating\n  // switchStyles in place.\n  const variantSwitchStyles = switchStyles.useVariants({\n    size,\n    variant: activeVariant,\n  }) as unknown as typeof switchStyles | undefined;\n  const resolvedSwitchStyles = variantSwitchStyles ?? switchStyles;\n\n  const variantLayerStyles = useMemo(() => {\n    const components = theme.components as unknown as Record<string, Record<string, unknown>>;\n    const getLayerStyle = <TStyle,>(layer: string) =>\n      components[`switch/variant/default/active/${activeVariant}/${layer}/rest`] as\n        TStyle | undefined;\n\n    return {\n      handle: getLayerStyle<ViewStyle>('handle'),\n      handleIcon: getLayerStyle<TextStyle>('handleIcon'),\n      switch: getLayerStyle<ViewStyle>('switch'),\n      text: getLayerStyle<TextStyle>('rootText'),\n    };\n  }, [activeVariant, theme]);\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(\n    resolvedSwitchStyles.switch,\n    'backgroundColor',\n  );\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [resolvedSwitchStyles.root, switchStaticStyles.root({ disabled })],\n    [resolvedSwitchStyles.root, disabled],\n  );\n\n  // Track and handle grow by the capped factor so the handle (and its icon,\n  // which native scales by the same capped multiplier) stays contained.\n  const scaleDimensions = useCallback(\n    (style: ViewStyle | undefined): ViewStyle | undefined => {\n      if (!style || fontScaleFactor === 1) {\n        return undefined;\n      }\n      const { width, height } = style;\n      return typeof width === 'number' && typeof height === 'number'\n        ? {\n            width: Math.round(width * fontScaleFactor),\n            height: Math.round(height * fontScaleFactor),\n          }\n        : undefined;\n    },\n    [fontScaleFactor],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.switch,\n      switchStaticStyles.track,\n      variantLayerStyles.switch,\n      scaleDimensions(resolvedSwitchStyles.switch as ViewStyle),\n      // On web, the animated variant color hook currently resolves to Unistyles'\n      // black fallback, so the concrete variant layer provides the track color.\n      Platform.OS !== 'web' && animatedTrackStyle,\n    ],\n    [resolvedSwitchStyles.switch, variantLayerStyles.switch, scaleDimensions, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [\n      resolvedSwitchStyles.handle,\n      switchStaticStyles.handle,\n      variantLayerStyles.handle,\n      scaleDimensions(resolvedSwitchStyles.handle as ViewStyle),\n      animatedHandleStyle,\n    ],\n    [resolvedSwitchStyles.handle, variantLayerStyles.handle, scaleDimensions, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const labelContent = label && (\n    <FormLabel\n      color=\"inherit\"\n      variant=\"inherit\"\n      label={label}\n      required={required}\n      showRequiredAsterisk={required}\n      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      style={[resolvedSwitchStyles.text, variantLayerStyles.text]}\n    />\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {labelPosition === 'start' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot\n                icon={onIcon}\n                variant=\"fill\"\n                dangerouslySetSize={scaledHandleIconSize}\n                allowFontScaling={false}\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot\n                icon={offIcon}\n                variant=\"fill\"\n                dangerouslySetSize={scaledHandleIconSize}\n                allowFontScaling={false}\n                style={[resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]}\n              />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'end' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}