@yahoo/uds-mobile 2.24.0-beta.8 → 2.24.0

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 { 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 resolved cap governs circle, dot, and label. Android resolves the\n  // geometry from the circle's base size on its nonlinear curve.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\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 radioBaseSize = radioStyles.radio.width;\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof radioBaseSize === 'number' ? radioBaseSize : undefined,\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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"}
+{"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 { useComponentFontScale } 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 resolved cap governs circle, dot, and label. Android resolves the\n  // geometry from the circle's base size on its nonlinear curve.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\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 radioBaseSize = radioStyles.radio.width;\n  const fontScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof radioBaseSize === 'number' ? radioBaseSize : undefined,\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/Select/Select.cjs

@@ -149,6 +149,7 @@ const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon
 			alignItems: "flex-end",
 			spacingBottom: "2",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+				variant: "inherit",
 				maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 				style: generated_styles.inputStyles.label,
 				children: content

package/dist/components/Select/Select.js

@@ -147,6 +147,7 @@ const Select = memo(function Select({ label, helpText, helperTextIcon, placehold
 			alignItems: "flex-end",
 			spacingBottom: "2",
 			children: [/* @__PURE__ */ jsx(Text, {
+				variant: "inherit",
 				maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 				style: inputStyles.label,
 				children: content

package/dist/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** Selected value for controlled usage. */\n  value?: string;\n  /** Initial value for uncontrolled usage. @default '' */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Container width. @default '100%' */\n  width?: number | `${number}%` | '100%';\n  /** Caps text, icons, and field geometry at the control scale. Set null to remove the cap. @default 2 */\n  maxFontSizeMultiplier?: number | null;\n  children?: ReactNode;\n  testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"ca\">Canada</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n  label,\n  helpText,\n  helperTextIcon,\n  placeholder,\n  size = 'md',\n  disabled,\n  required,\n  hasError,\n  readOnly,\n  width = '100%',\n  maxFontSizeMultiplier,\n  reduceMotion = false,\n  startIcon,\n  endIcon,\n  value: valueProp,\n  defaultValue = '',\n  onChange,\n  children,\n  testID,\n}: SelectProps) {\n  const generatedId = useId();\n  const uid = `uds-select-${generatedId}`;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // Android's portal can briefly overlap the hidden registry item and its visible copy.\n  // Count registrations so one copy unmounting does not erase the selected value's label.\n  const itemsRef = useRef(new Map<string, { label: string; registrations: number }>());\n  const [, setItemsVersion] = useState(0);\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  });\n\n  const [open, setOpen] = useControllableState({\n    defaultValue: false,\n    onChange: (nextOpen) => {\n      if (!nextOpen) {\n        setHighlightedValue(null);\n      }\n    },\n  });\n\n  const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n    const existing = itemsRef.current.get(itemValue);\n    itemsRef.current.set(itemValue, {\n      label: itemLabel,\n      registrations: (existing?.registrations ?? 0) + 1,\n    });\n\n    if (existing?.label === itemLabel) {\n      return;\n    }\n\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const unregisterItem = useCallback((itemValue: string) => {\n    const existing = itemsRef.current.get(itemValue);\n    if (!existing) {\n      return;\n    }\n\n    if (existing.registrations > 1) {\n      itemsRef.current.set(itemValue, {\n        ...existing,\n        registrations: existing.registrations - 1,\n      });\n      return;\n    }\n\n    itemsRef.current.delete(itemValue);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const getItemLabel = useCallback(\n    (itemValue: string) => itemsRef.current.get(itemValue)?.label,\n    [],\n  );\n\n  const fieldContext = useMemo<SelectFieldContextValue>(\n    () => ({\n      size,\n      disabled,\n      readOnly,\n      required,\n      hasError,\n      width,\n      reduceMotion,\n      placeholder,\n      uid,\n      maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,\n    }),\n    [\n      disabled,\n      hasError,\n      placeholder,\n      readOnly,\n      reduceMotion,\n      required,\n      resolvedMaxFontSizeMultiplier,\n      size,\n      uid,\n      width,\n    ],\n  );\n\n  const contextValue = useMemo<SelectContextValue>(\n    () => ({\n      value,\n      setValue,\n      open,\n      setOpen,\n      triggerRef,\n      triggerRect,\n      setTriggerRect,\n      registerItem,\n      unregisterItem,\n      getItemLabel,\n      highlightedValue,\n      setHighlightedValue,\n      field: fieldContext,\n      reduceMotion,\n    }),\n    [\n      fieldContext,\n      getItemLabel,\n      highlightedValue,\n      open,\n      reduceMotion,\n      registerItem,\n      setOpen,\n      setValue,\n      triggerRect,\n      unregisterItem,\n      value,\n    ],\n  );\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier} style={inputStyles.label}>\n          {content}\n        </Text>\n        {required && (\n          <Text\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={inputStyles.labelRequired}\n          >\n            *\n          </Text>\n        )}\n      </HStack>\n    );\n  }, [\n    label,\n    required,\n    resolvedMaxFontSizeMultiplier,\n    inputStyles.label,\n    inputStyles.labelRequired,\n  ]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <InputHelpText\n        startIcon={helperTextIcon}\n        size={size}\n        isFilled={valueState === 'filled'}\n        disabled={disabled}\n        readOnly={readOnly}\n        hasError={hasError}\n        pressed={open}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [\n    disabled,\n    hasError,\n    helpText,\n    helperTextIcon,\n    open,\n    readOnly,\n    resolvedMaxFontSizeMultiplier,\n    size,\n    valueState,\n  ]);\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectFieldContext.Provider value={fieldContext}>\n        <VStack testID={testID} style={rootStyle}>\n          {labelContent}\n\n          <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n          {helpTextContent}\n\n          {children}\n        </VStack>\n      </SelectFieldContext.Provider>\n    </SelectContext.Provider>\n  );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n  /** Placeholder text shown when no value is selected. */\n  placeholder?: string;\n  /** Selected value for controlled usage. */\n  value?: string;\n  /** Initial value for uncontrolled usage. @default '' */\n  defaultValue?: string;\n  /** Called when the selected value changes. */\n  onChange?: (value: string) => void;\n  /** Container width. @default '100%' */\n  width?: number | `${number}%` | '100%';\n  /** Caps text, icons, and field geometry at the control scale. Set null to remove the cap. @default 2 */\n  maxFontSizeMultiplier?: number | null;\n  children?: ReactNode;\n  testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"ca\">Canada</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n  label,\n  helpText,\n  helperTextIcon,\n  placeholder,\n  size = 'md',\n  disabled,\n  required,\n  hasError,\n  readOnly,\n  width = '100%',\n  maxFontSizeMultiplier,\n  reduceMotion = false,\n  startIcon,\n  endIcon,\n  value: valueProp,\n  defaultValue = '',\n  onChange,\n  children,\n  testID,\n}: SelectProps) {\n  const generatedId = useId();\n  const uid = `uds-select-${generatedId}`;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const triggerRef = useRef<View | null>(null);\n  const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n  const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n  // Android's portal can briefly overlap the hidden registry item and its visible copy.\n  // Count registrations so one copy unmounting does not erase the selected value's label.\n  const itemsRef = useRef(new Map<string, { label: string; registrations: number }>());\n  const [, setItemsVersion] = useState(0);\n\n  const [value, setValue] = useControllableState({\n    value: valueProp,\n    defaultValue,\n    onChange,\n  });\n\n  const [open, setOpen] = useControllableState({\n    defaultValue: false,\n    onChange: (nextOpen) => {\n      if (!nextOpen) {\n        setHighlightedValue(null);\n      }\n    },\n  });\n\n  const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n    const existing = itemsRef.current.get(itemValue);\n    itemsRef.current.set(itemValue, {\n      label: itemLabel,\n      registrations: (existing?.registrations ?? 0) + 1,\n    });\n\n    if (existing?.label === itemLabel) {\n      return;\n    }\n\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const unregisterItem = useCallback((itemValue: string) => {\n    const existing = itemsRef.current.get(itemValue);\n    if (!existing) {\n      return;\n    }\n\n    if (existing.registrations > 1) {\n      itemsRef.current.set(itemValue, {\n        ...existing,\n        registrations: existing.registrations - 1,\n      });\n      return;\n    }\n\n    itemsRef.current.delete(itemValue);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const getItemLabel = useCallback(\n    (itemValue: string) => itemsRef.current.get(itemValue)?.label,\n    [],\n  );\n\n  const fieldContext = useMemo<SelectFieldContextValue>(\n    () => ({\n      size,\n      disabled,\n      readOnly,\n      required,\n      hasError,\n      width,\n      reduceMotion,\n      placeholder,\n      uid,\n      maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,\n    }),\n    [\n      disabled,\n      hasError,\n      placeholder,\n      readOnly,\n      reduceMotion,\n      required,\n      resolvedMaxFontSizeMultiplier,\n      size,\n      uid,\n      width,\n    ],\n  );\n\n  const contextValue = useMemo<SelectContextValue>(\n    () => ({\n      value,\n      setValue,\n      open,\n      setOpen,\n      triggerRef,\n      triggerRect,\n      setTriggerRect,\n      registerItem,\n      unregisterItem,\n      getItemLabel,\n      highlightedValue,\n      setHighlightedValue,\n      field: fieldContext,\n      reduceMotion,\n    }),\n    [\n      fieldContext,\n      getItemLabel,\n      highlightedValue,\n      open,\n      reduceMotion,\n      registerItem,\n      setOpen,\n      setValue,\n      triggerRect,\n      unregisterItem,\n      value,\n    ],\n  );\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text\n          variant=\"inherit\"\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={inputStyles.label}\n        >\n          {content}\n        </Text>\n        {required && (\n          // Default variant, not \"inherit\": the `labelRequired` layer carries\n          // only color, so inherit would leave the asterisk in the platform\n          // system font instead of its longstanding body1 typography.\n          <Text\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={inputStyles.labelRequired}\n          >\n            *\n          </Text>\n        )}\n      </HStack>\n    );\n  }, [\n    label,\n    required,\n    resolvedMaxFontSizeMultiplier,\n    inputStyles.label,\n    inputStyles.labelRequired,\n  ]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <InputHelpText\n        startIcon={helperTextIcon}\n        size={size}\n        isFilled={valueState === 'filled'}\n        disabled={disabled}\n        readOnly={readOnly}\n        hasError={hasError}\n        pressed={open}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [\n    disabled,\n    hasError,\n    helpText,\n    helperTextIcon,\n    open,\n    readOnly,\n    resolvedMaxFontSizeMultiplier,\n    size,\n    valueState,\n  ]);\n\n  return (\n    <SelectContext.Provider value={contextValue}>\n      <SelectFieldContext.Provider value={fieldContext}>\n        <VStack testID={testID} style={rootStyle}>\n          {labelContent}\n\n          <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n          {helpTextContent}\n\n          {children}\n        </VStack>\n      </SelectFieldContext.Provider>\n    </SelectContext.Provider>\n  );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":"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"}

package/dist/components/Select/SelectItem.cjs

@@ -1,7 +1,6 @@
 /*! © 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_FontScalingContext = require("../../fontScaling/FontScalingContext.cjs");
 const require_components_HStack = require("../HStack.cjs");
 const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
 const require_components_IconSlot = require("../IconSlot.cjs");
@@ -20,7 +19,6 @@ react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 * A single selectable option inside {@link SelectContent}.
 */
 const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, children, style, testID }) {
-	const fontScalingEnabled = require_fontScaling_FontScalingContext.useFontScalingEnabled();
 	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion, field } = require_components_Select_selectContext.useSelectContext();
 	const { maxFontSizeMultiplier } = field;
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
@@ -48,7 +46,7 @@ const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, childr
 		isSelected,
 		theme
 	]);
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
 	const rootStyle = (0, react.useMemo)(() => {
 		const configuredRoot = require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected);
 		return [
@@ -130,7 +128,6 @@ const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, childr
 				style: textStyle,
 				numberOfLines: 1,
 				maxFontSizeMultiplier,
-				dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
 				children
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {

package/dist/components/Select/SelectItem.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAuBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"SelectItem.d.cts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAsBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Select/SelectItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAuBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"SelectItem.d.ts","names":[],"sources":["../../../src/components/Select/SelectItem.tsx"],"mappings":";;;;;;UAsBU,eAAA;;EAER,KAAA;EAFQ;EAIR,QAAA;EACA,QAAA,GAAW,SAAA;EACX,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Select/SelectItem.js

@@ -1,7 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { useFontScalingEnabled } from "../../fontScaling/FontScalingContext.js";
 import { HStack } from "../HStack.js";
-import { useFontScale } from "../../fontScaling/useFontScale.js";
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
 import { IconSlot } from "../IconSlot.js";
 import { useSelectContext } from "./selectContext.js";
 import { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState } from "./selectItemTheme.js";
@@ -17,7 +16,6 @@ import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from
 * A single selectable option inside {@link SelectContent}.
 */
 const SelectItem = memo(function SelectItem({ value, disabled, children, style, testID }) {
-	const fontScalingEnabled = useFontScalingEnabled();
 	const { value: selectedValue, setValue, setOpen, open, registerItem, unregisterItem, highlightedValue, setHighlightedValue, reduceMotion, field } = useSelectContext();
 	const { maxFontSizeMultiplier } = field;
 	const { theme } = useUnistyles();
@@ -45,7 +43,7 @@ const SelectItem = memo(function SelectItem({ value, disabled, children, style,
 		isSelected,
 		theme
 	]);
-	const fontScaleFactor = useFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const fontScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
 	const rootStyle = useMemo(() => {
 		const configuredRoot = getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected);
 		return [
@@ -127,7 +125,6 @@ const SelectItem = memo(function SelectItem({ value, disabled, children, style,
 				style: textStyle,
 				numberOfLines: 1,
 				maxFontSizeMultiplier,
-				dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
 				children
 			})
 		}), /* @__PURE__ */ jsx(Animated.View, {

package/dist/components/Select/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScalingEnabled } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n  getMergedSelectItemLayerStyle,\n  resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n  value,\n  disabled,\n  children,\n  style,\n  testID,\n}: SelectItemProps) {\n  const fontScalingEnabled = useFontScalingEnabled();\n  const {\n    value: selectedValue,\n    setValue,\n    setOpen,\n    open,\n    registerItem,\n    unregisterItem,\n    highlightedValue,\n    setHighlightedValue,\n    reduceMotion,\n    field,\n  } = useSelectContext();\n  const { maxFontSizeMultiplier } = field;\n  const { theme } = useUnistyles();\n  const [isPressed, setIsPressed] = useState(false);\n\n  const label = useMemo(() => {\n    if (typeof children === 'string' || typeof children === 'number') {\n      return String(children);\n    }\n\n    return value;\n  }, [children, value]);\n\n  useEffect(() => {\n    registerItem(value, label);\n    return () => unregisterItem(value);\n  }, [label, registerItem, unregisterItem, value]);\n\n  const isSelected = selectedValue === value;\n  const isHighlighted = highlightedValue === value;\n  const interaction = resolveSelectItemInteractionState({\n    isPressed,\n    isHighlighted,\n  });\n\n  const textStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n    [interaction, isSelected, theme],\n  );\n  const fontScaleFactor = useFontScale(\n    maxFontSizeMultiplier,\n    (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n      (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n  );\n\n  const rootStyle = useMemo(() => {\n    const configuredRoot = getMergedSelectItemLayerStyle(\n      theme,\n      'root',\n      interaction,\n      isSelected,\n    ) as ViewStyle;\n    return [\n      configuredRoot,\n      fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n        ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n        : undefined,\n      {\n        flexDirection: 'row' as const,\n        alignItems: 'center' as const,\n        justifyContent: 'space-between' as const,\n        width: '100%' as const,\n        opacity: disabled ? 0.5 : 1,\n      },\n      style,\n    ] as StyleProp<ViewStyle>;\n  }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n  const endIconStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n    [interaction, isSelected, theme],\n  );\n\n  const checkScale = useDerivedValue(\n    () =>\n      withTiming(isSelected ? 1 : 0, {\n        duration: reduceMotion ? 0 : 120,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isSelected, reduceMotion],\n  );\n\n  const checkAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: checkScale.value,\n    transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n  }));\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setValue(value);\n    setOpen(false);\n    setHighlightedValue(null);\n  }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n  const handlePressIn = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setIsPressed(true);\n    setHighlightedValue(value);\n  }, [disabled, setHighlightedValue, value]);\n\n  const handlePressOut = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <RNPressable\n      testID={testID}\n      disabled={disabled}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      style={rootStyle}\n      accessibilityRole=\"menuitem\"\n      accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n    >\n      <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n        <RNText\n          style={textStyle}\n          numberOfLines={1}\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n          dynamicTypeRamp={fontScalingEnabled ? 'body' : undefined}\n        >\n          {children}\n        </RNText>\n      </HStack>\n\n      <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n        <IconSlot\n          icon=\"Check\"\n          size=\"sm\"\n          variant=\"fill\"\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n          style={endIconStyle}\n        />\n      </Animated.View>\n    </RNPressable>\n  );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":"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"}
+{"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n  getMergedSelectItemLayerStyle,\n  resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n  /** Value submitted when this option is selected. */\n  value: string;\n  /** Whether this option is disabled. */\n  disabled?: boolean;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n  value,\n  disabled,\n  children,\n  style,\n  testID,\n}: SelectItemProps) {\n  const {\n    value: selectedValue,\n    setValue,\n    setOpen,\n    open,\n    registerItem,\n    unregisterItem,\n    highlightedValue,\n    setHighlightedValue,\n    reduceMotion,\n    field,\n  } = useSelectContext();\n  const { maxFontSizeMultiplier } = field;\n  const { theme } = useUnistyles();\n  const [isPressed, setIsPressed] = useState(false);\n\n  const label = useMemo(() => {\n    if (typeof children === 'string' || typeof children === 'number') {\n      return String(children);\n    }\n\n    return value;\n  }, [children, value]);\n\n  useEffect(() => {\n    registerItem(value, label);\n    return () => unregisterItem(value);\n  }, [label, registerItem, unregisterItem, value]);\n\n  const isSelected = selectedValue === value;\n  const isHighlighted = highlightedValue === value;\n  const interaction = resolveSelectItemInteractionState({\n    isPressed,\n    isHighlighted,\n  });\n\n  const textStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n    [interaction, isSelected, theme],\n  );\n  const fontScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n      (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n  );\n\n  const rootStyle = useMemo(() => {\n    const configuredRoot = getMergedSelectItemLayerStyle(\n      theme,\n      'root',\n      interaction,\n      isSelected,\n    ) as ViewStyle;\n    return [\n      configuredRoot,\n      fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n        ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n        : undefined,\n      {\n        flexDirection: 'row' as const,\n        alignItems: 'center' as const,\n        justifyContent: 'space-between' as const,\n        width: '100%' as const,\n        opacity: disabled ? 0.5 : 1,\n      },\n      style,\n    ] as StyleProp<ViewStyle>;\n  }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n  const endIconStyle = useMemo(\n    () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n    [interaction, isSelected, theme],\n  );\n\n  const checkScale = useDerivedValue(\n    () =>\n      withTiming(isSelected ? 1 : 0, {\n        duration: reduceMotion ? 0 : 120,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isSelected, reduceMotion],\n  );\n\n  const checkAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: checkScale.value,\n    transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n  }));\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setValue(value);\n    setOpen(false);\n    setHighlightedValue(null);\n  }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n  const handlePressIn = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    setIsPressed(true);\n    setHighlightedValue(value);\n  }, [disabled, setHighlightedValue, value]);\n\n  const handlePressOut = useCallback(() => {\n    setIsPressed(false);\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <RNPressable\n      testID={testID}\n      disabled={disabled}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      style={rootStyle}\n      accessibilityRole=\"menuitem\"\n      accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n    >\n      <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n        <RNText style={textStyle} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n          {children}\n        </RNText>\n      </HStack>\n\n      <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n        <IconSlot\n          icon=\"Check\"\n          size=\"sm\"\n          variant=\"fill\"\n          maxFontSizeMultiplier={maxFontSizeMultiplier}\n          style={endIconStyle}\n        />\n      </Animated.View>\n    </RNPressable>\n  );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":"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"}

package/dist/components/Select/SelectTrigger.cjs

@@ -1,7 +1,6 @@
 /*! © 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_FontScalingContext = require("../../fontScaling/FontScalingContext.cjs");
 const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
 const require_components_IconSlot = require("../IconSlot.cjs");
 const require_components_internal_Overlay_measureTrigger = require("../internal/Overlay/measureTrigger.cjs");
@@ -14,7 +13,6 @@ let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 //#region src/components/Select/SelectTrigger.tsx
 const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIcon }) {
-	const fontScalingEnabled = require_fontScaling_FontScalingContext.useFontScalingEnabled();
 	const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = require_components_Select_selectContext.useSelectContext();
 	const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } = require_components_Select_selectContext.useSelectFieldContext();
 	const hasValue = value.length > 0;
@@ -29,7 +27,7 @@ const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIco
 		readonly: readOnly,
 		invalid: hasError
 	});
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, (typeof generated_styles.inputStyles.inputWrapperStatic.lineHeight === "number" ? generated_styles.inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof generated_styles.inputStyles.inputWrapperStatic.fontSize === "number" ? generated_styles.inputStyles.inputWrapperStatic.fontSize : void 0));
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof generated_styles.inputStyles.inputWrapperStatic.lineHeight === "number" ? generated_styles.inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof generated_styles.inputStyles.inputWrapperStatic.fontSize === "number" ? generated_styles.inputStyles.inputWrapperStatic.fontSize : void 0));
 	const inputWrapperStyle = (0, react.useMemo)(() => {
 		const { gap, paddingVertical } = generated_styles.inputStyles.inputWrapperStatic;
 		const scaledMetrics = fontScaleFactor === 1 ? void 0 : {
@@ -132,7 +130,6 @@ const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIco
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
 						numberOfLines: 1,
 						maxFontSizeMultiplier,
-						dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
 						style: textInputStyle,
 						children: displayText
 					})

package/dist/components/Select/SelectTrigger.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.cts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAkBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
+{"version":3,"file":"SelectTrigger.d.cts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAiBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.d.ts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAkBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
+{"version":3,"file":"SelectTrigger.d.ts","names":[],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"mappings":";;;;;UAiBU,kBAAA;EACR,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;AAAA;AAAA,cAGN,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectTrigger.js

@@ -1,6 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { useFontScalingEnabled } from "../../fontScaling/FontScalingContext.js";
-import { useFontScale } from "../../fontScaling/useFontScale.js";
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
 import { IconSlot } from "../IconSlot.js";
 import { measureTrigger } from "../internal/Overlay/measureTrigger.js";
 import { useSelectContext, useSelectFieldContext } from "./selectContext.js";
@@ -11,7 +10,6 @@ import { inputStyles } from "../../../generated/styles";
 import Animated, { Easing, useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
 //#region src/components/Select/SelectTrigger.tsx
 const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
-	const fontScalingEnabled = useFontScalingEnabled();
 	const { value, open, setOpen, triggerRef, triggerRect, setTriggerRect, getItemLabel, setHighlightedValue, reduceMotion } = useSelectContext();
 	const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } = useSelectFieldContext();
 	const hasValue = value.length > 0;
@@ -26,7 +24,7 @@ const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
 		readonly: readOnly,
 		invalid: hasError
 	});
-	const fontScaleFactor = useFontScale(maxFontSizeMultiplier, (typeof inputStyles.inputWrapperStatic.lineHeight === "number" ? inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof inputStyles.inputWrapperStatic.fontSize === "number" ? inputStyles.inputWrapperStatic.fontSize : void 0));
+	const fontScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof inputStyles.inputWrapperStatic.lineHeight === "number" ? inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof inputStyles.inputWrapperStatic.fontSize === "number" ? inputStyles.inputWrapperStatic.fontSize : void 0));
 	const inputWrapperStyle = useMemo(() => {
 		const { gap, paddingVertical } = inputStyles.inputWrapperStatic;
 		const scaledMetrics = fontScaleFactor === 1 ? void 0 : {
@@ -129,7 +127,6 @@ const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
 					children: /* @__PURE__ */ jsx(Text, {
 						numberOfLines: 1,
 						maxFontSizeMultiplier,
-						dynamicTypeRamp: fontScalingEnabled ? "body" : void 0,
 						style: textInputStyle,
 						children: displayText
 					})

package/dist/components/Select/SelectTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useFontScalingEnabled } from '../../fontScaling/FontScalingContext';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n  const fontScalingEnabled = useFontScalingEnabled();\n  const {\n    value,\n    open,\n    setOpen,\n    triggerRef,\n    triggerRect,\n    setTriggerRect,\n    getItemLabel,\n    setHighlightedValue,\n    reduceMotion,\n  } = useSelectContext();\n  const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n    useSelectFieldContext();\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n  const isInteractive = !readOnly && !disabled;\n  const useAnimatedChevron = endIcon === undefined;\n  const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n  const fontScaleFactor = useFontScale(\n    maxFontSizeMultiplier,\n    (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n      ? inputStyles.inputWrapperStatic.lineHeight\n      : undefined) ??\n      (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n        ? inputStyles.inputWrapperStatic.fontSize\n        : undefined),\n  );\n\n  const inputWrapperStyle = useMemo(() => {\n    const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n    const scaledMetrics =\n      fontScaleFactor === 1\n        ? undefined\n        : {\n            ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n            ...(typeof paddingVertical === 'number' && {\n              paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n            }),\n          };\n\n    return [\n      inputStyles.inputWrapper,\n      inputStyles.inputWrapperStatic,\n      inputStyles.inputWrapperDynamic,\n      scaledMetrics,\n      {\n        flexDirection: 'row' as const,\n        alignItems: 'center' as const,\n        width,\n        alignSelf: 'stretch' as const,\n      },\n    ];\n  }, [\n    fontScaleFactor,\n    inputStyles.inputWrapper,\n    inputStyles.inputWrapperDynamic,\n    inputStyles.inputWrapperStatic,\n    width,\n  ]);\n\n  const textContainerStyle = useMemo(\n    () => [\n      {\n        flex: 1,\n        justifyContent: 'center' as const,\n      },\n      typeof inputStyles.input.height === 'number'\n        ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n        : null,\n    ],\n    [fontScaleFactor, inputStyles.input],\n  );\n\n  const textInputStyle = useMemo(\n    () => [\n      {\n        fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n        fontSize: inputStyles.inputWrapperStatic.fontSize,\n        letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n        // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n        lineHeight: inputStyles.inputWrapperStatic.fontSize,\n        paddingVertical: 0,\n      },\n      inputStyles.input,\n      { height: undefined },\n      !hasValue ? inputStyles.inputPlaceholder : null,\n    ],\n    [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n  );\n\n  const chevronProgress = useDerivedValue(\n    () =>\n      withTiming(open ? 1 : 0, {\n        duration: reduceMotion ? 0 : 200,\n        easing: Easing.out(Easing.ease),\n      }),\n    [open, reduceMotion],\n  );\n\n  const chevronAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n  }));\n\n  const handleRef = useCallback(\n    (node: View | null) => {\n      triggerRef.current = node;\n    },\n    [triggerRef],\n  );\n\n  const handlePress = useCallback(() => {\n    if (!isInteractive) {\n      return;\n    }\n\n    if (open) {\n      setOpen(false);\n      setHighlightedValue(null);\n      return;\n    }\n\n    measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n    setHighlightedValue(null);\n    setOpen(true);\n  }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n  return (\n    <RNPressable\n      ref={handleRef}\n      testID=\"select-trigger\"\n      onPress={handlePress}\n      disabled={!isInteractive}\n      style={{ width, alignSelf: 'stretch' }}\n      accessibilityRole=\"button\"\n      accessibilityLabel={displayText || uid}\n      accessibilityState={{\n        disabled: !isInteractive,\n        expanded: open,\n        selected: hasValue,\n      }}\n    >\n      <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n        {startIcon ? (\n          <IconSlot\n            icon={startIcon}\n            variant=\"outline\"\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            style={inputStyles.startIcon}\n          />\n        ) : null}\n\n        <RNView style={textContainerStyle}>\n          <RNText\n            numberOfLines={1}\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            dynamicTypeRamp={fontScalingEnabled ? 'body' : undefined}\n            style={textInputStyle}\n          >\n            {displayText}\n          </RNText>\n        </RNView>\n\n        {useAnimatedChevron || endIcon ? (\n          <Animated.View\n            style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n            testID=\"select-chevron\"\n          >\n            <IconSlot\n              icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n              size=\"sm\"\n              variant=\"outline\"\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n              style={inputStyles.endIcon}\n            />\n          </Animated.View>\n        ) : null}\n      </RNView>\n    </RNPressable>\n  );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}
+{"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n  const {\n    value,\n    open,\n    setOpen,\n    triggerRef,\n    triggerRect,\n    setTriggerRect,\n    getItemLabel,\n    setHighlightedValue,\n    reduceMotion,\n  } = useSelectContext();\n  const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n    useSelectFieldContext();\n\n  const hasValue = value.length > 0;\n  const valueState = hasValue ? 'filled' : 'empty';\n  const isInteractive = !readOnly && !disabled;\n  const useAnimatedChevron = endIcon === undefined;\n  const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: open,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n  const fontScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n      ? inputStyles.inputWrapperStatic.lineHeight\n      : undefined) ??\n      (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n        ? inputStyles.inputWrapperStatic.fontSize\n        : undefined),\n  );\n\n  const inputWrapperStyle = useMemo(() => {\n    const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n    const scaledMetrics =\n      fontScaleFactor === 1\n        ? undefined\n        : {\n            ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n            ...(typeof paddingVertical === 'number' && {\n              paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n            }),\n          };\n\n    return [\n      inputStyles.inputWrapper,\n      inputStyles.inputWrapperStatic,\n      inputStyles.inputWrapperDynamic,\n      scaledMetrics,\n      {\n        flexDirection: 'row' as const,\n        alignItems: 'center' as const,\n        width,\n        alignSelf: 'stretch' as const,\n      },\n    ];\n  }, [\n    fontScaleFactor,\n    inputStyles.inputWrapper,\n    inputStyles.inputWrapperDynamic,\n    inputStyles.inputWrapperStatic,\n    width,\n  ]);\n\n  const textContainerStyle = useMemo(\n    () => [\n      {\n        flex: 1,\n        justifyContent: 'center' as const,\n      },\n      typeof inputStyles.input.height === 'number'\n        ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n        : null,\n    ],\n    [fontScaleFactor, inputStyles.input],\n  );\n\n  const textInputStyle = useMemo(\n    () => [\n      {\n        fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n        fontSize: inputStyles.inputWrapperStatic.fontSize,\n        letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n        // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n        lineHeight: inputStyles.inputWrapperStatic.fontSize,\n        paddingVertical: 0,\n      },\n      inputStyles.input,\n      { height: undefined },\n      !hasValue ? inputStyles.inputPlaceholder : null,\n    ],\n    [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n  );\n\n  const chevronProgress = useDerivedValue(\n    () =>\n      withTiming(open ? 1 : 0, {\n        duration: reduceMotion ? 0 : 200,\n        easing: Easing.out(Easing.ease),\n      }),\n    [open, reduceMotion],\n  );\n\n  const chevronAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n  }));\n\n  const handleRef = useCallback(\n    (node: View | null) => {\n      triggerRef.current = node;\n    },\n    [triggerRef],\n  );\n\n  const handlePress = useCallback(() => {\n    if (!isInteractive) {\n      return;\n    }\n\n    if (open) {\n      setOpen(false);\n      setHighlightedValue(null);\n      return;\n    }\n\n    measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n    setHighlightedValue(null);\n    setOpen(true);\n  }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n  return (\n    <RNPressable\n      ref={handleRef}\n      testID=\"select-trigger\"\n      onPress={handlePress}\n      disabled={!isInteractive}\n      style={{ width, alignSelf: 'stretch' }}\n      accessibilityRole=\"button\"\n      accessibilityLabel={displayText || uid}\n      accessibilityState={{\n        disabled: !isInteractive,\n        expanded: open,\n        selected: hasValue,\n      }}\n    >\n      <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n        {startIcon ? (\n          <IconSlot\n            icon={startIcon}\n            variant=\"outline\"\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            style={inputStyles.startIcon}\n          />\n        ) : null}\n\n        <RNView style={textContainerStyle}>\n          <RNText\n            numberOfLines={1}\n            maxFontSizeMultiplier={maxFontSizeMultiplier}\n            style={textInputStyle}\n          >\n            {displayText}\n          </RNText>\n        </RNView>\n\n        {useAnimatedChevron || endIcon ? (\n          <Animated.View\n            style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n            testID=\"select-chevron\"\n          >\n            <IconSlot\n              icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n              size=\"sm\"\n              variant=\"outline\"\n              maxFontSizeMultiplier={maxFontSizeMultiplier}\n              style={inputStyles.endIcon}\n            />\n          </Animated.View>\n        ) : null}\n      </RNView>\n    </RNPressable>\n  );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}

package/dist/components/Switch.cjs

@@ -83,9 +83,9 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 		variant: activeVariant
 	}) ?? generated_styles.switchStyles;
 	const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
 	const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;
-	const handleIconScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
+	const handleIconScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
 	const scaledHandleIconSize = typeof handleIconSize === "number" ? Math.round(handleIconSize * handleIconScaleFactor) : void 0;
 	const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);
 	const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);
@@ -188,7 +188,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 							style: [
 								resolvedSwitchStyles.handleIcon,
 								variantLayerStyles.handleIcon,
-								scaledHandleIconSize === void 0 ? void 0 : {
+								scaledHandleIconSize === void 0 || handleIconScaleFactor === 1 ? void 0 : {
 									fontSize: scaledHandleIconSize,
 									lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
 								}
@@ -204,7 +204,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
 							style: [
 								resolvedSwitchStyles.handleIcon,
 								variantLayerStyles.handleIcon,
-								scaledHandleIconSize === void 0 ? void 0 : {
+								scaledHandleIconSize === void 0 || handleIconScaleFactor === 1 ? void 0 : {
 									fontSize: scaledHandleIconSize,
 									lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
 								}

package/dist/components/Switch.js

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { useFontScale } from "../fontScaling/useFontScale.js";
+import { useComponentFontScale } from "../fontScaling/useFontScale.js";
 import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
 import { getSafeIconCell } from "./Button/buttonTheme.js";
 import { IconSlot } from "./IconSlot.js";
@@ -80,9 +80,9 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 		variant: activeVariant
 	}) ?? switchStyles;
 	const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;
-	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
+	const fontScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
 	const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;
-	const handleIconScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
+	const handleIconScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
 	const scaledHandleIconSize = typeof handleIconSize === "number" ? Math.round(handleIconSize * handleIconScaleFactor) : void 0;
 	const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);
 	const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);
@@ -185,7 +185,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 							style: [
 								resolvedSwitchStyles.handleIcon,
 								variantLayerStyles.handleIcon,
-								scaledHandleIconSize === void 0 ? void 0 : {
+								scaledHandleIconSize === void 0 || handleIconScaleFactor === 1 ? void 0 : {
 									fontSize: scaledHandleIconSize,
 									lineHeight: getSafeIconCell(scaledHandleIconSize)
 								}
@@ -201,7 +201,7 @@ const Switch = memo(function Switch({ isOn: isOnProp, defaultIsOn = false, onCha
 							style: [
 								resolvedSwitchStyles.handleIcon,
 								variantLayerStyles.handleIcon,
-								scaledHandleIconSize === void 0 ? void 0 : {
+								scaledHandleIconSize === void 0 || handleIconScaleFactor === 1 ? void 0 : {
 									fontSize: scaledHandleIconSize,
 									lineHeight: getSafeIconCell(scaledHandleIconSize)
 								}

package/dist/components/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":["StyleSheet"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { 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 { getSafeIconCell } from './Button/buttonTheme';\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 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 resolved cap governs track, handle, travel, and label. Android may\n  // resolve different nonlinear factors for the label and handle glyph.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\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  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  const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof labelBaseSize === 'number' ? labelBaseSize : undefined,\n  );\n  // Size the handle glyph from the configured size layer and the same factor\n  // Android would apply to a native glyph of this size.\n  const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;\n  const handleIconScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof handleIconSize === 'number' ? handleIconSize : undefined,\n  );\n  const scaledHandleIconSize =\n    typeof handleIconSize === 'number'\n      ? Math.round(handleIconSize * handleIconScaleFactor)\n      : undefined;\n\n  // Derive travel from the same rounded metrics used to render the control.\n  // Scaling the token travel independently can differ by a pixel at fractional\n  // font scales, leaving unequal insets at opposite ends of the track.\n  const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);\n  const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);\n  const scaledHandleWidth = Math.round(resolvedSwitchStyles.handle.width * fontScaleFactor);\n  const scaledHandleTravel = Math.max(\n    0,\n    scaledTrackWidth - scaledHandleWidth - scaledTrackPadding * 2,\n  );\n  // RTL mirrors the track layout but not transforms, so travel flips sign.\n  const travelDistance = scaledHandleTravel * (I18nManager.isRTL ? -1 : 1);\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  // stays contained. Scale the track's inset too so the derived travel lands\n  // the handle at the same distance from either end.\n  const scaleDimensions = useCallback(\n    (style: ViewStyle | undefined): ViewStyle | undefined => {\n      if (!style || fontScaleFactor === 1) {\n        return undefined;\n      }\n      const { width, height, padding } = style;\n      return typeof width === 'number' && typeof height === 'number'\n        ? {\n            width: Math.round(width * fontScaleFactor),\n            height: Math.round(height * fontScaleFactor),\n            ...(typeof padding === 'number' && {\n              padding: Math.round(padding * fontScaleFactor),\n            }),\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={[\n                  resolvedSwitchStyles.handleIcon,\n                  variantLayerStyles.handleIcon,\n                  scaledHandleIconSize === undefined\n                    ? undefined\n                    : {\n                        fontSize: scaledHandleIconSize,\n                        lineHeight: getSafeIconCell(scaledHandleIconSize),\n                      },\n                ]}\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={[\n                  resolvedSwitchStyles.handleIcon,\n                  variantLayerStyles.handleIcon,\n                  scaledHandleIconSize === undefined\n                    ? undefined\n                    : {\n                        fontSize: scaledHandleIconSize,\n                        lineHeight: getSafeIconCell(scaledHandleIconSize),\n                      },\n                ]}\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 type { 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 { useComponentFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\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 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 resolved cap governs track, handle, travel, and label. Android may\n  // resolve different nonlinear factors for the label and handle glyph.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\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  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  const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;\n  const fontScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof labelBaseSize === 'number' ? labelBaseSize : undefined,\n  );\n  // Size the handle glyph from the configured size layer and the same factor\n  // Android would apply to a native glyph of this size.\n  const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;\n  const handleIconScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof handleIconSize === 'number' ? handleIconSize : undefined,\n  );\n  const scaledHandleIconSize =\n    typeof handleIconSize === 'number'\n      ? Math.round(handleIconSize * handleIconScaleFactor)\n      : undefined;\n\n  // Derive travel from the same rounded metrics used to render the control.\n  // Scaling the token travel independently can differ by a pixel at fractional\n  // font scales, leaving unequal insets at opposite ends of the track.\n  const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);\n  const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);\n  const scaledHandleWidth = Math.round(resolvedSwitchStyles.handle.width * fontScaleFactor);\n  const scaledHandleTravel = Math.max(\n    0,\n    scaledTrackWidth - scaledHandleWidth - scaledTrackPadding * 2,\n  );\n  // RTL mirrors the track layout but not transforms, so travel flips sign.\n  const travelDistance = scaledHandleTravel * (I18nManager.isRTL ? -1 : 1);\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  // stays contained. Scale the track's inset too so the derived travel lands\n  // the handle at the same distance from either end.\n  const scaleDimensions = useCallback(\n    (style: ViewStyle | undefined): ViewStyle | undefined => {\n      if (!style || fontScaleFactor === 1) {\n        return undefined;\n      }\n      const { width, height, padding } = style;\n      return typeof width === 'number' && typeof height === 'number'\n        ? {\n            width: Math.round(width * fontScaleFactor),\n            height: Math.round(height * fontScaleFactor),\n            ...(typeof padding === 'number' && {\n              padding: Math.round(padding * fontScaleFactor),\n            }),\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={[\n                  resolvedSwitchStyles.handleIcon,\n                  variantLayerStyles.handleIcon,\n                  // Only override at scaled sizes; at 1x the token lineHeight\n                  // must apply untouched (mirrors the Checkbox mark guard).\n                  scaledHandleIconSize === undefined || handleIconScaleFactor === 1\n                    ? undefined\n                    : {\n                        fontSize: scaledHandleIconSize,\n                        lineHeight: getSafeIconCell(scaledHandleIconSize),\n                      },\n                ]}\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={[\n                  resolvedSwitchStyles.handleIcon,\n                  variantLayerStyles.handleIcon,\n                  // Only override at scaled sizes; at 1x the token lineHeight\n                  // must apply untouched (mirrors the Checkbox mark guard).\n                  scaledHandleIconSize === undefined || handleIconScaleFactor === 1\n                    ? undefined\n                    : {\n                        fontSize: scaledHandleIconSize,\n                        lineHeight: getSafeIconCell(scaledHandleIconSize),\n                      },\n                ]}\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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"}

package/dist/components/Tabs/Tab.cjs

@@ -75,7 +75,7 @@ const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon,
 		active,
 		interaction
 	]);
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
 	const iconStyle = (0, react.useMemo)(() => require_components_Tabs_tabTheme.getMergedTabLayerStyle(theme, visualVariant, active, "icon", interaction), [
 		theme,
 		visualVariant,

package/dist/components/Tabs/Tab.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { ResolvedControlFontScalingProvider } from "../../fontScaling/FontScalingContext.js";
-import { useFontScale } from "../../fontScaling/useFontScale.js";
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
 import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
 import { IconSlot } from "../IconSlot.js";
 import { Pressable as Pressable$1 } from "../Pressable.js";
@@ -73,7 +73,7 @@ const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, s
 		active,
 		interaction
 	]);
-	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const fontScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
 	const iconStyle = useMemo(() => getMergedTabLayerStyle(theme, visualVariant, active, "icon", interaction), [
 		theme,
 		visualVariant,