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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (165) hide show
  1. package/README.md +4 -12
  2. package/dist/bin/automated-config/dist/generated/generatedConfigs.mjs +92 -46
  3. package/dist/components/Button/buttonTheme.cjs +63 -23
  4. package/dist/components/Button/buttonTheme.d.cts +29 -12
  5. package/dist/components/Button/buttonTheme.d.cts.map +1 -1
  6. package/dist/components/Button/buttonTheme.d.ts +29 -12
  7. package/dist/components/Button/buttonTheme.d.ts.map +1 -1
  8. package/dist/components/Button/buttonTheme.js +62 -23
  9. package/dist/components/Button/buttonTheme.js.map +1 -1
  10. package/dist/components/Button.cjs +34 -13
  11. package/dist/components/Button.d.cts +7 -0
  12. package/dist/components/Button.d.cts.map +1 -1
  13. package/dist/components/Button.d.ts +7 -0
  14. package/dist/components/Button.d.ts.map +1 -1
  15. package/dist/components/Button.js +34 -13
  16. package/dist/components/Button.js.map +1 -1
  17. package/dist/components/Checkbox.cjs +30 -7
  18. package/dist/components/Checkbox.d.cts +7 -0
  19. package/dist/components/Checkbox.d.cts.map +1 -1
  20. package/dist/components/Checkbox.d.ts +7 -0
  21. package/dist/components/Checkbox.d.ts.map +1 -1
  22. package/dist/components/Checkbox.js +30 -7
  23. package/dist/components/Checkbox.js.map +1 -1
  24. package/dist/components/Chip/ChipBase.cjs +23 -9
  25. package/dist/components/Chip/ChipBase.d.cts.map +1 -1
  26. package/dist/components/Chip/ChipBase.d.ts.map +1 -1
  27. package/dist/components/Chip/ChipBase.js +23 -9
  28. package/dist/components/Chip/ChipBase.js.map +1 -1
  29. package/dist/components/Chip/ChipDismissible.cjs +3 -1
  30. package/dist/components/Chip/ChipDismissible.js +3 -1
  31. package/dist/components/Chip/ChipDismissible.js.map +1 -1
  32. package/dist/components/Chip/types.d.cts +7 -0
  33. package/dist/components/Chip/types.d.cts.map +1 -1
  34. package/dist/components/Chip/types.d.ts +7 -0
  35. package/dist/components/Chip/types.d.ts.map +1 -1
  36. package/dist/components/Icon.cjs +7 -3
  37. package/dist/components/Icon.d.cts +9 -1
  38. package/dist/components/Icon.d.cts.map +1 -1
  39. package/dist/components/Icon.d.ts +9 -1
  40. package/dist/components/Icon.d.ts.map +1 -1
  41. package/dist/components/Icon.js +7 -3
  42. package/dist/components/Icon.js.map +1 -1
  43. package/dist/components/IconButton.cjs +18 -8
  44. package/dist/components/IconButton.js +18 -8
  45. package/dist/components/IconButton.js.map +1 -1
  46. package/dist/components/Radio/Radio.cjs +29 -11
  47. package/dist/components/Radio/Radio.d.cts +7 -0
  48. package/dist/components/Radio/Radio.d.cts.map +1 -1
  49. package/dist/components/Radio/Radio.d.ts +7 -0
  50. package/dist/components/Radio/Radio.d.ts.map +1 -1
  51. package/dist/components/Radio/Radio.js +29 -11
  52. package/dist/components/Radio/Radio.js.map +1 -1
  53. package/dist/components/Switch.cjs +25 -2
  54. package/dist/components/Switch.d.cts +7 -0
  55. package/dist/components/Switch.d.cts.map +1 -1
  56. package/dist/components/Switch.d.ts +7 -0
  57. package/dist/components/Switch.d.ts.map +1 -1
  58. package/dist/components/Switch.js +25 -2
  59. package/dist/components/Switch.js.map +1 -1
  60. package/dist/components/Tabs/Tab.cjs +12 -2
  61. package/dist/components/Tabs/Tab.d.cts.map +1 -1
  62. package/dist/components/Tabs/Tab.d.ts.map +1 -1
  63. package/dist/components/Tabs/Tab.js +12 -2
  64. package/dist/components/Tabs/Tab.js.map +1 -1
  65. package/dist/components/Tabs/Tabs.cjs +8 -3
  66. package/dist/components/Tabs/Tabs.d.cts +9 -1
  67. package/dist/components/Tabs/Tabs.d.cts.map +1 -1
  68. package/dist/components/Tabs/Tabs.d.ts +9 -1
  69. package/dist/components/Tabs/Tabs.d.ts.map +1 -1
  70. package/dist/components/Tabs/Tabs.js +8 -3
  71. package/dist/components/Tabs/Tabs.js.map +1 -1
  72. package/dist/components/Tabs/tabsContexts.d.cts +2 -0
  73. package/dist/components/Tabs/tabsContexts.d.cts.map +1 -1
  74. package/dist/components/Tabs/tabsContexts.d.ts +2 -0
  75. package/dist/components/Tabs/tabsContexts.d.ts.map +1 -1
  76. package/dist/components/Tabs/tabsContexts.js.map +1 -1
  77. package/dist/components/Text.cjs +4 -1
  78. package/dist/components/Text.d.cts +10 -2
  79. package/dist/components/Text.d.cts.map +1 -1
  80. package/dist/components/Text.d.ts +10 -2
  81. package/dist/components/Text.d.ts.map +1 -1
  82. package/dist/components/Text.js +4 -1
  83. package/dist/components/Text.js.map +1 -1
  84. package/dist/components/UDSProvider.cjs +6 -2
  85. package/dist/components/UDSProvider.d.cts +8 -0
  86. package/dist/components/UDSProvider.d.cts.map +1 -1
  87. package/dist/components/UDSProvider.d.ts +8 -0
  88. package/dist/components/UDSProvider.d.ts.map +1 -1
  89. package/dist/components/UDSProvider.js +6 -2
  90. package/dist/components/UDSProvider.js.map +1 -1
  91. package/dist/fontScaling/FontScalingContext.cjs +35 -0
  92. package/dist/fontScaling/FontScalingContext.d.cts +38 -0
  93. package/dist/fontScaling/FontScalingContext.d.cts.map +1 -0
  94. package/dist/fontScaling/FontScalingContext.d.ts +38 -0
  95. package/dist/fontScaling/FontScalingContext.d.ts.map +1 -0
  96. package/dist/fontScaling/FontScalingContext.js +34 -0
  97. package/dist/fontScaling/FontScalingContext.js.map +1 -0
  98. package/dist/fontScaling/constants.cjs +72 -0
  99. package/dist/fontScaling/constants.d.cts +49 -0
  100. package/dist/fontScaling/constants.d.cts.map +1 -0
  101. package/dist/fontScaling/constants.d.ts +49 -0
  102. package/dist/fontScaling/constants.d.ts.map +1 -0
  103. package/dist/fontScaling/constants.js +70 -0
  104. package/dist/fontScaling/constants.js.map +1 -0
  105. package/dist/fontScaling/index.cjs +13 -0
  106. package/dist/fontScaling/index.d.cts +8 -0
  107. package/dist/fontScaling/index.d.ts +8 -0
  108. package/dist/fontScaling/index.js +6 -0
  109. package/dist/fontScaling/resolveMaxFontSizeMultiplier.cjs +38 -0
  110. package/dist/fontScaling/resolveMaxFontSizeMultiplier.d.cts +36 -0
  111. package/dist/fontScaling/resolveMaxFontSizeMultiplier.d.cts.map +1 -0
  112. package/dist/fontScaling/resolveMaxFontSizeMultiplier.d.ts +36 -0
  113. package/dist/fontScaling/resolveMaxFontSizeMultiplier.d.ts.map +1 -0
  114. package/dist/fontScaling/resolveMaxFontSizeMultiplier.js +39 -0
  115. package/dist/fontScaling/resolveMaxFontSizeMultiplier.js.map +1 -0
  116. package/dist/fontScaling/types.cjs +1 -0
  117. package/dist/fontScaling/types.d.cts +51 -0
  118. package/dist/fontScaling/types.d.cts.map +1 -0
  119. package/dist/fontScaling/types.d.ts +51 -0
  120. package/dist/fontScaling/types.d.ts.map +1 -0
  121. package/dist/fontScaling/types.js +1 -0
  122. package/dist/fontScaling/useFontScale.cjs +32 -0
  123. package/dist/fontScaling/useFontScale.d.cts +18 -0
  124. package/dist/fontScaling/useFontScale.d.cts.map +1 -0
  125. package/dist/fontScaling/useFontScale.d.ts +18 -0
  126. package/dist/fontScaling/useFontScale.d.ts.map +1 -0
  127. package/dist/fontScaling/useFontScale.js +32 -0
  128. package/dist/fontScaling/useFontScale.js.map +1 -0
  129. package/dist/fontScaling/useMaxFontSizeMultiplier.cjs +24 -0
  130. package/dist/fontScaling/useMaxFontSizeMultiplier.d.cts +16 -0
  131. package/dist/fontScaling/useMaxFontSizeMultiplier.d.cts.map +1 -0
  132. package/dist/fontScaling/useMaxFontSizeMultiplier.d.ts +16 -0
  133. package/dist/fontScaling/useMaxFontSizeMultiplier.d.ts.map +1 -0
  134. package/dist/fontScaling/useMaxFontSizeMultiplier.js +24 -0
  135. package/dist/fontScaling/useMaxFontSizeMultiplier.js.map +1 -0
  136. package/dist/jest/mocks/react-native.cjs +19 -4
  137. package/dist/jest/mocks/react-native.d.cts +8 -5
  138. package/dist/jest/mocks/react-native.d.cts.map +1 -1
  139. package/dist/jest/mocks/react-native.d.ts +8 -5
  140. package/dist/jest/mocks/react-native.d.ts.map +1 -1
  141. package/dist/jest/mocks/react-native.js +18 -5
  142. package/dist/jest/mocks/react-native.js.map +1 -1
  143. package/dist/jest/mocks/styles.cjs +14 -0
  144. package/dist/jest/mocks/styles.d.cts.map +1 -1
  145. package/dist/jest/mocks/styles.d.ts.map +1 -1
  146. package/dist/jest/mocks/styles.js +14 -0
  147. package/dist/jest/mocks/styles.js.map +1 -1
  148. package/dist/jest/setup.cjs +4 -0
  149. package/dist/jest/setup.d.cts.map +1 -1
  150. package/dist/jest/setup.d.ts.map +1 -1
  151. package/dist/jest/setup.js +4 -0
  152. package/dist/jest/setup.js.map +1 -1
  153. package/dist/mobile/generated/fontMetrics.cjs +1166 -0
  154. package/dist/mobile/generated/fontMetrics.js +1168 -0
  155. package/dist/mobile/generated/fontMetrics.js.map +1 -0
  156. package/dist/portal.d.cts.map +1 -1
  157. package/dist/portal.d.ts.map +1 -1
  158. package/dist/portal.js.map +1 -1
  159. package/dist/types/dist/index.d.cts.map +1 -1
  160. package/dist/types/dist/index.d.ts.map +1 -1
  161. package/fonts/uds-icons.ttf +0 -0
  162. package/generated/fontMetrics.ts +1173 -0
  163. package/generated/styles.d.ts +5 -28
  164. package/generated/unistyles.d.ts +0 -27
  165. package/package.json +11 -1
