@yahoo/uds 3.66.1 → 3.67.0-beta.2

package/dist/components/Text.js

@@ -0,0 +1,156 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { getStyles } from "../styles/styler.js";
+import { createSlot } from "../utils/createSlot.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Text.tsx
+const Slot = createSlot();
+const asMap = {
+	display1: "h1",
+	display2: "h1",
+	display3: "h1",
+	title1: "h1",
+	title2: "h2",
+	title3: "h3",
+	title4: "h4",
+	headline1: "h5",
+	body1: "p",
+	label1: "p",
+	label2: "p",
+	label3: "p",
+	label4: "p",
+	caption1: "p",
+	caption2: "p",
+	legal1: "p",
+	"display1/emphasized": "h1",
+	"display2/emphasized": "h1",
+	"display3/emphasized": "h1",
+	"title1/emphasized": "h1",
+	"title2/emphasized": "h2",
+	"title3/emphasized": "h3",
+	"title4/emphasized": "h4",
+	"headline1/emphasized": "h5",
+	"body1/emphasized": "p",
+	"label1/emphasized": "p",
+	"label2/emphasized": "p",
+	"label3/emphasized": "p",
+	"label4/emphasized": "p",
+	"caption1/emphasized": "p",
+	"caption2/emphasized": "p",
+	"legal1/emphasized": "p",
+	ui1: "span",
+	ui2: "span",
+	ui3: "span",
+	ui4: "span",
+	ui5: "span",
+	ui6: "span",
+	"ui1/emphasized": "span",
+	"ui2/emphasized": "span",
+	"ui3/emphasized": "span",
+	"ui4/emphasized": "span",
+	"ui5/emphasized": "span",
+	"ui6/emphasized": "span",
+	inherit: "p"
+};
+/**
+* **💬 A text element that can be used to display text**
+*
+* @description
+* By default, the `Text` component uses text primary color and selects the
+* correct font, weight, and leading. It also choices appropriate semantic
+* HTML element based on the `variant` prop. For example, `body1` will use a
+* `<p>` tag, `title1` uses an `<h1>`, etc. This behavior can be overridden
+* with the `as` prop.
+*
+*
+* @example
+* ```tsx
+* import { Text } from '@yahoo/uds';
+*
+* <Text variant="body1" color="primary">
+*   Text goes here
+* </Text>
+* ```
+*
+* @usage
+* - Use `Text` to display text in your app.
+* - Use `variant` to change the size and weight of the text.
+* - Use `color` to change the color of the text.
+* - Use `as` to change the HTML tag used to render the text.
+*
+* @see The {@link https://uds.build/docs/components/text Text Docs} for more info
+*/
+const Text = forwardRef(function Text$1({ className, asChild, color = "primary", variant = "body1", as = asMap[variant], fontFamily, fontSize, fontWeight, lineHeight, textTransform, textAlign, letterSpacing, backgroundColor, borderRadius, borderTopStartRadius, borderTopEndRadius, borderBottomStartRadius, borderBottomEndRadius, borderColor, borderStartColor, borderEndColor, borderTopColor, borderBottomColor, borderWidth, borderVerticalWidth, borderHorizontalWidth, borderStartWidth, borderEndWidth, borderTopWidth, borderBottomWidth, alignContent, alignItems, alignSelf, flex, flexDirection, flexGrow, flexShrink, flexWrap, justifyContent, flexBasis, display, overflow, overflowX, overflowY, position, spacing, spacingHorizontal, spacingVertical, spacingBottom, spacingEnd, spacingStart, spacingTop, offset, offsetVertical, offsetHorizontal, offsetBottom, offsetEnd, offsetStart, offsetTop, columnGap, rowGap, ...props }, ref) {
+	const classNames = getStyles({
+		className,
+		...color && color !== "inherit" ? { color } : {},
+		...variant && variant !== "inherit" ? {
+			fontFamily: fontFamily ?? variant,
+			fontSize: fontSize ?? variant,
+			fontWeight: fontWeight ?? variant,
+			lineHeight: lineHeight ?? variant,
+			textTransform: textTransform ?? variant,
+			letterSpacing: letterSpacing ?? variant
+		} : {},
+		textAlign,
+		backgroundColor,
+		borderRadius,
+		borderTopStartRadius,
+		borderTopEndRadius,
+		borderBottomStartRadius,
+		borderBottomEndRadius,
+		borderColor,
+		borderStartColor,
+		borderEndColor,
+		borderTopColor,
+		borderBottomColor,
+		borderWidth,
+		borderVerticalWidth,
+		borderHorizontalWidth,
+		borderStartWidth,
+		borderEndWidth,
+		borderTopWidth,
+		borderBottomWidth,
+		alignContent,
+		alignItems,
+		alignSelf,
+		flex,
+		flexDirection,
+		flexGrow,
+		flexShrink,
+		flexWrap,
+		justifyContent,
+		flexBasis,
+		display,
+		overflow,
+		overflowX,
+		overflowY,
+		position,
+		spacing,
+		spacingHorizontal,
+		spacingVertical,
+		spacingBottom,
+		spacingEnd,
+		spacingStart,
+		spacingTop,
+		offset,
+		offsetVertical,
+		offsetHorizontal,
+		offsetBottom,
+		offsetEnd,
+		offsetStart,
+		offsetTop,
+		columnGap,
+		rowGap
+	});
+	return /* @__PURE__ */ jsx(asChild ? Slot : as, {
+		className: classNames,
+		ref,
+		...props
+	});
+});
+Text.displayName = "Text";
+
+//#endregion
+export { Text };

