@yahoo/uds-mobile 2.23.3 → 2.24.0-beta.10

package/dist/components/Avatar/AvatarImage.cjs

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_components_Box = require("../Box.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
+const require_components_Avatar_useAvatarFontScale = require("./useAvatarFontScale.cjs");
 const require_components_Avatar_utils = require("./utils.cjs");
 const require_components_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
 const require_components_Avatar_AvatarText = require("./AvatarText.cjs");
@@ -10,21 +12,24 @@ let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarImage.tsx
-const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = (0, react.useState)(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	generated_styles.avatarStyles.useVariants({
 		size,
 		image: variant
 	});
+	const fontScaleFactor = require_components_Avatar_useAvatarFontScale.useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = (0, react.useMemo)(() => [
 		generated_styles.avatarStyles.root,
 		avatarStaticStyles.root,
-		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		require_components_Avatar_utils.getAvatarSizeStyle(generated_styles.avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		generated_styles.avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	if (!shouldShowImage) {
@@ -36,6 +41,7 @@ const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant
 			initials: fallback,
 			abbreviationStrategy,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
 			style,
 			...viewProps
@@ -46,6 +52,7 @@ const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant
 			variant,
 			icon,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt,
 			style,
 			...viewProps

package/dist/components/Avatar/AvatarImage.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"AvatarImage.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAYM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}
+{"version":3,"file":"AvatarImage.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAYM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.js

@@ -1,6 +1,8 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "../Box.js";
-import { DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from "./utils.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
+import { useAvatarFontScale } from "./useAvatarFontScale.js";
+import { DEFAULT_AVATAR_VARIANT, getAvatarSizeStyle } from "./utils.js";
 import { AvatarIcon } from "./AvatarIcon.js";
 import { AvatarText } from "./AvatarText.js";
 import { memo, useMemo, useState } from "react";
@@ -8,21 +10,24 @@ import { Image, StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarImage.tsx
-const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const [imageError, setImageError] = useState(false);
 	const shouldShowImage = Boolean(src) && !imageError;
 	avatarStyles.useVariants({
 		size,
 		image: variant
 	});
+	const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = useMemo(() => [
 		avatarStyles.root,
 		avatarStaticStyles.root,
-		getAvatarCustomSizeStyle(customSize),
+		getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	if (!shouldShowImage) {
@@ -34,6 +39,7 @@ const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_A
 			initials: fallback,
 			abbreviationStrategy,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
 			style,
 			...viewProps
@@ -44,6 +50,7 @@ const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_A
 			variant,
 			icon,
 			customSize,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			accessibilityLabel: accessibilityLabel ?? alt,
 			style,
 			...viewProps

package/dist/components/Avatar/AvatarImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarImage.js","names":["RNImage"],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport { Image as RNImage, StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarImageProps } from './types';\nimport { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from './utils';\n\nconst AvatarImage = memo(function AvatarImage({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  src,\n  alt,\n  fallback,\n  icon,\n  abbreviationStrategy,\n  customSize,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarImageProps) {\n  const [imageError, setImageError] = useState(false);\n  const shouldShowImage = Boolean(src) && !imageError;\n\n  avatarStyles.useVariants({ size, image: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  if (!shouldShowImage) {\n    if (fallback || alt) {\n      return (\n        <AvatarText\n          ref={ref}\n          size={size}\n          variant={variant}\n          name={alt}\n          initials={fallback}\n          abbreviationStrategy={abbreviationStrategy}\n          customSize={customSize}\n          accessibilityLabel={accessibilityLabel ?? alt ?? fallback}\n          style={style}\n          {...viewProps}\n        />\n      );\n    }\n\n    return (\n      <AvatarIcon\n        ref={ref}\n        size={size}\n        variant={variant}\n        icon={icon}\n        customSize={customSize}\n        accessibilityLabel={accessibilityLabel ?? alt}\n        style={style}\n        {...viewProps}\n      />\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <RNImage\n        source={{ uri: src }}\n        accessibilityLabel={alt}\n        onError={() => setImageError(true)}\n        style={avatarStaticStyles.image}\n      />\n    </Box>\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport { AvatarImage };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,OAAA,MACA,UAAU,wBACV,KACA,KACA,UACA,MACA,sBACA,YACA,OACA,oBACA,KACA,GAAG,aACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,QAAQ,IAAI,IAAI,CAAC;CAEzC,aAAa,YAAY;EAAE;EAAM,OAAO;EAAS,CAAC;CAElD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,IAAI,CAAC,iBAAiB;EACpB,IAAI,YAAY,KACd,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACT,MAAM;GACN,UAAU;GACY;GACV;GACZ,oBAAoB,sBAAsB,OAAO;GAC1C;GACP,GAAI;GACJ,CAAA;EAIN,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACH;GACM;GACZ,oBAAoB,sBAAsB;GACnC;GACP,GAAI;GACJ,CAAA;;CAIN,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAACA,OAAD;GACE,QAAQ,EAAE,KAAK,KAAK;GACpB,oBAAoB;GACpB,eAAe,cAAc,KAAK;GAClC,OAAO,mBAAmB;GAC1B,CAAA;EACE,CAAA;EAER;AAEF,YAAY,cAAc;AAE1B,MAAM,qBAAqB,WAAW,OAAO;CAC3C,MAAM;EACJ,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"AvatarImage.js","names":["RNImage"],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport { Image as RNImage, StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { Box } from '../Box';\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarImageProps } from './types';\nimport { useAvatarFontScale } from './useAvatarFontScale';\nimport { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, getAvatarSizeStyle } from './utils';\n\nconst AvatarImage = memo(function AvatarImage({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  src,\n  alt,\n  fallback,\n  icon,\n  abbreviationStrategy,\n  customSize,\n  maxFontSizeMultiplier,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarImageProps) {\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  const [imageError, setImageError] = useState(false);\n  const shouldShowImage = Boolean(src) && !imageError;\n\n  avatarStyles.useVariants({ size, image: variant });\n  const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo(\n    () => [\n      avatarStyles.root,\n      avatarStaticStyles.root,\n      getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),\n      style,\n    ],\n    [avatarStyles.root, customSize, fontScaleFactor, style],\n  );\n\n  if (!shouldShowImage) {\n    if (fallback || alt) {\n      return (\n        <AvatarText\n          ref={ref}\n          size={size}\n          variant={variant}\n          name={alt}\n          initials={fallback}\n          abbreviationStrategy={abbreviationStrategy}\n          customSize={customSize}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n          accessibilityLabel={accessibilityLabel ?? alt ?? fallback}\n          style={style}\n          {...viewProps}\n        />\n      );\n    }\n\n    return (\n      <AvatarIcon\n        ref={ref}\n        size={size}\n        variant={variant}\n        icon={icon}\n        customSize={customSize}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        accessibilityLabel={accessibilityLabel ?? alt}\n        style={style}\n        {...viewProps}\n      />\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <RNImage\n        source={{ uri: src }}\n        accessibilityLabel={alt}\n        onError={() => setImageError(true)}\n        style={avatarStaticStyles.image}\n      />\n    </Box>\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport { AvatarImage };\n"],"mappings":";;;;;;;;;;;;AAYA,MAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,OAAA,MACA,UAAU,wBACV,KACA,KACA,UACA,MACA,sBACA,YACA,uBACA,OACA,oBACA,KACA,GAAG,aACgB;CACnB,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,QAAQ,IAAI,IAAI,CAAC;CAEzC,aAAa,YAAY;EAAE;EAAM,OAAO;EAAS,CAAC;CAClD,MAAM,kBAAkB,mBAAmB,8BAA8B;CAEzE,MAAM,YAAY,cACV;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB,aAAa,MAAM,YAAY,gBAAgB;EAClE;EACD,EACD;EAAC,aAAa;EAAM;EAAY;EAAiB;EAAM,CACxD;CAED,IAAI,CAAC,iBAAiB;EACpB,IAAI,YAAY,KACd,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACT,MAAM;GACN,UAAU;GACY;GACV;GACZ,uBAAuB;GACvB,oBAAoB,sBAAsB,OAAO;GAC1C;GACP,GAAI;GACJ,CAAA;EAIN,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACH;GACM;GACZ,uBAAuB;GACvB,oBAAoB,sBAAsB;GACnC;GACP,GAAI;GACJ,CAAA;;CAIN,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAACA,OAAD;GACE,QAAQ,EAAE,KAAK,KAAK;GACpB,oBAAoB;GACpB,eAAe,cAAc,KAAK;GAClC,OAAO,mBAAmB;GAC1B,CAAA;EACE,CAAA;EAER;AAEF,YAAY,cAAc;AAE1B,MAAM,qBAAqB,WAAW,OAAO;CAC3C,MAAM;EACJ,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC"}

package/dist/components/Avatar/AvatarText.cjs

@@ -2,26 +2,31 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_components_Box = require("../Box.cjs");
+const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_Text = require("../Text.cjs");
+const require_components_Avatar_useAvatarFontScale = require("./useAvatarFontScale.cjs");
 const require_components_Avatar_utils = require("./utils.cjs");
 let react = require("react");
 let react_native = require("react-native");
 let react_jsx_runtime = require("react/jsx-runtime");
 let generated_styles = require("../../../generated/styles");
 //#region src/components/Avatar/AvatarText.tsx
-const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	generated_styles.avatarStyles.useVariants({
 		size,
 		text: variant
 	});
+	const fontScaleFactor = require_components_Avatar_useAvatarFontScale.useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = (0, react.useMemo)(() => [
 		generated_styles.avatarStyles.root,
 		avatarStaticStyles.root,
-		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		require_components_Avatar_utils.getAvatarSizeStyle(generated_styles.avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		generated_styles.avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
@@ -34,6 +39,7 @@ const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant =
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: generated_styles.avatarStyles.text,
 			children: initials || require_components_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
 		})

package/dist/components/Avatar/AvatarText.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarText.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}
+{"version":3,"file":"AvatarText.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAgBM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarText.js

@@ -1,25 +1,30 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 import { Box } from "../Box.js";
+import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
 import { Text as Text$1 } from "../Text.js";
-import { DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle } from "./utils.js";
+import { useAvatarFontScale } from "./useAvatarFontScale.js";
+import { DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle } from "./utils.js";
 import { memo, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { jsx } from "react/jsx-runtime";
 import { avatarStyles } from "../../../generated/styles";
 //#region src/components/Avatar/AvatarText.tsx
-const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, maxFontSizeMultiplier, style, accessibilityLabel, ref, ...viewProps }) {
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	avatarStyles.useVariants({
 		size,
 		text: variant
 	});
+	const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);
 	const rootStyle = useMemo(() => [
 		avatarStyles.root,
 		avatarStaticStyles.root,
-		getAvatarCustomSizeStyle(customSize),
+		getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),
 		style
 	], [
 		avatarStyles.root,
 		customSize,
+		fontScaleFactor,
 		style
 	]);
 	return /* @__PURE__ */ jsx(Box, {
@@ -32,6 +37,7 @@ const AvatarText = memo(function AvatarText({ size = "md", variant = DEFAULT_AVA
 			color: "inherit",
 			variant: "inherit",
 			numberOfLines: 1,
+			maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
 			style: avatarStyles.text,
 			children: initials || generateAvatarAbbreviation(name, abbreviationStrategy)
 		})

package/dist/components/Avatar/AvatarText.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarText.js","names":["Text"],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport type { AvatarTextProps } from './types';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarCustomSizeStyle,\n} from './utils';\n\nconst AvatarText = memo(function AvatarText({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  name,\n  initials,\n  abbreviationStrategy,\n  customSize,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarTextProps) {\n  avatarStyles.useVariants({ size, text: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? name ?? initials}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Text color=\"inherit\" variant=\"inherit\" numberOfLines={1} style={avatarStyles.text}>\n        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}\n      </Text>\n    </Box>\n  );\n});\n\nAvatarText.displayName = 'AvatarText';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarText };\n"],"mappings":";;;;;;;;;AAcA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,UACA,sBACA,YACA,OACA,oBACA,KACA,GAAG,aACe;CAClB,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CAEjD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB,QAAQ;EAClD,GAAI;EACJ,OAAO;YAEP,oBAACA,QAAD;GAAM,OAAM;GAAU,SAAQ;GAAU,eAAe;GAAG,OAAO,aAAa;aAC3E,YAAY,2BAA2B,MAAM,qBAAqB;GAC9D,CAAA;EACH,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}
+{"version":3,"file":"AvatarText.js","names":["Text"],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { Box } from '../Box';\nimport { Text } from '../Text';\nimport type { AvatarTextProps } from './types';\nimport { useAvatarFontScale } from './useAvatarFontScale';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarSizeStyle,\n} from './utils';\n\nconst AvatarText = memo(function AvatarText({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  name,\n  initials,\n  abbreviationStrategy,\n  customSize,\n  maxFontSizeMultiplier,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarTextProps) {\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n  avatarStyles.useVariants({ size, text: variant });\n  const fontScaleFactor = useAvatarFontScale(resolvedMaxFontSizeMultiplier);\n\n  const rootStyle = useMemo(\n    () => [\n      avatarStyles.root,\n      avatarStaticStyles.root,\n      getAvatarSizeStyle(avatarStyles.root, customSize, fontScaleFactor),\n      style,\n    ],\n    [avatarStyles.root, customSize, fontScaleFactor, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? name ?? initials}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <Text\n        color=\"inherit\"\n        variant=\"inherit\"\n        numberOfLines={1}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n        style={avatarStyles.text}\n      >\n        {initials || generateAvatarAbbreviation(name, abbreviationStrategy)}\n      </Text>\n    </Box>\n  );\n});\n\nAvatarText.displayName = 'AvatarText';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarText };\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,UACA,sBACA,YACA,uBACA,OACA,oBACA,KACA,GAAG,aACe;CAClB,MAAM,gCAAgC,yBAAyB,WAAW,sBAAsB;CAChG,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CACjD,MAAM,kBAAkB,mBAAmB,8BAA8B;CAEzE,MAAM,YAAY,cACV;EACJ,aAAa;EACb,mBAAmB;EACnB,mBAAmB,aAAa,MAAM,YAAY,gBAAgB;EAClE;EACD,EACD;EAAC,aAAa;EAAM;EAAY;EAAiB;EAAM,CACxD;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB,QAAQ;EAClD,GAAI;EACJ,OAAO;YAEP,oBAACA,QAAD;GACE,OAAM;GACN,SAAQ;GACR,eAAe;GACf,uBAAuB;GACvB,OAAO,aAAa;aAEnB,YAAY,2BAA2B,MAAM,qBAAqB;GAC9D,CAAA;EACH,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}

package/dist/components/Avatar/types.d.cts

@@ -5,17 +5,21 @@ import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar/types.d.ts
-interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'> {
+interface AvatarFontScalingProps {
+  /** Caps avatar content and geometry at the control scale. Set null to remove the cap. @default 2 */
+  maxFontSizeMultiplier?: number | null;
+}
+interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
   /** Custom icon to display if the image fails and no text fallback is available. */
   icon?: IconSlotType;
 }
-interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'> {
+interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }
-interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'> {
+interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }

package/dist/components/Avatar/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,gBAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,yBAAA;;EAE1C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFV;EAIA,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA;EANhC;EAQV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA,CAAyB,YAAA;EAd9B;EAgBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAnBpB;EAqBb,GAAA;AAAA"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,sBAAA;;EAER,qBAAA;AAAA;AAAA,UAGQ,gBAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,yBAAA,2BACL,sBAAA;EAPF;EASA,GAAA,GAAM,GAAA,CAAI,IAAA;EANF;EAQR,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,gBACL,sBAAA;EAZK;EAcP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,CAAyB,YAAA,iBAC9B,sBAAA;EAtBA;EAwBF,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAzBT;EA2BxB,GAAA;AAAA"}

package/dist/components/Avatar/types.d.ts

@@ -5,17 +5,21 @@ import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
 //#region src/components/Avatar/types.d.ts
-interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'> {
+interface AvatarFontScalingProps {
+  /** Caps avatar content and geometry at the control scale. Set null to remove the cap. @default 2 */
+  maxFontSizeMultiplier?: number | null;
+}
+interface AvatarImageProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarImageProps, 'className' | 'srcSet'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
   /** Custom icon to display if the image fails and no text fallback is available. */
   icon?: IconSlotType;
 }
-interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'> {
+interface AvatarTextProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarTextProps, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }
-interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'> {
+interface AvatarIconProps extends Omit<ViewProps, 'children'>, Omit<UniversalAvatarIconProps<IconSlotType>, 'className'>, AvatarFontScalingProps {
   /** Ref to the underlying View. */
   ref?: Ref<View>;
 }

package/dist/components/Avatar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,gBAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,yBAAA;;EAE1C,GAAA,GAAM,GAAA,CAAI,IAAA;EAFV;EAIA,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA;EANhC;EAQV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SACA,IAAA,CAAK,SAAA,eAAwB,IAAA,CAAK,wBAAA,CAAyB,YAAA;EAd9B;EAgBrC,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAnBpB;EAqBb,GAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/components/Avatar/types.ts"],"mappings":";;;;;;;UAaU,sBAAA;;EAER,qBAAA;AAAA;AAAA,UAGQ,gBAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,yBAAA,2BACL,sBAAA;EAPF;EASA,GAAA,GAAM,GAAA,CAAI,IAAA;EANF;EAQR,IAAA,GAAO,YAAA;AAAA;AAAA,UAGC,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,gBACL,sBAAA;EAZK;EAcP,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,eAAA,SAEN,IAAA,CAAK,SAAA,eACL,IAAA,CAAK,wBAAA,CAAyB,YAAA,iBAC9B,sBAAA;EAtBA;EAwBF,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;AAAA,UAGF,WAAA,SAAoB,IAAA,CAAK,gBAAA;EAzBT;EA2BxB,GAAA;AAAA"}

package/dist/components/Avatar/useAvatarFontScale.cjs

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Avatar/useAvatarFontScale.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+function useAvatarFontScale(maxFontSizeMultiplier) {
+	const textStyle = generated_styles.avatarStyles.text;
+	const iconStyle = generated_styles.avatarStyles.icon;
+	const textScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const iconScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0));
+	return Math.max(textScaleFactor, iconScaleFactor);
+}
+//#endregion
+exports.useAvatarFontScale = useAvatarFontScale;

package/dist/components/Avatar/useAvatarFontScale.d.cts

@@ -0,0 +1,7 @@
+
+//#region src/components/Avatar/useAvatarFontScale.d.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+declare function useAvatarFontScale(maxFontSizeMultiplier?: number): number;
+//#endregion
+export { useAvatarFontScale };
+//# sourceMappingURL=useAvatarFontScale.d.cts.map

package/dist/components/Avatar/useAvatarFontScale.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.d.cts","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"mappings":";;;iBAMS,kBAAA,CAAmB,qBAAA"}

package/dist/components/Avatar/useAvatarFontScale.d.ts

@@ -0,0 +1,7 @@
+
+//#region src/components/Avatar/useAvatarFontScale.d.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+declare function useAvatarFontScale(maxFontSizeMultiplier?: number): number;
+//#endregion
+export { useAvatarFontScale };
+//# sourceMappingURL=useAvatarFontScale.d.ts.map

package/dist/components/Avatar/useAvatarFontScale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.d.ts","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"mappings":";;;iBAMS,kBAAA,CAAmB,qBAAA"}

package/dist/components/Avatar/useAvatarFontScale.js

@@ -0,0 +1,16 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
+import { avatarStyles } from "../../../generated/styles";
+//#region src/components/Avatar/useAvatarFontScale.ts
+/** Keep every avatar content type on one size-aware scale that contains text and icons. */
+function useAvatarFontScale(maxFontSizeMultiplier) {
+	const textStyle = avatarStyles.text;
+	const iconStyle = avatarStyles.icon;
+	const textScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
+	const iconScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0));
+	return Math.max(textScaleFactor, iconScaleFactor);
+}
+//#endregion
+export { useAvatarFontScale };
+
+//# sourceMappingURL=useAvatarFontScale.js.map

package/dist/components/Avatar/useAvatarFontScale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAvatarFontScale.js","names":[],"sources":["../../../src/components/Avatar/useAvatarFontScale.ts"],"sourcesContent":["import type { TextStyle } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\n\n/** Keep every avatar content type on one size-aware scale that contains text and icons. */\nfunction useAvatarFontScale(maxFontSizeMultiplier?: number): number {\n  const textStyle = avatarStyles.text as TextStyle;\n  const iconStyle = avatarStyles.icon as TextStyle;\n  const textScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n      (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n  );\n  const iconScaleFactor = useComponentFontScale(\n    maxFontSizeMultiplier,\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n      (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined),\n  );\n\n  return Math.max(textScaleFactor, iconScaleFactor);\n}\n\nexport { useAvatarFontScale };\n"],"mappings":";;;;;AAMA,SAAS,mBAAmB,uBAAwC;CAClE,MAAM,YAAY,aAAa;CAC/B,MAAM,YAAY,aAAa;CAC/B,MAAM,kBAAkB,sBACtB,wBACC,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,OAChE,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,GAClE;CACD,MAAM,kBAAkB,sBACtB,wBACC,OAAO,UAAU,aAAa,WAAW,UAAU,WAAW,KAAA,OAC5D,OAAO,UAAU,eAAe,WAAW,UAAU,aAAa,KAAA,GACtE;CAED,OAAO,KAAK,IAAI,iBAAiB,gBAAgB"}

package/dist/components/Avatar/utils.cjs

@@ -21,11 +21,14 @@ function generateAvatarAbbreviation(name, strategy = "firstAndLast") {
 	const initials = name.trim().split(/\s+/).filter(Boolean).map((word) => word[0]?.toUpperCase() ?? "");
 	return abbreviationStrategies[strategy](initials);
 }
-function getAvatarCustomSizeStyle(customSize) {
-	return customSize === void 0 ? void 0 : {
-		width: customSize,
-		height: customSize
-	};
+function getAvatarSizeStyle(rootStyle, customSize, fontScaleFactor) {
+	if (customSize === void 0 && fontScaleFactor === 1) return;
+	const width = customSize ?? rootStyle.width;
+	const height = customSize ?? rootStyle.height;
+	return typeof width === "number" && typeof height === "number" ? {
+		width: Math.round(width * fontScaleFactor),
+		height: Math.round(height * fontScaleFactor)
+	} : void 0;
 }
 function getDefaultAvatarIcon(variant) {
 	return DEFAULT_AVATAR_ICON[variant];
@@ -34,5 +37,5 @@ function getDefaultAvatarIcon(variant) {
 exports.DEFAULT_AVATAR_SIZE = DEFAULT_AVATAR_SIZE;
 exports.DEFAULT_AVATAR_VARIANT = DEFAULT_AVATAR_VARIANT;
 exports.generateAvatarAbbreviation = generateAvatarAbbreviation;
-exports.getAvatarCustomSizeStyle = getAvatarCustomSizeStyle;
+exports.getAvatarSizeStyle = getAvatarSizeStyle;
 exports.getDefaultAvatarIcon = getDefaultAvatarIcon;

package/dist/components/Avatar/utils.d.cts

@@ -7,8 +7,8 @@ import { ViewStyle } from "react-native";
 declare const DEFAULT_AVATAR_SIZE: AvatarSize;
 declare const DEFAULT_AVATAR_VARIANT: AvatarVariant;
 declare function generateAvatarAbbreviation(name?: string, strategy?: AvatarAbbreviationStrategy): string;
-declare function getAvatarCustomSizeStyle(customSize?: number): ViewStyle | undefined;
+declare function getAvatarSizeStyle(rootStyle: ViewStyle, customSize: number | undefined, fontScaleFactor: number): ViewStyle | undefined;
 declare function getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType;
 //#endregion
-export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle, getDefaultAvatarIcon };
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle, getDefaultAvatarIcon };
 //# sourceMappingURL=utils.d.cts.map

package/dist/components/Avatar/utils.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,wBAAA,CAAyB,UAAA,YAAsB,SAAA;AAAA,iBAI/C,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}
+{"version":3,"file":"utils.d.cts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,kBAAA,CACP,SAAA,EAAW,SAAA,EACX,UAAA,sBACA,eAAA,WACC,SAAA;AAAA,iBAgBM,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}

package/dist/components/Avatar/utils.d.ts

@@ -7,8 +7,8 @@ import { ViewStyle } from "react-native";
 declare const DEFAULT_AVATAR_SIZE: AvatarSize;
 declare const DEFAULT_AVATAR_VARIANT: AvatarVariant;
 declare function generateAvatarAbbreviation(name?: string, strategy?: AvatarAbbreviationStrategy): string;
-declare function getAvatarCustomSizeStyle(customSize?: number): ViewStyle | undefined;
+declare function getAvatarSizeStyle(rootStyle: ViewStyle, customSize: number | undefined, fontScaleFactor: number): ViewStyle | undefined;
 declare function getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType;
 //#endregion
-export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle, getDefaultAvatarIcon };
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle, getDefaultAvatarIcon };
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/Avatar/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,wBAAA,CAAyB,UAAA,YAAsB,SAAA;AAAA,iBAI/C,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}
+{"version":3,"file":"utils.d.ts","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"mappings":";;;;;;cAKM,mBAAA,EAAqB,UAAA;AAAA,cACrB,sBAAA,EAAwB,aAAA;AAAA,iBAoBrB,0BAAA,CACP,IAAA,WACA,QAAA,GAAU,0BAAA;AAAA,iBAgBH,kBAAA,CACP,SAAA,EAAW,SAAA,EACX,UAAA,sBACA,eAAA,WACC,SAAA;AAAA,iBAgBM,oBAAA,CAAqB,OAAA,EAAS,aAAA,GAAgB,YAAA"}

package/dist/components/Avatar/utils.js

@@ -20,16 +20,19 @@ function generateAvatarAbbreviation(name, strategy = "firstAndLast") {
 	const initials = name.trim().split(/\s+/).filter(Boolean).map((word) => word[0]?.toUpperCase() ?? "");
 	return abbreviationStrategies[strategy](initials);
 }
-function getAvatarCustomSizeStyle(customSize) {
-	return customSize === void 0 ? void 0 : {
-		width: customSize,
-		height: customSize
-	};
+function getAvatarSizeStyle(rootStyle, customSize, fontScaleFactor) {
+	if (customSize === void 0 && fontScaleFactor === 1) return;
+	const width = customSize ?? rootStyle.width;
+	const height = customSize ?? rootStyle.height;
+	return typeof width === "number" && typeof height === "number" ? {
+		width: Math.round(width * fontScaleFactor),
+		height: Math.round(height * fontScaleFactor)
+	} : void 0;
 }
 function getDefaultAvatarIcon(variant) {
 	return DEFAULT_AVATAR_ICON[variant];
 }
 //#endregion
-export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarCustomSizeStyle, getDefaultAvatarIcon };
+export { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, generateAvatarAbbreviation, getAvatarSizeStyle, getDefaultAvatarIcon };
 
 //# sourceMappingURL=utils.js.map

package/dist/components/Avatar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"sourcesContent":["import type { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant } from '@yahoo/uds-types';\nimport type { ViewStyle } from 'react-native';\n\nimport type { IconSlotType } from '../IconSlot';\n\nconst DEFAULT_AVATAR_SIZE: AvatarSize = 'md';\nconst DEFAULT_AVATAR_VARIANT: AvatarVariant = 'primary';\n\nconst DEFAULT_AVATAR_ICON: Record<AvatarVariant, IconSlotType> = {\n  primary: 'Person',\n  secondary: 'Building',\n};\n\nconst abbreviationStrategies: Record<\n  Exclude<AvatarAbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\nfunction generateAvatarAbbreviation(\n  name?: string,\n  strategy: AvatarAbbreviationStrategy = 'firstAndLast',\n): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\nfunction getAvatarCustomSizeStyle(customSize?: number): ViewStyle | undefined {\n  return customSize === undefined ? undefined : { width: customSize, height: customSize };\n}\n\nfunction getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType {\n  return DEFAULT_AVATAR_ICON[variant];\n}\n\nexport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarCustomSizeStyle,\n  getDefaultAvatarIcon,\n};\n"],"mappings":";;AAKA,MAAM,sBAAkC;AACxC,MAAM,yBAAwC;AAE9C,MAAM,sBAA2D;CAC/D,SAAS;CACT,WAAW;CACZ;AAED,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;AAED,SAAS,2BACP,MACA,WAAuC,gBAC/B;CACR,IAAI,CAAC,MACH,OAAO;CAGT,IAAI,OAAO,aAAa,YACtB,OAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QACxB,CAAC,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;CAElE,OAAO,uBAAuB,UAAU,SAAS;;AAGnD,SAAS,yBAAyB,YAA4C;CAC5E,OAAO,eAAe,KAAA,IAAY,KAAA,IAAY;EAAE,OAAO;EAAY,QAAQ;EAAY;;AAGzF,SAAS,qBAAqB,SAAsC;CAClE,OAAO,oBAAoB"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/Avatar/utils.ts"],"sourcesContent":["import type { AvatarAbbreviationStrategy, AvatarSize, AvatarVariant } from '@yahoo/uds-types';\nimport type { ViewStyle } from 'react-native';\n\nimport type { IconSlotType } from '../IconSlot';\n\nconst DEFAULT_AVATAR_SIZE: AvatarSize = 'md';\nconst DEFAULT_AVATAR_VARIANT: AvatarVariant = 'primary';\n\nconst DEFAULT_AVATAR_ICON: Record<AvatarVariant, IconSlotType> = {\n  primary: 'Person',\n  secondary: 'Building',\n};\n\nconst abbreviationStrategies: Record<\n  Exclude<AvatarAbbreviationStrategy, (name: string) => string>,\n  (initials: string[]) => string\n> = {\n  first: (initials) => initials[0] ?? '',\n  last: (initials) => initials[initials.length - 1] ?? '',\n  firstAndLast: (initials) =>\n    initials.length === 1 ? (initials[0] ?? '') : `${initials[0]}${initials[initials.length - 1]}`,\n  firstTwo: (initials) => initials.slice(0, 2).join(''),\n  firstThree: (initials) => initials.slice(0, 3).join(''),\n  firstOfEach: (initials) => initials.join(''),\n};\n\nfunction generateAvatarAbbreviation(\n  name?: string,\n  strategy: AvatarAbbreviationStrategy = 'firstAndLast',\n): string {\n  if (!name) {\n    return '';\n  }\n\n  if (typeof strategy === 'function') {\n    return strategy(name);\n  }\n\n  const words = name.trim().split(/\\s+/).filter(Boolean);\n  const initials = words.map((word) => word[0]?.toUpperCase() ?? '');\n\n  return abbreviationStrategies[strategy](initials);\n}\n\nfunction getAvatarSizeStyle(\n  rootStyle: ViewStyle,\n  customSize: number | undefined,\n  fontScaleFactor: number,\n): ViewStyle | undefined {\n  if (customSize === undefined && fontScaleFactor === 1) {\n    return undefined;\n  }\n\n  const width = customSize ?? rootStyle.width;\n  const height = customSize ?? rootStyle.height;\n\n  return typeof width === 'number' && typeof height === 'number'\n    ? {\n        width: Math.round(width * fontScaleFactor),\n        height: Math.round(height * fontScaleFactor),\n      }\n    : undefined;\n}\n\nfunction getDefaultAvatarIcon(variant: AvatarVariant): IconSlotType {\n  return DEFAULT_AVATAR_ICON[variant];\n}\n\nexport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  generateAvatarAbbreviation,\n  getAvatarSizeStyle,\n  getDefaultAvatarIcon,\n};\n"],"mappings":";;AAKA,MAAM,sBAAkC;AACxC,MAAM,yBAAwC;AAE9C,MAAM,sBAA2D;CAC/D,SAAS;CACT,WAAW;CACZ;AAED,MAAM,yBAGF;CACF,QAAQ,aAAa,SAAS,MAAM;CACpC,OAAO,aAAa,SAAS,SAAS,SAAS,MAAM;CACrD,eAAe,aACb,SAAS,WAAW,IAAK,SAAS,MAAM,KAAM,GAAG,SAAS,KAAK,SAAS,SAAS,SAAS;CAC5F,WAAW,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACrD,aAAa,aAAa,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK,GAAG;CACvD,cAAc,aAAa,SAAS,KAAK,GAAG;CAC7C;AAED,SAAS,2BACP,MACA,WAAuC,gBAC/B;CACR,IAAI,CAAC,MACH,OAAO;CAGT,IAAI,OAAO,aAAa,YACtB,OAAO,SAAS,KAAK;CAIvB,MAAM,WADQ,KAAK,MAAM,CAAC,MAAM,MAAM,CAAC,OAAO,QACxB,CAAC,KAAK,SAAS,KAAK,IAAI,aAAa,IAAI,GAAG;CAElE,OAAO,uBAAuB,UAAU,SAAS;;AAGnD,SAAS,mBACP,WACA,YACA,iBACuB;CACvB,IAAI,eAAe,KAAA,KAAa,oBAAoB,GAClD;CAGF,MAAM,QAAQ,cAAc,UAAU;CACtC,MAAM,SAAS,cAAc,UAAU;CAEvC,OAAO,OAAO,UAAU,YAAY,OAAO,WAAW,WAClD;EACE,OAAO,KAAK,MAAM,QAAQ,gBAAgB;EAC1C,QAAQ,KAAK,MAAM,SAAS,gBAAgB;EAC7C,GACD,KAAA;;AAGN,SAAS,qBAAqB,SAAsC;CAClE,OAAO,oBAAoB"}

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -21,8 +21,8 @@ let generated_styles = require("../../../generated/styles");
 let react_native_reanimated = require("react-native-reanimated");
 react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
 let react_native_gesture_handler = require("react-native-gesture-handler");
-let react_native_screens = require("react-native-screens");
 let react_native_safe_area_context = require("react-native-safe-area-context");
+let react_native_screens = require("react-native-screens");
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = (0, react.useState)(0);

package/dist/components/BottomSheet/BottomSheet.js

@@ -18,8 +18,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { bottomSheetStyles } from "../../../generated/styles";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
-import { FullWindowOverlay } from "react-native-screens";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FullWindowOverlay } from "react-native-screens";
 //#region src/components/BottomSheet/BottomSheet.tsx
 function useScreenCornerRadius() {
 	const [, forceUpdate] = useState(0);

package/dist/components/Button/buttonTheme.cjs

@@ -22,6 +22,10 @@ function getLayerStyle(theme, path) {
 function getIconSize(iconStyle) {
 	return (typeof iconStyle.fontSize === "number" ? iconStyle.fontSize : void 0) ?? (typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : void 0) ?? 16;
 }
+/** Base icon size for an IconButton size layer. */
+function getIconButtonIconSize(theme, size) {
+	return getIconSize(getLayerStyle(theme, iconButtonSizePath(size, "icon")));
+}
 function getVerticalPadding(rootStyle) {
 	return (typeof rootStyle.paddingVertical === "number" ? rootStyle.paddingVertical : void 0) ?? (typeof rootStyle.padding === "number" ? rootStyle.padding : void 0) ?? 0;
 }
@@ -44,8 +48,16 @@ function getSafeIconCell(fontSize) {
 	const overflowBelowEm = Math.max(0, -metrics.bbox.minY);
 	return Math.ceil(fontSize) + getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) + getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize);
 }
