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

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/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;
 }
@@ -47,10 +51,11 @@ function getSafeIconCell(fontSize) {
 /**
 * Safe native content metrics while retaining the token-derived target control height.
 *
-* `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
-* metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
-* because they go into Text/Icon styles, which native multiplies by the same
-* capped factor — container math must mirror that, not double-apply it.
+* `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"));
@@ -60,11 +65,14 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	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) * fontScaleFactor;
+	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, iconCellHeight) * fontScaleFactor;
+	const safeContentHeight = Math.max(labelLineHeight * labelScaleFactor, iconCellHeight * iconCellScaleFactor);
 	return {
 		minHeight,
 		labelLineHeight,
@@ -81,7 +89,7 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 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;
@@ -106,4 +114,5 @@ function getButtonTextStyle(textStyle, labelLineHeight) {
 exports.getButtonControlMetrics = getButtonControlMetrics;
 exports.getButtonTextStyle = getButtonTextStyle;
 exports.getIconButtonControlMetrics = getIconButtonControlMetrics;
+exports.getIconButtonIconSize = getIconButtonIconSize;
 exports.getSafeIconCell = getSafeIconCell;

package/dist/components/Button/buttonTheme.d.cts

@@ -6,17 +6,24 @@ import { TextStyle } from "react-native";
 type ButtonTheme = {
   components: Record<string, any>;
 };
+/** Base icon size for an IconButton size layer. */
+declare function getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number;
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
 /**
  * Safe native content metrics while retaining the token-derived target control height.
  *
- * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
- * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
- * because they go into Text/Icon styles, which native multiplies by the same
- * capped factor — container math must mirror that, not double-apply it.
+ * `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.
  */
-declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number): {
+declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number | {
+  label: number;
+  icon: number;
+  iconCell?: number;
+}): {
   minHeight: number;
   labelLineHeight: number;
   iconCellHeight: number;
@@ -37,5 +44,5 @@ declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButto
 /** Apply the metric-safe line height after the token typography styles. */
 declare function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle;
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 //# sourceMappingURL=buttonTheme.d.cts.map

package/dist/components/Button/buttonTheme.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAwBA;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAEA,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA8Bc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.cts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA6BL,qBAAA,CAAsB,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,cAAA;;iBAoCzC,eAAA,CAAgB,QAAA;AAjEZ;;;;;;;;;AAAA,iBA0FJ,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.d.ts

@@ -6,17 +6,24 @@ import { TextStyle } from "react-native";
 type ButtonTheme = {
   components: Record<string, any>;
 };
+/** Base icon size for an IconButton size layer. */
+declare function getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number;
 /** Safe line box for the icon font's em square plus any bbox overflow. */
 declare function getSafeIconCell(fontSize: number): number;
 /**
  * Safe native content metrics while retaining the token-derived target control height.
  *
- * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
- * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
- * because they go into Text/Icon styles, which native multiplies by the same
- * capped factor — container math must mirror that, not double-apply it.
+ * `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.
  */
-declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number): {
+declare function getButtonControlMetrics(theme: ButtonTheme, size: ButtonSize, fontScaleFactor?: number | {
+  label: number;
+  icon: number;
+  iconCell?: number;
+}): {
   minHeight: number;
   labelLineHeight: number;
   iconCellHeight: number;
@@ -37,5 +44,5 @@ declare function getIconButtonControlMetrics(theme: ButtonTheme, size: IconButto
 /** Apply the metric-safe line height after the token typography styles. */
 declare function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle;
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 //# sourceMappingURL=buttonTheme.d.ts.map

package/dist/components/Button/buttonTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA4DE,eAAA,CAAgB,QAAA;;;AAAhC;;;;;AAwBA;iBAAgB,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAEA,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA8Bc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}
+{"version":3,"file":"buttonTheme.d.ts","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"mappings":";;;;;KAKK,WAAA;EAEH,UAAA,EAAY,MAAA;AAAA;;iBA6BL,qBAAA,CAAsB,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,cAAA;;iBAoCzC,eAAA,CAAgB,QAAA;AAjEZ;;;;;;;;;AAAA,iBA0FJ,uBAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,UAAA,EACN,eAAA;EAA4B,KAAA;EAAe,IAAA;EAAc,QAAA;AAAA;EAEzD,SAAA;EACA,eAAA;EACA,cAAA;EACA,eAAA;AAAA;;;;;;;iBA4Cc,2BAAA,CACd,KAAA,EAAO,WAAA,EACP,IAAA,EAAM,cAAA,EACN,eAAA;EAEA,SAAA;EACA,cAAA;EACA,eAAA;EACA,iBAAA;AAAA;;iBA4Bc,kBAAA,CAAmB,SAAA,EAAW,SAAA,EAAW,eAAA,WAA0B,SAAA"}

package/dist/components/Button/buttonTheme.js

@@ -21,6 +21,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;
 }
@@ -46,10 +50,11 @@ function getSafeIconCell(fontSize) {
 /**
 * Safe native content metrics while retaining the token-derived target control height.
 *
-* `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container
-* metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled
-* because they go into Text/Icon styles, which native multiplies by the same
-* capped factor — container math must mirror that, not double-apply it.
+* `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"));
@@ -59,11 +64,14 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 	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) * fontScaleFactor;
+	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, iconCellHeight) * fontScaleFactor;
+	const safeContentHeight = Math.max(labelLineHeight * labelScaleFactor, iconCellHeight * iconCellScaleFactor);
 	return {
 		minHeight,
 		labelLineHeight,
@@ -80,7 +88,7 @@ function getButtonControlMetrics(theme, size, fontScaleFactor = 1) {
 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;
@@ -102,6 +110,6 @@ function getButtonTextStyle(textStyle, labelLineHeight) {
 	};
 }
 //#endregion
-export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getSafeIconCell };
+export { getButtonControlMetrics, getButtonTextStyle, getIconButtonControlMetrics, getIconButtonIconSize, getSafeIconCell };
 
 //# sourceMappingURL=buttonTheme.js.map

package/dist/components/Button/buttonTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { fontMetrics } from '../../../generated/fontMetrics';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n// Covers common native font boxes (roughly 1.2em) plus pixel-rounding headroom.\nconst UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getMetricHeight(value: number, unitsPerEm: number, fontSize: number): number {\n  return Math.ceil((Math.max(0, value) / unitsPerEm) * fontSize);\n}\n\nfunction getSafeLabelLineHeight(textStyle: TextStyle, fallbackFontSize: number): number {\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : fallbackFontSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const metrics =\n    typeof textStyle.fontFamily === 'string' ? fontMetrics[textStyle.fontFamily] : undefined;\n\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));\n  }\n\n  const metricsLineHeight =\n    getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);\n\n  return Math.max(tokenLineHeight, metricsLineHeight);\n}\n\n/** Safe line box for the icon font's em square plus any bbox overflow. */\nexport function getSafeIconCell(fontSize: number): number {\n  const metrics = fontMetrics['uds-icons'];\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);\n  }\n\n  const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);\n  const overflowBelowEm = Math.max(0, -metrics.bbox.minY);\n\n  return (\n    Math.ceil(fontSize) +\n    getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize)\n  );\n}\n\n/**\n * Safe native content metrics while retaining the token-derived target control height.\n *\n * `fontScaleFactor` (the capped OS font scale, >= 1) pre-scales container\n * metrics only. The returned `labelLineHeight`/`iconCellHeight` stay unscaled\n * because they go into Text/Icon styles, which native multiplies by the same\n * capped factor — container math must mirror that, not double-apply it.\n */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n  fontScaleFactor = 1,\n): {\n  minHeight: number;\n  labelLineHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n} {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const targetContentHeight = Math.max(iconSize, tokenLineHeight) * fontScaleFactor;\n  const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);\n  const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);\n  const iconCellHeight = getSafeIconCell(iconSize);\n  const safeContentHeight = Math.max(labelLineHeight, iconCellHeight) * fontScaleFactor;\n\n  return {\n    minHeight,\n    labelLineHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2),\n  };\n}\n\n/**\n * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.\n *\n * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit\n * token height stays fixed, with padding absorbing the scaled content.\n */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n  fontScaleFactor = 1,\n): {\n  minHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n  hasExplicitHeight: boolean;\n} {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconSize(iconStyle);\n  const tokenLineHeight =\n    typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : iconSize;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n  const hasExplicitHeight =\n    SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined;\n  const minHeight = hasExplicitHeight\n    ? (explicitHeight as number)\n    : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);\n  const iconCellHeight = getSafeIconCell(iconSize);\n\n  return {\n    minHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(\n      0,\n      (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2,\n    ),\n    hasExplicitHeight,\n  };\n}\n\n/** Apply the metric-safe line height after the token typography styles. */\nexport function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: labelLineHeight,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"buttonTheme.js","names":[],"sources":["../../../src/components/Button/buttonTheme.ts"],"sourcesContent":["import type { ButtonSize, IconButtonSize } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\nimport { fontMetrics } from '../../../generated/fontMetrics';\n\ntype ButtonTheme = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  components: Record<string, any>;\n};\n\nconst SHARED_BUTTON_ICONBUTTON_SIZES = new Set<IconButtonSize>(['xs', 'sm', 'md', 'lg']);\n// Covers common native font boxes (roughly 1.2em) plus pixel-rounding headroom.\nconst UNKNOWN_FONT_LINE_HEIGHT_RATIO = 1.3;\n\nfunction buttonSizePath(size: ButtonSize, layer: 'root' | 'icon' | 'rootText'): string {\n  return `button/size/${size}/${layer}/rest`;\n}\n\nfunction iconButtonSizePath(size: IconButtonSize, layer: 'root' | 'icon'): string {\n  return `iconButton/size/${size}/${layer}/rest`;\n}\n\nfunction getLayerStyle(theme: ButtonTheme, path: string): ViewStyle | TextStyle {\n  const style = theme.components[path];\n  return style && typeof style === 'object' ? style : {};\n}\n\nfunction getIconSize(iconStyle: TextStyle): number {\n  return (\n    (typeof iconStyle.fontSize === 'number' ? iconStyle.fontSize : undefined) ??\n    (typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : undefined) ??\n    16\n  );\n}\n\n/** Base icon size for an IconButton size layer. */\nfunction getIconButtonIconSize(theme: ButtonTheme, size: IconButtonSize): number {\n  return getIconSize(getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle);\n}\n\nfunction getVerticalPadding(rootStyle: ViewStyle): number {\n  return (\n    (typeof rootStyle.paddingVertical === 'number' ? rootStyle.paddingVertical : undefined) ??\n    (typeof rootStyle.padding === 'number' ? rootStyle.padding : undefined) ??\n    0\n  );\n}\n\nfunction getMetricHeight(value: number, unitsPerEm: number, fontSize: number): number {\n  return Math.ceil((Math.max(0, value) / unitsPerEm) * fontSize);\n}\n\nfunction getSafeLabelLineHeight(textStyle: TextStyle, fallbackFontSize: number): number {\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : fallbackFontSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const metrics =\n    typeof textStyle.fontFamily === 'string' ? fontMetrics[textStyle.fontFamily] : undefined;\n\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.max(tokenLineHeight, Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO));\n  }\n\n  const metricsLineHeight =\n    getMetricHeight(metrics.ascent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(-metrics.descent, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(metrics.lineGap, metrics.unitsPerEm, fontSize);\n\n  return Math.max(tokenLineHeight, metricsLineHeight);\n}\n\n/** Safe line box for the icon font's em square plus any bbox overflow. */\nexport function getSafeIconCell(fontSize: number): number {\n  const metrics = fontMetrics['uds-icons'];\n  if (!metrics || metrics.unitsPerEm <= 0) {\n    return Math.ceil(fontSize * UNKNOWN_FONT_LINE_HEIGHT_RATIO);\n  }\n\n  const overflowAboveEm = Math.max(0, metrics.bbox.maxY - metrics.unitsPerEm);\n  const overflowBelowEm = Math.max(0, -metrics.bbox.minY);\n\n  return (\n    Math.ceil(fontSize) +\n    getMetricHeight(overflowAboveEm, metrics.unitsPerEm, fontSize) +\n    getMetricHeight(overflowBelowEm, metrics.unitsPerEm, fontSize)\n  );\n}\n\n/**\n * Safe native content metrics while retaining the token-derived target control height.\n *\n * `fontScaleFactor` pre-scales container metrics only. A single number keeps\n * the legacy linear behavior; distinct label/icon factors let Android 14+\n * geometry follow its size-dependent nonlinear font curve. The returned\n * `labelLineHeight`/`iconCellHeight` stay unscaled because native Text applies\n * the same cap.\n */\nexport function getButtonControlMetrics(\n  theme: ButtonTheme,\n  size: ButtonSize,\n  fontScaleFactor: number | { label: number; icon: number; iconCell?: number } = 1,\n): {\n  minHeight: number;\n  labelLineHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n} {\n  const rootStyle = getLayerStyle(theme, buttonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, buttonSizePath(size, 'icon')) as TextStyle;\n  const textStyle = getLayerStyle(theme, buttonSizePath(size, 'rootText')) as TextStyle;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const iconSize = getIconSize(iconStyle);\n  const fontSize = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : iconSize;\n  const tokenLineHeight =\n    typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : fontSize;\n  const labelScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.label;\n  const iconScaleFactor =\n    typeof fontScaleFactor === 'number' ? fontScaleFactor : fontScaleFactor.icon;\n  const iconCellScaleFactor =\n    typeof fontScaleFactor === 'number'\n      ? fontScaleFactor\n      : (fontScaleFactor.iconCell ?? fontScaleFactor.icon);\n  const targetContentHeight = Math.max(\n    iconSize * iconScaleFactor,\n    tokenLineHeight * labelScaleFactor,\n  );\n  const minHeight = Math.ceil(paddingVertical * 2 + targetContentHeight);\n  const labelLineHeight = getSafeLabelLineHeight(textStyle, iconSize);\n  const iconCellHeight = getSafeIconCell(iconSize);\n  const safeContentHeight = Math.max(\n    labelLineHeight * labelScaleFactor,\n    iconCellHeight * iconCellScaleFactor,\n  );\n\n  return {\n    minHeight,\n    labelLineHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(0, (minHeight - safeContentHeight) / 2),\n  };\n}\n\n/**\n * Safe icon cell within the token-derived control size; explicit token height (match-button-height opt-in) wins as the target.\n *\n * `fontScaleFactor` behaves as in {@link getButtonControlMetrics}; an explicit\n * token height stays fixed, with padding absorbing the scaled content.\n */\nexport function getIconButtonControlMetrics(\n  theme: ButtonTheme,\n  size: IconButtonSize,\n  fontScaleFactor = 1,\n): {\n  minHeight: number;\n  iconCellHeight: number;\n  paddingVertical: number;\n  hasExplicitHeight: boolean;\n} {\n  const rootStyle = getLayerStyle(theme, iconButtonSizePath(size, 'root')) as ViewStyle;\n  const iconStyle = getLayerStyle(theme, iconButtonSizePath(size, 'icon')) as TextStyle;\n  const iconSize = getIconButtonIconSize(theme, size);\n  const tokenLineHeight =\n    typeof iconStyle.lineHeight === 'number' ? iconStyle.lineHeight : iconSize;\n  const paddingVertical = getVerticalPadding(rootStyle);\n  const explicitHeight = typeof rootStyle.height === 'number' ? rootStyle.height : undefined;\n  const hasExplicitHeight =\n    SHARED_BUTTON_ICONBUTTON_SIZES.has(size) && explicitHeight !== undefined;\n  const minHeight = hasExplicitHeight\n    ? (explicitHeight as number)\n    : Math.ceil(paddingVertical * 2 + Math.max(iconSize, tokenLineHeight) * fontScaleFactor);\n  const iconCellHeight = getSafeIconCell(iconSize);\n\n  return {\n    minHeight,\n    iconCellHeight,\n    paddingVertical: Math.max(\n      0,\n      (minHeight - Math.max(iconSize, iconCellHeight) * fontScaleFactor) / 2,\n    ),\n    hasExplicitHeight,\n  };\n}\n\n/** Apply the metric-safe line height after the token typography styles. */\nexport function getButtonTextStyle(textStyle: TextStyle, labelLineHeight: number): TextStyle {\n  return {\n    ...textStyle,\n    lineHeight: labelLineHeight,\n  };\n}\n\nexport { getIconButtonIconSize };\n"],"mappings":"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"}

