@yahoo/uds 3.134.1 → 3.135.0-beta.1

package/dist/automated-config/dist/properties.d.cts

@@ -1,5 +1,5 @@
 
-import { ShadowPreset } from "../../types/dist/index.cjs";
+import { ShadowPreset } from "../../types/src/index.cjs";
 import { ArbitraryFixtures, InferArbitraryType } from "../../fixtures/dist/index.cjs";
 import { AllPossibleProperties, PossibleStates } from "./types/ComponentConfig.cjs";
 import { SchemaStateValue } from "./types/ConfigSchema.cjs";

package/dist/automated-config/dist/properties.d.ts

@@ -1,5 +1,5 @@
 
-import { ShadowPreset } from "../../types/dist/index.js";
+import { ShadowPreset } from "../../types/src/index.js";
 import { ArbitraryFixtures, InferArbitraryType } from "../../fixtures/dist/index.js";
 import { AllPossibleProperties, PossibleStates } from "./types/ComponentConfig.js";
 import { SchemaStateValue } from "./types/ConfigSchema.js";

package/dist/automated-config/dist/utils/buildConfigSchema.d.cts

@@ -1,5 +1,5 @@
 
-import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.cjs";
+import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/src/index.cjs";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.cjs";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.cjs";
 import { SchemaStateValue } from "../types/ConfigSchema.cjs";

package/dist/automated-config/dist/utils/buildConfigSchema.d.ts

@@ -1,5 +1,5 @@
 
-import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/dist/index.js";
+import { BannerInnerShadowOption, ElevationAlias, ShadowVariant, ShadowVariantConfig, ShadowVariantWithInvert } from "../../../types/src/index.js";
 import { ArbitraryFixtures, InferArbitraryType } from "../../../fixtures/dist/index.js";
 import { AllPossibleProperties, ComponentConfig, LayerConfig, PossibleStates, VariantConfig, VariantConfigWithComponentStates, VariantConfigWithProperties } from "../types/ComponentConfig.js";
 import { SchemaStateValue } from "../types/ConfigSchema.js";

package/dist/cli/runner.cjs

@@ -14,6 +14,10 @@ const require_cli_commands_version = require("./commands/version.cjs");
 let node_path = require("node:path");
 let ts_morph = require("ts-morph");
 //#region src/cli/runner.ts
