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

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 (129) hide show
  1. package/README.md +3 -1
  2. package/dist/components/Avatar/AvatarIcon.cjs +1 -1
  3. package/dist/components/Avatar/AvatarIcon.js +1 -1
  4. package/dist/components/Avatar/AvatarIcon.js.map +1 -1
  5. package/dist/components/Avatar/AvatarImage.cjs +1 -1
  6. package/dist/components/Avatar/AvatarImage.js +1 -1
  7. package/dist/components/Avatar/AvatarImage.js.map +1 -1
  8. package/dist/components/Avatar/AvatarText.cjs +1 -1
  9. package/dist/components/Avatar/AvatarText.js +1 -1
  10. package/dist/components/Avatar/AvatarText.js.map +1 -1
  11. package/dist/components/Avatar/useAvatarFontScale.cjs +2 -2
  12. package/dist/components/Avatar/useAvatarFontScale.d.cts +1 -1
  13. package/dist/components/Avatar/useAvatarFontScale.d.ts +1 -1
  14. package/dist/components/Avatar/useAvatarFontScale.js +3 -3
  15. package/dist/components/Avatar/useAvatarFontScale.js.map +1 -1
  16. package/dist/components/Button/buttonTheme.cjs +6 -1
  17. package/dist/components/Button/buttonTheme.d.cts +3 -1
  18. package/dist/components/Button/buttonTheme.d.cts.map +1 -1
  19. package/dist/components/Button/buttonTheme.d.ts +3 -1
  20. package/dist/components/Button/buttonTheme.d.ts.map +1 -1
  21. package/dist/components/Button/buttonTheme.js +6 -2
  22. package/dist/components/Button/buttonTheme.js.map +1 -1
  23. package/dist/components/Button.cjs +5 -4
  24. package/dist/components/Button.js +6 -5
  25. package/dist/components/Button.js.map +1 -1
  26. package/dist/components/Checkbox.cjs +13 -7
  27. package/dist/components/Checkbox.d.cts.map +1 -1
  28. package/dist/components/Checkbox.d.ts.map +1 -1
  29. package/dist/components/Checkbox.js +14 -8
  30. package/dist/components/Checkbox.js.map +1 -1
  31. package/dist/components/Chip/ChipBase.cjs +2 -2
  32. package/dist/components/Chip/ChipBase.js +3 -3
  33. package/dist/components/Chip/ChipBase.js.map +1 -1
  34. package/dist/components/Icon.cjs +8 -7
  35. package/dist/components/Icon.d.cts +2 -0
  36. package/dist/components/Icon.d.cts.map +1 -1
  37. package/dist/components/Icon.d.ts +2 -0
  38. package/dist/components/Icon.d.ts.map +1 -1
  39. package/dist/components/Icon.js +9 -8
  40. package/dist/components/Icon.js.map +1 -1
  41. package/dist/components/IconButton.cjs +17 -6
  42. package/dist/components/IconButton.d.cts +6 -0
  43. package/dist/components/IconButton.d.cts.map +1 -1
  44. package/dist/components/IconButton.d.ts +6 -0
  45. package/dist/components/IconButton.d.ts.map +1 -1
  46. package/dist/components/IconButton.js +18 -7
  47. package/dist/components/IconButton.js.map +1 -1
  48. package/dist/components/Input.cjs +4 -2
  49. package/dist/components/Input.js +5 -3
  50. package/dist/components/Input.js.map +1 -1
  51. package/dist/components/InputHelpText.cjs +2 -1
  52. package/dist/components/InputHelpText.js +2 -1
  53. package/dist/components/InputHelpText.js.map +1 -1
  54. package/dist/components/Link.cjs +5 -1
  55. package/dist/components/Link.d.cts.map +1 -1
  56. package/dist/components/Link.d.ts.map +1 -1
  57. package/dist/components/Link.js +5 -1
  58. package/dist/components/Link.js.map +1 -1
  59. package/dist/components/Pagination/Pagination.cjs +1 -1
  60. package/dist/components/Pagination/Pagination.js +1 -1
  61. package/dist/components/Pagination/Pagination.js.map +1 -1
  62. package/dist/components/Pagination/PaginationEllipsis.cjs +1 -1
  63. package/dist/components/Pagination/PaginationEllipsis.js +2 -2
  64. package/dist/components/Pagination/PaginationEllipsis.js.map +1 -1
  65. package/dist/components/Pagination/paginationContext.d.cts +2 -2
  66. package/dist/components/Pagination/paginationContext.d.ts +2 -2
  67. package/dist/components/Pagination/paginationContext.js.map +1 -1
  68. package/dist/components/Pagination/usePaginationControlStyles.cjs +1 -1
  69. package/dist/components/Pagination/usePaginationControlStyles.js +2 -2
  70. package/dist/components/Pagination/usePaginationControlStyles.js.map +1 -1
  71. package/dist/components/Radio/Radio.cjs +2 -2
  72. package/dist/components/Radio/Radio.js +3 -3
  73. package/dist/components/Radio/Radio.js.map +1 -1
  74. package/dist/components/Select/Select.cjs +3 -1
  75. package/dist/components/Select/Select.js +3 -1
  76. package/dist/components/Select/Select.js.map +1 -1
  77. package/dist/components/Select/SelectItem.cjs +1 -2
  78. package/dist/components/Select/SelectItem.js +2 -3
  79. package/dist/components/Select/SelectItem.js.map +1 -1
  80. package/dist/components/Select/SelectTrigger.cjs +1 -2
  81. package/dist/components/Select/SelectTrigger.js +2 -3
  82. package/dist/components/Select/SelectTrigger.js.map +1 -1
  83. package/dist/components/Select/types.d.cts +1 -1
  84. package/dist/components/Select/types.d.ts +1 -1
  85. package/dist/components/Switch.cjs +20 -5
  86. package/dist/components/Switch.d.cts.map +1 -1
  87. package/dist/components/Switch.d.ts.map +1 -1
  88. package/dist/components/Switch.js +21 -6
  89. package/dist/components/Switch.js.map +1 -1
  90. package/dist/components/Tabs/Tab.cjs +2 -2
  91. package/dist/components/Tabs/Tab.js +3 -3
  92. package/dist/components/Tabs/Tab.js.map +1 -1
  93. package/dist/components/Text.cjs +2 -1
  94. package/dist/components/Text.d.cts.map +1 -1
  95. package/dist/components/Text.d.ts.map +1 -1
  96. package/dist/components/Text.js +2 -1
  97. package/dist/components/Text.js.map +1 -1
  98. package/dist/fontScaling/FontScalingContext.cjs +20 -3
  99. package/dist/fontScaling/FontScalingContext.d.cts +11 -3
  100. package/dist/fontScaling/FontScalingContext.d.cts.map +1 -1
  101. package/dist/fontScaling/FontScalingContext.d.ts +11 -3
  102. package/dist/fontScaling/FontScalingContext.d.ts.map +1 -1
  103. package/dist/fontScaling/FontScalingContext.js +20 -5
  104. package/dist/fontScaling/FontScalingContext.js.map +1 -1
  105. package/dist/fontScaling/androidNonlinearFontScaling.cjs +85 -9
  106. package/dist/fontScaling/androidNonlinearFontScaling.d.cts +2 -2
  107. package/dist/fontScaling/androidNonlinearFontScaling.d.cts.map +1 -1
  108. package/dist/fontScaling/androidNonlinearFontScaling.d.ts +2 -2
  109. package/dist/fontScaling/androidNonlinearFontScaling.d.ts.map +1 -1
  110. package/dist/fontScaling/androidNonlinearFontScaling.js +85 -9
  111. package/dist/fontScaling/androidNonlinearFontScaling.js.map +1 -1
  112. package/dist/fontScaling/types.d.cts +8 -7
  113. package/dist/fontScaling/types.d.cts.map +1 -1
  114. package/dist/fontScaling/types.d.ts +8 -7
  115. package/dist/fontScaling/types.d.ts.map +1 -1
  116. package/dist/fontScaling/useFontScale.cjs +21 -4
  117. package/dist/fontScaling/useFontScale.d.cts +6 -17
  118. package/dist/fontScaling/useFontScale.d.cts.map +1 -1
  119. package/dist/fontScaling/useFontScale.d.ts +6 -17
  120. package/dist/fontScaling/useFontScale.d.ts.map +1 -1
  121. package/dist/fontScaling/useFontScale.js +21 -5
  122. package/dist/fontScaling/useFontScale.js.map +1 -1
  123. package/dist/mobile/generated/fontMetrics.cjs +530 -530
  124. package/dist/mobile/generated/fontMetrics.js +530 -530
  125. package/dist/mobile/generated/fontMetrics.js.map +1 -1
  126. package/fonts/index.cjs +214 -214
  127. package/fonts/index.mjs +214 -214
  128. package/generated/fontMetrics.ts +530 -530
  129. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"paginationContext.js","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"sourcesContent":["import type {\n PaginationEllipsisPlacement,\n PaginationSize,\n PaginationVariant,\n} from '@yahoo/uds-types';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport { computeVisiblePages } from './computeVisiblePages';\n\ninterface PaginationContextValue {\n activePage: number;\n totalPages: number;\n maxVisiblePageNumbers: number;\n ellipsisPlacement: PaginationEllipsisPlacement;\n size: PaginationSize;\n variant: PaginationVariant;\n /** Resolved React Native control cap (0 means explicitly uncapped). */\n maxFontSizeMultiplier: number;\n getPageHref?: (page: number) => string;\n getItemAriaLabel: (page: number, isActive: boolean) => string;\n onPageChange?: (page: number) => void;\n}\n\nconst defaultGetItemAriaLabel = (page: number, isActive: boolean) =>\n isActive ? `Page ${page}, current page` : `Go to page ${page}`;\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\ninterface PaginationProviderProps {\n value: PaginationContextValue;\n children: React.ReactNode;\n}\n\nconst PaginationProvider = ({ value, children }: PaginationProviderProps) => {\n const contextValue = useMemo(() => value, [value]);\n return <PaginationContext.Provider value={contextValue}>{children}</PaginationContext.Provider>;\n};\n\nPaginationProvider.displayName = 'PaginationProvider';\n\nfunction usePaginationContext(): PaginationContextValue {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error('Pagination components must be used within a Pagination provider.');\n }\n return context;\n}\n\nfunction useVisiblePages() {\n const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } =\n usePaginationContext();\n return useMemo(\n () =>\n computeVisiblePages({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n }),\n [activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement],\n );\n}\n\nexport {\n defaultGetItemAriaLabel,\n PaginationContext,\n PaginationProvider,\n usePaginationContext,\n useVisiblePages,\n};\n"],"mappings":";;;;;AAuBA,MAAM,2BAA2B,MAAc,aAC7C,WAAW,QAAQ,KAAK,kBAAkB,cAAc;AAE1D,MAAM,oBAAoB,cAA6C,KAAK;AAO5E,MAAM,sBAAsB,EAAE,OAAO,eAAwC;CAC3E,MAAM,eAAe,cAAc,OAAO,CAAC,MAAM,CAAC;CAClD,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAe;EAAsC,CAAA;;AAGjG,mBAAmB,cAAc;AAEjC,SAAS,uBAA+C;CACtD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mEAAmE;CAErF,OAAO;;AAGT,SAAS,kBAAkB;CACzB,MAAM,EAAE,YAAY,YAAY,uBAAuB,sBACrD,sBAAsB;CACxB,OAAO,cAEH,oBAAoB;EAClB;EACA;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAY;EAAY;EAAuB;EAAkB,CACnE"}