@@ -1,7 +1,9 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  require("../../_virtual/_rolldown/runtime.cjs");
4
+ const require_fontScaling_useMaxFontSizeMultiplier = require("../../fontScaling/useMaxFontSizeMultiplier.cjs");
4
5
  const require_components_IconSlot = require("../IconSlot.cjs");
6
+ const require_fontScaling_useFontScale = require("../../fontScaling/useFontScale.cjs");
5
7
  const require_components_Pressable = require("../Pressable.cjs");
6
8
  const require_components_Tabs_tabsContexts = require("./tabsContexts.cjs");
7
9
  const require_components_Tabs_tabTheme = require("./tabTheme.cjs");
@@ -19,9 +21,10 @@ const CLEAR_SELECTION_CHROME = {
19
21
  elevation: 0,
20
22
  boxShadow: []
21
23
  };
22
- function TabLabel({ style, children }) {
24
+ function TabLabel({ style, maxFontSizeMultiplier, children }) {
23
25
  if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
24
26
  style,
27
+ maxFontSizeMultiplier,
25
28
  children
26
29
  });
27
30
  return children;
@@ -38,10 +41,12 @@ function TabLabel({ style, children }) {
38
41
  const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon, disabled, style, ...pressableRest }) {
39
42
  const generatedId = (0, react.useId)();
40
43
  const uid = value ?? `uds-tab-${generatedId}`;
41
- const { variant: visualVariant, reduceMotion } = require_components_Tabs_tabsContexts.useTabsVisualContext();
44
+ const { variant: visualVariant, reduceMotion, maxFontSizeMultiplier } = require_components_Tabs_tabsContexts.useTabsVisualContext();
42
45
  const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = require_components_Tabs_tabsContexts.useTabSelectionContext();
43
46
  const { theme } = (0, react_native_unistyles.useUnistyles)();
44
47
  const [pressed, setPressed] = (0, react.useState)(false);
48
+ const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
49
+ const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier);
45
50
  const selected = !disabled && selectedId === uid;
46
51
  const active = selected ? "on" : "off";
47
52
  const interaction = pressed ? "pressed" : "rest";
@@ -102,6 +107,7 @@ const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon,
102
107
  zIndex: 1,
103
108
  position: "relative"
104
109
  };
110
+ if (fontScaleFactor !== 1 && typeof base.height === "number") base.height = Math.round(base.height * fontScaleFactor);
105
111
  if (selected && !reduceMotion) return {
106
112
  ...base,
107
113
  ...CLEAR_SELECTION_CHROME
@@ -109,6 +115,7 @@ const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon,
109
115
  return base;
110
116
  }, [
111
117
  rootBase,
118
+ fontScaleFactor,
112
119
  selected,
113
120
  reduceMotion
114
121
  ]);
@@ -140,16 +147,19 @@ const Tab = (0, react.memo)(function Tab({ value, children, startIcon, endIcon,
140
147
  startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
141
148
  icon: startIcon,
142
149
  size: "sm",
150
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
143
151
  style: iconStyle,
144
152
  ...iconColor !== void 0 ? { color: iconColor } : {}
145
153
  }) : null,
146
154
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabLabel, {
147
155
  style: textStyle,
156
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
148
157
  children
149
158
  }),
150
159
  endIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
151
160
  icon: endIcon,
152
161
  size: "sm",
162
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
153
163
  style: iconStyle,
154
164
  ...iconColor !== void 0 ? { color: iconColor } : {}
155
165
  }) : null,
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.cts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAiBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cA4BJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}
1
+ {"version":3,"file":"Tab.d.cts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAmBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cAwCJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.d.ts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAiBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cA4BJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}
1
+ {"version":3,"file":"Tab.d.ts","names":[],"sources":["../../../src/components/Tabs/Tab.tsx"],"mappings":";;;;;;;UAmBU,QAAA,SAEN,IAAA,CAAK,cAAA,kDACL,IAAA,CAAK,iBAAA;EACP,QAAA,EAAU,iBAAA;EACV,SAAA,GAAY,YAAA;EACZ,OAAA,GAAU,YAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cAwCJ,GAAA,EAAG,OAAA,CAAA,oBAAA,CAAA,QAAA"}
@@ -1,5 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
+ import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
2
3
  import { IconSlot } from "../IconSlot.js";
4
+ import { useFontScale } from "../../fontScaling/useFontScale.js";
3
5
  import { Pressable as Pressable$1 } from "../Pressable.js";
4
6
  import { useTabSelectionContext, useTabsVisualContext } from "./tabsContexts.js";
5
7
  import { getMergedTabLayerStyle, getTabLayerStyle } from "./tabTheme.js";
@@ -17,9 +19,10 @@ const CLEAR_SELECTION_CHROME = {
17
19
  elevation: 0,
18
20
  boxShadow: []
19
21
  };
20
- function TabLabel({ style, children }) {
22
+ function TabLabel({ style, maxFontSizeMultiplier, children }) {
21
23
  if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx(Text, {
22
24
  style,
25
+ maxFontSizeMultiplier,
23
26
  children
24
27
  });
25
28
  return children;
@@ -36,10 +39,12 @@ function TabLabel({ style, children }) {
36
39
  const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, style, ...pressableRest }) {
37
40
  const generatedId = useId();
38
41
  const uid = value ?? `uds-tab-${generatedId}`;
39
- const { variant: visualVariant, reduceMotion } = useTabsVisualContext();
42
+ const { variant: visualVariant, reduceMotion, maxFontSizeMultiplier } = useTabsVisualContext();
40
43
  const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = useTabSelectionContext();
41
44
  const { theme } = useUnistyles();
42
45
  const [pressed, setPressed] = useState(false);
46
+ const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
47
+ const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);
43
48
  const selected = !disabled && selectedId === uid;
44
49
  const active = selected ? "on" : "off";
45
50
  const interaction = pressed ? "pressed" : "rest";
@@ -100,6 +105,7 @@ const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, s
100
105
  zIndex: 1,
101
106
  position: "relative"
102
107
  };
108
+ if (fontScaleFactor !== 1 && typeof base.height === "number") base.height = Math.round(base.height * fontScaleFactor);
103
109
  if (selected && !reduceMotion) return {
104
110
  ...base,
105
111
  ...CLEAR_SELECTION_CHROME
@@ -107,6 +113,7 @@ const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, s
107
113
  return base;
108
114
  }, [
109
115
  rootBase,
116
+ fontScaleFactor,
110
117
  selected,
111
118
  reduceMotion
112
119
  ]);
@@ -138,16 +145,19 @@ const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, s
138
145
  startIcon ? /* @__PURE__ */ jsx(IconSlot, {
139
146
  icon: startIcon,
140
147
  size: "sm",
148
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
141
149
  style: iconStyle,
142
150
  ...iconColor !== void 0 ? { color: iconColor } : {}
143
151
  }) : null,
144
152
  /* @__PURE__ */ jsx(TabLabel, {
145
153
  style: textStyle,
154
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
146
155
  children
147
156
  }),
148
157
  endIcon ? /* @__PURE__ */ jsx(IconSlot, {
149
158
  icon: endIcon,
150
159
  size: "sm",
160
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
151
161
  style: iconStyle,
152
162
  ...iconColor !== void 0 ? { color: iconColor } : {}
153
163
  }) : null,
