@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
4 lines (3 loc) • 1.4 kB
JavaScript
'use client';
import {jsx,jsxs}from'react/jsx-runtime';import'client-only';import {Person}from'@accelint/icons';import {Root,Image,Fallback}from'@radix-ui/react-avatar';import {createContext}from'react';import {useContextProps}from'react-aria-components';import {designTokens}from'./../../tokens/tokens.js';import {Badge}from'../badge/index.js';import {Icon}from'../icon/index.js';import {AvatarStyles}from'./styles.js';const {avatar:b,image:k,fallback:C,content:I}=AvatarStyles(),i=createContext(null);function l({children:e,...o}){return jsx(i.Provider,{value:o,children:e})}l.displayName="Avatar.Provider";function n({ref:e,...o}){[o,e]=useContextProps(o,e??null,i);const{children:p,classNames:t,fallbackProps:s,imageProps:c,size:r="medium",...v}=o;return jsx(Icon.Provider,{size:r==="medium"?"large":"medium",children:jsxs(Root,{...v,ref:e,className:b({size:r,className:t?.avatar}),role:"img","data-size":r,children:[jsx(Image,{...c,className:k({className:t?.image,size:r})}),jsx(Fallback,{...s,className:C({className:t?.fallback,size:r}),children:s?.children||jsx(Icon,{children:jsx(Person,{})})}),jsx(Badge.Provider,{offset:designTokens.spacing.xs,placement:"top right",children:jsx("span",{className:I({className:t?.content,size:r}),children:p})})]})})}n.displayName="Avatar",n.Provider=l;export{n as Avatar,i as AvatarContext};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map