@yahoo/uds-mobile 2.23.2 → 2.23.3

package/dist/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- button control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getButtonControlMetrics, getButtonTextStyleForControlHeight } from './Button/buttonTheme';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\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/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** The visual style variant of the button @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: ButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Icon displayed before the button label */\n  startIcon?: IconSlotType;\n  /** Icon displayed after the button label */\n  endIcon?: IconSlotType;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Button label content */\n  children?: React.ReactNode;\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/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile/Button';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - Use `accessibilityLabel` for icon-only buttons\n *\n * @see {@link IconButton} for icon-only buttons\n * @see {@link Link} for navigation actions\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width: _width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  const { theme } = useUnistyles();\n  const { controlHeight, contentLineHeight } = useMemo(\n    () => getButtonControlMetrics(theme, size),\n    [theme, size],\n  );\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\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(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\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  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text\n        numberOfLines={1}\n        textAlign=\"center\"\n        style={getButtonTextStyleForControlHeight(buttonStyles.text, contentLineHeight)}\n      >\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\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 animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath]?.boxShadow;\n\n    return {\n      transform: [{ scale: scale.value }],\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  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  const iconSizeToken = (buttonStyles.icon.iconSizeToken as IconSize) ?? 'sm';\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot visible={showLoading || showStartIcon} iconSize={iconSize} gap={buttonGap}>\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          style={buttonStyles.icon}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot visible={showEndIcon} iconSize={iconSize} gap={buttonGap}>\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        style={buttonStyles.icon}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      { height: controlHeight },\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, controlHeight, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\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      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["Text"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonSize, ButtonVariantFlat, IconSize, IconVariant } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- button control height from theme size layers\nimport { useUnistyles } from 'react-native-unistyles';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { getButtonControlMetrics, getButtonTextStyle } from './Button/buttonTheme';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\nimport { Text } from './Text';\n\n/* -------------------------------------------------------------------------- */\n/*                              Animation Helpers                              */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Interpolates a boxShadow string by scaling the alpha of all colors.\n * This allows smooth fade-in/out of shadows.\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/*                           Animated Icon Slot                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Animated wrapper for icon/loading content.\n * Matches web Button icon animation: scale 0.7→1, opacity 0→1, width 0→auto\n * Uses staggered animation: opacity waits until halfway through width animation.\n */\nfunction AnimatedIconSlot({\n  children,\n  visible,\n  iconSize,\n  iconCellHeight,\n  gap,\n}: {\n  children: React.ReactNode;\n  visible: boolean;\n  iconSize: number;\n  iconCellHeight: number;\n  gap: number;\n}) {\n  // Use useDerivedValue instead of useEffect + useSharedValue\n  // This is the idiomatic Reanimated pattern for deriving animated values from React state\n  const progress = useDerivedValue(\n    () => withSpring(visible ? 1 : 0, BUTTON_SPRING_CONFIG),\n    [visible],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => {\n    // Total width includes icon + gap when visible\n    const totalWidth = iconSize + gap;\n    const width = interpolate(progress.value, [0, 1], [0, totalWidth]);\n\n    // Staggered animation: opacity starts at 50% of width animation\n    // On enter: width expands first, then icon fades in\n    // On exit: icon fades out first, then width collapses\n    const opacity = interpolate(progress.value, [0.5, 1], [0, 1], 'clamp');\n    const scale = interpolate(progress.value, [0.5, 1], [0.7, 1], 'clamp');\n\n    return {\n      width,\n      opacity,\n      transform: [{ scale }],\n      overflow: 'hidden' as const,\n      minHeight: iconCellHeight,\n      justifyContent: 'center' as const,\n    };\n  });\n\n  return <Animated.View style={animatedStyle}>{children}</Animated.View>;\n}\n\n// function LoadingIcon({ size, variant }: { size: ButtonSize, variant: ButtonVariantFlat }) {\n//   const { theme } = useUnistyles();\n//   const themeKey = `buttonVariant${variantToCapitalMap[variant]}IconRest` as const;\n//   const iconSize = theme.components.buttonSizeLgIconRest.fontSize;\n//   return <ActivityIndicator size={iconSize} color={theme.colors.text.primary} />;\n// }\n\n/* -------------------------------------------------------------------------- */\n/*                              Button Props                                   */\n/* -------------------------------------------------------------------------- */\n\ninterface ButtonProps extends Omit<PressableProps, 'children' | 'disabled'> {\n  /** The visual style variant of the button @default 'primary' */\n  variant?: ButtonVariantFlat;\n  /** The size of the button @default 'md' */\n  size?: ButtonSize;\n  /** The icon style variant @default 'outline' */\n  iconVariant?: IconVariant;\n  /** Icon displayed before the button label */\n  startIcon?: IconSlotType;\n  /** Icon displayed after the button label */\n  endIcon?: IconSlotType;\n  /** Shows a loading spinner and disables the button */\n  loading?: boolean;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** Button label content */\n  children?: React.ReactNode;\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/*                              Button Component                               */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **🖲️ A button element that can be used to trigger an action**\n *\n * @description\n * A button is a fundamental component used to trigger an action or event.\n * Buttons are interactive elements that users can click, tap, or otherwise\n * engage with to submit forms, open dialogues, or perform any other interaction.\n *\n * Features animated scale effect on press and smooth icon transitions matching\n * the web UDS Button behavior.\n *\n * @category Interactive\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Button } from '@yahoo/uds-mobile/Button';\n *\n * <Button onPress={() => console.log('pressed')}>Save</Button>\n * <Button variant=\"secondary\">Cancel</Button>\n * <Button startIcon=\"Add\" variant=\"brand\">Add Item</Button>\n * <Button loading>Saving...</Button>\n * ```\n *\n * @accessibility\n * - Sets `accessibilityRole=\"button\"` automatically\n * - Announces loading state to screen readers\n * - Use `accessibilityLabel` for icon-only buttons\n *\n * @see {@link IconButton} for icon-only buttons\n * @see {@link Link} for navigation actions\n */\nconst Button = memo(function Button({\n  variant = 'primary',\n  size = 'md',\n  iconVariant = 'outline',\n  startIcon,\n  endIcon,\n  loading,\n  disabled,\n  width: _width,\n  children,\n  style,\n  accessibilityLabel,\n  accessibilityHint,\n  disableEffects = false,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  const { theme } = useUnistyles();\n  const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(\n    () => getButtonControlMetrics(theme, size),\n    [theme, size],\n  );\n\n  /* --------------------------------- State ---------------------------------- */\n  const [pressed, setPressed] = useState(false);\n\n  buttonStyles.useVariants({ size, variant, disabled, pressed });\n\n  // Get gap and icon size from current variant styles\n  const buttonGap = buttonStyles.root.gap;\n  const iconSize = buttonStyles.icon.fontSize;\n\n  // Get animated theme for boxShadow (useAnimatedVariantColor doesn't support non-color props)\n  const animatedTheme = useAnimatedTheme();\n\n  /* ------------------------------- Animation -------------------------------- */\n  const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n  const handlePressIn = useCallback(\n    (event: Parameters<NonNullable<PressableProps['onPressIn']>>[0]) => {\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(\n    (event: Parameters<NonNullable<PressableProps['onPressOut']>>[0]) => {\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  /* -------------------------------- Content --------------------------------- */\n  const childrenNode =\n    children &&\n    (isValidElement(children) ? (\n      children\n    ) : (\n      <Text\n        numberOfLines={1}\n        textAlign=\"center\"\n        style={getButtonTextStyle(buttonStyles.text, labelLineHeight)}\n      >\n        {children}\n      </Text>\n    ));\n\n  const a11yState = useMemo(() => ({ disabled, busy: loading }), [disabled, loading]);\n\n  /* --------------------------------- Styles --------------------------------- */\n  // Animate pressed state for shadow (0 = rest, 1 = pressed)\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 animatedStyles = useAnimatedStyle(() => {\n    // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n    const components = animatedTheme.value.components;\n    const buttonVariantPath = `button/variant/${variant}/root/pressed` as const;\n    const shadowPressed = components[buttonVariantPath]?.boxShadow;\n\n    return {\n      transform: [{ scale: scale.value }],\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  // Determine what should be visible in start slot\n  const showLoading = !!loading;\n  const showStartIcon = !!startIcon && !loading;\n  const showEndIcon = !!endIcon && !loading;\n\n  const iconSizeToken = (buttonStyles.icon.iconSizeToken as IconSize) ?? 'sm';\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot\n      visible={showLoading || showStartIcon}\n      iconSize={iconSize}\n      iconCellHeight={iconCellHeight}\n      gap={buttonGap}\n    >\n      {showLoading ? (\n        <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n        />\n      )}\n    </AnimatedIconSlot>\n  );\n\n  // End slot: only end icon (no loading here)\n  const endContent = (\n    <AnimatedIconSlot\n      visible={showEndIcon}\n      iconSize={iconSize}\n      iconCellHeight={iconCellHeight}\n      gap={buttonGap}\n    >\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        style={[buttonStyles.icon, { lineHeight: iconCellHeight }]}\n      />\n    </AnimatedIconSlot>\n  );\n\n  const rootStyles = useMemo(\n    () => [\n      buttonStyles.root,\n      { minHeight, paddingVertical },\n      animatedStyles,\n      typeof style === 'function' ? style({ pressed }) : style,\n    ],\n    [buttonStyles.root, minHeight, paddingVertical, animatedStyles, style, pressed],\n  );\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <AnimatedPressable\n      ref={ref}\n      disabled={disabled}\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      alignContent=\"center\"\n      style={rootStyles}\n      {...props}\n    >\n      {startContent}\n      {childrenNode}\n      {endContent}\n    </AnimatedPressable>\n  );\n});\n\nButton.displayName = 'Button';\n\nexport { Button, type ButtonProps };\n"],"mappings":"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"}

package/dist/components/Icon.cjs

@@ -1,6 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../_virtual/_rolldown/runtime.cjs");
+const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -94,13 +95,13 @@ const OutlineOrFillIcon = (0, react.memo)(function OutlineOrFillIcon({ name, siz
 				textAlign: "center",
 				textAlignVertical: "center",
 				fontSize: pixelSize,
-				lineHeight: pixelSize
+				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(pixelSize)
 			},
 			generated_styles.styles.foundation,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
-				lineHeight: dangerouslySetSize
+				lineHeight: require_components_Button_buttonTheme.getSafeIconCell(dangerouslySetSize)
 			} : void 0,
 			style
 		], [

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
+{"version":3,"file":"Icon.d.cts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAmCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAkCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}
+{"version":3,"file":"Icon.d.ts","names":[],"sources":["../../src/components/Icon.tsx"],"mappings":";;;;;;;;;;KAmCK,QAAA,GAAW,SAAA,GAAY,YAAA;AAAA,UAElB,SAAA,SAAkB,IAAA,CAAK,SAAA;;EAE/B,GAAA,GAAM,GAAA,CAAI,IAAA;EAJC;EAMX,IAAA,EAAM,QAAA;EANQ;EAQd,IAAA,GAAO,QAAA;EANC;EAQR,KAAA,GAAQ,UAAA;;EAER,OAAA,GAAU,WAAA;EAEV,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,UAAA,GAAa,UAAA;EAEb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EACb,UAAA,GAAa,UAAA;EACb,aAAA,GAAgB,UAAA;EAChB,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,OAAA,GAAU,UAAA;EAEV,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EACZ,SAAA,GAAY,UAAA;EACZ,YAAA,GAAe,UAAA;EACf,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,MAAA,GAAS,UAAA;EALG;EAOZ,mBAAA;EALe;EAOf,kBAAA;EALiB;EAOjB,KAAA,GAAQ,SAAA,CAAU,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiNd,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA;AAAA,cAaG,SAAA;AAAA,cACA,mBAAA"}

package/dist/components/Icon.js

@@ -1,4 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { getSafeIconCell } from "./Button/buttonTheme.js";
 import { memo, useMemo } from "react";
 import { Text, View } from "react-native";
 import { jsx } from "react/jsx-runtime";
@@ -92,13 +93,13 @@ const OutlineOrFillIcon = memo(function OutlineOrFillIcon({ name, size = DEFAULT
 				textAlign: "center",
 				textAlignVertical: "center",
 				fontSize: pixelSize,
-				lineHeight: pixelSize
+				lineHeight: getSafeIconCell(pixelSize)
 			},
 			styles.foundation,
 			dangerouslySetColor ? { color: dangerouslySetColor } : void 0,
 			dangerouslySetSize ? {
 				fontSize: dangerouslySetSize,
-				lineHeight: dangerouslySetSize
+				lineHeight: getSafeIconCell(dangerouslySetSize)
 			} : void 0,
 			style
 		], [

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';\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  // 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}: 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 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 style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? 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  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\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: pixelSize,\n      },\n      styles.foundation,\n      dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n      dangerouslySetSize\n        ? {\n            fontSize: dangerouslySetSize,\n            lineHeight: 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      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\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":";;;;;;;;;;;AAuBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;CAE1B,IAAI,CAAC,YAAY;EACf,QAAQ,KAAK,oBAAoB,OAAO,aAAa;EACrD,OAAO;;CAGT,OAAO,YAAY;EACjB;EACA;EACD,CAAC;CAEF,OACE,oBAAC,MAAD;EAAM,OAAO,OAAO;YAClB,oBAAC,QAAD;GACE,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;GAC9B,CAAA;EACG,CAAA;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;CAEhC,OAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;CAwBxC,OACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY;IACb;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY;IACb,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;CAEhE,IAAI,YAAY,cACd,OAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;CAGtC,OAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}
+{"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 { 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  // 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}: 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 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 style={styles.foundation as ViewProps['style']}>\n      <SvgXml\n        xml={svgContent}\n        width={dangerouslySetSize ?? pixelSize}\n        height={dangerouslySetSize ?? 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  style,\n  ref,\n  ...props\n}: Omit<IconProps, 'variant'> & { variant?: 'outline' | 'fill' }) {\n  const pixelSize = ICON_SIZE_MAP[size];\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      {...props}\n    >\n      {glyph}\n    </Text>\n  );\n});\n\n/**\n * **🎨 An icon component using UDS icon fonts**\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":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB;CACpB,MAAM;CACN,OAAO;CACP,SAAS;CACT,YAAY;CACb;;;;;;AA0ED,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAClD,MACA,OAAO,cAAc,MACrB,aAAa,cAAc,YAC3B,iBACA,sBAC6B;CAE7B,MAAM,EAAE,OAAO,cAAc;CAC7B,MAAM,cAAc,GAAG,cAAc,SAAS,SAAS;CAEvD,MAAM,YAAY,cAAc;CAChC,MAAM,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG;CACzC,MAAM,aAAa,OAAO;CAE1B,IAAI,CAAC,YAAY;EACf,QAAQ,KAAK,oBAAoB,OAAO,aAAa;EACrD,OAAO;;CAGT,OAAO,YAAY;EACjB;EACA;EACD,CAAC;CAEF,OACE,oBAAC,MAAD;EAAM,OAAO,OAAO;YAClB,oBAAC,QAAD;GACE,KAAK;GACL,OAAO,sBAAsB;GAC7B,QAAQ,sBAAsB;GAC9B,CAAA;EACG,CAAA;EAET;AAEF,MAAM,oBAAoB,KAAK,SAAS,kBAAkB,EACxD,MACA,OAAO,cAAc,MACrB,QAAQ,cAAc,OACtB,UAAU,cAAc,SAExB,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,aAAa,KAEb,cACA,YACA,YACA,eACA,mBACA,iBACA,SAEA,aACA,WACA,WACA,cACA,kBACA,gBACA,QAEA,qBACA,oBACA,OACA,KACA,GAAG,SAC6D;CAChE,MAAM,YAAY,cAAc;CAEhC,OAAO,YAAY;EACjB;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAS,SAAoC,GAD9B,KAAK,GAAG,QAAQ,GAAG;CAwBxC,OACE,oBAAC,MAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB;EACpB,OA3BqC,cACjC;GACJ;IACE,YAAY;IACZ,WAAW;IACX,mBAAmB;IACnB,UAAU;IACV,YAAY,gBAAgB,UAAU;IACvC;GACD,OAAO;GACP,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,qBACI;IACE,UAAU;IACV,YAAY,gBAAgB,mBAAmB;IAChD,GACD,KAAA;GACJ;GACD,EACD;GAAC;GAAqB;GAAoB;GAAO,OAAO;GAAY;GAAU,CAQ3D;EACjB,GAAI;YAEH;EACI,CAAA;EAET;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCF,MAAM,OAAO,KAAK,SAAS,KAAK,EAAE,SAAS,GAAG,SAAoB;CAEhE,IAAI,YAAY,cACd,OAAO,oBAAC,gBAAD,EAAgB,GAAI,OAAS,CAAA;CAGtC,OAAO,oBAAC,mBAAD;EAA4B;EAAS,GAAI;EAAS,CAAA;EACzD;AAEF,KAAK,cAAc;AAInB,MAAa,YAAY;AACzB,MAAa,sBAAsB"}

package/dist/components/IconButton.cjs

@@ -3,8 +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_components_Icon = require("./Icon.cjs");
 const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
+const require_components_Icon = require("./Icon.cjs");
 const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_native = require("react-native");
@@ -61,11 +61,17 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const shouldAnimateVariantColors = react_native.Platform.OS !== "web";
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
-	const { controlHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonControlMetrics(theme, size), [theme, size]);
-	const matchedControlDimensions = controlHeight > 0 ? {
-		height: controlHeight,
-		width: controlHeight
-	} : void 0;
+	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getIconButtonControlMetrics(theme, size), [theme, size]);
+	const controlDimensions = hasExplicitHeight ? {
+		height: "auto",
+		width: "auto",
+		minHeight,
+		minWidth: minHeight,
+		paddingVertical
+	} : {
+		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({
@@ -138,7 +144,7 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		style: [
 			resolvedIconButtonStyles.root,
 			resolvedButtonStyles.root,
-			matchedControlDimensions,
+			controlDimensions,
 			resolvedFoundationStyles.foundation,
 			animatedRootStyle,
 			typeof style === "function" ? style({ pressed }) : style
@@ -150,7 +156,11 @@ const IconButton = (0, react.memo)(function IconButton({ name, variant = "primar
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
 			name,
 			variant: iconVariant,
-			style: [resolvedIconButtonStyles.icon, resolvedButtonStyles.icon],
+			style: [
+				resolvedIconButtonStyles.icon,
+				resolvedButtonStyles.icon,
+				{ lineHeight: iconCellHeight }
+			],
 			dangerouslySetColor: resolvedIconColor
 		})
 	});

package/dist/components/IconButton.js

@@ -1,8 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { SCALE_EFFECTS } from "../motion-tokens/dist/index.js";
 import { BUTTON_SPRING_CONFIG } from "../motion.js";
-import { Icon } from "./Icon.js";
 import { getIconButtonControlMetrics } from "./Button/buttonTheme.js";
+import { Icon } from "./Icon.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { memo, useCallback, useMemo, useState } from "react";
 import { ActivityIndicator, Platform } from "react-native";
@@ -59,11 +59,17 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 	const shouldAnimate = !disableEffects && !isDisabled;
 	const shouldAnimateVariantColors = Platform.OS !== "web";
 	const { theme } = useUnistyles();
-	const { controlHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);
-	const matchedControlDimensions = controlHeight > 0 ? {
-		height: controlHeight,
-		width: controlHeight
-	} : void 0;
+	const { minHeight, iconCellHeight, paddingVertical, hasExplicitHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);
+	const controlDimensions = hasExplicitHeight ? {
+		height: "auto",
+		width: "auto",
+		minHeight,
+		minWidth: minHeight,
+		paddingVertical
+	} : {
+		minHeight,
+		paddingVertical
+	};
 	const [pressed, setPressed] = useState(false);
 	const resolvedIconButtonStyles = iconButtonStyles.useVariants({ size }) ?? iconButtonStyles;
 	const resolvedButtonStyles = buttonStyles.useVariants({
@@ -136,7 +142,7 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		style: [
 			resolvedIconButtonStyles.root,
 			resolvedButtonStyles.root,
-			matchedControlDimensions,
+			controlDimensions,
 			resolvedFoundationStyles.foundation,
 			animatedRootStyle,
 			typeof style === "function" ? style({ pressed }) : style
@@ -148,7 +154,11 @@ const IconButton = memo(function IconButton({ name, variant = "primary", size =
 		}) : /* @__PURE__ */ jsx(Icon, {
 			name,
 			variant: iconVariant,
-			style: [resolvedIconButtonStyles.icon, resolvedButtonStyles.icon],
+			style: [
+				resolvedIconButtonStyles.icon,
+				resolvedButtonStyles.icon,
+				{ lineHeight: iconCellHeight }
+			],
 			dangerouslySetColor: resolvedIconColor
 		})
 	});

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 { controlHeight } = useMemo(() => getIconButtonControlMetrics(theme, size), [theme, size]);\n  const matchedControlDimensions =\n    controlHeight > 0 ? ({ height: controlHeight, width: controlHeight } as const) : undefined;\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\n    | 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\n    | 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\n      | 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        matchedControlDimensions,\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={[resolvedIconButtonStyles.icon, resolvedButtonStyles.icon]}\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 { 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\n    | 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\n    | 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\n      | 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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"}

package/dist/components/internal/Overlay/index.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_components_internal_Overlay_OverlayPortal = require("./OverlayPortal.cjs");
 const require_components_internal_Overlay_measureTrigger = require("./measureTrigger.cjs");
+const require_components_internal_Overlay_OverlayPortal = require("./OverlayPortal.cjs");
 const require_components_internal_Overlay_useAnchoredPosition = require("./useAnchoredPosition.cjs");
 const require_components_internal_Overlay_useControllableState = require("./useControllableState.cjs");
 const require_components_internal_Overlay_useOverlayDismiss = require("./useOverlayDismiss.cjs");

package/dist/components/internal/Overlay/index.js

@@ -1,6 +1,6 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { OverlayPortal } from "./OverlayPortal.js";
 import { measureTrigger } from "./measureTrigger.js";
+import { OverlayPortal } from "./OverlayPortal.js";
 import { useAnchoredPosition } from "./useAnchoredPosition.js";
 import { useControllableState } from "./useControllableState.js";
 import { useOverlayDismiss } from "./useOverlayDismiss.js";