npm - @yahoo/uds-mobile - Versions diffs - 1.1.0-beta.1 → 1.1.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (241) hide show

package/dist/components/IconButton.d.mts CHANGED Viewed

@@ -1,8 +1,9 @@
-import { ButtonVariantFlat, IconButtonSize, IconVariant } from "../types/dist/index.mjs";
+import { IconVariant } from "../icons/dist/types.mjs";
+import { ButtonVariantFlat, IconButtonSize } from "../uds/dist/tokens/types.mjs";
 import { IconName } from "./Icon.mjs";
 import { PressableProps as PressableProps$1 } from "./Pressable.mjs";
-import * as react7 from "react";
+import * as react17 from "react";
 import { Ref } from "react";
 import { View } from "react-native";
@@ -39,7 +40,7 @@ interface IconButtonProps extends Omit<PressableProps$1, 'children'> {
  * <IconButton name="Settings" loading />
  * ```
  */
-declare const IconButton: react7.NamedExoticComponent<IconButtonProps>;
+declare const IconButton: react17.NamedExoticComponent<IconButtonProps>;
 //#endregion
 export { IconButton, type IconButtonProps };
 //# sourceMappingURL=IconButton.d.mts.map

package/dist/components/IconButton.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.d.mts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":"~~;;;;;;;;;~~UA6CU,eAAA,SAAwB,KAAK;;QAE/B;EAFE~~;EAA6B~~,OAAA,CAAA,~~EAI3B~~,~~iBAJ2B~~;EAE/B~~;EAEI~~,IAAA,CAAA,~~EAEH~~,~~cAFG~~;EAEH;EAEO,~~WAAA~~,CAAA,EAAA,~~WAAA~~;EAOJ,~~OAAA~~,CAAA,EAAA,OAAA;~~EAAJ;;;AAf8B;;QAe9B~~,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,~~MAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"IconButton.d.mts","names":[],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;UA6CU,eAAA,SAAwB,KAAK;;QAE/B;;EAFE,OAAA,CAAA,EAIE,iBAJc;EAAa;EAE/B,IAAA,CAAA,EAIC,cAJD;EAEI;EAEH,WAAA,CAAA,EAEO,WAFP;EAEO,OAAA,CAAA,EAAA,OAAA;EAOJ;;;;EAsBN,cA0HJ,CAAA,EAAA,OAAA;QAhJM,IAAI;;;;;;;;;;;;;;;;;cAsBN,YAAU,OAAA,CAAA,qBAAA"}

package/dist/components/IconButton.mjs CHANGED Viewed

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

package/dist/components/IconButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.mjs","names":["IconButton","foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds~~-types~~';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- /\n/ Animation Helpers /\n/ -------------------------------------------------------------------------- /\n\nfunction interpolateShadowAlpha(shadow: string, alpha: number): string {\n 'worklet';\n if (!shadow \|\| alpha >= 1) {\n return shadow;\n }\n if (alpha <= 0) {\n return '';\n }\n\n return shadow.replace(/rgba\$([^,]+),\\s([^,]+),\\s([^,]+),\\s([^)]+)\$/g, (_, r, g, b, a) => {\n const newAlpha = parseFloat(a) * alpha;\n return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n });\n}\n\n/* -------------------------------------------------------------------------- /\n/ IconButton Props /\n/ -------------------------------------------------------------------------- /\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n /* Icon to render from the icons package. /\n name: IconName;\n /* @default 'primary' /\n variant?: ButtonVariantFlat;\n /* @default 'md' /\n size?: IconButtonSize;\n /* @default 'outline' /\n iconVariant?: IconVariant;\n loading?: boolean;\n /\n Disable motion effects (scale on press, icon animations)\n * @default false\n /\n disableEffects?: boolean;\n ref?: Ref<View>;\n}\n\n/ -------------------------------------------------------------------------- /\n/ IconButton Component /\n/ -------------------------------------------------------------------------- /\n\n/\n An icon button element that can be used to trigger an action\n \n Features animated scale effect on press and smooth color transitions\n * matching the web UDS IconButton behavior.\n \n @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n \n <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n /\nconst IconButton = memo(function IconButton({\n name,\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n loading,\n disabled,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: IconButtonProps) {\n const isDisabled = disabled \|\| loading;\n const shouldAnimate = !disableEffects && !isDisabled;\n\n / --------------------------------- State ---------------------------------- /\n const [pressed, setPressed] = useState(false);\n\n // Apply layer-based styles with compound variant support\n iconButtonStyles.useVariants({ size });\n buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n // Animate colors using Unistyles' useAnimatedVariantColor\n const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n // Get animated theme for boxShadow\n const animatedTheme = useAnimatedTheme();\n\n / ------------------------------- Animation -------------------------------- /\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n (event) => {\n setPressed(true);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n }\n onPressIn?.(event);\n },\n [shouldAnimate, scale, onPressIn],\n );\n\n const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n (event) => {\n setPressed(false);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n }\n onPressOut?.(event);\n },\n [shouldAnimate, scale, onPressOut],\n );\n\n const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n / --------------------------------- Styles --------------------------------- /\n // Animate pressed state for shadow\n const pressProgress = useDerivedValue(\n () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n [pressed],\n );\n\n // Animate using Unistyles' variant color system + boxShadow from theme\n const animatedRootStyle = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components as unknown as Record<\n string,\n Record<string, unknown>\n >;\n const shadowPressed =\n (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\n\n return {\n transform: [{ scale: scale.value }],\n backgroundColor: withTiming(backgroundColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n borderColor: withTiming(borderColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n };\n });\n\n / --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={isDisabled}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n overflow=\"hidden\"\n accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole=\"button\"\n accessibilityState={a11yState}\n style={[\n iconButtonStyles.root,\n buttonStyles.root,\n foundationStyles.foundation,\n animatedRootStyle,\n typeof style === 'function' ? style({ pressed }) : style,\n ]}\n {...props}\n >\n {loading ? (\n <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n ) : (\n <Icon name={name} variant={iconVariant} style={buttonStyles.icon} />\n )}\n </AnimatedPressable>\n );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;AA4CJ,MAAM,aAAa,KAAK,SAASA,aAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbC,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,aAAa,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAEvF,oBAAC;GAAW;GAAM,SAAS;GAAa,OAAO,aAAa;IAAQ;GAEpD;EAEtB;AAEF,WAAW,cAAc"}
1	+ {"version":3,"file":"IconButton.mjs","names":["IconButton","foundationStyles"],"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonVariantFlat, IconButtonSize, IconVariant } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useCallback, useMemo, useState } from 'react';\nimport type { View } from 'react-native';\nimport { ActivityIndicator } from 'react-native';\nimport {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withSpring,\n withTiming,\n} from 'react-native-reanimated';\nimport { useAnimatedTheme, useAnimatedVariantColor } from 'react-native-unistyles/reanimated';\n\nimport { buttonStyles, iconButtonStyles, styles as foundationStyles } from '../../generated/styles';\nimport { BUTTON_SPRING_CONFIG, SCALE_EFFECTS } from '../motion';\nimport type { IconName } from './Icon';\nimport { Icon } from './Icon';\nimport type { PressableProps } from './Pressable';\nimport { AnimatedPressable } from './Pressable';\n\n/* -------------------------------------------------------------------------- /\n/ Animation Helpers /\n/ -------------------------------------------------------------------------- /\n\nfunction interpolateShadowAlpha(shadow: string, alpha: number): string {\n 'worklet';\n if (!shadow \|\| alpha >= 1) {\n return shadow;\n }\n if (alpha <= 0) {\n return '';\n }\n\n return shadow.replace(/rgba\$([^,]+),\\s([^,]+),\\s([^,]+),\\s([^)]+)\$/g, (_, r, g, b, a) => {\n const newAlpha = parseFloat(a) * alpha;\n return `rgba(${r}, ${g}, ${b}, ${newAlpha.toFixed(3)})`;\n });\n}\n\n/* -------------------------------------------------------------------------- /\n/ IconButton Props /\n/ -------------------------------------------------------------------------- /\n\ninterface IconButtonProps extends Omit<PressableProps, 'children'> {\n /* Icon to render from the icons package. /\n name: IconName;\n /* @default 'primary' /\n variant?: ButtonVariantFlat;\n /* @default 'md' /\n size?: IconButtonSize;\n /* @default 'outline' /\n iconVariant?: IconVariant;\n loading?: boolean;\n /\n Disable motion effects (scale on press, icon animations)\n * @default false\n /\n disableEffects?: boolean;\n ref?: Ref<View>;\n}\n\n/ -------------------------------------------------------------------------- /\n/ IconButton Component /\n/ -------------------------------------------------------------------------- /\n\n/\n An icon button element that can be used to trigger an action\n \n Features animated scale effect on press and smooth color transitions\n * matching the web UDS IconButton behavior.\n \n @example\n * ```tsx\n * import { IconButton } from '@yahoo/uds-mobile';\n \n <IconButton name=\"Add\" onPress={() => console.log('pressed')} />\n * <IconButton name=\"Close\" variant=\"secondary\" size=\"sm\" />\n * <IconButton name=\"Settings\" loading />\n * ```\n /\nconst IconButton = memo(function IconButton({\n name,\n variant = 'primary',\n size = 'md',\n iconVariant = 'outline',\n loading,\n disabled,\n style,\n accessibilityLabel,\n accessibilityHint,\n disableEffects = false,\n onPressIn,\n onPressOut,\n ref,\n ...props\n}: IconButtonProps) {\n const isDisabled = disabled \|\| loading;\n const shouldAnimate = !disableEffects && !isDisabled;\n\n / --------------------------------- State ---------------------------------- /\n const [pressed, setPressed] = useState(false);\n\n // Apply layer-based styles with compound variant support\n iconButtonStyles.useVariants({ size });\n buttonStyles.useVariants({ variant, disabled: isDisabled, pressed });\n\n // Animate colors using Unistyles' useAnimatedVariantColor\n const backgroundColor = useAnimatedVariantColor(buttonStyles.root, 'backgroundColor');\n const borderColor = useAnimatedVariantColor(buttonStyles.root, 'borderColor');\n\n // Get animated theme for boxShadow\n const animatedTheme = useAnimatedTheme();\n\n / ------------------------------- Animation -------------------------------- /\n const scale = useSharedValue<number>(SCALE_EFFECTS.none);\n\n const handlePressIn = useCallback<NonNullable<PressableProps['onPressIn']>>(\n (event) => {\n setPressed(true);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.down, BUTTON_SPRING_CONFIG);\n }\n onPressIn?.(event);\n },\n [shouldAnimate, scale, onPressIn],\n );\n\n const handlePressOut = useCallback<NonNullable<PressableProps['onPressOut']>>(\n (event) => {\n setPressed(false);\n if (shouldAnimate) {\n scale.value = withSpring(SCALE_EFFECTS.none, BUTTON_SPRING_CONFIG);\n }\n onPressOut?.(event);\n },\n [shouldAnimate, scale, onPressOut],\n );\n\n const a11yState = useMemo(() => ({ disabled: isDisabled, busy: loading }), [isDisabled, loading]);\n\n / --------------------------------- Styles --------------------------------- /\n // Animate pressed state for shadow\n const pressProgress = useDerivedValue(\n () => withTiming(pressed ? 1 : 0, { duration: 220, easing: Easing.bezier(0, 0, 0.2, 1) }),\n [pressed],\n );\n\n // Animate using Unistyles' variant color system + boxShadow from theme\n const animatedRootStyle = useAnimatedStyle(() => {\n // Get boxShadow from theme using flattened path (no camelCase conversion needed!)\n const components = animatedTheme.value.components as unknown as Record<\n string,\n Record<string, unknown>\n >;\n const shadowPressed =\n (components[`button/variant/${variant}/root/pressed`]?.boxShadow as string) ?? '';\n\n return {\n transform: [{ scale: scale.value }],\n backgroundColor: withTiming(backgroundColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n borderColor: withTiming(borderColor.value, {\n duration: 220,\n easing: Easing.bezier(0, 0, 0.2, 1),\n }),\n boxShadow: interpolateShadowAlpha(shadowPressed, pressProgress.value),\n };\n });\n\n / --------------------------------- Render --------------------------------- */\n return (\n <AnimatedPressable\n ref={ref}\n disabled={isDisabled}\n onPressIn={handlePressIn}\n onPressOut={handlePressOut}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n overflow=\"hidden\"\n accessibilityLabel={loading ? `${accessibilityLabel ?? ''}, loading` : accessibilityLabel}\n accessibilityHint={accessibilityHint}\n accessibilityRole=\"button\"\n accessibilityState={a11yState}\n style={[\n iconButtonStyles.root,\n buttonStyles.root,\n foundationStyles.foundation,\n animatedRootStyle,\n typeof style === 'function' ? style({ pressed }) : style,\n ]}\n {...props}\n >\n {loading ? (\n <ActivityIndicator size={buttonStyles.icon.fontSize} color={buttonStyles.icon.color} />\n ) : (\n <Icon name={name} variant={iconVariant} style={buttonStyles.icon} />\n )}\n </AnimatedPressable>\n );\n});\n\nIconButton.displayName = 'IconButton';\n\nexport { IconButton, type IconButtonProps };\n"],"mappings":";;;;;;;;;;;;;AA0BA,SAAS,uBAAuB,QAAgB,OAAuB;AACrE;AACA,KAAI,CAAC,UAAU,SAAS,EACtB,QAAO;AAET,KAAI,SAAS,EACX,QAAO;AAGT,QAAO,OAAO,QAAQ,sDAAsD,GAAG,GAAG,GAAG,GAAG,MAAM;AAE5F,SAAO,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,KADZ,WAAW,EAAE,GAAG,OACS,QAAQ,EAAE,CAAC;GACrD;;;;;;;;;;;;;;;;;AA4CJ,MAAM,aAAa,KAAK,SAASA,aAAW,EAC1C,MACA,UAAU,WACV,OAAO,MACP,cAAc,WACd,SACA,UACA,OACA,oBACA,mBACA,iBAAiB,OACjB,WACA,YACA,KACA,GAAG,SACe;CAClB,MAAM,aAAa,YAAY;CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,CAAC;CAG1C,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,kBAAiB,YAAY,EAAE,MAAM,CAAC;AACtC,cAAa,YAAY;EAAE;EAAS,UAAU;EAAY;EAAS,CAAC;CAGpE,MAAM,kBAAkB,wBAAwB,aAAa,MAAM,kBAAkB;CACrF,MAAM,cAAc,wBAAwB,aAAa,MAAM,cAAc;CAG7E,MAAM,gBAAgB,kBAAkB;CAGxC,MAAM,QAAQ,eAAuB,cAAc,KAAK;CAExD,MAAM,gBAAgB,aACnB,UAAU;AACT,aAAW,KAAK;AAChB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,cAAY,MAAM;IAEpB;EAAC;EAAe;EAAO;EAAU,CAClC;CAED,MAAM,iBAAiB,aACpB,UAAU;AACT,aAAW,MAAM;AACjB,MAAI,cACF,OAAM,QAAQ,WAAW,cAAc,MAAM,qBAAqB;AAEpE,eAAa,MAAM;IAErB;EAAC;EAAe;EAAO;EAAW,CACnC;CAED,MAAM,YAAY,eAAe;EAAE,UAAU;EAAY,MAAM;EAAS,GAAG,CAAC,YAAY,QAAQ,CAAC;CAIjG,MAAM,gBAAgB,sBACd,WAAW,UAAU,IAAI,GAAG;EAAE,UAAU;EAAK,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;EAAE,CAAC,EACzF,CAAC,QAAQ,CACV;CAGD,MAAM,oBAAoB,uBAAuB;EAM/C,MAAM,gBAJa,cAAc,MAAM,WAKzB,kBAAkB,QAAQ,iBAAiB,aAAwB;AAEjF,SAAO;GACL,WAAW,CAAC,EAAE,OAAO,MAAM,OAAO,CAAC;GACnC,iBAAiB,WAAW,gBAAgB,OAAO;IACjD,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,aAAa,WAAW,YAAY,OAAO;IACzC,UAAU;IACV,QAAQ,OAAO,OAAO,GAAG,GAAG,IAAK,EAAE;IACpC,CAAC;GACF,WAAW,uBAAuB,eAAe,cAAc,MAAM;GACtE;GACD;AAGF,QACE,oBAAC;EACM;EACL,UAAU;EACV,WAAW;EACX,YAAY;EACZ,eAAc;EACd,YAAW;EACX,gBAAe;EACf,UAAS;EACT,oBAAoB,UAAU,GAAG,sBAAsB,GAAG,aAAa;EACpD;EACnB,mBAAkB;EAClB,oBAAoB;EACpB,OAAO;GACL,iBAAiB;GACjB,aAAa;GACbC,OAAiB;GACjB;GACA,OAAO,UAAU,aAAa,MAAM,EAAE,SAAS,CAAC,GAAG;GACpD;EACD,GAAI;YAEH,UACC,oBAAC;GAAkB,MAAM,aAAa,KAAK;GAAU,OAAO,aAAa,KAAK;IAAS,GAEvF,oBAAC;GAAW;GAAM,SAAS;GAAa,OAAO,aAAa;IAAQ;GAEpD;EAEtB;AAEF,WAAW,cAAc"}

