@veracity/vui/dist/avatar/avatar.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Icon } from "../icon/icon.js";
import { Image } from "../image/image.js";
import { loadImageUrl } from "../utils/images.js";
import { defaultGetInitials } from "./helpers.js";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

//#region src/avatar/avatar.tsx
const AvatarBase = styled.spanBox`
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
  font-weight: medium;
  justify-content: center;
  line-height: normal;
  outline: none;
  overflow: hidden;
  transition-duration: fast;

  &:focus {
    border-color: transparent;
  }

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    user-select: none;
  }
`;
/** Displays user data, such as name initials or profile image. */
const Avatar = vui((props, ref) => {
	const { children, className, disabled, getInitials = defaultGetInitials, icon, isInteractive = props.onClick !== void 0, isSquare, name = "", src, ...rest } = omitThemingProps(props);
	const { activeBg, h, hoverBg, iconSize, ...styles } = useStyleConfig("Avatar", props);
	const borderRadius = isSquare ? props.size === "sm" ? "3px" : "6px" : "50%";
	const initials = getInitials(name);
	const interactiveProps = !disabled && isInteractive ? {
		cursor: "pointer",
		hoverBg,
		hoverOpacity: src ? .85 : 1,
		activeOpacity: src ? .7 : 1,
		activeBg,
		focusRing: 3,
		tabIndex: 0,
		userSelect: "none"
	} : {};
	const aliasedProps = filterUndefined({
		borderRadius,
		"aria-disabled": disabled
	});
	return /* @__PURE__ */ jsx(AvatarBase, {
		borderRadius,
		className: cs("vui-avatar", className),
		h,
		ref,
		w: h,
		...styles,
		...interactiveProps,
		...aliasedProps,
		...rest,
		children: children ? children : src ? /* @__PURE__ */ jsx(LazyImageOrDefault, {
			borderRadius,
			icon,
			iconSize,
			initials,
			src
		}) : icon ? /* @__PURE__ */ jsx(Icon, {
			name: icon,
			size: iconSize
		}) : initials ? initials : /* @__PURE__ */ jsx(Icon, {
			name: "uiUser",
			size: iconSize
		})
	});
});
function LazyImageOrDefault({ src, borderRadius, icon, iconSize, initials }) {
	const [imgLoaded, setImgLoaded] = useState(false);
	useEffect(() => {
		let cancelled = false;
		loadImageUrl(src).then((res) => {
			if (!cancelled) setImgLoaded(res);
		});
		return () => {
			cancelled = true;
		};
	}, [src]);
	return imgLoaded ? /* @__PURE__ */ jsx(Image, {
		borderRadius,
		src
	}) : icon ? /* @__PURE__ */ jsx(Icon, {
		name: icon,
		size: iconSize
	}) : initials ? /* @__PURE__ */ jsx(Fragment$1, { children: initials }) : /* @__PURE__ */ jsx(Icon, {
		name: "uiUser",
		size: iconSize
	});
}
Avatar.displayName = "Avatar";

//#endregion
export { Avatar, Avatar as default, AvatarBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=avatar.js.map