@vibe-labs/design-components-avatars

Avatar component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-avatars";

import { AvatarSizes, AvatarStatuses } from "@vibe-labs/design-components-avatars/types";
import type { AvatarSize, AvatarStatus, AvatarStyleProps } from "@vibe-labs/design-components-avatars/types";

Contents

Tokens (avatar.css)

CSS custom properties defined in @layer vibe.tokens:

Sizes

Token	Value
--avatar-size-xs	1.5rem
--avatar-size-sm	2rem
--avatar-size-md	2.5rem
--avatar-size-lg	3.5rem
--avatar-size-xl	5rem

Initials Font Sizes

--avatar-font-size-xs … --avatar-font-size-xl — mapped to typography scale

Appearance

Token	Default	Description
--avatar-font-weight	--font-semibold	Initials weight
--avatar-bg	--surface-elevated	Fallback background
--avatar-color	--text-primary	Fallback text color
--avatar-border-width	2px	Ring / group border width
--avatar-border-color	--surface-base	Ring / group border color
--avatar-group-overlap	-0.5rem	Negative margin for stacked groups

Generated Styles (avatar.g.css)

Component classes generated into @layer vibe.components using attribute-based selectors.

Elements

• Avatar — circular container with image or initials support
• Avatar Initials — uppercase text fallback
• Avatar Status — positioned indicator dot (bottom-right, 25% of avatar size)
• Avatar Group — horizontal stack with overlap and border separation
• Avatar Overflow — "+N" count badge for groups

Variants

• Size: xs, sm, md, lg, xl (default: md)
• Status: online, offline, busy, away — with semantic colors (success, neutral, danger, warning)

Modifiers

• Ring — outer ring via box-shadow

TypeScript Types (types/)

AvatarSizes    // ["xs", "sm", "md", "lg", "xl"]
AvatarStatuses // ["online", "offline", "busy", "away"]

type AvatarSize
type AvatarStatus

interface AvatarStyleProps { size?: AvatarSize; ring?: boolean }
interface AvatarStatusStyleProps { status?: AvatarStatus }
interface AvatarGroupStyleProps { label?: string }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
avatar.css	Token definitions
avatar.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (surfaces, typography, colors, borders, radii).

Build

npm run build