@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/components/VStack.d.ts

@@ -0,0 +1,40 @@
+import { UniversalStackProps } from "../tokens/types.js";
+import "../tokens/index.js";
+import { DivProps } from "./Box.js";
+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 };
+//# sourceMappingURL=VStack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.d.ts","names":[],"sources":["../../src/components/VStack.tsx"],"sourcesContent":[],"mappings":";;;;;;KAOK,WAAA,CAAA,CAAA,CAAc,sBAAsB;;;;AAHH,CAAA,CAAA,CAAA,CAAA;AAGW,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,IAAA,CAAA,QAAA,CAAA,GAAA,CAAA,QAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,SAAA,CAAA,OAAA,CAAA,GAAA,CAAA,EAAA,CAAA,EAAA,CAAA,IAAA,CAAA,KAAA,CAAA,GAAA,CAAA,UAAA,CAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;cA+B3C,QAAM,OAAA,CAAA,0BAAA,sBAAA,WAAA,OAAA,CAAA,cAAA"}

package/dist/components/VStack.js

@@ -0,0 +1,51 @@
+/*! © 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 };
+//# sourceMappingURL=VStack.js.map

package/dist/components/VStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.js","names":["VStack"],"sources":["../../src/components/VStack.tsx"],"sourcesContent":["import type { UniversalStackProps } from '@yahoo/uds/tokens';\nimport { forwardRef } from 'react';\n\nimport { intersperseReactChildren } from '../utils/intersperse';\nimport type { DivProps } from './Box';\nimport { Box } from './Box';\n\ntype VStackProps = UniversalStackProps & DivProps;\n\n/**\n * **🥞 A layout component that arranges its children in rows using flexbox**\n *\n * @description\n * 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)\n * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to\n * add spacing between children.\n *\n * @example\n * ```tsx\n * import { VStack, Text } from '@yahoo/uds';\n *\n * <VStack gap=\"6\">\n *   <Text variant=\"body1\" color=\"primary\">First</Text>\n *   <Text variant=\"body1\" color=\"primary\">Second</Text>\n *   <Text variant=\"body1\" color=\"primary\">Third</Text>\n * </VStack>\n * ```\n *\n * @usage\n * - Create a column of items, optionally with gaps between.\n * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.\n * - Create rows that fill the available space within the parent container.\n * - Create rows of proportionate size to each other (also known as a ratio-based layout).\n *\n * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info\n *\n * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)\n **/\nconst VStack = forwardRef<HTMLDivElement, VStackProps>(function VStack(\n  { gap, children, separator, ...props }: VStackProps,\n  ref,\n) {\n  return (\n    <Box ref={ref} flexDirection=\"column\" columnGap={gap} rowGap={gap} {...props}>\n      {separator ? intersperseReactChildren(children, separator) : children}\n    </Box>\n  );\n});\n\n// Need to re-set this because of the forwardRef wrapper\nVStack.displayName = 'VStack';\n\nexport { VStack, type VStackProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,SAAS,WAAwC,SAASA,SAC9D,EAAE,KAAK,UAAU,UAAW,GAAG,SAC/B,KACA;AACA,QACE,oBAAC;EAAS;EAAK,eAAc;EAAS,WAAW;EAAK,QAAQ;EAAK,GAAI;YACpE,YAAY,yBAAyB,UAAU,UAAU,GAAG;GACzD;EAER;AAGF,OAAO,cAAc"}

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,21 @@
+import { SpringMotionConfigProps } from "./SpringMotionConfig.cjs";
+import { PropsWithChildren } from "react";
+import { MotionConfigProps } from "motion/react";
+import * as react_jsx_runtime2 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_runtime2.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AnimateHeightChange, type AnimateHeightChangeProps };
+//# sourceMappingURL=AnimateHeightChange.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateHeightChange.d.cts","names":[],"sources":["../../../src/components/client/AnimateHeightChange.tsx"],"sourcesContent":[],"mappings":";;;;;;UAQU,wBAAA,CAAA,OAAA,CAAiC;iBAC1B;kBACC;AALkD;cAQ9D,mBAJW,CAAA,CAAA;EACC,CAAA;IAAA,QAAA;IAAA,YAAA;IAAA;EAAA,CAAA,CAAA,CAOf,wBAPe,CAAA,CAAA,CAOS,kBAAA,CAAA,GAAA,CAAA,OAPT;EAFyB,WAAA,CAAA,CAAA,MAAA;CAAiB"}

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

@@ -0,0 +1,21 @@
+import { SpringMotionConfigProps } from "./SpringMotionConfig.js";
+import { PropsWithChildren } from "react";
+import * as react_jsx_runtime7 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_runtime7.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AnimateHeightChange, type AnimateHeightChangeProps };
+//# sourceMappingURL=AnimateHeightChange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateHeightChange.d.ts","names":[],"sources":["../../../src/components/client/AnimateHeightChange.tsx"],"sourcesContent":[],"mappings":";;;;;;UAQU,wBAAA,CAAA,OAAA,CAAiC;iBAC1B;kBACC;AALkD;cAQ9D,mBAJW,CAAA,CAAA;EACC,CAAA;IAAA,QAAA;IAAA,YAAA;IAAA;EAAA,CAAA,CAAA,CAOf,wBAPe,CAAA,CAAA,CAOS,kBAAA,CAAA,GAAA,CAAA,OAPT;EAFyB,WAAA,CAAA,CAAA,MAAA;CAAiB"}

