@yahoo/uds 3.135.0 → 3.136.0

package/dist/components/VStack.d.cts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.cjs";
+import { UniversalStackProps } from "../types/dist/index.cjs";
 import { DivProps } from "./Box.cjs";
 import * as _$react from "react";
 

package/dist/components/VStack.d.ts

@@ -1,5 +1,5 @@
 
-import { UniversalStackProps } from "../types/src/index.js";
+import { UniversalStackProps } from "../types/dist/index.js";
 import { DivProps } from "./Box.js";
 import * as _$react from "react";
 

package/dist/components/{Avatar → client/Avatar}/Avatar.cjs

@@ -1,12 +1,11 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../_virtual/_rolldown/runtime.cjs");
-const require_components_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
-const require_components_Avatar_AvatarText = require("./AvatarText.cjs");
-const require_components_client_Avatar_AvatarImage = require("../client/Avatar/AvatarImage.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_components_client_Avatar_AvatarImage = require("./AvatarImage.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/Avatar/Avatar.tsx
+//#region src/components/client/Avatar/Avatar.tsx
 /**
 * **👤 Avatar Component**
 *
@@ -14,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
 * @param props - Combined Avatar props.
 * @returns The Avatar element.
-* @componentType Server component
+* @componentType Client component
 * @example ```tsx
 * import { Avatar } from '@yahoo/uds';
 *
@@ -27,24 +26,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 */
 const Avatar = (0, react.forwardRef)((props, ref) => {
-	const { src, srcSet, alt, fallback, abbreviationStrategy, slotProps, ...restProps } = props;
-	if (src || srcSet) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, {
 		ref,
 		...props
 	});
-	if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarText.AvatarText, {
-		ref,
-		name: alt,
-		initials: fallback,
-		abbreviationStrategy,
-		slotProps: { text: slotProps?.text },
-		...restProps
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarIcon.AvatarIcon, {
-		ref,
-		slotProps: { icon: slotProps?.icon },
-		...restProps
-	});
 });
 Avatar.displayName = "Avatar";
 //#endregion

package/dist/components/{Avatar → client/Avatar}/Avatar.d.cts

@@ -1,8 +1,8 @@
 
-import { AvatarImageProps } from "./AvatarImage.types.cjs";
+import { AvatarImageProps } from "./AvatarImage.cjs";
 import * as _$react from "react";
 
