import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useRef, useState, useContext, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
import { c as cx } from './index-SvGbrGuT.js';
import { u as useAccessibleColor, t as tinycolor } from './useAccessibleColor-BYKjkGRg.js';
import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';

import './Avatar.css';function getInitial(name) {
  if (!name) return void 0;
  const nameArray = name.split(" ").filter(Boolean);
  if (nameArray.length > 1)
    return `${nameArray[0][0]?.toUpperCase()}${nameArray[nameArray.length - 1][0].toUpperCase()}`;
  if (nameArray[0][1]) {
    return `${nameArray[0][0].toUpperCase()}${nameArray[0][1].toLowerCase()}`;
  }
  return `${nameArray[0][0].toUpperCase()}`;
}

const small$1 = "_small_1gdlr_20";
const medium = "_medium_1gdlr_26";
const large$1 = "_large_1gdlr_32";
const styles = {
	"avatar-group": "_avatar-group_1gdlr_2",
	small: small$1,
	medium: medium,
	large: large$1
};

const initial = "_initial_bnoyf_49";
const img = "_img_bnoyf_57";
const indicator = "_indicator_bnoyf_66";
const online = "_online_bnoyf_80";
const offline = "_offline_bnoyf_83";
const xsmall = "_xsmall_bnoyf_90";
const small = "_small_bnoyf_105";
const large = "_large_bnoyf_120";
const avatarBaseStyles = {
	"avatar-base": "_avatar-base_bnoyf_2",
	initial: initial,
	img: img,
	indicator: indicator,
	online: online,
	offline: offline,
	"overflow-ten-plus": "_overflow-ten-plus_bnoyf_87",
	xsmall: xsmall,
	small: small,
	large: large
};

const AvatarBase = forwardRef(
  (props, ref) => {
    const {
      className,
      color,
      status,
      name,
      image,
      initials,
      style,
      size,
      ...rest
    } = props;
    const elRef = useRef(null);
    const imgRef = useRef(null);
    const [hasImageErrored, setHasImageErrored] = useState(false);
    const avatarBaseClassNames = cx(avatarBaseStyles["avatar-base"], className, {
      [avatarBaseStyles[`${size}`]]: size
    });
    const onlineIndicatorClassNames = cx(avatarBaseStyles["indicator"], {
      [avatarBaseStyles["offline"]]: !status || status === "offline",
      [avatarBaseStyles["online"]]: status && status === "online"
    });
    const { mode: themeMode } = useContext(ThemeProviderContext);
    const { mode: sysMode } = usePrefersColorScheme();
    const mode = themeMode ?? sysMode;
    const { foreground, background, border } = useAccessibleColor(color, mode);
    const styleWithColor = {
      "--int-bg-color": color && background,
      "--int-font-color": color && foreground,
      "--int-border-color": color && border,
      ...style
    };
    const onlineIndicatorBorderColor = useMemo(() => {
      if (mode === "dark") {
        if (color) {
          return tinycolor(background).brighten(20).toHexString();
        }
      }
      return "var(--background-color)";
    }, [color, mode, background]);
    const onlineIndicatorStyles = {
      "--int-border-color": onlineIndicatorBorderColor
    };
    const onlineString = status;
    const srOnly = [name, onlineString].filter(Boolean).join(" ");
    useEffect(() => {
      if (image) {
        setHasImageErrored(false);
      }
    }, [image]);
    useEffect(() => {
      if (image && imgRef.current && imgRef.current.complete) {
        const img = new Image();
        img.onerror = () => setHasImageErrored(true);
        img.src = image;
      }
    }, []);
    return /* @__PURE__ */ jsxs(
      "span",
      {
        className: avatarBaseClassNames,
        style: styleWithColor,
        "data-anv": "avatarBase",
        ...rest,
        ref: useMergeRefs([elRef, ref]),
        children: [
          image && !hasImageErrored ? /* @__PURE__ */ jsx(
            "img",
            {
              className: avatarBaseStyles["img"],
              "aria-hidden": true,
              src: image,
              alt: name,
              onError: () => setHasImageErrored(true),
              ref: imgRef
            }
          ) : initials ? /* @__PURE__ */ jsx("span", { className: avatarBaseStyles["initial"], "aria-hidden": true, children: initials }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "?" }),
          status && /* @__PURE__ */ jsx(
            "span",
            {
              "aria-hidden": true,
              className: onlineIndicatorClassNames,
              style: onlineIndicatorStyles
            }
          ),
          /* @__PURE__ */ jsx(SrOnly, { children: srOnly })
        ]
      }
    );
  }
);
AvatarBase.displayName = "AvatarBase";