1
+ {"version":3,"file":"paginationContext.js","names":[],"sources":["../../../src/components/Pagination/paginationContext.tsx"],"sourcesContent":["import type {\n PaginationEllipsisPlacement,\n PaginationSize,\n PaginationVariant,\n} from '@yahoo/uds-types';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport { computeVisiblePages } from './computeVisiblePages';\n\ninterface PaginationContextValue {\n activePage: number;\n totalPages: number;\n maxVisiblePageNumbers: number;\n ellipsisPlacement: PaginationEllipsisPlacement;\n size: PaginationSize;\n variant: PaginationVariant;\n /** Resolved React Native control cap (0 = uncapped, undefined = disabled). */\n maxFontSizeMultiplier?: number;\n getPageHref?: (page: number) => string;\n getItemAriaLabel: (page: number, isActive: boolean) => string;\n onPageChange?: (page: number) => void;\n}\n\nconst defaultGetItemAriaLabel = (page: number, isActive: boolean) =>\n isActive ? `Page ${page}, current page` : `Go to page ${page}`;\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\ninterface PaginationProviderProps {\n value: PaginationContextValue;\n children: React.ReactNode;\n}\n\nconst PaginationProvider = ({ value, children }: PaginationProviderProps) => {\n const contextValue = useMemo(() => value, [value]);\n return <PaginationContext.Provider value={contextValue}>{children}</PaginationContext.Provider>;\n};\n\nPaginationProvider.displayName = 'PaginationProvider';\n\nfunction usePaginationContext(): PaginationContextValue {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error('Pagination components must be used within a Pagination provider.');\n }\n return context;\n}\n\nfunction useVisiblePages() {\n const { activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement } =\n usePaginationContext();\n return useMemo(\n () =>\n computeVisiblePages({\n activePage,\n totalPages,\n maxVisiblePageNumbers,\n ellipsisPlacement,\n }),\n [activePage, totalPages, maxVisiblePageNumbers, ellipsisPlacement],\n );\n}\n\nexport {\n defaultGetItemAriaLabel,\n PaginationContext,\n PaginationProvider,\n usePaginationContext,\n useVisiblePages,\n};\n"],"mappings":";;;;;AAuBA,MAAM,2BAA2B,MAAc,aAC7C,WAAW,QAAQ,KAAK,kBAAkB,cAAc;AAE1D,MAAM,oBAAoB,cAA6C,KAAK;AAO5E,MAAM,sBAAsB,EAAE,OAAO,eAAwC;CAC3E,MAAM,eAAe,cAAc,OAAO,CAAC,MAAM,CAAC;CAClD,OAAO,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;EAAe;EAAsC,CAAA;;AAGjG,mBAAmB,cAAc;AAEjC,SAAS,uBAA+C;CACtD,MAAM,UAAU,WAAW,kBAAkB;CAC7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,mEAAmE;CAErF,OAAO;;AAGT,SAAS,kBAAkB;CACzB,MAAM,EAAE,YAAY,YAAY,uBAAuB,sBACrD,sBAAsB;CACxB,OAAO,cAEH,oBAAoB;EAClB;EACA;EACA;EACA;EACD,CAAC,EACJ;EAAC;EAAY;EAAY;EAAuB;EAAkB,CACnE"}
@@ -15,7 +15,7 @@ function usePaginationControlStyles({ size, variant, isActive, pressed, layout =
15
15
  const interaction = pressed ? "pressed" : "rest";
16
16
  const prevNextActive = "off";
17
17
  const sizeTextStyle = require_components_Pagination_paginationTheme.getPaginationSizeLayerStyle(theme, size, "text");
18
- const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
18
+ const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
19
19
  return {
20
20
  rootStyle: (0, react.useMemo)(() => {
21
21
  const { controlSize: baseControlSize, borderRadius } = require_components_Pagination_paginationTheme.getPaginationControlMetrics(theme, size);
@@ -1,5 +1,5 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
- import { useFontScale } from "../../fontScaling/useFontScale.js";
2
+ import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
3
3
  import { usePaginationContext } from "./paginationContext.js";
4
4
  import { getMergedPaginationControlRootStyle, getMergedPaginationIconStyle, getMergedPaginationTextStyle, getPaginationControlMetrics, getPaginationSizeLayerStyle } from "./paginationTheme.js";
5
5
  import { useMemo } from "react";
@@ -13,7 +13,7 @@ function usePaginationControlStyles({ size, variant, isActive, pressed, layout =
13
13
  const interaction = pressed ? "pressed" : "rest";
14
14
  const prevNextActive = "off";
15
15
  const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, "text");
16
- const fontScaleFactor = useFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
16
+ const fontScaleFactor = useComponentFontScale(maxFontSizeMultiplier, typeof sizeTextStyle.lineHeight === "number" ? sizeTextStyle.lineHeight : sizeTextStyle.fontSize);
17
17
  return {
18
18
  rootStyle: useMemo(() => {
19
19
  const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);
@@ -1 +1 @@
1
- {"version":3,"file":"usePaginationControlStyles.js","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"sourcesContent":["import type { PaginationSize, PaginationVariant } from '@yahoo/uds-types';\nimport { useMemo } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- pagination token lookups for variant + size layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { usePaginationContext } from './paginationContext';\nimport {\n getMergedPaginationControlRootStyle,\n getMergedPaginationIconStyle,\n getMergedPaginationTextStyle,\n getPaginationControlMetrics,\n getPaginationSizeLayerStyle,\n} from './paginationTheme';\n\ninterface UsePaginationControlStylesOptions {\n size: PaginationSize;\n variant: PaginationVariant;\n isActive: boolean;\n pressed: boolean;\n layout?: 'page' | 'prevNext';\n}\n\nfunction usePaginationControlStyles({\n size,\n variant,\n isActive,\n pressed,\n layout = 'page',\n}: UsePaginationControlStylesOptions) {\n const { theme } = useUnistyles();\n const { maxFontSizeMultiplier } = usePaginationContext();\n const active: 'on' | 'off' = isActive ? 'on' : 'off';\n const interaction = pressed ? 'pressed' : 'rest';\n const prevNextActive: 'on' | 'off' = 'off';\n const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, 'text') as TextStyle;\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n typeof sizeTextStyle.lineHeight === 'number'\n ? sizeTextStyle.lineHeight\n : sizeTextStyle.fontSize,\n );\n\n const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);\n const controlSize = Math.round(baseControlSize * fontScaleFactor);\n const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n return [\n layout === 'page' ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,\n getMergedPaginationControlRootStyle(theme, size, variant, variantActive, interaction),\n {\n borderRadius,\n ...(layout === 'page'\n ? { height: controlSize, width: controlSize }\n : { minHeight: controlSize }),\n },\n ];\n }, [active, fontScaleFactor, interaction, layout, size, theme, variant]);\n\n const textStyle = useMemo<StyleProp<TextStyle>>(() => {\n const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n return [\n paginationStaticStyles.text,\n getMergedPaginationTextStyle(theme, size, variant, variantActive, interaction),\n ];\n }, [active, interaction, layout, size, theme, variant]);\n\n const iconStyle = useMemo<StyleProp<TextStyle>>(\n () =>\n getMergedPaginationIconStyle(\n theme,\n size,\n variant,\n layout === 'prevNext' ? prevNextActive : active,\n interaction,\n ),\n [active, interaction, layout, size, theme, variant],\n );\n\n return { rootStyle, textStyle, iconStyle };\n}\n\nconst paginationStaticStyles = StyleSheet.create({\n pageRoot: {\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n prevNextRoot: {\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n gap: 4,\n justifyContent: 'center',\n },\n text: {\n flexShrink: 0,\n fontVariant: ['tabular-nums'],\n textAlign: 'center',\n },\n});\n\nexport { usePaginationControlStyles };\n"],"mappings":";;;;;;;;AAyBA,SAAS,2BAA2B,EAClC,MACA,SACA,UACA,SACA,SAAS,UAC2B;CACpC,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,EAAE,0BAA0B,sBAAsB;CACxD,MAAM,SAAuB,WAAW,OAAO;CAC/C,MAAM,cAAc,UAAU,YAAY;CAC1C,MAAM,iBAA+B;CACrC,MAAM,gBAAgB,4BAA4B,OAAO,MAAM,OAAO;CACtE,MAAM,kBAAkB,aACtB,uBACA,OAAO,cAAc,eAAe,WAChC,cAAc,aACd,cAAc,SACnB;CAwCD,OAAO;EAAE,WAtCS,cAAoC;GACpD,MAAM,EAAE,aAAa,iBAAiB,iBAAiB,4BAA4B,OAAO,KAAK;GAC/F,MAAM,cAAc,KAAK,MAAM,kBAAkB,gBAAgB;GACjE,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO;IACL,WAAW,SAAS,uBAAuB,WAAW,uBAAuB;IAC7E,oCAAoC,OAAO,MAAM,SAAS,eAAe,YAAY;IACrF;KACE;KACA,GAAI,WAAW,SACX;MAAE,QAAQ;MAAa,OAAO;MAAa,GAC3C,EAAE,WAAW,aAAa;KAC/B;IACF;KACA;GAAC;GAAQ;GAAiB;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAuBrD;EAAE,WArBF,cAAoC;GACpD,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO,CACL,uBAAuB,MACvB,6BAA6B,OAAO,MAAM,SAAS,eAAe,YAAY,CAC/E;KACA;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAczB;EAAE,WAZb,cAEd,6BACE,OACA,MACA,SACA,WAAW,aAAa,iBAAiB,QACzC,YACD,EACH;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAGb;EAAE;;AAG5C,MAAM,yBAAyB,WAAW,OAAO;CAC/C,UAAU;EACR,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACb;CACD,cAAc;EACZ,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,KAAK;EACL,gBAAgB;EACjB;CACD,MAAM;EACJ,YAAY;EACZ,aAAa,CAAC,eAAe;EAC7B,WAAW;EACZ;CACF,CAAC"}
1
+ {"version":3,"file":"usePaginationControlStyles.js","names":[],"sources":["../../../src/components/Pagination/usePaginationControlStyles.ts"],"sourcesContent":["import type { PaginationSize, PaginationVariant } from '@yahoo/uds-types';\nimport { useMemo } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- pagination token lookups for variant + size layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport { usePaginationContext } from './paginationContext';\nimport {\n getMergedPaginationControlRootStyle,\n getMergedPaginationIconStyle,\n getMergedPaginationTextStyle,\n getPaginationControlMetrics,\n getPaginationSizeLayerStyle,\n} from './paginationTheme';\n\ninterface UsePaginationControlStylesOptions {\n size: PaginationSize;\n variant: PaginationVariant;\n isActive: boolean;\n pressed: boolean;\n layout?: 'page' | 'prevNext';\n}\n\nfunction usePaginationControlStyles({\n size,\n variant,\n isActive,\n pressed,\n layout = 'page',\n}: UsePaginationControlStylesOptions) {\n const { theme } = useUnistyles();\n const { maxFontSizeMultiplier } = usePaginationContext();\n const active: 'on' | 'off' = isActive ? 'on' : 'off';\n const interaction = pressed ? 'pressed' : 'rest';\n const prevNextActive: 'on' | 'off' = 'off';\n const sizeTextStyle = getPaginationSizeLayerStyle(theme, size, 'text') as TextStyle;\n const fontScaleFactor = useComponentFontScale(\n maxFontSizeMultiplier,\n typeof sizeTextStyle.lineHeight === 'number'\n ? sizeTextStyle.lineHeight\n : sizeTextStyle.fontSize,\n );\n\n const rootStyle = useMemo<StyleProp<ViewStyle>>(() => {\n const { controlSize: baseControlSize, borderRadius } = getPaginationControlMetrics(theme, size);\n const controlSize = Math.round(baseControlSize * fontScaleFactor);\n const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n return [\n layout === 'page' ? paginationStaticStyles.pageRoot : paginationStaticStyles.prevNextRoot,\n getMergedPaginationControlRootStyle(theme, size, variant, variantActive, interaction),\n {\n borderRadius,\n ...(layout === 'page'\n ? { height: controlSize, width: controlSize }\n : { minHeight: controlSize }),\n },\n ];\n }, [active, fontScaleFactor, interaction, layout, size, theme, variant]);\n\n const textStyle = useMemo<StyleProp<TextStyle>>(() => {\n const variantActive = layout === 'prevNext' ? prevNextActive : active;\n\n return [\n paginationStaticStyles.text,\n getMergedPaginationTextStyle(theme, size, variant, variantActive, interaction),\n ];\n }, [active, interaction, layout, size, theme, variant]);\n\n const iconStyle = useMemo<StyleProp<TextStyle>>(\n () =>\n getMergedPaginationIconStyle(\n theme,\n size,\n variant,\n layout === 'prevNext' ? prevNextActive : active,\n interaction,\n ),\n [active, interaction, layout, size, theme, variant],\n );\n\n return { rootStyle, textStyle, iconStyle };\n}\n\nconst paginationStaticStyles = StyleSheet.create({\n pageRoot: {\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n },\n prevNextRoot: {\n alignItems: 'center',\n flexDirection: 'row',\n flexShrink: 0,\n gap: 4,\n justifyContent: 'center',\n },\n text: {\n flexShrink: 0,\n fontVariant: ['tabular-nums'],\n textAlign: 'center',\n },\n});\n\nexport { usePaginationControlStyles };\n"],"mappings":";;;;;;;;AAyBA,SAAS,2BAA2B,EAClC,MACA,SACA,UACA,SACA,SAAS,UAC2B;CACpC,MAAM,EAAE,UAAU,cAAc;CAChC,MAAM,EAAE,0BAA0B,sBAAsB;CACxD,MAAM,SAAuB,WAAW,OAAO;CAC/C,MAAM,cAAc,UAAU,YAAY;CAC1C,MAAM,iBAA+B;CACrC,MAAM,gBAAgB,4BAA4B,OAAO,MAAM,OAAO;CACtE,MAAM,kBAAkB,sBACtB,uBACA,OAAO,cAAc,eAAe,WAChC,cAAc,aACd,cAAc,SACnB;CAwCD,OAAO;EAAE,WAtCS,cAAoC;GACpD,MAAM,EAAE,aAAa,iBAAiB,iBAAiB,4BAA4B,OAAO,KAAK;GAC/F,MAAM,cAAc,KAAK,MAAM,kBAAkB,gBAAgB;GACjE,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO;IACL,WAAW,SAAS,uBAAuB,WAAW,uBAAuB;IAC7E,oCAAoC,OAAO,MAAM,SAAS,eAAe,YAAY;IACrF;KACE;KACA,GAAI,WAAW,SACX;MAAE,QAAQ;MAAa,OAAO;MAAa,GAC3C,EAAE,WAAW,aAAa;KAC/B;IACF;KACA;GAAC;GAAQ;GAAiB;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAuBrD;EAAE,WArBF,cAAoC;GACpD,MAAM,gBAAgB,WAAW,aAAa,iBAAiB;GAE/D,OAAO,CACL,uBAAuB,MACvB,6BAA6B,OAAO,MAAM,SAAS,eAAe,YAAY,CAC/E;KACA;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAczB;EAAE,WAZb,cAEd,6BACE,OACA,MACA,SACA,WAAW,aAAa,iBAAiB,QACzC,YACD,EACH;GAAC;GAAQ;GAAa;GAAQ;GAAM;GAAO;GAAQ,CAGb;EAAE;;AAG5C,MAAM,yBAAyB,WAAW,OAAO;CAC/C,UAAU;EACR,YAAY;EACZ,gBAAgB;EAChB,YAAY;EACb;CACD,cAAc;EACZ,YAAY;EACZ,eAAe;EACf,YAAY;EACZ,KAAK;EACL,gBAAgB;EACjB;CACD,MAAM;EACJ,YAAY;EACZ,aAAa,CAAC,eAAe;EAC7B,WAAW;EACZ;CACF,CAAC"}
@@ -54,7 +54,7 @@ const VARIANT_ERROR_MAP = {
54
54
  const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", variant: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, required, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
55
55
  const uid = `uds-radio-${(0, react.useId)()}`;
56
56
  const radioGroup = require_components_Radio_RadioGroupContext.useRadioGroupContext();
57
- const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
57
+ const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
58
58
  const disabled = Boolean(disabledProp || radioGroup?.disabled);
59
59
  const hasError = hasErrorProp ?? radioGroup?.hasError;
60
60
  const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
@@ -110,7 +110,7 @@ const Radio = (0, react.memo)(function Radio({ label, labelPosition = "start", v
110
110
  pressed
111
111
  });
112
112
  const radioBaseSize = generated_styles.radioStyles.radio.width;
113
- const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof radioBaseSize === "number" ? radioBaseSize : void 0);
113
+ const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof radioBaseSize === "number" ? radioBaseSize : void 0);
114
114
  const rootStyle = (0, react.useMemo)(() => [generated_styles.radioStyles.root, { opacity: disabled ? .5 : 1 }], [generated_styles.radioStyles.root, disabled]);
115
115
  const radioBoxStyle = (0, react.useMemo)(() => {
116
116
  const { width, height } = generated_styles.radioStyles.radio;
@@ -1,7 +1,7 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
2
  import { SCALE_EFFECTS } from "../../motion-tokens/dist/index.js";
3
3
  import { BUTTON_SPRING_CONFIG } from "../../motion.js";
4
- import { useFontScale } from "../../fontScaling/useFontScale.js";
4
+ import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
5
5
  import { useMaxFontSizeMultiplier } from "../../fontScaling/useMaxFontSizeMultiplier.js";
6
6
  import { Pressable as Pressable$1 } from "../Pressable.js";
7
7
  import { FormLabel } from "../FormLabel.js";
@@ -51,7 +51,7 @@ const VARIANT_ERROR_MAP = {
51
51
  const Radio = memo(function Radio({ label, labelPosition = "start", variant: variantInput, size: sizeInput, value: valueProp, checked: checkedProp, hasError: hasErrorProp, reduceMotion: reduceMotionProp, defaultChecked, disabled: disabledProp, required, maxFontSizeMultiplier, onChange, ref, ...viewProps }) {
52
52
  const uid = `uds-radio-${useId()}`;
53
53
  const radioGroup = useRadioGroupContext();
54
- const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
54
+ const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
55
55
  const disabled = Boolean(disabledProp || radioGroup?.disabled);
56
56
  const hasError = hasErrorProp ?? radioGroup?.hasError;
57
57
  const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;
@@ -107,7 +107,7 @@ const Radio = memo(function Radio({ label, labelPosition = "start", variant: var
107
107
  pressed
108
108
  });
109
109
  const radioBaseSize = radioStyles.radio.width;
110
- const fontScaleFactor = useFontScale(resolvedMaxFontSizeMultiplier, typeof radioBaseSize === "number" ? radioBaseSize : void 0);
110
+ const fontScaleFactor = useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof radioBaseSize === "number" ? radioBaseSize : void 0);
111
111
  const rootStyle = useMemo(() => [radioStyles.root, { opacity: disabled ? .5 : 1 }], [radioStyles.root, disabled]);
112
112
  const radioBoxStyle = useMemo(() => {
113
113
  const { width, height } = radioStyles.radio;
@@ -1 +1 @@
1
- {"version":3,"file":"Radio.js","names":["Pressable"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../../generated/styles';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../../motion';\nimport { FormLabel } from '../FormLabel';\nimport { Pressable } from '../Pressable';\nimport { useRadioGroupContext } from './RadioGroupContext';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the radio is disabled */\n disabled?: boolean;\n /** Whether the radio is required */\n required?: boolean;\n /**\n * Caps how far the circle, dot, and label grow with the OS text-size\n * setting; all three scale by the same factor. Set null to remove the cap;\n * override app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Radio Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile/Radio';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n // Radio props\n label,\n labelPosition = 'start',\n variant: variantInput,\n size: sizeInput,\n value: valueProp,\n checked: checkedProp,\n hasError: hasErrorProp,\n reduceMotion: reduceMotionProp,\n // Native props\n defaultChecked,\n disabled: disabledProp,\n required,\n maxFontSizeMultiplier,\n onChange,\n ref,\n ...viewProps\n}: RadioProps) {\n const generatedId = useId();\n const uid = `uds-radio-${generatedId}`;\n const radioGroup = useRadioGroupContext();\n\n // One resolved cap governs circle, dot, and label. Android resolves the\n // geometry from the circle's base size on its nonlinear curve.\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n\n const disabled = Boolean(disabledProp || radioGroup?.disabled);\n const hasError = hasErrorProp ?? radioGroup?.hasError;\n const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;\n const size = sizeInput ?? radioGroup?.size ?? 'md';\n const variantProp = variantInput ?? radioGroup?.variant ?? 'primary';\n const value = valueProp ?? '';\n\n /* --------------------------------- State ---------------------------------- */\n const isInRadioGroup = radioGroup !== undefined;\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isInRadioGroup\n ? radioGroup.value === value\n : isControlled\n ? checkedProp\n : internalChecked;\n\n useEffect(() => {\n if (!__DEV__ || !isInRadioGroup || valueProp) {\n return;\n }\n\n console.warn(\n '[UDS Mobile] Radio: A Radio rendered inside RadioGroup requires a unique, non-empty value prop.',\n );\n }, [isInRadioGroup, valueProp]);\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: RadioValueState = useMemo(() => {\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n const radioAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n if (isInRadioGroup) {\n if (radioGroup.value === value) {\n return;\n }\n\n radioGroup.setValue(value);\n onChange?.(true);\n return;\n }\n\n const newChecked = !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, isInRadioGroup, checked, isControlled, onChange, radioGroup, value]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n radioStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked\n pressed,\n });\n\n const radioBaseSize = radioStyles.radio.width;\n const fontScaleFactor = useFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof radioBaseSize === 'number' ? radioBaseSize : undefined,\n );\n\n const rootStyle = useMemo(\n () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [radioStyles.root, disabled],\n );\n\n const radioBoxStyle = useMemo(() => {\n // The circle grows by the capped factor alongside its label; borderWidth\n // stays fixed (stroke weight doesn't scale in the OS's own controls).\n const { width, height } = radioStyles.radio;\n const scaledBox =\n fontScaleFactor !== 1 && typeof width === 'number' && typeof height === 'number'\n ? {\n width: Math.round(width * fontScaleFactor),\n height: Math.round(height * fontScaleFactor),\n }\n : undefined;\n\n return [\n radioStyles.radio,\n scaledBox,\n {\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n borderRadius: 9999,\n },\n radioAnimatedStyle,\n ];\n }, [radioStyles.radio, fontScaleFactor, radioAnimatedStyle]);\n\n // Inner circle size: fixed 8x8px to match web implementation\n const INNER_CIRCLE_SIZE = 8;\n\n const circleStyle = useMemo(\n () => [\n radioStyles.radioCircle,\n {\n width: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n height: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n borderRadius: 9999,\n },\n ],\n [radioStyles.radioCircle, fontScaleFactor],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n return (\n <FormLabel\n color=\"inherit\"\n variant=\"inherit\"\n label={label}\n required={required}\n showRequiredAsterisk={required}\n hasError={hasError}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={radioStyles.text}\n />\n );\n }, [label, required, hasError, resolvedMaxFontSizeMultiplier, radioStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked,\n }),\n [disabled, checked],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"radio\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Radio.js","names":["Pressable"],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { ViewProps } from 'react-native';\nimport { View } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';\n\nimport { radioStyles } from '../../../generated/styles';\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../../motion';\nimport { FormLabel } from '../FormLabel';\nimport { Pressable } from '../Pressable';\nimport { useRadioGroupContext } from './RadioGroupContext';\n\n/* -------------------------------------------------------------------------- */\n/* Types */\n/* -------------------------------------------------------------------------- */\n\n/** Derived from RadioValue - maps boolean to 'checked'/'unchecked' string literals */\ntype RadioValueState = 'checked' | 'unchecked';\n\ninterface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {\n /** Ref to the underlying View */\n ref?: Ref<View>;\n /** Default checked state for uncontrolled mode */\n defaultChecked?: boolean;\n /** Whether the radio is disabled */\n disabled?: boolean;\n /** Whether the radio is required */\n required?: boolean;\n /**\n * Caps how far the circle, dot, and label grow with the OS text-size\n * setting; all three scale by the same factor. Set null to remove the cap;\n * override app-wide via UDSFontScalingProvider.\n * @default 2\n */\n maxFontSizeMultiplier?: number | null;\n /** Callback fired when the checked state changes */\n onChange?: (checked: boolean) => void;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Variant Mapping */\n/* -------------------------------------------------------------------------- */\n\n/** All style variants available in the generated styles (includes error variants) */\ntype RadioStyleVariant = 'primary' | 'secondary' | 'alert' | 'alert-secondary';\n\nconst VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant> = {\n primary: 'alert',\n secondary: 'alert-secondary',\n};\n\n/* -------------------------------------------------------------------------- */\n/* Radio Component */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **⚙️ A radio component**\n *\n * @description\n * A radio component allows users to select one option from a set.\n * Unlike checkbox, radio buttons cannot have multiple selected in a group,\n * allowing only one selection at a time.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile/Radio';\n *\n * <Radio label=\"Option A\" />\n * <Radio label=\"Option B\" checked={true} onChange={setChecked} />\n * ```\n *\n * @usage\n * - Forms: For selecting a single option from multiple choices\n * - Settings: For toggling between mutually exclusive preferences\n *\n * @accessibility\n * - Sets `accessibilityRole=\"radio\"` automatically\n * - Announces checked/unchecked state\n * - Label is used as accessibility label\n * - Supports `reduceMotion` for users who prefer reduced motion\n *\n * @see {@link Checkbox} for multi-select options\n * @see {@link Switch} for binary toggles\n */\nconst Radio = memo(function Radio({\n // Radio props\n label,\n labelPosition = 'start',\n variant: variantInput,\n size: sizeInput,\n value: valueProp,\n checked: checkedProp,\n hasError: hasErrorProp,\n reduceMotion: reduceMotionProp,\n // Native props\n defaultChecked,\n disabled: disabledProp,\n required,\n maxFontSizeMultiplier,\n onChange,\n ref,\n ...viewProps\n}: RadioProps) {\n const generatedId = useId();\n const uid = `uds-radio-${generatedId}`;\n const radioGroup = useRadioGroupContext();\n\n // One resolved cap governs circle, dot, and label. Android resolves the\n // geometry from the circle's base size on its nonlinear curve.\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n\n const disabled = Boolean(disabledProp || radioGroup?.disabled);\n const hasError = hasErrorProp ?? radioGroup?.hasError;\n const reduceMotion = reduceMotionProp ?? radioGroup?.reduceMotion;\n const size = sizeInput ?? radioGroup?.size ?? 'md';\n const variantProp = variantInput ?? radioGroup?.variant ?? 'primary';\n const value = valueProp ?? '';\n\n /* --------------------------------- State ---------------------------------- */\n const isInRadioGroup = radioGroup !== undefined;\n const isControlled = checkedProp !== undefined;\n const [internalChecked, setInternalChecked] = useState<boolean>(\n isControlled ? checkedProp : (defaultChecked ?? false),\n );\n const [pressed, setPressed] = useState(false);\n\n // Use controlled value if provided, otherwise use internal state\n const checked = isInRadioGroup\n ? radioGroup.value === value\n : isControlled\n ? checkedProp\n : internalChecked;\n\n useEffect(() => {\n if (!__DEV__ || !isInRadioGroup || valueProp) {\n return;\n }\n\n console.warn(\n '[UDS Mobile] Radio: A Radio rendered inside RadioGroup requires a unique, non-empty value prop.',\n );\n }, [isInRadioGroup, valueProp]);\n\n /* ------------------------------ Derived Values ---------------------------- */\n const valueState: RadioValueState = useMemo(() => {\n return checked ? 'checked' : 'unchecked';\n }, [checked]);\n\n /* -------------------------------- Animation ------------------------------- */\n const shouldAnimate = !reduceMotion;\n\n // Scale animation for press feedback (disabled when reduceMotion is true)\n const scaleProgress = useDerivedValue(\n () =>\n shouldAnimate\n ? withSpring(pressed ? SCALE_EFFECTS.down : SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG)\n : SCALE_EFFECTS.none, // No scale effect when reduceMotion is true\n [pressed, shouldAnimate],\n );\n\n const radioAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ scale: scaleProgress.value }],\n }));\n\n /* -------------------------------- Handlers -------------------------------- */\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n if (isInRadioGroup) {\n if (radioGroup.value === value) {\n return;\n }\n\n radioGroup.setValue(value);\n onChange?.(true);\n return;\n }\n\n const newChecked = !checked;\n\n if (!isControlled) {\n setInternalChecked(newChecked);\n }\n\n onChange?.(newChecked);\n }, [disabled, isInRadioGroup, checked, isControlled, onChange, radioGroup, value]);\n\n const handlePressIn = useCallback(() => {\n setPressed(true);\n }, []);\n\n const handlePressOut = useCallback(() => {\n setPressed(false);\n }, []);\n\n /* --------------------------------- Styles --------------------------------- */\n // Compute the style variant (primary/secondary maps to alert variants when hasError)\n const styleVariant: RadioStyleVariant = hasError ? VARIANT_ERROR_MAP[variantProp] : variantProp;\n\n radioStyles.useVariants({\n size,\n variant: styleVariant, // primary, secondary, alert, alert-secondary\n value: valueState, // checked, unchecked\n pressed,\n });\n\n const radioBaseSize = radioStyles.radio.width;\n const fontScaleFactor = useComponentFontScale(\n resolvedMaxFontSizeMultiplier,\n typeof radioBaseSize === 'number' ? radioBaseSize : undefined,\n );\n\n const rootStyle = useMemo(\n () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n [radioStyles.root, disabled],\n );\n\n const radioBoxStyle = useMemo(() => {\n // The circle grows by the capped factor alongside its label; borderWidth\n // stays fixed (stroke weight doesn't scale in the OS's own controls).\n const { width, height } = radioStyles.radio;\n const scaledBox =\n fontScaleFactor !== 1 && typeof width === 'number' && typeof height === 'number'\n ? {\n width: Math.round(width * fontScaleFactor),\n height: Math.round(height * fontScaleFactor),\n }\n : undefined;\n\n return [\n radioStyles.radio,\n scaledBox,\n {\n alignItems: 'center' as const,\n justifyContent: 'center' as const,\n borderRadius: 9999,\n },\n radioAnimatedStyle,\n ];\n }, [radioStyles.radio, fontScaleFactor, radioAnimatedStyle]);\n\n // Inner circle size: fixed 8x8px to match web implementation\n const INNER_CIRCLE_SIZE = 8;\n\n const circleStyle = useMemo(\n () => [\n radioStyles.radioCircle,\n {\n width: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n height: Math.round(INNER_CIRCLE_SIZE * fontScaleFactor),\n borderRadius: 9999,\n },\n ],\n [radioStyles.radioCircle, fontScaleFactor],\n );\n\n /* ---------------------------- Render Helpers ------------------------------ */\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n return (\n <FormLabel\n color=\"inherit\"\n variant=\"inherit\"\n label={label}\n required={required}\n showRequiredAsterisk={required}\n hasError={hasError}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={radioStyles.text}\n />\n );\n }, [label, required, hasError, resolvedMaxFontSizeMultiplier, radioStyles.text]);\n\n const a11yState = useMemo(\n () => ({\n disabled,\n checked,\n }),\n [disabled, checked],\n );\n\n /* --------------------------------- Render --------------------------------- */\n return (\n <Pressable\n ref={ref}\n nativeID={uid}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n disabled={disabled}\n flexDirection={labelPosition === 'start' ? 'row' : 'row-reverse'}\n alignItems=\"center\"\n alignSelf=\"flex-start\"\n accessibilityRole=\"radio\"\n accessibilityState={a11yState}\n accessibilityLabel={typeof label === 'string' ? label : undefined}\n {...viewProps}\n style={rootStyle}\n >\n <Animated.View style={radioBoxStyle}>{checked && <View style={circleStyle} />}</Animated.View>\n\n {labelContent}\n </Pressable>\n );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
@@ -38,7 +38,7 @@ let lodash_es = require("lodash-es");
38
38
  */
39
39
  const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", maxFontSizeMultiplier, reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
40
40
  const uid = `uds-select-${(0, react.useId)()}`;
41
- const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
41
+ const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
42
42
  const triggerRef = (0, react.useRef)(null);
43
43
  const [triggerRect, setTriggerRect] = (0, react.useState)(null);
44
44
  const [highlightedValue, setHighlightedValue] = (0, react.useState)(null);
@@ -149,10 +149,12 @@ const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon
149
149
  alignItems: "flex-end",
150
150
  spacingBottom: "2",
151
151
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
152
+ variant: "inherit",
152
153
  maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
153
154
  style: generated_styles.inputStyles.label,
154
155
  children: content
155
156
  }), required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
157
+ variant: "inherit",
156
158
  maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
157
159
  style: generated_styles.inputStyles.labelRequired,
158
160
  children: "*"
@@ -36,7 +36,7 @@ import { isFunction } from "lodash-es";
36
36
  */
37
37
  const Select = memo(function Select({ label, helpText, helperTextIcon, placeholder, size = "md", disabled, required, hasError, readOnly, width = "100%", maxFontSizeMultiplier, reduceMotion = false, startIcon, endIcon, value: valueProp, defaultValue = "", onChange, children, testID }) {
38
38
  const uid = `uds-select-${useId()}`;
39
- const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
39
+ const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
40
40
  const triggerRef = useRef(null);
41
41
  const [triggerRect, setTriggerRect] = useState(null);
42
42
  const [highlightedValue, setHighlightedValue] = useState(null);
@@ -147,10 +147,12 @@ const Select = memo(function Select({ label, helpText, helperTextIcon, placehold
147
147
  alignItems: "flex-end",
148
148
  spacingBottom: "2",
149
149
  children: [/* @__PURE__ */ jsx(Text, {
150
+ variant: "inherit",
150
151
  maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
151
152
  style: inputStyles.label,
152
153
  children: content
153
154
  }), required && /* @__PURE__ */ jsx(Text, {
155
+ variant: "inherit",
154
156
  maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,
155
157
  style: inputStyles.labelRequired,
156
158
  children: "*"
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** Selected value for controlled usage. */\n value?: string;\n /** Initial value for uncontrolled usage. @default '' */\n defaultValue?: string;\n /** Called when the selected value changes. */\n onChange?: (value: string) => void;\n /** Container width. @default '100%' */\n width?: number | `${number}%` | '100%';\n /** Caps text, icons, and field geometry at the control scale. Set null to remove the cap. @default 2 */\n maxFontSizeMultiplier?: number | null;\n children?: ReactNode;\n testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n * <SelectContent>\n * <SelectItem value=\"us\">United States</SelectItem>\n * <SelectItem value=\"ca\">Canada</SelectItem>\n * </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n label,\n helpText,\n helperTextIcon,\n placeholder,\n size = 'md',\n disabled,\n required,\n hasError,\n readOnly,\n width = '100%',\n maxFontSizeMultiplier,\n reduceMotion = false,\n startIcon,\n endIcon,\n value: valueProp,\n defaultValue = '',\n onChange,\n children,\n testID,\n}: SelectProps) {\n const generatedId = useId();\n const uid = `uds-select-${generatedId}`;\n const resolvedMaxFontSizeMultiplier =\n useMaxFontSizeMultiplier('control', maxFontSizeMultiplier) ?? 0;\n const triggerRef = useRef<View | null>(null);\n const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n // Android's portal can briefly overlap the hidden registry item and its visible copy.\n // Count registrations so one copy unmounting does not erase the selected value's label.\n const itemsRef = useRef(new Map<string, { label: string; registrations: number }>());\n const [, setItemsVersion] = useState(0);\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange,\n });\n\n const [open, setOpen] = useControllableState({\n defaultValue: false,\n onChange: (nextOpen) => {\n if (!nextOpen) {\n setHighlightedValue(null);\n }\n },\n });\n\n const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n const existing = itemsRef.current.get(itemValue);\n itemsRef.current.set(itemValue, {\n label: itemLabel,\n registrations: (existing?.registrations ?? 0) + 1,\n });\n\n if (existing?.label === itemLabel) {\n return;\n }\n\n setItemsVersion((version) => version + 1);\n }, []);\n\n const unregisterItem = useCallback((itemValue: string) => {\n const existing = itemsRef.current.get(itemValue);\n if (!existing) {\n return;\n }\n\n if (existing.registrations > 1) {\n itemsRef.current.set(itemValue, {\n ...existing,\n registrations: existing.registrations - 1,\n });\n return;\n }\n\n itemsRef.current.delete(itemValue);\n setItemsVersion((version) => version + 1);\n }, []);\n\n const getItemLabel = useCallback(\n (itemValue: string) => itemsRef.current.get(itemValue)?.label,\n [],\n );\n\n const fieldContext = useMemo<SelectFieldContextValue>(\n () => ({\n size,\n disabled,\n readOnly,\n required,\n hasError,\n width,\n reduceMotion,\n placeholder,\n uid,\n maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,\n }),\n [\n disabled,\n hasError,\n placeholder,\n readOnly,\n reduceMotion,\n required,\n resolvedMaxFontSizeMultiplier,\n size,\n uid,\n width,\n ],\n );\n\n const contextValue = useMemo<SelectContextValue>(\n () => ({\n value,\n setValue,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n registerItem,\n unregisterItem,\n getItemLabel,\n highlightedValue,\n setHighlightedValue,\n field: fieldContext,\n reduceMotion,\n }),\n [\n fieldContext,\n getItemLabel,\n highlightedValue,\n open,\n reduceMotion,\n registerItem,\n setOpen,\n setValue,\n triggerRect,\n unregisterItem,\n value,\n ],\n );\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n\n const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content = isFunction(label) ? label() : label;\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n <Text maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier} style={inputStyles.label}>\n {content}\n </Text>\n {required && (\n <Text\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={inputStyles.labelRequired}\n >\n *\n </Text>\n )}\n </HStack>\n );\n }, [\n label,\n required,\n resolvedMaxFontSizeMultiplier,\n inputStyles.label,\n inputStyles.labelRequired,\n ]);\n\n const helpTextContent = useMemo(() => {\n if (!helpText) {\n return null;\n }\n\n const content = isFunction(helpText) ? helpText() : helpText;\n return (\n <InputHelpText\n startIcon={helperTextIcon}\n size={size}\n isFilled={valueState === 'filled'}\n disabled={disabled}\n readOnly={readOnly}\n hasError={hasError}\n pressed={open}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n >\n {content}\n </InputHelpText>\n );\n }, [\n disabled,\n hasError,\n helpText,\n helperTextIcon,\n open,\n readOnly,\n resolvedMaxFontSizeMultiplier,\n size,\n valueState,\n ]);\n\n return (\n <SelectContext.Provider value={contextValue}>\n <SelectFieldContext.Provider value={fieldContext}>\n <VStack testID={testID} style={rootStyle}>\n {labelContent}\n\n <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n {helpTextContent}\n\n {children}\n </VStack>\n </SelectFieldContext.Provider>\n </SelectContext.Provider>\n );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,OACA,UACA,gBACA,aACA,OAAO,MACP,UACA,UACA,UACA,UACA,QAAQ,QACR,uBACA,eAAe,OACf,WACA,SACA,OAAO,WACP,eAAe,IACf,UACA,UACA,UACc;CAEd,MAAM,MAAM,cADQ,OACiB;CACrC,MAAM,gCACJ,yBAAyB,WAAW,sBAAsB,IAAI;CAChE,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,CAAC,aAAa,kBAAkB,SAA4C,KAAK;CACvF,MAAM,CAAC,kBAAkB,uBAAuB,SAAwB,KAAK;CAG7E,MAAM,WAAW,uBAAO,IAAI,KAAuD,CAAC;CACpF,MAAM,GAAG,mBAAmB,SAAS,EAAE;CAEvC,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C,OAAO;EACP;EACA;EACD,CAAC;CAEF,MAAM,CAAC,MAAM,WAAW,qBAAqB;EAC3C,cAAc;EACd,WAAW,aAAa;GACtB,IAAI,CAAC,UACH,oBAAoB,KAAK;;EAG9B,CAAC;CAEF,MAAM,eAAe,aAAa,WAAmB,cAAsB;EACzE,MAAM,WAAW,SAAS,QAAQ,IAAI,UAAU;EAChD,SAAS,QAAQ,IAAI,WAAW;GAC9B,OAAO;GACP,gBAAgB,UAAU,iBAAiB,KAAK;GACjD,CAAC;EAEF,IAAI,UAAU,UAAU,WACtB;EAGF,iBAAiB,YAAY,UAAU,EAAE;IACxC,EAAE,CAAC;CAEN,MAAM,iBAAiB,aAAa,cAAsB;EACxD,MAAM,WAAW,SAAS,QAAQ,IAAI,UAAU;EAChD,IAAI,CAAC,UACH;EAGF,IAAI,SAAS,gBAAgB,GAAG;GAC9B,SAAS,QAAQ,IAAI,WAAW;IAC9B,GAAG;IACH,eAAe,SAAS,gBAAgB;IACzC,CAAC;GACF;;EAGF,SAAS,QAAQ,OAAO,UAAU;EAClC,iBAAiB,YAAY,UAAU,EAAE;IACxC,EAAE,CAAC;CAEN,MAAM,eAAe,aAClB,cAAsB,SAAS,QAAQ,IAAI,UAAU,EAAE,OACxD,EAAE,CACH;CAED,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,uBAAuB;EACxB,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAED,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAAO;EACP;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CAGD,MAAM,aADW,MAAM,SAAS,IACF,WAAW;CAEzC,YAAY,YAAY;EACtB;EACA,OAAO;EACP,SAAS;EACT,UAAU;EACV,SAAS;EACV,CAAC;CAEF,MAAM,YAAY,cAAc,CAAC;EAAE;EAAO,SAAS,WAAW,KAAM;EAAG,CAAC,EAAE,CAAC,UAAU,MAAM,CAAC;CAE5F,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,OACH,OAAO;EAGT,MAAM,UAAU,WAAW,MAAM,GAAG,OAAO,GAAG;EAC9C,OACE,qBAAC,QAAD;GAAQ,WAAU;GAAI,YAAW;GAAW,eAAc;aAA1D,CACE,oBAAC,MAAD;IAAM,uBAAuB;IAA+B,OAAO,YAAY;cAC5E;IACI,CAAA,EACN,YACC,oBAAC,MAAD;IACE,uBAAuB;IACvB,OAAO,YAAY;cACpB;IAEM,CAAA,CAEF;;IAEV;EACD;EACA;EACA;EACA,YAAY;EACZ,YAAY;EACb,CAAC;CAEF,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UACH,OAAO;EAGT,MAAM,UAAU,WAAW,SAAS,GAAG,UAAU,GAAG;EACpD,OACE,oBAAC,eAAD;GACE,WAAW;GACL;GACN,UAAU,eAAe;GACf;GACA;GACA;GACV,SAAS;GACT,uBAAuB;aAEtB;GACa,CAAA;IAEjB;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;aAClC,qBAAC,QAAD;IAAgB;IAAQ,OAAO;cAA/B;KACG;KAED,oBAAC,eAAD;MAA0B;MAAoB;MAAW,CAAA;KAExD;KAEA;KACM;;GACmB,CAAA;EACP,CAAA;EAE3B;AAEF,OAAO,cAAc"}
1
+ {"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { UniversalSelectProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useId, useMemo, useRef, useState } from 'react';\nimport type { View } from 'react-native';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useMaxFontSizeMultiplier } from '../../fontScaling/useMaxFontSizeMultiplier';\nimport { HStack } from '../HStack';\nimport type { IconSlotType } from '../IconSlot';\nimport { InputHelpText } from '../InputHelpText';\nimport { useControllableState } from '../internal/Overlay';\nimport { Text } from '../Text';\nimport { VStack } from '../VStack';\nimport { SelectContext, SelectFieldContext } from './selectContext';\nimport { SelectTrigger } from './SelectTrigger';\nimport type { SelectContextValue, SelectFieldContextValue } from './types';\n\ninterface SelectProps extends Omit<UniversalSelectProps<IconSlotType>, 'width'> {\n /** Placeholder text shown when no value is selected. */\n placeholder?: string;\n /** Selected value for controlled usage. */\n value?: string;\n /** Initial value for uncontrolled usage. @default '' */\n defaultValue?: string;\n /** Called when the selected value changes. */\n onChange?: (value: string) => void;\n /** Container width. @default '100%' */\n width?: number | `${number}%` | '100%';\n /** Caps text, icons, and field geometry at the control scale. Set null to remove the cap. @default 2 */\n maxFontSizeMultiplier?: number | null;\n children?: ReactNode;\n testID?: string;\n}\n\n/**\n * **⚙️ A composable Select component**\n *\n * @description\n * Select lets users pick one value from a list. Compose with `SelectContent` and\n * `SelectItem`, similar to `Tabs` with `TabList` and `Tab`.\n *\n * @category Form\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Select, SelectContent, SelectItem } from '@yahoo/uds-mobile/Select';\n *\n * <Select label=\"Country\" placeholder=\"Select a country\" defaultValue=\"us\">\n * <SelectContent>\n * <SelectItem value=\"us\">United States</SelectItem>\n * <SelectItem value=\"ca\">Canada</SelectItem>\n * </SelectContent>\n * </Select>\n * ```\n */\nconst Select = memo(function Select({\n label,\n helpText,\n helperTextIcon,\n placeholder,\n size = 'md',\n disabled,\n required,\n hasError,\n readOnly,\n width = '100%',\n maxFontSizeMultiplier,\n reduceMotion = false,\n startIcon,\n endIcon,\n value: valueProp,\n defaultValue = '',\n onChange,\n children,\n testID,\n}: SelectProps) {\n const generatedId = useId();\n const uid = `uds-select-${generatedId}`;\n const resolvedMaxFontSizeMultiplier = useMaxFontSizeMultiplier('control', maxFontSizeMultiplier);\n const triggerRef = useRef<View | null>(null);\n const [triggerRect, setTriggerRect] = useState<SelectContextValue['triggerRect']>(null);\n const [highlightedValue, setHighlightedValue] = useState<string | null>(null);\n // Android's portal can briefly overlap the hidden registry item and its visible copy.\n // Count registrations so one copy unmounting does not erase the selected value's label.\n const itemsRef = useRef(new Map<string, { label: string; registrations: number }>());\n const [, setItemsVersion] = useState(0);\n\n const [value, setValue] = useControllableState({\n value: valueProp,\n defaultValue,\n onChange,\n });\n\n const [open, setOpen] = useControllableState({\n defaultValue: false,\n onChange: (nextOpen) => {\n if (!nextOpen) {\n setHighlightedValue(null);\n }\n },\n });\n\n const registerItem = useCallback((itemValue: string, itemLabel: string) => {\n const existing = itemsRef.current.get(itemValue);\n itemsRef.current.set(itemValue, {\n label: itemLabel,\n registrations: (existing?.registrations ?? 0) + 1,\n });\n\n if (existing?.label === itemLabel) {\n return;\n }\n\n setItemsVersion((version) => version + 1);\n }, []);\n\n const unregisterItem = useCallback((itemValue: string) => {\n const existing = itemsRef.current.get(itemValue);\n if (!existing) {\n return;\n }\n\n if (existing.registrations > 1) {\n itemsRef.current.set(itemValue, {\n ...existing,\n registrations: existing.registrations - 1,\n });\n return;\n }\n\n itemsRef.current.delete(itemValue);\n setItemsVersion((version) => version + 1);\n }, []);\n\n const getItemLabel = useCallback(\n (itemValue: string) => itemsRef.current.get(itemValue)?.label,\n [],\n );\n\n const fieldContext = useMemo<SelectFieldContextValue>(\n () => ({\n size,\n disabled,\n readOnly,\n required,\n hasError,\n width,\n reduceMotion,\n placeholder,\n uid,\n maxFontSizeMultiplier: resolvedMaxFontSizeMultiplier,\n }),\n [\n disabled,\n hasError,\n placeholder,\n readOnly,\n reduceMotion,\n required,\n resolvedMaxFontSizeMultiplier,\n size,\n uid,\n width,\n ],\n );\n\n const contextValue = useMemo<SelectContextValue>(\n () => ({\n value,\n setValue,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n registerItem,\n unregisterItem,\n getItemLabel,\n highlightedValue,\n setHighlightedValue,\n field: fieldContext,\n reduceMotion,\n }),\n [\n fieldContext,\n getItemLabel,\n highlightedValue,\n open,\n reduceMotion,\n registerItem,\n setOpen,\n setValue,\n triggerRect,\n unregisterItem,\n value,\n ],\n );\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n\n const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [disabled, width]);\n\n const labelContent = useMemo(() => {\n if (!label) {\n return null;\n }\n\n const content = isFunction(label) ? label() : label;\n return (\n <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n <Text\n variant=\"inherit\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={inputStyles.label}\n >\n {content}\n </Text>\n {required && (\n <Text\n variant=\"inherit\"\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n style={inputStyles.labelRequired}\n >\n *\n </Text>\n )}\n </HStack>\n );\n }, [\n label,\n required,\n resolvedMaxFontSizeMultiplier,\n inputStyles.label,\n inputStyles.labelRequired,\n ]);\n\n const helpTextContent = useMemo(() => {\n if (!helpText) {\n return null;\n }\n\n const content = isFunction(helpText) ? helpText() : helpText;\n return (\n <InputHelpText\n startIcon={helperTextIcon}\n size={size}\n isFilled={valueState === 'filled'}\n disabled={disabled}\n readOnly={readOnly}\n hasError={hasError}\n pressed={open}\n maxFontSizeMultiplier={resolvedMaxFontSizeMultiplier}\n >\n {content}\n </InputHelpText>\n );\n }, [\n disabled,\n hasError,\n helpText,\n helperTextIcon,\n open,\n readOnly,\n resolvedMaxFontSizeMultiplier,\n size,\n valueState,\n ]);\n\n return (\n <SelectContext.Provider value={contextValue}>\n <SelectFieldContext.Provider value={fieldContext}>\n <VStack testID={testID} style={rootStyle}>\n {labelContent}\n\n <SelectTrigger startIcon={startIcon} endIcon={endIcon} />\n\n {helpTextContent}\n\n {children}\n </VStack>\n </SelectFieldContext.Provider>\n </SelectContext.Provider>\n );\n});\n\nSelect.displayName = 'Select';\n\nexport { Select, type SelectProps };\n"],"mappings":"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"}
@@ -46,7 +46,7 @@ const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, childr
46
46
  isSelected,
47
47
  theme
48
48
  ]);
49
- const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
49
+ const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
50
50
  const rootStyle = (0, react.useMemo)(() => {
51
51
  const configuredRoot = require_components_Select_selectItemTheme.getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected);
52
52
  return [
@@ -128,7 +128,6 @@ const SelectItem = (0, react.memo)(function SelectItem({ value, disabled, childr
128
128
  style: textStyle,
129
129
  numberOfLines: 1,
130
130
  maxFontSizeMultiplier,
131
- dynamicTypeRamp: "body",
132
131
  children
133
132
  })
134
133
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
@@ -1,6 +1,6 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
2
  import { HStack } from "../HStack.js";
3
- import { useFontScale } from "../../fontScaling/useFontScale.js";
3
+ import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
4
4
  import { IconSlot } from "../IconSlot.js";
5
5
  import { useSelectContext } from "./selectContext.js";
6
6
  import { getMergedSelectItemLayerStyle, resolveSelectItemInteractionState } from "./selectItemTheme.js";
@@ -43,7 +43,7 @@ const SelectItem = memo(function SelectItem({ value, disabled, children, style,
43
43
  isSelected,
44
44
  theme
45
45
  ]);
46
- const fontScaleFactor = useFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
46
+ const fontScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof textStyle.lineHeight === "number" ? textStyle.lineHeight : void 0) ?? (typeof textStyle.fontSize === "number" ? textStyle.fontSize : void 0));
47
47
  const rootStyle = useMemo(() => {
48
48
  const configuredRoot = getMergedSelectItemLayerStyle(theme, "root", interaction, isSelected);
49
49
  return [
@@ -125,7 +125,6 @@ const SelectItem = memo(function SelectItem({ value, disabled, children, style,
125
125
  style: textStyle,
126
126
  numberOfLines: 1,
127
127
  maxFontSizeMultiplier,
128
- dynamicTypeRamp: "body",
129
128
  children
130
129
  })
131
130
  }), /* @__PURE__ */ jsx(Animated.View, {
@@ -1 +1 @@
1
- {"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n getMergedSelectItemLayerStyle,\n resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n /** Value submitted when this option is selected. */\n value: string;\n /** Whether this option is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n value,\n disabled,\n children,\n style,\n testID,\n}: SelectItemProps) {\n const {\n value: selectedValue,\n setValue,\n setOpen,\n open,\n registerItem,\n unregisterItem,\n highlightedValue,\n setHighlightedValue,\n reduceMotion,\n field,\n } = useSelectContext();\n const { maxFontSizeMultiplier } = field;\n const { theme } = useUnistyles();\n const [isPressed, setIsPressed] = useState(false);\n\n const label = useMemo(() => {\n if (typeof children === 'string' || typeof children === 'number') {\n return String(children);\n }\n\n return value;\n }, [children, value]);\n\n useEffect(() => {\n registerItem(value, label);\n return () => unregisterItem(value);\n }, [label, registerItem, unregisterItem, value]);\n\n const isSelected = selectedValue === value;\n const isHighlighted = highlightedValue === value;\n const interaction = resolveSelectItemInteractionState({\n isPressed,\n isHighlighted,\n });\n\n const textStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n [interaction, isSelected, theme],\n );\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n\n const rootStyle = useMemo(() => {\n const configuredRoot = getMergedSelectItemLayerStyle(\n theme,\n 'root',\n interaction,\n isSelected,\n ) as ViewStyle;\n return [\n configuredRoot,\n fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n : undefined,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n width: '100%' as const,\n opacity: disabled ? 0.5 : 1,\n },\n style,\n ] as StyleProp<ViewStyle>;\n }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n const endIconStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n [interaction, isSelected, theme],\n );\n\n const checkScale = useDerivedValue(\n () =>\n withTiming(isSelected ? 1 : 0, {\n duration: reduceMotion ? 0 : 120,\n easing: Easing.out(Easing.ease),\n }),\n [isSelected, reduceMotion],\n );\n\n const checkAnimatedStyle = useAnimatedStyle(() => ({\n opacity: checkScale.value,\n transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n }));\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setValue(value);\n setOpen(false);\n setHighlightedValue(null);\n }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n const handlePressIn = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsPressed(true);\n setHighlightedValue(value);\n }, [disabled, setHighlightedValue, value]);\n\n const handlePressOut = useCallback(() => {\n setIsPressed(false);\n }, []);\n\n if (!open) {\n return null;\n }\n\n return (\n <RNPressable\n testID={testID}\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={rootStyle}\n accessibilityRole=\"menuitem\"\n accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n >\n <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n <RNText\n style={textStyle}\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp=\"body\"\n >\n {children}\n </RNText>\n </HStack>\n\n <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n <IconSlot\n icon=\"Check\"\n size=\"sm\"\n variant=\"fill\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={endIconStyle}\n />\n </Animated.View>\n </RNPressable>\n );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"SelectItem.js","names":["RNPressable","RNText"],"sources":["../../../src/components/Select/SelectItem.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- selectItem selected state uses theme paths\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport { HStack } from '../HStack';\nimport { IconSlot } from '../IconSlot';\nimport { useSelectContext } from './selectContext';\nimport {\n getMergedSelectItemLayerStyle,\n resolveSelectItemInteractionState,\n} from './selectItemTheme';\n\ninterface SelectItemProps {\n /** Value submitted when this option is selected. */\n value: string;\n /** Whether this option is disabled. */\n disabled?: boolean;\n children?: ReactNode;\n style?: StyleProp<ViewStyle>;\n testID?: string;\n}\n\n/**\n * **▾ Select item**\n *\n * A single selectable option inside {@link SelectContent}.\n */\nconst SelectItem = memo(function SelectItem({\n value,\n disabled,\n children,\n style,\n testID,\n}: SelectItemProps) {\n const {\n value: selectedValue,\n setValue,\n setOpen,\n open,\n registerItem,\n unregisterItem,\n highlightedValue,\n setHighlightedValue,\n reduceMotion,\n field,\n } = useSelectContext();\n const { maxFontSizeMultiplier } = field;\n const { theme } = useUnistyles();\n const [isPressed, setIsPressed] = useState(false);\n\n const label = useMemo(() => {\n if (typeof children === 'string' || typeof children === 'number') {\n return String(children);\n }\n\n return value;\n }, [children, value]);\n\n useEffect(() => {\n registerItem(value, label);\n return () => unregisterItem(value);\n }, [label, registerItem, unregisterItem, value]);\n\n const isSelected = selectedValue === value;\n const isHighlighted = highlightedValue === value;\n const interaction = resolveSelectItemInteractionState({\n isPressed,\n isHighlighted,\n });\n\n const textStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'text', interaction, isSelected) as TextStyle,\n [interaction, isSelected, theme],\n );\n const fontScaleFactor = useComponentFontScale(\n maxFontSizeMultiplier,\n (typeof textStyle.lineHeight === 'number' ? textStyle.lineHeight : undefined) ??\n (typeof textStyle.fontSize === 'number' ? textStyle.fontSize : undefined),\n );\n\n const rootStyle = useMemo(() => {\n const configuredRoot = getMergedSelectItemLayerStyle(\n theme,\n 'root',\n interaction,\n isSelected,\n ) as ViewStyle;\n return [\n configuredRoot,\n fontScaleFactor !== 1 && typeof configuredRoot.paddingVertical === 'number'\n ? { paddingVertical: Math.round(configuredRoot.paddingVertical * fontScaleFactor) }\n : undefined,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n justifyContent: 'space-between' as const,\n width: '100%' as const,\n opacity: disabled ? 0.5 : 1,\n },\n style,\n ] as StyleProp<ViewStyle>;\n }, [disabled, fontScaleFactor, interaction, isSelected, style, theme]);\n\n const endIconStyle = useMemo(\n () => getMergedSelectItemLayerStyle(theme, 'endIcon', interaction, isSelected),\n [interaction, isSelected, theme],\n );\n\n const checkScale = useDerivedValue(\n () =>\n withTiming(isSelected ? 1 : 0, {\n duration: reduceMotion ? 0 : 120,\n easing: Easing.out(Easing.ease),\n }),\n [isSelected, reduceMotion],\n );\n\n const checkAnimatedStyle = useAnimatedStyle(() => ({\n opacity: checkScale.value,\n transform: [{ scale: 0.7 + checkScale.value * 0.3 }],\n }));\n\n const handlePress = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setValue(value);\n setOpen(false);\n setHighlightedValue(null);\n }, [disabled, setHighlightedValue, setOpen, setValue, value]);\n\n const handlePressIn = useCallback(() => {\n if (disabled) {\n return;\n }\n\n setIsPressed(true);\n setHighlightedValue(value);\n }, [disabled, setHighlightedValue, value]);\n\n const handlePressOut = useCallback(() => {\n setIsPressed(false);\n }, []);\n\n if (!open) {\n return null;\n }\n\n return (\n <RNPressable\n testID={testID}\n disabled={disabled}\n onPress={handlePress}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n style={rootStyle}\n accessibilityRole=\"menuitem\"\n accessibilityState={{ disabled: !!disabled, selected: isSelected }}\n >\n <HStack columnGap=\"2\" alignItems=\"center\" justifyContent=\"flex-start\" style={{ flex: 1 }}>\n <RNText style={textStyle} numberOfLines={1} maxFontSizeMultiplier={maxFontSizeMultiplier}>\n {children}\n </RNText>\n </HStack>\n\n <Animated.View style={checkAnimatedStyle} pointerEvents=\"none\">\n <IconSlot\n icon=\"Check\"\n size=\"sm\"\n variant=\"fill\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={endIconStyle}\n />\n </Animated.View>\n </RNPressable>\n );\n});\n\nSelectItem.displayName = 'SelectItem';\n\nexport { SelectItem, type SelectItemProps };\n"],"mappings":"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"}
@@ -27,7 +27,7 @@ const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIco
27
27
  readonly: readOnly,
28
28
  invalid: hasError
29
29
  });
30
- const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(maxFontSizeMultiplier, (typeof generated_styles.inputStyles.inputWrapperStatic.lineHeight === "number" ? generated_styles.inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof generated_styles.inputStyles.inputWrapperStatic.fontSize === "number" ? generated_styles.inputStyles.inputWrapperStatic.fontSize : void 0));
30
+ const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(maxFontSizeMultiplier, (typeof generated_styles.inputStyles.inputWrapperStatic.lineHeight === "number" ? generated_styles.inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof generated_styles.inputStyles.inputWrapperStatic.fontSize === "number" ? generated_styles.inputStyles.inputWrapperStatic.fontSize : void 0));
31
31
  const inputWrapperStyle = (0, react.useMemo)(() => {
32
32
  const { gap, paddingVertical } = generated_styles.inputStyles.inputWrapperStatic;
33
33
  const scaledMetrics = fontScaleFactor === 1 ? void 0 : {
@@ -130,7 +130,6 @@ const SelectTrigger = (0, react.memo)(function SelectTrigger({ startIcon, endIco
130
130
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Text, {
131
131
  numberOfLines: 1,
132
132
  maxFontSizeMultiplier,
133
- dynamicTypeRamp: "body",
134
133
  style: textInputStyle,
135
134
  children: displayText
136
135
  })
@@ -1,5 +1,5 @@
1
1
  /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
2
- import { useFontScale } from "../../fontScaling/useFontScale.js";
2
+ import { useComponentFontScale } from "../../fontScaling/useFontScale.js";
3
3
  import { IconSlot } from "../IconSlot.js";
4
4
  import { measureTrigger } from "../internal/Overlay/measureTrigger.js";
5
5
  import { useSelectContext, useSelectFieldContext } from "./selectContext.js";
@@ -24,7 +24,7 @@ const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
24
24
  readonly: readOnly,
25
25
  invalid: hasError
26
26
  });
27
- const fontScaleFactor = useFontScale(maxFontSizeMultiplier, (typeof inputStyles.inputWrapperStatic.lineHeight === "number" ? inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof inputStyles.inputWrapperStatic.fontSize === "number" ? inputStyles.inputWrapperStatic.fontSize : void 0));
27
+ const fontScaleFactor = useComponentFontScale(maxFontSizeMultiplier, (typeof inputStyles.inputWrapperStatic.lineHeight === "number" ? inputStyles.inputWrapperStatic.lineHeight : void 0) ?? (typeof inputStyles.inputWrapperStatic.fontSize === "number" ? inputStyles.inputWrapperStatic.fontSize : void 0));
28
28
  const inputWrapperStyle = useMemo(() => {
29
29
  const { gap, paddingVertical } = inputStyles.inputWrapperStatic;
30
30
  const scaledMetrics = fontScaleFactor === 1 ? void 0 : {
@@ -127,7 +127,6 @@ const SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }) {
127
127
  children: /* @__PURE__ */ jsx(Text, {
128
128
  numberOfLines: 1,
129
129
  maxFontSizeMultiplier,
130
- dynamicTypeRamp: "body",
131
130
  style: textInputStyle,
132
131
  children: displayText
133
132
  })
@@ -1 +1 @@
1
- {"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n const {\n value,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n getItemLabel,\n setHighlightedValue,\n reduceMotion,\n } = useSelectContext();\n const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n useSelectFieldContext();\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n const isInteractive = !readOnly && !disabled;\n const useAnimatedChevron = endIcon === undefined;\n const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n const fontScaleFactor = useFontScale(\n maxFontSizeMultiplier,\n (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n ? inputStyles.inputWrapperStatic.lineHeight\n : undefined) ??\n (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n ? inputStyles.inputWrapperStatic.fontSize\n : undefined),\n );\n\n const inputWrapperStyle = useMemo(() => {\n const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n const scaledMetrics =\n fontScaleFactor === 1\n ? undefined\n : {\n ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n ...(typeof paddingVertical === 'number' && {\n paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n }),\n };\n\n return [\n inputStyles.inputWrapper,\n inputStyles.inputWrapperStatic,\n inputStyles.inputWrapperDynamic,\n scaledMetrics,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n width,\n alignSelf: 'stretch' as const,\n },\n ];\n }, [\n fontScaleFactor,\n inputStyles.inputWrapper,\n inputStyles.inputWrapperDynamic,\n inputStyles.inputWrapperStatic,\n width,\n ]);\n\n const textContainerStyle = useMemo(\n () => [\n {\n flex: 1,\n justifyContent: 'center' as const,\n },\n typeof inputStyles.input.height === 'number'\n ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n : null,\n ],\n [fontScaleFactor, inputStyles.input],\n );\n\n const textInputStyle = useMemo(\n () => [\n {\n fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n fontSize: inputStyles.inputWrapperStatic.fontSize,\n letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n lineHeight: inputStyles.inputWrapperStatic.fontSize,\n paddingVertical: 0,\n },\n inputStyles.input,\n { height: undefined },\n !hasValue ? inputStyles.inputPlaceholder : null,\n ],\n [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n );\n\n const chevronProgress = useDerivedValue(\n () =>\n withTiming(open ? 1 : 0, {\n duration: reduceMotion ? 0 : 200,\n easing: Easing.out(Easing.ease),\n }),\n [open, reduceMotion],\n );\n\n const chevronAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n }));\n\n const handleRef = useCallback(\n (node: View | null) => {\n triggerRef.current = node;\n },\n [triggerRef],\n );\n\n const handlePress = useCallback(() => {\n if (!isInteractive) {\n return;\n }\n\n if (open) {\n setOpen(false);\n setHighlightedValue(null);\n return;\n }\n\n measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n setHighlightedValue(null);\n setOpen(true);\n }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n return (\n <RNPressable\n ref={handleRef}\n testID=\"select-trigger\"\n onPress={handlePress}\n disabled={!isInteractive}\n style={{ width, alignSelf: 'stretch' }}\n accessibilityRole=\"button\"\n accessibilityLabel={displayText || uid}\n accessibilityState={{\n disabled: !isInteractive,\n expanded: open,\n selected: hasValue,\n }}\n >\n <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.startIcon}\n />\n ) : null}\n\n <RNView style={textContainerStyle}>\n <RNText\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n dynamicTypeRamp=\"body\"\n style={textInputStyle}\n >\n {displayText}\n </RNText>\n </RNView>\n\n {useAnimatedChevron || endIcon ? (\n <Animated.View\n style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n testID=\"select-chevron\"\n >\n <IconSlot\n icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n size=\"sm\"\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.endIcon}\n />\n </Animated.View>\n ) : null}\n </RNView>\n </RNPressable>\n );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}
1
+ {"version":3,"file":"SelectTrigger.js","names":["RNPressable","RNView","RNText"],"sources":["../../../src/components/Select/SelectTrigger.tsx"],"sourcesContent":["import { memo, useCallback, useMemo } from 'react';\nimport type { View } from 'react-native';\nimport { Pressable as RNPressable, Text as RNText, View as RNView } from 'react-native';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n withTiming,\n} from 'react-native-reanimated';\n\nimport { inputStyles } from '../../../generated/styles';\nimport { useComponentFontScale } from '../../fontScaling/useFontScale';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { measureTrigger } from '../internal/Overlay';\nimport { useSelectContext, useSelectFieldContext } from './selectContext';\n\ninterface SelectTriggerProps {\n startIcon?: IconSlotType;\n endIcon?: IconSlotType;\n}\n\nconst SelectTrigger = memo(function SelectTrigger({ startIcon, endIcon }: SelectTriggerProps) {\n const {\n value,\n open,\n setOpen,\n triggerRef,\n triggerRect,\n setTriggerRect,\n getItemLabel,\n setHighlightedValue,\n reduceMotion,\n } = useSelectContext();\n const { size, disabled, readOnly, hasError, placeholder, uid, width, maxFontSizeMultiplier } =\n useSelectFieldContext();\n\n const hasValue = value.length > 0;\n const valueState = hasValue ? 'filled' : 'empty';\n const isInteractive = !readOnly && !disabled;\n const useAnimatedChevron = endIcon === undefined;\n const displayText = hasValue ? (getItemLabel(value) ?? value) : (placeholder ?? '');\n\n inputStyles.useVariants({\n size,\n value: valueState,\n pressed: open,\n readonly: readOnly,\n invalid: hasError,\n });\n const fontScaleFactor = useComponentFontScale(\n maxFontSizeMultiplier,\n (typeof inputStyles.inputWrapperStatic.lineHeight === 'number'\n ? inputStyles.inputWrapperStatic.lineHeight\n : undefined) ??\n (typeof inputStyles.inputWrapperStatic.fontSize === 'number'\n ? inputStyles.inputWrapperStatic.fontSize\n : undefined),\n );\n\n const inputWrapperStyle = useMemo(() => {\n const { gap, paddingVertical } = inputStyles.inputWrapperStatic;\n const scaledMetrics =\n fontScaleFactor === 1\n ? undefined\n : {\n ...(typeof gap === 'number' && { gap: Math.round(gap * fontScaleFactor) }),\n ...(typeof paddingVertical === 'number' && {\n paddingVertical: Math.round(paddingVertical * fontScaleFactor),\n }),\n };\n\n return [\n inputStyles.inputWrapper,\n inputStyles.inputWrapperStatic,\n inputStyles.inputWrapperDynamic,\n scaledMetrics,\n {\n flexDirection: 'row' as const,\n alignItems: 'center' as const,\n width,\n alignSelf: 'stretch' as const,\n },\n ];\n }, [\n fontScaleFactor,\n inputStyles.inputWrapper,\n inputStyles.inputWrapperDynamic,\n inputStyles.inputWrapperStatic,\n width,\n ]);\n\n const textContainerStyle = useMemo(\n () => [\n {\n flex: 1,\n justifyContent: 'center' as const,\n },\n typeof inputStyles.input.height === 'number'\n ? { minHeight: Math.round(inputStyles.input.height * fontScaleFactor) }\n : null,\n ],\n [fontScaleFactor, inputStyles.input],\n );\n\n const textInputStyle = useMemo(\n () => [\n {\n fontFamily: inputStyles.inputWrapperStatic.fontFamily,\n fontSize: inputStyles.inputWrapperStatic.fontSize,\n letterSpacing: inputStyles.inputWrapperStatic.letterSpacing,\n // Match TextInput vertical centering: wrapper lineHeight is for layout, not single-line text.\n lineHeight: inputStyles.inputWrapperStatic.fontSize,\n paddingVertical: 0,\n },\n inputStyles.input,\n { height: undefined },\n !hasValue ? inputStyles.inputPlaceholder : null,\n ],\n [hasValue, inputStyles.input, inputStyles.inputPlaceholder, inputStyles.inputWrapperStatic],\n );\n\n const chevronProgress = useDerivedValue(\n () =>\n withTiming(open ? 1 : 0, {\n duration: reduceMotion ? 0 : 200,\n easing: Easing.out(Easing.ease),\n }),\n [open, reduceMotion],\n );\n\n const chevronAnimatedStyle = useAnimatedStyle(() => ({\n transform: [{ rotate: `${chevronProgress.value * 180}deg` }],\n }));\n\n const handleRef = useCallback(\n (node: View | null) => {\n triggerRef.current = node;\n },\n [triggerRef],\n );\n\n const handlePress = useCallback(() => {\n if (!isInteractive) {\n return;\n }\n\n if (open) {\n setOpen(false);\n setHighlightedValue(null);\n return;\n }\n\n measureTrigger(triggerRef.current, triggerRect, setTriggerRect);\n setHighlightedValue(null);\n setOpen(true);\n }, [isInteractive, open, setHighlightedValue, setOpen, setTriggerRect, triggerRect, triggerRef]);\n\n return (\n <RNPressable\n ref={handleRef}\n testID=\"select-trigger\"\n onPress={handlePress}\n disabled={!isInteractive}\n style={{ width, alignSelf: 'stretch' }}\n accessibilityRole=\"button\"\n accessibilityLabel={displayText || uid}\n accessibilityState={{\n disabled: !isInteractive,\n expanded: open,\n selected: hasValue,\n }}\n >\n <RNView style={inputWrapperStyle} pointerEvents=\"none\">\n {startIcon ? (\n <IconSlot\n icon={startIcon}\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.startIcon}\n />\n ) : null}\n\n <RNView style={textContainerStyle}>\n <RNText\n numberOfLines={1}\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={textInputStyle}\n >\n {displayText}\n </RNText>\n </RNView>\n\n {useAnimatedChevron || endIcon ? (\n <Animated.View\n style={useAnimatedChevron ? chevronAnimatedStyle : undefined}\n testID=\"select-chevron\"\n >\n <IconSlot\n icon={useAnimatedChevron ? 'ChevronDown' : endIcon!}\n size=\"sm\"\n variant=\"outline\"\n maxFontSizeMultiplier={maxFontSizeMultiplier}\n style={inputStyles.endIcon}\n />\n </Animated.View>\n ) : null}\n </RNView>\n </RNPressable>\n );\n});\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport { SelectTrigger, type SelectTriggerProps };\n"],"mappings":"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"}
@@ -20,7 +20,7 @@ interface SelectFieldContextValue {
20
20
  placeholder?: string;
21
21
  uid: string;
22
22
  /** Resolved React Native control cap (0 means explicitly uncapped). */
23
- maxFontSizeMultiplier: number;
23
+ maxFontSizeMultiplier?: number;
24
24
  }
25
25
  interface SelectContextValue {
26
26
  value: string;
@@ -20,7 +20,7 @@ interface SelectFieldContextValue {
20
20
  placeholder?: string;
21
21
  uid: string;
22
22
  /** Resolved React Native control cap (0 means explicitly uncapped). */
23
- maxFontSizeMultiplier: number;
23
+ maxFontSizeMultiplier?: number;
24
24
  }
25
25
  interface SelectContextValue {
26
26
  value: string;
@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
4
4
  const require_fontScaling_useFontScale = require("../fontScaling/useFontScale.cjs");
5
5
  const require_fontScaling_useMaxFontSizeMultiplier = require("../fontScaling/useMaxFontSizeMultiplier.cjs");
6
+ const require_components_Button_buttonTheme = require("./Button/buttonTheme.cjs");
6
7
  const require_components_IconSlot = require("./IconSlot.cjs");
7
8
  const require_components_FormLabel = require("./FormLabel.cjs");
8
9
  let react = require("react");
@@ -55,7 +56,7 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
55
56
  const isOn = isControlled ? isOnProp : internalIsOn;
56
57
  const activeVariant = isOn ? "on" : "off";
57
58
  const { theme } = (0, react_native_unistyles.useUnistyles)();
58
- const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier) ?? 0;
59
+ const resolvedMaxFontSizeMultiplier = require_fontScaling_useMaxFontSizeMultiplier.useMaxFontSizeMultiplier("control", maxFontSizeMultiplier);
59
60
  (0, react.useEffect)(() => {
60
61
  const checkReducedMotion = async () => {
61
62
  setPrefersReducedMotion(await react_native.AccessibilityInfo.isReduceMotionEnabled());
@@ -82,9 +83,9 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
82
83
  variant: activeVariant
83
84
  }) ?? generated_styles.switchStyles;
84
85
  const labelBaseSize = resolvedSwitchStyles.text.lineHeight ?? resolvedSwitchStyles.text.fontSize;
85
- const fontScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
86
+ const fontScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof labelBaseSize === "number" ? labelBaseSize : void 0);
86
87
  const handleIconSize = resolvedSwitchStyles.handleIcon.fontSize;
87
- const handleIconScaleFactor = require_fontScaling_useFontScale.useFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
88
+ const handleIconScaleFactor = require_fontScaling_useFontScale.useComponentFontScale(resolvedMaxFontSizeMultiplier, typeof handleIconSize === "number" ? handleIconSize : void 0);
88
89
  const scaledHandleIconSize = typeof handleIconSize === "number" ? Math.round(handleIconSize * handleIconScaleFactor) : void 0;
89
90
  const scaledTrackWidth = Math.round(resolvedSwitchStyles.switch.width * fontScaleFactor);
90
91
  const scaledTrackPadding = Math.round(resolvedSwitchStyles.switch.padding * fontScaleFactor);
@@ -184,7 +185,14 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
184
185
  variant: "fill",
185
186
  dangerouslySetSize: scaledHandleIconSize,
186
187
  allowFontScaling: false,
187
- style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
188
+ style: [
189
+ resolvedSwitchStyles.handleIcon,
190
+ variantLayerStyles.handleIcon,
191
+ scaledHandleIconSize === void 0 ? void 0 : {
192
+ fontSize: scaledHandleIconSize,
193
+ lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
194
+ }
195
+ ]
188
196
  })
189
197
  }), offIcon && !isOn && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
190
198
  style: switchStaticStyles.iconContainer,
@@ -193,7 +201,14 @@ const Switch = (0, react.memo)(function Switch({ isOn: isOnProp, defaultIsOn = f
193
201
  variant: "fill",
194
202
  dangerouslySetSize: scaledHandleIconSize,
195
203
  allowFontScaling: false,
196
- style: [resolvedSwitchStyles.handleIcon, variantLayerStyles.handleIcon]
204
+ style: [
205
+ resolvedSwitchStyles.handleIcon,
206
+ variantLayerStyles.handleIcon,
207
+ scaledHandleIconSize === void 0 ? void 0 : {
208
+ fontSize: scaledHandleIconSize,
209
+ lineHeight: require_components_Button_buttonTheme.getSafeIconCell(scaledHandleIconSize)
210
+ }
211
+ ]
197
212
  })
198
213
  })]
199
214
  })
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAwBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
1
+ {"version":3,"file":"Switch.d.cts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAwBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}
1
+ {"version":3,"file":"Switch.d.ts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;;;;;;;UAyBU,WAAA,SAAoB,IAAA,CAAK,SAAA,YAAqB,oBAAA,CAAqB,YAAA;;EAE3E,GAAA,GAAM,GAAA,CAAI,IAAA;EAFF;EAIR,QAAA,IAAY,KAAA;;EAEZ,QAAA;EAN2E;EAQ3E,QAAA;EANM;;;;;;EAaN,qBAAA;EAfiC;EAiBjC,iBAAA,GAAoB,kBAAA;AAAA;;;;;;;;;;;;;AAAkB;;;;;;;;;;;;;;;;;;;;;cAsClC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}