UNPKG

@vela-ui/react

Version:

Vela UI React components

3 lines (2 loc) 2.18 kB
"use client" import{a as f}from"./chunk-JUHRWWM4.mjs";import{a as v}from"./chunk-FWMNYH4I.mjs";import{a as p}from"./chunk-K35CPLQX.mjs";import d,{useEffect as A,useLayoutEffect as l,useState as P}from"react";import{tv as C}from"tailwind-variants";import{jsx as u}from"react/jsx-runtime";var h=C({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:x,image:b,fallback:y}=h(),[k,S]=p({name:"AvatarContext"});function H({className:e,shape:t,size:n,...r}){let[o,a]=d.useState("idle");return u(k,{value:{shape:t,size:n,imageLoadingStatus:o,onImageLoadingStatusChange:a},children:u("span",{"data-slot":"avatar",className:x({className:e,shape:t,size:n}),...r})})}function T({src:e,className:t,onLoadingStatusChange:n=()=>{},...r}){let o=S(),a=E(e,r),s=f(i=>{n(i),o.onImageLoadingStatusChange(i)});return l(()=>{a!=="idle"&&s(a)},[a,s]),a==="loaded"?u("img",{"data-slot":"avatar-image",className:b({className:t}),src:e,...r}):null}function N({className:e,delayMs:t,...n}){let r=S(),[o,a]=P(t===void 0);return A(()=>{if(t!==void 0){let s=window.setTimeout(()=>a(!0),t);return()=>window.clearTimeout(s)}},[t]),o&&r.imageLoadingStatus!=="loaded"?u("span",{"data-slot":"avatar-fallback",className:y({className:e}),...n}):null}function L(e,t){return e?t?(e.src!==t&&(e.src=t),e.complete&&e.naturalWidth>0?"loaded":"loading"):"error":"idle"}function E(e,{referrerPolicy:t,crossOrigin:n}){let r=v(),o=d.useRef(null),a=r?(o.current||(o.current=new window.Image),o.current):null,[s,i]=d.useState(()=>L(a,e));return l(()=>{i(L(a,e))},[a,e]),l(()=>{let g=I=>()=>{i(I)};if(!a)return;let m=g("loaded"),c=g("error");return a.addEventListener("load",m),a.addEventListener("error",c),t&&(a.referrerPolicy=t),typeof n=="string"&&(a.crossOrigin=n),()=>{a.removeEventListener("load",m),a.removeEventListener("error",c)}},[a,n,t]),s}export{H as a,T as b,N as c};