const AvatarGroup = forwardRef(
  (props, ref) => {
    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
    const { className, max, style, children, ...rest } = componentProps;
    const childrenArr = Children.toArray(children);
    const inferredSize = (isValidElement(childrenArr[0]) && childrenArr[0].props.size) ?? "medium";
    const isOverflowing = max ? max < childrenArr.length : false;
    const overflowCount = max && childrenArr.length - max;
    const avatarGroupClassNames = cx(styles["avatar-group"], className, {
      [styles[`${inferredSize}`]]: inferredSize
    });
    const avatarBaseOverflowClassNames = cx(
      avatarBaseStyles["avatar-base-overflow"],
      {
        [avatarBaseStyles["overflow-ten-plus"]]: overflowCount && overflowCount > 9
      }
    );
    const styleCombined = {
      ...style,
      ...layoutStyles
    };
    return /* @__PURE__ */ jsxs(
      "span",
      {
        ref,
        className: avatarGroupClassNames,
        style: styleCombined,
        "data-anv": "avatar-group",
        ...rest,
        children: [
          childrenArr.map((child, i) => {
            let childEl = child;
            if (isValidElement(child)) {
              const nIndex = childrenArr.length - i;
              const nStyle = {
                ...child.props.style,
                zIndex: nIndex
              };
              childEl = cloneElement(child, {
                style: nStyle
              });
            }
            if (!max) return childEl;
            if (i < max) return childEl;
            return null;
          }),
          isOverflowing && max && /* @__PURE__ */ jsx(
            AvatarBase,
            {
              className: avatarBaseOverflowClassNames,
              name: `+${overflowCount}`,
              initials: `+${overflowCount}`,
              size: inferredSize
            }
          )
        ]
      }
    );
  }
);
AvatarGroup.displayName = "AvatarGroup";

const AvatarElement = forwardRef((props, ref) => {
  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
  const { name, style, ...rest } = componentProps;
  const styleWithLayout = useMemo(() => {
    return {
      ...layoutStyles,
      ...style
    };
  }, [layoutStyles, style]);
  const initials = getInitial(name);
  return /* @__PURE__ */ jsx(
    AvatarBase,
    {
      style: styleWithLayout,
      "data-anv": "avatar",
      name,
      ref,
      initials: rest.size === "small" ? initials?.[0] : initials,
      ...rest
    }
  );
});
AvatarElement.displayName = "Avatar";
const Avatar = Object.assign(AvatarElement, {
  /**
   * AvatarGroup component for displaying multiple avatars in a group.
   *
   * Features:
   * - Displays multiple avatars in a stacked layout
   * - Handles overflow with a count indicator
   * - Maintains consistent sizing across all avatars
   * - Supports custom styling and layout
   * - Automatically adjusts z-index for proper stacking
   * - Fully accessible with screen reader support
   *
   * @example
   * <Avatar.Group max={3}>
   *   <Avatar name="John Doe" />
   *   <Avatar name="Jane Smith" />
   *   <Avatar name="Bob Johnson" />
   *   <Avatar name="Alice Brown" />
   * </Avatar.Group>
   */
  Group: AvatarGroup
});

export { AvatarGroup as A, Avatar as a };
//# sourceMappingURL=Avatar-COMPK7Ym.js.map