package/dist/components/IconSlot.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { IconName, IconProps } from "./Icon.cjs";
-import * as react9 from "react";
+import * as react5 from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
@@ -39,7 +39,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
  */
-declare const IconSlot: react9.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react5.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.cts.map

package/dist/components/IconSlot.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { IconName, IconProps } from "./Icon.mjs";
-import * as react8 from "react";
+import * as react16 from "react";
 import { ReactElement, Ref } from "react";
 import { Text } from "react-native";
@@ -39,7 +39,7 @@ interface IconSlotProps extends IconPropsWithoutName {
  * - Pass Icon component for custom props
  * - Pass function for dynamic rendering
  */
-declare const IconSlot: react8.NamedExoticComponent<IconSlotProps>;
+declare const IconSlot: react16.NamedExoticComponent<IconSlotProps>;
 //#endregion
 export { IconSlot, type IconSlotProps, type IconSlotType };
 //# sourceMappingURL=IconSlot.d.mts.map

package/dist/components/IconSlot.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,~~MAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"IconSlot.d.mts","names":[],"sources":["../../src/components/IconSlot.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,oBAAA,GAAuB,KAAK;KAE5B,YAAA,GACD,WACA,aAAa,0BACA,yBAAyB,aAAa;UAE7C,aAAA,SAAsB;EAP3B,GAAA,CAAA,EAQG,GARH,CAQO,IARP,CAAA;EAEA;EACD,IAAA,CAAA,EAOK,YAPL;;;;;;;AAEkD;;;;;;AAEF;;;;;;;;;;;;;;;;cAkC9C,UAAQ,OAAA,CAAA,qBAAA"}

package/dist/components/Image.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalImageProps } from "../types/dist/index.cjs";
-import * as react10 from "react";
+import { UniversalImageProps } from "../uds/dist/tokens/types.cjs";
+import * as react12 from "react";
 import { Ref } from "react";
 import { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -79,7 +79,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
  * ```
  */
-declare const Image: react10.NamedExoticComponent<ImageProps>;
+declare const Image: react12.NamedExoticComponent<ImageProps>;
 //#endregion
 export { Image, type ImageProps };
 //# sourceMappingURL=Image.d.cts.map

package/dist/components/Image.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalImageProps } from "../types/dist/index.mjs";
-import * as react9 from "react";
+import { UniversalImageProps } from "../uds/dist/tokens/types.mjs";
+import * as react19 from "react";
 import { Ref } from "react";
 import { Image as Image$1, ImageProps as ImageProps$1 } from "react-native";
 import { StyleProps } from "../../generated/styles";
@@ -79,7 +79,7 @@ interface ImageProps extends Omit<ImageProps$1, 'source' | 'src' | 'width' | 'he
  * <Image src={require('./local-image.png')} contentFit="cover" borderRadius="md" />
  * ```
  */
-declare const Image: react9.NamedExoticComponent<ImageProps>;
+declare const Image: react19.NamedExoticComponent<ImageProps>;
 //#endregion
 export { Image, type ImageProps };
 //# sourceMappingURL=Image.d.mts.map

package/dist/components/Image.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.d.mts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":"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~~MAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"Image.d.mts","names":[],"sources":["../../src/components/Image.tsx"],"sourcesContent":[],"mappings":"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"}

