@yahoo/uds-mobile 1.0.1 → 1.1.0-beta.1

package/dist/components/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input","Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds/tokens';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries.\n * - Filters/Settings: When users need to specify preferences.\n * - Feedback/Comments: Letting users leave reviews or comments.\n *\n * @see The {@link https://uds.build/docs/components/input Input Docs} for more info\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}
+{"version":3,"file":"Input.mjs","names":["Input","Text"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import type { UniversalInputProps } from '@yahoo/uds-types';\nimport { isFunction } from 'lodash-es';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { TextInputProps } from 'react-native';\nimport { TextInput, View } from 'react-native';\n\nimport { inputStyles } from '../../generated/styles';\nimport type { SizeProps } from '../types';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\nimport { VStack } from './VStack';\n\n/* -------------------------------------------------------------------------- */\n/*                                   Types                                    */\n/* -------------------------------------------------------------------------- */\n\ninterface InputProps\n  extends\n    Omit<UniversalInputProps<IconSlotType>, 'width'>,\n    Omit<TextInputProps, 'style' | 'editable'>,\n    Pick<SizeProps, 'width'> {\n  ref?: Ref<TextInput>;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Input Component                                */\n/* -------------------------------------------------------------------------- */\n\n/**\n * **📦 An input that allows users to enter text and collect data.**\n *\n * @description\n * An input field is a component that takes text typed into it. It can also serve\n * as a way to display a selection and trigger a dropdown menu. Inputs are interactive\n * elements that users can click, tap, or otherwise engage with to collect data.\n *\n * @example\n * ```tsx\n * import { Input } from '@yahoo/uds-mobile';\n *\n * <Input label=\"Name\" placeholder=\"Enter your name\" required />\n * ```\n *\n * @usage\n * - Forms: For collecting data like names, emails, passwords, etc.\n * - Search Bars: Allowing users to enter search queries.\n * - Filters/Settings: When users need to specify preferences.\n * - Feedback/Comments: Letting users leave reviews or comments.\n *\n * @see The {@link https://uds.build/docs/components/input Input Docs} for more info\n */\nconst Input = memo(function Input({\n  // Input props\n  label,\n  size = 'md',\n  startIcon,\n  endIcon,\n  helpText,\n  helperTextIcon,\n  hasError,\n  disabled,\n  readOnly,\n  required,\n  // Size props\n  width = '100%',\n  // TextInput props\n  defaultValue,\n  value: controlledValue,\n  onChangeText,\n  onFocus,\n  onBlur,\n  placeholder,\n  placeholderTextColor,\n  ref,\n  ...textInputProps\n}: InputProps) {\n  const generatedId = useId();\n  const uid = `uds-input-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\n  const [internalValue, setInternalValue] = useState(defaultValue ?? '');\n  const [isFocused, setIsFocused] = useState(false);\n\n  // Support both controlled and uncontrolled modes\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : internalValue;\n  const valueState = value ? 'filled' : 'empty';\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handleChangeText = useCallback(\n    (text: string) => {\n      if (!isControlled) {\n        setInternalValue(text);\n      }\n      onChangeText?.(text);\n    },\n    [isControlled, onChangeText],\n  );\n\n  const handleFocus = useCallback<NonNullable<TextInputProps['onFocus']>>(\n    (e) => {\n      setIsFocused(true);\n      onFocus?.(e);\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<NonNullable<TextInputProps['onBlur']>>(\n    (e) => {\n      setIsFocused(false);\n      onBlur?.(e);\n    },\n    [onBlur],\n  );\n\n  /* --------------------------------- Styles --------------------------------- */\n  inputStyles.useVariants({\n    size,\n    value: valueState,\n    disabled,\n    pressed: isFocused,\n    readonly: readOnly,\n    invalid: hasError,\n  });\n\n  // Get placeholder color from theme styles\n  const computedPlaceholderColor = placeholderTextColor ?? inputStyles.inputPlaceholder.color;\n\n  const rootStyle = useMemo(() => [{ width, opacity: disabled ? 0.5 : 1 }], [width, disabled]);\n\n  const inputWrapperStyle = useMemo(\n    () => [\n      inputStyles.inputWrapper,\n      { flexDirection: 'row' as const, alignItems: 'center' as const },\n    ],\n    [inputStyles.inputWrapper],\n  );\n\n  // Android-specific fixes: TextInput on Android has rendering issues with text visibility\n  // - includeFontPadding: false removes Android's extra font padding that can clip text\n  // - textAlignVertical: 'center' ensures text is vertically centered in the input\n  // - paddingVertical: 0 removes default padding that interferes with flex layout\n  const textInputStyle = useMemo(\n    () => [\n      inputStyles.input,\n      {\n        flex: 1,\n        includeFontPadding: false,\n        textAlignVertical: 'center' as const,\n        paddingVertical: 0,\n      },\n    ],\n    [inputStyles.input],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n    const content = isFunction(label) ? label() : label;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"flex-end\" spacingBottom=\"2\">\n        <Text style={inputStyles.label}>{content}</Text>\n        {required && <Text style={inputStyles.labelRequired}>*</Text>}\n      </HStack>\n    );\n  }, [label, required, inputStyles.label, inputStyles.labelRequired]);\n\n  const startIconContent = useMemo(() => {\n    if (!startIcon) {\n      return null;\n    }\n    return <IconSlot icon={startIcon} variant=\"outline\" style={inputStyles.startIcon} />;\n  }, [startIcon, inputStyles.startIcon]);\n\n  const endIconContent = useMemo(() => {\n    if (!endIcon) {\n      return null;\n    }\n    return <IconSlot icon={endIcon} variant=\"outline\" style={inputStyles.endIcon} />;\n  }, [endIcon, inputStyles.endIcon]);\n\n  const helpTextContent = useMemo(() => {\n    if (!helpText) {\n      return null;\n    }\n    const content = isFunction(helpText) ? helpText() : helpText;\n    return (\n      <HStack columnGap=\"1\" alignItems=\"center\" spacingTop=\"2\">\n        {helperTextIcon && <IconSlot icon={helperTextIcon} style={inputStyles.helperIcon} />}\n        <Text style={inputStyles.helperText}>{content}</Text>\n      </HStack>\n    );\n  }, [helpText, helperTextIcon, inputStyles.helperIcon, inputStyles.helperText]);\n\n  /* --------------------------------- Render --------------------------------- */\n  return (\n    <VStack style={rootStyle}>\n      {labelContent}\n\n      <View\n        style={inputWrapperStyle}\n        accessible\n        accessibilityRole=\"none\"\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n      >\n        {startIconContent}\n\n        <TextInput\n          ref={ref}\n          nativeID={uid}\n          value={value}\n          onChangeText={handleChangeText}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          placeholder={placeholder}\n          placeholderTextColor={computedPlaceholderColor}\n          editable={!disabled && !readOnly}\n          style={textInputStyle}\n          accessibilityLabel={typeof label === 'string' ? label : undefined}\n          accessibilityHint={typeof helpText === 'string' ? helpText : undefined}\n          accessibilityState={{ disabled }}\n          {...textInputProps}\n        />\n\n        {endIconContent}\n      </View>\n\n      {helpTextContent}\n    </VStack>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport { Input, type InputProps };\n"],"mappings":"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"}

package/dist/components/Link.d.cts

@@ -1,9 +1,8 @@
 
-import { UniversalLinkProps } from "../uds/dist/tokens/types.cjs";
-import "../uds/dist/index.cjs";
+import { UniversalLinkProps } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { TextProps as TextProps$1 } from "./Text.cjs";
-import * as react12 from "react";
+import * as react14 from "react";
 import { ReactNode, Ref } from "react";
 import { Text, TextStyle } from "react-native";
 
@@ -39,7 +38,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  *
  * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
  */
-declare const Link: react12.NamedExoticComponent<LinkProps>;
+declare const Link: react14.NamedExoticComponent<LinkProps>;
 //#endregion
 export { Link, type LinkProps };
 //# sourceMappingURL=Link.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;UAErC;EAFA,OAAA,CAAA,EAGE,WAHQ,CAAA,SAAA,CAAA;EAA2B,GAAA,CAAA,EAIvC,GAJuC,CAInC,IAJmC,CAAA;EAErC,QAAA,CAAA,EAGG,SAHH;;;;;;;AAFoC;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,OAAA,CAAA,qBAAA"}
+{"version":3,"file":"Link.d.cts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;EAArC,KAAA,CAAA,EAEA,SAFU;EAA2B,OAAA,CAAA,EAGnC,WAHmC,CAAA,SAAA,CAAA;EAErC,GAAA,CAAA,EAEF,GAFE,CAEE,IAFF,CAAA;EACE,QAAA,CAAA,EAEC,SAFD;;;;;;AAHkC;;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,OAAA,CAAA,qBAAA"}

package/dist/components/Link.d.mts

@@ -1,9 +1,8 @@
 
-import { UniversalLinkProps } from "../uds/dist/tokens/types.mjs";
-import "../uds/dist/index.mjs";
+import { UniversalLinkProps } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { TextProps as TextProps$1 } from "./Text.mjs";
-import * as react3 from "react";
+import * as react12 from "react";
 import { ReactNode, Ref } from "react";
 import { Text, TextStyle } from "react-native";
 
@@ -39,7 +38,7 @@ interface LinkProps extends UniversalLinkProps<IconSlotType> {
  *
  * @see The {@link https://uds.build/docs/components/link Link Docs} for more info
  */
-declare const Link: react3.NamedExoticComponent<LinkProps>;
+declare const Link: react12.NamedExoticComponent<LinkProps>;
 //#endregion
 export { Link, type LinkProps };
 //# sourceMappingURL=Link.d.mts.map

package/dist/components/Link.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.mts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;UAErC;EAFA,OAAA,CAAA,EAGE,WAHQ,CAAA,SAAA,CAAA;EAA2B,GAAA,CAAA,EAIvC,GAJuC,CAInC,IAJmC,CAAA;EAErC,QAAA,CAAA,EAGG,SAHH;;;;;;;AAFoC;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Link.d.mts","names":[],"sources":["../../src/components/Link.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAwBU,SAAA,SAAkB,mBAAmB;;EAArC,KAAA,CAAA,EAEA,SAFU;EAA2B,OAAA,CAAA,EAGnC,WAHmC,CAAA,SAAA,CAAA;EAErC,GAAA,CAAA,EAEF,GAFE,CAEE,IAFF,CAAA;EACE,QAAA,CAAA,EAEC,SAFD;;;;;;AAHkC;;;;;;;;;;;;;;;;;;;;cAgCxC,MAAI,OAAA,CAAA,qBAAA"}

package/dist/components/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":["noUnderline: TextStyle","Link","RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n  /** Style override */\n  style?: TextStyle;\n  onPress?: TextProps['onPress'];\n  ref?: Ref<RNText>;\n  children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @see The {@link https://uds.build/docs/components/link Link Docs} for more info\n */\nconst Link = memo(function Link({\n  children,\n  variant = 'primary',\n  textVariant,\n  alwaysUnderline = false,\n  startIcon,\n  endIcon,\n  onPress,\n  style,\n  ref,\n  ...rest\n}: LinkProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  // Must have onPress for touch events to register (RN requirement)\n  // Even without a user-provided handler, we need a function to make text touchable\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n    },\n    [onPress],\n  );\n\n  linkStyles.useVariants({\n    textStyle: textVariant,\n    variant,\n    pressed,\n  });\n\n  // Get theme as SharedValue for worklet access (zero re-renders)\n  const animatedTheme = useAnimatedTheme();\n\n  // Derive underline visibility from pressed state\n  // useDerivedValue handles the animation automatically when deps change\n  const underlineProgress = useDerivedValue(() => {\n    const targetValue = pressed || alwaysUnderline ? 1 : 0;\n    return withTiming(targetValue, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n  }, [pressed, alwaysUnderline]);\n\n  // Combined animated style for color and underline\n  const animatedTextStyle = useAnimatedStyle(() => {\n    // Access text color from theme using variant path\n    const components = animatedTheme.value.components;\n    const state = pressed ? 'pressed' : 'rest';\n    const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n    const textColor = components[textVariantPath].color;\n\n    const color = withTiming(textColor, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n\n    // Interpolate underline opacity: 0 = transparent, 1 = text color\n    const underlineColor = interpolateColor(\n      underlineProgress.value,\n      [0, 1],\n      ['transparent', textColor],\n    );\n\n    return {\n      color,\n      textDecorationColor: underlineColor,\n    };\n  });\n\n  const textStyles = useMemo(() => {\n    return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n  }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n  const startIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n  const endIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n  return (\n    <AnimatedText\n      ref={ref}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting\n      style={textStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <>\n          <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n        </>\n      )}\n      {children}\n      {endIcon && (\n        <>\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n          <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n        </>\n      )}\n    </AnimatedText>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAMA,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAM,OAAO,KAAK,SAASC,OAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAEf,gBAAgB,QAAQ,YADlC,UAAU,YAAY,UAEU;AAc9C,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAWA,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAC3B;GAKA;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC;EACM;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ;EACA,OAAO;EACP,GAAI;;GAEH,aACC,4CACE,oBAAC;IAAS,MAAM;IAAW,SAAQ;IAAU,OAAO;KAAmB,EAEvE,oBAACC;IAAO,OAAO;cAAc;KAAmB,IAC/C;GAEJ;GACA,WACC,4CAEE,oBAACA;IAAO,OAAO;cAAc;KAAmB,EAChD,oBAAC;IAAS,MAAM;IAAS,SAAQ;IAAU,OAAO;KAAiB,IAClE;;GAEQ;EAEjB;AAEF,KAAK,cAAc"}
+{"version":3,"file":"Link.mjs","names":["noUnderline: TextStyle","Link","RNText"],"sources":["../../src/components/Link.tsx"],"sourcesContent":["import type { UniversalLinkProps } from '@yahoo/uds-types';\nimport type { ReactNode, Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { GestureResponderEvent, TextStyle } from 'react-native';\nimport { Text as RNText } from 'react-native';\nimport Animated, {\n  Easing,\n  interpolateColor,\n  useAnimatedStyle,\n  useDerivedValue,\n  withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme } from 'react-native-unistyles/reanimated';\n\nimport { linkStyles } from '../../generated/styles';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport type { TextProps } from './Text';\n\nconst AnimatedText = Animated.Text;\n\n// Prevent icons from inheriting underline from parent/theme (matches web behavior)\nconst noUnderline: TextStyle = { textDecorationLine: 'none' };\n\ninterface LinkProps extends UniversalLinkProps<IconSlotType> {\n  /** Style override */\n  style?: TextStyle;\n  onPress?: TextProps['onPress'];\n  ref?: Ref<RNText>;\n  children?: ReactNode;\n}\n\n/**\n * **🔗 A navigation link component**\n *\n * @description\n * A styled link component for navigation. Rendered as Text so it can be\n * nested inline within other Text. Supports optional start/end icons.\n *\n * @example\n * ```tsx\n * import { Link } from '@yahoo/uds-mobile';\n *\n * // Standalone link\n * <Link onPress={() => navigate('/profile')}>Go to Profile</Link>\n *\n * // Inline within text\n * <Text>Read our <Link>Terms of Service</Link> and <Link>Privacy Policy</Link>.</Text>\n *\n * // With icons\n * <Link startIcon=\"AffiliateLink\">External link</Link>\n * <Link endIcon=\"ChevronRight\">Navigate forward</Link>\n * ```\n *\n * @see The {@link https://uds.build/docs/components/link Link Docs} for more info\n */\nconst Link = memo(function Link({\n  children,\n  variant = 'primary',\n  textVariant,\n  alwaysUnderline = false,\n  startIcon,\n  endIcon,\n  onPress,\n  style,\n  ref,\n  ...rest\n}: LinkProps) {\n  const [pressed, setPressed] = useState(false);\n\n  const handlePressIn = useCallback(() => {\n    setPressed(true);\n  }, []);\n\n  const handlePressOut = useCallback(() => {\n    setPressed(false);\n  }, []);\n\n  // Must have onPress for touch events to register (RN requirement)\n  // Even without a user-provided handler, we need a function to make text touchable\n  const handlePress = useCallback(\n    (event: GestureResponderEvent) => {\n      onPress?.(event);\n    },\n    [onPress],\n  );\n\n  linkStyles.useVariants({\n    textStyle: textVariant,\n    variant,\n    pressed,\n  });\n\n  // Get theme as SharedValue for worklet access (zero re-renders)\n  const animatedTheme = useAnimatedTheme();\n\n  // Derive underline visibility from pressed state\n  // useDerivedValue handles the animation automatically when deps change\n  const underlineProgress = useDerivedValue(() => {\n    const targetValue = pressed || alwaysUnderline ? 1 : 0;\n    return withTiming(targetValue, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n  }, [pressed, alwaysUnderline]);\n\n  // Combined animated style for color and underline\n  const animatedTextStyle = useAnimatedStyle(() => {\n    // Access text color from theme using variant path\n    const components = animatedTheme.value.components;\n    const state = pressed ? 'pressed' : 'rest';\n    const textVariantPath = `link/variant/${variant}/rootText/${state}` as const;\n    const textColor = components[textVariantPath].color;\n\n    const color = withTiming(textColor, {\n      duration: 150,\n      easing: Easing.bezier(0, 0, 0.2, 1),\n    });\n\n    // Interpolate underline opacity: 0 = transparent, 1 = text color\n    const underlineColor = interpolateColor(\n      underlineProgress.value,\n      [0, 1],\n      ['transparent', textColor],\n    );\n\n    return {\n      color,\n      textDecorationColor: underlineColor,\n    };\n  });\n\n  const textStyles = useMemo(() => {\n    return [linkStyles.root, linkStyles.text, animatedTextStyle, style];\n  }, [linkStyles.text, animatedTextStyle, style, linkStyles.root]);\n\n  const startIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconStart, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconStart, noUnderline]);\n\n  const endIconStyles = useMemo(() => {\n    return [linkStyles.icon, linkStyles.iconEnd, noUnderline];\n  }, [linkStyles.icon, linkStyles.iconEnd, noUnderline]);\n\n  return (\n    <AnimatedText\n      ref={ref}\n      onPress={handlePress}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      suppressHighlighting\n      style={textStyles}\n      {...rest}\n    >\n      {startIcon && (\n        <>\n          <IconSlot icon={startIcon} variant=\"outline\" style={startIconStyles} />\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n        </>\n      )}\n      {children}\n      {endIcon && (\n        <>\n          {/* TODO: need to add hairline space character to icon font so we can have space between icon and text https://hybridheroes.de/blog/2022-11-17-text-with-inline-icons-in-react-native/ */}\n          <RNText style={noUnderline}>{' \\u200A'}</RNText>\n          <IconSlot icon={endIcon} variant=\"outline\" style={endIconStyles} />\n        </>\n      )}\n    </AnimatedText>\n  );\n});\n\nLink.displayName = 'Link';\n\nexport { Link, type LinkProps };\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,eAAe,SAAS;AAG9B,MAAMA,cAAyB,EAAE,oBAAoB,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;AAkC7D,MAAM,OAAO,KAAK,SAASC,OAAK,EAC9B,UACA,UAAU,WACV,aACA,kBAAkB,OAClB,WACA,SACA,SACA,OACA,KACA,GAAG,QACS;CACZ,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,gBAAgB,kBAAkB;AACtC,aAAW,KAAK;IACf,EAAE,CAAC;CAEN,MAAM,iBAAiB,kBAAkB;AACvC,aAAW,MAAM;IAChB,EAAE,CAAC;CAIN,MAAM,cAAc,aACjB,UAAiC;AAChC,YAAU,MAAM;IAElB,CAAC,QAAQ,CACV;AAED,YAAW,YAAY;EACrB,WAAW;EACX;EACA;EACD,CAAC;CAGF,MAAM,gBAAgB,kBAAkB;CAIxC,MAAM,oBAAoB,sBAAsB;AAE9C,SAAO,WADa,WAAW,kBAAkB,IAAI,GACtB;GAC7B,UAAU;GACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;GACpC,CAAC;IACD,CAAC,SAAS,gBAAgB,CAAC;CAG9B,MAAM,oBAAoB,uBAAuB;EAK/C,MAAM,YAHa,cAAc,MAAM,WAEf,gBAAgB,QAAQ,YADlC,UAAU,YAAY,UAEU;AAc9C,SAAO;GACL,OAbY,WAAW,WAAW;IAClC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GAWA,qBARqB,iBACrB,kBAAkB,OAClB,CAAC,GAAG,EAAE,EACN,CAAC,eAAe,UAAU,CAC3B;GAKA;GACD;CAEF,MAAM,aAAa,cAAc;AAC/B,SAAO;GAAC,WAAW;GAAM,WAAW;GAAM;GAAmB;GAAM;IAClE;EAAC,WAAW;EAAM;EAAmB;EAAO,WAAW;EAAK,CAAC;CAEhE,MAAM,kBAAkB,cAAc;AACpC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAW;GAAY;IAC1D;EAAC,WAAW;EAAM,WAAW;EAAW;EAAY,CAAC;CAExD,MAAM,gBAAgB,cAAc;AAClC,SAAO;GAAC,WAAW;GAAM,WAAW;GAAS;GAAY;IACxD;EAAC,WAAW;EAAM,WAAW;EAAS;EAAY,CAAC;AAEtD,QACE,qBAAC;EACM;EACL,SAAS;EACT,WAAW;EACX,YAAY;EACZ;EACA,OAAO;EACP,GAAI;;GAEH,aACC,4CACE,oBAAC;IAAS,MAAM;IAAW,SAAQ;IAAU,OAAO;KAAmB,EAEvE,oBAACC;IAAO,OAAO;cAAc;KAAmB,IAC/C;GAEJ;GACA,WACC,4CAEE,oBAACA;IAAO,OAAO;cAAc;KAAmB,EAChD,oBAAC;IAAS,MAAM;IAAS,SAAQ;IAAU,OAAO;KAAiB,IAClE;;GAEQ;EAEjB;AAEF,KAAK,cAAc"}

package/dist/components/Pressable.d.cts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.cjs";
-import * as react13 from "react";
+import * as react12 from "react";
 import { Ref } from "react";
 import { PressableProps as PressableProps$1, View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -83,8 +83,8 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
  */
-declare const Pressable: react13.NamedExoticComponent<PressableProps>;
-declare const AnimatedPressable: react13.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
+declare const Pressable: react12.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react12.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
 //#endregion
 export { AnimatedPressable, Pressable, type PressableProps };
 //# sourceMappingURL=Pressable.d.cts.map

package/dist/components/Pressable.d.mts

@@ -1,6 +1,6 @@
 
 import { SizeProps } from "../types.mjs";
-import * as react6 from "react";
+import * as react13 from "react";
 import { Ref } from "react";
 import { PressableProps as PressableProps$1, View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -83,8 +83,8 @@ interface PressableProps extends PressableProps$1, SizeProps {
  *
  * @see The {@link https://uds.build/docs/components/pressable Pressable Docs} for more info
  */
-declare const Pressable: react6.NamedExoticComponent<PressableProps>;
-declare const AnimatedPressable: react6.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
+declare const Pressable: react13.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react13.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
 //#endregion
 export { AnimatedPressable, Pressable, type PressableProps };
 //# sourceMappingURL=Pressable.d.mts.map

package/dist/components/Pressable.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.d.mts","names":[],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,kBAAkB;QAC3C,IAAI;oBAEQ;iBAEH;EALP,oBAAe,CAAA,EAMA,UANA,CAAA,sBAAA,CAAA;EACb,kBAAA,CAAA,EAMW,UANX,CAAA,oBAAA,CAAA;EAAJ,uBAAA,CAAA,EAOoB,UAPpB,CAAA,yBAAA,CAAA;EAEY,qBAAA,CAAA,EAMM,UANN,CAAA,uBAAA,CAAA;EAEH,WAAA,CAAA,EAKD,UALC,CAAA,aAAA,CAAA;EACQ,gBAAA,CAAA,EAKJ,UALI,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAKJ,UALI,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAKT,UALS,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAKJ,UALI,CAAA,mBAAA,CAAA;EACV,WAAA,CAAA,EAKA,UALA,CAAA,aAAA,CAAA;EACK,mBAAA,CAAA,EAKG,UALH,CAAA,qBAAA,CAAA;EACF,qBAAA,CAAA,EAKO,UALP,CAAA,uBAAA,CAAA;EACA,gBAAA,CAAA,EAKE,UALF,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAKH,UALG,CAAA,gBAAA,CAAA;EACN,cAAA,CAAA,EAKG,UALH,CAAA,gBAAA,CAAA;EACQ,iBAAA,CAAA,EAKF,UALE,CAAA,mBAAA,CAAA;EACE,YAAA,CAAA,EAMT,UANS,CAAA,cAAA,CAAA;EACL,UAAA,CAAA,EAMN,UANM,CAAA,YAAA,CAAA;EACF,SAAA,CAAA,EAML,UANK,CAAA,WAAA,CAAA;EACA,IAAA,CAAA,EAMV,UANU,CAAA,MAAA,CAAA;EACG,aAAA,CAAA,EAMJ,UANI,CAAA,eAAA,CAAA;EAEL,QAAA,CAAA,EAKJ,UALI,CAAA,UAAA,CAAA;EACF,UAAA,CAAA,EAKA,UALA,CAAA,YAAA,CAAA;EACD,QAAA,CAAA,EAKD,UALC,CAAA,UAAA,CAAA;EACL,cAAA,CAAA,EAKU,UALV,CAAA,gBAAA,CAAA;EACS,OAAA,CAAA,EAMN,UANM,CAAA,SAAA,CAAA;EACL,QAAA,CAAA,EAMA,UANA,CAAA,UAAA,CAAA;EACE,OAAA,CAAA,EAOH,UAPG,CAAA,SAAA,CAAA;EACF,iBAAA,CAAA,EAOS,UAPT,CAAA,mBAAA,CAAA;EACM,eAAA,CAAA,EAOC,UAPD,CAAA,iBAAA,CAAA;EAEP,aAAA,CAAA,EAMM,UANN,CAAA,eAAA,CAAA;EACC,UAAA,CAAA,EAME,UANF,CAAA,YAAA,CAAA;EAED,YAAA,CAAA,EAKK,UALL,CAAA,cAAA,CAAA;EACU,UAAA,CAAA,EAKP,UALO,CAAA,YAAA,CAAA;EACF,MAAA,CAAA,EAMT,UANS,CAAA,QAAA,CAAA;EACF,cAAA,CAAA,EAMC,UAND,CAAA,gBAAA,CAAA;EACH,gBAAA,CAAA,EAMM,UANN,CAAA,kBAAA,CAAA;EACE,YAAA,CAAA,EAMA,UANA,CAAA,cAAA,CAAA;EACF,SAAA,CAAA,EAMD,UANC,CAAA,WAAA,CAAA;EAEJ,WAAA,CAAA,EAKK,UALL,CAAA,aAAA,CAAA;EACQ,SAAA,CAAA,EAKL,UALK,CAAA,WAAA,CAAA;EACE,SAAA,CAAA,EAMP,UANO,CAAA,WAAA,CAAA;EACJ,MAAA,CAAA,EAMN,UANM,CAAA,QAAA,CAAA;EACH,OAAA,CAAA,EAAA,MAAA;;;;;;;;AAhD8C;AAqF7C;;;;;;;;;;;;;;;;;;;;cAAT,WAAS,MAAA,CAAA,qBAAA;cAoJT,mBAAiB,MAAA,CAAA,kBAAA,wBAAA,CAAA,cAAA"}
+{"version":3,"file":"Pressable.d.mts","names":[],"sources":["../../src/components/Pressable.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAgBU,cAAA,SAAuB,kBAAkB;QAC3C,IAAI;oBAEQ;iBAEH;EALP,oBAAe,CAAA,EAMA,UANA,CAAA,sBAAA,CAAA;EACb,kBAAA,CAAA,EAMW,UANX,CAAA,oBAAA,CAAA;EAAJ,uBAAA,CAAA,EAOoB,UAPpB,CAAA,yBAAA,CAAA;EAEY,qBAAA,CAAA,EAMM,UANN,CAAA,uBAAA,CAAA;EAEH,WAAA,CAAA,EAKD,UALC,CAAA,aAAA,CAAA;EACQ,gBAAA,CAAA,EAKJ,UALI,CAAA,kBAAA,CAAA;EACF,cAAA,CAAA,EAKJ,UALI,CAAA,gBAAA,CAAA;EACK,cAAA,CAAA,EAKT,UALS,CAAA,gBAAA,CAAA;EACF,iBAAA,CAAA,EAKJ,UALI,CAAA,mBAAA,CAAA;EACV,WAAA,CAAA,EAKA,UALA,CAAA,aAAA,CAAA;EACK,mBAAA,CAAA,EAKG,UALH,CAAA,qBAAA,CAAA;EACF,qBAAA,CAAA,EAKO,UALP,CAAA,uBAAA,CAAA;EACA,gBAAA,CAAA,EAKE,UALF,CAAA,kBAAA,CAAA;EACG,cAAA,CAAA,EAKH,UALG,CAAA,gBAAA,CAAA;EACN,cAAA,CAAA,EAKG,UALH,CAAA,gBAAA,CAAA;EACQ,iBAAA,CAAA,EAKF,UALE,CAAA,mBAAA,CAAA;EACE,YAAA,CAAA,EAMT,UANS,CAAA,cAAA,CAAA;EACL,UAAA,CAAA,EAMN,UANM,CAAA,YAAA,CAAA;EACF,SAAA,CAAA,EAML,UANK,CAAA,WAAA,CAAA;EACA,IAAA,CAAA,EAMV,UANU,CAAA,MAAA,CAAA;EACG,aAAA,CAAA,EAMJ,UANI,CAAA,eAAA,CAAA;EAEL,QAAA,CAAA,EAKJ,UALI,CAAA,UAAA,CAAA;EACF,UAAA,CAAA,EAKA,UALA,CAAA,YAAA,CAAA;EACD,QAAA,CAAA,EAKD,UALC,CAAA,UAAA,CAAA;EACL,cAAA,CAAA,EAKU,UALV,CAAA,gBAAA,CAAA;EACS,OAAA,CAAA,EAMN,UANM,CAAA,SAAA,CAAA;EACL,QAAA,CAAA,EAMA,UANA,CAAA,UAAA,CAAA;EACE,OAAA,CAAA,EAOH,UAPG,CAAA,SAAA,CAAA;EACF,iBAAA,CAAA,EAOS,UAPT,CAAA,mBAAA,CAAA;EACM,eAAA,CAAA,EAOC,UAPD,CAAA,iBAAA,CAAA;EAEP,aAAA,CAAA,EAMM,UANN,CAAA,eAAA,CAAA;EACC,UAAA,CAAA,EAME,UANF,CAAA,YAAA,CAAA;EAED,YAAA,CAAA,EAKK,UALL,CAAA,cAAA,CAAA;EACU,UAAA,CAAA,EAKP,UALO,CAAA,YAAA,CAAA;EACF,MAAA,CAAA,EAMT,UANS,CAAA,QAAA,CAAA;EACF,cAAA,CAAA,EAMC,UAND,CAAA,gBAAA,CAAA;EACH,gBAAA,CAAA,EAMM,UANN,CAAA,kBAAA,CAAA;EACE,YAAA,CAAA,EAMA,UANA,CAAA,cAAA,CAAA;EACF,SAAA,CAAA,EAMD,UANC,CAAA,WAAA,CAAA;EAEJ,WAAA,CAAA,EAKK,UALL,CAAA,aAAA,CAAA;EACQ,SAAA,CAAA,EAKL,UALK,CAAA,WAAA,CAAA;EACE,SAAA,CAAA,EAMP,UANO,CAAA,WAAA,CAAA;EACJ,MAAA,CAAA,EAMN,UANM,CAAA,QAAA,CAAA;EACH,OAAA,CAAA,EAAA,MAAA;;;;;;;;AAhD8C;AAqF7C;;;;;;;;;;;;;;;;;;;;cAAT,WAAS,OAAA,CAAA,qBAAA;cAoJT,mBAAiB,OAAA,CAAA,kBAAA,wBAAA,CAAA,cAAA"}

package/dist/components/Radio.cjs

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
-const require_motion$1 = require('../motion.cjs');
+const require_index = require('../motion-tokens/dist/index.cjs');
+const require_motion = require('../motion.cjs');
 const require_components_Text = require('./Text.cjs');
 const require_components_HStack = require('./HStack.cjs');
 const require_components_Pressable = require('./Pressable.cjs');
@@ -50,8 +50,8 @@ const Radio = (0, react.memo)(function Radio$1({ label, labelPosition = "start",
 		return checked ? "checked" : "unchecked";
 	}, [checked]);
 	const shouldAnimate = !reduceMotion;
-	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_motion.SCALE_EFFECTS.down : require_motion.SCALE_EFFECTS.none, require_motion$1.BUTTON_SPRING_CONFIG) : require_motion.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
-	const circleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(checked ? 1 : 0, require_motion$1.BUTTON_SPRING_CONFIG) : checked ? 1 : 0, [checked, shouldAnimate]);
+	const scaleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(pressed ? require_index.SCALE_EFFECTS.down : require_index.SCALE_EFFECTS.none, require_motion.BUTTON_SPRING_CONFIG) : require_index.SCALE_EFFECTS.none, [pressed, shouldAnimate]);
+	const circleProgress = (0, react_native_reanimated.useDerivedValue)(() => shouldAnimate ? (0, react_native_reanimated.withSpring)(checked ? 1 : 0, require_motion.BUTTON_SPRING_CONFIG) : checked ? 1 : 0, [checked, shouldAnimate]);
 	const radioAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({ transform: [{ scale: scaleProgress.value }] }));
 	const circleAnimatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
 		opacity: (0, react_native_reanimated.interpolate)(circleProgress.value, [0, 1], [0, 1]),

package/dist/components/Radio.d.cts

@@ -1,6 +1,6 @@
 
-import { UniversalRadioProps } from "../uds/dist/tokens/types.cjs";
-import * as react16 from "react";
+import { UniversalRadioProps } from "../types/dist/index.cjs";
+import * as react19 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -40,7 +40,7 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  *
  * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
  */
-declare const Radio: react16.NamedExoticComponent<RadioProps>;
+declare const Radio: react19.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.cts.map

package/dist/components/Radio.d.mts

@@ -1,6 +1,6 @@
 
-import { UniversalRadioProps } from "../uds/dist/tokens/types.mjs";
-import * as react8 from "react";
+import { UniversalRadioProps } from "../types/dist/index.mjs";
+import * as react17 from "react";
 import { Ref } from "react";
 import { View, ViewProps } from "react-native";
 
@@ -40,7 +40,7 @@ interface RadioProps extends Omit<ViewProps, 'style'>, UniversalRadioProps {
  *
  * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info
  */
-declare const Radio: react8.NamedExoticComponent<RadioProps>;
+declare const Radio: react17.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.mts.map

package/dist/components/Radio.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,KAAK,qBAAqB;QAC/C,IAAI;;EADF,cAAW,CAAA,EAAA,OAAA;EAAa;EACtB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADqB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAmB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpE,OAAK,MAAA,CAAA,qBAAA"}
+{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../src/components/Radio.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAwBU,UAAA,SAAmB,KAAK,qBAAqB;QAC/C,IAAI;;EADF,cAAW,CAAA,EAAA,OAAA;EAAa;EACtB,QAAA,CAAA,EAAA,OAAA;EAAJ;EADqB,QAAA,CAAA,EAAA,OAAA;EAA0B;EAAmB,QAAA,CAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,GAAA,IAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;cAoDpE,OAAK,OAAA,CAAA,qBAAA"}

package/dist/components/Radio.mjs

@@ -1,5 +1,5 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
-import { SCALE_EFFECTS } from "../uds/dist/tokens/configs/motion.mjs";
+import { SCALE_EFFECTS } from "../motion-tokens/dist/index.mjs";
 import { BUTTON_SPRING_CONFIG } from "../motion.mjs";
 import { Text } from "./Text.mjs";
 import { HStack } from "./HStack.mjs";

package/dist/components/Radio.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.mjs","names":["VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant>","Radio","valueState: RadioValueState","styleVariant: RadioStyleVariant"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\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?: 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  /** 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 * @componentType Client 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 * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\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 * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info\n */\nconst Radio = memo(function Radio({\n  // Radio props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\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 = isControlled ? checkedProp : internalChecked;\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  // Circle visibility animation (for the inner dot)\n  // When reduceMotion is true, still show/hide the circle but without animation\n  const circleProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0),\n    [checked, shouldAnimate],\n  );\n\n  const radioAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const circleAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(circleProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\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 rootStyle = useMemo(\n    () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [radioStyles.root, disabled],\n  );\n\n  const radioBoxStyle = useMemo(\n    () => [\n      radioStyles.radio,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ],\n    [radioStyles.radio, radioAnimatedStyle],\n  );\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: INNER_CIRCLE_SIZE,\n        height: INNER_CIRCLE_SIZE,\n        borderRadius: 9999,\n      },\n      circleAnimatedStyle,\n    ],\n    [radioStyles.radioCircle, circleAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, 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}>\n        <Animated.View style={circleStyle} />\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}
+{"version":3,"file":"Radio.mjs","names":["VARIANT_ERROR_MAP: Record<RadioVariant, RadioStyleVariant>","Radio","valueState: RadioValueState","styleVariant: RadioStyleVariant"],"sources":["../../src/components/Radio.tsx"],"sourcesContent":["import type { RadioVariant, UniversalRadioProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { isValidElement, memo, useCallback, useId, useMemo, useState } from 'react';\nimport type { View, ViewProps } from 'react-native';\nimport Animated, {\n  interpolate,\n  useAnimatedStyle,\n  useDerivedValue,\n  withSpring,\n} from 'react-native-reanimated';\n\nimport { radioStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport { HStack } from './HStack';\nimport { Pressable } from './Pressable';\nimport { Text } from './Text';\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?: 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  /** 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 * @componentType Client 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 * @example\n * ```tsx\n * import { Radio } from '@yahoo/uds-mobile';\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 * @see The {@link https://uds.build/docs/components/radio Radio Docs} for more info\n */\nconst Radio = memo(function Radio({\n  // Radio props\n  label,\n  labelPosition = 'start',\n  variant: variantProp = 'primary',\n  size = 'md',\n  checked: checkedProp,\n  hasError,\n  reduceMotion,\n  // Native props\n  defaultChecked,\n  disabled,\n  required,\n  onChange,\n  ref,\n  ...viewProps\n}: RadioProps) {\n  const generatedId = useId();\n  const uid = `uds-radio-${generatedId}`;\n\n  /* --------------------------------- State ---------------------------------- */\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 = isControlled ? checkedProp : internalChecked;\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  // Circle visibility animation (for the inner dot)\n  // When reduceMotion is true, still show/hide the circle but without animation\n  const circleProgress = useDerivedValue(\n    () => (shouldAnimate ? withSpring(checked ? 1 : 0, BUTTON_SPRING_CONFIG) : checked ? 1 : 0),\n    [checked, shouldAnimate],\n  );\n\n  const radioAnimatedStyle = useAnimatedStyle(() => ({\n    transform: [{ scale: scaleProgress.value }],\n  }));\n\n  const circleAnimatedStyle = useAnimatedStyle(() => ({\n    opacity: interpolate(circleProgress.value, [0, 1], [0, 1]),\n    transform: [{ scale: interpolate(circleProgress.value, [0, 1], [0.5, 1]) }],\n  }));\n\n  /* -------------------------------- Handlers -------------------------------- */\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newChecked = !checked;\n\n    if (!isControlled) {\n      setInternalChecked(newChecked);\n    }\n\n    onChange?.(newChecked);\n  }, [disabled, checked, isControlled, onChange]);\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 rootStyle = useMemo(\n    () => [radioStyles.root, { opacity: disabled ? 0.5 : 1 }],\n    [radioStyles.root, disabled],\n  );\n\n  const radioBoxStyle = useMemo(\n    () => [\n      radioStyles.radio,\n      {\n        alignItems: 'center' as const,\n        justifyContent: 'center' as const,\n        borderRadius: 9999,\n      },\n      radioAnimatedStyle,\n    ],\n    [radioStyles.radio, radioAnimatedStyle],\n  );\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: INNER_CIRCLE_SIZE,\n        height: INNER_CIRCLE_SIZE,\n        borderRadius: 9999,\n      },\n      circleAnimatedStyle,\n    ],\n    [radioStyles.radioCircle, circleAnimatedStyle],\n  );\n\n  /* ---------------------------- Render Helpers ------------------------------ */\n  const labelContent = useMemo(() => {\n    if (!label) {\n      return null;\n    }\n\n    const content =\n      typeof label === 'function' ? label() : isValidElement(label) ? label : String(label);\n\n    const textContent =\n      typeof content === 'string' ? <Text style={radioStyles.text}>{content}</Text> : content;\n\n    if (required) {\n      return (\n        <HStack columnGap=\"1\" alignItems=\"flex-start\">\n          {textContent}\n          <Text style={radioStyles.text}>*</Text>\n        </HStack>\n      );\n    }\n\n    return textContent;\n  }, [label, required, 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}>\n        <Animated.View style={circleStyle} />\n      </Animated.View>\n\n      {labelContent}\n    </Pressable>\n  );\n});\n\nRadio.displayName = 'Radio';\n\nexport { Radio, type RadioProps };\n"],"mappings":"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"}

package/dist/components/Screen.d.cts

@@ -1,6 +1,6 @@
 
 import { HStackProps } from "./HStack.cjs";
-import * as react15 from "react";
+import * as react18 from "react";
 import { ReactNode, Ref } from "react";
 import { ScrollView, ScrollViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -47,7 +47,7 @@ interface ScreenProps extends ScrollViewProps {
  *
  * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
  */
-declare const Screen: react15.NamedExoticComponent<ScreenProps>;
+declare const Screen: react18.NamedExoticComponent<ScreenProps>;
 //#endregion
 export { Screen, type ScreenProps };
 //# sourceMappingURL=Screen.d.cts.map

package/dist/components/Screen.d.mts

@@ -1,6 +1,6 @@
 
 import { HStackProps } from "./HStack.mjs";
-import * as react15 from "react";
+import * as react19 from "react";
 import { ReactNode, Ref } from "react";
 import { ScrollView, ScrollViewProps } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -47,7 +47,7 @@ interface ScreenProps extends ScrollViewProps {
  *
  * @see The {@link https://uds.build/docs/components/screen Screen Docs} for more info
  */
-declare const Screen: react15.NamedExoticComponent<ScreenProps>;
+declare const Screen: react19.NamedExoticComponent<ScreenProps>;
 //#endregion
 export { Screen, type ScreenProps };
 //# sourceMappingURL=Screen.d.mts.map

package/dist/components/Switch.d.cts

@@ -1,7 +1,7 @@
 
-import { UniversalSwitchProps } from "../uds/dist/tokens/types.cjs";
+import { UniversalSwitchProps } from "../types/dist/index.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
-import * as react17 from "react";
+import * as react15 from "react";
 import { Ref } from "react";
 import { AccessibilityProps, View } from "react-native";
 
@@ -36,7 +36,7 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  *
  * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
  */
-declare const Switch: react17.NamedExoticComponent<SwitchProps>;
+declare const Switch: react15.NamedExoticComponent<SwitchProps>;
 //#endregion
 export { Switch, type SwitchProps };
 //# sourceMappingURL=Switch.d.cts.map

package/dist/components/Switch.d.mts

@@ -1,7 +1,7 @@
 
-import { UniversalSwitchProps } from "../uds/dist/tokens/types.mjs";
+import { UniversalSwitchProps } from "../types/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
-import * as react10 from "react";
+import * as react18 from "react";
 import { Ref } from "react";
 import { AccessibilityProps, View } from "react-native";
 
@@ -36,7 +36,7 @@ interface SwitchProps extends UniversalSwitchProps<IconSlotType> {
  *
  * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info
  */
-declare const Switch: react10.NamedExoticComponent<SwitchProps>;
+declare const Switch: react18.NamedExoticComponent<SwitchProps>;
 //#endregion
 export { Switch, type SwitchProps };
 //# sourceMappingURL=Switch.d.mts.map

package/dist/components/Switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","names":["HANDLE_TRAVEL: Record<SwitchSize, number>","Switch","rootStyle: StyleProp<ViewStyle>","trackStyle: StyleProp<ViewStyle>","handleStyle: StyleProp<ViewStyle>","Text"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      style={rootStyle}\n    >\n      {labelPosition === 'end' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'start' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}
+{"version":3,"file":"Switch.mjs","names":["HANDLE_TRAVEL: Record<SwitchSize, number>","Switch","rootStyle: StyleProp<ViewStyle>","trackStyle: StyleProp<ViewStyle>","handleStyle: StyleProp<ViewStyle>","Text"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import type { SwitchSize, UniversalSwitchProps } from '@yahoo/uds-types';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport type { AccessibilityProps, StyleProp, View, ViewStyle } from 'react-native';\nimport { AccessibilityInfo, Pressable } from 'react-native';\nimport Animated, { useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';\nimport { StyleSheet } from 'react-native-unistyles';\nimport { useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { switchStyles } from '../../generated/styles';\nimport { HStack } from './HStack';\nimport type { IconSlotType } from './IconSlot';\nimport { IconSlot } from './IconSlot';\nimport { Text } from './Text';\n\ninterface SwitchProps extends UniversalSwitchProps<IconSlotType> {\n  /** Ref to the underlying View */\n  ref?: Ref<View>;\n  /** Callback when the switch value changes */\n  onChange?: (value: boolean) => void;\n  /** Whether the switch is disabled */\n  disabled?: boolean;\n  /** Whether the switch is required (shows asterisk with label) */\n  required?: boolean;\n  /** Accessibility hint describing what happens when activated */\n  accessibilityHint?: AccessibilityProps['accessibilityHint'];\n}\n\nconst HANDLE_TRAVEL: Record<SwitchSize, number> = {\n  md: 20,\n  sm: 12,\n};\n\nconst ANIMATION_DURATION = 120;\n\n/**\n * **Switch component for toggling options**\n *\n * @description\n * A switch (also called a toggle) is a binary on/off input control.\n * It allows users to pick between two clearly opposite choices.\n *\n * @example\n * ```tsx\n * import { Switch } from '@yahoo/uds-mobile';\n *\n * <Switch label=\"Notifications\" />\n * <Switch isOn={enabled} onChange={setEnabled} label=\"Dark mode\" />\n * <Switch onIcon=\"Check\" offIcon=\"Cross\" label=\"Sync\" />\n * ```\n *\n * @see The {@link https://uds.build/docs/components/switch Switch Docs} for more info\n */\nconst Switch = memo(function Switch({\n  isOn: isOnProp,\n  defaultIsOn = false,\n  onChange,\n  label,\n  labelPosition = 'start',\n  size = 'md',\n  onIcon,\n  offIcon,\n  disabled = false,\n  required,\n  accessibilityHint,\n  reduceMotion = false,\n  ref,\n}: SwitchProps) {\n  const isControlled = isOnProp !== undefined;\n  const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);\n  const isOn = isControlled ? isOnProp : internalIsOn;\n\n  // Check system reduced motion preference\n  useEffect(() => {\n    const checkReducedMotion = async () => {\n      const isReduceMotionEnabled = await AccessibilityInfo.isReduceMotionEnabled();\n      setPrefersReducedMotion(isReduceMotionEnabled);\n    };\n    checkReducedMotion();\n\n    const subscription = AccessibilityInfo.addEventListener(\n      'reduceMotionChanged',\n      setPrefersReducedMotion,\n    );\n    return () => subscription.remove();\n  }, []);\n\n  const shouldReduceMotion = reduceMotion || prefersReducedMotion;\n  const animationDuration = shouldReduceMotion ? 0 : ANIMATION_DURATION;\n\n  const progress = useDerivedValue(\n    () => withTiming(isOn ? 1 : 0, { duration: animationDuration }),\n    [isOn, animationDuration],\n  );\n\n  const travelDistance = HANDLE_TRAVEL[size];\n\n  const handlePress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    const newValue = !isOn;\n\n    if (!isControlled) {\n      setInternalIsOn(newValue);\n    }\n\n    onChange?.(newValue);\n  }, [disabled, isOn, isControlled, onChange]);\n\n  switchStyles.useVariants({\n    size,\n    variant: isOn ? 'on' : 'off',\n  });\n\n  // Get animated track color from design tokens (changes when variant changes)\n  const trackBackgroundColor = useAnimatedVariantColor(switchStyles.switch, 'backgroundColor');\n\n  const animatedTrackStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      backgroundColor: withTiming(trackBackgroundColor.value, { duration: animationDuration }),\n    };\n  });\n\n  const animatedHandleStyle = useAnimatedStyle(() => {\n    'worklet';\n    return {\n      transform: [{ translateX: progress.value * travelDistance }],\n    };\n  });\n\n  const rootStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.root, switchStaticStyles.root({ disabled })],\n    [switchStyles.root, disabled],\n  );\n\n  const trackStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.switch, switchStaticStyles.track, animatedTrackStyle],\n    [switchStyles.switch, animatedTrackStyle],\n  );\n\n  const handleStyle: StyleProp<ViewStyle> = useMemo(\n    () => [switchStyles.handle, switchStaticStyles.handle, animatedHandleStyle],\n    [switchStyles.handle, animatedHandleStyle],\n  );\n\n  const accessibilityLabel = typeof label === 'string' ? label : undefined;\n  const resolvedAccessibilityHint = accessibilityHint ?? 'Double tap to toggle';\n\n  const resolvedLabel = typeof label === 'function' ? label() : label;\n  const labelContent = resolvedLabel && (\n    <HStack gap=\"2\" alignItems=\"center\">\n      <Text style={switchStyles.text}>{resolvedLabel}</Text>\n      {required && <Text color=\"alert\">*</Text>}\n    </HStack>\n  );\n\n  const a11yValue = useMemo(() => ({ text: isOn ? 'On' : 'Off' }), [isOn]);\n\n  return (\n    <Pressable\n      ref={ref}\n      onPress={handlePress}\n      disabled={disabled}\n      accessible\n      accessibilityRole=\"switch\"\n      accessibilityState={{ checked: isOn, disabled }}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={resolvedAccessibilityHint}\n      accessibilityValue={a11yValue}\n      style={rootStyle}\n    >\n      {labelPosition === 'end' && labelContent}\n\n      <Animated.View style={trackStyle} importantForAccessibility=\"no-hide-descendants\">\n        <Animated.View style={handleStyle}>\n          {onIcon && isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={onIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n          {offIcon && !isOn && (\n            <Animated.View style={switchStaticStyles.iconContainer}>\n              <IconSlot icon={offIcon} variant=\"fill\" style={switchStyles.handleIcon} />\n            </Animated.View>\n          )}\n        </Animated.View>\n      </Animated.View>\n\n      {labelPosition === 'start' && labelContent}\n    </Pressable>\n  );\n});\n\nSwitch.displayName = 'Switch';\n\nconst switchStaticStyles = StyleSheet.create((theme) => ({\n  handle: {\n    borderRadius: theme.borderRadius.full,\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  iconContainer: {\n    position: 'absolute',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  track: {\n    justifyContent: 'center',\n    borderRadius: theme.borderRadius.full,\n  },\n  root: ({ disabled }: { disabled: boolean }) => ({\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    opacity: disabled ? 0.5 : 1,\n  }),\n}));\n\nexport { Switch, type SwitchProps };\n"],"mappings":"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"}

package/dist/components/Text.d.cts

@@ -1,5 +1,5 @@
 
-import * as react18 from "react";
+import * as react16 from "react";
 import { Ref } from "react";
 import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -90,7 +90,7 @@ interface TextProps extends TextProps$1 {
  *
  * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
  */
-declare const Text: react18.NamedExoticComponent<TextProps>;
+declare const Text: react16.NamedExoticComponent<TextProps>;
 //#endregion
 export { Text, type TextProps };
 //# sourceMappingURL=Text.d.cts.map

package/dist/components/Text.d.mts

@@ -1,5 +1,5 @@
 
-import * as react11 from "react";
+import * as react16 from "react";
 import { Ref } from "react";
 import { Text as Text$1, TextProps as TextProps$1, TextStyle } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -90,7 +90,7 @@ interface TextProps extends TextProps$1 {
  *
  * @see The {@link https://uds.build/docs/components/text Text Docs} for more info
  */
-declare const Text: react11.NamedExoticComponent<TextProps>;
+declare const Text: react16.NamedExoticComponent<TextProps>;
 //#endregion
 export { Text, type TextProps };
 //# sourceMappingURL=Text.d.mts.map

package/dist/components/VStack.d.cts

@@ -1,6 +1,6 @@
 
 import { BoxProps } from "./Box.cjs";
-import * as react19 from "react";
+import * as react17 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -35,7 +35,7 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
  */
-declare const VStack: react19.NamedExoticComponent<VStackProps>;
+declare const VStack: react17.NamedExoticComponent<VStackProps>;
 //#endregion
 export { VStack, type VStackProps };
 //# sourceMappingURL=VStack.d.cts.map

package/dist/components/VStack.d.mts

@@ -1,6 +1,6 @@
 
 import { BoxProps } from "./Box.mjs";
-import * as react14 from "react";
+import * as react15 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -35,7 +35,7 @@ interface VStackProps extends Omit<BoxProps, 'ref'> {
  *
  * @related [HStack](https://uds.build/docs/components/h-stack), [Box](https://uds.build/docs/components/box)
  */
-declare const VStack: react14.NamedExoticComponent<VStackProps>;
+declare const VStack: react15.NamedExoticComponent<VStackProps>;
 //#endregion
 export { VStack, type VStackProps };
 //# sourceMappingURL=VStack.d.mts.map