Avatar

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Avatar — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Source of truth (variants):
8//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/avatar.tsx
9//
10// shadcn upstream uses Radix Avatar which manages a load/error state
11// machine (show fallback while image fetches, after fetch fails, etc.).
12// For SSR we render both layers — the fallback as a sibling, then the
13// <img> on top via absolute positioning. If the image loads, it covers
14// the fallback; if it errors, an inline onerror handler hides it,
15// revealing the fallback. Zero JS framework needed.
16//
17// MDN <img>: repos/mdn/files/en-us/web/html/reference/elements/img/index.md
18//
19// Accessibility:
20//   - The Avatar root carries the accessible name via the <img>'s alt
21//     when src is provided; when not, pass `ariaLabel` to the root so AT
22//     announces "MK avatar" or similar.
23//   - For purely decorative avatars (next to a name that's already in the
24//     DOM), pass alt="" so AT skips it.
25 
26export type AvatarSize = "sm" | "default" | "lg"
27 
28const rootSize: Record<AvatarSize, string> = {
29  sm: "size-6 [&_[data-slot=avatar-fallback]]:text-xs",
30  default: "size-8",
31  lg: "size-10",
32}
33 
34type AvatarProps = PropsWithChildren<{
35  size?: AvatarSize
36  // The image URL. When undefined, only the fallback renders.
37  src?: string
38  alt?: string
39  // Fallback text — typically initials. Ignored when children are provided.
40  fallback?: string
41  // Accessible name for the avatar group when there's no img (no alt).
42  ariaLabel?: string
43  // Native <img loading>. Avatars are often off-screen in long lists, so
44  // loading="lazy" defers fetching until near the viewport.
45  // MDN <img>: .../elements/img/index.md "loading".
46  loading?: "eager" | "lazy"
47  // Native <img referrerpolicy>. Avatar src is often a third-party host
48  // (Gravatar/OAuth/CDN); e.g. "no-referrer" avoids leaking the page URL.
49  // MDN <img>: .../elements/img/index.md "referrerpolicy".
50  referrerpolicy?:
51    | "no-referrer"
52    | "no-referrer-when-downgrade"
53    | "origin"
54    | "origin-when-cross-origin"
55    | "same-origin"
56    | "strict-origin"
57    | "strict-origin-when-cross-origin"
58    | "unsafe-url"
59  // Native <img srcset>/<img sizes>. Primarily for the retina "2x" pixel
60  // density descriptor on small fixed-size avatars; src is the 1x fallback.
61  // MDN <img>: .../elements/img/index.md "srcset".
62// … truncated