Developer Docs

// Avatar with auto-generated initials
Avatar({ name: 'John Doe' })  // Shows "JD"

// Avatar with custom initials
Avatar({ name: 'Jane Johnson', initials: 'JS' })

// Avatar with image (passed as child)
Avatar({ name: 'Alex Chen', status: 'online' })

// Avatar with icon
Avatar({ class: 'vwfcolor-sky vwfsize-xl' }, span({ class: 'oj-ux-ico-contact text-2xl' }))

// Avatar with status indicator
Avatar(
  {
    name: 'Maria Garcia',
    status: 'away',
    statusPosition: 'top-right',
    class: 'vwfsize-3xl'
  },
  img({ src: 'https://example.com/avatar.jpg', alt: 'User: Maria Garcia' })
)

// Small sizes
Avatar({ name: 'SM', class: 'vwfsize-sm' })
Avatar({ name: 'MD', class: 'vwfsize-md' })  // Default

// Large sizes
Avatar({ name: 'LG', class: 'vwfsize-lg' })
Avatar({ name: 'XL', class: 'vwfsize-xl' })
Avatar({ name: '2XL', class: 'vwfsize-2xl' })

// Extra large sizes (great for hero sections)
Avatar({ name: '6XL', class: 'vwfsize-6xl' })
Avatar({ name: '8XL', class: 'vwfsize-8xl' })

// Solid (default) - full color background
Avatar({ name: 'Solid', class: 'solid vwfcolor-sky' })

// Subtle - 12% opacity background
Avatar({ name: 'Subtle', class: 'subtle vwfcolor-earth' })

// Accent - 24% opacity background
Avatar({ name: 'Accent', class: 'accent vwfcolor-sunrise' })

// Outerline - transparent with colored border
Avatar({ name: 'Outline', class: 'outerline vwfcolor-sunset' })

// Gradient - two-color gradient
Avatar({ name: 'Gradient', class: 'gradient' })

// Secondary - white background
Avatar({ name: 'Secondary', class: 'secondary' })

// Simple - background partial opacity with text 100% opacity of background color
Avatar({ name: 'Simple Indigo', class: 'simple vwfcolor-[rgb(from_var(--color-indigo)_r_g_b_/_50%)]' }

/ Simple - secondary-10 background with text-secondary
Avatar({ name: 'Simple Indigo', class: 'simple vwfcolor-secondary/10' }

)

// Four status states
Avatar({ name: 'Online', status: 'online' })  // Green dot
Avatar({ name: 'Away', status: 'away' })       // Yellow dot
Avatar({ name: 'Busy', status: 'busy' })       // Red dot
Avatar({ name: 'Offline', status: 'offline' }) // Gray dot

// Custom status position
Avatar({
  name: 'User',
  status: 'online',
  statusPosition: 'top-right'  // or 'top-left', 'bottom-left', 'bottom-right'
})

// Circle (default)
Avatar({ name: 'Circle', class: 'rounded-full' })

// Highly rounded square
Avatar({ name: 'Square', class: 'rounded-xl' })

// Rounded square
Avatar({ name: 'Sharp', class: 'rounded-md' })

// Sharp square (2px rounding to avoid cutting sharp, 0px easily achieved if needed)
Avatar({ name: 'Box', class: 'rounded-xs' })

// Basic avatar group
AvatarGroup(
  { max: 3, class: 'vwfsize-lg ring-2 ring-white' },
  Avatar({ name: 'Alice' }),
  Avatar({ name: 'Bob' }),
  Avatar({ name: 'Charlie' }),
  Avatar({ name: 'Diana' }),
  Avatar({ name: 'Eve' })
)  // Shows 3 avatars + "+2" overflow

// Larger group with images
AvatarGroup(
  { max: 5, class: 'vwfsize-xl ring-3 ring-white' },
  Avatar({ name: 'User 1' }, img({ src: 'avatar1.jpg' })),
  Avatar({ name: 'User 2' }, img({ src: 'avatar2.jpg' })),
  // ... more avatars
)

// Z-index stacking: first avatar = highest, last = lowest
// Overlap calculation: ml-[calc(var(--vwf-size)*-1+var(--spacing))]

// Basic usage
AvatarWithText(
  { name: 'John Doe', subtitle: 'Product Designer' },
  Avatar({ name: 'John Doe', status: 'online' })
)

// Reversed layout (text on left)
AvatarWithText(
  {
    name: 'Jane Smith',
    subtitle: 'Engineering Manager',
    reverse: true
  },
  Avatar({ name: 'Jane Smith', status: 'away' })
)

// Custom text styling
AvatarWithText(
  {
    name: 'Alex Chen',
    subtitle: 'CEO & Founder',
    class: 'vwfsize-2xl',
    titleClass: 'text-base font-bold',
    subtitleClass: 'text-sm text-smoke'
  },
  Avatar({ name: 'Alex Chen', status: 'busy' })
)

// Interactive (clickable)
AvatarWithText(
  {
    name: 'Maria Garcia',
    subtitle: 'Marketing Lead',
    onclick: () => showProfile('maria')
  },
  Avatar({ name: 'Maria Garcia', status: 'online' })
)

// Default gradient (sunset → plum)
Avatar({ name: 'Default', class: 'gradient vwfsize-2xl' })

// Custom gradient start colors
Avatar({ name: 'Sunrise-Plum', class: 'gradient-sunrise vwfcolor-plum vwfsize-2xl' })
Avatar({ name: 'Sky-Peach', class: 'gradient-sky vwfcolor-peach vwfsize-2xl' })
Avatar({ name: 'Plum-Sunset', class: 'gradient-plum vwfcolor-sunset vwfsize-2xl' })
Avatar({ name: 'Navy-Earth', class: 'gradient-navy vwfcolor-earth vwfsize-2xl' })