@mantine/core/cjs/components/Avatar/Avatar.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Avatar.cjs","names":["createVarsResolver","getInitialsColor","getSize","getRadius","polymorphicFactory","useProps","AvatarGroupContext","useStyles","Box","getInitials","AvatarPlaceholderIcon","classes","AvatarGroup"],"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["import { use, useEffect, useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  getRadius,\n  getSize,\n  MantineColor,\n  MantineGradient,\n  MantineRadius,\n  MantineSize,\n  polymorphicFactory,\n  PolymorphicFactory,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AvatarGroup, AvatarGroupContext } from './AvatarGroup/AvatarGroup';\nimport { AvatarPlaceholderIcon } from './AvatarPlaceholderIcon';\nimport { getInitialsColor } from './get-initials-color/get-initials-color';\nimport { getInitials } from './get-initials/get-initials';\nimport classes from './Avatar.module.css';\n\nexport type AvatarStylesNames = 'root' | 'placeholder' | 'image';\nexport type AvatarVariant =\n  | 'filled'\n  | 'light'\n  | 'gradient'\n  | 'outline'\n  | 'transparent'\n  | 'default'\n  | 'white';\n\nexport type AvatarCssVariables = {\n  root: '--avatar-size' | '--avatar-radius' | '--avatar-bg' | '--avatar-color' | '--avatar-bd';\n};\n\nexport interface AvatarProps extends BoxProps, StylesApiProps<AvatarFactory> {\n  /** Width and height of the avatar, numbers are converted to rem @default 'md' */\n  size?: MantineSize | (string & {}) | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default '1000px' */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color @default 'gray' */\n  color?: MantineColor | 'initials';\n\n  /** Gradient configuration for `variant=\"gradient\"` @default theme.defaultGradient */\n  gradient?: MantineGradient;\n\n  /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */\n  src?: string | null;\n\n  /** Image `alt` attribute, also used as `title` attribute for placeholder */\n  alt?: string;\n\n  /** Attributes passed down to `img` element */\n  imageProps?: React.ComponentProps<'img'>;\n\n  /** Avatar placeholder, displayed when `src={null}` or when the image cannot be loaded */\n  children?: React.ReactNode;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Name of the user. When `src` is not set, used to display initials and to generate color when `color=\"initials\"` is set. */\n  name?: string;\n\n  /** A list of colors that is used for autogenerated initials. By default, all default Mantine colors can be used except gray and dark. */\n  allowedInitialsColors?: MantineColor[];\n}\n\nexport type AvatarFactory = PolymorphicFactory<{\n  props: AvatarProps;\n  defaultRef: HTMLDivElement;\n  defaultComponent: 'div';\n  stylesNames: AvatarStylesNames;\n  vars: AvatarCssVariables;\n  variant: AvatarVariant;\n  staticComponents: {\n    Group: typeof AvatarGroup;\n  };\n}>;\n\nconst varsResolver = createVarsResolver<AvatarFactory>(\n  (\n    theme,\n    { size, radius, variant, gradient, color, autoContrast, name, allowedInitialsColors }\n  ) => {\n    const _color =\n      color === 'initials' && typeof name === 'string'\n        ? getInitialsColor(name, allowedInitialsColors)\n        : color;\n\n    const colors = theme.variantColorResolver({\n      color: _color || 'gray',\n      theme,\n      gradient,\n      variant: variant || 'light',\n      autoContrast,\n    });\n\n    return {\n      root: {\n        '--avatar-size': getSize(size, 'avatar-size'),\n        '--avatar-radius': radius === undefined ? undefined : getRadius(radius),\n        '--avatar-bg': _color || variant ? colors.background : undefined,\n        '--avatar-color': _color || variant ? colors.color : undefined,\n        '--avatar-bd': _color || variant ? colors.border : undefined,\n      },\n    };\n  }\n);\n\nexport const Avatar = polymorphicFactory<AvatarFactory>((_props) => {\n  const props = useProps('Avatar', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    src,\n    alt,\n    radius,\n    color,\n    gradient,\n    imageProps,\n    children,\n    autoContrast,\n    mod,\n    name,\n    allowedInitialsColors,\n    attributes,\n    ...others\n  } = props;\n  const groupCtx = use(AvatarGroupContext);\n  const [error, setError] = useState(!src);\n\n  const getStyles = useStyles<AvatarFactory>({\n    name: 'Avatar',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  useEffect(() => setError(!src), [src]);\n\n  return (\n    <Box {...getStyles('root')} mod={[{ 'within-group': groupCtx.withinGroup }, mod]} {...others}>\n      {error || !src ? (\n        <span {...getStyles('placeholder')} title={alt}>\n          {children || (typeof name === 'string' && getInitials(name)) || <AvatarPlaceholderIcon />}\n        </span>\n      ) : (\n        <img\n          {...imageProps}\n          {...getStyles('image')}\n          src={src}\n          alt={alt}\n          onError={(event) => {\n            setError(true);\n            imageProps?.onError?.(event);\n          }}\n        />\n      )}\n    </Box>\n  );\n});\n\nAvatar.classes = classes;\nAvatar.varsResolver = varsResolver;\nAvatar.displayName = '@mantine/core/Avatar';\nAvatar.Group = AvatarGroup;\n"],"mappings":";;;;;;;;;;;;;;;;AAoFA,MAAM,eAAeA,6BAAAA,oBAEjB,OACA,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,cAAc,MAAM,4BAC3D;CACH,MAAM,SACJ,UAAU,cAAc,OAAO,SAAS,WACpCC,2BAAAA,iBAAiB,MAAM,sBAAsB,GAC7C;CAEN,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,UAAU;EACjB;EACA;EACA,SAAS,WAAW;EACpB;EACD,CAAC;AAEF,QAAO,EACL,MAAM;EACJ,iBAAiBC,iBAAAA,QAAQ,MAAM,cAAc;EAC7C,mBAAmB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;EACvE,eAAe,UAAU,UAAU,OAAO,aAAa,KAAA;EACvD,kBAAkB,UAAU,UAAU,OAAO,QAAQ,KAAA;EACrD,eAAe,UAAU,UAAU,OAAO,SAAS,KAAA;EACpD,EACF;EAEJ;AAED,MAAa,SAASC,4BAAAA,oBAAmC,WAAW;CAClE,MAAM,QAAQC,kBAAAA,SAAS,UAAU,MAAM,OAAO;CAC9C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,KACA,QACA,OACA,UACA,YACA,UACA,cACA,KACA,MACA,uBACA,YACA,GAAG,WACD;CACJ,MAAM,YAAA,GAAA,MAAA,KAAeC,oBAAAA,mBAAmB;CACxC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,CAAC,IAAI;CAExC,MAAM,YAAYC,mBAAAA,UAAyB;EACzC,MAAM;EACN;EACA,SAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,EAAA,GAAA,MAAA,iBAAgB,SAAS,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC;AAEtC,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,KAAK,CAAC,EAAE,gBAAgB,SAAS,aAAa,EAAE,IAAI;EAAE,GAAI;YACnF,SAAS,CAAC,MACT,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,GAAI,UAAU,cAAc;GAAE,OAAO;aACxC,YAAa,OAAO,SAAS,YAAYC,qBAAAA,YAAY,KAAK,IAAK,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,uBAAD,EAAyB,CAAA;GACpF,CAAA,GAEP,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,GAAI;GACJ,GAAI,UAAU,QAAQ;GACjB;GACA;GACL,UAAU,UAAU;AAClB,aAAS,KAAK;AACd,gBAAY,UAAU,MAAM;;GAE9B,CAAA;EAEA,CAAA;EAER;AAEF,OAAO,UAAUC,sBAAAA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,QAAQC,oBAAAA"}