@snowball-tech/fractal/dist/Avatar/Avatar.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{Dropdown as i}from"../Dropdown/Dropdown.js";import{GROUP_NAME as a,sizeToTypographyVariant as o}from"./Avatar.constants.js";import s from"lodash/fp/isEmpty.js";import c from"lodash/fp/omit.js";import{jsx as l}from"react/jsx-runtime";import{UilUser as u}from"@tooni/iconscout-unicons-react";const d=({children:d,disabled:f=!1,imageUrl:p,name:m,rawChildren:h=!1,size:g=`m`,..._})=>{let v={s:`h-5 max-h-5 min-h-5 w-5 max-w-5 min-w-5`,m:`h-6 max-h-6 min-h-6 w-6 max-w-6 min-w-6`,l:`h-7 max-h-7 min-h-7 w-7 max-w-7 min-w-7`,xl:`h-8 max-h-8 min-h-8 w-8 max-w-8 min-w-8`,fluid:`w-full h-full min-h-5 min-w-5`},y={s:`h-[calc(theme(spacing.5)/2)] max-h-[calc(theme(spacing.5)/2)] min-h-[calc(theme(spacing.5)/2)] w-[calc(theme(spacing.5)/2)] max-w-[calc(theme(spacing.5)/2)] min-w-[calc(theme(spacing.5)/2)]`,m:`h-3 max-h-3 min-h-3 w-3 max-w-3 min-w-3`,l:`h-[calc(theme(spacing.7)/2)] max-h-[calc(theme(spacing.7)/2)] min-h-[calc(theme(spacing.7)/2)] w-[calc(theme(spacing.7)/2)] max-w-[calc(theme(spacing.7)/2)] min-w-[calc(theme(spacing.7)/2)]`,xl:`h-4 max-h-4 min-h-4 w-4 max-w-4 min-w-4`,fluid:`w-full h-full min-h-[calc(theme(spacing.5)/2)] min-w-[calc(theme(spacing.5)/2)]`},b=t(`${e}-${a}__bubble`,`rounded-full border-1 border-normal`,v[g]),x=m?.split(` `).map(e=>e.charAt(0).toUpperCase()).slice(0,2).join(``),S=!!d,C=s(p)?l(r,{"aria-label":m,className:t(b,`flex items-center justify-center overflow-hidden bg-decorative-pink-70 text-dark`,s(x)?`${e}-${a}__bubble--with-icon`:`${e}-${a}__bubble--with-initials`,g===`fluid`?`[font-size:0.75rem] @[56px]:[font-size:1rem] @[64px]:[font-size:1.2rem] @[72px]:[font-size:1.4rem] @[80px]:[font-size:1.6rem] @[88px]:[font-size:1.8rem] @[96px]:[font-size:2rem] @[104px]:[font-size:2.2rem] @[112px]:[font-size:2.44rem] @[120px]:[font-size:2.6rem] @[128px]:[font-size:2.8rem] @[136px]:[font-size:3rem] @[144px]:[font-size:3.2rem] @[152px]:[font-size:3.44rem] @[160px]:[font-size:3.6rem] @[168px]:[font-size:3.83rem] @[176px]:[font-size:4rem] @[184px]:[font-size:4.2rem] @[192px]:[font-size:4.4rem] @[200px]:[font-size:4.6rem] @[208px]:[font-size:4.81rem] @[216px]:[font-size:5rem] @[224px]:[font-size:5.2rem] @[232px]:[font-size:5.4rem] @[240px]:[font-size:5.65rem]`:``),element:`div`,title:m,variant:o[g],...c([`className`],_),children:s(x)?l(u,{className:t(`${e}-${a}__bubble`,y[g])}):x}):l(`div`,{"aria-label":m,className:t(b,`bg-cover bg-center bg-no-repeat`,`${e}-${a}__bubble--with-picture`),style:{backgroundImage:`url(${p})`},title:m,...c([`className`],_)});return S&&!f?l(`div`,{className:n(`${e}-${a}`,`${e}-${a}--${g}`,h?`${e}-${a}--with-raw-children cursor-default`:`${e}-${a}--with-menu cursor-pointer`,`@container`,g===`fluid`?`h-full w-full`:v[g],_.className),children:h?d:l(i,{className:`${e}-${a}__dropdown`,disabled:f,trigger:C,children:d})}):l(`div`,{className:n(`${e}-${a}`,`${e}-${a}--${g}`,`${e}-${a}--empty`,`cursor-default @container`,g===`fluid`?`h-full w-full`:v[g],f?`${e}-${a}--disabled`:``,_.className),children:C})};d.displayName=`Avatar`;export{d as Avatar,d as default};
//# sourceMappingURL=Avatar.js.map