package/dist/components/VStack.cjs

@@ -0,0 +1,51 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_components_Box = require('./Box.cjs');
+const require_utils_intersperse = require('../utils/intersperse.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/VStack.tsx
+/**
+* **🥞 A layout component that arranges its children in rows using flexbox**
+*
+* @description
+* VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+* and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+* add spacing between children.
+*
+* @example
+* ```tsx
+* import { VStack, Text } from '@yahoo/uds';
+*
+* <VStack gap="6">
+*   <Text variant="body1" color="primary">First</Text>
+*   <Text variant="body1" color="primary">Second</Text>
+*   <Text variant="body1" color="primary">Third</Text>
+* </VStack>
+* ```
+*
+* @usage
+* - Create a column of items, optionally with gaps between.
+* - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+* - Create rows that fill the available space within the parent container.
+* - Create rows of proportionate size to each other (also known as a ratio-based layout).
+*
+* @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+*
+* @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+**/
+const VStack = (0, react.forwardRef)(function VStack$1({ gap, children, separator, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
+		flexDirection: "column",
+		columnGap: gap,
+		rowGap: gap,
+		...props,
+		children: separator ? require_utils_intersperse.intersperseReactChildren(children, separator) : children
+	});
+});
+VStack.displayName = "VStack";
+
+//#endregion
+exports.VStack = VStack;

package/dist/components/VStack.d.cts

@@ -0,0 +1,39 @@
+import { UniversalStackProps } from "../tokens/types.cjs";
+import "../tokens/index.cjs";
+import { DivProps } from "./Box.cjs";
+import * as react24 from "react";
+
+//#region src/components/VStack.d.ts
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react24.ForwardRefExoticComponent<UniversalStackProps & DivProps & react24.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { VStack, type VStackProps };

package/dist/components/VStack.d.ts

@@ -0,0 +1,39 @@
+import { UniversalStackProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import { DivProps } from "./Box.js";
+import * as react21 from "react";
+
+//#region src/components/VStack.d.ts
+type VStackProps = UniversalStackProps & DivProps;
+/**
+ * **🥞 A layout component that arranges its children in rows using flexbox**
+ *
+ * @description
+ * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+ * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+ * add spacing between children.
+ *
+ * @example
+ * ```tsx
+ * import { VStack, Text } from '@yahoo/uds';
+ *
+ * <VStack gap="6">
+ *   <Text variant="body1" color="primary">First</Text>
+ *   <Text variant="body1" color="primary">Second</Text>
+ *   <Text variant="body1" color="primary">Third</Text>
+ * </VStack>
+ * ```
+ *
+ * @usage
+ * - Create a column of items, optionally with gaps between.
+ * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+ * - Create rows that fill the available space within the parent container.
+ * - Create rows of proportionate size to each other (also known as a ratio-based layout).
+ *
+ * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+ *
+ * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+ **/
+declare const VStack: react21.ForwardRefExoticComponent<UniversalStackProps & DivProps & react21.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { VStack, type VStackProps };

package/dist/components/VStack.js

@@ -0,0 +1,50 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { Box } from "./Box.js";
+import { intersperseReactChildren } from "../utils/intersperse.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/VStack.tsx
+/**
+* **🥞 A layout component that arranges its children in rows using flexbox**
+*
+* @description
+* VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+* and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
+* add spacing between children.
+*
+* @example
+* ```tsx
+* import { VStack, Text } from '@yahoo/uds';
+*
+* <VStack gap="6">
+*   <Text variant="body1" color="primary">First</Text>
+*   <Text variant="body1" color="primary">Second</Text>
+*   <Text variant="body1" color="primary">Third</Text>
+* </VStack>
+* ```
+*
+* @usage
+* - Create a column of items, optionally with gaps between.
+* - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
+* - Create rows that fill the available space within the parent container.
+* - Create rows of proportionate size to each other (also known as a ratio-based layout).
+*
+* @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
+*
+* @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
+**/
+const VStack = forwardRef(function VStack$1({ gap, children, separator, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Box, {
+		ref,
+		flexDirection: "column",
+		columnGap: gap,
+		rowGap: gap,
+		...props,
+		children: separator ? intersperseReactChildren(children, separator) : children
+	});
+});
+VStack.displayName = "VStack";
+
+//#endregion
+export { VStack };

package/dist/components/client/AnimateHeightChange.cjs

@@ -0,0 +1,48 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_components_client_SpringMotionConfig = require('./SpringMotionConfig.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let motion_react = require("motion/react");
+
+//#region src/components/client/AnimateHeightChange.tsx
+const AnimateHeightChange = ({ children, reduceMotion, layoutVariant }) => {
+	const ref = (0, react.useRef)(null);
+	const [height, setHeight] = (0, react.useState)("auto");
+	(0, react.useEffect)(() => {
+		if (ref.current) {
+			const observer = new ResizeObserver((entries) => {
+				setHeight(entries[0].contentRect.height);
+			});
+			observer.observe(ref.current);
+			return () => {
+				observer.disconnect();
+			};
+		}
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_SpringMotionConfig.SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		layoutSpeed: "4",
+		layoutVariant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.m.div, {
+			className: "overflow-hidden",
+			style: {
+				height,
+				opacity: 0
+			},
+			animate: {
+				height,
+				opacity: 1
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref,
+				children
+			})
+		})
+	});
+};
+AnimateHeightChange.displayName = "AnimateHeightChange";
+
+//#endregion
+exports.AnimateHeightChange = AnimateHeightChange;