package/dist/components/Button.cjs

@@ -3,11 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
 const require_index = require("../motion-tokens/dist/index.cjs");
 const require_motion = require("../motion.cjs");
+const require_fontScaling_FontScalingContext = require("../fontScaling/FontScalingContext.cjs");
+const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
 const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
 const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
 const require_components_IconSlot = require("./IconSlot.cjs");
 const require_components_Text = require("./Text.cjs");
-const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
 const require_components_Pressable = require("./Pressable.cjs");
 let react = require("react");
 let react_native = require("react-native");
@@ -88,14 +89,10 @@ function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap })
 */
 const Button = (0, react.memo)(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
-	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
-	const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier);
+	const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const { theme } = (0, react_native_unistyles.useUnistyles)();
-	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size, fontScaleFactor), [
-		theme,
-		size,
-		fontScaleFactor
-	]);
+	const baseMetrics = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size), [theme, size]);
+	const labelScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);
 	const [pressed, setPressed] = (0, react.useState)(false);
 	generated_styles.buttonStyles.useVariants({
 		size,
@@ -105,6 +102,19 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	});
 	const buttonGap = generated_styles.buttonStyles.root.gap;
 	const iconSize = generated_styles.buttonStyles.icon.fontSize;
+	const iconScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, iconSize);
+	const iconCellScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.iconCellHeight);
+	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = (0, react.useMemo)(() => require_components_Button_buttonTheme.getButtonControlMetrics(theme, size, {
+		label: labelScaleFactor,
+		icon: iconScaleFactor,
+		iconCell: iconCellScaleFactor
+	}), [
+		theme,
+		size,
+		labelScaleFactor,
+		iconScaleFactor,
+		iconCellScaleFactor
+	]);
 	const animatedTheme = (0, react_native_unistyles_reanimated.useAnimatedTheme)();
 	const scale = (0, react_native_reanimated.useSharedValue)(require_index.SCALE_EFFECTS.none);
 	const handlePressIn = (0, react.useCallback)((event) => {
@@ -125,7 +135,11 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 		scale,
 		onPressOut
 	]);
