Avatar

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/avatar v1.2.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/avatar
7// What changed since: https://ds.interlace.tools/c/avatar#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10// Mirrors the shadcn Avatar canon, built on Base UI primitives.
11// Upstream: https://base-ui.com/react/components/avatar
12 
13/**
14 * @interlace/ui — Avatar
15 *
16 * A circular image with a text fallback. Wraps @base-ui/react/avatar: Base UI
17 * owns the image load/error state machine that decides when the fallback
18 * shows, and we own the surface.
19 *
20 * Ours is the `size-8` clipped circle, the muted fallback face, and a
21 * `loading` prop that renders a Skeleton in the same footprint instead.
22 *
23 * ## Anatomy
24 *
25 *   Avatar                           (Avatar.Root — size-8, rounded-full, overflow-hidden)
26 *     ├─ AvatarImage                 (Avatar.Image — aspect-square size-full)
27 *     └─ AvatarFallback              (Avatar.Fallback — bg-muted, centred initials)
28 *
29 * `size-8` is a default, not a constraint: it is merged through `cn`, so
30 * `className="size-12"` wins. The `loading` skeleton is given the same
31 * `size-8` and the same `className`, so an overridden size survives the swap.
32 *
33 * ## Two different absences
34 *
35 * When the image is missing or fails, Base UI swaps in `AvatarFallback` — the
36 * decision is upstream's and this file does not participate in it. When the
37 * DATA is not there yet (no URL, no initials), the caller passes `loading` and
38 * this file replaces the whole surface with a Skeleton before Base UI is
39 * involved at all.
40 *
41 * | Rule | Concept                          | Where in this file                                          |
42 * | ---- | -------------------------------- | ----------------------------------------------------------- |
43 * | R4   | Extends Base UI part props       | `React.ComponentProps<typeof BaseAvatar.Root/Image/Fallback>` |
44 * | R6   | data-slot per part               | avatar / avatar-image / avatar-fallback                     |
45 * | R7   | cn + ...rest                     | `cn('… size-8 …', className)` + `{...props}`                |
46 * | R12  | Reuse over wrap                  | Base UI owns the image load/error machine                   |
47 * | R19  | Tokens only                      | `bg-muted` on the fallback face                             |
48// … truncated