@radix-ui/themes/dist/esm/components/avatar.js

[](https://radix-ui.com/themes)

"use client";import*as r from"react";import m from"classnames";import*as l from"@radix-ui/react-avatar";import{avatarPropDefs as f}from"./avatar.props.js";import{extractProps as A,getSubtree as g}from"../helpers/index.js";import{marginPropDefs as y}from"../props/index.js";const i=r.forwardRef((a,e)=>{const{asChild:o,children:t,className:p,style:s,color:v,radius:d,...P}=A(a,f,y);return r.createElement(l.Root,{"data-accent-color":v,"data-radius":d,className:m("rt-reset","rt-AvatarRoot",p),style:s,asChild:o},g({asChild:o,children:t},r.createElement(n,{ref:e,...P})))});i.displayName="Avatar";const n=r.forwardRef(({fallback:a,...e},o)=>{const[t,p]=r.useState("idle");return r.createElement(r.Fragment,null,t==="idle"||t==="loading"?r.createElement("span",{className:"rt-AvatarFallback"}):null,t==="error"?r.createElement(l.Fallback,{className:m("rt-AvatarFallback",{"rt-one-letter":typeof a=="string"&&a.length===1,"rt-two-letters":typeof a=="string"&&a.length===2}),delayMs:0},a):null,r.createElement(l.Image,{ref:o,className:"rt-AvatarImage",...e,onLoadingStatusChange:s=>{e.onLoadingStatusChange?.(s),p(s)}}))});n.displayName="AvatarImpl";export{i as Avatar};
//# sourceMappingURL=avatar.js.map