UNPKG

@radix-ui/themes

Version:

[![Radix Themes Logo](https://radix-ui.com/social/themes.png)](https://radix-ui.com/themes)

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