@vela-ui/react/dist/components/avatar.js

Vela UI React components

"use client"
"use strict";"use client";var h=Object.create;var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var T=(t,e)=>{for(var a in e)g(t,a,{get:e[a],enumerable:!0})},C=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of w(e))!k.call(t,n)&&n!==a&&g(t,n,{get:()=>e[n],enumerable:!(o=b(e,n))||o.enumerable});return t};var f=(t,e,a)=>(a=t!=null?h(E(t)):{},C(e||!t||!t.__esModule?g(a,"default",{value:t,enumerable:!0}):a,t)),V=t=>C(g({},"__esModule",{value:!0}),t);var j={};T(j,{Avatar:()=>M,AvatarFallback:()=>O,AvatarImage:()=>D});module.exports=V(j);var s=f(require("react")),R=require("tailwind-variants");var c=require("react");function x(t,e=[]){let a=(0,c.useRef)(()=>{throw new Error("Cannot call an event handler while rendering.")});return(0,c.useInsertionEffect)(()=>{a.current=t}),(0,c.useCallback)((...o)=>{var n;return(n=a.current)==null?void 0:n.call(a,...o)},e)}var L=f(require("react"));function S(){return L.useSyncExternalStore(()=>()=>{},()=>!0,()=>!1)}var m=f(require("react"));function I(t={}){let{strict:e=!0,errorMessage:a="useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",name:o}=t,n=m.createContext(void 0);n.displayName=o;function r(){var u;let i=m.useContext(n);if(!i&&e){let d=new Error(a);throw d.name="ContextError",(u=Error.captureStackTrace)==null||u.call(Error,d,r),d}return i}return[n.Provider,r,n]}var l=require("react/jsx-runtime"),z=(0,R.tv)({slots:{root:"relative inline-flex shrink-0 overflow-hidden",image:"aspect-square size-full",fallback:"bg-muted flex size-full items-center justify-center select-none"},variants:{size:{xs:{root:"size-6"},sm:{root:"size-8"},md:{root:"size-10"},lg:{root:"size-12"},xl:{root:"size-14"}},shape:{circle:{root:"rounded-full"},square:{root:"rounded-sm"}}},defaultVariants:{size:"md",shape:"circle"}}),{root:H,image:F,fallback:N}=z(),[q,y]=I({name:"AvatarContext"});function M({className:t,shape:e,size:a,...o}){let[n,r]=s.default.useState("idle");return(0,l.jsx)(q,{value:{shape:e,size:a,imageLoadingStatus:n,onImageLoadingStatusChange:r},children:(0,l.jsx)("span",{"data-slot":"avatar",className:H({className:t,shape:e,size:a}),...o})})}function D({src:t,className:e,onLoadingStatusChange:a=()=>{},...o}){let n=y(),r=W(t,o),i=x(u=>{a(u),n.onImageLoadingStatusChange(u)});return(0,s.useLayoutEffect)(()=>{r!=="idle"&&i(r)},[r,i]),r==="loaded"?(0,l.jsx)("img",{"data-slot":"avatar-image",className:F({className:e}),src:t,...o}):null}function O({className:t,delayMs:e,...a}){let o=y(),[n,r]=(0,s.useState)(e===void 0);return(0,s.useEffect)(()=>{if(e!==void 0){let i=window.setTimeout(()=>r(!0),e);return()=>window.clearTimeout(i)}},[e]),n&&o.imageLoadingStatus!=="loaded"?(0,l.jsx)("span",{"data-slot":"avatar-fallback",className:N({className:t}),...a}):null}function A(t,e){return t?e?(t.src!==e&&(t.src=e),t.complete&&t.naturalWidth>0?"loaded":"loading"):"error":"idle"}function W(t,{referrerPolicy:e,crossOrigin:a}){let o=S(),n=s.default.useRef(null),r=o?(n.current||(n.current=new window.Image),n.current):null,[i,u]=s.default.useState(()=>A(r,t));return(0,s.useLayoutEffect)(()=>{u(A(r,t))},[r,t]),(0,s.useLayoutEffect)(()=>{let d=P=>()=>{u(P)};if(!r)return;let p=d("loaded"),v=d("error");return r.addEventListener("load",p),r.addEventListener("error",v),e&&(r.referrerPolicy=e),typeof a=="string"&&(r.crossOrigin=a),()=>{r.removeEventListener("load",p),r.removeEventListener("error",v)}},[r,a,e]),i}0&&(module.exports={Avatar,AvatarFallback,AvatarImage});