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

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } 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 { Icon } from './Icon';\nimport { Pressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /**\n   * Caps how far the box, checkmark, 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 CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  maxFontSizeMultiplier,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  // One resolved cap governs box, checkmark, and label. Android may resolve a\n  // slightly different nonlinear factor for each base size.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\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 checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const boxBaseSize = checkboxStyles.checkbox.width;\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof boxBaseSize === 'number' ? boxBaseSize : undefined,\n  );\n  // The check/minus glyph is drawn at the 'sm' icon size; use its own native\n  // Android curve before disabling native scaling on the manually-sized glyph.\n  const markScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, ICON_SIZE_MAP.sm);\n  const scaledMarkSize = Math.round(ICON_SIZE_MAP.sm * markScaleFactor);\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(() => {\n    // The box grows by the capped factor to keep containing the checkmark.\n    // borderWidth stays fixed (stroke weight doesn't scale in the OS's own\n    // controls either).\n    const { width, height, borderRadius } = checkboxStyles.checkbox;\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            ...(typeof borderRadius === 'number' && {\n              borderRadius: Math.round(borderRadius * fontScaleFactor),\n            }),\n          }\n        : undefined;\n\n    return [\n      checkboxStyles.checkbox,\n      scaledBox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ];\n  }, [checkboxStyles.checkbox, fontScaleFactor, checkboxAnimatedStyle]);\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        flexShrink=\"1\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={checkboxStyles.text}\n      />\n    );\n  }, [label, required, hasError, resolvedMaxFontSizeMultiplier, checkboxStyles.text]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\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=\"stretch\"\n      minHeight={52}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && (\n          <Icon\n            name={iconName}\n            size=\"sm\"\n            // Size the mark from the same factor that scaled the box, with\n            // native scaling off: letting the box scale in JS while the glyph\n            // scaled natively left the two to round independently (and to\n            // disagree outright under Android's non-linear scaling), which\n            // drifted the mark off-centre as sizes grew.\n            dangerouslySetSize={scaledMarkSize}\n            allowFontScaling={false}\n            style={checkboxStyles.checkboxIcon}\n          />\n        )}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { CheckboxValue, CheckboxVariant, UniversalCheckboxProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { checkboxStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getSafeIconCell } from './Button/buttonTheme';\nimport { FormLabel } from './FormLabel';\nimport { Icon } from './Icon';\nimport { Pressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from CheckboxValue - maps boolean to 'checked'/'unchecked' string literals */\ntype CheckboxValueState = Exclude<CheckboxValue, boolean> | 'checked' | 'unchecked';\n\ninterface CheckboxProps extends Omit<ViewProps, 'style'>, UniversalCheckboxProps {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Default checked state for uncontrolled mode */\n  defaultChecked?: boolean;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is required */\n  required?: boolean;\n  /**\n   * Caps how far the box, checkmark, 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 CheckboxStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<CheckboxVariant, CheckboxStyleVariant> = {\n  primary: 'alert',\n  secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/*                              Checkbox Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A checkbox component**\n *\n * @description\n * A checkbox component allows users to select one or multiple options from a set.\n * It represents a binary state, typically as checked or unchecked, and optionally\n * includes a third \"indeterminate\" state to indicate partial selection.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Checkbox } from '@yahoo/uds-mobile/Checkbox';\n *\n * <Checkbox label=\"Agree to terms\" />\n * <Checkbox label=\"Subscribe\" checked={true} onChange={setChecked} />\n * <Checkbox label=\"Partial\" checked=\"indeterminate\" />\n * ```\n *\n * @usage\n * - Forms: For selecting options\n * - Settings: For toggling preferences\n * - Filters: For multi-select filtering\n *\n * @accessibility\n * - Sets `accessibilityRole=\"checkbox\"` automatically\n * - Announces checked/unchecked/mixed state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Radio} for single-select options\n * @see {@link Switch} for binary toggles\n */\nconst Checkbox = memo(function Checkbox({\n  // Checkbox props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  maxFontSizeMultiplier,\n  onChange,\n  ref,\n  ...viewProps\n}: CheckboxProps) {\n  const generatedId = useId();\n  const uid = `uds-checkbox-${generatedId}`;\n\n  // One resolved cap governs box, checkmark, and label. Android may resolve a\n  // slightly different nonlinear factor for each base size.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  /* --------------------------------- State ---------------------------------- */\n  const isControlled = checkedProp !== undefined;\n  const [internalChecked, setInternalChecked] = useState<CheckboxValue>(\n    isControlled ? checkedProp : (defaultChecked ?? false),\n  );\n  const [pressed, setPressed] = useState(false);\n\n  // Use controlled value if provided, otherwise use internal state\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  /* ------------------------------ Derived Values ---------------------------- */\n  const valueState: CheckboxValueState = useMemo(() => {\n    if (checked === 'indeterminate') {\n      return 'indeterminate';\n    }\n    return checked ? 'checked' : 'unchecked';\n  }, [checked]);\n\n  const iconName = valueState === 'indeterminate' ? 'Minus' : 'Check';\n  const showIcon = valueState !== 'unchecked';\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 checkboxAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = checked === 'indeterminate' ? true : !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Compute the style variant (primary/secondary maps to alert variants when hasError)\n  const styleVariant: CheckboxStyleVariant = hasError\n    ? VARIANT_ERROR_MAP[variantProp]\n    : variantProp;\n\n  checkboxStyles.useVariants({\n    size,\n    variant: styleVariant, // primary, secondary, alert, alert-secondary\n    value: valueState, // checked, unchecked, indeterminate\n    disabled,\n    pressed,\n  });\n\n  const boxBaseSize = checkboxStyles.checkbox.width;\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    typeof boxBaseSize === 'number' ? boxBaseSize : undefined,\n  );\n  // The check/minus glyph is drawn at the 'sm' icon size; use its own native\n  // Android curve before disabling native scaling on the manually-sized glyph.\n  const markScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, ICON_SIZE_MAP.sm);\n  const scaledMarkSize = Math.round(ICON_SIZE_MAP.sm * markScaleFactor);\n  const hasScaledLayout = fontScaleFactor !== 1;\n\n  const rootStyle = useMemo(\n    () => [checkboxStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [checkboxStyles.root, disabled],\n  );\n\n  const checkboxBoxStyle = useMemo(() => {\n    // The box grows by the capped factor to keep containing the checkmark.\n    // borderWidth stays fixed (stroke weight doesn't scale in the OS's own\n    // controls either).\n    const { width, height, borderRadius } = checkboxStyles.checkbox;\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            ...(typeof borderRadius === 'number' && {\n              borderRadius: Math.round(borderRadius * fontScaleFactor),\n            }),\n          }\n        : undefined;\n\n    return [\n      checkboxStyles.checkbox,\n      scaledBox,\n      { alignItems: 'center' as const, justifyContent: 'center' as const },\n      checkboxAnimatedStyle,\n    ];\n  }, [checkboxStyles.checkbox, fontScaleFactor, checkboxAnimatedStyle]);\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        flexShrink={hasScaledLayout ? '1' : undefined}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={checkboxStyles.text}\n      />\n    );\n  }, [\n    label,\n    required,\n    hasError,\n    hasScaledLayout,\n    resolvedMaxFontSizeMultiplier,\n    checkboxStyles.text,\n  ]);\n\n  const a11yState = useMemo(\n    () => ({\n      disabled,\n      checked:\n        valueState === 'checked'\n          ? true\n          : valueState === 'indeterminate'\n            ? ('mixed' as const)\n            : false,\n    }),\n    [disabled, valueState],\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={hasScaledLayout ? 'stretch' : 'flex-start'}\n      minHeight={hasScaledLayout ? 52 : undefined}\n      accessibilityRole=\"checkbox\"\n      accessibilityState={a11yState}\n      accessibilityLabel={typeof label === 'string' ? label : undefined}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Animated.View style={checkboxBoxStyle}>\n        {showIcon && (\n          <Icon\n            name={iconName}\n            size=\"sm\"\n            // Size the mark from the same factor that scaled the box, with\n            // native scaling off: letting the box scale in JS while the glyph\n            // scaled natively left the two to round independently (and to\n            // disagree outright under Android's non-linear scaling), which\n            // drifted the mark off-centre as sizes grew.\n            dangerouslySetSize={scaledMarkSize}\n            allowFontScaling={false}\n            style={[\n              checkboxStyles.checkboxIcon,\n              markScaleFactor !== 1\n                ? {\n                    fontSize: scaledMarkSize,\n                    lineHeight: getSafeIconCell(scaledMarkSize),\n                  }\n                : undefined,\n            ]}\n          />\n        )}\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, type CheckboxProps };\n"],"mappings":"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"}

package/dist/components/Chip/ChipBase.cjs

@@ -19,7 +19,7 @@ const ChipBase = (0, react.memo)(function ChipBase({ kind, toggleState = DEFAULT
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
 	const [pressed, setPressed] = (0, react.useState)(false);
 	const interactionState = pressed ? "pressed" : "rest";
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const rootLayerStyle = (0, react.useMemo)(() => require_components_Chip_chipTheme.getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
 		interactionState,
 		kind,

package/dist/components/Chip/ChipBase.js

@@ -17,7 +17,7 @@ const ChipBase = memo(function ChipBase({ kind, toggleState = DEFAULT_TOGGLE_STA
 	const { theme } = useUnistyles();
 	const [pressed, setPressed] = useState(false);
 	const interactionState = pressed ? "pressed" : "rest";
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const rootLayerStyle = useMemo(() => getMergedChipLayerStyle(theme, kind, variant, size, toggleState, "root", interactionState), [
 		interactionState,
 		kind,

package/dist/components/Chip/ChipBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipBase.js","names":["Text"],"sources":["../../../src/components/Chip/ChipBase.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- chip toggle styles need variant + active token lookups\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { IconSlot } from '../IconSlot';\nimport { Text } from '../Text';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipBaseProps, ChipInteractionState, ChipSize, ChipVariant } from './types';\n\nconst DEFAULT_CHIP_SIZE: ChipSize = 'md';\nconst DEFAULT_CHIP_VARIANT: ChipVariant = 'primary';\nconst DEFAULT_MAX_WIDTH = 200;\nconst DEFAULT_TOGGLE_STATE = 'off';\n\nconst ChipBase = memo(function ChipBase({\n  kind,\n  toggleState = DEFAULT_TOGGLE_STATE,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  minWidth,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  startIcon,\n  endIcon,\n  endContent,\n  disabled = false,\n  pressable = false,\n  maxFontSizeMultiplier,\n  onPress,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  style,\n  ref,\n  ...viewProps\n}: ChipBaseProps) {\n  const { theme } = useUnistyles();\n  const [pressed, setPressed] = useState(false);\n  const interactionState: ChipInteractionState = pressed ? 'pressed' : 'rest';\n\n  // One capped factor governs the label, icons, and the chip's fixed height.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const rootLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'root',\n        interactionState,\n      ) as ViewStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const textLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'rootText',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    (typeof textLayerStyle.lineHeight === 'number' ? textLayerStyle.lineHeight : undefined) ??\n      (typeof textLayerStyle.fontSize === 'number' ? textLayerStyle.fontSize : undefined),\n  );\n\n  const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n    // The chip's fixed height grows with its capped content; the default max\n    // width grows too so capped labels don't truncate earlier than today. An\n    // explicit maxWidth/minWidth from the consumer is respected as-is.\n    const scaledLayer =\n      fontScaleFactor !== 1 && typeof rootLayerStyle.height === 'number'\n        ? { height: Math.round(rootLayerStyle.height * fontScaleFactor) }\n        : undefined;\n    const resolvedMaxWidth =\n      maxWidth === DEFAULT_MAX_WIDTH ? Math.round(maxWidth * fontScaleFactor) : maxWidth;\n\n    return [\n      chipStaticStyles.root,\n      rootLayerStyle,\n      scaledLayer,\n      minWidth === undefined ? undefined : { minWidth },\n      resolvedMaxWidth === undefined ? undefined : { maxWidth: resolvedMaxWidth },\n      disabled ? chipStaticStyles.disabled : undefined,\n      style,\n    ];\n  }, [disabled, fontScaleFactor, maxWidth, minWidth, rootLayerStyle, style]);\n\n  const textStyle = useMemo<StyleProp<TextStyle>>(\n    () => [chipStaticStyles.text, textLayerStyle],\n    [textLayerStyle],\n  );\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'icon',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n\n  const content = (\n    <>\n      {startIcon ? (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={iconStyle}\n        />\n      ) : null}\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={textStyle}\n      >\n        {children}\n      </Text>\n      {endContent ??\n        (endIcon ? (\n          <IconSlot\n            icon={endIcon}\n            variant=\"fill\"\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={iconStyle}\n          />\n        ) : null)}\n    </>\n  );\n\n  if (pressable) {\n    return (\n      <Pressable\n        ref={ref}\n        accessibilityRole={accessibilityRole}\n        accessibilityState={{ disabled, ...accessibilityState }}\n        disabled={disabled}\n        onPress={disabled ? undefined : onPress}\n        onPressIn={() => setPressed(true)}\n        onPressOut={() => setPressed(false)}\n        {...viewProps}\n        style={rootStyle}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      ref={ref}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ disabled, ...accessibilityState }}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {content}\n    </View>\n  );\n});\n\nChipBase.displayName = 'ChipBase';\n\nconst chipStaticStyles = StyleSheet.create({\n  disabled: {\n    opacity: 0.5,\n  },\n  root: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  },\n  text: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n});\n\nexport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT, DEFAULT_MAX_WIDTH };\n"],"mappings":"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"}
+{"version":3,"file":"ChipBase.js","names":["Text"],"sources":["../../../src/components/Chip/ChipBase.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable, StyleSheet, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- chip toggle styles need variant + active token lookups\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { IconSlot } from '../IconSlot';\nimport { Text } from '../Text';\nimport { getMergedChipLayerStyle } from './chipTheme';\nimport type { ChipBaseProps, ChipInteractionState, ChipSize, ChipVariant } from './types';\n\nconst DEFAULT_CHIP_SIZE: ChipSize = 'md';\nconst DEFAULT_CHIP_VARIANT: ChipVariant = 'primary';\nconst DEFAULT_MAX_WIDTH = 200;\nconst DEFAULT_TOGGLE_STATE = 'off';\n\nconst ChipBase = memo(function ChipBase({\n  kind,\n  toggleState = DEFAULT_TOGGLE_STATE,\n  variant = DEFAULT_CHIP_VARIANT,\n  size = DEFAULT_CHIP_SIZE,\n  minWidth,\n  maxWidth = DEFAULT_MAX_WIDTH,\n  startIcon,\n  endIcon,\n  endContent,\n  disabled = false,\n  pressable = false,\n  maxFontSizeMultiplier,\n  onPress,\n  accessibilityRole,\n  accessibilityState,\n  children,\n  style,\n  ref,\n  ...viewProps\n}: ChipBaseProps) {\n  const { theme } = useUnistyles();\n  const [pressed, setPressed] = useState(false);\n  const interactionState: ChipInteractionState = pressed ? 'pressed' : 'rest';\n\n  // One capped factor governs the label, icons, and the chip's fixed height.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const rootLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'root',\n        interactionState,\n      ) as ViewStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const textLayerStyle = useMemo(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'rootText',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\n    (typeof textLayerStyle.lineHeight === 'number' ? textLayerStyle.lineHeight : undefined) ??\n      (typeof textLayerStyle.fontSize === 'number' ? textLayerStyle.fontSize : undefined),\n  );\n\n  const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n    // The chip's fixed height grows with its capped content; the default max\n    // width grows too so capped labels don't truncate earlier than today. An\n    // explicit maxWidth/minWidth from the consumer is respected as-is.\n    const scaledLayer =\n      fontScaleFactor !== 1 && typeof rootLayerStyle.height === 'number'\n        ? { height: Math.round(rootLayerStyle.height * fontScaleFactor) }\n        : undefined;\n    const resolvedMaxWidth =\n      maxWidth === DEFAULT_MAX_WIDTH ? Math.round(maxWidth * fontScaleFactor) : maxWidth;\n\n    return [\n      chipStaticStyles.root,\n      rootLayerStyle,\n      scaledLayer,\n      minWidth === undefined ? undefined : { minWidth },\n      resolvedMaxWidth === undefined ? undefined : { maxWidth: resolvedMaxWidth },\n      disabled ? chipStaticStyles.disabled : undefined,\n      style,\n    ];\n  }, [disabled, fontScaleFactor, maxWidth, minWidth, rootLayerStyle, style]);\n\n  const textStyle = useMemo<StyleProp<TextStyle>>(\n    () => [chipStaticStyles.text, textLayerStyle],\n    [textLayerStyle],\n  );\n\n  const iconStyle = useMemo<StyleProp<TextStyle>>(\n    () =>\n      getMergedChipLayerStyle(\n        theme,\n        kind,\n        variant,\n        size,\n        toggleState,\n        'icon',\n        interactionState,\n      ) as TextStyle,\n    [interactionState, kind, size, theme, toggleState, variant],\n  );\n\n  const content = (\n    <>\n      {startIcon ? (\n        <IconSlot\n          icon={startIcon}\n          variant=\"fill\"\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={iconStyle}\n        />\n      ) : null}\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={textStyle}\n      >\n        {children}\n      </Text>\n      {endContent ??\n        (endIcon ? (\n          <IconSlot\n            icon={endIcon}\n            variant=\"fill\"\n            maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n            style={iconStyle}\n          />\n        ) : null)}\n    </>\n  );\n\n  if (pressable) {\n    return (\n      <Pressable\n        ref={ref}\n        accessibilityRole={accessibilityRole}\n        accessibilityState={{ disabled, ...accessibilityState }}\n        disabled={disabled}\n        onPress={disabled ? undefined : onPress}\n        onPressIn={() => setPressed(true)}\n        onPressOut={() => setPressed(false)}\n        {...viewProps}\n        style={rootStyle}\n      >\n        {content}\n      </Pressable>\n    );\n  }\n\n  return (\n    <View\n      ref={ref}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={{ disabled, ...accessibilityState }}\n      {...viewProps}\n      style={rootStyle}\n    >\n      {content}\n    </View>\n  );\n});\n\nChipBase.displayName = 'ChipBase';\n\nconst chipStaticStyles = StyleSheet.create({\n  disabled: {\n    opacity: 0.5,\n  },\n  root: {\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    flexDirection: 'row',\n    overflow: 'hidden',\n  },\n  text: {\n    flexShrink: 1,\n    textAlign: 'center',\n  },\n});\n\nexport { ChipBase, DEFAULT_CHIP_SIZE, DEFAULT_CHIP_VARIANT, DEFAULT_MAX_WIDTH };\n"],"mappings":"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"}

package/dist/components/Icon.cjs

@@ -115,12 +115,12 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, siz
 				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(pixelSize)
 			},
 			generated_styles.styles.foundation,
-			style,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
 				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(dangerouslySetSize)
-			} : void 0
+			} : void 0,
+			style
 		], [
 			dangerouslySetColor,
 			dangerouslySetSize,

package/dist/components/Icon.js

@@ -113,12 +113,12 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 				lineHeight: getSafeIconCell(pixelSize)
 			},
 			styles.foundation,
-			style,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
 				lineHeight: getSafeIconCell(dangerouslySetSize)
-			} : void 0
+			} : void 0,
+			style
 		], [
 			dangerouslySetColor,
 			dangerouslySetSize,

package/dist/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  /**\n   * Caps how far the icon grows with the OS text-size setting. Applies to both\n   * font glyphs and multicolor SVGs. Set null to remove the cap; override\n   * app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  allowFontScaling = true,\n  accessible,\n  accessibilityElementsHidden,\n  accessibilityHint,\n  accessibilityLabel = name,\n  accessibilityRole = 'image',\n  accessibilityState,\n  accessibilityValue,\n  importantForAccessibility,\n  testID,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const baseSize = dangerouslySetSize ?? pixelSize;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const fontScaleFactor = useFontScale(\n    allowFontScaling ? resolvedMaxFontSizeMultiplier : 1,\n    baseSize,\n  );\n  const renderedSize = Math.round(baseSize * fontScaleFactor);\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View\n      accessible={accessible}\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityHint={accessibilityHint}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      accessibilityValue={accessibilityValue}\n      importantForAccessibility={importantForAccessibility}\n      testID={testID}\n      style={styles.foundation as ViewProps['style']}\n    >\n      <SvgXml\n        xml={svgContent}\n        width={renderedSize}\n        height={renderedSize}\n        viewBox={`0 0 ${pixelSize} ${pixelSize}`}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Native scales fontSize and lineHeight together under the cap, so the\n  // glyph cell grows proportionally; glyph selection stays at pixelSize.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n        fontSize: pixelSize,\n        lineHeight: getSafeIconCell(pixelSize),\n      },\n      styles.foundation,\n      style,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: getSafeIconCell(dangerouslySetSize),\n          }\n        : undefined,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":"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"}
+{"version":3,"file":"Icon.js","names":[],"sources":["../../src/components/Icon.tsx"],"sourcesContent":["import type { GlyphName } from '@yahoo/uds-icons/glyphMap';\nimport { glyphMap, glyphNames } from '@yahoo/uds-icons/glyphMap';\nimport type { SvgGlyphKey, SvgGlyphName } from '@yahoo/uds-icons/svgMap';\nimport { svgGlyphNames, svgMap } from '@yahoo/uds-icons/svgMap';\nimport { ICON_SIZE_MAP } from '@yahoo/uds-icons/tokens';\nimport type { IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type {\n  StyleProp,\n  Text as RNText,\n  TextProps as RNTextProps,\n  TextStyle,\n  ViewProps,\n} from 'react-native';\nimport { Text, View } from 'react-native';\nimport { SvgXml } from 'react-native-svg';\n// eslint-disable-next-line uds/no-use-unistyles\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { getSafeIconCell } from './Button/buttonTheme';\n\nconst DEFAULT_PROPS = {\n  size: 'md',\n  color: 'primary',\n  variant: 'outline',\n  flexShrink: '0',\n} as const;\n\n/* -------------------------------------------------------------------------- */\n/*                                Icon Props                                   */\n/* -------------------------------------------------------------------------- */\n\ntype IconName = GlyphName | SvgGlyphName;\n\ninterface IconProps extends Omit<RNTextProps, 'style'> {\n  /** Ref to the underlying Text element */\n  ref?: Ref<RNText>;\n  /** The icon name */\n  name: IconName;\n  /** Icon size */\n  size?: IconSize;\n  /** Icon color */\n  color?: StyleProps['color'];\n  /** Icon variant (outline, fill, multicolor) */\n  variant?: IconVariant;\n  /**\n   * Caps how far the icon grows with the OS text-size setting. Applies to both\n   * font glyphs and multicolor SVGs. Set null to remove the cap; override\n   * app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  // Background\n  backgroundColor?: StyleProps['backgroundColor'];\n  // Border\n  borderRadius?: StyleProps['borderRadius'];\n  borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n  borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n  borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n  borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n  borderColor?: StyleProps['borderColor'];\n  borderStartColor?: StyleProps['borderStartColor'];\n  borderEndColor?: StyleProps['borderEndColor'];\n  borderTopColor?: StyleProps['borderTopColor'];\n  borderBottomColor?: StyleProps['borderBottomColor'];\n  borderWidth?: StyleProps['borderWidth'];\n  borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n  borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n  borderStartWidth?: StyleProps['borderStartWidth'];\n  borderEndWidth?: StyleProps['borderEndWidth'];\n  borderTopWidth?: StyleProps['borderTopWidth'];\n  borderBottomWidth?: StyleProps['borderBottomWidth'];\n  // Flex\n  flexShrink?: StyleProps['flexShrink'];\n  // Spacing\n  spacingStart?: StyleProps['spacingStart'];\n  spacingEnd?: StyleProps['spacingEnd'];\n  spacingTop?: StyleProps['spacingTop'];\n  spacingBottom?: StyleProps['spacingBottom'];\n  spacingHorizontal?: StyleProps['spacingHorizontal'];\n  spacingVertical?: StyleProps['spacingVertical'];\n  spacing?: StyleProps['spacing'];\n  // Offset\n  offsetStart?: StyleProps['offsetStart'];\n  offsetEnd?: StyleProps['offsetEnd'];\n  offsetTop?: StyleProps['offsetTop'];\n  offsetBottom?: StyleProps['offsetBottom'];\n  offsetHorizontal?: StyleProps['offsetHorizontal'];\n  offsetVertical?: StyleProps['offsetVertical'];\n  offset?: StyleProps['offset'];\n  /** Icon color override */\n  dangerouslySetColor?: string;\n  /** Icon font size override */\n  dangerouslySetSize?: number;\n  /** Optional style override */\n  style?: StyleProp<TextStyle>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Multicolor Icon                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Separate component for multicolor SVG icons.\n * Uses useUnistyles() for reactive theme access - isolated here so\n * glyph-based icons don't pay the hook overhead.\n */\nconst MulticolorIcon = memo(function MulticolorIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  flexShrink = DEFAULT_PROPS.flexShrink,\n  backgroundColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  allowFontScaling = true,\n  accessible,\n  accessibilityElementsHidden,\n  accessibilityHint,\n  accessibilityLabel = name,\n  accessibilityRole = 'image',\n  accessibilityState,\n  accessibilityValue,\n  importantForAccessibility,\n  testID,\n}: Omit<IconProps, 'variant'>) {\n  // Reactive theme subscription - only multicolor icons need this\n  const { rt } = useUnistyles();\n  const colorScheme = rt.themeName === 'dark' ? 'dark' : 'light';\n\n  const pixelSize = ICON_SIZE_MAP[size];\n  const baseSize = dangerouslySetSize ?? pixelSize;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const fontScaleFactor = useFontScale(\n    allowFontScaling ? resolvedMaxFontSizeMultiplier : 1,\n    baseSize,\n  );\n  const renderedSize = Math.round(baseSize * fontScaleFactor);\n  const svgKey = `${name}-${colorScheme}-${pixelSize}` as SvgGlyphKey;\n  const svgContent = svgMap[svgKey];\n\n  if (!svgContent) {\n    console.warn(`Multicolor icon \"${svgKey}\" not found`);\n    return null;\n  }\n\n  styles.useVariants({\n    flexShrink,\n    backgroundColor,\n  });\n\n  return (\n    <View\n      accessible={accessible}\n      accessibilityElementsHidden={accessibilityElementsHidden}\n      accessibilityHint={accessibilityHint}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityRole={accessibilityRole}\n      accessibilityState={accessibilityState}\n      accessibilityValue={accessibilityValue}\n      importantForAccessibility={importantForAccessibility}\n      testID={testID}\n      style={styles.foundation as ViewProps['style']}\n    >\n      <SvgXml\n        xml={svgContent}\n        width={renderedSize}\n        height={renderedSize}\n        viewBox={`0 0 ${pixelSize} ${pixelSize}`}\n      />\n    </View>\n  );\n});\n\nconst OutlineOrFillIcon = memo(function OutlineOrFillIcon({\n  name,\n  size = DEFAULT_PROPS.size,\n  color = DEFAULT_PROPS.color,\n  variant = DEFAULT_PROPS.variant,\n  // Background\n  backgroundColor,\n  // Border\n  borderRadius,\n  borderTopStartRadius,\n  borderTopEndRadius,\n  borderBottomStartRadius,\n  borderBottomEndRadius,\n  borderColor,\n  borderStartColor,\n  borderEndColor,\n  borderTopColor,\n  borderBottomColor,\n  borderWidth,\n  borderVerticalWidth,\n  borderHorizontalWidth,\n  borderStartWidth,\n  borderEndWidth,\n  borderTopWidth,\n  borderBottomWidth,\n  // Flex\n  flexShrink = '0',\n  // Spacing\n  spacingStart,\n  spacingEnd,\n  spacingTop,\n  spacingBottom,\n  spacingHorizontal,\n  spacingVertical,\n  spacing,\n  // Offset\n  offsetStart,\n  offsetEnd,\n  offsetTop,\n  offsetBottom,\n  offsetHorizontal,\n  offsetVertical,\n  offset,\n  // Dangerously set props\n  dangerouslySetColor,\n  dangerouslySetSize,\n  maxFontSizeMultiplier,\n  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\n  // Native scales fontSize and lineHeight together under the cap, so the\n  // glyph cell grows proportionally; glyph selection stays at pixelSize.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  // Glyph-based icons - no useUnistyles needed, styles.useVariants is reactive\n  styles.useVariants({\n    color,\n    backgroundColor,\n    // Border\n    borderRadius,\n    borderTopStartRadius,\n    borderTopEndRadius,\n    borderBottomStartRadius,\n    borderBottomEndRadius,\n    borderColor,\n    borderStartColor,\n    borderEndColor,\n    borderTopColor,\n    borderBottomColor,\n    borderWidth,\n    borderVerticalWidth,\n    borderHorizontalWidth,\n    borderStartWidth,\n    borderEndWidth,\n    borderTopWidth,\n    borderBottomWidth,\n    // Flex\n    flexShrink,\n    // Spacing\n    spacingStart,\n    spacingEnd,\n    spacingTop,\n    spacingBottom,\n    spacingHorizontal,\n    spacingVertical,\n    spacing,\n    // Offset\n    offsetStart,\n    offsetEnd,\n    offsetTop,\n    offsetBottom,\n    offsetHorizontal,\n    offsetVertical,\n    offset,\n  });\n  const glyphName = `${name}-${variant}-${pixelSize}`;\n  const glyph = (glyphMap as Record<string, string>)[glyphName];\n  const textStyles: StyleProp<TextStyle> = useMemo(\n    () => [\n      {\n        fontFamily: 'uds-icons',\n        textAlign: 'center',\n        textAlignVertical: 'center',\n        fontSize: pixelSize,\n        lineHeight: getSafeIconCell(pixelSize),\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: getSafeIconCell(dangerouslySetSize),\n          }\n        : undefined,\n      style,\n    ],\n    [dangerouslySetColor, dangerouslySetSize, style, styles.foundation, pixelSize],\n  );\n\n  return (\n    <Text\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={name}\n      style={textStyles}\n      maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts and multicolor SVGs**\n *\n * @description\n * Renders icons from the UDS icon library. Supports multiple variants\n * (outline, fill, multicolor) and sizes.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Icon } from '@yahoo/uds-mobile/Icon';\n *\n * <Icon name=\"ChevronRight\" size=\"md\" color=\"primary\" />\n * <Icon name=\"Star\" variant=\"fill\" color=\"accent\" />\n * <Icon name=\"Yahoo\" variant=\"multicolor\" />\n * ```\n *\n * @usage\n * - Use name prop to specify the icon\n * - Use variant prop for outline/fill/multicolor\n * - Use size prop for icon size (xs, sm, md, lg, xl)\n *\n * @accessibility\n * - Sets `accessibilityRole=\"image\"` automatically\n * - Icon name is used as accessibility label\n * - For decorative icons, set `accessibilityElementsHidden`\n *\n * @see {@link IconButton} for clickable icons\n * @see {@link IconSlot} for flexible icon rendering in components\n */\nconst Icon = memo(function Icon({ variant, ...props }: IconProps) {\n  // Delegate to MulticolorIcon for SVG-based icons (has its own useUnistyles)\n  if (variant === 'multicolor') {\n    return <MulticolorIcon {...props} />;\n  }\n\n  return <OutlineOrFillIcon variant={variant} {...props} />;\n});\n\nIcon.displayName = 'Icon';\n\nexport { Icon };\nexport type { IconName, IconProps };\nexport const iconNames = glyphNames;\nexport const multicolorIconNames = svgGlyphNames;\n"],"mappings":"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"}

package/dist/components/IconButton.cjs

@@ -3,6 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../motion-tokens/dist/index.cjs");
 const require_motion = require("../motion.cjs");
+const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 const require_components_Icon = require("./Icon.cjs");
 const require_components_Pressable = require("./Pressable.cjs");
@@ -56,12 +58,22 @@ function interpolateShadowAlpha(shadow, alpha) {
 * @see {@link Button} for buttons with text labels
 * @see {@link Icon} for non-interactive icons
 */
-const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const IconButton = (0, react.memo)(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const shouldAnimateVariantColors = react_native.Platform.OS !== "web";
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
-	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonControlMetrics(theme, size), [theme, size]);
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
+	const [pressed, setPressed] = (0, react.useState)(false);
+	const resolvedIconButtonStyles = generated_styles.iconButtonStyles.useVariants({ size }) ?? generated_styles.iconButtonStyles;
+	const iconBaseSize = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonIconSize(theme, size), [theme, size]);
+	const iconScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, iconBaseSize);
+	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonControlMetrics(theme, size, iconScaleFactor), [
+		theme,
+		size,
+		iconScaleFactor
+	]);
+	const scaledIconSize = Math.round(iconBaseSize * iconScaleFactor);
 	const controlDimensions = hasExplicitHeight ? {
 		height: "auto",
 		width: "auto",
@@ -72,8 +84,6 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		minHeight,
 		paddingVertical
 	};
-	const [pressed, setPressed] = (0, react.useState)(false);
-	const resolvedIconButtonStyles = generated_styles.iconButtonStyles.useVariants({ size }) ?? generated_styles.iconButtonStyles;
 	const resolvedButtonStyles = generated_styles.buttonStyles.useVariants({
 		variant,
 		disabled: isDisabled,
@@ -151,7 +161,7 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ActivityIndicator, {
-			size: resolvedIconButtonStyles.icon.fontSize,
+			size: scaledIconSize,
 			color: resolvedIconColor ?? resolvedButtonStyles.icon.color
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 			name,
@@ -161,7 +171,8 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 				resolvedButtonStyles.icon,
 				{ lineHeight: iconCellHeight }
 			],
-			dangerouslySetColor: resolvedIconColor
+			dangerouslySetColor: resolvedIconColor,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier
 		})
 	});
 });

package/dist/components/IconButton.d.cts

@@ -26,6 +26,12 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
    * @default false
    */
   disableEffects?: boolean;
+  /**
+   * Caps how far the icon and control grow with the OS text-size setting.
+   * Set null to remove the cap; override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Ref to the underlying View */
   ref?: Ref<View>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAoDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"IconButton.d.cts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAsDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAaM;;;;EARN,cAAA;EAjBqC;;;;;EAuBrC,qBAAA;EAjBO;EAmBP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/IconButton.d.ts

@@ -26,6 +26,12 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
    * @default false
    */
   disableEffects?: boolean;
+  /**
+   * Caps how far the icon and control grow with the OS text-size setting.
+   * Set null to remove the cap; override app-wide via UDSFontScalingProvider.
+   * @default 2
+   */
+  maxFontSizeMultiplier?: number | null;
   /** Ref to the underlying View */
   ref?: Ref<View>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAoDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAOM;;;;EAFN,cAAA;EAjBqC;EAmBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"IconButton.d.ts","names":[],"sources":["../../src/components/IconButton.tsx"],"mappings":";;;;;;;;;;UAsDU,eAAA,SAAwB,IAAA,CAAK,gBAAA;;EAErC,IAAA,EAAM,QAAA;EAFE;EAIR,OAAA,GAAU,iBAAA;;EAEV,IAAA,GAAO,cAAA;EAJD;EAMN,WAAA,GAAc,WAAA;EAFP;EAIP,SAAA,GAAY,UAAA;EAAA;EAEZ,OAAA;EAaM;;;;EARN,cAAA;EAjBqC;;;;;EAuBrC,qBAAA;EAjBO;EAmBP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;;cAwCV,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/IconButton.js

@@ -1,7 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
 import { BUTTON_SPRING_CONFIG } from "../motion.js";
-import { getIconButtonControlMetrics } from "./Button/buttonTheme.js";
+import { useFontScale } from "../fontScaling/useFontScale.js";
+import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
+import { getIconButtonControlMetrics, getIconButtonIconSize } from "./Button/buttonTheme.js";
 import { Icon } from "./Icon.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { memo, useCallback, useMemo, useState } from "react";
@@ -54,12 +56,22 @@ function interpolateShadowAlpha(shadow, alpha) {
 * @see {@link Button} for buttons with text labels
 * @see {@link Icon} for non-interactive icons
 */
-const IconButton = memo(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, onPressIn, onPressOut, ref, ...props }) {
+const IconButton = memo(function IconButton({ name, variant = "primary", size = "md", iconVariant = "outline", iconColor, loading, disabled, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const isDisabled = disabled || loading;
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const shouldAnimateVariantColors = Platform.OS !== "web";
 	const { theme } = useUnistyles();
-	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
+	const [pressed, setPressed] = useState(false);
+	const resolvedIconButtonStyles = iconButtonStyles.useVariants({ size }) ?? iconButtonStyles;
+	const iconBaseSize = useMemo(() => getIconButtonIconSize(theme, size), [theme, size]);
+	const iconScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, iconBaseSize);
+	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = useMemo(() => getIconButtonControlMetrics(theme, size, iconScaleFactor), [
+		theme,
+		size,
+		iconScaleFactor
+	]);
+	const scaledIconSize = Math.round(iconBaseSize * iconScaleFactor);
 	const controlDimensions = hasExplicitHeight ? {
 		height: "auto",
 		width: "auto",
@@ -70,8 +82,6 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		minHeight,
 		paddingVertical
 	};
-	const [pressed, setPressed] = useState(false);
-	const resolvedIconButtonStyles = iconButtonStyles.useVariants({ size }) ?? iconButtonStyles;
 	const resolvedButtonStyles = buttonStyles.useVariants({
 		variant,
 		disabled: isDisabled,
@@ -149,7 +159,7 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		],
 		...props,
 		children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, {
-			size: resolvedIconButtonStyles.icon.fontSize,
+			size: scaledIconSize,
 			color: resolvedIconColor ?? resolvedButtonStyles.icon.color
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name,
@@ -159,7 +169,8 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 				resolvedButtonStyles.icon,
 				{ lineHeight: iconCellHeight }
 			],
-			dangerouslySetColor: resolvedIconColor
+			dangerouslySetColor: resolvedIconColor,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier
 		})
 	});
 });

package/dist/components/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator, Platform } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- iconbutton control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getIconButtonControlMetrics } from './Button/buttonTheme';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile/IconButton';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  iconColor,\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n  const shouldAnimateVariantColors = Platform.OS !== 'web';\n\n  const { theme } = useUnistyles();\n  const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = useMemo(\n    () => getIconButtonControlMetrics(theme, size),\n    [theme, size],\n  );\n  // Explicit token height (match-button-height) becomes a minimum with redistributed\n  // padding so the safe icon cell fits and font scaling can grow the control.\n  const controlDimensions = hasExplicitHeight\n    ? ({\n        height: 'auto',\n        width: 'auto',\n        minHeight,\n        minWidth: minHeight,\n        paddingVertical,\n      } as const)\n    : ({ minHeight, paddingVertical } as const);\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // On web, useVariants returns the resolved style object instead of mutating\n  // the generated styles in place.\n  const variantIconButtonStyles = iconButtonStyles.useVariants({ size }) as unknown as\n    typeof iconButtonStyles | undefined;\n  const resolvedIconButtonStyles = variantIconButtonStyles ?? iconButtonStyles;\n\n  const variantButtonStyles = buttonStyles.useVariants({\n    variant,\n    disabled: isDisabled,\n    pressed,\n  }) as unknown as typeof buttonStyles | undefined;\n  const resolvedButtonStyles = variantButtonStyles ?? buttonStyles;\n\n  const variantFoundationStyles = foundationStyles.useVariants({ color: iconColor }) as unknown as\n    typeof foundationStyles | undefined;\n  const resolvedFoundationStyles = variantFoundationStyles ?? foundationStyles;\n\n  const resolvedIconColor = iconColor\n    ? (resolvedFoundationStyles.foundation.color as string | undefined)\n    : undefined;\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(resolvedButtonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(resolvedButtonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      string | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      // On web, Unistyles already emits the resolved variant color class. The\n      // animated variant color hook can resolve to the black fallback there.\n      ...(shouldAnimateVariantColors && {\n        backgroundColor: withTiming(backgroundColor.value, {\n          duration: 220,\n          easing: Easing.bezier(0, 0, 0.2, 1),\n        }),\n        borderColor: withTiming(borderColor.value, {\n          duration: 220,\n          easing: Easing.bezier(0, 0, 0.2, 1),\n        }),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        resolvedIconButtonStyles.root,\n        resolvedButtonStyles.root,\n        controlDimensions,\n        resolvedFoundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={resolvedIconButtonStyles.icon.fontSize}\n          color={resolvedIconColor ?? resolvedButtonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[\n            resolvedIconButtonStyles.icon,\n            resolvedButtonStyles.icon,\n            { lineHeight: iconCellHeight },\n          ]}\n          dangerouslySetColor={resolvedIconColor}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}
+{"version":3,"file":"IconButton.js","names":["foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator, Platform } from 'react-native';\nimport {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- iconbutton control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getIconButtonControlMetrics, getIconButtonIconSize } from './Button/buttonTheme';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\nfunction interpolateShadowAlpha(shadow: string | undefined, alpha: number): string {\n  'worklet';\n  if (!shadow) {\n    return '';\n  }\n  if (alpha >= 1) {\n    return shadow;\n  }\n  if (alpha <= 0) {\n    return '';\n  }\n\n  return shadow.replace(/rgba\\(([^,]+),\\s*([^,]+),\\s*([^,]+),\\s*([^)]+)\\)/g, (_, r, g, b, a) => {\n    const newAlpha = parseFloat(a) * alpha;\n    return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n  });\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Props                                 */\n/* -------------------------------------------------------------------------- */\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n  /** Icon to render from the icons package */\n  name: IconName;\n  /** The visual style variant @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: IconButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Override the icon color token without changing the button variant tokens */\n  iconColor?: StyleProps['color'];\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /**\n   * Disable motion effects (scale on press, icon animations)\n   * @default false\n   */\n  disableEffects?: boolean;\n  /**\n   * Caps how far the icon and control grow with the OS text-size setting.\n   * Set null to remove the cap; override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            IconButton Component                             */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **An icon button element that can be used to trigger an action**\n *\n * @description\n * An icon-only button for actions where space is limited. Features animated\n * scale effect on press and smooth color transitions matching the web UDS\n * IconButton behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile/IconButton';\n *\n * <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n *\n * @usage\n * - Use for toolbar actions\n * - Use for closing modals/dialogs\n * - Always provide accessibilityLabel for screen readers\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - **Always** provide `accessibilityLabel` since there's no visible text\n *\n * @see {@link Button} for buttons with text labels\n * @see {@link Icon} for non-interactive icons\n */\nconst IconButton = memo(function IconButton({\n  name,\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  iconColor,\n  loading,\n  disabled,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  maxFontSizeMultiplier,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: IconButtonProps) {\n  const isDisabled = disabled || loading;\n  const shouldAnimate = !disableEffects && !isDisabled;\n  const shouldAnimateVariantColors = Platform.OS !== 'web';\n\n  const { theme } = useUnistyles();\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  // On web, useVariants returns the resolved style object instead of mutating\n  // the generated styles in place.\n  const variantIconButtonStyles = iconButtonStyles.useVariants({ size }) as unknown as\n    typeof iconButtonStyles | undefined;\n  const resolvedIconButtonStyles = variantIconButtonStyles ?? iconButtonStyles;\n\n  const iconBaseSize = useMemo(() => getIconButtonIconSize(theme, size), [theme, size]);\n  const iconScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, iconBaseSize);\n  const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = useMemo(\n    () => getIconButtonControlMetrics(theme, size, iconScaleFactor),\n    [theme, size, iconScaleFactor],\n  );\n  const scaledIconSize = Math.round(iconBaseSize * iconScaleFactor);\n  // Explicit token height (match-button-height) becomes a minimum with redistributed\n  // padding so the safe icon cell fits and font scaling can grow the control.\n  const controlDimensions = hasExplicitHeight\n    ? ({\n        height: 'auto',\n        width: 'auto',\n        minHeight,\n        minWidth: minHeight,\n        paddingVertical,\n      } as const)\n    : ({ minHeight, paddingVertical } as const);\n\n  const variantButtonStyles = buttonStyles.useVariants({\n    variant,\n    disabled: isDisabled,\n    pressed,\n  }) as unknown as typeof buttonStyles | undefined;\n  const resolvedButtonStyles = variantButtonStyles ?? buttonStyles;\n\n  const variantFoundationStyles = foundationStyles.useVariants({ color: iconColor }) as unknown as\n    typeof foundationStyles | undefined;\n  const resolvedFoundationStyles = variantFoundationStyles ?? foundationStyles;\n\n  const resolvedIconColor = iconColor\n    ? (resolvedFoundationStyles.foundation.color as string | undefined)\n    : undefined;\n\n  // Animate colors using Unistyles' useAnimatedVariantColor\n  const backgroundColor = useAnimatedVariantColor(resolvedButtonStyles.root, 'backgroundColor');\n  const borderColor = useAnimatedVariantColor(resolvedButtonStyles.root, 'borderColor');\n\n  // Get animated theme for boxShadow\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n    (event) => {\n      setPressed(true);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n      }\n      onPressIn?.(event);\n    },\n    [shouldAnimate, scale, onPressIn],\n  );\n\n  const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n    (event) => {\n      setPressed(false);\n      if (shouldAnimate) {\n        scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n      }\n      onPressOut?.(event);\n    },\n    [shouldAnimate, scale, onPressOut],\n  );\n\n  const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow\n  const pressProgress = useDerivedValue(\n    () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n    [pressed],\n  );\n\n  // Animate using Unistyles' variant color system + boxShadow from theme\n  const animatedRootStyle = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components as unknown as Record<\n      string,\n      Record<string, unknown>\n    >;\n    const shadowPressed = components[`button/variant/${variant}/root/pressed`]?.boxShadow as\n      string | undefined;\n\n    return {\n      transform: [{ scale: scale.value }],\n      // On web, Unistyles already emits the resolved variant color class. The\n      // animated variant color hook can resolve to the black fallback there.\n      ...(shouldAnimateVariantColors && {\n        backgroundColor: withTiming(backgroundColor.value, {\n          duration: 220,\n          easing: Easing.bezier(0, 0, 0.2, 1),\n        }),\n        borderColor: withTiming(borderColor.value, {\n          duration: 220,\n          easing: Easing.bezier(0, 0, 0.2, 1),\n        }),\n      }),\n      // Only animate shadow if the theme defines one for this variant\n      ...(shadowPressed && {\n        boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n      }),\n    };\n  });\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={isDisabled}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      overflow=\"hidden\"\n      accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n      accessibilityRole=\"button\"\n      accessibilityState={a11yState}\n      style={[\n        resolvedIconButtonStyles.root,\n        resolvedButtonStyles.root,\n        controlDimensions,\n        resolvedFoundationStyles.foundation,\n        animatedRootStyle,\n        typeof style === 'function' ? style({ pressed }) : style,\n      ]}\n      {...props}\n    >\n      {loading ? (\n        <ActivityIndicator\n          size={scaledIconSize}\n          color={resolvedIconColor ?? resolvedButtonStyles.icon.color}\n        />\n      ) : (\n        <Icon\n          name={name}\n          variant={iconVariant}\n          style={[\n            resolvedIconButtonStyles.icon,\n            resolvedButtonStyles.icon,\n            { lineHeight: iconCellHeight },\n          ]}\n          dangerouslySetColor={resolvedIconColor}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        />\n      )}\n    </AnimatedPressable>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":"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"}

package/dist/components/Input.cjs

@@ -51,7 +51,7 @@ let lodash_es = require("lodash-es");
 */
 const Input = (0, react.memo)(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, maxFontSizeMultiplier, ref, ...textInputProps }) {
 	const uid = `uds-input-${(0, react.useId)()}`;
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ?? "");
 	const [isFocused, setIsFocused] = (0, react.useState)(false);
 	const isControlled = controlledValue !== void 0;

