{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "avatar",
    "type": "registry:component",
    "title": "Avatar",
    "description": "Circular image or initials in three sizes. Stack several in a group for an overlapping row.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Data display",
        "layout": "cluster"
    },
    "files": [
        {
            "path": "components/avatar.html",
            "type": "registry:file",
            "target": "components/avatar.html",
            "content": "<!-- Avatar\n     Initials or an image. Sizes: sm, default, lg (data-size).\n     Use .dp-avatar-group for an overlapping row. -->\n\n<!-- Initials -->\n<span class=\"dp-avatar\" data-size=\"sm\" aria-label=\"Bram Bergen\">BB</span>\n<span class=\"dp-avatar\" aria-label=\"Bram Bergen\">BB</span>\n<span class=\"dp-avatar\" data-size=\"lg\" aria-label=\"Bram Bergen\">BB</span>\n\n<!-- Image -->\n<span class=\"dp-avatar\">\n  <img src=\"https://www.dataprovider.com/favicon.ico\" alt=\"\" />\n</span>\n\n<!-- Overlapping group -->\n<span class=\"dp-avatar-group\">\n  <span class=\"dp-avatar\" aria-label=\"User one\">A1</span>\n  <span class=\"dp-avatar\" aria-label=\"User two\">B2</span>\n  <span class=\"dp-avatar\" aria-label=\"User three\">C3</span>\n  <span class=\"dp-avatar\" style=\"background: var(--dp-neutral-300); color: var(--dp-text-muted);\">+5</span>\n</span>\n"
        },
        {
            "path": "components/avatar.css",
            "type": "registry:file",
            "target": "components/avatar.css",
            "content": "/* Avatar\n   A circular image or initials. Sizes are set with data-size (sm, default,\n   lg). Stack avatars in .dp-avatar-group for an overlapping row.\n   Colour and type from tokens.css. */\n\n.dp-avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: var(--dp-radius-full);\n  background: var(--dp-blue-200);\n  color: var(--dp-blue-700);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-bold);\n  overflow: hidden;\n  user-select: none;\n  flex: none;\n}\n\n.dp-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.dp-avatar[data-size=\"sm\"] {\n  width: 2rem;\n  height: 2rem;\n  font-size: var(--dp-text-xs);\n}\n\n.dp-avatar[data-size=\"lg\"] {\n  width: 3.5rem;\n  height: 3.5rem;\n  font-size: var(--dp-text-xl);\n}\n\n/* Overlapping group */\n.dp-avatar-group {\n  display: inline-flex;\n}\n\n.dp-avatar-group .dp-avatar {\n  border: 2px solid var(--dp-surface);\n  margin-left: -0.625rem;\n}\n\n.dp-avatar-group .dp-avatar:first-child {\n  margin-left: 0;\n}\n"
        }
    ]
}