@mantine/core/esm/components/Avatar/Avatar.mjs

React components library focused on usability, accessibility and developer experience

'use client';
import React, { useState, useEffect } from 'react';
import { getSize, getRadius } from '../../core/utils/get-size/get-size.mjs';
import { createVarsResolver } from '../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs';
import 'clsx';
import '@mantine/hooks';
import '../../core/MantineProvider/Mantine.context.mjs';
import '../../core/MantineProvider/default-theme.mjs';
import '../../core/MantineProvider/MantineProvider.mjs';
import '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
import { useProps } from '../../core/MantineProvider/use-props/use-props.mjs';
import { useStyles } from '../../core/styles-api/use-styles/use-styles.mjs';
import { Box } from '../../core/Box/Box.mjs';
import { polymorphicFactory } from '../../core/factory/polymorphic-factory.mjs';
import '../../core/DirectionProvider/DirectionProvider.mjs';
import { AvatarGroup } from './AvatarGroup/AvatarGroup.mjs';
import { useAvatarGroupContext } from './AvatarGroup/AvatarGroup.context.mjs';
import { AvatarPlaceholderIcon } from './AvatarPlaceholderIcon.mjs';
import classes from './Avatar.module.css.mjs';

const defaultProps = {};
const varsResolver = createVarsResolver(
  (theme, { size, radius, variant, gradient, color, autoContrast }) => {
    const colors = theme.variantColorResolver({
      color: color || "gray",
      theme,
      gradient,
      variant: variant || "light",
      autoContrast
    });
    return {
      root: {
        "--avatar-size": getSize(size, "avatar-size"),
        "--avatar-radius": radius === void 0 ? void 0 : getRadius(radius),
        "--avatar-bg": color || variant ? colors.background : void 0,
        "--avatar-color": color || variant ? colors.color : void 0,
        "--avatar-bd": color || variant ? colors.border : void 0
      }
    };
  }
);
const Avatar = polymorphicFactory((_props, ref) => {
  const props = useProps("Avatar", defaultProps, _props);
  const {
    classNames,
    className,
    style,
    styles,
    unstyled,
    vars,
    src,
    alt,
    radius,
    color,
    gradient,
    imageProps,
    children,
    autoContrast,
    mod,
    ...others
  } = props;
  const ctx = useAvatarGroupContext();
  const [error, setError] = useState(!src);
  const getStyles = useStyles({
    name: "Avatar",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  useEffect(() => setError(!src), [src]);
  return /* @__PURE__ */ React.createElement(
    Box,
    {
      ...getStyles("root"),
      mod: [{ "within-group": ctx.withinGroup }, mod],
      ref,
      ...others
    },
    error ? /* @__PURE__ */ React.createElement("span", { ...getStyles("placeholder"), title: alt }, children || /* @__PURE__ */ React.createElement(AvatarPlaceholderIcon, null)) : /* @__PURE__ */ React.createElement(
      "img",
      {
        ...imageProps,
        ...getStyles("image"),
        src,
        alt,
        onError: (event) => {
          setError(true);
          imageProps?.onError?.(event);
        }
      }
    )
  );
});
Avatar.classes = classes;
Avatar.displayName = "@mantine/core/Avatar";
Avatar.Group = AvatarGroup;

export { Avatar };
//# sourceMappingURL=Avatar.mjs.map