{
  "name": "Skeleton",
  "category": "Feedback",
  "subcategory": null,
  "description": "Pulsing placeholder block for loading states.",
  "thumbnail": "/preview-cards/skeleton.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Skeleton/Skeleton.razor",
    "UI/Skeleton/SkeletonCard.razor",
    "UI/Skeleton/SkeletonCircle.razor",
    "UI/Skeleton/SkeletonText.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-primary",
    "--radius"
  ],
  "api": {
    "name": "Skeleton",
    "category": "Feedback",
    "subcategory": null,
    "description": "Pulsing placeholder block for loading states.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Skeleton/Skeleton.razor",
      "UI/Skeleton/SkeletonCard.razor",
      "UI/Skeleton/SkeletonCircle.razor",
      "UI/Skeleton/SkeletonText.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Animation",
        "type": "SkeletonAnimation",
        "default": "SkeletonAnimation.Pulse",
        "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": "SkeletonAnimation",
        "values": [
          "Pulse",
          "Wave",
          "None"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-primary",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic Shapes",
        "code": "<Stack Gap=\"4\">\n    <Skeleton Class=\"h-4 w-[250px]\" />\n    <Skeleton Class=\"h-4 w-[200px]\" />\n    <Skeleton Class=\"h-4 w-[150px]\" />\n</Stack>"
      },
      {
        "title": "Card Skeleton",
        "code": "<Card>\n    <CardHeader>\n        <Skeleton Class=\"h-5 w-[180px]\" />\n        <Skeleton Class=\"h-4 w-[250px]\" />\n    </CardHeader>\n    <CardContent>\n        <Stack Gap=\"2\">\n            <Skeleton Class=\"h-4 w-full\" />\n            <Skeleton Class=\"h-4 w-full\" />\n            <Skeleton Class=\"h-4 w-[80%]\" />\n        </Stack>\n    </CardContent>\n</Card>"
      },
      {
        "title": "Profile Skeleton",
        "code": "<Flex Align=\"center\" Gap=\"4\">\n    <Skeleton Class=\"h-12 w-12 rounded-full\" />\n    <Stack Gap=\"2\">\n        <Skeleton Class=\"h-4 w-[200px]\" />\n        <Skeleton Class=\"h-4 w-[160px]\" />\n    </Stack>\n</Flex>"
      },
      {
        "title": "List Skeleton",
        "code": "@for (var i = 0; i < 3; i++)\n{\n    <Flex Align=\"center\" Gap=\"4\">\n        <Skeleton Class=\"h-10 w-10 rounded-full\" />\n        <Stack Gap=\"2\" Class=\"flex-1\">\n            <Skeleton Class=\"h-4 w-[60%]\" />\n            <Skeleton Class=\"h-3 w-[40%]\" />\n        </Stack>\n    </Flex>\n}"
      }
    ],
    "subComponents": {
      "SkeletonCard": {
        "componentName": "SkeletonCard",
        "fileName": "SkeletonCard.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Animation",
            "type": "Skeleton.SkeletonAnimation",
            "default": "Skeleton.SkeletonAnimation.Pulse",
            "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
      },
      "SkeletonCircle": {
        "componentName": "SkeletonCircle",
        "fileName": "SkeletonCircle.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Animation",
            "type": "Skeleton.SkeletonAnimation",
            "default": "Skeleton.SkeletonAnimation.Pulse",
            "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
      },
      "SkeletonText": {
        "componentName": "SkeletonText",
        "fileName": "SkeletonText.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Lines",
            "type": "int",
            "default": "3",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Animation",
            "type": "Skeleton.SkeletonAnimation",
            "default": "Skeleton.SkeletonAnimation.Pulse",
            "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
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "skeleton",
  "docsUrl": "https://lumeo.nativ.sh/components/skeleton",
  "sourceUrl": [
    {
      "file": "UI/Skeleton/Skeleton.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Skeleton/Skeleton.razor"
    },
    {
      "file": "UI/Skeleton/SkeletonCard.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Skeleton/SkeletonCard.razor"
    },
    {
      "file": "UI/Skeleton/SkeletonCircle.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Skeleton/SkeletonCircle.razor"
    },
    {
      "file": "UI/Skeleton/SkeletonText.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Skeleton/SkeletonText.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Skeleton/Skeleton.razor",
      "content": "@namespace Lumeo\n\n@if (Animation == SkeletonAnimation.Wave)\n{\n    <style>\n        @@keyframes skeleton-wave {\n            0% { background-position: -200% 0; }\n            100% { background-position: 200% 0; }\n        }\n    </style>\n    <div class=\"@($\"rounded-md bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 bg-[length:200%_100%] {Class}\".Trim())\"\n         style=\"animation: skeleton-wave 1.5s ease-in-out infinite\"\n         @attributes=\"AdditionalAttributes\"></div>\n}\nelse\n{\n    <div class=\"@($\"{AnimationClass} rounded-md bg-primary/10 {Class}\".Trim())\" @attributes=\"AdditionalAttributes\"></div>\n}\n\n@code {\n    [Parameter] public SkeletonAnimation Animation { get; set; } = SkeletonAnimation.Pulse;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string AnimationClass => Animation switch\n    {\n        SkeletonAnimation.Pulse => \"animate-pulse\",\n        SkeletonAnimation.None => \"\",\n        _ => \"animate-pulse\"\n    };\n\n    public enum SkeletonAnimation { Pulse, Wave, None }\n}\n"
    },
    {
      "path": "UI/Skeleton/SkeletonCard.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <Skeleton Animation=\"Animation\" Class=\"h-32 w-full rounded-t-lg\" />\n    <div class=\"p-4 space-y-3\">\n        <Skeleton Animation=\"Animation\" Class=\"h-5 w-3/4\" />\n        <Skeleton Animation=\"Animation\" Class=\"h-4 w-full\" />\n        <Skeleton Animation=\"Animation\" Class=\"h-4 w-1/2\" />\n    </div>\n</div>\n\n@code {\n    [Parameter] public Skeleton.SkeletonAnimation Animation { get; set; } = Skeleton.SkeletonAnimation.Pulse;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"rounded-lg border border-border overflow-hidden {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Skeleton/SkeletonCircle.razor",
      "content": "@namespace Lumeo\n\n@if (Animation == Skeleton.SkeletonAnimation.Wave)\n{\n    <style>\n        @@keyframes skeleton-wave {\n            0% { background-position: -200% 0; }\n            100% { background-position: 200% 0; }\n        }\n    </style>\n    <div class=\"@($\"rounded-full bg-gradient-to-r from-primary/10 via-primary/5 to-primary/10 bg-[length:200%_100%] h-10 w-10 {Class}\".Trim())\"\n         style=\"animation: skeleton-wave 1.5s ease-in-out infinite\"\n         @attributes=\"AdditionalAttributes\"></div>\n}\nelse\n{\n    <div class=\"@CssClass\" @attributes=\"AdditionalAttributes\"></div>\n}\n\n@code {\n    [Parameter] public Skeleton.SkeletonAnimation Animation { get; set; } = Skeleton.SkeletonAnimation.Pulse;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string AnimationClass => Animation switch\n    {\n        Skeleton.SkeletonAnimation.Pulse => \"animate-pulse\",\n        Skeleton.SkeletonAnimation.None => \"\",\n        _ => \"animate-pulse\"\n    };\n\n    private string CssClass => string.Join(\" \", new[] { AnimationClass, \"rounded-full bg-primary/10 h-10 w-10\", Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n}\n"
    },
    {
      "path": "UI/Skeleton/SkeletonText.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @for (var i = 0; i < Lines; i++)\n    {\n        <Skeleton Animation=\"Animation\" Class=\"@($\"h-4 {(i == Lines - 1 ? \"w-3/4\" : \"w-full\")}\")\" />\n    }\n</div>\n\n@code {\n    [Parameter] public int Lines { get; set; } = 3;\n    [Parameter] public Skeleton.SkeletonAnimation Animation { get; set; } = Skeleton.SkeletonAnimation.Pulse;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"space-y-2 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "SkeletonCard",
      "reason": "sub-component"
    },
    {
      "name": "SkeletonCircle",
      "reason": "sub-component"
    },
    {
      "name": "SkeletonText",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/DataGrid/DataGridTests.cs",
    "tests/Lumeo.Tests/Components/Skeleton/SkeletonTests.cs"
  ],
  "mdSummary": "# Skeleton\n\nPulsing placeholder block for loading states.\n\n**Package:** `Lumeo` · **Category:** Feedback\n**Docs:** https://lumeo.nativ.sh/components/skeleton\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Skeleton | Animation | `SkeletonAnimation` | `SkeletonAnimation.Pulse` |  |\n| Skeleton | Class | `string?` | `` |  |\n| Skeleton | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SkeletonCard | Animation | `Skeleton.SkeletonAnimation` | `Skeleton.SkeletonAnimation.Pulse` |  |\n| SkeletonCard | Class | `string?` | `` |  |\n| SkeletonCard | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SkeletonCircle | Animation | `Skeleton.SkeletonAnimation` | `Skeleton.SkeletonAnimation.Pulse` |  |\n| SkeletonCircle | Class | `string?` | `` |  |\n| SkeletonCircle | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SkeletonText | Lines | `int` | `3` |  |\n| SkeletonText | Animation | `Skeleton.SkeletonAnimation` | `Skeleton.SkeletonAnimation.Pulse` |  |\n| SkeletonText | Class | `string?` | `` |  |\n| SkeletonText | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- `SkeletonCard`, `SkeletonCircle`, `SkeletonText`\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<Skeleton />\n```\n\n## CSS variables\n`--color-border`, `--color-primary`, `--radius`\n\n## Files\n- `UI/Skeleton/Skeleton.razor`\n- `UI/Skeleton/SkeletonCard.razor`\n- `UI/Skeleton/SkeletonCircle.razor`\n- `UI/Skeleton/SkeletonText.razor`\n"
}