Avatar

---
// src/components/ui/display/avatar/Avatar.astro — headless primitive (see ../../README.md).
// <img> when `src` is set, else the slot (fallback initials). The image carries its own
// `data-slot="avatar-image"` so a theme can size/crop it without reaching for a class.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  size?: "sm" | "md" | "lg";
  src?: string;
  alt?: string;
};

const { size = "md", src, alt = "", class: className, ...rest } = Astro.props;
---

<span class={className} data-slot="avatar" data-size={size} {...rest}>
  {src ? <img src={src} alt={alt} data-slot="avatar-image" /> : <slot />}
</span>

---
// src/components/ui/display/avatar/AvatarGroup.astro — Avatar compound part (see ../../README.md).
// The overlapping stack of faces on a shared document, a project row, an assignee cell. The overlap
// itself is the theme's (a negative margin and a ring); what this part owns is the naming.
//
// A bare row of avatars is announced as a run of unrelated images — "AH, MK, image, image" — with
// nothing saying they are one set or what set it is. `label` makes it a named group, so the whole
// stack is announced once, as "Project members, group".
//
// It does NOT truncate for you: it renders a slot, and a slot cannot be counted at build time
// without rendering it to a string and guessing at its shape. Slice the list where you already have
// it — in your own data — and render an AvatarOverflow for the rest:
//
//   <AvatarGroup label="Project members">
//     {people.slice(0, 3).map((p) => <Avatar src={p.avatar} alt={p.name} />)}
//     <AvatarOverflow names={people.slice(3).map((p) => p.name)} />
//   </AvatarGroup>
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div"> & {
  /** Names the stack for assistive tech. Without it this is a plain <div> and announces nothing. */
  label?: string;
  size?: "sm" | "md" | "lg";
};

const { label, size = "md", class: className, ...rest } = Astro.props;
---

<div
  role={label ? "group" : undefined}
  aria-label={label}
  class={className}
  data-slot="avatar-group"
  data-size={size}
  {...rest}
>
  <slot />
</div>

---
// src/components/ui/display/avatar/AvatarOverflow.astro — Avatar compound part (see ../../README.md).
// The "+3" chip that closes an AvatarGroup — and the reason it is a component rather than a styled
// span is that "+3" is not an accessible name. Read aloud it is "plus three", which tells a screen
// reader user that something is hidden and nothing about what.
//
// So pass `names` and the control announces "3 more: Dana Ruiz, Priya Shah, Tom Weir" — the same
// information a sighted user gets from hovering, available without hovering. The visible "+3" is
// `aria-hidden`, because otherwise it is read twice.
//
// With no `names` it falls back to "<count> more", which is still a sentence rather than a glyph.
// `count` is only needed when it differs from `names.length` — for a list you truncated before it
// reached the component.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"span"> & {
  /** Who is hidden. Listed in the accessible name, in this order. */
  names?: readonly string[];
  /** How many are hidden. Defaults to `names.length`. */
  count?: number;
  /** Replaces the whole accessible name, for a localised app. */
  label?: string;
  size?: "sm" | "md" | "lg";
};

const { names = [], count, label, size = "md", class: className, ...rest } = Astro.props;

const hidden = count ?? names.length;
const name = label ?? (names.length > 0 ? `${hidden} more: ${names.join(", ")}` : `${hidden} more`);
---

<span
  role="img"
  aria-label={name}
  class={className}
  data-slot="avatar-overflow"
  data-size={size}
  data-count={hidden}
  {...rest}
>
  <span aria-hidden="true"><slot>+{hidden}</slot></span>
</span>

import Avatar from "./Avatar.astro";
import AvatarGroup from "./AvatarGroup.astro";
import AvatarOverflow from "./AvatarOverflow.astro";

export { Avatar, AvatarGroup, AvatarOverflow };
export default Avatar;