@yahoo/uds 3.123.0-beta.1 → 3.123.0

package/dist/automated-config/dist/generated/generatedConfigs.js

@@ -20,7 +20,7 @@ const AvatarConfig = {
 								primary: "secondary",
 								secondary: "secondary"
 							},
-							label: "background color",
+							label: "Background color",
 							name: "backgroundColor",
 							typeOfFixture: [
 								"spectrumColors",
@@ -380,7 +380,7 @@ const AvatarConfig = {
 								primary: "primary",
 								secondary: "primary"
 							},
-							label: "border color",
+							label: "Border color",
 							name: "borderColor",
 							typeOfFixture: [
 								"spectrumColors",
@@ -742,7 +742,7 @@ const AvatarConfig = {
 								primary: "full",
 								secondary: "sm"
 							},
-							label: "border radius",
+							label: "Border radius",
 							name: "borderRadius",
 							typeOfFixture: ["borderRadii"],
 							values: [[
@@ -760,7 +760,7 @@ const AvatarConfig = {
 								primary: "muted",
 								secondary: "muted"
 							},
-							label: "icon color",
+							label: "Icon color",
 							name: "color",
 							typeOfFixture: [
 								"spectrumColors",
@@ -1138,7 +1138,7 @@ const AvatarConfig = {
 								primary: "muted",
 								secondary: "muted"
 							},
-							label: "border color",
+							label: "Border color",
 							name: "borderColor",
 							typeOfFixture: [
 								"spectrumColors",
@@ -1500,7 +1500,7 @@ const AvatarConfig = {
 								primary: "full",
 								secondary: "sm"
 							},
-							label: "border radius",
+							label: "Border radius",
 							name: "borderRadius",
 							typeOfFixture: ["borderRadii"],
 							values: [[
@@ -1533,7 +1533,7 @@ const AvatarConfig = {
 								primary: "primary",
 								secondary: "secondary"
 							},
-							label: "background color",
+							label: "Background color",
 							name: "backgroundColor",
 							typeOfFixture: [
 								"spectrumColors",
@@ -1893,7 +1893,7 @@ const AvatarConfig = {
 								primary: "brand",
 								secondary: "secondary"
 							},
-							label: "border color",
+							label: "Border color",
 							name: "borderColor",
 							typeOfFixture: [
 								"spectrumColors",
@@ -2273,7 +2273,7 @@ const AvatarConfig = {
 								primary: "brand",
 								secondary: "secondary"
 							},
-							label: "text color",
+							label: "Text color",
 							name: "color",
 							typeOfFixture: [
 								"spectrumColors",
@@ -8688,7 +8688,7 @@ const CheckboxConfig = {
 								md: "sm",
 								sm: "sm"
 							},
-							label: "Checkbox border radius",
+							label: "Border radius",
 							name: "borderRadius",
 							typeOfFixture: ["borderRadii"],
 							values: [[
@@ -8706,7 +8706,7 @@ const CheckboxConfig = {
 								md: "thin",
 								sm: "thin"
 							},
-							label: "Checkbox border width",
+							label: "Border width",
 							name: "borderWidth",
 							typeOfFixture: ["borderWidths"],
 							values: [[
@@ -8721,7 +8721,7 @@ const CheckboxConfig = {
 								md: "5",
 								sm: "4"
 							},
-							label: "Checkbox height",
+							label: "Height",
 							name: "height",
 							typeOfFixture: ["spacingAliases"],
 							values: [[
@@ -8769,7 +8769,7 @@ const CheckboxConfig = {
 								md: "5",
 								sm: "4"
 							},
-							label: "Checkbox width",
+							label: "Width",
 							name: "width",
 							typeOfFixture: ["spacingAliases"],
 							values: [[
@@ -8939,7 +8939,7 @@ const CheckboxConfig = {
 									primary: "secondary",
 									secondary: "secondary"
 								},
-								label: "Checkbox background color",
+								label: "Background color",
 								name: "backgroundColor",
 								pseudoStates: [
 									"hover",
@@ -9306,7 +9306,7 @@ const CheckboxConfig = {
 									primary: "tertiary",
 									secondary: "tertiary"
 								},
-								label: "border color",
+								label: "Border color",
 								name: "borderColor",
 								pseudoStates: [
 									"hover",

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 const require_components_client_Avatar_AvatarImage = require('./AvatarImage.cjs');
+let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/client/Avatar/Avatar.tsx
@@ -25,9 +26,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * ```
 *
 */
-const Avatar = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, { ...props });
-};
+const Avatar = (0, react.forwardRef)((props, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarImage.AvatarImage, {
+		ref,
+		...props
+	});
+});
 Avatar.displayName = "Avatar";
 
 //#endregion

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

@@ -1,6 +1,6 @@
 
 import { AvatarImageProps } from "./AvatarImage.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/Avatar.d.ts
 type AvatarProps = AvatarImageProps;
@@ -23,9 +23,6 @@ type AvatarProps = AvatarImageProps;
  * ```
  *
  */
-declare const Avatar: {
-  (props: AvatarProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const Avatar: react.ForwardRefExoticComponent<AvatarImageProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Avatar, type AvatarProps };

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

@@ -1,6 +1,6 @@
 
 import { AvatarImageProps } from "./AvatarImage.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/Avatar.d.ts
 type AvatarProps = AvatarImageProps;
@@ -23,9 +23,6 @@ type AvatarProps = AvatarImageProps;
  * ```
  *
  */
-declare const Avatar: {
-  (props: AvatarProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const Avatar: react.ForwardRefExoticComponent<AvatarImageProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Avatar, type AvatarProps };

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

@@ -1,6 +1,7 @@
 "use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 import { AvatarImage } from "./AvatarImage.js";
+import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/client/Avatar/Avatar.tsx
@@ -23,9 +24,12 @@ import { jsx } from "react/jsx-runtime";
 * ```
 *
 */
-const Avatar = (props) => {
-	return /* @__PURE__ */ jsx(AvatarImage, { ...props });
-};
+const Avatar = forwardRef((props, ref) => {
+	return /* @__PURE__ */ jsx(AvatarImage, {
+		ref,
+		...props
+	});
+});
 Avatar.displayName = "Avatar";
 
 //#endregion

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

@@ -24,7 +24,7 @@ const mapVariantToIcon = {
 * @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 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 classNames = (0, react.useMemo)(() => ({
 		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
@@ -41,6 +41,7 @@ const AvatarIcon = ({ size = require_components_client_Avatar_utils.DEFAULT_AVAT
 	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
 	const iconSvg = icon ?? mapVariantToIcon[variant ?? "primary"];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -58,7 +59,7 @@ const AvatarIcon = ({ size = require_components_client_Avatar_utils.DEFAULT_AVAT
 			})
 		})
 	});
-};
+});
 AvatarIcon.displayName = "AvatarIcon";
 
 //#endregion

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

@@ -2,7 +2,7 @@
 import { UniversalAvatarIconProps } from "../../../types/dist/index.cjs";
 import { IconPropsWithSVGProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
@@ -22,17 +22,6 @@ interface AvatarIconProps extends UniversalAvatarIconProps {
  * @param props - Props for icon variant.
  * @returns The AvatarIcon element.
  */
-declare const AvatarIcon: {
-  ({
-    size,
-    variant,
-    customSize,
-    icon,
-    slotProps,
-    className,
-    ...props
-  }: AvatarIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarIcon: react.ForwardRefExoticComponent<AvatarIconProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarIcon, type AvatarIconProps };

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

@@ -2,7 +2,7 @@
 import { UniversalAvatarIconProps } from "../../../types/dist/index.js";
 import { IconPropsWithSVGProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarIcon.d.ts
 type DataAttributes = {
@@ -22,17 +22,6 @@ interface AvatarIconProps extends UniversalAvatarIconProps {
  * @param props - Props for icon variant.
  * @returns The AvatarIcon element.
  */
-declare const AvatarIcon: {
-  ({
-    size,
-    variant,
-    customSize,
-    icon,
-    slotProps,
-    className,
-    ...props
-  }: AvatarIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarIcon: react.ForwardRefExoticComponent<AvatarIconProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarIcon, type AvatarIconProps };

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

@@ -4,7 +4,7 @@ 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 { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Building, Person } from "@yahoo/uds-icons";
 
@@ -22,7 +22,7 @@ const mapVariantToIcon = {
 * @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 AvatarIcon = forwardRef(({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, customSize, icon, slotProps, className, ...props }, ref) => {
 	const classNames = useMemo(() => ({
 		root: buildAvatarRootClasses(size, {
 			avatarIconVariantRoot: variant,
@@ -39,6 +39,7 @@ const AvatarIcon = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIA
 	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
 	const iconSvg = icon ?? mapVariantToIcon[variant ?? "primary"];
 	return /* @__PURE__ */ jsx(Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -56,7 +57,7 @@ const AvatarIcon = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIA
 			})
 		})
 	});
-};
+});
 AvatarIcon.displayName = "AvatarIcon";
 
 //#endregion

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

@@ -21,7 +21,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @param props - Props for image variant.
 * @returns The AvatarImage element.
 */
-const AvatarImage = ({ size = require_components_client_Avatar_utils.DEFAULT_AVATAR_SIZE, variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }) => {
+const AvatarImage = (0, react.forwardRef)(({ size = require_components_client_Avatar_utils.DEFAULT_AVATAR_SIZE, variant = require_components_client_Avatar_utils.DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }, ref) => {
 	const [loadingState, setLoadingState] = (0, react.useState)("loading");
 	(0, react.useEffect)(() => {
 		let mounted = true;
@@ -53,6 +53,7 @@ const AvatarImage = ({ size = require_components_client_Avatar_utils.DEFAULT_AVA
 	]);
 	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
 	if (loadingState === "loaded") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -73,6 +74,7 @@ const AvatarImage = ({ size = require_components_client_Avatar_utils.DEFAULT_AVA
 		variant
 	};
 	if (fallback || alt) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarText.AvatarText, {
+		ref,
 		name: alt,
 		initials: fallback,
 		abbreviationStrategy,
@@ -80,10 +82,11 @@ const AvatarImage = ({ size = require_components_client_Avatar_utils.DEFAULT_AVA
 		...sharedProps
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Avatar_AvatarIcon.AvatarIcon, {
+		ref,
 		...sharedProps,
 		slotProps: { icon: slotProps?.icon }
 	});
-};
+});
 AvatarImage.displayName = "AvatarImage";
 
 //#endregion

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

@@ -4,7 +4,7 @@ import { UniversalAvatarImageProps } from "../../../tokens/types.cjs";
 import "../../../tokens/index.cjs";
 import { AvatarIconProps } from "./AvatarIcon.cjs";
 import { AvatarTextProps } from "./AvatarText.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarImage.d.ts
 type DataAttributes = {
@@ -25,22 +25,6 @@ interface AvatarImageProps extends UniversalAvatarImageProps {
  * @param props - Props for image variant.
  * @returns The AvatarImage element.
  */
-declare const AvatarImage: {
-  ({
-    size,
-    variant,
-    src,
-    srcSet,
-    customSize,
-    alt,
-    abbreviationStrategy,
-    fallback,
-    className,
-    imageProps,
-    slotProps,
-    ...props
-  }: AvatarImageProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarImage: react.ForwardRefExoticComponent<AvatarImageProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarImage, type AvatarImageProps };

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

@@ -4,7 +4,7 @@ import { UniversalAvatarImageProps } from "../../../tokens/types.js";
 import "../../../tokens/index.js";
 import { AvatarIconProps } from "./AvatarIcon.js";
 import { AvatarTextProps } from "./AvatarText.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarImage.d.ts
 type DataAttributes = {
@@ -25,22 +25,6 @@ interface AvatarImageProps extends UniversalAvatarImageProps {
  * @param props - Props for image variant.
  * @returns The AvatarImage element.
  */
-declare const AvatarImage: {
-  ({
-    size,
-    variant,
-    src,
-    srcSet,
-    customSize,
-    alt,
-    abbreviationStrategy,
-    fallback,
-    className,
-    imageProps,
-    slotProps,
-    ...props
-  }: AvatarImageProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarImage: react.ForwardRefExoticComponent<AvatarImageProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarImage, type AvatarImageProps };

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

@@ -6,7 +6,7 @@ import { Image as Image$1 } from "../../Image.js";
 import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles } from "./utils.js";
 import { AvatarIcon } from "./AvatarIcon.js";
 import { AvatarText } from "./AvatarText.js";
-import { useEffect, useMemo, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/client/Avatar/AvatarImage.tsx
@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 * @param props - Props for image variant.
 * @returns The AvatarImage element.
 */
-const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }) => {
+const AvatarImage = forwardRef(({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, src, srcSet, customSize, alt, abbreviationStrategy, fallback, className, imageProps, slotProps, ...props }, ref) => {
 	const [loadingState, setLoadingState] = useState("loading");
 	useEffect(() => {
 		let mounted = true;
@@ -51,6 +51,7 @@ const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARI
 	]);
 	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
 	if (loadingState === "loaded") return /* @__PURE__ */ jsx(Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -71,6 +72,7 @@ const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARI
 		variant
 	};
 	if (fallback || alt) return /* @__PURE__ */ jsx(AvatarText, {
+		ref,
 		name: alt,
 		initials: fallback,
 		abbreviationStrategy,
@@ -78,10 +80,11 @@ const AvatarImage = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARI
 		...sharedProps
 	});
 	return /* @__PURE__ */ jsx(AvatarIcon, {
+		ref,
 		...sharedProps,
 		slotProps: { icon: slotProps?.icon }
 	});
-};
+});
 AvatarImage.displayName = "AvatarImage";
 
 //#endregion

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

@@ -18,7 +18,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 * @param props - Props for text variant.
 * @returns The AvatarText element.
 */
-const AvatarText = ({ 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 }) => {
+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 classNames = (0, react.useMemo)(() => ({
 		root: require_components_client_Avatar_utils.buildAvatarRootClasses(size, {
 			avatarTextVariantRoot: variant,
@@ -32,6 +32,7 @@ const AvatarText = ({ size = require_components_client_Avatar_utils.DEFAULT_AVAT
 	]);
 	const inlineStyles = (0, react.useMemo)(() => require_components_client_Avatar_utils.buildInlineSizeStyles(customSize), [customSize]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Box.Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -44,7 +45,7 @@ const AvatarText = ({ size = require_components_client_Avatar_utils.DEFAULT_AVAT
 			children: initials || require_components_client_Avatar_utils.generateAvatarAbbreviation(name, abbreviationStrategy)
 		})
 	});
-};
+});
 AvatarText.displayName = "AvatarText";
 
 //#endregion

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

@@ -2,7 +2,7 @@
 import { UniversalAvatarTextProps } from "../../../types/dist/index.cjs";
 import "../../../tokens/index.cjs";
 import { TextProps } from "../../Text.cjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarText.d.ts
 type DataAttributes = {
@@ -22,19 +22,6 @@ interface AvatarTextProps extends UniversalAvatarTextProps {
  * @param props - Props for text variant.
  * @returns The AvatarText element.
  */
-declare const AvatarText: {
-  ({
-    size,
-    variant,
-    name,
-    initials,
-    customSize,
-    abbreviationStrategy,
-    className,
-    slotProps,
-    ...props
-  }: AvatarTextProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarText: react.ForwardRefExoticComponent<AvatarTextProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarText, type AvatarTextProps };

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

@@ -2,7 +2,7 @@
 import { UniversalAvatarTextProps } from "../../../types/dist/index.js";
 import "../../../tokens/index.js";
 import { TextProps } from "../../Text.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react from "react";
 
 //#region src/components/client/Avatar/AvatarText.d.ts
 type DataAttributes = {
@@ -22,19 +22,6 @@ interface AvatarTextProps extends UniversalAvatarTextProps {
  * @param props - Props for text variant.
  * @returns The AvatarText element.
  */
-declare const AvatarText: {
-  ({
-    size,
-    variant,
-    name,
-    initials,
-    customSize,
-    abbreviationStrategy,
-    className,
-    slotProps,
-    ...props
-  }: AvatarTextProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
+declare const AvatarText: react.ForwardRefExoticComponent<AvatarTextProps & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { AvatarText, type AvatarTextProps };

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

@@ -4,7 +4,7 @@ import { cx } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Text } from "../../Text.js";
 import { DEFAULT_AVATAR_SIZE, DEFAULT_AVATAR_VARIANT, buildAvatarRootClasses, buildInlineSizeStyles, generateAvatarAbbreviation } from "./utils.js";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/client/Avatar/AvatarText.tsx
@@ -16,7 +16,7 @@ import { jsx } from "react/jsx-runtime";
 * @param props - Props for text variant.
 * @returns The AvatarText element.
 */
-const AvatarText = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }) => {
+const AvatarText = forwardRef(({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIANT, name, initials, customSize, abbreviationStrategy, className, slotProps, ...props }, ref) => {
 	const classNames = useMemo(() => ({
 		root: buildAvatarRootClasses(size, {
 			avatarTextVariantRoot: variant,
@@ -30,6 +30,7 @@ const AvatarText = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIA
 	]);
 	const inlineStyles = useMemo(() => buildInlineSizeStyles(customSize), [customSize]);
 	return /* @__PURE__ */ jsx(Box, {
+		ref,
 		className: classNames.root,
 		style: inlineStyles.root,
 		...props,
@@ -42,7 +43,7 @@ const AvatarText = ({ size = DEFAULT_AVATAR_SIZE, variant = DEFAULT_AVATAR_VARIA
 			children: initials || generateAvatarAbbreviation(name, abbreviationStrategy)
 		})
 	});
-};
+});
 AvatarText.displayName = "AvatarText";
 
 //#endregion

package/dist/components/client/Menu/Menu.ItemCheckbox.d.cts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Menu/Menu.ItemCheckbox.d.ts

@@ -88,6 +88,6 @@ interface MenuItemCheckboxProps extends Omit<PressableProps, 'asChild'>, HtmlBut
  *
  * @related [Menu](https://uds.build/docs/components/menu), [Menu.Item](https://uds.build/docs/components/menu-item)
  **/
-declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "active" | "rootProps" | "hideEndIcon"> & react.RefAttributes<HTMLDivElement>>;
+declare const MenuItemCheckbox: react.ForwardRefExoticComponent<Omit<MenuItemCheckboxProps, "rootProps" | "hideEndIcon" | "active"> & react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { MenuItemCheckbox, type MenuItemCheckboxProps };

package/dist/components/client/Pressable.cjs

@@ -44,7 +44,11 @@ const Slot = require_utils_createSlot.createSlot();
 * @related [Button](https://uds.build/docs/components/button), [IconButton](https://uds.build/docs/components/icon-button)
 *
 */
-const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild, onPress, onClick = onPress, 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, dropShadow, insetShadow, ...props }, ref) {
+const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild, onPress, onClick, 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, dropShadow, insetShadow, ...props }, ref) {
+	const handleClick = onPress || onClick ? (e) => {
+		onClick?.(e);
+		onPress?.();
+	} : void 0;
 	const styles = require_styles_styler.getStyles({
 		backgroundColor,
 		borderRadius,
@@ -102,7 +106,7 @@ const Pressable = (0, react.forwardRef)(function Pressable({ className, asChild,
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(asChild ? Slot : "button", {
 		className: styles,
 		ref,
-		onClick,
+		onClick: handleClick,
 		tabIndex: 0,
 		...props
 	});