package/dist/components/client/AnimateHeightChange.d.cts

@@ -0,0 +1,20 @@
+import { SpringMotionConfigProps } from "./SpringMotionConfig.cjs";
+import { PropsWithChildren } from "react";
+import { MotionConfigProps } from "motion/react";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/components/client/AnimateHeightChange.d.ts
+interface AnimateHeightChangeProps extends PropsWithChildren {
+  reduceMotion?: MotionConfigProps['reducedMotion'];
+  layoutVariant?: SpringMotionConfigProps['layoutVariant'];
+}
+declare const AnimateHeightChange: {
+  ({
+    children,
+    reduceMotion,
+    layoutVariant
+  }: AnimateHeightChangeProps): react_jsx_runtime4.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AnimateHeightChange, type AnimateHeightChangeProps };

package/dist/components/client/AnimateHeightChange.d.ts

@@ -0,0 +1,20 @@
+import { SpringMotionConfigProps } from "./SpringMotionConfig.js";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { MotionConfigProps } from "motion/react";
+
+//#region src/components/client/AnimateHeightChange.d.ts
+interface AnimateHeightChangeProps extends PropsWithChildren {
+  reduceMotion?: MotionConfigProps['reducedMotion'];
+  layoutVariant?: SpringMotionConfigProps['layoutVariant'];
+}
+declare const AnimateHeightChange: {
+  ({
+    children,
+    reduceMotion,
+    layoutVariant
+  }: AnimateHeightChangeProps): react_jsx_runtime6.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AnimateHeightChange, type AnimateHeightChangeProps };

package/dist/components/client/AnimateHeightChange.js

@@ -0,0 +1,47 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { SpringMotionConfig } from "./SpringMotionConfig.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { m } from "motion/react";
+
+//#region src/components/client/AnimateHeightChange.tsx
+const AnimateHeightChange = ({ children, reduceMotion, layoutVariant }) => {
+	const ref = useRef(null);
+	const [height, setHeight] = useState("auto");
+	useEffect(() => {
+		if (ref.current) {
+			const observer = new ResizeObserver((entries) => {
+				setHeight(entries[0].contentRect.height);
+			});
+			observer.observe(ref.current);
+			return () => {
+				observer.disconnect();
+			};
+		}
+	}, []);
+	return /* @__PURE__ */ jsx(SpringMotionConfig, {
+		reducedMotion: reduceMotion,
+		layoutSpeed: "4",
+		layoutVariant,
+		children: /* @__PURE__ */ jsx(m.div, {
+			className: "overflow-hidden",
+			style: {
+				height,
+				opacity: 0
+			},
+			animate: {
+				height,
+				opacity: 1
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				children
+			})
+		})
+	});
+};
+AnimateHeightChange.displayName = "AnimateHeightChange";
+
+//#endregion
+export { AnimateHeightChange };

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