@@ -1 +1 @@
1
- {"version":3,"file":"Tab.js","names":["RNText","Pressable"],"sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import type { UniversalTabProps } from '@yahoo/uds-types';\nimport type { ReactElement, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, PressableProps, TextStyle, ViewStyle } from 'react-native';\nimport { Text as RNText, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Pressable } from '../Pressable';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getMergedTabLayerStyle, getTabLayerStyle } from './tabTheme';\n\nconst PRIMARY_TAB_UNDERLINE_HEIGHT = 2;\n\ninterface TabProps\n extends\n Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>,\n Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {\n children: UniversalTabProps['children'];\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n style?: ViewStyle;\n}\n\nconst CLEAR_SELECTION_CHROME: ViewStyle = {\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderColor: 'transparent',\n shadowOpacity: 0,\n elevation: 0,\n boxShadow: [],\n};\n\nfunction TabLabel({ style, children }: { style: TextStyle; children: ReactNode }) {\n if (typeof children === 'string' || typeof children === 'number') {\n return <RNText style={style}>{children}</RNText>;\n }\n return children as ReactElement;\n}\n\n/**\n * **⚙️ Tab**\n *\n * @description\n * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst Tab = memo(function Tab({\n value,\n children,\n startIcon,\n endIcon,\n disabled,\n style,\n ...pressableRest\n}: TabProps) {\n const generatedId = useId();\n const uid = value ?? `uds-tab-${generatedId}`;\n const { variant: visualVariant, reduceMotion } = useTabsVisualContext();\n const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } =\n useTabSelectionContext();\n const { theme } = useUnistyles();\n const [pressed, setPressed] = useState(false);\n\n const selected = !disabled && selectedId === uid;\n const active: 'on' | 'off' = selected ? 'on' : 'off';\n const interaction: 'rest' | 'pressed' = pressed ? 'pressed' : 'rest';\n\n useEffect(() => {\n registerTab(uid);\n return () => {\n unregisterTab(uid);\n };\n }, [uid, registerTab, unregisterTab]);\n\n const rootBase = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'root', interaction) as ViewStyle,\n [theme, visualVariant, active, interaction],\n );\n const textStyle = useMemo(\n () =>\n getMergedTabLayerStyle(theme, visualVariant, active, 'rootText', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n const iconStyle = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'icon', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n\n const iconColor = ((): StyleProps['color'] | undefined => {\n const c = iconStyle?.color;\n if (c === undefined || c === null) {\n return undefined;\n }\n return c as StyleProps['color'];\n })();\n\n /** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */\n const showPrimaryPerTabUnderline = visualVariant === 'primary' && !(selected && !reduceMotion);\n\n const primaryUnderlineColor = useMemo(() => {\n if (visualVariant !== 'primary') {\n return undefined;\n }\n if (selected && reduceMotion) {\n const onText = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as TextStyle;\n const c = onText.color;\n if (typeof c === 'string') {\n return c;\n }\n }\n return 'transparent';\n }, [visualVariant, selected, reduceMotion, theme]);\n\n const rootStyle = useMemo((): ViewStyle => {\n const base: ViewStyle = {\n ...rootBase,\n flexDirection: 'row',\n alignItems: 'center',\n flexShrink: 0,\n zIndex: 1,\n position: 'relative',\n };\n if (selected && !reduceMotion) {\n return { ...base, ...CLEAR_SELECTION_CHROME };\n }\n return base;\n }, [rootBase, selected, reduceMotion]);\n\n const onLayout = useCallback(\n (e: LayoutChangeEvent) => {\n setTabLayout(uid, e.nativeEvent.layout);\n },\n [uid, setTabLayout],\n );\n\n const onPress = useCallback(() => {\n if (disabled) {\n return;\n }\n setSelectedId(uid);\n }, [disabled, setSelectedId, uid]);\n\n return (\n <Pressable\n accessibilityRole=\"tab\"\n accessibilityState={{ selected, disabled: !!disabled }}\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n onLayout={onLayout}\n style={[rootStyle, style]}\n {...pressableRest}\n >\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n size=\"sm\"\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n <TabLabel style={textStyle}>{children}</TabLabel>\n {endIcon ? (\n <IconSlot\n icon={endIcon}\n size=\"sm\"\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n {showPrimaryPerTabUnderline &&\n primaryUnderlineColor &&\n primaryUnderlineColor !== 'transparent' ? (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n pointerEvents=\"none\"\n style={{\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n height: PRIMARY_TAB_UNDERLINE_HEIGHT,\n backgroundColor: primaryUnderlineColor,\n }}\n />\n ) : null}\n </Pressable>\n );\n});\n\nTab.displayName = 'Tab';\n\nexport { Tab };\nexport type { TabProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Tab.js","names":["RNText","Pressable"],"sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import type { UniversalTabProps } from '@yahoo/uds-types';\nimport type { ReactElement, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, PressableProps, TextStyle, ViewStyle } from 'react-native';\nimport { Text as RNText, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Pressable } from '../Pressable';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getMergedTabLayerStyle, getTabLayerStyle } from './tabTheme';\n\nconst PRIMARY_TAB_UNDERLINE_HEIGHT = 2;\n\ninterface TabProps\n extends\n Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>,\n Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {\n children: UniversalTabProps['children'];\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n style?: ViewStyle;\n}\n\nconst CLEAR_SELECTION_CHROME: ViewStyle = {\n backgroundColor: 'transparent',\n borderWidth: 0,\n borderColor: 'transparent',\n shadowOpacity: 0,\n elevation: 0,\n boxShadow: [],\n};\n\nfunction TabLabel({\n style,\n maxFontSizeMultiplier,\n children,\n}: {\n style: TextStyle;\n maxFontSizeMultiplier: number;\n children: ReactNode;\n}) {\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <RNText style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children}\n </RNText>\n );\n }\n return children as ReactElement;\n}\n\n/**\n * **⚙️ Tab**\n *\n * @description\n * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst Tab = memo(function Tab({\n value,\n children,\n startIcon,\n endIcon,\n disabled,\n style,\n ...pressableRest\n}: TabProps) {\n const generatedId = useId();\n const uid = value ?? `uds-tab-${generatedId}`;\n const { variant: visualVariant, reduceMotion, maxFontSizeMultiplier } = useTabsVisualContext();\n const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } =\n useTabSelectionContext();\n const { theme } = useUnistyles();\n const [pressed, setPressed] = useState(false);\n\n // One capped factor governs the label, icons, and the tab's fixed height.\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier);\n\n const selected = !disabled && selectedId === uid;\n const active: 'on' | 'off' = selected ? 'on' : 'off';\n const interaction: 'rest' | 'pressed' = pressed ? 'pressed' : 'rest';\n\n useEffect(() => {\n registerTab(uid);\n return () => {\n unregisterTab(uid);\n };\n }, [uid, registerTab, unregisterTab]);\n\n const rootBase = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'root', interaction) as ViewStyle,\n [theme, visualVariant, active, interaction],\n );\n const textStyle = useMemo(\n () =>\n getMergedTabLayerStyle(theme, visualVariant, active, 'rootText', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n const iconStyle = useMemo(\n () => getMergedTabLayerStyle(theme, visualVariant, active, 'icon', interaction) as TextStyle,\n [theme, visualVariant, active, interaction],\n );\n\n const iconColor = ((): StyleProps['color'] | undefined => {\n const c = iconStyle?.color;\n if (c === undefined || c === null) {\n return undefined;\n }\n return c as StyleProps['color'];\n })();\n\n /** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */\n const showPrimaryPerTabUnderline = visualVariant === 'primary' && !(selected && !reduceMotion);\n\n const primaryUnderlineColor = useMemo(() => {\n if (visualVariant !== 'primary') {\n return undefined;\n }\n if (selected && reduceMotion) {\n const onText = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as TextStyle;\n const c = onText.color;\n if (typeof c === 'string') {\n return c;\n }\n }\n return 'transparent';\n }, [visualVariant, selected, reduceMotion, theme]);\n\n const rootStyle = useMemo((): ViewStyle => {\n const base: ViewStyle = {\n ...rootBase,\n flexDirection: 'row',\n alignItems: 'center',\n flexShrink: 0,\n zIndex: 1,\n position: 'relative',\n };\n // A fixed token height grows with the capped label so text never clips.\n if (fontScaleFactor !== 1 && typeof base.height === 'number') {\n base.height = Math.round(base.height * fontScaleFactor);\n }\n if (selected && !reduceMotion) {\n return { ...base, ...CLEAR_SELECTION_CHROME };\n }\n return base;\n }, [rootBase, fontScaleFactor, selected, reduceMotion]);\n\n const onLayout = useCallback(\n (e: LayoutChangeEvent) => {\n setTabLayout(uid, e.nativeEvent.layout);\n },\n [uid, setTabLayout],\n );\n\n const onPress = useCallback(() => {\n if (disabled) {\n return;\n }\n setSelectedId(uid);\n }, [disabled, setSelectedId, uid]);\n\n return (\n <Pressable\n accessibilityRole=\"tab\"\n accessibilityState={{ selected, disabled: !!disabled }}\n disabled={disabled}\n onPress={onPress}\n onPressIn={() => setPressed(true)}\n onPressOut={() => setPressed(false)}\n onLayout={onLayout}\n style={[rootStyle, style]}\n {...pressableRest}\n >\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n <TabLabel style={textStyle} maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}>\n {children}\n </TabLabel>\n {endIcon ? (\n <IconSlot\n icon={endIcon}\n size=\"sm\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={iconStyle}\n {...(iconColor !== undefined ? { color: iconColor } : {})}\n />\n ) : null}\n {showPrimaryPerTabUnderline &&\n primaryUnderlineColor &&\n primaryUnderlineColor !== 'transparent' ? (\n <View\n accessibilityElementsHidden\n importantForAccessibility=\"no-hide-descendants\"\n pointerEvents=\"none\"\n style={{\n position: 'absolute',\n left: 0,\n right: 0,\n bottom: 0,\n height: PRIMARY_TAB_UNDERLINE_HEIGHT,\n backgroundColor: primaryUnderlineColor,\n }}\n />\n ) : null}\n </Pressable>\n );\n});\n\nTab.displayName = 'Tab';\n\nexport { Tab };\nexport type { TabProps };\n"],"mappings":"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"}
@@ -30,11 +30,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
30
30
  * </Tabs>
31
31
  * ```
32
32
  */
33
- const Tabs = (0, react.memo)(function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
33
+ const Tabs = (0, react.memo)(function Tabs({ children, variant = "primary", reduceMotion = false, maxFontSizeMultiplier, defaultSelectedId, selectedId, onSelectionChange }) {
34
34
  const visual = (0, react.useMemo)(() => ({
35
35
  variant,
36
- reduceMotion
37
- }), [variant, reduceMotion]);
36
+ reduceMotion,
37
+ maxFontSizeMultiplier
38
+ }), [
39
+ variant,
40
+ reduceMotion,
41
+ maxFontSizeMultiplier
42
+ ]);
38
43
  const selection = require_components_Tabs_tabsContexts.useTabSelectionState({
39
44
  defaultSelectedId,
40
45
  selectedId,
@@ -3,7 +3,15 @@ import { UniversalTabsProps } from "../../types/dist/index.cjs";
3
3
  import * as _$react from "react";
4
4
 
5
5
  //#region src/components/Tabs/Tabs.d.ts
6
- interface TabsProps extends UniversalTabsProps {}
6
+ interface TabsProps extends UniversalTabsProps {
7
+ /**
8
+ * Caps how far tab labels and icons grow with the OS text-size setting;
9
+ * tabs grow to fit. Set null to remove the cap; override app-wide via
10
+ * UDSFontScalingProvider.
11
+ * @default 2
12
+ */
13
+ maxFontSizeMultiplier?: number | null;
14
+ }
7
15
  /**
8
16
  * **⚙️ Tabs**
9
17
  *
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.cts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAMU,SAAA,SAAkB,kBAAA;;AAN+B;;;;;AAMb;;;;;;;;;;;;;;;;;;;cA2BxC,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
1
+ {"version":3,"file":"Tabs.d.cts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAKU,SAAA,SAAkB,kBAAA;;;AAL+B;;;;EAYzD,qBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
@@ -3,7 +3,15 @@ import { UniversalTabsProps } from "../../types/dist/index.js";
3
3
  import * as _$react from "react";
4
4
 
5
5
  //#region src/components/Tabs/Tabs.d.ts
6
- interface TabsProps extends UniversalTabsProps {}
6
+ interface TabsProps extends UniversalTabsProps {
7
+ /**
8
+ * Caps how far tab labels and icons grow with the OS text-size setting;
9
+ * tabs grow to fit. Set null to remove the cap; override app-wide via
10
+ * UDSFontScalingProvider.
11
+ * @default 2
12
+ */
13
+ maxFontSizeMultiplier?: number | null;
14
+ }
7
15
  /**
8
16
  * **⚙️ Tabs**
9
17
  *
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.d.ts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAMU,SAAA,SAAkB,kBAAA;;AAN+B;;;;;AAMb;;;;;;;;;;;;;;;;;;;cA2BxC,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
1
+ {"version":3,"file":"Tabs.d.ts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAKU,SAAA,SAAkB,kBAAA;;;AAL+B;;;;EAYzD,qBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
@@ -28,11 +28,16 @@ import { jsx } from "react/jsx-runtime";
28
28
  * </Tabs>
29
29
  * ```