-//#region src/components/Avatar/Avatar.d.ts
+//#region src/components/client/Avatar/Avatar.d.ts
 type AvatarProps = AvatarImageProps;
 /**
  * **👤 Avatar Component**
@@ -11,7 +11,7 @@ type AvatarProps = AvatarImageProps;
  * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
  * @param props - Combined Avatar props.
  * @returns The Avatar element.
- * @componentType Server component
+ * @componentType Client component
  * @example ```tsx
  * import { Avatar } from '@yahoo/uds';
  *

package/dist/components/{Avatar → client/Avatar}/Avatar.d.ts

@@ -1,8 +1,9 @@
 
-import { AvatarImageProps } from "./AvatarImage.types.js";
+"use client";
+import { AvatarImageProps } from "./AvatarImage.js";
 import * as _$react from "react";
 
-//#region src/components/Avatar/Avatar.d.ts
+//#region src/components/client/Avatar/Avatar.d.ts
 type AvatarProps = AvatarImageProps;
 /**
  * **👤 Avatar Component**
@@ -11,7 +12,7 @@ type AvatarProps = AvatarImageProps;
  * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
  * @param props - Combined Avatar props.
  * @returns The Avatar element.
- * @componentType Server component
+ * @componentType Client component
  * @example ```tsx
  * import { Avatar } from '@yahoo/uds';
  *

package/dist/components/{Avatar → client/Avatar}/Avatar.js

@@ -1,10 +1,9 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { AvatarIcon } from "./AvatarIcon.js";
-import { AvatarText } from "./AvatarText.js";
-import { AvatarImage } from "../client/Avatar/AvatarImage.js";
+"use client";
+import { AvatarImage } from "./AvatarImage.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Avatar/Avatar.tsx
+//#region src/components/client/Avatar/Avatar.tsx
 /**
 * **👤 Avatar Component**
 *
@@ -12,7 +11,7 @@ import { jsx } from "react/jsx-runtime";
 * @usage The Avatar component should be used whenever you need to visually represent a user's identity in your application. This includes places like profile headers, user lists, chat messages, and comment sections. It's ideal for providing a consistent visual cue for users, whether by displaying a profile image, generating initials from a name, or falling back to a default icon when no image is available.
 * @param props - Combined Avatar props.
 * @returns The Avatar element.
-* @componentType Server component
+* @componentType Client component
 * @example ```tsx
 * import { Avatar } from '@yahoo/uds';
 *
@@ -25,24 +24,10 @@ import { jsx } from "react/jsx-runtime";
 *
 */
 const Avatar = forwardRef((props, ref) => {
-	const { src, srcSet, alt, fallback, abbreviationStrategy, slotProps, ...restProps } = props;
-	if (src || srcSet) return /* @__PURE__ */ jsx(AvatarImage, {
+	return /* @__PURE__ */ jsx(AvatarImage, {
 		ref,
 		...props
 	});
-	if (fallback || alt) return /* @__PURE__ */ jsx(AvatarText, {
-		ref,
-		name: alt,
-		initials: fallback,
-		abbreviationStrategy,
-		slotProps: { text: slotProps?.text },
-		...restProps
-	});
-	return /* @__PURE__ */ jsx(AvatarIcon, {
-		ref,
-		slotProps: { icon: slotProps?.icon },
-		...restProps
-	});
 });
 Avatar.displayName = "Avatar";
 //#endregion

package/dist/components/{Avatar → client/Avatar}/AvatarIcon.cjs

@@ -1,14 +1,16 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../_virtual/_rolldown/runtime.cjs");
-const require_styles_styler = require("../../styles/styler.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");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_IconSlot = require("../../IconSlot.cjs");
+const require_components_Box = require("../../Box.cjs");
+const require_components_client_Avatar_utils = require("./utils.cjs");
 let _yahoo_uds_icons = require("@yahoo/uds-icons");
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/Avatar/AvatarIcon.tsx
+//#region src/components/client/Avatar/AvatarIcon.tsx
+/** Maps avatar variant to icon */
 const mapVariantToIcon = {
 	primary: _yahoo_uds_icons.Person,
 	secondary: _yahoo_uds_icons.Building
@@ -20,11 +22,10 @@ const mapVariantToIcon = {
 *
 * @param props - Props for icon variant.
 * @returns The AvatarIcon element.
-* @componentType Server component
 */
-const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
+const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_components_Avatar_utils.buildAvatarRootClasses(size, {
+		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
 			overflow: "hidden",
 			className: require_styles_styler.cx("overflow-hidden", className)
@@ -36,7 +37,7 @@ const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_compo
 		size,
 		variant
 	]);
-	const inlineStyles = (0, react.useMemo)(() => require_components_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
 	const iconSvg = icon ?? mapVariantToIcon[variant ?? "primary"];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,

package/dist/components/{Avatar → client/Avatar}/AvatarIcon.d.cts

@@ -1,9 +1,9 @@
 
-import { UniversalAvatarIconProps } from "../../types/src/index.cjs";
-import { IconPropsWithSVGProps } from "../../tokens/types.cjs";
+import { UniversalAvatarIconProps } from "../../../types/dist/index.cjs";
+import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import * as _$react from "react";
 
-//#region src/components/Avatar/AvatarIcon.d.ts
+//#region src/components/client/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -20,7 +20,6 @@ interface AvatarIconProps extends UniversalAvatarIconProps {
  *
  * @param props - Props for icon variant.
  * @returns The AvatarIcon element.
- * @componentType Server component
  */
 declare const AvatarIcon: _$react.ForwardRefExoticComponent<AvatarIconProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/{Avatar → client/Avatar}/AvatarIcon.d.ts

@@ -1,9 +1,10 @@
 
-import { UniversalAvatarIconProps } from "../../types/src/index.js";
-import { IconPropsWithSVGProps } from "../../tokens/types.js";
+"use client";
+import { UniversalAvatarIconProps } from "../../../types/dist/index.js";
+import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import * as _$react from "react";
 
-//#region src/components/Avatar/AvatarIcon.d.ts
+//#region src/components/client/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -20,7 +21,6 @@ interface AvatarIconProps extends UniversalAvatarIconProps {
  *
  * @param props - Props for icon variant.
  * @returns The AvatarIcon element.
- * @componentType Server component
  */
 declare const AvatarIcon: _$react.ForwardRefExoticComponent<AvatarIconProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/{Avatar → client/Avatar}/AvatarIcon.js

@@ -1,12 +1,14 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-import { cx, getStyles } from "../../styles/styler.js";
-import { Box } from "../Box.js";
-import { IconSlot } from "../IconSlot.js";
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Box } from "../../Box.js";
 import { DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
-import { forwardRef, useMemo } from "react";
 import { Building, Person } from "@yahoo/uds-icons";
+import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/Avatar/AvatarIcon.tsx
+//#region src/components/client/Avatar/AvatarIcon.tsx
+/** Maps avatar variant to icon */
 const mapVariantToIcon = {
 	primary: Person,
 	secondary: Building
@@ -18,7 +20,6 @@ const mapVariantToIcon = {
 *
 * @param props - Props for icon variant.
 * @returns The AvatarIcon element.
-* @componentType Server component
 */
 const AvatarIcon = forwardRef(({ size = "md", variant = DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
 	const classNames = useMemo(() => ({

package/dist/components/client/Avatar/AvatarImage.cjs

@@ -2,68 +2,89 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../../_virtual/_rolldown/runtime.cjs");
-const require_components_Avatar_AvatarIcon = require("../../Avatar/AvatarIcon.cjs");
-const require_components_Avatar_AvatarImageNoFallback = require("../../Avatar/AvatarImageNoFallback.cjs");
-const require_components_Avatar_AvatarText = require("../../Avatar/AvatarText.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_Box = require("../../Box.cjs");
+const require_components_Image = require("../../Image.cjs");
+const require_components_client_Avatar_utils = require("./utils.cjs");
+const require_components_client_Avatar_AvatarIcon = require("./AvatarIcon.cjs");
+const require_components_client_Avatar_AvatarText = require("./AvatarText.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/client/Avatar/AvatarImage.tsx
 /**
 * **AvatarImage Component**
 *
-* Renders an Avatar with an image.
+* Renders an Avatar with an image. If the image fails to load, it falls back first to
+* a text representation (if a name or initials are provided) and then to an icon.
 *
 * @param props - Props for image variant.
 * @returns The AvatarImage element.
 */
-const AvatarImage = (0, react.forwardRef)((props, ref) => {
-	const { src, srcSet, alt, fallback, abbreviationStrategy, slotProps, ...restProps } = props;
-	const hasImageSource = Boolean(src || srcSet);
-	const imageSourceKey = `${src ?? ""}::${srcSet ?? ""}`;
-	const [resolvedImageState, setResolvedImageState] = (0, react.useState)(null);
+const AvatarImage = (0, react.forwardRef)(({ size = "md", variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }, ref) => {
+	const [loadingState, setLoadingState] = (0, react.useState)("loading");
 	(0, react.useEffect)(() => {
-		if (!hasImageSource) return;
 		let mounted = true;
-		const img = new Image();
-		img.onload = () => {
-			if (mounted) setResolvedImageState({
-				sourceKey: imageSourceKey,
-				status: "loaded"
-			});
-		};
-		img.onerror = () => {
-			if (mounted) setResolvedImageState({
-				sourceKey: imageSourceKey,
-				status: "error"
-			});
-		};
-		if (src) img.src = src;
-		if (srcSet) img.srcset = srcSet;
+		if (src || srcSet) {
+			const img = new Image();
+			img.onload = () => {
+				if (mounted) setLoadingState("loaded");
+			};
+			img.onerror = () => {
+				if (mounted) setLoadingState("error");
+			};
+			if (src) img.src = src;
+			if (srcSet) img.srcset = srcSet;
+		} else setLoadingState("error");
 		return () => {
 			mounted = false;
 		};
-	}, [
-		hasImageSource,
-		imageSourceKey,
-		src,
-		srcSet
+	}, [src, srcSet]);
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
+			avatarImageVariantRoot: variant,
+			className: require_styles_styler.cx("overflow-hidden", className)
+		}),
+		contents: require_styles_styler.cx("w-full", "h-full", "shrink-0", "text-center", "inline-flex", "justify-center", "items-center", "object-cover")
+	}), [
+		className,
+		size,
+		variant
 	]);
-	if ((!hasImageSource ? "error" : resolvedImageState?.sourceKey === imageSourceKey ? resolvedImageState.status : "loading") === "loaded") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarImageNoFallback.AvatarImageNoFallback, {
+	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	if (loadingState === "loaded") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,
-		...props
+		className: classNames.root,
+		style: inlineStyles.root,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Image.Image, {
+			src,
+			srcSet,
+			alt,
+			className: classNames.contents,
+			style: inlineStyles.contents,
+			...imageProps,
+			...slotProps?.image
+		})
 	});
-	if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarText.AvatarText, {
+	const sharedProps = {
+		...props,
+		className,
+		size,
+		customSize,
+		variant
+	};
+	if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarText.AvatarText, {
 		ref,
 		name: alt,
 		initials: fallback,
 		abbreviationStrategy,
 		slotProps: { text: slotProps?.text },
-		...restProps
+		...sharedProps
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Avatar_AvatarIcon.AvatarIcon, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarIcon.AvatarIcon, {
 		ref,
-		slotProps: { icon: slotProps?.icon },
-		...restProps
+		...sharedProps,
+		slotProps: { icon: slotProps?.icon }
 	});
 });
 AvatarImage.displayName = "AvatarImage";

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

@@ -1,12 +1,25 @@
 
-import { AvatarImageProps } from "../../Avatar/AvatarImage.types.cjs";
+import { ImagePropsWithImgProps } from "../../../types/dist/index.cjs";
+import { UniversalAvatarImageProps } from "../../../tokens/types.cjs";
+import { AvatarIconProps } from "./AvatarIcon.cjs";
+import { AvatarTextProps } from "./AvatarText.cjs";
 import * as _$react from "react";
 
 //#region src/components/client/Avatar/AvatarImage.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface AvatarImageProps extends UniversalAvatarImageProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    image?: Partial<Omit<ImagePropsWithImgProps, 'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'> & DataAttributes>;
+  } & AvatarIconProps['slotProps'] & AvatarTextProps['slotProps'];
+}
 /**
  * **AvatarImage Component**
  *
- * Renders an Avatar with an image.
+ * Renders an Avatar with an image. If the image fails to load, it falls back first to
+ * a text representation (if a name or initials are provided) and then to an icon.
  *
  * @param props - Props for image variant.
  * @returns The AvatarImage element.

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

@@ -1,13 +1,26 @@
 
 "use client";
-import { AvatarImageProps } from "../../Avatar/AvatarImage.types.js";
+import { ImagePropsWithImgProps } from "../../../types/dist/index.js";
+import { UniversalAvatarImageProps } from "../../../tokens/types.js";
+import { AvatarIconProps } from "./AvatarIcon.js";
+import { AvatarTextProps } from "./AvatarText.js";
 import * as _$react from "react";
 
 //#region src/components/client/Avatar/AvatarImage.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface AvatarImageProps extends UniversalAvatarImageProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    image?: Partial<Omit<ImagePropsWithImgProps, 'src' | 'srcSet' | 'alt' | 'className' | 'height' | 'width'> & DataAttributes>;
+  } & AvatarIconProps['slotProps'] & AvatarTextProps['slotProps'];
+}
 /**
  * **AvatarImage Component**
  *
- * Renders an Avatar with an image.
+ * Renders an Avatar with an image. If the image fails to load, it falls back first to
+ * a text representation (if a name or initials are provided) and then to an icon.
  *
  * @param props - Props for image variant.
  * @returns The AvatarImage element.

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

@@ -1,67 +1,88 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 "use client";
-import { AvatarIcon } from "../../Avatar/AvatarIcon.js";
-import { AvatarImageNoFallback } from "../../Avatar/AvatarImageNoFallback.js";
-import { AvatarText } from "../../Avatar/AvatarText.js";
-import { forwardRef, useEffect, useState } from "react";
+import { cx } from "../../../styles/styler.js";
+import { Box } from "../../Box.js";
+import { Image as Image$1 } from "../../Image.js";
+import { DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
+import { AvatarIcon } from "./AvatarIcon.js";
+import { AvatarText } from "./AvatarText.js";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/client/Avatar/AvatarImage.tsx
 /**
 * **AvatarImage Component**
 *
-* Renders an Avatar with an image.
+* Renders an Avatar with an image. If the image fails to load, it falls back first to
+* a text representation (if a name or initials are provided) and then to an icon.
 *
 * @param props - Props for image variant.
 * @returns The AvatarImage element.
 */
-const AvatarImage = forwardRef((props, ref) => {
-	const { src, srcSet, alt, fallback, abbreviationStrategy, slotProps, ...restProps } = props;
-	const hasImageSource = Boolean(src || srcSet);
-	const imageSourceKey = `${src ?? ""}::${srcSet ?? ""}`;
-	const [resolvedImageState, setResolvedImageState] = useState(null);
+const AvatarImage = forwardRef(({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }, ref) => {
+	const [loadingState, setLoadingState] = useState("loading");
 	useEffect(() => {
-		if (!hasImageSource) return;
 		let mounted = true;
-		const img = new Image();
-		img.onload = () => {
-			if (mounted) setResolvedImageState({
-				sourceKey: imageSourceKey,
-				status: "loaded"
-			});
-		};
-		img.onerror = () => {
-			if (mounted) setResolvedImageState({
-				sourceKey: imageSourceKey,
-				status: "error"
-			});
-		};
-		if (src) img.src = src;
-		if (srcSet) img.srcset = srcSet;
+		if (src || srcSet) {
+			const img = new Image();
+			img.onload = () => {
+				if (mounted) setLoadingState("loaded");
+			};
+			img.onerror = () => {
+				if (mounted) setLoadingState("error");
+			};
+			if (src) img.src = src;
+			if (srcSet) img.srcset = srcSet;
+		} else setLoadingState("error");
 		return () => {
 			mounted = false;
 		};
-	}, [
-		hasImageSource,
-		imageSourceKey,
-		src,
-		srcSet
+	}, [src, srcSet]);
+	const classNames = useMemo(() => ({
+		root: buildAvatarRootClasses(size, {
+			avatarImageVariantRoot: variant,
+			className: cx("overflow-hidden", className)
+		}),
+		contents: cx("w-full", "h-full", "shrink-0", "text-center", "inline-flex", "justify-center", "items-center", "object-cover")
+	}), [
+		className,
+		size,
+		variant
 	]);
-	if ((!hasImageSource ? "error" : resolvedImageState?.sourceKey === imageSourceKey ? resolvedImageState.status : "loading") === "loaded") return /* @__PURE__ */ jsx(AvatarImageNoFallback, {
+	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
+	if (loadingState === "loaded") return /* @__PURE__ */ jsx(Box, {
 		ref,
-		...props
+		className: classNames.root,
+		style: inlineStyles.root,
+		...props,
+		children: /* @__PURE__ */ jsx(Image$1, {
+			src,
+			srcSet,
+			alt,
+			className: classNames.contents,
+			style: inlineStyles.contents,
+			...imageProps,
+			...slotProps?.image
+		})
 	});
+	const sharedProps = {
+		...props,
+		className,
+		size,
+		customSize,
+		variant
+	};
 	if (fallback || alt) return /* @__PURE__ */ jsx(AvatarText, {
 		ref,
 		name: alt,
 		initials: fallback,
 		abbreviationStrategy,
 		slotProps: { text: slotProps?.text },
-		...restProps
+		...sharedProps
 	});
 	return /* @__PURE__ */ jsx(AvatarIcon, {
 		ref,
-		slotProps: { icon: slotProps?.icon },
-		...restProps
+		...sharedProps,
+		slotProps: { icon: slotProps?.icon }
 	});
 });
 AvatarImage.displayName = "AvatarImage";

package/dist/components/{Avatar → client/Avatar}/AvatarText.cjs

@@ -1,13 +1,14 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../_virtual/_rolldown/runtime.cjs");
-const require_styles_styler = require("../../styles/styler.cjs");
-const require_components_Box = require("../Box.cjs");
-const require_components_Avatar_utils = require("./utils.cjs");
-const require_components_Text = require("../Text.cjs");
+require("../../../_virtual/_rolldown/runtime.cjs");
+const require_styles_styler = require("../../../styles/styler.cjs");
+const require_components_Text = require("../../Text.cjs");
+const require_components_Box = require("../../Box.cjs");
+const require_components_client_Avatar_utils = require("./utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/Avatar/AvatarText.tsx
+//#region src/components/client/Avatar/AvatarText.tsx
 /**
 * **AvatarText Component**
 *
@@ -15,11 +16,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 * @param props - Props for text variant.
 * @returns The AvatarText element.
-* @componentType Server component
 */
-const AvatarText = (0, react.forwardRef)(({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
+const AvatarText = (0, react.forwardRef)(({ size = "md", variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_components_Avatar_utils.buildAvatarRootClasses(size, {
+		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarTextVariantRoot: variant,
 			className: require_styles_styler.cx("overflow-hidden", "truncate", className)
 		}),
@@ -29,7 +29,7 @@ const AvatarText = (0, react.forwardRef)(({ size = "md", variant = require_compo
 		size,
 		variant
 	]);
-	const inlineStyles = (0, react.useMemo)(() => require_components_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
 		ref,
 		className: classNames.root,
@@ -41,7 +41,7 @@ const AvatarText = (0, react.forwardRef)(({ size = "md", variant = require_compo
 			className: classNames.text,
 			style: inlineStyles.contents,
 			...slotProps?.text,
-			children: initials || require_components_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
+			children: initials || require_components_client_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
 		})
 	});
 });