{
  "name": "Avatar",
  "category": "Data Display",
  "subcategory": "Cards & Layout",
  "description": "Circular user image with initials fallback and status indicator.",
  "thumbnail": "/preview-cards/avatar.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Avatar/Avatar.razor",
    "UI/Avatar/AvatarFallback.razor",
    "UI/Avatar/AvatarGroup.razor",
    "UI/Avatar/AvatarImage.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-destructive",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Avatar",
    "category": "Data Display",
    "subcategory": "Cards & Layout",
    "description": "Circular user image with initials fallback and status indicator.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Avatar/Avatar.razor",
      "UI/Avatar/AvatarFallback.razor",
      "UI/Avatar/AvatarGroup.razor",
      "UI/Avatar/AvatarImage.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "AvatarSize",
        "default": "AvatarSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Shape",
        "type": "AvatarShape",
        "default": "AvatarShape.Circle",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Status",
        "type": "AvatarStatus",
        "default": "AvatarStatus.None",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "AvatarSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      },
      {
        "name": "AvatarShape",
        "values": [
          "Circle",
          "Square"
        ],
        "description": null
      },
      {
        "name": "AvatarStatus",
        "values": [
          "None",
          "Online",
          "Offline",
          "Away",
          "Busy"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-destructive",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "With Image",
        "code": "<Avatar>\n    <AvatarImage Src=\"https://github.com/shadcn.png\" Alt=\"User avatar\" />\n    <AvatarFallback>CN</AvatarFallback>\n</Avatar>"
      },
      {
        "title": "Fallback Initials",
        "code": "<Avatar>\n    <AvatarFallback>JD</AvatarFallback>\n</Avatar>\n<Avatar>\n    <AvatarFallback>\n        <Blazicon Svg=\"Lucide.User\" class=\"h-4 w-4\" />\n    </AvatarFallback>\n</Avatar>"
      },
      {
        "title": "Sizes",
        "code": "<Avatar Size=\"Avatar.AvatarSize.Sm\">\n    <AvatarImage Src=\"...\" Alt=\"Small\" />\n    <AvatarFallback>SM</AvatarFallback>\n</Avatar>\n<Avatar Size=\"Avatar.AvatarSize.Lg\">\n    <AvatarImage Src=\"...\" Alt=\"Large\" />\n    <AvatarFallback>LG</AvatarFallback>\n</Avatar>"
      },
      {
        "title": "Group",
        "code": "<Flex Class=\"-space-x-3\">\n    <Avatar Class=\"border-2 border-background\">\n        <AvatarImage Src=\"...\" Alt=\"User 1\" />\n        <AvatarFallback>U1</AvatarFallback>\n    </Avatar>\n    <Avatar Class=\"border-2 border-background\">\n        <AvatarFallback>U2</AvatarFallback>\n    </Avatar>\n    <Avatar Class=\"border-2 border-background\">\n        <AvatarFallback>+3</AvatarFallback>\n    </Avatar>\n</Flex>"
      }
    ],
    "subComponents": {
      "AvatarFallback": {
        "componentName": "AvatarFallback",
        "fileName": "AvatarFallback.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "AvatarGroup": {
        "componentName": "AvatarGroup",
        "fileName": "AvatarGroup.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Max",
            "type": "int",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Total",
            "type": "int",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "AvatarImage": {
        "componentName": "AvatarImage",
        "fileName": "AvatarImage.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Src",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Alt",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Class",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnError",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [
          {
            "name": "OnError",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "avatar",
  "docsUrl": "https://lumeo.nativ.sh/components/avatar",
  "sourceUrl": [
    {
      "file": "UI/Avatar/Avatar.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Avatar/Avatar.razor"
    },
    {
      "file": "UI/Avatar/AvatarFallback.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Avatar/AvatarFallback.razor"
    },
    {
      "file": "UI/Avatar/AvatarGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Avatar/AvatarGroup.razor"
    },
    {
      "file": "UI/Avatar/AvatarImage.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Avatar/AvatarImage.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Avatar/Avatar.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <div class=\"@InnerClasses\">\n        @ChildContent\n    </div>\n    @if (Status != AvatarStatus.None)\n    {\n        <span class=\"absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-background @StatusColor\"></span>\n    }\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public AvatarSize Size { get; set; } = AvatarSize.Default;\n    [Parameter] public AvatarShape Shape { get; set; } = AvatarShape.Circle;\n    [Parameter] public AvatarStatus Status { get; set; } = AvatarStatus.None;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    // Outer wrapper inherits ShapeClasses too so consumer-supplied borders / rings\n    // (e.g. border-2 border-background in an AvatarGroup) follow the avatar's\n    // shape. Without this, the border landed on the rectangular outer div while\n    // the inner div clipped the image to a circle — visible as square frames\n    // around fallback initials.\n    private string CssClass => $\"relative flex shrink-0 {SizeClasses} {ShapeClasses} {Class}\".Trim();\n\n    private string InnerClasses => $\"flex h-full w-full overflow-hidden {ShapeClasses}\";\n\n    private string ShapeClasses => Shape switch\n    {\n        AvatarShape.Square => \"rounded-md\",\n        _ => \"rounded-full\"\n    };\n\n    private string SizeClasses => Size switch\n    {\n        AvatarSize.Sm => \"h-8 w-8\",\n        AvatarSize.Default => \"h-10 w-10\",\n        AvatarSize.Lg => \"h-12 w-12\",\n        _ => \"h-10 w-10\"\n    };\n\n    private string StatusColor => Status switch\n    {\n        AvatarStatus.Online => \"bg-success\",\n        AvatarStatus.Offline => \"bg-muted-foreground\",\n        AvatarStatus.Away => \"bg-warning\",\n        AvatarStatus.Busy => \"bg-destructive\",\n        _ => \"\"\n    };\n\n    public enum AvatarSize { Sm, Default, Lg }\n    public enum AvatarShape { Circle, Square }\n    public enum AvatarStatus { None, Online, Offline, Away, Busy }\n}\n"
    },
    {
      "path": "UI/Avatar/AvatarFallback.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Avatar/AvatarGroup.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n    @if (OverflowCount > 0)\n    {\n        <div class=\"@OverflowClasses\">\n            <span class=\"text-xs font-medium\">+@OverflowCount</span>\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public int Max { get; set; }\n    [Parameter] public int Total { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private int OverflowCount => Max > 0 && Total > Max ? Total - Max : 0;\n\n    private string CssClass => $\"flex -space-x-3 {Class}\".Trim();\n    private const string OverflowClasses = \"relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted text-muted-foreground\";\n}\n"
    },
    {
      "path": "UI/Avatar/AvatarImage.razor",
      "content": "@namespace Lumeo\n\n<img class=\"@CssClass\" src=\"@Src\" alt=\"@Alt\" @attributes=\"AdditionalAttributes\" @onerror=\"HandleError\" />\n\n@code {\n    [Parameter] public string? Src { get; set; }\n    [Parameter] public string? Alt { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter] public EventCallback OnError { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"aspect-square h-full w-full object-cover {Class}\".Trim();\n\n    private async Task HandleError()\n    {\n        await OnError.InvokeAsync();\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Avatar",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "AvatarFallback",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "AvatarGroup",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "AvatarFallback",
      "reason": "sub-component"
    },
    {
      "name": "AvatarGroup",
      "reason": "sub-component"
    },
    {
      "name": "AvatarImage",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/AppBar/AppBarTests.cs",
    "tests/Lumeo.Tests/Components/Avatar/AvatarTests.cs",
    "tests/Lumeo.Tests/Components/FileUpload/FileUploadTests.cs"
  ],
  "mdSummary": "# Avatar\n\nCircular user image with initials fallback and status indicator.\n\n**Package:** `Lumeo` · **Category:** Data Display/Cards & Layout\n**Docs:** https://lumeo.nativ.sh/components/avatar\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Avatar | ChildContent | `RenderFragment?` | `` |  |\n| Avatar | Size | `AvatarSize` | `AvatarSize.Default` |  |\n| Avatar | Shape | `AvatarShape` | `AvatarShape.Circle` |  |\n| Avatar | Status | `AvatarStatus` | `AvatarStatus.None` |  |\n| Avatar | Class | `string?` | `` |  |\n| Avatar | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| AvatarFallback | ChildContent | `RenderFragment?` | `` |  |\n| AvatarFallback | Class | `string?` | `` |  |\n| AvatarFallback | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| AvatarGroup | ChildContent | `RenderFragment?` | `` |  |\n| AvatarGroup | Max | `int` | `` |  |\n| AvatarGroup | Total | `int` | `` |  |\n| AvatarGroup | Class | `string?` | `` |  |\n| AvatarGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| AvatarImage | Src | `string?` | `` |  |\n| AvatarImage | Alt | `string?` | `` |  |\n| AvatarImage | Class | `string?` | `` |  |\n| AvatarImage | OnError | `EventCallback` | `` |  |\n| AvatarImage | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Avatar) — RenderFragment slot\n- `ChildContent` (AvatarFallback) — RenderFragment slot\n- `ChildContent` (AvatarGroup) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `AvatarFallback`, `AvatarGroup`, `AvatarImage`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Avatar />\n```\n\n## CSS variables\n`--color-destructive`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Avatar/Avatar.razor`\n- `UI/Avatar/AvatarFallback.razor`\n- `UI/Avatar/AvatarGroup.razor`\n- `UI/Avatar/AvatarImage.razor`\n"
}