A React component that renders a square or round avatar with image support, authenticated image resolution, and an initials-based fallback when no image is available or fails to load. ## Key Components ### `SquareAvatarProps` | Prop | Type | Default | Description | |---|---|---|---| | `src` | `string` | — | Image URL (resolved through auth hook) | | `alt` | `string` | — | Alt text; also used to derive initials fallback | | `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Named size bucket | | `sizePx` | `number` | — | Exact pixel size; overrides `size` | | `fallback` | `string` | — | String used to derive initials (takes priority over `alt`) | | `variant` | `'square' \| 'round'` | `'square'` | Border radius style | | `initialsClassName` | `string` | — | Tailwind overrides for initials font/color | ### Exports - **`SquareAvatar`** — Memoized, forwarded-ref `div` wrapping an authed `Image` and an initials layer. ## Usage Example ```typescript import { SquareAvatar } from "@openframe/ui"; // Basic image avatar // Initials-only fallback // Exact pixel size with custom initials styling ``` **Fallback behaviour:** if `src` is absent or the image fires an `onError` event, the initials layer (derived via `getFirstLastInitials`) becomes visible. The initials color resolves through the CSS variable `--ods-avatar-initials`, falling back to `--color-text-primary`, so host themes can supply a contrast-correct value without breaking unstyled avatars. **Source:** [`square-avatar.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/square-avatar.tsx)