aura-glass/dist/esm/components/interactive/GlassAvatarGroup.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';

const GlassAvatarGroup = /*#__PURE__*/forwardRef(({
  // TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
  users = [],
  max = 5,
  size = "md",
  className,
  id,
  "aria-label": ariaLabel,
  ...props
}, ref) => {
  const safeUsers = Array.isArray(users) ? users : [];
  const componentId = useA11yId(id || "avatar-group");
  const s = size === "sm" ? 24 : size === "lg" ? 40 : 32;
  const overlap = size === "sm" ? -8 : size === "lg" ? -12 : -10;
  const shown = safeUsers.slice(0, Math.max(0, max));
  const rest = Math.max(0, safeUsers.length - shown.length);
  const defaultAriaLabel = `Group of ${safeUsers.length} users${rest > 0 ? `, showing ${shown.length} of ${safeUsers.length}` : ""}`;
  return jsxs("div", {
    "data-glass-component": true,
    ref: ref,
    id: componentId,
    className: cn("flex items-center", className),
    role: "group",
    "aria-label": ariaLabel || defaultAriaLabel,
    ...props,
    children: [shown.map((u, i) => jsxs("div", {
      className: 'relative',
      style: {
        marginLeft: i === 0 ? 0 : overlap
      },
      role: "img",
      "aria-label": `${u.name}${u.status ? ` (${u.status})` : ""}`,
      children: [u.avatar ? jsx("img", {
        src: u.avatar,
        alt: u.name,
        width: s,
        height: s,
        className: 'glass-radius-full object-cover glass-border glass-border-white/20'
      }) : jsx("div", {
        className: "glass-radius-full glass-surface-subtle/10 glass-border glass-border-white/20 glass-flex glass-items-center glass-justify-center",
        style: {
          width: s,
          height: s
        },
        children: jsx("span", {
          className: 'glass-text-xs text-primary/80',
          "aria-hidden": "true",
          children: u.name.charAt(0)
        })
      }), u.status && jsx("span", {
        className: cn("absolute -bottom-0.5 -right-0.5 w-3 h-3 glass-radius-full border-2 border-background", u.status === "online" ? "bg-green-500" : u.status === "away" ? "bg-yellow-500" : u.status === "busy" ? "bg-red-500" : "bg-slate-500"),
        "aria-label": `Status: ${u.status}`,
        role: "img"
      })]
    }, u.name + i)), rest > 0 && jsx("div", {
      className: 'glass-radius-full glass-surface-subtle/10 glass-border glass-border-white/20 glass-flex glass-items-center glass-justify-center ml-[-10px]',
      style: {
        width: s,
        height: s
      },
      role: "img",
      "aria-label": `${rest} more users`,
      children: jsxs("span", {
        className: 'glass-text-xs text-primary/80',
        "aria-hidden": "true",
        children: ["+", rest]
      })
    })]
  });
});
GlassAvatarGroup.displayName = "GlassAvatarGroup";

export { GlassAvatarGroup, GlassAvatarGroup as default };
//# sourceMappingURL=GlassAvatarGroup.js.map