Avatar Component

import { avatar, avatarGroup } from '@frontmcp/ui';

// With image
const html = avatar({
  src: 'https://example.com/avatar.jpg',
  alt: 'John Doe',
});

// With initials (fallback when no image)
const initials = avatar({
  name: 'John Doe',
});
// Renders: "JD"

// With icon
const icon = avatar({
  icon: '👤',
});

avatar({ name: 'John', size: 'xs' })  // 24px
avatar({ name: 'John', size: 'sm' })  // 32px
avatar({ name: 'John', size: 'md' })  // 40px (default)
avatar({ name: 'John', size: 'lg' })  // 48px
avatar({ name: 'John', size: 'xl' })  // 64px
avatar({ name: 'John', size: '2xl' }) // 80px

// Circle (default)
avatar({ name: 'John', shape: 'circle' })

// Rounded square
avatar({ name: 'John', shape: 'rounded' })

// Square
avatar({ name: 'John', shape: 'square' })

avatar({
  name: 'John Doe',
  src: '/avatars/john.jpg',
  status: 'online',
})

avatar({ name: 'Jane', status: 'offline' })
avatar({ name: 'Bob', status: 'busy' })
avatar({ name: 'Alice', status: 'away' })

avatar({
  name: 'John Doe',
  src: '/avatars/john.jpg',
  badge: '3',  // notification count
})

avatar({
  name: 'Jane',
  badge: '!',  // alert indicator
  badgeVariant: 'danger',
})

avatar({ name: 'John Doe' })        // "JD"
avatar({ name: 'Alice' })           // "A"
avatar({ name: 'Bob Smith Jr' })    // "BS"
avatar({ name: 'jean-pierre' })     // "JP"

avatar({
  name: 'John Doe',
  initials: 'JD',  // Override generated initials
})

// Auto-generated based on name (deterministic)
avatar({ name: 'John Doe' })

// Specific color
avatar({ name: 'John', color: 'blue' })
avatar({ name: 'Jane', color: 'green' })
avatar({ name: 'Bob', color: 'purple' })

const html = avatarGroup([
  avatar({ src: '/avatars/1.jpg', alt: 'User 1' }),
  avatar({ src: '/avatars/2.jpg', alt: 'User 2' }),
  avatar({ src: '/avatars/3.jpg', alt: 'User 3' }),
  avatar({ name: '+5' }),  // overflow indicator
]);

// Stacked (overlapping)
avatarGroup(avatars, { stacked: true })

// Custom spacing
avatarGroup(avatars, { spacing: 'tight' })  // more overlap
avatarGroup(avatars, { spacing: 'normal' }) // default
avatarGroup(avatars, { spacing: 'loose' })  // less overlap

// Max visible (shows +N for overflow)
avatarGroup(avatars, { max: 3 })

// As link
avatar({
  name: 'John Doe',
  src: '/avatars/john.jpg',
  href: '/users/john',
})

// With HTMX
avatar({
  name: 'John Doe',
  htmx: {
    get: '/api/users/john/profile',
    target: '#profile-modal',
  },
})

import { card, avatar, avatarGroup, badge } from '@frontmcp/ui';

const teamCard = card(`
  <div class="flex items-center justify-between mb-6">
    <div class="flex items-center gap-3">
      ${avatar({
        src: '/avatars/team-lead.jpg',
        name: 'Sarah Johnson',
        size: 'lg',
        status: 'online',
      })}
      <div>
        <h3 class="font-semibold">Sarah Johnson</h3>
        <p class="text-sm text-gray-500">Team Lead</p>
      </div>
    </div>
    ${badge('Active', { variant: 'success' })}
  </div>

  <div class="border-t pt-4">
    <p class="text-sm text-gray-500 mb-2">Team Members</p>
    ${avatarGroup([
      avatar({ src: '/avatars/1.jpg', name: 'Alice', status: 'online' }),
      avatar({ src: '/avatars/2.jpg', name: 'Bob', status: 'away' }),
      avatar({ src: '/avatars/3.jpg', name: 'Charlie', status: 'online' }),
      avatar({ src: '/avatars/4.jpg', name: 'Diana', status: 'offline' }),
      avatar({ name: '+3', color: 'gray' }),
    ], { stacked: true, max: 5 })}
  </div>
`, { title: 'Development Team' });

import { actionList, avatar } from '@frontmcp/ui';

const userList = actionList([
  {
    title: 'John Doe',
    description: '[email protected]',
    icon: avatar({ name: 'John Doe', size: 'sm' }),
    href: '/users/john',
  },
  {
    title: 'Jane Smith',
    description: '[email protected]',
    icon: avatar({ name: 'Jane Smith', size: 'sm', status: 'online' }),
    href: '/users/jane',
  },
]);