package/dist/components/client/AnimateHeightChange.js

@@ -0,0 +1,48 @@
+"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 };
+//# sourceMappingURL=AnimateHeightChange.js.map

package/dist/components/client/AnimateHeightChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateHeightChange.js","names":[],"sources":["../../../src/components/client/AnimateHeightChange.tsx"],"sourcesContent":["import type { MotionConfigProps } from 'motion/react';\nimport { m } from 'motion/react';\nimport type { PropsWithChildren } from 'react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { SpringMotionConfigProps } from './SpringMotionConfig';\nimport { SpringMotionConfig } from './SpringMotionConfig';\n\ninterface AnimateHeightChangeProps extends PropsWithChildren {\n  reduceMotion?: MotionConfigProps['reducedMotion'];\n  layoutVariant?: SpringMotionConfigProps['layoutVariant'];\n}\n\nconst AnimateHeightChange = ({\n  children,\n  reduceMotion,\n  layoutVariant,\n}: AnimateHeightChangeProps) => {\n  const ref = useRef<HTMLDivElement | null>(null);\n  const [height, setHeight] = useState<number | 'auto'>('auto');\n\n  useEffect(() => {\n    if (ref.current) {\n      const observer = new ResizeObserver((entries) => {\n        setHeight(entries[0].contentRect.height);\n      });\n      observer.observe(ref.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, []);\n\n  return (\n    <SpringMotionConfig reducedMotion={reduceMotion} layoutSpeed=\"4\" layoutVariant={layoutVariant}>\n      <m.div\n        className=\"overflow-hidden\"\n        style={{ height, opacity: 0 }}\n        animate={{ height, opacity: 1 }}\n      >\n        <div ref={ref}>{children}</div>\n      </m.div>\n    </SpringMotionConfig>\n  );\n};\n\nAnimateHeightChange.displayName = 'AnimateHeightChange';\n\nexport { AnimateHeightChange, type AnimateHeightChangeProps };\n"],"mappings":";;;;;;;AAaA,MAAM,uBAAuB,EAC3B,UACA,cACA,oBAC8B;CAC9B,MAAM,MAAM,OAA8B,KAAK;CAC/C,MAAM,CAAC,QAAQ,aAAa,SAA0B,OAAO;AAE7D,iBAAgB;AACd,MAAI,IAAI,SAAS;GACf,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,cAAU,QAAQ,GAAG,YAAY,OAAO;KACxC;AACF,YAAS,QAAQ,IAAI,QAAQ;AAE7B,gBAAa;AACX,aAAS,YAAY;;;IAGxB,EAAE,CAAC;AAEN,QACE,oBAAC;EAAmB,eAAe;EAAc,aAAY;EAAmB;YAC9E,oBAAC,EAAE;GACD,WAAU;GACV,OAAO;IAAE;IAAQ,SAAS;IAAG;GAC7B,SAAS;IAAE;IAAQ,SAAS;IAAG;aAE/B,oBAAC;IAAS;IAAM;KAAe;IACzB;GACW;;AAIzB,oBAAoB,cAAc"}

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,31 @@
+import { AvatarImageProps } from "./AvatarImage.cjs";
+import * as react_jsx_runtime15 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_runtime15.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=Avatar.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.cts","names":[],"sources":["../../../../src/components/client/Avatar/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;KAGK,WAAA,CAAA,CAAA,CAAc;;;AAHmC,CAAA;AAGnB,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,MAAA,CAAA,SAAA,CAAA,QAAA,CAAA,UAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,MAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,KAAA,CAAA,KAAA,CAAA,OAAA,CAAA,QAAA,CAAA,WAAA,CAAA,EAAA,CAAA,QAAA,CAAA,OAAA,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,QAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,CAAA,GAAA,CAAA,QAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,MAAA,CAAA,CAAA,CAAA,YAAA,CAAA,GAAA,CAAA,UAAA,CAAA,MAAA,CAAA,QAAA,CAAA,MAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,YAAA,CAAA,KAAA,CAAA,CAAA,QAAA,CAAA,CAAA,GAAA,CAAA,YAAA,CAAA,OAAA,CAAA,CAAA,GAAA,CAAA,SAAA,CAAA,OAAA,CAAA,WAAA,CAAA,KAAA,CAAA,WAAA,CAAA,MAAA,CAAA,QAAA,CAAA,GAAA,CAAA,aAAA;;;;;;;;;;;;;;;;cAqB7B;UAAiB,cAAW,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,31 @@
+import { AvatarImageProps } from "./AvatarImage.js";
+import * as react_jsx_runtime9 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_runtime9.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Avatar, type AvatarProps };
+//# sourceMappingURL=Avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","names":[],"sources":["../../../../src/components/client/Avatar/Avatar.tsx"],"sourcesContent":[],"mappings":";;;;KAGK,WAAA,CAAA,CAAA,CAAc;;;AAHmC,CAAA;AAGnB,CAAA,CAAA,CAAA,CAAA,WAAA,CAAA,GAAA,CAAA,MAAA,CAAA,SAAA,CAAA,QAAA,CAAA,UAAA,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,MAAA,CAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,CAAA,KAAA,CAAA,KAAA,CAAA,OAAA,CAAA,QAAA,CAAA,WAAA,CAAA,EAAA,CAAA,QAAA,CAAA,OAAA,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,IAAA,CAAA,CAAA,QAAA,CAAA,IAAA,CAAA,EAAA,CAAA,IAAA,CAAA,QAAA,CAAA,CAAA,QAAA,CAAA,CAAA,GAAA,CAAA,QAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,MAAA,CAAA,CAAA,CAAA,YAAA,CAAA,GAAA,CAAA,UAAA,CAAA,MAAA,CAAA,QAAA,CAAA,MAAA,CAAA,GAAA,CAAA,MAAA,CAAA,CAAA,IAAA,CAAA,YAAA,CAAA,KAAA,CAAA,CAAA,QAAA,CAAA,CAAA,GAAA,CAAA,YAAA,CAAA,OAAA,CAAA,CAAA,GAAA,CAAA,SAAA,CAAA,OAAA,CAAA,WAAA,CAAA,KAAA,CAAA,WAAA,CAAA,MAAA,CAAA,QAAA,CAAA,GAAA,CAAA,aAAA;;;;;;;;;;;;;;;;cAqB7B;UAAiB,cAAW,kBAAA,CAAA,GAAA,CAAA"}

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

