{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "avatar",
  "version": "2.0.0",
  "name": "Avatar",
  "category": "data-display",
  "appStatus": "implemented",
  "intent": "ユーザーアバター。Image / Initials / Status / Group。",
  "docPath": "components/avatar.md",
  "anatomy": ["container", "image?", "initials?", "statusDot?"],
  "variants": {
    "image": {
      "description": "プロフィール画像表示",
      "tokenRefs": {
        "radius": "radius.full"
      },
      "tailwind": "w-10 h-10 rounded-full object-cover"
    },
    "initials": {
      "description": "イニシャル文字表示（画像なし時のフォールバック）",
      "tokenRefs": {
        "bg": "color.primary.50",
        "text": "color.primary.500",
        "radius": "radius.full"
      },
      "tailwind": "w-10 h-10 rounded-full bg-primary-50 text-primary-600 font-medium inline-flex items-center justify-center text-sm"
    },
    "group": {
      "description": "複数アバターの重ね表示",
      "tokenRefs": {},
      "tailwind": "flex -space-x-2"
    }
  },
  "sizes": {
    "small": {
      "height": 32,
      "tailwind": "w-8 h-8"
    },
    "medium": {
      "height": 40,
      "tailwind": "w-10 h-10"
    },
    "large": {
      "height": 48,
      "tailwind": "w-12 h-12"
    }
  },
  "states": [
    "default",
    "online",
    "away",
    "offline"
  ],
  "a11y": {
    "role": "img",
    "required": [
      "aria-label=\"名前\""
    ],
    "keyboard": [],
    "focusRing": "N/A"
  },
  "rules": [],
  "htmlSample": "<div class=\"w-10 h-10 rounded-full bg-primary-50 text-primary-600 font-medium inline-flex items-center justify-center text-sm\" role=\"img\" aria-label=\"田中太郎\">田中</div>"
}