+const isMissingIconsPackageError = (error) => {
+	const message = error instanceof Error ? error.message : String(error);
+	return message.includes("@yahoo/uds-icons/cli") || message.includes("Cannot find package") || message.includes("ERR_MODULE_NOT_FOUND");
+};
 require_cli.run([
 	require_cli_commands_version.versionCommand,
 	require_purge.makePurgeCommand(async () => {
@@ -52,6 +56,42 @@ require_cli.run([
 			componentData
 		};
 	}),
+	{
+		name: "create-icons",
+		description: "Create grouped IconDefinition modules from SVG assets directory",
+		run: async (props) => {
+			const commandModulePath = ["@yahoo/uds-icons", "cli"].join("/");
+			try {
+				const makeCreateIconsCommand = (await import(commandModulePath)).makeCreateIconsCommand;
+				if (typeof makeCreateIconsCommand !== "function") {
+					console.log("The @yahoo/uds-icons package is missing create-icons support. Please install or update @yahoo/uds-icons to use this command.");
+					return;
+				}
+				await makeCreateIconsCommand().run(props);
+			} catch (error) {
+				if (isMissingIconsPackageError(error)) {
+					try {
+						const makeCreateIconsCommand = (await import([
+							"..",
+							"..",
+							"..",
+							"icons",
+							"src",
+							"cli",
+							"index.ts"
+						].join("/"))).makeCreateIconsCommand;
+						if (typeof makeCreateIconsCommand === "function") {
+							await makeCreateIconsCommand().run(props);
+							return;
+						}
+					} catch {}
+					console.log("Install @yahoo/uds-icons to use `uds create-icons` (for example: bun add -d @yahoo/uds-icons).");
+					return;
+				}
+				throw error;
+			}
+		}
+	},
 	require_cli_commands_sync.syncCommand
 ]);
 //#endregion

package/dist/cli/runner.js

@@ -13,6 +13,10 @@ import { versionCommand } from "./commands/version.js";
 import { join } from "node:path";
 import { Project } from "ts-morph";
 //#region src/cli/runner.ts
+const isMissingIconsPackageError = (error) => {
+	const message = error instanceof Error ? error.message : String(error);
+	return message.includes("@yahoo/uds-icons/cli") || message.includes("Cannot find package") || message.includes("ERR_MODULE_NOT_FOUND");
+};
 run([
 	versionCommand,
 	makePurgeCommand(async () => {
@@ -51,6 +55,42 @@ run([
 			componentData
 		};
 	}),
+	{
+		name: "create-icons",
+		description: "Create grouped IconDefinition modules from SVG assets directory",
+		run: async (props) => {
+			const commandModulePath = ["@yahoo/uds-icons", "cli"].join("/");
+			try {
+				const makeCreateIconsCommand = (await import(commandModulePath)).makeCreateIconsCommand;
+				if (typeof makeCreateIconsCommand !== "function") {
+					console.log("The @yahoo/uds-icons package is missing create-icons support. Please install or update @yahoo/uds-icons to use this command.");
+					return;
+				}
+				await makeCreateIconsCommand().run(props);
+			} catch (error) {
+				if (isMissingIconsPackageError(error)) {
+					try {
+						const makeCreateIconsCommand = (await import([
+							"..",
+							"..",
+							"..",
+							"icons",
+							"src",
+							"cli",
+							"index.ts"
+						].join("/"))).makeCreateIconsCommand;
+						if (typeof makeCreateIconsCommand === "function") {
+							await makeCreateIconsCommand().run(props);
+							return;
+						}
+					} catch {}
+					console.log("Install @yahoo/uds-icons to use `uds create-icons` (for example: bun add -d @yahoo/uds-icons).");
+					return;
+				}
+				throw error;
+			}
+		}
+	},
 	syncCommand
 ]);
 //#endregion

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

@@ -1,11 +1,12 @@
 /*! © 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_client_Avatar_AvatarImage = require("./AvatarImage.cjs");
+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");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/client/Avatar/Avatar.tsx
+//#region src/components/Avatar/Avatar.tsx
 /**
 * **👤 Avatar Component**
 *
@@ -13,7 +14,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 Client component
+* @componentType Server component
 * @example ```tsx
 * import { Avatar } from '@yahoo/uds';
 *
@@ -26,10 +27,24 @@ let react_jsx_runtime = require("react/jsx-runtime");
 *
 */
 const Avatar = (0, react.forwardRef)((props, ref) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, {
+	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, {
 		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/{client/Avatar → Avatar}/Avatar.d.cts

@@ -1,8 +1,8 @@
 
-import { AvatarImageProps } from "./AvatarImage.cjs";
+import { AvatarImageProps } from "./AvatarImage.types.cjs";
 import * as _$react from "react";
 
-//#region src/components/client/Avatar/Avatar.d.ts
+//#region src/components/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 Client component
+ * @componentType Server component
  * @example ```tsx
  * import { Avatar } from '@yahoo/uds';
  *

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

@@ -1,9 +1,8 @@
 
-"use client";
-import { AvatarImageProps } from "./AvatarImage.js";
+import { AvatarImageProps } from "./AvatarImage.types.js";
 import * as _$react from "react";
 
-//#region src/components/client/Avatar/Avatar.d.ts
+//#region src/components/Avatar/Avatar.d.ts
 type AvatarProps = AvatarImageProps;
 /**
  * **👤 Avatar Component**
@@ -12,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 Client component
+ * @componentType Server component
  * @example ```tsx
  * import { Avatar } from '@yahoo/uds';
  *

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

@@ -1,9 +1,10 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { AvatarImage } from "./AvatarImage.js";
+import { AvatarIcon } from "./AvatarIcon.js";
+import { AvatarText } from "./AvatarText.js";
+import { AvatarImage } from "../client/Avatar/AvatarImage.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/client/Avatar/Avatar.tsx
+//#region src/components/Avatar/Avatar.tsx
 /**
 * **👤 Avatar Component**
 *
@@ -11,7 +12,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 Client component
+* @componentType Server component
 * @example ```tsx
 * import { Avatar } from '@yahoo/uds';
 *
@@ -24,10 +25,24 @@ import { jsx } from "react/jsx-runtime";
 *
 */
 const Avatar = forwardRef((props, ref) => {
-	return /* @__PURE__ */ jsx(AvatarImage, {
+	const { src, srcSet, alt, fallback, abbreviationStrategy, slotProps, ...restProps } = props;
+	if (src || srcSet) 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/{client/Avatar → Avatar}/AvatarIcon.cjs

@@ -1,16 +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_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");
+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");
+let _yahoo_uds_icons = require("@yahoo/uds-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/client/Avatar/AvatarIcon.tsx
-/** Maps avatar variant to icon */
+//#region src/components/Avatar/AvatarIcon.tsx
 const mapVariantToIcon = {
 	primary: _yahoo_uds_icons.Person,
 	secondary: _yahoo_uds_icons.Building
@@ -22,10 +20,11 @@ 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_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
+const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
+		root: require_components_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
 			overflow: "hidden",
 			className: require_styles_styler.cx("overflow-hidden", className)
@@ -37,7 +36,7 @@ const AvatarIcon = (0, react.forwardRef)(({ size = "md", variant = require_compo
 		size,
 		variant
 	]);
-	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	const inlineStyles = (0, react.useMemo)(() => require_components_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/{client/Avatar → Avatar}/AvatarIcon.d.cts

@@ -1,9 +1,9 @@
 
-import { UniversalAvatarIconProps } from "../../../types/dist/index.cjs";
-import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
+import { UniversalAvatarIconProps } from "../../types/src/index.cjs";
+import { IconPropsWithSVGProps } from "../../tokens/types.cjs";
 import * as _$react from "react";
 
-//#region src/components/client/Avatar/AvatarIcon.d.ts
+//#region src/components/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -20,6 +20,7 @@ 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/{client/Avatar → Avatar}/AvatarIcon.d.ts

@@ -1,10 +1,9 @@
 
-"use client";
-import { UniversalAvatarIconProps } from "../../../types/dist/index.js";
-import { IconPropsWithSVGProps } from "../../../tokens/types.js";
+import { UniversalAvatarIconProps } from "../../types/src/index.js";
+import { IconPropsWithSVGProps } from "../../tokens/types.js";
 import * as _$react from "react";
 
-//#region src/components/client/Avatar/AvatarIcon.d.ts
+//#region src/components/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
   [name: `data-${string}`]: string;
 };
@@ -21,6 +20,7 @@ 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/{client/Avatar → Avatar}/AvatarIcon.js

@@ -1,14 +1,12 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
-import { cx, getStyles } from "../../../styles/styler.js";
-import { IconSlot } from "../../IconSlot.js";
-import { Box } from "../../Box.js";
+import { cx, getStyles } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { IconSlot } from "../IconSlot.js";
 import { DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
-import { Building, Person } from "@yahoo/uds-icons";
 import { forwardRef, useMemo } from "react";
+import { Building, Person } from "@yahoo/uds-icons";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/client/Avatar/AvatarIcon.tsx
-/** Maps avatar variant to icon */
+//#region src/components/Avatar/AvatarIcon.tsx
 const mapVariantToIcon = {
 	primary: Person,
 	secondary: Building
@@ -20,6 +18,7 @@ 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/Avatar/AvatarImage.types.cjs

@@ -0,0 +1 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */

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

@@ -0,0 +1,18 @@
+
+import { ImagePropsWithImgProps } from "../../types/src/index.cjs";
+import { UniversalAvatarImageProps } from "../../tokens/types.cjs";
+import { AvatarIconProps } from "./AvatarIcon.cjs";
+import { AvatarTextProps } from "./AvatarText.cjs";
+
+//#region src/components/Avatar/AvatarImage.types.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'];
+}
+//#endregion
+export { type AvatarImageProps };

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

@@ -0,0 +1,18 @@
+
+import { ImagePropsWithImgProps } from "../../types/src/index.js";
+import { UniversalAvatarImageProps } from "../../tokens/types.js";
+import { AvatarIconProps } from "./AvatarIcon.js";
+import { AvatarTextProps } from "./AvatarText.js";
+
+//#region src/components/Avatar/AvatarImage.types.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'];
+}
+//#endregion
+export { type AvatarImageProps };

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

@@ -0,0 +1 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */

package/dist/components/Avatar/AvatarImageNoFallback.cjs

@@ -0,0 +1,51 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+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_Image = require("../Image.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Avatar/AvatarImageNoFallback.tsx
+/**
+* **AvatarImageNoFallback Component**
+*
+* Renders an Avatar image without client-side fallback dispatch.
+*
+* @param props - Props for image variant.
+* @returns The AvatarImageNoFallback element.
+* @componentType Server component
+*/
+const AvatarImageNoFallback = (0, react.forwardRef)(({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, className, imageProps, slotProps, ...props }, ref) => {
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_components_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
+	]);
+	const inlineStyles = (0, react.useMemo)(() => require_components_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		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
+		})
+	});
+});
+AvatarImageNoFallback.displayName = "AvatarImageNoFallback";
+//#endregion
+exports.AvatarImageNoFallback = AvatarImageNoFallback;

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

@@ -0,0 +1,18 @@
+
+import { AvatarImageProps } from "./AvatarImage.types.cjs";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarImageNoFallback.d.ts
+type AvatarImageNoFallbackProps = AvatarImageProps;
+/**
+ * **AvatarImageNoFallback Component**
+ *
+ * Renders an Avatar image without client-side fallback dispatch.
+ *
+ * @param props - Props for image variant.
+ * @returns The AvatarImageNoFallback element.
+ * @componentType Server component
+ */
+declare const AvatarImageNoFallback: _$react.ForwardRefExoticComponent<AvatarImageProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AvatarImageNoFallback, type AvatarImageNoFallbackProps };

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

@@ -0,0 +1,18 @@
+
+import { AvatarImageProps } from "./AvatarImage.types.js";
+import * as _$react from "react";
+
+//#region src/components/Avatar/AvatarImageNoFallback.d.ts
+type AvatarImageNoFallbackProps = AvatarImageProps;
+/**
+ * **AvatarImageNoFallback Component**
+ *
+ * Renders an Avatar image without client-side fallback dispatch.
+ *
+ * @param props - Props for image variant.
+ * @returns The AvatarImageNoFallback element.
+ * @componentType Server component
+ */
+declare const AvatarImageNoFallback: _$react.ForwardRefExoticComponent<AvatarImageProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { AvatarImageNoFallback, type AvatarImageNoFallbackProps };

package/dist/components/Avatar/AvatarImageNoFallback.js

@@ -0,0 +1,49 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
+import { Image } from "../Image.js";
+import { forwardRef, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Avatar/AvatarImageNoFallback.tsx
+/**
+* **AvatarImageNoFallback Component**
+*
+* Renders an Avatar image without client-side fallback dispatch.
+*
+* @param props - Props for image variant.
+* @returns The AvatarImageNoFallback element.
+* @componentType Server component
+*/
+const AvatarImageNoFallback = forwardRef(({ size = "md", variant = DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, className, imageProps, slotProps, ...props }, ref) => {
+	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
+	]);
+	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		className: classNames.root,
+		style: inlineStyles.root,
+		...props,
+		children: /* @__PURE__ */ jsx(Image, {
+			src,
+			srcSet,
+			alt,
+			className: classNames.contents,
+			style: inlineStyles.contents,
+			...imageProps,
+			...slotProps?.image
+		})
+	});
+});
+AvatarImageNoFallback.displayName = "AvatarImageNoFallback";
+//#endregion
+export { AvatarImageNoFallback };

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

@@ -1,14 +1,13 @@
 /*! © 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_Text = require("../../Text.cjs");
-const require_components_Box = require("../../Box.cjs");
-const require_components_client_Avatar_utils = require("./utils.cjs");
+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");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/components/client/Avatar/AvatarText.tsx
+//#region src/components/Avatar/AvatarText.tsx
 /**
 * **AvatarText Component**
 *
@@ -16,10 +15,11 @@ 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_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
+const AvatarText = (0, react.forwardRef)(({ size = "md", variant = require_components_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
 	const classNames = (0, react.useMemo)(() => ({
-		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
+		root: require_components_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_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
+	const inlineStyles = (0, react.useMemo)(() => require_components_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_client_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
+			children: initials || require_components_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
 		})
 	});
 });