package/dist/components/Input.js

@@ -49,7 +49,7 @@ import { isFunction } from "lodash-es";
 */
 const Input = memo(function Input({ label, size = "md", startIcon, endIcon, helpText, helperTextIcon, hasError, disabled, readOnly, required, width = "100%", defaultValue, value: controlledValue, onChangeText, onFocus, onBlur, placeholder, placeholderTextColor, maxFontSizeMultiplier, ref, ...textInputProps }) {
 	const uid = `uds-input-${useId()}`;
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 	const [isFocused, setIsFocused] = useState(false);
 	const isControlled = controlledValue !== void 0;

package/dist/components/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { InputHelpText } from './InputHelpText';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n  /**\n   * Caps the field text, labels, icons, and geometry at the control scale.\n   * Set null to remove the cap. @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile/Input';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  maxFontSizeMultiplier,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\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  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  // `inputWrapper` carries only background/border colors; the size-axis spacing\n  // (`inputWrapperStatic`) and border width/radius (`inputWrapperDynamic`) live\n  // on their own layers after the wrapper split. All three must be applied to\n  // the wrapper View — matching the web component, which drives the static and\n  // dynamic layers via separate variants — or the input loses its padding, gap,\n  // and border sizing.\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      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ];\n  }, [\n    fontScaleFactor,\n    inputStyles.inputWrapper,\n    inputStyles.inputWrapperStatic,\n    inputStyles.inputWrapperDynamic,\n  ]);\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(() => {\n    const inputHeight = inputStyles.input.height;\n    return [\n      inputStyles.input,\n      typeof inputHeight === 'number'\n        ? { height: Math.round(inputHeight * fontScaleFactor) }\n        : undefined,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ];\n  }, [fontScaleFactor, inputStyles.input]);\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\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 startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return (\n      <IconSlot\n        icon={startIcon}\n        variant=\"outline\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={inputStyles.startIcon}\n      />\n    );\n  }, [startIcon, resolvedMaxFontSizeMultiplier, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return (\n      <IconSlot\n        icon={endIcon}\n        variant=\"outline\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={inputStyles.endIcon}\n      />\n    );\n  }, [endIcon, resolvedMaxFontSizeMultiplier, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\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={isFocused}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [\n    disabled,\n    hasError,\n    helpText,\n    helperTextIcon,\n    isFocused,\n    readOnly,\n    resolvedMaxFontSizeMultiplier,\n    size,\n    valueState,\n  ]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAM,QAAQ,KAAK,SAAS,MAAM,EAEhC,OACA,OAAO,MACP,WACA,SACA,UACA,gBACA,UACA,UACA,UACA,UAEA,QAAQ,QAER,cACA,OAAO,iBACP,cACA,SACA,QACA,aACA,sBACA,uBACA,KACA,GAAG,kBACU;CAEb,MAAM,MAAM,aADQ,OACgB;CACpC,MAAM,gCACJ,yBAAyB,WAAW,sBAAsB,IAAI;CAGhE,MAAM,CAAC,eAAe,oBAAoB,SAAS,gBAAgB,GAAG;CACtE,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CAGjD,MAAM,eAAe,oBAAoB,KAAA;CACzC,MAAM,QAAQ,eAAe,kBAAkB;CAC/C,MAAM,aAAa,QAAQ,WAAW;CAGtC,MAAM,mBAAmB,aACtB,SAAiB;EAChB,IAAI,CAAC,cACH,iBAAiB,KAAK;EAExB,eAAe,KAAK;IAEtB,CAAC,cAAc,aAAa,CAC7B;CAED,MAAM,cAAc,aACjB,MAAM;EACL,aAAa,KAAK;EAClB,UAAU,EAAE;IAEd,CAAC,QAAQ,CACV;CAED,MAAM,aAAa,aAChB,MAAM;EACL,aAAa,MAAM;EACnB,SAAS,EAAE;IAEb,CAAC,OAAO,CACT;CAGD,YAAY,YAAY;EACtB;EACA,OAAO;EACP,SAAS;EACT,UAAU;EACV,SAAS;EACV,CAAC;CACF,MAAM,kBAAkB,aACtB,gCACC,OAAO,YAAY,mBAAmB,eAAe,WAClD,YAAY,mBAAmB,aAC/B,KAAA,OACD,OAAO,YAAY,mBAAmB,aAAa,WAChD,YAAY,mBAAmB,WAC/B,KAAA,GACP;CAGD,MAAM,2BAA2B,wBAAwB,YAAY,iBAAiB;CAEtF,MAAM,YAAY,cAAc,CAAC;EAAE;EAAO,SAAS,WAAW,KAAM;EAAG,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC;CAQ5F,MAAM,oBAAoB,cAAc;EACtC,MAAM,EAAE,KAAK,oBAAoB,YAAY;EAC7C,MAAM,gBACJ,oBAAoB,IAChB,KAAA,IACA;GACE,GAAI,OAAO,QAAQ,YAAY,EAAE,KAAK,KAAK,MAAM,MAAM,gBAAgB,EAAE;GACzE,GAAI,OAAO,oBAAoB,YAAY,EACzC,iBAAiB,KAAK,MAAM,kBAAkB,gBAAgB,EAC/D;GACF;EAEP,OAAO;GACL,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ;GACA;IAAE,eAAe;IAAgB,YAAY;IAAmB;GACjE;IACA;EACD;EACA,YAAY;EACZ,YAAY;EACZ,YAAY;EACb,CAAC;CAMF,MAAM,iBAAiB,cAAc;EACnC,MAAM,cAAc,YAAY,MAAM;EACtC,OAAO;GACL,YAAY;GACZ,OAAO,gBAAgB,WACnB,EAAE,QAAQ,KAAK,MAAM,cAAc,gBAAgB,EAAE,GACrD,KAAA;GACJ;IACE,MAAM;IACN,oBAAoB;IACpB,mBAAmB;IACnB,iBAAiB;IAClB;GACF;IACA,CAAC,iBAAiB,YAAY,MAAM,CAAC;CAGxC,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,OACH,OAAO;EAET,MAAM,UAAU,WAAW,MAAM,GAAG,OAAO,GAAG;EAC9C,OACE,qBAAC,QAAD;GAAQ,WAAU;GAAI,YAAW;GAAW,eAAc;aAA1D,CACE,oBAACA,QAAD;IAAM,uBAAuB;IAA+B,OAAO,YAAY;cAC5E;IACI,CAAA,EACN,YACC,oBAACA,QAAD;IACE,uBAAuB;IACvB,OAAO,YAAY;cACpB;IAEM,CAAA,CAEF;;IAEV;EACD;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACb,CAAC;CAEF,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,WACH,OAAO;EAET,OACE,oBAAC,UAAD;GACE,MAAM;GACN,SAAQ;GACR,uBAAuB;GACvB,OAAO,YAAY;GACnB,CAAA;IAEH;EAAC;EAAW;EAA+B,YAAY;EAAU,CAAC;CAErE,MAAM,iBAAiB,cAAc;EACnC,IAAI,CAAC,SACH,OAAO;EAET,OACE,oBAAC,UAAD;GACE,MAAM;GACN,SAAQ;GACR,uBAAuB;GACvB,OAAO,YAAY;GACnB,CAAA;IAEH;EAAC;EAAS;EAA+B,YAAY;EAAQ,CAAC;CAEjE,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UACH,OAAO;EAET,MAAM,UAAU,WAAW,SAAS,GAAG,UAAU,GAAG;EACpD,OACE,oBAAC,eAAD;GACE,WAAW;GACL;GACN,UAAU,eAAe;GACf;GACA;GACA;GACV,SAAS;GACT,uBAAuB;aAEtB;GACa,CAAA;IAEjB;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,OACE,qBAAC,QAAD;EAAQ,OAAO;YAAf;GACG;GAED,qBAAC,MAAD;IACE,OAAO;IACP,YAAA;IACA,mBAAkB;IAClB,oBAAoB,OAAO,UAAU,WAAW,QAAQ,KAAA;cAJ1D;KAMG;KAED,oBAAC,WAAD;MACO;MACL,UAAU;MACH;MACP,cAAc;MACd,SAAS;MACT,QAAQ;MACK;MACb,sBAAsB;MACtB,UAAU,CAAC,YAAY,CAAC;MACxB,uBAAuB;MACvB,OAAO;MACP,oBAAoB,OAAO,UAAU,WAAW,QAAQ,KAAA;MACxD,mBAAmB,OAAO,aAAa,WAAW,WAAW,KAAA;MAC7D,oBAAoB,EAAE,UAAU;MAChC,GAAI;MACJ,CAAA;KAED;KACI;;GAEN;GACM;;EAEX;AAEF,MAAM,cAAc"}
+{"version":3,"file":"Input.js","names":["Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { InputHelpText } from './InputHelpText';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  /** Ref to the underlying TextInput element */\n  ref?: Ref<TextInput>;\n  /**\n   * Caps the field text, labels, icons, and geometry at the control scale.\n   * Set null to remove the cap. @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile/Input';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * <Input label=\"Email\" startIcon=\"Mail\" helpText=\"We'll never share your email\" />\n * <Input label=\"Password\" secureTextEntry hasError helpText=\"Password is required\" />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries\n * - Filters/Settings: When users need to specify preferences\n * - Feedback/Comments: Letting users leave reviews or comments\n *\n * @accessibility\n * - Label is automatically associated with the input\n * - Help text is announced as accessibility hint\n * - Error state is communicated to screen readers\n * - Disabled state prevents interaction\n *\n * @see {@link Checkbox} for boolean selections\n * @see {@link Radio} for single-select options\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  maxFontSizeMultiplier,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n  const fontScaleFactor = useFontScale(\n    resolvedMaxFontSizeMultiplier,\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  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  // `inputWrapper` carries only background/border colors; the size-axis spacing\n  // (`inputWrapperStatic`) and border width/radius (`inputWrapperDynamic`) live\n  // on their own layers after the wrapper split. All three must be applied to\n  // the wrapper View — matching the web component, which drives the static and\n  // dynamic layers via separate variants — or the input loses its padding, gap,\n  // and border sizing.\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      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ];\n  }, [\n    fontScaleFactor,\n    inputStyles.inputWrapper,\n    inputStyles.inputWrapperStatic,\n    inputStyles.inputWrapperDynamic,\n  ]);\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(() => {\n    const inputHeight = inputStyles.input.height;\n    return [\n      inputStyles.input,\n      typeof inputHeight === 'number'\n        ? { height: Math.round(inputHeight * fontScaleFactor) }\n        : undefined,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ];\n  }, [fontScaleFactor, inputStyles.input]);\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\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 startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return (\n      <IconSlot\n        icon={startIcon}\n        variant=\"outline\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={inputStyles.startIcon}\n      />\n    );\n  }, [startIcon, resolvedMaxFontSizeMultiplier, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return (\n      <IconSlot\n        icon={endIcon}\n        variant=\"outline\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={inputStyles.endIcon}\n      />\n    );\n  }, [endIcon, resolvedMaxFontSizeMultiplier, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\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={isFocused}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n      >\n        {content}\n      </InputHelpText>\n    );\n  }, [\n    disabled,\n    hasError,\n    helpText,\n    helperTextIcon,\n    isFocused,\n    readOnly,\n    resolvedMaxFontSizeMultiplier,\n    size,\n    valueState,\n  ]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/InputHelpText.cjs

@@ -12,7 +12,7 @@ let generated_styles = require("../../generated/styles");
 const InputHelpText = (0, react.memo)(function InputHelpText({ children, startIcon, endIcon, iconProps, size = "md", isFilled = false, disabled: _disabled, readOnly, hasError, pressed, maxFontSizeMultiplier, ref, ...hStackProps }) {
 	const { style: iconStyle, variant = "outline", ...resolvedIconProps } = iconProps ?? {};
 	const value = isFilled ? "filled" : "empty";
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.inputStyles.useVariants({
 		size,
 		value,

package/dist/components/InputHelpText.js

@@ -10,7 +10,7 @@ import { inputStyles } from "../../generated/styles";
 const InputHelpText = memo(function InputHelpText({ children, startIcon, endIcon, iconProps, size = "md", isFilled = false, disabled: _disabled, readOnly, hasError, pressed, maxFontSizeMultiplier, ref, ...hStackProps }) {
 	const { style: iconStyle, variant = "outline", ...resolvedIconProps } = iconProps ?? {};
 	const value = isFilled ? "filled" : "empty";
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	inputStyles.useVariants({
 		size,
 		value,