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

package/README.md

@@ -18,7 +18,7 @@
 
 `@yahoo/uds-mobile` brings UDS to React Native. It provides:
 
-- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, InputHelpText, Link, Radio, RadioGroup, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
+- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, InputHelpText, Link, Pagination, Radio, RadioGroup, Select, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
 - **Theming**: Full light/dark mode support with automatic system preference detection
 - **Design Token Integration**: Colors, typography, spacing, and motion configs synced from UDS tokens
 - **Animations**: Smooth, physics-based animations using Reanimated with motion parity to web
@@ -505,6 +505,11 @@ See the [Accessibility and text scaling guide](https://uds.build/docs/mobile/acc
 default cap table, per-component overrides, custom-component hooks, known limits, and device test
 matrix.
 
+When upgrading from manual scaling workarounds, remove app-level geometry multiplication only after
+comparing the screen with UDS defaults; applying both can make controls oversized. App-owned
+composite controls should use `useFontScale(cap, baseSize)`. As a temporary rollback,
+`fontScaling={{ enabled: false }}` restores unrestricted native scaling.
+
 ## Fonts
 
 ### Font Handling

package/dist/components/Select/Select.cjs

@@ -56,16 +56,28 @@ const Select = (0, react.memo)(function Select({ label, helpText, helperTextIcon
 		}
 	});
 	const registerItem = (0, react.useCallback)((itemValue, itemLabel) => {
-		if (itemsRef.current.get(itemValue) === itemLabel) return;
-		itemsRef.current.set(itemValue, itemLabel);
+		const existing = itemsRef.current.get(itemValue);
+		itemsRef.current.set(itemValue, {
+			label: itemLabel,
+			registrations: (existing?.registrations ?? 0) + 1
+		});
+		if (existing?.label === itemLabel) return;
 		setItemsVersion((version) => version + 1);
 	}, []);
 	const unregisterItem = (0, react.useCallback)((itemValue) => {
-		if (!itemsRef.current.has(itemValue)) return;
+		const existing = itemsRef.current.get(itemValue);
+		if (!existing) return;
+		if (existing.registrations > 1) {
+			itemsRef.current.set(itemValue, {
+				...existing,
+				registrations: existing.registrations - 1
+			});
+			return;
+		}
 		itemsRef.current.delete(itemValue);
 		setItemsVersion((version) => version + 1);
 	}, []);
-	const getItemLabel = (0, react.useCallback)((itemValue) => itemsRef.current.get(itemValue), []);
+	const getItemLabel = (0, react.useCallback)((itemValue) => itemsRef.current.get(itemValue)?.label, []);
 	const fieldContext = (0, react.useMemo)(() => ({
 		size,
 		disabled,

package/dist/components/Select/Select.js

@@ -54,16 +54,28 @@ const Select = memo(function Select({ label, helpText, helperTextIcon, placehold
 		}
 	});
 	const registerItem = useCallback((itemValue, itemLabel) => {
-		if (itemsRef.current.get(itemValue) === itemLabel) return;
-		itemsRef.current.set(itemValue, itemLabel);
+		const existing = itemsRef.current.get(itemValue);
+		itemsRef.current.set(itemValue, {
+			label: itemLabel,
+			registrations: (existing?.registrations ?? 0) + 1
+		});
+		if (existing?.label === itemLabel) return;
 		setItemsVersion((version) => version + 1);
 	}, []);
 	const unregisterItem = useCallback((itemValue) => {
-		if (!itemsRef.current.has(itemValue)) return;
+		const existing = itemsRef.current.get(itemValue);
+		if (!existing) return;
+		if (existing.registrations > 1) {
+			itemsRef.current.set(itemValue, {
+				...existing,
+				registrations: existing.registrations - 1
+			});
+			return;
+		}
 		itemsRef.current.delete(itemValue);
 		setItemsVersion((version) => version + 1);
 	}, []);
-	const getItemLabel = useCallback((itemValue) => itemsRef.current.get(itemValue), []);
+	const getItemLabel = useCallback((itemValue) => itemsRef.current.get(itemValue)?.label, []);
 	const fieldContext = useMemo(() => ({
 		size,
 		disabled,

package/dist/components/Select/Select.js.map

@@ -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  const itemsRef = useRef(new Map<string, string>());\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    if (itemsRef.current.get(itemValue) === itemLabel) {\n      return;\n    }\n\n    itemsRef.current.set(itemValue, itemLabel);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const unregisterItem = useCallback((itemValue: string) => {\n    if (!itemsRef.current.has(itemValue)) {\n      return;\n    }\n\n    itemsRef.current.delete(itemValue);\n    setItemsVersion((version) => version + 1);\n  }, []);\n\n  const getItemLabel = useCallback((itemValue: string) => itemsRef.current.get(itemValue), []);\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":"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"}
+{"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":"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"}

package/dist/components/Select/SelectContent.cjs

@@ -31,7 +31,9 @@ const OFFSCREEN_REGISTRY_STYLE = react_native.StyleSheet.create({ registry: {
 * Floating listbox container for {@link SelectItem} options.
 */
 const SelectContent = (0, react.memo)(function SelectContent({ children, size: _size = "default", variant: _variant = "default", keepOpenOnInteractOutside = false, maxHeight = DEFAULT_MAX_HEIGHT, gutter = DEFAULT_OFFSET, sameWidth = true, style, testID }) {
-	const { open, setOpen, triggerRect, reduceMotion } = require_components_Select_selectContext.useSelectContext();
+	const selectContext = require_components_Select_selectContext.useSelectContext();
+	const fieldContext = require_components_Select_selectContext.useSelectFieldContext();
+	const { open, setOpen, triggerRect, reduceMotion } = selectContext;
 	const [contentSize, setContentSize] = (0, react.useState)({
 		width: 0,
 		height: 0
@@ -115,28 +117,34 @@ const SelectContent = (0, react.memo)(function SelectContent({ children, size: _
 		open,
 		dismissible: !keepOpenOnInteractOutside,
 		onDismiss: dismiss,
-		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
-			testID,
-			style: [
-				contentStyle,
-				animatedStyle,
-				{
-					overflow: "visible",
-					zIndex: 1e3
-				}
-			],
-			onLayout: handleLayout,
-			accessibilityRole: "menu",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
-				style: panelStyle,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
-					keyboardShouldPersistTaps: "handled",
-					nestedScrollEnabled: true,
-					style: { maxHeight },
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
-						alignItems: "stretch",
-						justifyContent: "flex-start",
-						children
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectContext.Provider, {
+			value: selectContext,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Select_selectContext.SelectFieldContext.Provider, {
+				value: fieldContext,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+					testID,
+					style: [
+						contentStyle,
+						animatedStyle,
+						{
+							overflow: "visible",
+							zIndex: 1e3
+						}
+					],
+					onLayout: handleLayout,
+					accessibilityRole: "menu",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+						style: panelStyle,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
+							keyboardShouldPersistTaps: "handled",
+							nestedScrollEnabled: true,
+							style: { maxHeight },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_VStack.VStack, {
+								alignItems: "stretch",
+								justifyContent: "flex-start",
+								children
+							})
+						})
 					})
 				})
 			})

package/dist/components/Select/SelectContent.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.d.cts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAmCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
+{"version":3,"file":"SelectContent.d.cts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAwCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.d.ts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAmCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}
+{"version":3,"file":"SelectContent.d.ts","names":[],"sources":["../../../src/components/Select/SelectContent.tsx"],"mappings":";;;;;;;UAwCU,kBAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,iBAAA;EACP,OAAA,GAAU,oBAAA;EAHgB;EAK1B,yBAAA;EAJW;EAMX,SAAA;EAJU;EAMV,MAAA;EAGQ;EADR,SAAA;EACA,KAAA,GAAQ,SAAA,CAAU,SAAA;EAClB,MAAA;AAAA;;;;;;cAQI,aAAA,EAAa,OAAA,CAAA,oBAAA,CAAA,kBAAA"}

package/dist/components/Select/SelectContent.js

@@ -2,7 +2,7 @@
 import { VStack } from "../VStack.js";
 import { useAnchoredPosition } from "../internal/Overlay/useAnchoredPosition.js";
 import { PopoverPortalLayer } from "../Popover/PopoverPortalLayer.js";
-import { useSelectContext } from "./selectContext.js";
+import { SelectContext, SelectFieldContext, useSelectContext, useSelectFieldContext } from "./selectContext.js";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -28,7 +28,9 @@ const OFFSCREEN_REGISTRY_STYLE = StyleSheet.create({ registry: {
 * Floating listbox container for {@link SelectItem} options.
 */
 const SelectContent = memo(function SelectContent({ children, size: _size = "default", variant: _variant = "default", keepOpenOnInteractOutside = false, maxHeight = DEFAULT_MAX_HEIGHT, gutter = DEFAULT_OFFSET, sameWidth = true, style, testID }) {
-	const { open, setOpen, triggerRect, reduceMotion } = useSelectContext();
+	const selectContext = useSelectContext();
+	const fieldContext = useSelectFieldContext();
+	const { open, setOpen, triggerRect, reduceMotion } = selectContext;
 	const [contentSize, setContentSize] = useState({
 		width: 0,
 		height: 0
@@ -112,28 +114,34 @@ const SelectContent = memo(function SelectContent({ children, size: _size = "def
 		open,
 		dismissible: !keepOpenOnInteractOutside,
 		onDismiss: dismiss,
-		children: () => /* @__PURE__ */ jsx(Animated.View, {
-			testID,
-			style: [
-				contentStyle,
-				animatedStyle,
-				{
-					overflow: "visible",
-					zIndex: 1e3
-				}
-			],
-			onLayout: handleLayout,
-			accessibilityRole: "menu",
-			children: /* @__PURE__ */ jsx(View, {
-				style: panelStyle,
-				children: /* @__PURE__ */ jsx(ScrollView, {
-					keyboardShouldPersistTaps: "handled",
-					nestedScrollEnabled: true,
-					style: { maxHeight },
-					children: /* @__PURE__ */ jsx(VStack, {
-						alignItems: "stretch",
-						justifyContent: "flex-start",
-						children
+		children: () => /* @__PURE__ */ jsx(SelectContext.Provider, {
+			value: selectContext,
+			children: /* @__PURE__ */ jsx(SelectFieldContext.Provider, {
+				value: fieldContext,
+				children: /* @__PURE__ */ jsx(Animated.View, {
+					testID,
+					style: [
+						contentStyle,
+						animatedStyle,
+						{
+							overflow: "visible",
+							zIndex: 1e3
+						}
+					],
+					onLayout: handleLayout,
+					accessibilityRole: "menu",
+					children: /* @__PURE__ */ jsx(View, {
+						style: panelStyle,
+						children: /* @__PURE__ */ jsx(ScrollView, {
+							keyboardShouldPersistTaps: "handled",
+							nestedScrollEnabled: true,
+							style: { maxHeight },
+							children: /* @__PURE__ */ jsx(VStack, {
+								alignItems: "stretch",
+								justifyContent: "flex-start",
+								children
+							})
+						})
 					})
 				})
 			})

package/dist/components/Select/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","names":["RNScrollView"],"sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport { ScrollView as RNScrollView, StyleSheet, View } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { selectContentStyles } from '../../../generated/styles';\nimport { useAnchoredPosition } from '../internal/Overlay';\nimport { PopoverPortalLayer } from '../Popover/PopoverPortalLayer';\nimport { VStack } from '../VStack';\nimport { useSelectContext } from './selectContext';\nimport type { SelectContentSize, SelectContentVariant } from './types';\n\nconst DEFAULT_OFFSET = 4;\nconst DEFAULT_MAX_HEIGHT = 240;\nconst ANIMATION_DURATION = 200;\n\nconst OFFSCREEN_REGISTRY_STYLE = StyleSheet.create({\n  registry: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: 1,\n    height: 1,\n    opacity: 0,\n    overflow: 'hidden',\n    zIndex: -1,\n  },\n});\n\ninterface SelectContentProps {\n  children?: ReactNode;\n  size?: SelectContentSize;\n  variant?: SelectContentVariant;\n  /** When true, the panel stays open when the user taps outside. */\n  keepOpenOnInteractOutside?: boolean;\n  /** Maximum height of the options list in pixels. @default 240 */\n  maxHeight?: number;\n  /** Distance between the trigger and the content panel. @default 4 */\n  gutter?: number;\n  /** When true, the content panel matches the trigger width. @default true */\n  sameWidth?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/**\n * **▾ Select content panel**\n *\n * Floating listbox container for {@link SelectItem} options.\n */\nconst SelectContent = memo(function SelectContent({\n  children,\n  size: _size = 'default',\n  variant: _variant = 'default',\n  keepOpenOnInteractOutside = false,\n  maxHeight = DEFAULT_MAX_HEIGHT,\n  gutter = DEFAULT_OFFSET,\n  sameWidth = true,\n  style,\n  testID,\n}: SelectContentProps) {\n  const { open, setOpen, triggerRect, reduceMotion } = useSelectContext();\n  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });\n  const [shouldRender, setShouldRender] = useState(open);\n\n  const dismiss = useCallback(() => {\n    if (keepOpenOnInteractOutside) {\n      return;\n    }\n\n    setOpen(false);\n  }, [keepOpenOnInteractOutside, setOpen]);\n\n  const {\n    contentStyle,\n    anchorReady,\n    maxWidth: positionedMaxWidth,\n  } = useAnchoredPosition({\n    triggerRect,\n    contentSize,\n    placement: 'bottom',\n    offset: gutter,\n    sameWidth,\n    width: sameWidth ? 'trigger' : 'content',\n    avoidCollisions: true,\n    collisionPadding: 12,\n  });\n\n  const isPositionedOpen = open && anchorReady && contentSize.height > 0;\n  const progress = useDerivedValue(\n    () =>\n      withTiming(isPositionedOpen ? 1 : 0, {\n        duration: reduceMotion ? 0 : ANIMATION_DURATION,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isPositionedOpen, reduceMotion],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => ({\n    opacity: progress.value,\n    transform: [{ scale: 0.97 + progress.value * 0.03 }, { translateY: (1 - progress.value) * 8 }],\n  }));\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setContentSize({ width, height });\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      setShouldRender(true);\n      return;\n    }\n\n    if (reduceMotion) {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n    }, ANIMATION_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [open, reduceMotion]);\n\n  selectContentStyles.useVariants({});\n\n  const panelStyle = useMemo(\n    () =>\n      StyleSheet.flatten([\n        selectContentStyles.root,\n        {\n          maxHeight,\n          maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : undefined,\n          overflow: 'hidden',\n          zIndex: 1,\n        },\n        style,\n      ]) as ViewStyle,\n    [maxHeight, positionedMaxWidth, selectContentStyles.root, style],\n  );\n\n  return (\n    <>\n      {!open ? (\n        <View\n          accessibilityElementsHidden\n          importantForAccessibility=\"no-hide-descendants\"\n          pointerEvents=\"none\"\n          style={OFFSCREEN_REGISTRY_STYLE.registry}\n        >\n          {children}\n        </View>\n      ) : null}\n\n      {open && shouldRender ? (\n        <PopoverPortalLayer\n          open={open}\n          dismissible={!keepOpenOnInteractOutside}\n          onDismiss={dismiss}\n        >\n          {() => (\n            <Animated.View\n              testID={testID}\n              style={[contentStyle, animatedStyle, { overflow: 'visible', zIndex: 1000 }]}\n              onLayout={handleLayout}\n              accessibilityRole=\"menu\"\n            >\n              <View style={panelStyle}>\n                <RNScrollView\n                  keyboardShouldPersistTaps=\"handled\"\n                  nestedScrollEnabled\n                  style={{ maxHeight }}\n                >\n                  <VStack alignItems=\"stretch\" justifyContent=\"flex-start\">\n                    {children}\n                  </VStack>\n                </RNScrollView>\n              </View>\n            </Animated.View>\n          )}\n        </PopoverPortalLayer>\n      ) : null}\n    </>\n  );\n});\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent, type SelectContentProps };\n"],"mappings":"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"}
+{"version":3,"file":"SelectContent.js","names":["RNScrollView"],"sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport { ScrollView as RNScrollView, StyleSheet, View } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\n\nimport { selectContentStyles } from '../../../generated/styles';\nimport { useAnchoredPosition } from '../internal/Overlay';\nimport { PopoverPortalLayer } from '../Popover/PopoverPortalLayer';\nimport { VStack } from '../VStack';\nimport {\n  SelectContext,\n  SelectFieldContext,\n  useSelectContext,\n  useSelectFieldContext,\n} from './selectContext';\nimport type { SelectContentSize, SelectContentVariant } from './types';\n\nconst DEFAULT_OFFSET = 4;\nconst DEFAULT_MAX_HEIGHT = 240;\nconst ANIMATION_DURATION = 200;\n\nconst OFFSCREEN_REGISTRY_STYLE = StyleSheet.create({\n  registry: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    width: 1,\n    height: 1,\n    opacity: 0,\n    overflow: 'hidden',\n    zIndex: -1,\n  },\n});\n\ninterface SelectContentProps {\n  children?: ReactNode;\n  size?: SelectContentSize;\n  variant?: SelectContentVariant;\n  /** When true, the panel stays open when the user taps outside. */\n  keepOpenOnInteractOutside?: boolean;\n  /** Maximum height of the options list in pixels. @default 240 */\n  maxHeight?: number;\n  /** Distance between the trigger and the content panel. @default 4 */\n  gutter?: number;\n  /** When true, the content panel matches the trigger width. @default true */\n  sameWidth?: boolean;\n  style?: StyleProp<ViewStyle>;\n  testID?: string;\n}\n\n/**\n * **▾ Select content panel**\n *\n * Floating listbox container for {@link SelectItem} options.\n */\nconst SelectContent = memo(function SelectContent({\n  children,\n  size: _size = 'default',\n  variant: _variant = 'default',\n  keepOpenOnInteractOutside = false,\n  maxHeight = DEFAULT_MAX_HEIGHT,\n  gutter = DEFAULT_OFFSET,\n  sameWidth = true,\n  style,\n  testID,\n}: SelectContentProps) {\n  const selectContext = useSelectContext();\n  const fieldContext = useSelectFieldContext();\n  const { open, setOpen, triggerRect, reduceMotion } = selectContext;\n  const [contentSize, setContentSize] = useState({ width: 0, height: 0 });\n  const [shouldRender, setShouldRender] = useState(open);\n\n  const dismiss = useCallback(() => {\n    if (keepOpenOnInteractOutside) {\n      return;\n    }\n\n    setOpen(false);\n  }, [keepOpenOnInteractOutside, setOpen]);\n\n  const {\n    contentStyle,\n    anchorReady,\n    maxWidth: positionedMaxWidth,\n  } = useAnchoredPosition({\n    triggerRect,\n    contentSize,\n    placement: 'bottom',\n    offset: gutter,\n    sameWidth,\n    width: sameWidth ? 'trigger' : 'content',\n    avoidCollisions: true,\n    collisionPadding: 12,\n  });\n\n  const isPositionedOpen = open && anchorReady && contentSize.height > 0;\n  const progress = useDerivedValue(\n    () =>\n      withTiming(isPositionedOpen ? 1 : 0, {\n        duration: reduceMotion ? 0 : ANIMATION_DURATION,\n        easing: Easing.out(Easing.ease),\n      }),\n    [isPositionedOpen, reduceMotion],\n  );\n\n  const animatedStyle = useAnimatedStyle(() => ({\n    opacity: progress.value,\n    transform: [{ scale: 0.97 + progress.value * 0.03 }, { translateY: (1 - progress.value) * 8 }],\n  }));\n\n  const handleLayout = useCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n    setContentSize({ width, height });\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      setShouldRender(true);\n      return;\n    }\n\n    if (reduceMotion) {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n      return;\n    }\n\n    const timeout = setTimeout(() => {\n      setShouldRender(false);\n      setContentSize({ width: 0, height: 0 });\n    }, ANIMATION_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [open, reduceMotion]);\n\n  selectContentStyles.useVariants({});\n\n  const panelStyle = useMemo(\n    () =>\n      StyleSheet.flatten([\n        selectContentStyles.root,\n        {\n          maxHeight,\n          maxWidth: positionedMaxWidth > 0 ? positionedMaxWidth : undefined,\n          overflow: 'hidden',\n          zIndex: 1,\n        },\n        style,\n      ]) as ViewStyle,\n    [maxHeight, positionedMaxWidth, selectContentStyles.root, style],\n  );\n\n  return (\n    <>\n      {!open ? (\n        <View\n          accessibilityElementsHidden\n          importantForAccessibility=\"no-hide-descendants\"\n          pointerEvents=\"none\"\n          style={OFFSCREEN_REGISTRY_STYLE.registry}\n        >\n          {children}\n        </View>\n      ) : null}\n\n      {open && shouldRender ? (\n        <PopoverPortalLayer\n          open={open}\n          dismissible={!keepOpenOnInteractOutside}\n          onDismiss={dismiss}\n        >\n          {() => (\n            <SelectContext.Provider value={selectContext}>\n              <SelectFieldContext.Provider value={fieldContext}>\n                <Animated.View\n                  testID={testID}\n                  style={[contentStyle, animatedStyle, { overflow: 'visible', zIndex: 1000 }]}\n                  onLayout={handleLayout}\n                  accessibilityRole=\"menu\"\n                >\n                  <View style={panelStyle}>\n                    <RNScrollView\n                      keyboardShouldPersistTaps=\"handled\"\n                      nestedScrollEnabled\n                      style={{ maxHeight }}\n                    >\n                      <VStack alignItems=\"stretch\" justifyContent=\"flex-start\">\n                        {children}\n                      </VStack>\n                    </RNScrollView>\n                  </View>\n                </Animated.View>\n              </SelectFieldContext.Provider>\n            </SelectContext.Provider>\n          )}\n        </PopoverPortalLayer>\n      ) : null}\n    </>\n  );\n});\n\nSelectContent.displayName = 'SelectContent';\n\nexport { SelectContent, type SelectContentProps };\n"],"mappings":"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"}

package/dist/fontScaling/constants.cjs

@@ -60,9 +60,10 @@ const TYPE_SCALE_CURVE = {
 */
 const DEFAULT_MAX_FONT_SIZE_MULTIPLIERS = Object.freeze(Object.fromEntries(Object.entries(TYPE_SCALE_CURVE).map(([variant, cap]) => [variant, cap === null ? 2 : Math.min(cap, 2)])));
 /**
-* Default cap for control-internal text and icons (Button, Checkbox, Radio,
-* Switch, Chip, Tabs, Icon). Controls have bounded layouts, so they get the
-* supported ceiling rather than a looser per-variant cap.
+* Default cap for control-internal text, icons, and geometry (Button,
+* Checkbox, Radio, Switch, Chip, Tabs, Input, Select, Avatar, Pagination, and
+* Icon). Controls have bounded layouts, so they get the supported ceiling
+* rather than a looser per-variant cap.
 */
 const DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = 2;
 /**

package/dist/fontScaling/constants.d.cts

@@ -40,9 +40,10 @@ declare const TYPE_SCALE_CURVE: Readonly<Partial<Record<TextVariant, FontScaling
  */
 declare const DEFAULT_MAX_FONT_SIZE_MULTIPLIERS: Readonly<Partial<Record<TextVariant, FontScalingCapValue>>>;
 /**
- * Default cap for control-internal text and icons (Button, Checkbox, Radio,
- * Switch, Chip, Tabs, Icon). Controls have bounded layouts, so they get the
- * supported ceiling rather than a looser per-variant cap.
+ * Default cap for control-internal text, icons, and geometry (Button,
+ * Checkbox, Radio, Switch, Chip, Tabs, Input, Select, Avatar, Pagination, and
+ * Icon). Controls have bounded layouts, so they get the supported ceiling
+ * rather than a looser per-variant cap.
  */
 declare const DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = 2;
 /**

package/dist/fontScaling/constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.cts","names":[],"sources":["../../src/fontScaling/constants.ts"],"mappings":";;;;;;;;AAGmD;;;;;AAarB;;;;cAAxB,wBAAA;;;;;;;;;;;;;AAgB0E;;cAA1E,gBAAA,EAAkB,QAAA,CAAS,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;;cAgCvD,iCAAA,EAAmC,QAAA,CACvC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;cAexB,wCAAA;AAf2C;;;;;AAeH;;;AAfG,cAyB3C,0BAAA,EAA4B,QAAA,CAChC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,WAAA,CAAY,SAAA"}
+{"version":3,"file":"constants.d.cts","names":[],"sources":["../../src/fontScaling/constants.ts"],"mappings":";;;;;;;;AAGmD;;;;;AAarB;;;;cAAxB,wBAAA;;;;;;;;;;;;;AAgB0E;;cAA1E,gBAAA,EAAkB,QAAA,CAAS,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;;cAgCvD,iCAAA,EAAmC,QAAA,CACvC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;cAgBxB,wCAAA;;;;;AAAwC;;;;cAUxC,0BAAA,EAA4B,QAAA,CAChC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,WAAA,CAAY,SAAA"}

package/dist/fontScaling/constants.d.ts

@@ -40,9 +40,10 @@ declare const TYPE_SCALE_CURVE: Readonly<Partial<Record<TextVariant, FontScaling
  */
 declare const DEFAULT_MAX_FONT_SIZE_MULTIPLIERS: Readonly<Partial<Record<TextVariant, FontScalingCapValue>>>;
 /**
- * Default cap for control-internal text and icons (Button, Checkbox, Radio,
- * Switch, Chip, Tabs, Icon). Controls have bounded layouts, so they get the
- * supported ceiling rather than a looser per-variant cap.
+ * Default cap for control-internal text, icons, and geometry (Button,
+ * Checkbox, Radio, Switch, Chip, Tabs, Input, Select, Avatar, Pagination, and
+ * Icon). Controls have bounded layouts, so they get the supported ceiling
+ * rather than a looser per-variant cap.
  */
 declare const DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = 2;
 /**

package/dist/fontScaling/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","names":[],"sources":["../../src/fontScaling/constants.ts"],"mappings":";;;;;;;;AAGmD;;;;;AAarB;;;;cAAxB,wBAAA;;;;;;;;;;;;;AAgB0E;;cAA1E,gBAAA,EAAkB,QAAA,CAAS,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;;cAgCvD,iCAAA,EAAmC,QAAA,CACvC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;cAexB,wCAAA;AAf2C;;;;;AAeH;;;AAfG,cAyB3C,0BAAA,EAA4B,QAAA,CAChC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,WAAA,CAAY,SAAA"}
+{"version":3,"file":"constants.d.ts","names":[],"sources":["../../src/fontScaling/constants.ts"],"mappings":";;;;;;;;AAGmD;;;;;AAarB;;;;cAAxB,wBAAA;;;;;;;;;;;;;AAgB0E;;cAA1E,gBAAA,EAAkB,QAAA,CAAS,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;;cAgCvD,iCAAA,EAAmC,QAAA,CACvC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;;;;;;;cAgBxB,wCAAA;;;;;AAAwC;;;;cAUxC,0BAAA,EAA4B,QAAA,CAChC,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,WAAA,CAAY,SAAA"}

package/dist/fontScaling/constants.js

@@ -59,9 +59,10 @@ const TYPE_SCALE_CURVE = {
 */
 const DEFAULT_MAX_FONT_SIZE_MULTIPLIERS = Object.freeze(Object.fromEntries(Object.entries(TYPE_SCALE_CURVE).map(([variant, cap]) => [variant, cap === null ? 2 : Math.min(cap, 2)])));
 /**
-* Default cap for control-internal text and icons (Button, Checkbox, Radio,
-* Switch, Chip, Tabs, Icon). Controls have bounded layouts, so they get the
-* supported ceiling rather than a looser per-variant cap.
+* Default cap for control-internal text, icons, and geometry (Button,
+* Checkbox, Radio, Switch, Chip, Tabs, Input, Select, Avatar, Pagination, and
+* Icon). Controls have bounded layouts, so they get the supported ceiling
+* rather than a looser per-variant cap.
 */
 const DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = 2;
 /**

package/dist/fontScaling/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../src/fontScaling/constants.ts"],"sourcesContent":["import type { TextProps as RNTextProps } from 'react-native';\n\nimport type { TextVariant } from '../components/Text';\nimport type { FontScalingCapValue } from './types';\n\n/**\n * The largest OS font scale UDS components are designed to support.\n *\n * Yahoo's inclusive-design guidance is to solve for text scaling up to 2x, so\n * no default cap exceeds it. Apple's Accessibility Nutrition Label for Larger\n * Text is claimable at \"at least 200% or the maximum font size for the\n * system\", so a 2x ceiling still qualifies. Note that iOS offers scales beyond\n * this (up to 3.571x): with this ceiling in place the top accessibility sizes\n * render alike, and an app that wants to follow the OS further can raise or\n * remove the caps via `UDSFontScalingProvider`.\n */\nconst MAX_SUPPORTED_FONT_SCALE = 2;\n\n/**\n * How far each text style would grow if only legibility mattered, following\n * the shape of Apple's Dynamic Type ramps: the larger a style starts, the less\n * it multiplies. At iOS's largest accessibility size the system grows body\n * (17pt) by 3.12x but largeTitle (34pt) by only ~1.71x, and UDS display tiers\n * are larger than largeTitle, so they taper hardest.\n *\n * Caps are chosen by the size a style starts at rather than by which family it\n * belongs to, which is why `ui1` (24pt) matches `title3` (24pt) and `ui2`\n * (20pt) matches `title4` (20pt). `null` means \"no cap from the curve\" — those\n * are reading sizes, where legibility argues for following the OS.\n *\n * The exported defaults are this curve clamped to {@link MAX_SUPPORTED_FONT_SCALE}.\n */\nconst TYPE_SCALE_CURVE: Readonly<Partial<Record<TextVariant, FontScalingCapValue>>> = {\n  display1: 1.5,\n  display2: 1.6,\n  display3: 1.75,\n  title1: 1.8,\n  title2: 2,\n  title3: 2.2,\n  title4: 2.4,\n  headline1: 2.5,\n  ui1: 2.2,\n  ui2: 2.4,\n  body1: null,\n  label1: null,\n  label2: null,\n  label3: null,\n  label4: null,\n  caption1: null,\n  caption2: null,\n  legal1: null,\n  ui3: null,\n  ui4: null,\n  ui5: null,\n  ui6: null,\n};\n\n/**\n * Default per-variant caps on OS font scaling, applied by `Text` when no\n * explicit prop or provider config overrides them: the legibility curve in\n * {@link TYPE_SCALE_CURVE}, clamped to the 2x we support.\n *\n * Keys are base variants; `/emphasized` twins resolve to their base.\n */\nconst DEFAULT_MAX_FONT_SIZE_MULTIPLIERS: Readonly<\n  Partial<Record<TextVariant, FontScalingCapValue>>\n> = Object.freeze(\n  Object.fromEntries(\n    Object.entries(TYPE_SCALE_CURVE).map(([variant, cap]) => [\n      variant,\n      cap === null ? MAX_SUPPORTED_FONT_SCALE : Math.min(cap, MAX_SUPPORTED_FONT_SCALE),\n    ]),\n  ) as Partial<Record<TextVariant, FontScalingCapValue>>,\n);\n\n/**\n * Default cap for control-internal text and icons (Button, Checkbox, Radio,\n * Switch, Chip, Tabs, Icon). Controls have bounded layouts, so they get the\n * supported ceiling rather than a looser per-variant cap.\n */\nconst DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = MAX_SUPPORTED_FONT_SCALE;\n\n/**\n * iOS Dynamic Type curve used by each UDS typography tier. React Native uses\n * the selected system text style's curve while preserving the configured UDS\n * font size. Android ignores `dynamicTypeRamp` and continues to use its native\n * nonlinear font scaling.\n *\n * Keys are base variants; `/emphasized` twins resolve to their base.\n */\nconst DEFAULT_DYNAMIC_TYPE_RAMPS: Readonly<\n  Partial<Record<TextVariant, NonNullable<RNTextProps['dynamicTypeRamp']>>>\n> = {\n  display1: 'largeTitle',\n  display2: 'largeTitle',\n  display3: 'largeTitle',\n  title1: 'title1',\n  title2: 'title2',\n  title3: 'title3',\n  title4: 'title3',\n  headline1: 'headline',\n  body1: 'body',\n  label1: 'callout',\n  label2: 'subheadline',\n  label3: 'footnote',\n  label4: 'caption1',\n  caption1: 'caption1',\n  caption2: 'caption2',\n  legal1: 'caption2',\n  ui1: 'title3',\n  ui2: 'title3',\n  ui3: 'callout',\n  ui4: 'subheadline',\n  ui5: 'footnote',\n  ui6: 'caption2',\n};\n\nexport {\n  DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER,\n  DEFAULT_DYNAMIC_TYPE_RAMPS,\n  DEFAULT_MAX_FONT_SIZE_MULTIPLIERS,\n  MAX_SUPPORTED_FONT_SCALE,\n  TYPE_SCALE_CURVE,\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,2BAA2B;;;;;;;;;;;;;;;AAgBjC,MAAM,mBAAgF;CACpF,UAAU;CACV,UAAU;CACV,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,KAAK;CACL,KAAK;CACL,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;CACV,QAAQ;CACR,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;;;;;;;;AASD,MAAM,oCAEF,OAAO,OACT,OAAO,YACL,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,SAAS,SAAS,CACvD,SACA,QAAQ,OAAA,IAAkC,KAAK,IAAI,KAAA,EAA8B,CAClF,CAAC,CACH,CACF;;;;;;AAOD,MAAM,2CAAA;;;;;;;;;AAUN,MAAM,6BAEF;CACF,UAAU;CACV,UAAU;CACV,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;CACV,QAAQ;CACR,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../src/fontScaling/constants.ts"],"sourcesContent":["import type { TextProps as RNTextProps } from 'react-native';\n\nimport type { TextVariant } from '../components/Text';\nimport type { FontScalingCapValue } from './types';\n\n/**\n * The largest OS font scale UDS components are designed to support.\n *\n * Yahoo's inclusive-design guidance is to solve for text scaling up to 2x, so\n * no default cap exceeds it. Apple's Accessibility Nutrition Label for Larger\n * Text is claimable at \"at least 200% or the maximum font size for the\n * system\", so a 2x ceiling still qualifies. Note that iOS offers scales beyond\n * this (up to 3.571x): with this ceiling in place the top accessibility sizes\n * render alike, and an app that wants to follow the OS further can raise or\n * remove the caps via `UDSFontScalingProvider`.\n */\nconst MAX_SUPPORTED_FONT_SCALE = 2;\n\n/**\n * How far each text style would grow if only legibility mattered, following\n * the shape of Apple's Dynamic Type ramps: the larger a style starts, the less\n * it multiplies. At iOS's largest accessibility size the system grows body\n * (17pt) by 3.12x but largeTitle (34pt) by only ~1.71x, and UDS display tiers\n * are larger than largeTitle, so they taper hardest.\n *\n * Caps are chosen by the size a style starts at rather than by which family it\n * belongs to, which is why `ui1` (24pt) matches `title3` (24pt) and `ui2`\n * (20pt) matches `title4` (20pt). `null` means \"no cap from the curve\" — those\n * are reading sizes, where legibility argues for following the OS.\n *\n * The exported defaults are this curve clamped to {@link MAX_SUPPORTED_FONT_SCALE}.\n */\nconst TYPE_SCALE_CURVE: Readonly<Partial<Record<TextVariant, FontScalingCapValue>>> = {\n  display1: 1.5,\n  display2: 1.6,\n  display3: 1.75,\n  title1: 1.8,\n  title2: 2,\n  title3: 2.2,\n  title4: 2.4,\n  headline1: 2.5,\n  ui1: 2.2,\n  ui2: 2.4,\n  body1: null,\n  label1: null,\n  label2: null,\n  label3: null,\n  label4: null,\n  caption1: null,\n  caption2: null,\n  legal1: null,\n  ui3: null,\n  ui4: null,\n  ui5: null,\n  ui6: null,\n};\n\n/**\n * Default per-variant caps on OS font scaling, applied by `Text` when no\n * explicit prop or provider config overrides them: the legibility curve in\n * {@link TYPE_SCALE_CURVE}, clamped to the 2x we support.\n *\n * Keys are base variants; `/emphasized` twins resolve to their base.\n */\nconst DEFAULT_MAX_FONT_SIZE_MULTIPLIERS: Readonly<\n  Partial<Record<TextVariant, FontScalingCapValue>>\n> = Object.freeze(\n  Object.fromEntries(\n    Object.entries(TYPE_SCALE_CURVE).map(([variant, cap]) => [\n      variant,\n      cap === null ? MAX_SUPPORTED_FONT_SCALE : Math.min(cap, MAX_SUPPORTED_FONT_SCALE),\n    ]),\n  ) as Partial<Record<TextVariant, FontScalingCapValue>>,\n);\n\n/**\n * Default cap for control-internal text, icons, and geometry (Button,\n * Checkbox, Radio, Switch, Chip, Tabs, Input, Select, Avatar, Pagination, and\n * Icon). Controls have bounded layouts, so they get the supported ceiling\n * rather than a looser per-variant cap.\n */\nconst DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER = MAX_SUPPORTED_FONT_SCALE;\n\n/**\n * iOS Dynamic Type curve used by each UDS typography tier. React Native uses\n * the selected system text style's curve while preserving the configured UDS\n * font size. Android ignores `dynamicTypeRamp` and continues to use its native\n * nonlinear font scaling.\n *\n * Keys are base variants; `/emphasized` twins resolve to their base.\n */\nconst DEFAULT_DYNAMIC_TYPE_RAMPS: Readonly<\n  Partial<Record<TextVariant, NonNullable<RNTextProps['dynamicTypeRamp']>>>\n> = {\n  display1: 'largeTitle',\n  display2: 'largeTitle',\n  display3: 'largeTitle',\n  title1: 'title1',\n  title2: 'title2',\n  title3: 'title3',\n  title4: 'title3',\n  headline1: 'headline',\n  body1: 'body',\n  label1: 'callout',\n  label2: 'subheadline',\n  label3: 'footnote',\n  label4: 'caption1',\n  caption1: 'caption1',\n  caption2: 'caption2',\n  legal1: 'caption2',\n  ui1: 'title3',\n  ui2: 'title3',\n  ui3: 'callout',\n  ui4: 'subheadline',\n  ui5: 'footnote',\n  ui6: 'caption2',\n};\n\nexport {\n  DEFAULT_CONTROL_MAX_FONT_SIZE_MULTIPLIER,\n  DEFAULT_DYNAMIC_TYPE_RAMPS,\n  DEFAULT_MAX_FONT_SIZE_MULTIPLIERS,\n  MAX_SUPPORTED_FONT_SCALE,\n  TYPE_SCALE_CURVE,\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,2BAA2B;;;;;;;;;;;;;;;AAgBjC,MAAM,mBAAgF;CACpF,UAAU;CACV,UAAU;CACV,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,KAAK;CACL,KAAK;CACL,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;CACV,QAAQ;CACR,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN;;;;;;;;AASD,MAAM,oCAEF,OAAO,OACT,OAAO,YACL,OAAO,QAAQ,iBAAiB,CAAC,KAAK,CAAC,SAAS,SAAS,CACvD,SACA,QAAQ,OAAA,IAAkC,KAAK,IAAI,KAAA,EAA8B,CAClF,CAAC,CACH,CACF;;;;;;;AAQD,MAAM,2CAAA;;;;;;;;;AAUN,MAAM,6BAEF;CACF,UAAU;CACV,UAAU;CACV,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;CACV,QAAQ;CACR,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACN"}

package/dist/fontScaling/types.d.cts

@@ -36,8 +36,9 @@ interface FontScalingConfig {
   default?: FontScalingCapValue;
   /**
    * Cap for control-internal text, icons, and geometry in Button, Checkbox,
-   * Radio, Switch, Chip, and Tabs, plus standalone `Icon` glyphs and
-   * multicolor SVGs.
+   * Radio, Switch, Chip, Tabs, Input, Select, Avatar, and Pagination, plus
+   * standalone `Icon` glyphs and multicolor SVGs. Link resolves through its
+   * typography variant instead of the control cap.
    * @default 2
    */
   control?: FontScalingCapValue;

package/dist/fontScaling/types.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/fontScaling/types.ts"],"mappings":";;;;;;AAAsD;;;;KAQjD,mBAAA;AAAmB;;;;;;;;;;AAAA,UAYd,iBAAA;EAOR;;;;;;EAAA,OAAA;EAmBmB;;;;;;EAZnB,OAAA,GAAU,mBAAA;;;;;;;EAOV,OAAA,GAAU,mBAAA;;;;;EAKV,QAAA,GAAW,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;AAAA"}
+{"version":3,"file":"types.d.cts","names":[],"sources":["../../src/fontScaling/types.ts"],"mappings":";;;;;;AAAsD;;;;KAQjD,mBAAA;AAAmB;;;;;;;;;;AAAA,UAYd,iBAAA;EAOR;;;;;;EAAA,OAAA;EAoBmB;;;;;;EAbnB,OAAA,GAAU,mBAAA;;;;;;;;EAQV,OAAA,GAAU,mBAAA;;;;;EAKV,QAAA,GAAW,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;AAAA"}

package/dist/fontScaling/types.d.ts

@@ -36,8 +36,9 @@ interface FontScalingConfig {
   default?: FontScalingCapValue;
   /**
    * Cap for control-internal text, icons, and geometry in Button, Checkbox,
-   * Radio, Switch, Chip, and Tabs, plus standalone `Icon` glyphs and
-   * multicolor SVGs.
+   * Radio, Switch, Chip, Tabs, Input, Select, Avatar, and Pagination, plus
+   * standalone `Icon` glyphs and multicolor SVGs. Link resolves through its
+   * typography variant instead of the control cap.
    * @default 2
    */
   control?: FontScalingCapValue;

package/dist/fontScaling/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/fontScaling/types.ts"],"mappings":";;;;;;AAAsD;;;;KAQjD,mBAAA;AAAmB;;;;;;;;;;AAAA,UAYd,iBAAA;EAOR;;;;;;EAAA,OAAA;EAmBmB;;;;;;EAZnB,OAAA,GAAU,mBAAA;;;;;;;EAOV,OAAA,GAAU,mBAAA;;;;;EAKV,QAAA,GAAW,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/fontScaling/types.ts"],"mappings":";;;;;;AAAsD;;;;KAQjD,mBAAA;AAAmB;;;;;;;;;;AAAA,UAYd,iBAAA;EAOR;;;;;;EAAA,OAAA;EAoBmB;;;;;;EAbnB,OAAA,GAAU,mBAAA;;;;;;;;EAQV,OAAA,GAAU,mBAAA;;;;;EAKV,QAAA,GAAW,OAAA,CAAQ,MAAA,CAAO,WAAA,EAAa,mBAAA;AAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "2.24.0-beta.6",
+  "version": "2.24.0-beta.7",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"