-	const childrenNode = children && ((0, react.isValidElement)(children) ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+	const childrenNode = children && ((0, react.isValidElement)(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_fontScaling_FontScalingContext.ResolvedControlFontScalingProvider, {
+		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+		variant: "inherit",
 		numberOfLines: 1,
 		textAlign: "center",
 		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
@@ -151,8 +165,8 @@ const Button = (0, react.memo)(function Button({ variant = "primary", size = "md
 	const showStartIcon = !!startIcon && !loading;
 	const showEndIcon = !!endIcon && !loading;
 	const iconSizeToken = generated_styles.buttonStyles.icon.iconSizeToken ?? "sm";
-	const scaledIconSize = Math.round(iconSize * fontScaleFactor);
-	const scaledIconCellHeight = Math.ceil(iconCellHeight * fontScaleFactor);
+	const scaledIconSize = Math.round(iconSize * iconScaleFactor);
+	const scaledIconCellHeight = Math.ceil(iconCellHeight * iconCellScaleFactor);
 	const startContent = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize: scaledIconSize,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAuHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAkBU;EAhBV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;;;;;;EAwBA,qBAAA;EAlBU;EAoBV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.cts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAwHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAkBU;EAhBV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;;;;;;EAwBA,qBAAA;EAlBU;EAoBV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAuHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAkBU;EAhBV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;;;;;;EAwBA,qBAAA;EAlBU;EAoBV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../src/components/Button.tsx"],"mappings":";;;;;;;;;UAwHU,WAAA,SAAoB,IAAA,CAAK,gBAAA;;EAEjC,OAAA,GAAU,iBAAA;EAFF;EAIR,IAAA,GAAO,UAAA;;EAEP,WAAA,GAAc,WAAA;EAJJ;EAMV,SAAA,GAAY,YAAA;EAFE;EAId,OAAA,GAAU,YAAA;EAAA;EAEV,OAAA;EAkBU;EAhBV,QAAA;EAd4B;EAgB5B,QAAA,GAAW,KAAA,CAAM,SAAA;EAhBe;;;;EAqBhC,cAAA;EAjBA;;;;;;EAwBA,qBAAA;EAlBU;EAoBV,GAAA,GAAM,GAAA,CAAI,IAAA;AAAA;;;;;;;;;;;AAAI;;;;;;;;;;;;;;;;;;;;;;cAuCV,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Button.js

@@ -1,11 +1,12 @@
 /*! © 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 { ResolvedControlFontScalingProvider } from "../fontScaling/FontScalingContext.js";
+import { useComponentFontScale } from "../fontScaling/useFontScale.js";
 import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
 import { getButtonControlMetrics, getButtonTextStyle } from "./Button/buttonTheme.js";
 import { IconSlot } from "./IconSlot.js";
 import { Text as Text$1 } from "./Text.js";
-import { useFontScale } from "../fontScaling/useFontScale.js";
 import { AnimatedPressable } from "./Pressable.js";
 import { isValidElement, memo, useCallback, useMemo, useState } from "react";
 import { ActivityIndicator } from "react-native";
@@ -85,14 +86,10 @@ function AnimatedIconSlot({ children, visible, iconSize, iconCellHeight, gap })
 */
 const Button = memo(function Button({ variant = "primary", size = "md", iconVariant = "outline", startIcon, endIcon, loading, disabled, width: _width, children, style, accessibilityLabel, accessibilityHint, disableEffects = false, maxFontSizeMultiplier, onPressIn, onPressOut, ref, ...props }) {
 	const shouldAnimate = !disableEffects;
-	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
-	const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);
+	const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
 	const { theme } = useUnistyles();
-	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(() => getButtonControlMetrics(theme, size, fontScaleFactor), [
-		theme,
-		size,
-		fontScaleFactor
-	]);
+	const baseMetrics = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);
+	const labelScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.labelLineHeight);
 	const [pressed, setPressed] = useState(false);
 	buttonStyles.useVariants({
 		size,
@@ -102,6 +99,19 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	});
 	const buttonGap = buttonStyles.root.gap;
 	const iconSize = buttonStyles.icon.fontSize;
+	const iconScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, iconSize);
+	const iconCellScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, baseMetrics.iconCellHeight);
+	const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(() => getButtonControlMetrics(theme, size, {
+		label: labelScaleFactor,
+		icon: iconScaleFactor,
+		iconCell: iconCellScaleFactor
+	}), [
+		theme,
+		size,
+		labelScaleFactor,
+		iconScaleFactor,
+		iconCellScaleFactor
+	]);
 	const animatedTheme = useAnimatedTheme();
 	const scale = useSharedValue(SCALE_EFFECTS.none);
 	const handlePressIn = useCallback((event) => {
@@ -122,7 +132,11 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 		scale,
 		onPressOut
 	]);
-	const childrenNode = children && (isValidElement(children) ? children : /* @__PURE__ */ jsx(Text$1, {
+	const childrenNode = children && (isValidElement(children) ? /* @__PURE__ */ jsx(ResolvedControlFontScalingProvider, {
+		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
+		children
+	}) : /* @__PURE__ */ jsx(Text$1, {
+		variant: "inherit",
 		numberOfLines: 1,
 		textAlign: "center",
 		maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
@@ -148,8 +162,8 @@ const Button = memo(function Button({ variant = "primary", size = "md", iconVari
 	const showStartIcon = !!startIcon && !loading;
 	const showEndIcon = !!endIcon && !loading;
 	const iconSizeToken = buttonStyles.icon.iconSizeToken ?? "sm";
-	const scaledIconSize = Math.round(iconSize * fontScaleFactor);
-	const scaledIconCellHeight = Math.ceil(iconCellHeight * fontScaleFactor);
+	const scaledIconSize = Math.round(iconSize * iconScaleFactor);
+	const scaledIconCellHeight = Math.ceil(iconCellHeight * iconCellScaleFactor);
 	const startContent = /* @__PURE__ */ jsx(AnimatedIconSlot, {
 		visible: showLoading || showStartIcon,
 		iconSize: scaledIconSize,

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 { useFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\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  /**\n   * Caps how far the label and icons grow with the OS text-size setting; the\n   * button grows to fit the scaled content. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              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  maxFontSizeMultiplier,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  // Inside a control, \"no cap resolved\" must force-uncap (0) rather than let\n  // the label's own variant default or an inherited cap apply.\n  const resolvedMaxFontSizeMultiplier =\n    useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n  const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);\n\n  const { theme } = useUnistyles();\n  const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(\n    () => getButtonControlMetrics(theme, size, fontScaleFactor),\n    [theme, size, fontScaleFactor],\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        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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  // Containers pre-scale by the capped factor; icon styles stay unscaled and\n  // native grows them by the same capped multiplier.\n  const scaledIconSize = Math.round(iconSize * fontScaleFactor);\n  const scaledIconCellHeight = Math.ceil(iconCellHeight * fontScaleFactor);\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot\n      visible={showLoading || showStartIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      {showLoading ? (\n        <ActivityIndicator size={scaledIconSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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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"}
+{"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 { ResolvedControlFontScalingProvider } from '../fontScaling/FontScalingContext';\nimport { useComponentFontScale } from '../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\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  /**\n   * Caps how far the label and icons grow with the OS text-size setting; the\n   * button grows to fit the scaled content. Set null to remove the cap;\n   * override app-wide via UDSFontScalingProvider.\n   * @default 2\n   */\n  maxFontSizeMultiplier?: number | null;\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              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  maxFontSizeMultiplier,\n  onPressIn,\n  onPressOut,\n  ref,\n  ...props\n}: ButtonProps) {\n  const shouldAnimate = !disableEffects;\n\n  // Inside a control, \"no cap resolved\" must force-uncap (0) rather than let\n  // the label's own variant default or an inherited cap apply.\n  const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n  const { theme } = useUnistyles();\n  const baseMetrics = useMemo(() => getButtonControlMetrics(theme, size), [theme, size]);\n  const labelScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    baseMetrics.labelLineHeight,\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  const iconScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, iconSize);\n  const iconCellScaleFactor = useComponentFontScale(\n    resolvedMaxFontSizeMultiplier,\n    baseMetrics.iconCellHeight,\n  );\n  const { minHeight, labelLineHeight, iconCellHeight, paddingVertical } = useMemo(\n    () =>\n      getButtonControlMetrics(theme, size, {\n        label: labelScaleFactor,\n        icon: iconScaleFactor,\n        iconCell: iconCellScaleFactor,\n      }),\n    [theme, size, labelScaleFactor, iconScaleFactor, iconCellScaleFactor],\n  );\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      <ResolvedControlFontScalingProvider maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n        {children}\n      </ResolvedControlFontScalingProvider>\n    ) : (\n      <Text\n        variant=\"inherit\"\n        numberOfLines={1}\n        textAlign=\"center\"\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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  // Containers pre-scale by the capped factor; icon styles stay unscaled and\n  // native grows them by the same capped multiplier.\n  const scaledIconSize = Math.round(iconSize * iconScaleFactor);\n  const scaledIconCellHeight = Math.ceil(iconCellHeight * iconCellScaleFactor);\n\n  // Start slot: either loading spinner or start icon\n  const startContent = (\n    <AnimatedIconSlot\n      visible={showLoading || showStartIcon}\n      iconSize={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      {showLoading ? (\n        <ActivityIndicator size={scaledIconSize} color={buttonStyles.icon.color} />\n      ) : (\n        <IconSlot\n          icon={startIcon}\n          size={iconSizeToken}\n          variant={iconVariant}\n          maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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={scaledIconSize}\n      iconCellHeight={scaledIconCellHeight}\n      gap={buttonGap}\n    >\n      <IconSlot\n        icon={endIcon}\n        size={iconSizeToken}\n        variant={iconVariant}\n        maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\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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"}