30
30
  */
31
- const Tabs = memo(function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
31
+ const Tabs = memo(function Tabs({ children, variant = "primary", reduceMotion = false, maxFontSizeMultiplier, defaultSelectedId, selectedId, onSelectionChange }) {
32
32
  const visual = useMemo(() => ({
33
33
  variant,
34
- reduceMotion
35
- }), [variant, reduceMotion]);
34
+ reduceMotion,
35
+ maxFontSizeMultiplier
36
+ }), [
37
+ variant,
38
+ reduceMotion,
39
+ maxFontSizeMultiplier
40
+ ]);
36
41
  const selection = useTabSelectionState({
37
42
  defaultSelectedId,
38
43
  selectedId,
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { UniversalTabsProps } from '@yahoo/uds-types';\nimport { memo, useMemo } from 'react';\n\nimport { TabSelectionContext, TabsVisualContext, useTabSelectionState } from './tabsContexts';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- alias for doc extraction / parity with web\ninterface TabsProps extends UniversalTabsProps {}\n\n/**\n * **⚙️ Tabs**\n *\n * @description\n * Organizes content into sections with a tab list and tab panels. Supports `primary` and\n * `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between\n * tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.\n *\n * @category Navigation\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';\n *\n * <Tabs variant=\"primary\" defaultSelectedId=\"home\">\n * <TabList accessibilityLabel=\"Main\">\n * <Tab value=\"home\">Home</Tab>\n * <Tab value=\"about\">About</Tab>\n * </TabList>\n * <TabPanel tabId=\"home\">Home content</TabPanel>\n * <TabPanel tabId=\"about\">About content</TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = memo(function Tabs({\n children,\n variant = 'primary',\n reduceMotion = false,\n defaultSelectedId,\n selectedId,\n onSelectionChange,\n}: TabsProps) {\n const visual = useMemo(() => ({ variant, reduceMotion }), [variant, reduceMotion]);\n const selection = useTabSelectionState({\n defaultSelectedId,\n selectedId,\n onSelectionChange,\n });\n\n return (\n <TabsVisualContext.Provider value={visual}>\n <TabSelectionContext.Provider value={selection}>{children}</TabSelectionContext.Provider>\n </TabsVisualContext.Provider>\n );\n});\n\nTabs.displayName = 'Tabs';\n\nexport { Tabs };\nexport type { TabsProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,eAAe,OACf,mBACA,YACA,qBACY;CACZ,MAAM,SAAS,eAAe;EAAE;EAAS;EAAc,GAAG,CAAC,SAAS,aAAa,CAAC;CAClF,MAAM,YAAY,qBAAqB;EACrC;EACA;EACA;EACD,CAAC;CAEF,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAAY;GAAwC,CAAA;EAC9D,CAAA;EAE/B;AAEF,KAAK,cAAc"}
1
+ {"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { UniversalTabsProps } from '@yahoo/uds-types';\nimport { memo, useMemo } from 'react';\n\nimport { TabSelectionContext, TabsVisualContext, useTabSelectionState } from './tabsContexts';\n\ninterface TabsProps extends UniversalTabsProps {\n /**\n * Caps how far tab labels and icons grow with the OS text-size setting;\n * tabs grow to fit. Set null to remove the cap; override app-wide via\n * UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n}\n\n/**\n * **⚙️ Tabs**\n *\n * @description\n * Organizes content into sections with a tab list and tab panels. Supports `primary` and\n * `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between\n * tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.\n *\n * @category Navigation\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';\n *\n * <Tabs variant=\"primary\" defaultSelectedId=\"home\">\n * <TabList accessibilityLabel=\"Main\">\n * <Tab value=\"home\">Home</Tab>\n * <Tab value=\"about\">About</Tab>\n * </TabList>\n * <TabPanel tabId=\"home\">Home content</TabPanel>\n * <TabPanel tabId=\"about\">About content</TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = memo(function Tabs({\n children,\n variant = 'primary',\n reduceMotion = false,\n maxFontSizeMultiplier,\n defaultSelectedId,\n selectedId,\n onSelectionChange,\n}: TabsProps) {\n const visual = useMemo(\n () => ({ variant, reduceMotion, maxFontSizeMultiplier }),\n [variant, reduceMotion, maxFontSizeMultiplier],\n );\n const selection = useTabSelectionState({\n defaultSelectedId,\n selectedId,\n onSelectionChange,\n });\n\n return (\n <TabsVisualContext.Provider value={visual}>\n <TabSelectionContext.Provider value={selection}>{children}</TabSelectionContext.Provider>\n </TabsVisualContext.Provider>\n );\n});\n\nTabs.displayName = 'Tabs';\n\nexport { Tabs };\nexport type { TabsProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,eAAe,OACf,uBACA,mBACA,YACA,qBACY;CACZ,MAAM,SAAS,eACN;EAAE;EAAS;EAAc;EAAuB,GACvD;EAAC;EAAS;EAAc;EAAsB,CAC/C;CACD,MAAM,YAAY,qBAAqB;EACrC;EACA;EACA;EACD,CAAC;CAEF,OACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAAY;GAAwC,CAAA;EAC9D,CAAA;EAE/B;AAEF,KAAK,cAAc"}
@@ -7,6 +7,8 @@ import { LayoutRectangle } from "react-native";
7
7
  interface TabsVisualContextValue {
8
8
  variant: UniversalTabsVariant;
9
9
  reduceMotion: boolean;
10
+ /** Tabs-level font-scaling cap; undefined = resolve from the control cap. */
11
+ maxFontSizeMultiplier?: number | null;
10
12
  }
11
13
  declare const TabsVisualContext: _$react.Context<TabsVisualContextValue>;
12
14
  declare function useTabsVisualContext(): TabsVisualContextValue;
@@ -1 +1 @@
1
- {"version":3,"file":"tabsContexts.d.cts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}
1
+ {"version":3,"file":"tabsContexts.d.cts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;EAFe;EAIf,qBAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}
@@ -7,6 +7,8 @@ import { LayoutRectangle } from "react-native";
7
7
  interface TabsVisualContextValue {
8
8
  variant: UniversalTabsVariant;
9
9
  reduceMotion: boolean;
10
+ /** Tabs-level font-scaling cap; undefined = resolve from the control cap. */
11
+ maxFontSizeMultiplier?: number | null;
10
12
  }
11
13
  declare const TabsVisualContext: _$react.Context<TabsVisualContextValue>;
12
14
  declare function useTabsVisualContext(): TabsVisualContextValue;
@@ -1 +1 @@
1
- {"version":3,"file":"tabsContexts.d.ts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}
1
+ {"version":3,"file":"tabsContexts.d.ts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;EAFe;EAIf,qBAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"tabsContexts.js","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"sourcesContent":["import type { UniversalTabsVariant } from '@yahoo/uds-types';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport type { LayoutRectangle } from 'react-native';\n\nexport interface TabsVisualContextValue {\n variant: UniversalTabsVariant;\n reduceMotion: boolean;\n}\n\nexport const TabsVisualContext = createContext<TabsVisualContextValue>({\n variant: 'primary',\n reduceMotion: false,\n});\n\nexport function useTabsVisualContext(): TabsVisualContextValue {\n return useContext(TabsVisualContext);\n}\n\nexport interface TabSelectionContextValue {\n selectedId: string | null | undefined;\n setSelectedId: (id: string) => void;\n registerTab: (id: string) => void;\n unregisterTab: (id: string) => void;\n tabLayouts: ReadonlyMap<string, LayoutRectangle>;\n setTabLayout: (id: string, layout: LayoutRectangle) => void;\n clearTabLayout: (id: string) => void;\n}\n\nexport const TabSelectionContext = createContext<TabSelectionContextValue | null>(null);\n\nexport function useTabSelectionContext(): TabSelectionContextValue {\n const ctx = useContext(TabSelectionContext);\n if (!ctx) {\n throw new Error('Tab components must be used within <Tabs>');\n }\n return ctx;\n}\n\nexport function useTabSelectionState({\n defaultSelectedId,\n selectedId: selectedIdProp,\n onSelectionChange,\n}: {\n defaultSelectedId?: string;\n selectedId?: string | null;\n onSelectionChange?: (selectedId: string | null | undefined) => void;\n}): TabSelectionContextValue {\n const isControlled = selectedIdProp !== undefined;\n const [internalSelectedId, setInternalSelectedId] = useState<string | null>(\n defaultSelectedId ?? null,\n );\n const [registeredIds, setRegisteredIds] = useState<string[]>([]);\n const [tabLayouts, setTabLayouts] = useState<Map<string, LayoutRectangle>>(() => new Map());\n\n const selectedId = isControlled ? selectedIdProp : internalSelectedId;\n\n const setSelectedId = useCallback(\n (id: string) => {\n if (!isControlled) {\n setInternalSelectedId(id);\n }\n onSelectionChange?.(id);\n },\n [isControlled, onSelectionChange],\n );\n\n const registerTab = useCallback((id: string) => {\n setRegisteredIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n }, []);\n\n const unregisterTab = useCallback((id: string) => {\n setRegisteredIds((prev) => prev.filter((x) => x !== id));\n setTabLayouts((prev) => {\n const next = new Map(prev);\n next.delete(id);\n return next;\n });\n }, []);\n\n const setTabLayout = useCallback((id: string, layout: LayoutRectangle) => {\n setTabLayouts((prev) => {\n const cur = prev.get(id);\n if (\n cur &&\n cur.x === layout.x &&\n cur.y === layout.y &&\n cur.width === layout.width &&\n cur.height === layout.height\n ) {\n return prev;\n }\n const next = new Map(prev);\n next.set(id, layout);\n return next;\n });\n }, []);\n\n const clearTabLayout = useCallback((id: string) => {\n setTabLayouts((prev) => {\n if (!prev.has(id)) {\n return prev;\n }\n const next = new Map(prev);\n next.delete(id);\n return next;\n });\n }, []);\n\n useEffect(() => {\n if (isControlled || defaultSelectedId !== undefined) {\n return;\n }\n if (internalSelectedId !== null) {\n return;\n }\n if (registeredIds.length === 0) {\n return;\n }\n setInternalSelectedId(registeredIds[0]!);\n }, [isControlled, defaultSelectedId, internalSelectedId, registeredIds]);\n\n return useMemo(\n () => ({\n selectedId,\n setSelectedId,\n registerTab,\n unregisterTab,\n tabLayouts,\n setTabLayout,\n clearTabLayout,\n }),\n [\n selectedId,\n setSelectedId,\n registerTab,\n unregisterTab,\n tabLayouts,\n setTabLayout,\n clearTabLayout,\n ],\n );\n}\n"],"mappings":";;;AASA,MAAa,oBAAoB,cAAsC;CACrE,SAAS;CACT,cAAc;CACf,CAAC;AAEF,SAAgB,uBAA+C;CAC7D,OAAO,WAAW,kBAAkB;;AAatC,MAAa,sBAAsB,cAA+C,KAAK;AAEvF,SAAgB,yBAAmD;CACjE,MAAM,MAAM,WAAW,oBAAoB;CAC3C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,4CAA4C;CAE9D,OAAO;;AAGT,SAAgB,qBAAqB,EACnC,mBACA,YAAY,gBACZ,qBAK2B;CAC3B,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,qBAAqB,KACtB;CACD,MAAM,CAAC,eAAe,oBAAoB,SAAmB,EAAE,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,+BAA6C,IAAI,KAAK,CAAC;CAE3F,MAAM,aAAa,eAAe,iBAAiB;CAEnD,MAAM,gBAAgB,aACnB,OAAe;EACd,IAAI,CAAC,cACH,sBAAsB,GAAG;EAE3B,oBAAoB,GAAG;IAEzB,CAAC,cAAc,kBAAkB,CAClC;CAED,MAAM,cAAc,aAAa,OAAe;EAC9C,kBAAkB,SAAU,KAAK,SAAS,GAAG,GAAG,OAAO,CAAC,GAAG,MAAM,GAAG,CAAE;IACrE,EAAE,CAAC;CAEN,MAAM,gBAAgB,aAAa,OAAe;EAChD,kBAAkB,SAAS,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC;EACxD,eAAe,SAAS;GACtB,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,OAAO,GAAG;GACf,OAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,eAAe,aAAa,IAAY,WAA4B;EACxE,eAAe,SAAS;GACtB,MAAM,MAAM,KAAK,IAAI,GAAG;GACxB,IACE,OACA,IAAI,MAAM,OAAO,KACjB,IAAI,MAAM,OAAO,KACjB,IAAI,UAAU,OAAO,SACrB,IAAI,WAAW,OAAO,QAEtB,OAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,IAAI,IAAI,OAAO;GACpB,OAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,iBAAiB,aAAa,OAAe;EACjD,eAAe,SAAS;GACtB,IAAI,CAAC,KAAK,IAAI,GAAG,EACf,OAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,OAAO,GAAG;GACf,OAAO;IACP;IACD,EAAE,CAAC;CAEN,gBAAgB;EACd,IAAI,gBAAgB,sBAAsB,KAAA,GACxC;EAEF,IAAI,uBAAuB,MACzB;EAEF,IAAI,cAAc,WAAW,GAC3B;EAEF,sBAAsB,cAAc,GAAI;IACvC;EAAC;EAAc;EAAmB;EAAoB;EAAc,CAAC;CAExE,OAAO,eACE;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}
1
+ {"version":3,"file":"tabsContexts.js","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"sourcesContent":["import type { UniversalTabsVariant } from '@yahoo/uds-types';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport type { LayoutRectangle } from 'react-native';\n\nexport interface TabsVisualContextValue {\n variant: UniversalTabsVariant;\n reduceMotion: boolean;\n /** Tabs-level font-scaling cap; undefined = resolve from the control cap. */\n maxFontSizeMultiplier?: number | null;\n}\n\nexport const TabsVisualContext = createContext<TabsVisualContextValue>({\n variant: 'primary',\n reduceMotion: false,\n});\n\nexport function useTabsVisualContext(): TabsVisualContextValue {\n return useContext(TabsVisualContext);\n}\n\nexport interface TabSelectionContextValue {\n selectedId: string | null | undefined;\n setSelectedId: (id: string) => void;\n registerTab: (id: string) => void;\n unregisterTab: (id: string) => void;\n tabLayouts: ReadonlyMap<string, LayoutRectangle>;\n setTabLayout: (id: string, layout: LayoutRectangle) => void;\n clearTabLayout: (id: string) => void;\n}\n\nexport const TabSelectionContext = createContext<TabSelectionContextValue | null>(null);\n\nexport function useTabSelectionContext(): TabSelectionContextValue {\n const ctx = useContext(TabSelectionContext);\n if (!ctx) {\n throw new Error('Tab components must be used within <Tabs>');\n }\n return ctx;\n}\n\nexport function useTabSelectionState({\n defaultSelectedId,\n selectedId: selectedIdProp,\n onSelectionChange,\n}: {\n defaultSelectedId?: string;\n selectedId?: string | null;\n onSelectionChange?: (selectedId: string | null | undefined) => void;\n}): TabSelectionContextValue {\n const isControlled = selectedIdProp !== undefined;\n const [internalSelectedId, setInternalSelectedId] = useState<string | null>(\n defaultSelectedId ?? null,\n );\n const [registeredIds, setRegisteredIds] = useState<string[]>([]);\n const [tabLayouts, setTabLayouts] = useState<Map<string, LayoutRectangle>>(() => new Map());\n\n const selectedId = isControlled ? selectedIdProp : internalSelectedId;\n\n const setSelectedId = useCallback(\n (id: string) => {\n if (!isControlled) {\n setInternalSelectedId(id);\n }\n onSelectionChange?.(id);\n },\n [isControlled, onSelectionChange],\n );\n\n const registerTab = useCallback((id: string) => {\n setRegisteredIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n }, []);\n\n const unregisterTab = useCallback((id: string) => {\n setRegisteredIds((prev) => prev.filter((x) => x !== id));\n setTabLayouts((prev) => {\n const next = new Map(prev);\n next.delete(id);\n return next;\n });\n }, []);\n\n const setTabLayout = useCallback((id: string, layout: LayoutRectangle) => {\n setTabLayouts((prev) => {\n const cur = prev.get(id);\n if (\n cur &&\n cur.x === layout.x &&\n cur.y === layout.y &&\n cur.width === layout.width &&\n cur.height === layout.height\n ) {\n return prev;\n }\n const next = new Map(prev);\n next.set(id, layout);\n return next;\n });\n }, []);\n\n const clearTabLayout = useCallback((id: string) => {\n setTabLayouts((prev) => {\n if (!prev.has(id)) {\n return prev;\n }\n const next = new Map(prev);\n next.delete(id);\n return next;\n });\n }, []);\n\n useEffect(() => {\n if (isControlled || defaultSelectedId !== undefined) {\n return;\n }\n if (internalSelectedId !== null) {\n return;\n }\n if (registeredIds.length === 0) {\n return;\n }\n setInternalSelectedId(registeredIds[0]!);\n }, [isControlled, defaultSelectedId, internalSelectedId, registeredIds]);\n\n return useMemo(\n () => ({\n selectedId,\n setSelectedId,\n registerTab,\n unregisterTab,\n tabLayouts,\n setTabLayout,\n clearTabLayout,\n }),\n [\n selectedId,\n setSelectedId,\n registerTab,\n unregisterTab,\n tabLayouts,\n setTabLayout,\n clearTabLayout,\n ],\n );\n}\n"],"mappings":";;;AAWA,MAAa,oBAAoB,cAAsC;CACrE,SAAS;CACT,cAAc;CACf,CAAC;AAEF,SAAgB,uBAA+C;CAC7D,OAAO,WAAW,kBAAkB;;AAatC,MAAa,sBAAsB,cAA+C,KAAK;AAEvF,SAAgB,yBAAmD;CACjE,MAAM,MAAM,WAAW,oBAAoB;CAC3C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,4CAA4C;CAE9D,OAAO;;AAGT,SAAgB,qBAAqB,EACnC,mBACA,YAAY,gBACZ,qBAK2B;CAC3B,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,qBAAqB,KACtB;CACD,MAAM,CAAC,eAAe,oBAAoB,SAAmB,EAAE,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,+BAA6C,IAAI,KAAK,CAAC;CAE3F,MAAM,aAAa,eAAe,iBAAiB;CAEnD,MAAM,gBAAgB,aACnB,OAAe;EACd,IAAI,CAAC,cACH,sBAAsB,GAAG;EAE3B,oBAAoB,GAAG;IAEzB,CAAC,cAAc,kBAAkB,CAClC;CAED,MAAM,cAAc,aAAa,OAAe;EAC9C,kBAAkB,SAAU,KAAK,SAAS,GAAG,GAAG,OAAO,CAAC,GAAG,MAAM,GAAG,CAAE;IACrE,EAAE,CAAC;CAEN,MAAM,gBAAgB,aAAa,OAAe;EAChD,kBAAkB,SAAS,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC;EACxD,eAAe,SAAS;GACtB,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,OAAO,GAAG;GACf,OAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,eAAe,aAAa,IAAY,WAA4B;EACxE,eAAe,SAAS;GACtB,MAAM,MAAM,KAAK,IAAI,GAAG;GACxB,IACE,OACA,IAAI,MAAM,OAAO,KACjB,IAAI,MAAM,OAAO,KACjB,IAAI,UAAU,OAAO,SACrB,IAAI,WAAW,OAAO,QAEtB,OAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,IAAI,IAAI,OAAO;GACpB,OAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,iBAAiB,aAAa,OAAe;EACjD,eAAe,SAAS;GACtB,IAAI,CAAC,KAAK,IAAI,GAAG,EACf,OAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;GAC1B,KAAK,OAAO,GAAG;GACf,OAAO;IACP;IACD,EAAE,CAAC;CAEN,gBAAgB;EACd,IAAI,gBAAgB,sBAAsB,KAAA,GACxC;EAEF,IAAI,uBAAuB,MACzB;EAEF,IAAI,cAAc,WAAW,GAC3B;EAEF,sBAAsB,cAAc,GAAI;IACvC;EAAC;EAAc;EAAmB;EAAoB;EAAc,CAAC;CAExE,OAAO,eACE;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}
@@ -1,6 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  require("../_virtual/_rolldown/runtime.cjs");
4
+ const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
4
5
  let react = require("react");
5
6
  let react_native = require("react-native");
6
7
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -47,13 +48,14 @@ function hasCJKContent(children) {
47
48
  *
48
49
  * @see {@link Link} for interactive text links
49
50
  */
50
- const Text = (0, react.memo)(function Text({ color = "primary", variant = "body1", fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, children, ...props }) {
51
+ const Text = (0, react.memo)(function Text({ color = "primary", variant = "body1", fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, maxFontSizeMultiplier, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, children, ...props }) {
51
52
  const resolvedColor = color === "inherit" ? void 0 : color;
52
53
  const resolvedVariant = variant === "inherit" ? void 0 : variant;
53
54
  const resolvedFontFamily = fontFamily ?? resolvedVariant;
54
55
  const resolvedFontSize = fontSize ?? resolvedVariant;
55
56
  const resolvedLineHeight = lineHeight === "none" ? void 0 : lineHeight ?? (hasCJKContent(children) ? void 0 : resolvedVariant);
56
57
  const resolvedLetterSpacing = letterSpacing ?? resolvedVariant;
58
+ const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier(resolvedVariant, maxFontSizeMultiplier);
57
59
  generated_styles.styles.useVariants({
58
60
  color: resolvedColor,
59
61
  fontFamily: resolvedFontFamily,
@@ -124,6 +126,7 @@ const Text = (0, react.memo)(function Text({ color = "primary", variant = "body1
124
126
  style,
125
127
  generated_styles.styles.foundation
126
128
  ]),
129
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
127
130
  ...props,
128
131
  children
129
132
  });
@@ -5,7 +5,7 @@ import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-nativ
5
5
  import { StyleProps } from "../../generated/styles";
6
6
 
7
7
  //#region src/components/Text.d.ts
8
- type TextVariant = Exclude<StyleProps['fontFamily'], 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
8
+ type TextVariant = Exclude<NonNullable<StyleProps['fontFamily']>, 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
9
9
  type TextVariantProp = TextVariant | 'inherit';
10
10
  type TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';
11
11
  interface TextProps extends TextProps$1 {
@@ -15,6 +15,14 @@ interface TextProps extends TextProps$1 {
15
15
  color?: StyleProps['color'] | 'inherit';
16
16
  /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */
17
17
  variant?: TextVariantProp;
18
+ /**
19
+ * Caps how far this text grows with the OS text-size setting. Display and
20
+ * title variants are capped by default (see DEFAULT_MAX_FONT_SIZE_MULTIPLIERS);
21
+ * reading sizes are uncapped. Set null to remove the cap (maps to React
22
+ * Native's 0, which also overrides an inherited cap); inherit-variant text
23
+ * inherits its parent's cap. Override app-wide via UDSFontScalingProvider.
24
+ */
25
+ maxFontSizeMultiplier?: number | null;
18
26
  /** Override the fontFamily independently */
19
27
  fontFamily?: StyleProps['fontFamily'];
20
28
  /** Override the fontSize independently */
@@ -105,5 +113,5 @@ interface TextProps extends TextProps$1 {
105
113
  */
106
114
  declare const Text: _$react.NamedExoticComponent<TextProps>;
107
115
  //#endregion
108
- export { Text, type TextProps };
116
+ export { Text, type TextProps, type TextVariant };
109
117
  //# sourceMappingURL=Text.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KASK,WAAA,GAAc,OAAA,CACjB,UAAA;AAAA,KAGG,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCA;EAkCV,KAAA,GAAQ,UAAA;EA/BU;EAiClB,OAAA,GAAU,eAAA;EAjCW;EAmCrB,UAAA,GAAa,UAAA;EA/BV;EAiCH,QAAA,GAAW,UAAA;;EAEX,UAAA,GAAa,UAAA;EAnCQ;EAqCrB,UAAA,GAAa,UAAA;EAdK;EAgBlB,aAAA,GAAgB,UAAA;EAdN;EAgBV,SAAA,GAAY,UAAA;EAdJ;EAgBR,aAAA,GAAgB,UAAA;EAZH;EAcb,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
1
+ {"version":3,"file":"Text.d.cts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KAUK,WAAA,GAAc,OAAA,CACjB,WAAA,CAAY,UAAA;AAAA,KAGT,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCV;EAkCA,KAAA,GAAQ,UAAA;EAnCgB;EAqCxB,OAAA,GAAU,eAAA;EArCO;;;;;AACK;;EA4CtB,qBAAA;EAzCqB;EA2CrB,UAAA,GAAa,UAAA;EAvCV;EAyCH,QAAA,GAAW,UAAA;;EAEX,UAAA,GAAa,UAAA;EA3CQ;EA6CrB,UAAA,GAAa,UAAA;EAtBK;EAwBlB,aAAA,GAAgB,UAAA;EAtBN;EAwBV,SAAA,GAAY,UAAA;EAtBJ;EAwBR,aAAA,GAAgB,UAAA;EAZH;EAcb,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
@@ -5,7 +5,7 @@ import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-nativ
5
5
  import { StyleProps } from "../../generated/styles";
6
6
 
7
7
  //#region src/components/Text.d.ts
8
- type TextVariant = Exclude<StyleProps['fontFamily'], 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
8
+ type TextVariant = Exclude<NonNullable<StyleProps['fontFamily']>, 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'>;
9
9
  type TextVariantProp = TextVariant | 'inherit';
10
10
  type TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';
11
11
  interface TextProps extends TextProps$1 {
@@ -15,6 +15,14 @@ interface TextProps extends TextProps$1 {
15
15
  color?: StyleProps['color'] | 'inherit';
16
16
  /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */
17
17
  variant?: TextVariantProp;
18
+ /**
19
+ * Caps how far this text grows with the OS text-size setting. Display and
20
+ * title variants are capped by default (see DEFAULT_MAX_FONT_SIZE_MULTIPLIERS);
21
+ * reading sizes are uncapped. Set null to remove the cap (maps to React
22
+ * Native's 0, which also overrides an inherited cap); inherit-variant text
23
+ * inherits its parent's cap. Override app-wide via UDSFontScalingProvider.
24
+ */
25
+ maxFontSizeMultiplier?: number | null;
18
26
  /** Override the fontFamily independently */
19
27
  fontFamily?: StyleProps['fontFamily'];
20
28
  /** Override the fontSize independently */
@@ -105,5 +113,5 @@ interface TextProps extends TextProps$1 {
105
113
  */
106
114
  declare const Text: _$react.NamedExoticComponent<TextProps>;
107
115
  //#endregion
108
- export { Text, type TextProps };
116
+ export { Text, type TextProps, type TextVariant };
109
117
  //# sourceMappingURL=Text.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Text.d.ts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KASK,WAAA,GAAc,OAAA,CACjB,UAAA;AAAA,KAGG,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCA;EAkCV,KAAA,GAAQ,UAAA;EA/BU;EAiClB,OAAA,GAAU,eAAA;EAjCW;EAmCrB,UAAA,GAAa,UAAA;EA/BV;EAiCH,QAAA,GAAW,UAAA;;EAEX,UAAA,GAAa,UAAA;EAnCQ;EAqCrB,UAAA,GAAa,UAAA;EAdK;EAgBlB,aAAA,GAAgB,UAAA;EAdN;EAgBV,SAAA,GAAY,UAAA;EAdJ;EAgBR,aAAA,GAAgB,UAAA;EAZH;EAcb,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
1
+ {"version":3,"file":"Text.d.ts","names":[],"sources":["../../src/components/Text.tsx"],"mappings":";;;;;;;KAUK,WAAA,GAAc,OAAA,CACjB,WAAA,CAAY,UAAA;AAAA,KAGT,eAAA,GAAkB,WAAA;AAAA,KAIlB,kBAAA;AAAA,UAuBK,SAAA,SAAkB,WAAA;;EAE1B,GAAA,GAAM,GAAA,CAAI,MAAA;EAhCV;EAkCA,KAAA,GAAQ,UAAA;EAnCgB;EAqCxB,OAAA,GAAU,eAAA;EArCO;;;;;AACK;;EA4CtB,qBAAA;EAzCqB;EA2CrB,UAAA,GAAa,UAAA;EAvCV;EAyCH,QAAA,GAAW,UAAA;;EAEX,UAAA,GAAa,UAAA;EA3CQ;EA6CrB,UAAA,GAAa,UAAA;EAtBK;EAwBlB,aAAA,GAAgB,UAAA;EAtBN;EAwBV,SAAA,GAAY,UAAA;EAtBJ;EAwBR,aAAA,GAAgB,UAAA;EAZH;EAcb,kBAAA,GAAqB,kBAAA;EAErB,eAAA,GAAkB,UAAA;EAElB,YAAA,GAAe,UAAA;EACf,oBAAA,GAAuB,UAAA;EACvB,kBAAA,GAAqB,UAAA;EACrB,uBAAA,GAA0B,UAAA;EAC1B,qBAAA,GAAwB,UAAA;EACxB,WAAA,GAAc,UAAA;EACd,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EACpB,WAAA,GAAc,UAAA;EACd,mBAAA,GAAsB,UAAA;EACtB,qBAAA,GAAwB,UAAA;EACxB,gBAAA,GAAmB,UAAA;EACnB,cAAA,GAAiB,UAAA;EACjB,cAAA,GAAiB,UAAA;EACjB,iBAAA,GAAoB,UAAA;EAEpB,OAAA,GAAU,UAAA;EACV,iBAAA,GAAoB,UAAA;EACpB,eAAA,GAAkB,UAAA;EAClB,aAAA,GAAgB,UAAA;EAChB,UAAA,GAAa,UAAA;EACb,YAAA,GAAe,UAAA;EACf,UAAA,GAAa,UAAA;EAEb,MAAA,GAAS,UAAA;EACT,cAAA,GAAiB,UAAA;EACjB,gBAAA,GAAmB,UAAA;EACnB,YAAA,GAAe,UAAA;EACf,SAAA,GAAY,UAAA;EACZ,WAAA,GAAc,UAAA;EACd,SAAA,GAAY,UAAA;EAEZ,UAAA,GAAa,UAAA;EAEb,aAAA,GAAgB,SAAA;EAEhB,MAAA;EACA,KAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;EACA,QAAA;EAEA,mBAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCI,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}
@@ -1,4 +1,5 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
+ import { useMaxFontSizeMultiplier } from "../fontScaling/useMaxFontSizeMultiplier.js";
2
3
  import { memo, useMemo } from "react";
3
4
  import { Text as Text$1 } from "react-native";
4
5
  import { jsx } from "react/jsx-runtime";
@@ -45,13 +46,14 @@ function hasCJKContent(children) {
45
46
  *
46
47
  * @see {@link Link} for interactive text links
47
48
  */
48
- const Text = memo(function Text({ color = "primary", variant = "body1", fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, children, ...props }) {
49
+ const Text = memo(function Text({ color = "primary", variant = "body1", fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, maxFontSizeMultiplier, textAlign, textTransform, textDecorationLine, style, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, flexShrink, verticalAlign, height, minHeight, maxHeight, width, minWidth, maxWidth, dangerouslySetColor, ref, children, ...props }) {
49
50
  const resolvedColor = color === "inherit" ? void 0 : color;
50
51
  const resolvedVariant = variant === "inherit" ? void 0 : variant;
51
52
  const resolvedFontFamily = fontFamily ?? resolvedVariant;
52
53
  const resolvedFontSize = fontSize ?? resolvedVariant;
53
54
  const resolvedLineHeight = lineHeight === "none" ? void 0 : lineHeight ?? (hasCJKContent(children) ? void 0 : resolvedVariant);
54
55
  const resolvedLetterSpacing = letterSpacing ?? resolvedVariant;
56
+ const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier(resolvedVariant, maxFontSizeMultiplier);
55
57
  styles.useVariants({
56
58
  color: resolvedColor,
57
59
  fontFamily: resolvedFontFamily,
@@ -122,6 +124,7 @@ const Text = memo(function Text({ color = "primary", variant = "body1", fontFami
122
124
  style,
123
125
  styles.foundation
124
126
  ]),
127
+ maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
125
128
  ...props,
126
129
  children
127
130
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Text.js","names":["RNText"],"sources":["../../src/components/Text.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { StyleProp, TextProps as RNTextProps, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\n// TextVariant is a subset of fontFamily that represents typography variants\ntype TextVariant = Exclude<\n StyleProps['fontFamily'],\n 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'\n>;\ntype TextVariantProp = TextVariant | 'inherit';\n\n// React Native text decoration line values\n// See: https://reactnative.dev/docs/text-style-props#textdecorationline\ntype TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';\n\n// Chinese/Japanese/Korean scripts: Hangul Jamo, CJK radicals + punctuation,\n// Kana, Han ideographs, Hangul syllables, compatibility ideographs, and\n// full/half-width forms.\nconst CJK_RE =\n /[\\u1100-\\u11FF\\u2E80-\\u303F\\u3040-\\u30FF\\u31C0-\\u9FFF\\uAC00-\\uD7AF\\uF900-\\uFAFF\\uFF00-\\uFFEF]/;\n\n/**\n * Detects CJK characters in string children (including strings inside a\n * children array, e.g. from `{city}` interpolation). Nested elements are not\n * inspected - a nested <Text> runs its own detection.\n */\nfunction hasCJKContent(children: ReactNode): boolean {\n if (typeof children === 'string') {\n return CJK_RE.test(children);\n }\n if (Array.isArray(children)) {\n return children.some((child) => typeof child === 'string' && CJK_RE.test(child));\n }\n return false;\n}\n\ninterface TextProps extends RNTextProps {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** Text color from the theme palette */\n color?: StyleProps['color'] | 'inherit';\n /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */\n variant?: TextVariantProp;\n /** Override the fontFamily independently */\n fontFamily?: StyleProps['fontFamily'];\n /** Override the fontSize independently */\n fontSize?: StyleProps['fontSize'];\n /** Set font weight (not derived from variant) */\n fontWeight?: StyleProps['fontWeight'];\n /** Override the lineHeight independently. Use 'none' to remove the variant lineHeight and let the font's natural line height apply */\n lineHeight?: StyleProps['lineHeight'] | 'none';\n /** Override the letterSpacing independently */\n letterSpacing?: StyleProps['letterSpacing'];\n /** Text alignment (left, center, right) */\n textAlign?: StyleProps['textAlign'];\n /** Set text transform (not derived from variant) */\n textTransform?: StyleProps['textTransform'];\n /** Text decoration (underline, line-through, etc.) */\n textDecorationLine?: TextDecorationLine;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n // Offset\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Vertical Alignment\n verticalAlign?: TextStyle['textAlignVertical'];\n // Size\n height?: number | `${number}%`;\n width?: number | `${number}%`;\n minHeight?: number | `${number}%`;\n maxHeight?: number | `${number}%`;\n minWidth?: number | `${number}%`;\n maxWidth?: number | `${number}%`;\n // Dangerously set props\n dangerouslySetColor?: string;\n}\n\n/**\n * **📝 A text component with UDS styling**\n *\n * @description\n * A styled text component that supports UDS typography variants and colors.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Text } from '@yahoo/uds-mobile/Text';\n *\n * <Text variant=\"body1\" color=\"primary\">Hello, World!</Text>\n * <Text variant=\"display1\" fontWeight=\"bold\">Heading</Text>\n * <Text variant=\"label1\" color=\"secondary\">Caption text</Text>\n * ```\n *\n * @usage\n * - Use variant prop to set typography (display1, body1, label1, etc.)\n * - Use color prop to set text color from the palette\n * - Use fontWeight to override the variant's default weight\n *\n * @accessibility\n * - Text is readable by screen readers by default\n * - Use appropriate variant sizes for readability\n * - Ensure sufficient color contrast with background\n *\n * @see {@link Link} for interactive text links\n */\nconst Text = memo(function Text({\n // Text-specific\n color = 'primary',\n variant = 'body1',\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n textAlign,\n textTransform,\n textDecorationLine,\n style,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n // Offset\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n // Flex\n flexShrink,\n // Vertical Alignment\n verticalAlign,\n // Size\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n // Dangerously set props\n dangerouslySetColor,\n ref,\n children,\n // Rest\n ...props\n}: TextProps) {\n const resolvedColor = color === 'inherit' ? undefined : color;\n const resolvedVariant = variant === 'inherit' ? undefined : variant;\n const resolvedFontFamily = fontFamily ?? resolvedVariant;\n const resolvedFontSize = fontSize ?? resolvedVariant;\n // React Native clips glyphs when lineHeight is smaller than the font's\n // natural line box. CJK fallback fonts are ~1.4x taller than Latin ones, so\n // Latin-tuned variant lineHeights clip CJK text - drop the variant lineHeight\n // for CJK content so the line grows to fit.\n const resolvedLineHeight =\n lineHeight === 'none'\n ? undefined\n : (lineHeight ?? (hasCJKContent(children) ? undefined : resolvedVariant));\n const resolvedLetterSpacing = letterSpacing ?? resolvedVariant;\n\n styles.useVariants({\n // Text styles\n color: resolvedColor,\n fontFamily: resolvedFontFamily,\n fontSize: resolvedFontSize,\n fontWeight,\n lineHeight: resolvedLineHeight,\n letterSpacing: resolvedLetterSpacing,\n textAlign,\n textTransform,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n // Offset\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n // Flex\n flexShrink,\n });\n\n // styles.foundation must be in deps - it returns a new reference when variants change.\n const computedStyle: StyleProp<TextStyle> = useMemo(\n () => [\n textDecorationLine ? { textDecorationLine } : undefined,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n verticalAlign ? { textAlignVertical: verticalAlign } : undefined,\n height ? { height } : undefined,\n minHeight ? { minHeight } : undefined,\n maxHeight ? { maxHeight } : undefined,\n width ? { width } : undefined,\n minWidth ? { minWidth } : undefined,\n maxWidth ? { maxWidth } : undefined,\n styles.foundation,\n style,\n ],\n [\n textDecorationLine,\n dangerouslySetColor,\n verticalAlign,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n style,\n styles.foundation,\n ],\n );\n\n return (\n <RNText ref={ref} style={computedStyle} {...props}>\n {children}\n </RNText>\n );\n});\n\nText.displayName = 'Text';\n\nexport { Text, type TextProps };\n"],"mappings":";;;;;;AAsBA,MAAM,SACJ;;;;;;AAOF,SAAS,cAAc,UAA8B;CACnD,IAAI,OAAO,aAAa,UACtB,OAAO,OAAO,KAAK,SAAS;CAE9B,IAAI,MAAM,QAAQ,SAAS,EACzB,OAAO,SAAS,MAAM,UAAU,OAAO,UAAU,YAAY,OAAO,KAAK,MAAM,CAAC;CAElF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2GT,MAAM,OAAO,KAAK,SAAS,KAAK,EAE9B,QAAQ,WACR,UAAU,SACV,YACA,UACA,YACA,YACA,eACA,WACA,eACA,oBACA,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,YAEA,eAEA,QACA,WACA,WACA,OACA,UACA,UAEA,qBACA,KACA,UAEA,GAAG,SACS;CACZ,MAAM,gBAAgB,UAAU,YAAY,KAAA,IAAY;CACxD,MAAM,kBAAkB,YAAY,YAAY,KAAA,IAAY;CAC5D,MAAM,qBAAqB,cAAc;CACzC,MAAM,mBAAmB,YAAY;CAKrC,MAAM,qBACJ,eAAe,SACX,KAAA,IACC,eAAe,cAAc,SAAS,GAAG,KAAA,IAAY;CAC5D,MAAM,wBAAwB,iBAAiB;CAE/C,OAAO,YAAY;EAEjB,OAAO;EACP,YAAY;EACZ,UAAU;EACV;EACA,YAAY;EACZ,eAAe;EACf;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACD,CAAC;CAgCF,OACE,oBAACA,QAAD;EAAa;EAAK,OA9BwB,cACpC;GACJ,qBAAqB,EAAE,oBAAoB,GAAG,KAAA;GAC9C,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,gBAAgB,EAAE,mBAAmB,eAAe,GAAG,KAAA;GACvD,SAAS,EAAE,QAAQ,GAAG,KAAA;GACtB,YAAY,EAAE,WAAW,GAAG,KAAA;GAC5B,YAAY,EAAE,WAAW,GAAG,KAAA;GAC5B,QAAQ,EAAE,OAAO,GAAG,KAAA;GACpB,WAAW,EAAE,UAAU,GAAG,KAAA;GAC1B,WAAW,EAAE,UAAU,GAAG,KAAA;GAC1B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACR,CAIqC;EAAE,GAAI;EACzC;EACM,CAAA;EAEX;AAEF,KAAK,cAAc"}
1
+ {"version":3,"file":"Text.js","names":["RNText"],"sources":["../../src/components/Text.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { StyleProp, TextProps as RNTextProps, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../fontScaling/useMaxFontSizeMultiplier';\n\n// TextVariant is a subset of fontFamily that represents typography variants\ntype TextVariant = Exclude<\n NonNullable<StyleProps['fontFamily']>,\n 'sans' | 'sans-alt' | 'serif' | 'serif-alt' | 'mono' | 'icons'\n>;\ntype TextVariantProp = TextVariant | 'inherit';\n\n// React Native text decoration line values\n// See: https://reactnative.dev/docs/text-style-props#textdecorationline\ntype TextDecorationLine = 'none' | 'underline' | 'line-through' | 'underline line-through';\n\n// Chinese/Japanese/Korean scripts: Hangul Jamo, CJK radicals + punctuation,\n// Kana, Han ideographs, Hangul syllables, compatibility ideographs, and\n// full/half-width forms.\nconst CJK_RE =\n /[\\u1100-\\u11FF\\u2E80-\\u303F\\u3040-\\u30FF\\u31C0-\\u9FFF\\uAC00-\\uD7AF\\uF900-\\uFAFF\\uFF00-\\uFFEF]/;\n\n/**\n * Detects CJK characters in string children (including strings inside a\n * children array, e.g. from `{city}` interpolation). Nested elements are not\n * inspected - a nested <Text> runs its own detection.\n */\nfunction hasCJKContent(children: ReactNode): boolean {\n if (typeof children === 'string') {\n return CJK_RE.test(children);\n }\n if (Array.isArray(children)) {\n return children.some((child) => typeof child === 'string' && CJK_RE.test(child));\n }\n return false;\n}\n\ninterface TextProps extends RNTextProps {\n /** Ref to the underlying Text element */\n ref?: Ref<RNText>;\n /** Text color from the theme palette */\n color?: StyleProps['color'] | 'inherit';\n /** Typography variant - sets fontSize, lineHeight, letterSpacing, and fontFamily together */\n variant?: TextVariantProp;\n /**\n * Caps how far this text grows with the OS text-size setting. Display and\n * title variants are capped by default (see DEFAULT_MAX_FONT_SIZE_MULTIPLIERS);\n * reading sizes are uncapped. Set null to remove the cap (maps to React\n * Native's 0, which also overrides an inherited cap); inherit-variant text\n * inherits its parent's cap. Override app-wide via UDSFontScalingProvider.\n */\n maxFontSizeMultiplier?: number | null;\n /** Override the fontFamily independently */\n fontFamily?: StyleProps['fontFamily'];\n /** Override the fontSize independently */\n fontSize?: StyleProps['fontSize'];\n /** Set font weight (not derived from variant) */\n fontWeight?: StyleProps['fontWeight'];\n /** Override the lineHeight independently. Use 'none' to remove the variant lineHeight and let the font's natural line height apply */\n lineHeight?: StyleProps['lineHeight'] | 'none';\n /** Override the letterSpacing independently */\n letterSpacing?: StyleProps['letterSpacing'];\n /** Text alignment (left, center, right) */\n textAlign?: StyleProps['textAlign'];\n /** Set text transform (not derived from variant) */\n textTransform?: StyleProps['textTransform'];\n /** Text decoration (underline, line-through, etc.) */\n textDecorationLine?: TextDecorationLine;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n // Offset\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n // Flex\n flexShrink?: StyleProps['flexShrink'];\n // Vertical Alignment\n verticalAlign?: TextStyle['textAlignVertical'];\n // Size\n height?: number | `${number}%`;\n width?: number | `${number}%`;\n minHeight?: number | `${number}%`;\n maxHeight?: number | `${number}%`;\n minWidth?: number | `${number}%`;\n maxWidth?: number | `${number}%`;\n // Dangerously set props\n dangerouslySetColor?: string;\n}\n\n/**\n * **📝 A text component with UDS styling**\n *\n * @description\n * A styled text component that supports UDS typography variants and colors.\n *\n * @category Display\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Text } from '@yahoo/uds-mobile/Text';\n *\n * <Text variant=\"body1\" color=\"primary\">Hello, World!</Text>\n * <Text variant=\"display1\" fontWeight=\"bold\">Heading</Text>\n * <Text variant=\"label1\" color=\"secondary\">Caption text</Text>\n * ```\n *\n * @usage\n * - Use variant prop to set typography (display1, body1, label1, etc.)\n * - Use color prop to set text color from the palette\n * - Use fontWeight to override the variant's default weight\n *\n * @accessibility\n * - Text is readable by screen readers by default\n * - Use appropriate variant sizes for readability\n * - Ensure sufficient color contrast with background\n *\n * @see {@link Link} for interactive text links\n */\nconst Text = memo(function Text({\n // Text-specific\n color = 'primary',\n variant = 'body1',\n fontFamily,\n fontSize,\n fontWeight,\n lineHeight,\n letterSpacing,\n maxFontSizeMultiplier,\n textAlign,\n textTransform,\n textDecorationLine,\n style,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n // Offset\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n // Flex\n flexShrink,\n // Vertical Alignment\n verticalAlign,\n // Size\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n // Dangerously set props\n dangerouslySetColor,\n ref,\n children,\n // Rest\n ...props\n}: TextProps) {\n const resolvedColor = color === 'inherit' ? undefined : color;\n const resolvedVariant = variant === 'inherit' ? undefined : variant;\n const resolvedFontFamily = fontFamily ?? resolvedVariant;\n const resolvedFontSize = fontSize ?? resolvedVariant;\n // React Native clips glyphs when lineHeight is smaller than the font's\n // natural line box. CJK fallback fonts are ~1.4x taller than Latin ones, so\n // Latin-tuned variant lineHeights clip CJK text - drop the variant lineHeight\n // for CJK content so the line grows to fit.\n const resolvedLineHeight =\n lineHeight === 'none'\n ? undefined\n : (lineHeight ?? (hasCJKContent(children) ? undefined : resolvedVariant));\n const resolvedLetterSpacing = letterSpacing ?? resolvedVariant;\n // Explicit prop wins, including explicit null (?? would swallow it).\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier(\n resolvedVariant,\n maxFontSizeMultiplier,\n );\n\n styles.useVariants({\n // Text styles\n color: resolvedColor,\n fontFamily: resolvedFontFamily,\n fontSize: resolvedFontSize,\n fontWeight,\n lineHeight: resolvedLineHeight,\n letterSpacing: resolvedLetterSpacing,\n textAlign,\n textTransform,\n // Background\n backgroundColor,\n // Border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // Spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n // Offset\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n // Flex\n flexShrink,\n });\n\n // styles.foundation must be in deps - it returns a new reference when variants change.\n const computedStyle: StyleProp<TextStyle> = useMemo(\n () => [\n textDecorationLine ? { textDecorationLine } : undefined,\n dangerouslySetColor ? { color: dangerouslySetColor } : undefined,\n verticalAlign ? { textAlignVertical: verticalAlign } : undefined,\n height ? { height } : undefined,\n minHeight ? { minHeight } : undefined,\n maxHeight ? { maxHeight } : undefined,\n width ? { width } : undefined,\n minWidth ? { minWidth } : undefined,\n maxWidth ? { maxWidth } : undefined,\n styles.foundation,\n style,\n ],\n [\n textDecorationLine,\n dangerouslySetColor,\n verticalAlign,\n height,\n minHeight,\n maxHeight,\n width,\n minWidth,\n maxWidth,\n style,\n styles.foundation,\n ],\n );\n\n return (\n <RNText\n ref={ref}\n style={computedStyle}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n {...props}\n >\n {children}\n </RNText>\n );\n});\n\nText.displayName = 'Text';\n\nexport { Text, type TextProps, type TextVariant };\n"],"mappings":";;;;;;;AAuBA,MAAM,SACJ;;;;;;AAOF,SAAS,cAAc,UAA8B;CACnD,IAAI,OAAO,aAAa,UACtB,OAAO,OAAO,KAAK,SAAS;CAE9B,IAAI,MAAM,QAAQ,SAAS,EACzB,OAAO,SAAS,MAAM,UAAU,OAAO,UAAU,YAAY,OAAO,KAAK,MAAM,CAAC;CAElF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHT,MAAM,OAAO,KAAK,SAAS,KAAK,EAE9B,QAAQ,WACR,UAAU,SACV,YACA,UACA,YACA,YACA,eACA,uBACA,WACA,eACA,oBACA,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YAEA,QACA,gBACA,kBACA,cACA,WACA,aACA,WAEA,YAEA,eAEA,QACA,WACA,WACA,OACA,UACA,UAEA,qBACA,KACA,UAEA,GAAG,SACS;CACZ,MAAM,gBAAgB,UAAU,YAAY,KAAA,IAAY;CACxD,MAAM,kBAAkB,YAAY,YAAY,KAAA,IAAY;CAC5D,MAAM,qBAAqB,cAAc;CACzC,MAAM,mBAAmB,YAAY;CAKrC,MAAM,qBACJ,eAAe,SACX,KAAA,IACC,eAAe,cAAc,SAAS,GAAG,KAAA,IAAY;CAC5D,MAAM,wBAAwB,iBAAiB;CAE/C,MAAM,gCAAgC,yBACpC,iBACA,sBACD;CAED,OAAO,YAAY;EAEjB,OAAO;EACP,YAAY;EACZ,UAAU;EACV;EACA,YAAY;EACZ,eAAe;EACf;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACD,CAAC;CAgCF,OACE,oBAACA,QAAD;EACO;EACL,OAhCwC,cACpC;GACJ,qBAAqB,EAAE,oBAAoB,GAAG,KAAA;GAC9C,sBAAsB,EAAE,OAAO,qBAAqB,GAAG,KAAA;GACvD,gBAAgB,EAAE,mBAAmB,eAAe,GAAG,KAAA;GACvD,SAAS,EAAE,QAAQ,GAAG,KAAA;GACtB,YAAY,EAAE,WAAW,GAAG,KAAA;GAC5B,YAAY,EAAE,WAAW,GAAG,KAAA;GAC5B,QAAQ,EAAE,OAAO,GAAG,KAAA;GACpB,WAAW,EAAE,UAAU,GAAG,KAAA;GAC1B,WAAW,EAAE,UAAU,GAAG,KAAA;GAC1B,OAAO;GACP;GACD,EACD;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,OAAO;GACR,CAMqB;EACpB,uBAAuB;EACvB,GAAI;EAEH;EACM,CAAA;EAEX;AAEF,KAAK,cAAc"}
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  require("../_virtual/_rolldown/runtime.cjs");
4
4
  const require_portal = require("../portal.cjs");
5
+ const require_fontScaling_FontScalingContext = require("../fontScaling/FontScalingContext.cjs");
5
6
  let react = require("react");
6
7
  let react_native = require("react-native");
7
8
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -25,10 +26,13 @@ let react_native_gesture_handler = require("react-native-gesture-handler");
25
26
  * }
26
27
  * ```
27
28
  */
28
- const UDSGestureProvider = (0, react.memo)(function UDSGestureProvider({ children }) {
29
+ const UDSGestureProvider = (0, react.memo)(function UDSGestureProvider({ children, fontScaling }) {
29
30
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_gesture_handler.GestureHandlerRootView, {
30
31
  style: styles.root,
31
- children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.PortalProvider, { children })
32
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.PortalProvider, { children: fontScaling ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_fontScaling_FontScalingContext.UDSFontScalingProvider, {
33
+ config: fontScaling,
34
+ children
35
+ }) : children })
32
36
  });
33
37
  });
34
38
  /**