chore(avatar): image props getter created

packages/components/avatar/src/avatar.tsx

@@ -13,16 +13,14 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
     icon = <AvatarIcon />,
     alt,
     domRef,
-    imgRef,
     styles,
     slots,
     name,
-    isImgLoaded,
     showFallback,
-    imgStyles,
-    getAvatarProps,
-    getInitials,
     fallback: fallbackComponent,
+    getInitials,
+    getAvatarProps,
+    getImageProps,
   } = useAvatar({
     ref,
     ...props,
@@ -58,15 +56,7 @@ const Avatar = forwardRef<AvatarProps, "span">((props, ref) => {
 
   return (
     <Component ref={domRef} {...getAvatarProps()}>
-      {src && (
-        <img
-          ref={imgRef}
-          alt={alt}
-          className={slots.img({class: imgStyles})}
-          data-loaded={isImgLoaded}
-          src={src}
-        />
-      )}
+      {src && <img {...getImageProps()} alt={alt} />}
       {fallback}
     </Component>
   );

packages/components/avatar/src/use-avatar.ts

@@ -155,11 +155,6 @@ export function useAvatar(props: UseAvatarProps) {
     return "appearance-none outline-none border-none cursor-pointer";
   }, [as]);
 
-  const imgStyles = clsx(
-    "transition-opacity !duration-500 opacity-0 data-[loaded=true]:opacity-100",
-    styles?.img,
-  );
-
   const baseStyles = clsx(styles?.base, className);
 
   const canBeFocused = useMemo(() => {
@@ -177,6 +172,16 @@ export function useAvatar(props: UseAvatarProps) {
     [canBeFocused, slots, baseStyles, buttonStyles, focusProps, otherProps],
   );
 
+  const getImageProps = useCallback<PropGetter>(
+    () => ({
+      ref: imgRef,
+      src: src,
+      "data-loaded": isImgLoaded,
+      className: slots.img({class: styles?.img}),
+    }),
+    [slots, isImgLoaded, src, imgRef],
+  );
+
   return {
     Component,
     src,
@@ -191,9 +196,9 @@ export function useAvatar(props: UseAvatarProps) {
     isImgLoaded,
     showFallback,
     ignoreFallback,
-    imgStyles,
-    getAvatarProps,
     getInitials,
+    getAvatarProps,
+    getImageProps,
   };
 }
 

packages/core/theme/src/components/avatar.ts

@@ -27,7 +27,16 @@ const avatar = tv({
       "text-white",
       "z-10",
     ],
-    img: ["flex", "object-cover", "w-full", "h-full"],
+    img: [
+      "flex",
+      "object-cover",
+      "w-full",
+      "h-full",
+      "transition-opacity",
+      "!duration-500",
+      "opacity-0",
+      "data-[loaded=true]:opacity-100",
+    ],
     fallback: [...translateCenterClasses, "flex", "items-center", "justify-center"],
     name: [...translateCenterClasses, "font-semibold", "text-center", "text-inherit"],
     icon: [