@nature-ui/avatar/dist/chunk-4JYGDNDI.mjs

A base React component for icons

import {
  SIZES,
  __DEV__,
  baseStyle,
  clsx_m_default,
  css,
  forwardRef,
  getValidChildren,
  nature
} from "./chunk-I5H3YSXV.mjs";

// src/avatarGroup.tsx
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var AvatarExcessLabel = forwardRef(
  ({ className = "", ...rest }, ref) => /* @__PURE__ */ jsx(
    nature.span,
    {
      className: clsx_m_default(`${baseStyle} rounded-full`, {
        [className]: className
      }),
      ref,
      ...rest
    }
  )
);
if (__DEV__) {
  AvatarExcessLabel.displayName = "AvatarExcessLabel";
}
var AvatarGroup = forwardRef((props, ref) => {
  const {
    children,
    max,
    size = "md",
    spacing = "-0.5rem",
    className,
    ...rest
  } = props;
  const validChildren = getValidChildren(children);
  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
  const excess = max && validChildren.length - max;
  const reversedChildren = childrenWithinMax.reverse();
  const STYLES = css`
    width: ${SIZES[size]};
    height: ${SIZES[size]};
  `;
  const defaults = "border-2 border-solid border-white";
  const spacingType = typeof spacing === "string" ? spacing : `${spacing}px`;
  const clones = reversedChildren.map((child, index) => {
    const isFirstAvatar = index === 0;
    const className2 = clsx_m_default(STYLES, defaults, {
      [css`
        margin-right: ${spacingType};
      `]: !isFirstAvatar
    });
    return React.cloneElement(child, {
      className: className2
    });
  });
  const groupExcess = clsx_m_default(
    "nature-avatar__excess",
    STYLES,
    defaults,
    "bg-gray-300",
    css`
      margin-left: ${spacingType};
    `
  );
  return /* @__PURE__ */ jsxs(
    nature.div,
    {
      className: clsx_m_default(
        "nature-avatar__group flex items-center justify-end flex-row-reverse",
        className
      ),
      ref,
      role: "group",
      ...rest,
      children: [
        excess && /* @__PURE__ */ jsx(AvatarExcessLabel, { className: groupExcess, children: `+${excess}` }),
        clones
      ]
    }
  );
});

export {
  AvatarGroup
};