-/** Safe native content metrics while retaining the token-derived target control height. */
-function getButtonControlMetrics(theme, size) {
+/**
+* Safe native content metrics while retaining the token-derived target control height.
+*
+* `fontScaleFactor` pre-scales container metrics only. A single number keeps
+* the legacy linear behavior; distinct label/icon factors let Android 14+
+* geometry follow its size-dependent nonlinear font curve. The returned
+* `labelLineHeight`/`iconCellHeight` stay unscaled because native Text applies
+* the same cap.
+*/
+function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, buttonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, buttonSizePath(size, "icon"));
 	const textStyle = getLayerStyle(theme, buttonSizePath(size, "rootText"));
@@ -53,32 +65,41 @@ function getButtonControlMetrics(theme, size) {
 	const iconSize = getIconSize(iconStyle);
 	const fontSize = typeof textStyle.fontSize === "number" ? textStyle.fontSize : iconSize;
 	const tokenLineHeight = typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : fontSize;
-	const targetContentHeight = Math.max(iconSize, tokenLineHeight);
+	const labelScaleFactor = typeof fontScaleFactor === "number" ? fontScaleFactor : fontScaleFactor.label;
+	const iconScaleFactor = typeof fontScaleFactor === "number" ? fontScaleFactor : fontScaleFactor.icon;
+	const iconCellScaleFactor = typeof fontScaleFactor === "number" ? fontScaleFactor : fontScaleFactor.iconCell ?? fontScaleFactor.icon;
+	const targetContentHeight = Math.max(iconSize * iconScaleFactor, tokenLineHeight * labelScaleFactor);
 	const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);
 	const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);
 	const iconCellHeight = getSafeIconCell(iconSize);