@@ -0,0 +1,33 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_components_client_Avatar_AvatarImage = require('./AvatarImage.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/client/Avatar/Avatar.tsx
+/**
+* **👤 Avatar Component**
+*
+* @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+* @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
+* @example ```tsx
+* import { Avatar } from '@yahoo/uds';
+*
+* <Avatar
+*    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+*    alt="Jane Doe"
+*    fallback="J"
+* />
+* ```
+*
+*/
+const Avatar = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, { ...props });
+};
+Avatar.displayName = "Avatar";
+
+//#endregion
+exports.Avatar = Avatar;

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

@@ -0,0 +1,30 @@
+import { AvatarImageProps } from "./AvatarImage.cjs";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/components/client/Avatar/Avatar.d.ts
+type AvatarProps = AvatarImageProps;
+/**
+ * **👤 Avatar Component**
+ *
+ * @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+ * @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
+ * @example ```tsx
+ * import { Avatar } from '@yahoo/uds';
+ *
+ * <Avatar
+ *    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+ *    alt="Jane Doe"
+ *    fallback="J"
+ * />
+ * ```
+ *
+ */
+declare const Avatar: {
+  (props: AvatarProps): react_jsx_runtime8.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Avatar, type AvatarProps };

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

@@ -0,0 +1,30 @@
+import { AvatarImageProps } from "./AvatarImage.js";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+
+//#region src/components/client/Avatar/Avatar.d.ts
+type AvatarProps = AvatarImageProps;
+/**
+ * **👤 Avatar Component**
+ *
+ * @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+ * @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
+ * @example ```tsx
+ * import { Avatar } from '@yahoo/uds';
+ *
+ * <Avatar
+ *    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+ *    alt="Jane Doe"
+ *    fallback="J"
+ * />
+ * ```
+ *
+ */
+declare const Avatar: {
+  (props: AvatarProps): react_jsx_runtime7.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Avatar, type AvatarProps };

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

@@ -0,0 +1,32 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+import { AvatarImage } from "./AvatarImage.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/client/Avatar/Avatar.tsx
+/**
+* **👤 Avatar Component**
+*
+* @description The avatar component visually represents a person or an organization within an interface. It helps users quickly identify individuals or entities through images, icons, or text. Commonly used in user profiles, comments, and activity feeds, avatars create a recognizable and consistent visual identity across the system. With standardized sizes, variants, and configurable options, the component ensures flexibility while maintaining design cohesion and accessibility.
+* @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
+* @example ```tsx
+* import { Avatar } from '@yahoo/uds';
+*
+* <Avatar
+*    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400"
+*    alt="Jane Doe"
+*    fallback="J"
+* />
+* ```
+*
+*/
+const Avatar = (props) => {
+	return /* @__PURE__ */ jsx(AvatarImage, { ...props });
+};
+Avatar.displayName = "Avatar";
+
+//#endregion
+export { Avatar };

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

@@ -0,0 +1,64 @@
+"use client";
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+const require_rolldown_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_client_Avatar_utils = require('./utils.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let __yahoo_uds_icons = require("@yahoo/uds-icons");
+
+//#region src/components/client/Avatar/AvatarIcon.tsx
+/** Maps avatar variant to icon */
+const mapVariantToIcon = {
+	primary: __yahoo_uds_icons.Person,
+	secondary: __yahoo_uds_icons.Building
+};
+/**
+* **AvatarIcon Component**
+*
+* Renders an Avatar with an icon representation.
+*
+* @param props - Props for icon variant.
+* @returns The AvatarIcon element.
+*/
+const AvatarIcon = ({ size = require_components_client_Avatar_utils.DEFAULT_AVATAR_SIZE, variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }) => {
+	const classNames = (0, react.useMemo)(() => ({
+		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
+			avatarIconVariantRoot: variant,
+			overflow: "hidden",
+			className: require_styles_styler.cx("overflow-hidden", className)
+		}),
+		iconContainer: require_styles_styler.cx("w-full", "h-full", "shrink-0", "overflow-hidden", "text-center", "inline-flex", "justify-center", "items-center"),
+		icon: require_styles_styler.getStyles({ avatarSizeIcon: size })
+	}), [
+		className,
+		size,
+		variant
+	]);
+	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, {
+		className: classNames.root,
+		style: inlineStyles.root,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+			className: classNames.iconContainer,
+			style: inlineStyles.contents,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
+				icon: iconSvg,
+				iconProps: {
+					variant: "fill",
+					color: "current",
+					...slotProps?.icon
+				},
+				className: classNames.icon
+			})
+		})
+	});
+};
+AvatarIcon.displayName = "AvatarIcon";
+
+//#endregion
+exports.AvatarIcon = AvatarIcon;