@yahoo/uds-mobile 2.14.0 → 2.16.0

package/README.md

@@ -17,7 +17,7 @@
 
 `@yahoo/uds-mobile` brings UDS to React Native. It provides:
 
-- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, Link, Radio, RadioGroup, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
+- **Pre-built Components**: Avatar, Badge, Button, Checkbox, Chip, Divider, Icon, IconButton, Image, Input, InputHelpText, Link, Radio, RadioGroup, Switch, Tabs, Text, and layout primitives (Box, VStack, HStack, Screen)
 - **Theming**: Full light/dark mode support with automatic system preference detection
 - **Design Token Integration**: Colors, typography, spacing, and motion configs synced from UDS tokens
 - **Animations**: Smooth, physics-based animations using Reanimated with motion parity to web
@@ -319,29 +319,30 @@ const styles = StyleSheet.create((theme) => ({
 
 ### Available Components
 
-| Component    | Description                                     |
-| ------------ | ----------------------------------------------- |
-| `Avatar`     | User avatars with image, initials, or icon      |
-| `Badge`      | Status indicators and labels                    |
-| `Box`        | Flexible container with layout props            |
-| `Button`     | Interactive button with variants and animations |
-| `Checkbox`   | Selectable checkbox with label                  |
-| `Chip`       | Compact elements for filters and selections     |
-| `Divider`    | Visual separator for grouping content           |
-| `HStack`     | Horizontal flex container                       |
-| `Icon`       | Icon rendering (font or SVG)                    |
-| `IconButton` | Icon-only button                                |
-| `IconSlot`   | Flexible icon slot for component composition    |
-| `Image`      | Image component with loading states             |
-| `Input`      | Text input with label and helper text           |
-| `Link`       | Inline text links with icons                    |
-| `Pressable`  | Base pressable component                        |
-| `Radio`      | Radio button with label                         |
-| `RadioGroup` | Coordinates Radio selection in a group          |
-| `Screen`     | Screen container with safe area handling        |
-| `Switch`     | Toggle switch with animations                   |
-| `Text`       | Typography component with variants              |
-| `VStack`     | Vertical flex container                         |
+| Component       | Description                                     |
+| --------------- | ----------------------------------------------- |
+| `Avatar`        | User avatars with image, initials, or icon      |
+| `Badge`         | Status indicators and labels                    |
+| `Box`           | Flexible container with layout props            |
+| `Button`        | Interactive button with variants and animations |
+| `Checkbox`      | Selectable checkbox with label                  |
+| `Chip`          | Compact elements for filters and selections     |
+| `Divider`       | Visual separator for grouping content           |
+| `HStack`        | Horizontal flex container                       |
+| `Icon`          | Icon rendering (font or SVG)                    |
+| `IconButton`    | Icon-only button                                |
+| `IconSlot`      | Flexible icon slot for component composition    |
+| `Image`         | Image component with loading states             |
+| `Input`         | Text input with label and helper text           |
+| `InputHelpText` | Helper text for custom input layouts            |
+| `Link`          | Inline text links with icons                    |
+| `Pressable`     | Base pressable component                        |
+| `Radio`         | Radio button with label                         |
+| `RadioGroup`    | Coordinates Radio selection in a group          |
+| `Screen`        | Screen container with safe area handling        |
+| `Switch`        | Toggle switch with animations                   |
+| `Text`          | Typography component with variants              |
+| `VStack`        | Vertical flex container                         |
 
 ### Usage Examples
 
@@ -668,6 +669,7 @@ import type { IconProps, IconName } from '@yahoo/uds-mobile/Icon';
 import type { IconButtonProps } from '@yahoo/uds-mobile/IconButton';
 import type { ImageProps } from '@yahoo/uds-mobile/Image';
 import type { InputProps } from '@yahoo/uds-mobile/Input';
+import type { InputHelpTextProps } from '@yahoo/uds-mobile/InputHelpText';
 import type { LinkProps } from '@yahoo/uds-mobile/Link';
 import type { RadioProps } from '@yahoo/uds-mobile/Radio';
 import type { SwitchProps } from '@yahoo/uds-mobile/Switch';
@@ -696,6 +698,7 @@ import { IconButton } from '@yahoo/uds-mobile/IconButton';
 import { IconSlot } from '@yahoo/uds-mobile/IconSlot';
 import { Image } from '@yahoo/uds-mobile/Image';
 import { Input } from '@yahoo/uds-mobile/Input';
+import { InputHelpText } from '@yahoo/uds-mobile/InputHelpText';
 import { Link } from '@yahoo/uds-mobile/Link';
 import { Pressable } from '@yahoo/uds-mobile/Pressable';
 import { Radio } from '@yahoo/uds-mobile/Radio';

package/dist/components/Avatar/Avatar.cjs

@@ -0,0 +1,45 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Avatar_utils = require("./utils.cjs");
+const require_components_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
+const require_components_Avatar_AvatarText = require("./AvatarText.cjs");
+const require_components_Avatar_AvatarImage = require("./AvatarImage.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Avatar/Avatar.tsx
+/**
+* **Avatar component for user representation**
+*
+* @description
+* Compatibility wrapper that preserves the original mobile API. For explicit
+* composition, prefer `AvatarImage`, `AvatarText`, or `AvatarIcon`.
+*
+* @category Display
+* @platform mobile
+*/
+const Avatar = (0, react.memo)(function Avatar({ src, alt, fallback, abbreviationStrategy, icon, ...avatarProps }) {
+	const initials = fallback || require_components_Avatar_utils.generateAvatarAbbreviation(alt, abbreviationStrategy);
+	if (src) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarImage.AvatarImage, {
+		src,
+		alt,
+		fallback,
+		icon,
+		abbreviationStrategy,
+		...avatarProps
+	});
+	if (initials) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarText.AvatarText, {
+		name: alt,
+		initials: fallback,
+		abbreviationStrategy,
+		...avatarProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarIcon.AvatarIcon, {
+		alt,
+		icon,
+		...avatarProps
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+exports.Avatar = Avatar;

package/dist/components/Avatar/Avatar.d.cts

@@ -0,0 +1,19 @@
+
+import { AvatarProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Avatar/Avatar.d.ts
+/**
+ * **Avatar component for user representation**
+ *
+ * @description
+ * Compatibility wrapper that preserves the original mobile API. For explicit
+ * composition, prefer `AvatarImage`, `AvatarText`, or `AvatarIcon`.
+ *
+ * @category Display
+ * @platform mobile
+ */
+declare const Avatar: _$react.NamedExoticComponent<AvatarProps>;
+//#endregion
+export { Avatar };
+//# sourceMappingURL=Avatar.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"mappings":";;;;;;;;AAK2C;;;;;;;cAarC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,19 @@
+
+import { AvatarProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Avatar/Avatar.d.ts
+/**
+ * **Avatar component for user representation**
+ *
+ * @description
+ * Compatibility wrapper that preserves the original mobile API. For explicit
+ * composition, prefer `AvatarImage`, `AvatarText`, or `AvatarIcon`.
+ *
+ * @category Display
+ * @platform mobile
+ */
+declare const Avatar: _$react.NamedExoticComponent<AvatarProps>;
+//#endregion
+export { Avatar };
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"mappings":";;;;;;;;AAK2C;;;;;;;cAarC,MAAA,EAAM,OAAA,CAAA,oBAAA,CAAA,WAAA"}

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,45 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { generateAvatarAbbreviation } from "./utils.js";
+import { AvatarIcon } from "./AvatarIcon.js";
+import { AvatarText } from "./AvatarText.js";
+import { AvatarImage } from "./AvatarImage.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+/**
+* **Avatar component for user representation**
+*
+* @description
+* Compatibility wrapper that preserves the original mobile API. For explicit
+* composition, prefer `AvatarImage`, `AvatarText`, or `AvatarIcon`.
+*
+* @category Display
+* @platform mobile
+*/
+const Avatar = memo(function Avatar({ src, alt, fallback, abbreviationStrategy, icon, ...avatarProps }) {
+	const initials = fallback || generateAvatarAbbreviation(alt, abbreviationStrategy);
+	if (src) return /* @__PURE__ */ jsx(AvatarImage, {
+		src,
+		alt,
+		fallback,
+		icon,
+		abbreviationStrategy,
+		...avatarProps
+	});
+	if (initials) return /* @__PURE__ */ jsx(AvatarText, {
+		name: alt,
+		initials: fallback,
+		abbreviationStrategy,
+		...avatarProps
+	});
+	return /* @__PURE__ */ jsx(AvatarIcon, {
+		alt,
+		icon,
+		...avatarProps
+	});
+});
+Avatar.displayName = "Avatar";
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { memo } from 'react';\n\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarImage } from './AvatarImage';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarProps } from './types';\nimport { generateAvatarAbbreviation } from './utils';\n\n/**\n * **Avatar component for user representation**\n *\n * @description\n * Compatibility wrapper that preserves the original mobile API. For explicit\n * composition, prefer `AvatarImage`, `AvatarText`, or `AvatarIcon`.\n *\n * @category Display\n * @platform mobile\n */\nconst Avatar = memo(function Avatar({\n  src,\n  alt,\n  fallback,\n  abbreviationStrategy,\n  icon,\n  ...avatarProps\n}: AvatarProps) {\n  const initials = fallback || generateAvatarAbbreviation(alt, abbreviationStrategy);\n\n  if (src) {\n    return (\n      <AvatarImage\n        src={src}\n        alt={alt}\n        fallback={fallback}\n        icon={icon}\n        abbreviationStrategy={abbreviationStrategy}\n        {...avatarProps}\n      />\n    );\n  }\n\n  if (initials) {\n    return (\n      <AvatarText\n        name={alt}\n        initials={fallback}\n        abbreviationStrategy={abbreviationStrategy}\n        {...avatarProps}\n      />\n    );\n  }\n\n  return <AvatarIcon alt={alt} icon={icon} {...avatarProps} />;\n});\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,MAAM,SAAS,KAAK,SAAS,OAAO,EAClC,KACA,KACA,UACA,sBACA,MACA,GAAG,eACW;CACd,MAAM,WAAW,YAAY,2BAA2B,KAAK,qBAAqB;CAElF,IAAI,KACF,OACE,oBAAC,aAAD;EACO;EACA;EACK;EACJ;EACgB;EACtB,GAAI;EACJ,CAAA;CAIN,IAAI,UACF,OACE,oBAAC,YAAD;EACE,MAAM;EACN,UAAU;EACY;EACtB,GAAI;EACJ,CAAA;CAIN,OAAO,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;EAAe,CAAA;EAC5D;AAEF,OAAO,cAAc"}

package/dist/components/Avatar/AvatarIcon.cjs

@@ -0,0 +1,47 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_IconSlot = require("../IconSlot.cjs");
+const require_components_Avatar_utils = require("./utils.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Avatar/AvatarIcon.tsx
+const AvatarIcon = (0, react.memo)(function AvatarIcon({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, icon, customSize, style, accessibilityLabel, alt, ref, ...viewProps }) {
+	generated_styles.avatarStyles.useVariants({
+		size,
+		icon: variant
+	});
+	const rootStyle = (0, react.useMemo)(() => [
+		generated_styles.avatarStyles.root,
+		avatarStaticStyles.root,
+		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		style
+	], [
+		generated_styles.avatarStyles.root,
+		customSize,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: accessibilityLabel ?? alt,
+		...viewProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+			icon: icon ?? require_components_Avatar_utils.getDefaultAvatarIcon(variant),
+			variant: "fill",
+			style: generated_styles.avatarStyles.icon
+		})
+	});
+});
+AvatarIcon.displayName = "AvatarIcon";
+const avatarStaticStyles = react_native.StyleSheet.create({ root: {
+	alignItems: "center",
+	justifyContent: "center",
+	overflow: "hidden"
+} });
+//#endregion
+exports.AvatarIcon = AvatarIcon;

package/dist/components/Avatar/AvatarIcon.d.cts

@@ -0,0 +1,9 @@
+
+import { AvatarIconProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarIcon.d.ts
+declare const AvatarIcon: _$react.NamedExoticComponent<AvatarIconProps>;
+//#endregion
+export { AvatarIcon };
+//# sourceMappingURL=AvatarIcon.d.cts.map

package/dist/components/Avatar/AvatarIcon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarIcon.d.ts

@@ -0,0 +1,9 @@
+
+import { AvatarIconProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarIcon.d.ts
+declare const AvatarIcon: _$react.NamedExoticComponent<AvatarIconProps>;
+//#endregion
+export { AvatarIcon };
+//# sourceMappingURL=AvatarIcon.d.ts.map

package/dist/components/Avatar/AvatarIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarIcon.js

@@ -0,0 +1,47 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "../Box.js";
+import { IconSlot } from "../IconSlot.js";
+import { DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle, getDefaultAvatarIcon } from "./utils.js";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { avatarStyles } from "../../../generated/styles";
+//#region src/components/Avatar/AvatarIcon.tsx
+const AvatarIcon = memo(function AvatarIcon({ size = "md", variant = DEFAULT_AVATAR_VARIANT, icon, customSize, style, accessibilityLabel, alt, ref, ...viewProps }) {
+	avatarStyles.useVariants({
+		size,
+		icon: variant
+	});
+	const rootStyle = useMemo(() => [
+		avatarStyles.root,
+		avatarStaticStyles.root,
+		getAvatarCustomSizeStyle(customSize),
+		style
+	], [
+		avatarStyles.root,
+		customSize,
+		style
+	]);
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: accessibilityLabel ?? alt,
+		...viewProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx(IconSlot, {
+			icon: icon ?? getDefaultAvatarIcon(variant),
+			variant: "fill",
+			style: avatarStyles.icon
+		})
+	});
+});
+AvatarIcon.displayName = "AvatarIcon";
+const avatarStaticStyles = StyleSheet.create({ root: {
+	alignItems: "center",
+	justifyContent: "center",
+	overflow: "hidden"
+} });
+//#endregion
+export { AvatarIcon };
+
+//# sourceMappingURL=AvatarIcon.js.map

package/dist/components/Avatar/AvatarIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.js","names":[],"sources":["../../../src/components/Avatar/AvatarIcon.tsx"],"sourcesContent":["import { memo, useMemo } from 'react';\nimport { StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { IconSlot } from '../IconSlot';\nimport type { AvatarIconProps } from './types';\nimport {\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n  getAvatarCustomSizeStyle,\n  getDefaultAvatarIcon,\n} from './utils';\n\nconst AvatarIcon = memo(function AvatarIcon({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  icon,\n  customSize,\n  style,\n  accessibilityLabel,\n  alt,\n  ref,\n  ...viewProps\n}: AvatarIconProps) {\n  avatarStyles.useVariants({ size, icon: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <IconSlot\n        icon={icon ?? getDefaultAvatarIcon(variant)}\n        variant=\"fill\"\n        style={avatarStyles.icon}\n      />\n    </Box>\n  );\n});\n\nAvatarIcon.displayName = 'AvatarIcon';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n});\n\nexport { AvatarIcon };\n"],"mappings":";;;;;;;;;AAcA,MAAM,aAAa,KAAK,SAAS,WAAW,EAC1C,OAAA,MACA,UAAU,wBACV,MACA,YACA,OACA,oBACA,KACA,KACA,GAAG,aACe;CAClB,aAAa,YAAY;EAAE;EAAM,MAAM;EAAS,CAAC;CAEjD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAAC,UAAD;GACE,MAAM,QAAQ,qBAAqB,QAAQ;GAC3C,SAAQ;GACR,OAAO,aAAa;GACpB,CAAA;EACE,CAAA;EAER;AAEF,WAAW,cAAc;AAEzB,MAAM,qBAAqB,WAAW,OAAO,EAC3C,MAAM;CACJ,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACX,EACF,CAAC"}

package/dist/components/Avatar/AvatarImage.cjs

@@ -0,0 +1,81 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_Avatar_utils = require("./utils.cjs");
+const require_components_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
+const require_components_Avatar_AvatarText = require("./AvatarText.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Avatar/AvatarImage.tsx
+const AvatarImage = (0, react.memo)(function AvatarImage({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+	const [imageError, setImageError] = (0, react.useState)(false);
+	const shouldShowImage = Boolean(src) && !imageError;
+	generated_styles.avatarStyles.useVariants({
+		size,
+		image: variant
+	});
+	const rootStyle = (0, react.useMemo)(() => [
+		generated_styles.avatarStyles.root,
+		avatarStaticStyles.root,
+		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		style
+	], [
+		generated_styles.avatarStyles.root,
+		customSize,
+		style
+	]);
+	if (!shouldShowImage) {
+		if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarText.AvatarText, {
+			ref,
+			size,
+			variant,
+			name: alt,
+			initials: fallback,
+			abbreviationStrategy,
+			customSize,
+			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
+			style,
+			...viewProps
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarIcon.AvatarIcon, {
+			ref,
+			size,
+			variant,
+			icon,
+			customSize,
+			accessibilityLabel: accessibilityLabel ?? alt,
+			style,
+			...viewProps
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: accessibilityLabel ?? alt,
+		...viewProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.Image, {
+			source: { uri: src },
+			accessibilityLabel: alt,
+			onError: () => setImageError(true),
+			style: avatarStaticStyles.image
+		})
+	});
+});
+AvatarImage.displayName = "AvatarImage";
+const avatarStaticStyles = react_native.StyleSheet.create({
+	root: {
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden"
+	},
+	image: {
+		height: "100%",
+		width: "100%"
+	}
+});
+//#endregion
+exports.AvatarImage = AvatarImage;

package/dist/components/Avatar/AvatarImage.d.cts

@@ -0,0 +1,9 @@
+
+import { AvatarImageProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarImage.d.ts
+declare const AvatarImage: _$react.NamedExoticComponent<AvatarImageProps>;
+//#endregion
+export { AvatarImage };
+//# sourceMappingURL=AvatarImage.d.cts.map

package/dist/components/Avatar/AvatarImage.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.d.ts

@@ -0,0 +1,9 @@
+
+import { AvatarImageProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarImage.d.ts
+declare const AvatarImage: _$react.NamedExoticComponent<AvatarImageProps>;
+//#endregion
+export { AvatarImage };
+//# sourceMappingURL=AvatarImage.d.ts.map

package/dist/components/Avatar/AvatarImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"mappings":";;;;;cAUM,WAAA,EAAW,OAAA,CAAA,oBAAA,CAAA,gBAAA"}

package/dist/components/Avatar/AvatarImage.js

@@ -0,0 +1,81 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Box } from "../Box.js";
+import { DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from "./utils.js";
+import { AvatarIcon } from "./AvatarIcon.js";
+import { AvatarText } from "./AvatarText.js";
+import { memo, useMemo, useState } from "react";
+import { Image, StyleSheet } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { avatarStyles } from "../../../generated/styles";
+//#region src/components/Avatar/AvatarImage.tsx
+const AvatarImage = memo(function AvatarImage({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, alt, fallback, icon, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+	const [imageError, setImageError] = useState(false);
+	const shouldShowImage = Boolean(src) && !imageError;
+	avatarStyles.useVariants({
+		size,
+		image: variant
+	});
+	const rootStyle = useMemo(() => [
+		avatarStyles.root,
+		avatarStaticStyles.root,
+		getAvatarCustomSizeStyle(customSize),
+		style
+	], [
+		avatarStyles.root,
+		customSize,
+		style
+	]);
+	if (!shouldShowImage) {
+		if (fallback || alt) return /* @__PURE__ */ jsx(AvatarText, {
+			ref,
+			size,
+			variant,
+			name: alt,
+			initials: fallback,
+			abbreviationStrategy,
+			customSize,
+			accessibilityLabel: accessibilityLabel ?? alt ?? fallback,
+			style,
+			...viewProps
+		});
+		return /* @__PURE__ */ jsx(AvatarIcon, {
+			ref,
+			size,
+			variant,
+			icon,
+			customSize,
+			accessibilityLabel: accessibilityLabel ?? alt,
+			style,
+			...viewProps
+		});
+	}
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: accessibilityLabel ?? alt,
+		...viewProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ jsx(Image, {
+			source: { uri: src },
+			accessibilityLabel: alt,
+			onError: () => setImageError(true),
+			style: avatarStaticStyles.image
+		})
+	});
+});
+AvatarImage.displayName = "AvatarImage";
+const avatarStaticStyles = StyleSheet.create({
+	root: {
+		alignItems: "center",
+		justifyContent: "center",
+		overflow: "hidden"
+	},
+	image: {
+		height: "100%",
+		width: "100%"
+	}
+});
+//#endregion
+export { AvatarImage };
+
+//# sourceMappingURL=AvatarImage.js.map

package/dist/components/Avatar/AvatarImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarImage.js","names":["RNImage"],"sources":["../../../src/components/Avatar/AvatarImage.tsx"],"sourcesContent":["import { memo, useMemo, useState } from 'react';\nimport { Image as RNImage, StyleSheet } from 'react-native';\n\nimport { avatarStyles } from '../../../generated/styles';\nimport { Box } from '../Box';\nimport { AvatarIcon } from './AvatarIcon';\nimport { AvatarText } from './AvatarText';\nimport type { AvatarImageProps } from './types';\nimport { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, getAvatarCustomSizeStyle } from './utils';\n\nconst AvatarImage = memo(function AvatarImage({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  src,\n  alt,\n  fallback,\n  icon,\n  abbreviationStrategy,\n  customSize,\n  style,\n  accessibilityLabel,\n  ref,\n  ...viewProps\n}: AvatarImageProps) {\n  const [imageError, setImageError] = useState(false);\n  const shouldShowImage = Boolean(src) && !imageError;\n\n  avatarStyles.useVariants({ size, image: variant });\n\n  const rootStyle = useMemo(\n    () => [avatarStyles.root, avatarStaticStyles.root, getAvatarCustomSizeStyle(customSize), style],\n    [avatarStyles.root, customSize, style],\n  );\n\n  if (!shouldShowImage) {\n    if (fallback || alt) {\n      return (\n        <AvatarText\n          ref={ref}\n          size={size}\n          variant={variant}\n          name={alt}\n          initials={fallback}\n          abbreviationStrategy={abbreviationStrategy}\n          customSize={customSize}\n          accessibilityLabel={accessibilityLabel ?? alt ?? fallback}\n          style={style}\n          {...viewProps}\n        />\n      );\n    }\n\n    return (\n      <AvatarIcon\n        ref={ref}\n        size={size}\n        variant={variant}\n        icon={icon}\n        customSize={customSize}\n        accessibilityLabel={accessibilityLabel ?? alt}\n        style={style}\n        {...viewProps}\n      />\n    );\n  }\n\n  return (\n    <Box\n      ref={ref}\n      accessibilityRole=\"image\"\n      accessibilityLabel={accessibilityLabel ?? alt}\n      {...viewProps}\n      style={rootStyle}\n    >\n      <RNImage\n        source={{ uri: src }}\n        accessibilityLabel={alt}\n        onError={() => setImageError(true)}\n        style={avatarStaticStyles.image}\n      />\n    </Box>\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\nconst avatarStaticStyles = StyleSheet.create({\n  root: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  image: {\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport { AvatarImage };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,cAAc,KAAK,SAAS,YAAY,EAC5C,OAAA,MACA,UAAU,wBACV,KACA,KACA,UACA,MACA,sBACA,YACA,OACA,oBACA,KACA,GAAG,aACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,kBAAkB,QAAQ,IAAI,IAAI,CAAC;CAEzC,aAAa,YAAY;EAAE;EAAM,OAAO;EAAS,CAAC;CAElD,MAAM,YAAY,cACV;EAAC,aAAa;EAAM,mBAAmB;EAAM,yBAAyB,WAAW;EAAE;EAAM,EAC/F;EAAC,aAAa;EAAM;EAAY;EAAM,CACvC;CAED,IAAI,CAAC,iBAAiB;EACpB,IAAI,YAAY,KACd,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACT,MAAM;GACN,UAAU;GACY;GACV;GACZ,oBAAoB,sBAAsB,OAAO;GAC1C;GACP,GAAI;GACJ,CAAA;EAIN,OACE,oBAAC,YAAD;GACO;GACC;GACG;GACH;GACM;GACZ,oBAAoB,sBAAsB;GACnC;GACP,GAAI;GACJ,CAAA;;CAIN,OACE,oBAAC,KAAD;EACO;EACL,mBAAkB;EAClB,oBAAoB,sBAAsB;EAC1C,GAAI;EACJ,OAAO;YAEP,oBAACA,OAAD;GACE,QAAQ,EAAE,KAAK,KAAK;GACpB,oBAAoB;GACpB,eAAe,cAAc,KAAK;GAClC,OAAO,mBAAmB;GAC1B,CAAA;EACE,CAAA;EAER;AAEF,YAAY,cAAc;AAE1B,MAAM,qBAAqB,WAAW,OAAO;CAC3C,MAAM;EACJ,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACX;CACD,OAAO;EACL,QAAQ;EACR,OAAO;EACR;CACF,CAAC"}

package/dist/components/Avatar/AvatarText.cjs

@@ -0,0 +1,49 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Box = require("../Box.cjs");
+const require_components_Text = require("../Text.cjs");
+const require_components_Avatar_utils = require("./utils.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+//#region src/components/Avatar/AvatarText.tsx
+const AvatarText = (0, react.memo)(function AvatarText({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, abbreviationStrategy, customSize, style, accessibilityLabel, ref, ...viewProps }) {
+	generated_styles.avatarStyles.useVariants({
+		size,
+		text: variant
+	});
+	const rootStyle = (0, react.useMemo)(() => [
+		generated_styles.avatarStyles.root,
+		avatarStaticStyles.root,
+		require_components_Avatar_utils.getAvatarCustomSizeStyle(customSize),
+		style
+	], [
+		generated_styles.avatarStyles.root,
+		customSize,
+		style
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		accessibilityRole: "image",
+		accessibilityLabel: accessibilityLabel ?? name ?? initials,
+		...viewProps,
+		style: rootStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
+			color: "inherit",
+			variant: "inherit",
+			numberOfLines: 1,
+			style: generated_styles.avatarStyles.text,
+			children: initials || require_components_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
+		})
+	});
+});
+AvatarText.displayName = "AvatarText";
+const avatarStaticStyles = react_native.StyleSheet.create({ root: {
+	alignItems: "center",
+	justifyContent: "center",
+	overflow: "hidden"
+} });
+//#endregion
+exports.AvatarText = AvatarText;

package/dist/components/Avatar/AvatarText.d.cts

@@ -0,0 +1,9 @@
+
+import { AvatarTextProps } from "./types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarText.d.ts
+declare const AvatarText: _$react.NamedExoticComponent<AvatarTextProps>;
+//#endregion
+export { AvatarText };
+//# sourceMappingURL=AvatarText.d.cts.map

package/dist/components/Avatar/AvatarText.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarText.d.cts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}

package/dist/components/Avatar/AvatarText.d.ts

@@ -0,0 +1,9 @@
+
+import { AvatarTextProps } from "./types.js";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarText.d.ts
+declare const AvatarText: _$react.NamedExoticComponent<AvatarTextProps>;
+//#endregion
+export { AvatarText };
+//# sourceMappingURL=AvatarText.d.ts.map

package/dist/components/Avatar/AvatarText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarText.d.ts","names":[],"sources":["../../../src/components/Avatar/AvatarText.tsx"],"mappings":";;;;;cAcM,UAAA,EAAU,OAAA,CAAA,oBAAA,CAAA,eAAA"}