@@ -0,0 +1,33 @@
+"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 };
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../../src/components/client/Avatar/Avatar.tsx"],"sourcesContent":["import type { AvatarImageProps } from './AvatarImage';\nimport { AvatarImage } from './AvatarImage';\n\ntype AvatarProps = AvatarImageProps;\n\n/**\n * **👤 Avatar Component**\n *\n * @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.\n * @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.\n * @param props - Combined Avatar props.\n * @returns The Avatar element.\n * @componentType Client component\n * @example ```tsx\n * import { Avatar } from '@yahoo/uds';\n *\n * <Avatar\n *    src=\"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400\"\n *    alt=\"Jane Doe\"\n *    fallback=\"J\"\n * />\n * ```\n *\n */\nconst Avatar = (props: AvatarProps) => {\n  return <AvatarImage {...props} />;\n};\n\nAvatar.displayName = 'Avatar';\n\nexport { Avatar, type AvatarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAM,UAAU,UAAuB;AACrC,QAAO,oBAAC,eAAY,GAAI,QAAS;;AAGnC,OAAO,cAAc"}

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;

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

@@ -0,0 +1,37 @@
+import { IconPropsWithSVGProps, UniversalAvatarIconProps } from "../../../tokens/types.cjs";
+import "../../../tokens/index.cjs";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+
+//#region src/components/client/Avatar/AvatarIcon.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface AvatarIconProps extends UniversalAvatarIconProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **AvatarIcon Component**
+ *
+ * Renders an Avatar with an icon representation.
+ *
+ * @param props - Props for icon variant.
+ * @returns The AvatarIcon element.
+ */
+declare const AvatarIcon: {
+  ({
+    size,
+    variant,
+    customSize,
+    icon,
+    slotProps,
+    className,
+    ...props
+  }: AvatarIconProps): react_jsx_runtime16.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AvatarIcon, type AvatarIconProps };
+//# sourceMappingURL=AvatarIcon.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.d.cts","names":[],"sources":["../../../../src/components/client/Avatar/AvatarIcon.tsx"],"sourcesContent":[],"mappings":";;;;;KA2BK,cAAA,CAAA,CAAA;;;UAIK,eAAA,CAAA,OAAA,CAAwB;EAJ7B,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAIK,SAAA,CAAA,CAAA,CAAA;IAGS,IAAA,CAAA,CAAA,CAAR,OAAQ,CAAA,qBAAA,CAAA,CAAA,CAAwB,cAAxB,CAAA;EAAwB,CAAA;;;;AAHe,CAAA;;;;;;cAepD;EAQH,CAAA;IAAA,IAAA;IAAA,OAAA;IAAA,UAAA;IAAA,IAAA;IAAA,SAAA;IAAA,SAAA;IAAA,CAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAAA,eAAA,CAAA,CAAA,CAAe,mBAAA,CAAA,GAAA,CAAA,OAAf;EAAe,WAAA,CAAA,CAAA,MAAA;CAAA"}

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

@@ -0,0 +1,37 @@
+import { IconPropsWithSVGProps, UniversalAvatarIconProps } from "../../../tokens/types.js";
+import "../../../tokens/index.js";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
+
+//#region src/components/client/Avatar/AvatarIcon.d.ts
+type DataAttributes = {
+  [name: `data-${string}`]: string;
+};
+interface AvatarIconProps extends UniversalAvatarIconProps {
+  /** Props to be passed into various slots within the component. */
+  slotProps?: {
+    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;
+  };
+}
+/**
+ * **AvatarIcon Component**
+ *
+ * Renders an Avatar with an icon representation.
+ *
+ * @param props - Props for icon variant.
+ * @returns The AvatarIcon element.
+ */
+declare const AvatarIcon: {
+  ({
+    size,
+    variant,
+    customSize,
+    icon,
+    slotProps,
+    className,
+    ...props
+  }: AvatarIconProps): react_jsx_runtime8.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { AvatarIcon, type AvatarIconProps };
+//# sourceMappingURL=AvatarIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.d.ts","names":[],"sources":["../../../../src/components/client/Avatar/AvatarIcon.tsx"],"sourcesContent":[],"mappings":";;;;;KA2BK,cAAA,CAAA,CAAA;;;UAIK,eAAA,CAAA,OAAA,CAAwB;EAJ7B,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,IAAA,CAAA,OAAA,CAAA,KAAA,CAAA,MAAA,CAAA,GAAA,CAAA,SAAA,CAAA,CAAA,CAAA;EAIK,SAAA,CAAA,CAAA,CAAA;IAGS,IAAA,CAAA,CAAA,CAAR,OAAQ,CAAA,qBAAA,CAAA,CAAA,CAAwB,cAAxB,CAAA;EAAwB,CAAA;;;;AAHe,CAAA;;;;;;cAepD;EAQH,CAAA;IAAA,IAAA;IAAA,OAAA;IAAA,UAAA;IAAA,IAAA;IAAA,SAAA;IAAA,SAAA;IAAA,CAAA,CAAA,CAAA;EAAA,CAAA,CAAA,CAAA,eAAA,CAAA,CAAA,CAAe,kBAAA,CAAA,GAAA,CAAA,OAAf;EAAe,WAAA,CAAA,CAAA,MAAA;CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarIcon.js","names":["mapVariantToIcon: Record<AvatarVariant, SvgIcon>"],"sources":["../../../../src/components/client/Avatar/AvatarIcon.tsx"],"sourcesContent":["import { Building, Person } from '@yahoo/uds-icons';\nimport type { SvgIcon } from '@yahoo/uds-icons/types';\nimport { useMemo } from 'react';\n\nimport { cx, getStyles } from '../../../styles/styler';\nimport type {\n  AvatarVariant,\n  IconPropsWithSVGProps,\n  UniversalAvatarIconProps,\n} from '../../../tokens';\nimport { Box } from '../../Box';\nimport { IconSlot } from '../../IconSlot';\nimport {\n  buildAvatarRootClasses,\n  buildInlineSizeStyles,\n  DEFAULT_AVATAR_SIZE,\n  DEFAULT_AVATAR_VARIANT,\n} from './utils';\n\n/** Maps avatar variant to icon */\n// TODO: This should be configurable in the future\nconst mapVariantToIcon: Record<AvatarVariant, SvgIcon> = {\n  primary: Person,\n  secondary: Building,\n};\n\n// Required because of: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69864\ntype DataAttributes = {\n  [name: `data-${string}`]: string;\n};\n\ninterface AvatarIconProps extends UniversalAvatarIconProps {\n  /** Props to be passed into various slots within the component. */\n  slotProps?: {\n    icon?: Partial<IconPropsWithSVGProps & DataAttributes>;\n  };\n}\n\n/**\n * **AvatarIcon Component**\n *\n * Renders an Avatar with an icon representation.\n *\n * @param props - Props for icon variant.\n * @returns The AvatarIcon element.\n */\nconst AvatarIcon = ({\n  size = DEFAULT_AVATAR_SIZE,\n  variant = DEFAULT_AVATAR_VARIANT,\n  customSize,\n  icon,\n  slotProps,\n  className,\n  ...props\n}: AvatarIconProps) => {\n  const classNames = useMemo(\n    () => ({\n      root: buildAvatarRootClasses(size, {\n        avatarIconVariantRoot: variant,\n        overflow: 'hidden',\n        className: cx('overflow-hidden', className),\n      }),\n\n      iconContainer: cx(\n        'w-full',\n        'h-full',\n        'shrink-0',\n        'overflow-hidden',\n        'text-center',\n        'inline-flex',\n        'justify-center',\n        'items-center',\n      ),\n\n      icon: getStyles({ avatarSizeIcon: size }),\n    }),\n    [className, size, variant],\n  );\n\n  const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);\n\n  const iconSvg = icon ?? mapVariantToIcon[variant ?? 'primary'];\n\n  return (\n    <Box className={classNames.root} style={inlineStyles.root} {...props}>\n      <Box className={classNames.iconContainer} style={inlineStyles.contents}>\n        <IconSlot\n          icon={iconSvg}\n          iconProps={{\n            variant: 'fill',\n            color: 'current',\n            ...slotProps?.icon,\n          }}\n          className={classNames.icon}\n        />\n      </Box>\n    </Box>\n  );\n};\n\nAvatarIcon.displayName = 'AvatarIcon';\n\nexport { AvatarIcon, type AvatarIconProps };\n"],"mappings":";;;;;;;;;;;AAqBA,MAAMA,mBAAmD;CACvD,SAAS;CACT,WAAW;CACZ;;;;;;;;;AAsBD,MAAM,cAAc,EAClB,OAAO,qBACP,UAAU,wBACV,YACA,MACA,WACA,UACA,GAAG,YACkB;CACrB,MAAM,aAAa,eACV;EACL,MAAM,uBAAuB,MAAM;GACjC,uBAAuB;GACvB,UAAU;GACV,WAAW,GAAG,mBAAmB,UAAU;GAC5C,CAAC;EAEF,eAAe,GACb,UACA,UACA,YACA,mBACA,eACA,eACA,kBACA,eACD;EAED,MAAM,UAAU,EAAE,gBAAgB,MAAM,CAAC;EAC1C,GACD;EAAC;EAAW;EAAM;EAAQ,CAC3B;CAED,MAAM,eAAe,cAAc,sBAAsB,WAAW,EAAE,CAAC,WAAW,CAAC;CAEnF,MAAM,UAAU,QAAQ,iBAAiB,WAAW;AAEpD,QACE,oBAAC;EAAI,WAAW,WAAW;EAAM,OAAO,aAAa;EAAM,GAAI;YAC7D,oBAAC;GAAI,WAAW,WAAW;GAAe,OAAO,aAAa;aAC5D,oBAAC;IACC,MAAM;IACN,WAAW;KACT,SAAS;KACT,OAAO;KACP,GAAG,WAAW;KACf;IACD,WAAW,WAAW;KACtB;IACE;GACF;;AAIV,WAAW,cAAc"}