package/dist/components/Image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","names":["CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']>","Image","RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds~~-types~~';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n cover: 'cover',\n contain: 'contain',\n fill: 'stretch',\n none: 'center',\n 'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n RNImageProps,\n 'source' \| 'src' \| 'width' \| 'height' \| 'borderRadius'\n> {\n ref?: Ref<RNImage>;\n /** Image source URL or require() /\n src: UniversalImageProps['src'];\n /* Alt text for accessibility /\n alt?: string;\n /* Image width /\n width?: number;\n /* Image height /\n height?: number;\n /* How to fit the image within its container /\n contentFit?: ContentFit;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n alignContent?: StyleProps['alignContent'];\n alignItems?: StyleProps['alignItems'];\n alignSelf?: StyleProps['alignSelf'];\n flex?: StyleProps['flex'];\n flexDirection?: StyleProps['flexDirection'];\n flexGrow?: StyleProps['flexGrow'];\n flexShrink?: StyleProps['flexShrink'];\n flexWrap?: StyleProps['flexWrap'];\n justifyContent?: StyleProps['justifyContent'];\n // Layout\n display?: StyleProps['display'];\n overflow?: StyleProps['overflow'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n columnGap?: StyleProps['columnGap'];\n rowGap?: StyleProps['rowGap'];\n}\n\n/\n A component for displaying images\n \n @description\n * Wrapper for the React Native Image component with UDS styling props.\n \n @example\n * ```tsx\n * import { Image } from '~/components/ui/Image';\n \n <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n */\nconst Image = memo(function Image({\n src,\n alt,\n width,\n height,\n contentFit = 'cover',\n style,\n // background\n backgroundColor,\n // border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // flex\n alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n ref,\n ...props\n}: ImageProps) {\n // Apply styles using useVariants\n styles.useVariants({\n backgroundColor,\n // border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // flex\n alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n });\n\n const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n // styles.foundation must be in deps - it returns a new reference when variants change\n const imageStyles = useMemo(\n () => [styles.foundation as ImageStyle, { width, height }, style],\n [styles.foundation, width, height, style],\n );\n\n return (\n <RNImage\n ref={ref}\n source={source}\n accessibilityLabel={alt}\n resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n style={imageStyles}\n {...props}\n />\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;;AAWA,MAAMA,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;AAmFD,MAAM,QAAQ,KAAK,SAASC,QAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACC;EACM;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc"}
1	+ {"version":3,"file":"Image.mjs","names":["CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']>","Image","RNImage"],"sources":["../../src/components/Image.tsx"],"sourcesContent":["import type { UniversalImageProps } from '@yahoo/uds/tokens';\nimport type { Ref } from 'react';\nimport { memo, useMemo } from 'react';\nimport type { ImageProps as RNImageProps, ImageStyle } from 'react-native';\nimport { Image as RNImage } from 'react-native';\n\nimport type { StyleProps } from '../../generated/styles';\nimport { styles } from '../../generated/styles';\n\ntype ContentFit = NonNullable<UniversalImageProps['contentFit']>;\n\nconst CONTENT_FIT_TO_RESIZE_MODE: Record<ContentFit, ImageStyle['resizeMode']> = {\n cover: 'cover',\n contain: 'contain',\n fill: 'stretch',\n none: 'center',\n 'scale-down': 'contain',\n};\n\ninterface ImageProps extends Omit<\n RNImageProps,\n 'source' \| 'src' \| 'width' \| 'height' \| 'borderRadius'\n> {\n ref?: Ref<RNImage>;\n /** Image source URL or require() /\n src: UniversalImageProps['src'];\n /* Alt text for accessibility /\n alt?: string;\n /* Image width /\n width?: number;\n /* Image height /\n height?: number;\n /* How to fit the image within its container /\n contentFit?: ContentFit;\n // Background\n backgroundColor?: StyleProps['backgroundColor'];\n // Border\n borderRadius?: StyleProps['borderRadius'];\n borderTopStartRadius?: StyleProps['borderTopStartRadius'];\n borderTopEndRadius?: StyleProps['borderTopEndRadius'];\n borderBottomStartRadius?: StyleProps['borderBottomStartRadius'];\n borderBottomEndRadius?: StyleProps['borderBottomEndRadius'];\n borderColor?: StyleProps['borderColor'];\n borderStartColor?: StyleProps['borderStartColor'];\n borderEndColor?: StyleProps['borderEndColor'];\n borderTopColor?: StyleProps['borderTopColor'];\n borderBottomColor?: StyleProps['borderBottomColor'];\n borderWidth?: StyleProps['borderWidth'];\n borderVerticalWidth?: StyleProps['borderVerticalWidth'];\n borderHorizontalWidth?: StyleProps['borderHorizontalWidth'];\n borderStartWidth?: StyleProps['borderStartWidth'];\n borderEndWidth?: StyleProps['borderEndWidth'];\n borderTopWidth?: StyleProps['borderTopWidth'];\n borderBottomWidth?: StyleProps['borderBottomWidth'];\n // Flex\n alignContent?: StyleProps['alignContent'];\n alignItems?: StyleProps['alignItems'];\n alignSelf?: StyleProps['alignSelf'];\n flex?: StyleProps['flex'];\n flexDirection?: StyleProps['flexDirection'];\n flexGrow?: StyleProps['flexGrow'];\n flexShrink?: StyleProps['flexShrink'];\n flexWrap?: StyleProps['flexWrap'];\n justifyContent?: StyleProps['justifyContent'];\n // Layout\n display?: StyleProps['display'];\n overflow?: StyleProps['overflow'];\n // Spacing\n spacing?: StyleProps['spacing'];\n spacingHorizontal?: StyleProps['spacingHorizontal'];\n spacingVertical?: StyleProps['spacingVertical'];\n spacingBottom?: StyleProps['spacingBottom'];\n spacingEnd?: StyleProps['spacingEnd'];\n spacingStart?: StyleProps['spacingStart'];\n spacingTop?: StyleProps['spacingTop'];\n offset?: StyleProps['offset'];\n offsetVertical?: StyleProps['offsetVertical'];\n offsetHorizontal?: StyleProps['offsetHorizontal'];\n offsetBottom?: StyleProps['offsetBottom'];\n offsetEnd?: StyleProps['offsetEnd'];\n offsetStart?: StyleProps['offsetStart'];\n offsetTop?: StyleProps['offsetTop'];\n columnGap?: StyleProps['columnGap'];\n rowGap?: StyleProps['rowGap'];\n}\n\n/\n A component for displaying images\n \n @description\n * Wrapper for the React Native Image component with UDS styling props.\n \n @example\n * ```tsx\n * import { Image } from '~/components/ui/Image';\n \n <Image src=\"https://example.com/image.png\" width={200} height={150} />\n * <Image src={require('./local-image.png')} contentFit=\"cover\" borderRadius=\"md\" />\n * ```\n */\nconst Image = memo(function Image({\n src,\n alt,\n width,\n height,\n contentFit = 'cover',\n style,\n // background\n backgroundColor,\n // border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // flex\n alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n ref,\n ...props\n}: ImageProps) {\n // Apply styles using useVariants\n styles.useVariants({\n backgroundColor,\n // border\n borderRadius,\n borderTopStartRadius,\n borderTopEndRadius,\n borderBottomStartRadius,\n borderBottomEndRadius,\n borderColor,\n borderStartColor,\n borderEndColor,\n borderTopColor,\n borderBottomColor,\n borderWidth,\n borderVerticalWidth,\n borderHorizontalWidth,\n borderStartWidth,\n borderEndWidth,\n borderTopWidth,\n borderBottomWidth,\n // flex\n alignContent,\n alignItems,\n alignSelf,\n flex,\n flexDirection,\n flexGrow,\n flexShrink,\n flexWrap,\n justifyContent,\n // layout\n display,\n overflow,\n // spacing\n spacing,\n spacingHorizontal,\n spacingVertical,\n spacingBottom,\n spacingEnd,\n spacingStart,\n spacingTop,\n offset,\n offsetVertical,\n offsetHorizontal,\n offsetBottom,\n offsetEnd,\n offsetStart,\n offsetTop,\n columnGap,\n rowGap,\n });\n\n const source = useMemo(() => (typeof src === 'string' ? { uri: src } : src), [src]);\n\n // styles.foundation must be in deps - it returns a new reference when variants change\n const imageStyles = useMemo(\n () => [styles.foundation as ImageStyle, { width, height }, style],\n [styles.foundation, width, height, style],\n );\n\n return (\n <RNImage\n ref={ref}\n source={source}\n accessibilityLabel={alt}\n resizeMode={CONTENT_FIT_TO_RESIZE_MODE[contentFit]}\n style={imageStyles}\n {...props}\n />\n );\n});\n\nImage.displayName = 'Image';\n\nexport { Image, type ImageProps };\n"],"mappings":";;;;;;;AAWA,MAAMA,6BAA2E;CAC/E,OAAO;CACP,SAAS;CACT,MAAM;CACN,MAAM;CACN,cAAc;CACf;;;;;;;;;;;;;;;AAmFD,MAAM,QAAQ,KAAK,SAASC,QAAM,EAChC,KACA,KACA,OACA,QACA,aAAa,SACb,OAEA,iBAEA,cACA,sBACA,oBACA,yBACA,uBACA,aACA,kBACA,gBACA,gBACA,mBACA,aACA,qBACA,uBACA,kBACA,gBACA,gBACA,mBAEA,cACA,YACA,WACA,MACA,eACA,UACA,YACA,UACA,gBAEA,SACA,UAEA,SACA,mBACA,iBACA,eACA,YACA,cACA,YACA,QACA,gBACA,kBACA,cACA,WACA,aACA,WACA,WACA,QACA,KACA,GAAG,SACU;AAEb,QAAO,YAAY;EACjB;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,SAAS,cAAe,OAAO,QAAQ,WAAW,EAAE,KAAK,KAAK,GAAG,KAAM,CAAC,IAAI,CAAC;CAGnF,MAAM,cAAc,cACZ;EAAC,OAAO;EAA0B;GAAE;GAAO;GAAQ;EAAE;EAAM,EACjE;EAAC,OAAO;EAAY;EAAO;EAAQ;EAAM,CAC1C;AAED,QACE,oBAACC;EACM;EACG;EACR,oBAAoB;EACpB,YAAY,2BAA2B;EACvC,OAAO;EACP,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc"}

