@yahoo/uds 3.132.2 → 3.133.0-beta.2

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/automated-config/dist/utils/getConfigVariantProperties.d.cts

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.cjs";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -11,8 +11,8 @@ import { SelectedConfigurableProperty } from "../properties.js";
  * @returns A Record of layer names to their properties, or null if no properties are found
  */
 declare function getConfigVariantProperties(variant?: VariantConfig): {
-  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
-  root: Readonly<Record<string, SelectedConfigurableProperty<"backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontFamily" | "fontSize" | "fontVariationSettings" | "lineHeight" | "textTransform" | "letterSpacing" | "gap" | "color" | "opacity" | "fillOpacity" | "fontWeight" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  [x: string]: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
+  root: Readonly<Record<string, SelectedConfigurableProperty<"textTransform" | "fontSize" | "fontWeight" | "lineHeight" | "fontFamily" | "letterSpacing" | "backgroundColor" | "borderWidth" | "underlineWidth" | "strokeWidth" | "borderRadius" | "borderRadiusVar" | "borderColor" | "underlineColor" | "stroke" | "buttonSize" | "buttonVariant" | "fontVariationSettings" | "gap" | "color" | "opacity" | "fillOpacity" | "iconSize" | "spacing" | "iconVariant" | "horizontalMargin" | "bottomMargin" | "spacingHorizontal" | "spacingVertical" | "textVariant" | "textDecorationLine" | "shadow" | "shadowVar" | "insetShadow" | "bannerInnerShadow" | "height" | "width" | "scaleEffect" | "backdropBlur" | "blurBackgroundColor" | "blurBackgroundColorFallback" | "scrimBackgroundColor" | "scrimOpacity", string, readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases" | "elevationAliases")[] | readonly ("elevationAliases" | "borderWidths" | "spacingAliases")[] | readonly "borderRadii"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "elevationAliases" | "linePaletteColors")[] | readonly "buttonSizes"[] | readonly "buttonVariantsFlat"[] | readonly "textVariants"[] | readonly "spacingAliases"[] | readonly ("spectrumColors" | "alwaysPaletteAliases" | "foregroundPaletteColors")[] | readonly "opacitySteps"[] | readonly "iconSizes"[] | readonly "iconVariants"[] | readonly "textDecorationLines"[] | readonly ("elevationAliases" | "shadowVariants" | "shadowVariantConfig")[] | readonly ("shadowVariantConfig" | "shadowVariantsWithInvert")[] | readonly "bannerInnerShadowOptions"[] | readonly "scaleEffects"[] | readonly "positiveIntegers"[] | readonly ("backgroundPaletteColors" | "spectrumColors" | "alwaysPaletteAliases")[], readonly (readonly unknown[])[]>>>;
 } | null; //#endregion
 //#endregion
 export { getConfigVariantProperties };

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

@@ -1,12 +1,13 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
-const require_components_client_Avatar_AvatarImage = require('./AvatarImage.cjs');
+const require_runtime = 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**
 *
@@ -14,7 +15,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';
 *
@@ -27,10 +28,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";
 

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,10 +1,11 @@
 /*! © 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**
 *
@@ -12,7 +13,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';
 *
@@ -25,10 +26,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";
 

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

@@ -1,17 +1,15 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = 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");
+const require_runtime = 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
@@ -23,10 +21,11 @@ const mapVariantToIcon = {
 *
 * @param props - Props for icon variant.
 * @returns The AvatarIcon element.
+* @componentType Server component
 */
-const AvatarIcon = (0, react.forwardRef)(({ size = require_components_client_Avatar_utils.DEFAULT_AVATAR_SIZE, variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
+const AvatarIcon = (0, react.forwardRef)(({ size = require_components_Avatar_utils.DEFAULT_AVATAR_SIZE, 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)
@@ -38,7 +37,7 @@ const AvatarIcon = (0, react.forwardRef)(({ size = require_components_client_Ava
 		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,10 +1,10 @@
 
-import { UniversalAvatarIconProps } from "../../../types/dist/index.cjs";
-import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
-import "../../../tokens/index.cjs";
+import { UniversalAvatarIconProps } from "../../types/src/index.cjs";
+import { IconPropsWithSVGProps } from "../../tokens/types.cjs";
+import "../../tokens/index.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;
 };
@@ -21,6 +21,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,11 +1,10 @@
 
-"use client";
-import { UniversalAvatarIconProps } from "../../../types/dist/index.js";
-import { IconPropsWithSVGProps } from "../../../tokens/types.js";
-import "../../../tokens/index.js";
+import { UniversalAvatarIconProps } from "../../types/src/index.js";
+import { IconPropsWithSVGProps } from "../../tokens/types.js";
+import "../../tokens/index.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;
 };
@@ -22,6 +21,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,15 +1,13 @@
 /*! © 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_SIZE, 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
@@ -21,6 +19,7 @@ const mapVariantToIcon = {
 *
 * @param props - Props for icon variant.
 * @returns The AvatarIcon element.
+* @componentType Server component
 */
 const AvatarIcon = forwardRef(({ size = DEFAULT_AVATAR_SIZE, 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,19 @@
+
+import { ImagePropsWithImgProps } from "../../types/src/index.cjs";
+import { UniversalAvatarImageProps } from "../../tokens/types.cjs";
+import "../../tokens/index.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,19 @@
+
+import { ImagePropsWithImgProps } from "../../types/src/index.js";
+import { UniversalAvatarImageProps } from "../../tokens/types.js";
+import "../../tokens/index.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,53 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = 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 = require_components_Avatar_utils.DEFAULT_AVATAR_SIZE, 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,51 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+import { cx } from "../../styles/styler.js";
+import { Box } from "../Box.js";
+import { DEFAULT_AVATAR_SIZE, 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 = DEFAULT_AVATAR_SIZE, 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,15 +1,14 @@
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
-"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = 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');
+const require_runtime = 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**
 *
@@ -17,10 +16,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 = require_components_client_Avatar_utils.DEFAULT_AVATAR_SIZE, variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
+const AvatarText = (0, react.forwardRef)(({ size = require_components_Avatar_utils.DEFAULT_AVATAR_SIZE, 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)
 		}),
@@ -30,7 +30,7 @@ const AvatarText = (0, react.forwardRef)(({ size = require_components_client_Ava
 		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,
@@ -42,7 +42,7 @@ const AvatarText = (0, react.forwardRef)(({ size = require_components_client_Ava
 			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)
 		})
 	});
 });