tsm-ui
Version:
### Welcome to TSM-UI: Your Design System for Modern Web Development
2 lines (1 loc) • 5.23 kB
JavaScript
import{_ as h}from"./extends.bd401154.js";import{r as t}from"./index.d591fb27.js";import{$ as W,a as b,b as j,c as I}from"./index.7baf0a55.js";import{s as k}from"./index.f31275f4.js";import{a as p,F as f,j as r}from"./jsx-runtime.e41c3930.js";import{I as E,r as P}from"./IconBase.esm.b270398d.js";import"./_commonjsHelpers.712cc82f.js";import"./index.237cf077.js";import"./index.8dde8ec8.js";var i=new Map;i.set("bold",function(e){return p(f,{children:[r("circle",{cx:"128",cy:"96",r:"64",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"}),r("path",{d:"M31,216a112,112,0,0,1,194,0",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"24"})]})});i.set("duotone",function(e){return p(f,{children:[r("circle",{cx:"128",cy:"96",r:"64",opacity:"0.2"}),r("circle",{cx:"128",cy:"96",r:"64",fill:"none",stroke:e,strokeMiterlimit:"10",strokeWidth:"16"}),r("path",{d:"M31,216a112,112,0,0,1,194,0",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})]})});i.set("fill",function(){return r(f,{children:r("path",{d:"M231.9,212a120.7,120.7,0,0,0-67.1-54.2,72,72,0,1,0-73.6,0A120.7,120.7,0,0,0,24.1,212a7.7,7.7,0,0,0,0,8,7.8,7.8,0,0,0,6.9,4H225a7.8,7.8,0,0,0,6.9-4A7.7,7.7,0,0,0,231.9,212Z"})})});i.set("light",function(e){return p(f,{children:[r("circle",{cx:"128",cy:"96",r:"64",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"}),r("path",{d:"M31,216a112,112,0,0,1,194,0",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"12"})]})});i.set("thin",function(e){return p(f,{children:[r("circle",{cx:"128",cy:"96",r:"64",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"}),r("path",{d:"M31,216a112,112,0,0,1,194,0",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"8"})]})});i.set("regular",function(e){return p(f,{children:[r("circle",{cx:"128",cy:"96",r:"64",fill:"none",stroke:e,strokeMiterlimit:"10",strokeWidth:"16"}),r("path",{d:"M31,216a112,112,0,0,1,194,0",fill:"none",stroke:e,strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"16"})]})});var F=function(a,n){return P(a,n,i)},S=t.exports.forwardRef(function(e,a){return r(E,{...Object.assign({ref:a},e,{renderPath:F})})});S.displayName="User";const R=S,w="Avatar",[N,se]=W(w),[B,C]=N(w),T=t.exports.forwardRef((e,a)=>{const{__scopeAvatar:n,...o}=e,[s,c]=t.exports.useState("idle");return t.exports.createElement(B,{scope:n,imageLoadingStatus:s,onImageLoadingStatusChange:c},t.exports.createElement(b.span,h({},o,{ref:a})))}),U="AvatarImage",V=t.exports.forwardRef((e,a)=>{const{__scopeAvatar:n,src:o,onLoadingStatusChange:s=()=>{},...c}=e,g=C(U,n),d=G(o),m=j(x=>{s(x),g.onImageLoadingStatusChange(x)});return I(()=>{d!=="idle"&&m(d)},[d,m]),d==="loaded"?t.exports.createElement(b.img,h({},c,{ref:a,src:o})):null}),q="AvatarFallback",O=t.exports.forwardRef((e,a)=>{const{__scopeAvatar:n,delayMs:o,...s}=e,c=C(q,n),[g,d]=t.exports.useState(o===void 0);return t.exports.useEffect(()=>{if(o!==void 0){const m=window.setTimeout(()=>d(!0),o);return()=>window.clearTimeout(m)}},[o]),g&&c.imageLoadingStatus!=="loaded"?t.exports.createElement(b.span,h({},s,{ref:a})):null});function G(e){const[a,n]=t.exports.useState("idle");return t.exports.useEffect(()=>{if(!e){n("error");return}let o=!0;const s=new window.Image,c=g=>()=>{!o||n(g)};return n("loading"),s.onload=c("loaded"),s.onerror=c("error"),s.src=e,()=>{o=!1}},[e]),a}const H=T,K=V,Z=O,z=k(H,{borderRadius:"$full",display:"inline-block",width:"$16",height:"$16",overflow:"hidden"}),D=k(K,{width:"100%",height:"100%",objectFit:"cover",borderRadius:"inherit"}),J=k(Z,{width:"100%",height:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"$colorSecondaryAccent",color:"$colorSecondary020",svg:{width:"$6",height:"$6"}});function u(e){return p(z,{children:[r(D,{...e}),r(J,{delayMs:600,children:r(R,{})})]})}u.displayName="Avatar";try{u.displayName="Avatar",u.__docgenInfo={description:"",displayName:"Avatar",props:{asChild:{defaultValue:null,description:"",name:"asChild",required:!1,type:{name:"boolean"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}const ce={title:"Components/Avatar",component:u,args:{src:"",alt:""}},$=e=>r(u,{...e}),l=e=>r(u,{...e});l.args={src:void 0};l.argTypes={src:{control:{type:"text"}}};var v,A,L;$.parameters={...$.parameters,docs:{...(v=$.parameters)==null?void 0:v.docs,source:{originalSource:"args => <Avatar {...args} />",...(L=(A=$.parameters)==null?void 0:A.docs)==null?void 0:L.source}}};var y,_,M;l.parameters={...l.parameters,docs:{...(y=l.parameters)==null?void 0:y.docs,source:{originalSource:"args => <Avatar {...args} />",...(M=(_=l.parameters)==null?void 0:_.docs)==null?void 0:M.source}}};const ie=["Primary","WithFallback"];export{$ as Primary,l as WithFallback,ie as __namedExportsOrder,ce as default};