package/dist/components/Input.d.cts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { UniversalInputProps } from "../types/dist/index.cjs";
+import { UniversalInputProps } from "../uds/dist/tokens/types.cjs";
 import { IconSlotType } from "./IconSlot.cjs";
 import { SizeProps } from "../types.cjs";
-import * as react11 from "react";
+import * as react16 from "react";
 import { Ref } from "react";
 import { TextInput, TextInputProps } from "react-native";
@@ -33,7 +33,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  *
  * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
  */
-declare const Input: react11.NamedExoticComponent<InputProps>;
+declare const Input: react16.NamedExoticComponent<InputProps>;
 //#endregion
 export { Input, type InputProps };
 //# sourceMappingURL=Input.d.cts.map

package/dist/components/Input.d.mts CHANGED Viewed

@@ -1,8 +1,8 @@
-import { UniversalInputProps } from "../types/dist/index.mjs";
+import { UniversalInputProps } from "../uds/dist/tokens/types.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { SizeProps } from "../types.mjs";
-import * as react11 from "react";
+import * as react9 from "react";
 import { Ref } from "react";
 import { TextInput, TextInputProps } from "react-native";
@@ -33,7 +33,7 @@ interface InputProps extends Omit<UniversalInputProps<IconSlotType>, 'width'>, O
  *
  * @see The {@link https://uds.build/docs/components/input Input Docs} for more info
  */
-declare const Input: react11.NamedExoticComponent<InputProps>;
+declare const Input: react9.NamedExoticComponent<InputProps>;
 //#endregion
 export { Input, type InputProps };
 //# sourceMappingURL=Input.d.mts.map

package/dist/components/Input.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,~~OAAA~~,CAAA,qBAAA"}
1	+ {"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;UAmBU,UAAA,SAEN,KAAK,oBAAoB,yBACzB,KAAK,uCACL,KAAK;QACD,IAAI;AAdmC;;;;;;;;;;;AAavC;;;;;;;;;;;;;cA+BF,OAAK,MAAA,CAAA,qBAAA"}

package/dist/components/Input.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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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"}
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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"}

package/dist/components/Link.d.cts CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/components/Link.d.mts CHANGED Viewed

@@ -1,8 +1,9 @@
-import { UniversalLinkProps } from "../types/dist/index.mjs";
+import { UniversalLinkProps } from "../uds/dist/tokens/types.mjs";
+import "../uds/dist/index.mjs";
 import { IconSlotType } from "./IconSlot.mjs";
 import { TextProps as TextProps$1 } from "./Text.mjs";
-import * as react12 from "react";
+import * as react8 from "react";
 import { ReactNode, Ref } from "react";
 import { Text, TextStyle } from "react-native";
@@ -38,7 +39,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: react8.NamedExoticComponent<LinkProps>;
 //#endregion
 export { Link, type LinkProps };
 //# sourceMappingURL=Link.d.mts.map

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

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/components/Link.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
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"}

package/dist/components/Pressable.d.cts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { SizeProps } from "../types.cjs";
-import * as react12 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: react12.NamedExoticComponent<PressableProps>;
-declare const AnimatedPressable: react12.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.cts.map

package/dist/components/Pressable.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { SizeProps } from "../types.mjs";
-import * as react13 from "react";
+import * as react14 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: react14.NamedExoticComponent<PressableProps>;
+declare const AnimatedPressable: react14.FunctionComponent<react_native_reanimated0.AnimatedProps<PressableProps>>;
 //#endregion
 export { AnimatedPressable, Pressable, type PressableProps };
 //# sourceMappingURL=Pressable.d.mts.map

package/dist/components/Radio.cjs CHANGED Viewed

@@ -1,7 +1,7 @@
 /*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
-const require_index = require('../motion-tokens/dist/index.cjs');
-const require_motion = require('../motion.cjs');
+const require_motion = require('../uds/dist/tokens/configs/motion.cjs');
+const require_motion$1 = 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_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 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 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 CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalRadioProps } from "../types/dist/index.cjs";
-import * as react19 from "react";
+import { UniversalRadioProps } from "../uds/dist/tokens/types.cjs";
+import * as react18 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: react19.NamedExoticComponent<RadioProps>;
+declare const Radio: react18.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.cts.map

package/dist/components/Radio.d.mts CHANGED Viewed

@@ -1,6 +1,6 @@
-import { UniversalRadioProps } from "../types/dist/index.mjs";
-import * as react17 from "react";
+import { UniversalRadioProps } from "../uds/dist/tokens/types.mjs";
+import * as react10 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: react17.NamedExoticComponent<RadioProps>;
+declare const Radio: react10.NamedExoticComponent<RadioProps>;
 //#endregion
 export { Radio, type RadioProps };
 //# sourceMappingURL=Radio.d.mts.map

package/dist/components/Radio.mjs CHANGED Viewed

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

package/dist/components/Radio.mjs.map CHANGED Viewed

	@@ -1 +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-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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"}
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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"}