+	const safeContentHeight = Math.max(labelLineHeight * labelScaleFactor, iconCellHeight * iconCellScaleFactor);
 	return {
 		minHeight,
 		labelLineHeight,
 		iconCellHeight,
-		paddingVertical: Math.max(0, (minHeight - Math.max(labelLineHeight, iconCellHeight)) / 2)
+		paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2)
 	};
 }
-/** Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target. */
-function getIconButtonControlMetrics(theme, size) {
+/**
+* Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.
+*
+* `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit
+* token height stays fixed, with padding absorbing the scaled content.
+*/
+function getIconButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, "root"));
 	const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, "icon"));
-	const iconSize = getIconSize(iconStyle);
+	const iconSize = getIconButtonIconSize(theme, size);
 	const tokenLineHeight = typeof iconStyle.lineHeight === "number" ? iconStyle.lineHeight : iconSize;
 	const paddingVertical = getVerticalPadding(rootStyle);
 	const explicitHeight = typeof rootStyle.height === "number" ? rootStyle.height : void 0;
 	const hasExplicitHeight = SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== void 0;
-	const minHeight = hasExplicitHeight ? explicitHeight : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight));
+	const minHeight = hasExplicitHeight ? explicitHeight : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);
 	const iconCellHeight = getSafeIconCell(iconSize);
 	return {
 		minHeight,
 		iconCellHeight,
-		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight)) / 2),
+		paddingVertical: Math.max(0, (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2),
 		hasExplicitHeight
 	};
 }
@@ -93,4 +114,5 @@ function getButtonTextStyle(textStyle, labelLineHeight) {
 exports.getButtonControlMetrics = getButtonControlMetrics;
 exports.getButtonTextStyle = getButtonTextStyle;
 exports.getIconButtonControlMetrics = getIconButtonControlMetrics;
+exports.getIconButtonIconSize = getIconButtonIconSize;
 exports.getSafeIconCell = getSafeIconCell;