{
  "name": "Spinner",
  "category": "Feedback",
  "subcategory": null,
  "description": "Indeterminate loading spinner with size variants.",
  "thumbnail": "/preview-cards/spinner.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Spinner/Spinner.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Spinner",
    "category": "Feedback",
    "subcategory": null,
    "description": "Indeterminate loading spinner with size variants.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Spinner/Spinner.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Size",
        "type": "SpinnerSize",
        "default": "SpinnerSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "SpinnerVariant",
        "default": "SpinnerVariant.Ring",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Label",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Color",
        "type": "string?",
        "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": [
      {
        "name": "SpinnerSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      },
      {
        "name": "SpinnerVariant",
        "values": [
          "Ring",
          "Dots",
          "Bars"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Sizes",
        "code": "<Spinner Size=\"Spinner.SpinnerSize.Sm\" />\n<Spinner />\n<Spinner Size=\"Spinner.SpinnerSize.Lg\" />"
      },
      {
        "title": "With Text",
        "code": "<Flex Align=\"center\" Gap=\"2\">\n    <Spinner Size=\"Spinner.SpinnerSize.Sm\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Loading...</Lumeo.Text>\n</Flex>"
      },
      {
        "title": "In a Button",
        "code": "<Button Disabled=\"true\">\n    <Spinner Size=\"Spinner.SpinnerSize.Sm\" Class=\"mr-2\" />\n    Please wait\n</Button>"
      },
      {
        "title": "Variant — interactive",
        "code": "<Spinner Variant=\"Spinner.SpinnerVariant.Ring\" />\n<Spinner Variant=\"Spinner.SpinnerVariant.Dots\" />\n<Spinner Variant=\"Spinner.SpinnerVariant.Bars\" />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "spinner",
  "docsUrl": "https://lumeo.nativ.sh/components/spinner",
  "sourceUrl": [
    {
      "file": "UI/Spinner/Spinner.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Spinner/Spinner.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Spinner/Spinner.razor",
      "content": "@namespace Lumeo\n\n@if (Variant == SpinnerVariant.Ring)\n{\n    <div class=\"@WrapperClass\" @attributes=\"AdditionalAttributes\">\n        <svg class=\"@RingCssClass\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n        </svg>\n        @if (!string.IsNullOrEmpty(Label))\n        {\n            <span class=\"text-sm text-muted-foreground\">@Label</span>\n        }\n    </div>\n}\nelse if (Variant == SpinnerVariant.Dots)\n{\n    <div class=\"@WrapperClass\" @attributes=\"AdditionalAttributes\">\n        <div class=\"@DotsContainerClass\">\n            <div class=\"@DotClass\" style=\"animation-delay: 0ms\"></div>\n            <div class=\"@DotClass\" style=\"animation-delay: 150ms\"></div>\n            <div class=\"@DotClass\" style=\"animation-delay: 300ms\"></div>\n        </div>\n        @if (!string.IsNullOrEmpty(Label))\n        {\n            <span class=\"text-sm text-muted-foreground\">@Label</span>\n        }\n    </div>\n}\nelse if (Variant == SpinnerVariant.Bars)\n{\n    <div class=\"@WrapperClass\" @attributes=\"AdditionalAttributes\">\n        <div class=\"@BarsContainerClass\">\n            <div class=\"@BarClass\" style=\"height: 60%; animation-delay: 0ms\"></div>\n            <div class=\"@BarClass\" style=\"height: 100%; animation-delay: 150ms\"></div>\n            <div class=\"@BarClass\" style=\"height: 60%; animation-delay: 300ms\"></div>\n        </div>\n        @if (!string.IsNullOrEmpty(Label))\n        {\n            <span class=\"text-sm text-muted-foreground\">@Label</span>\n        }\n    </div>\n}\n\n@code {\n    [Parameter] public SpinnerSize Size { get; set; } = SpinnerSize.Default;\n    [Parameter] public SpinnerVariant Variant { get; set; } = SpinnerVariant.Ring;\n    [Parameter] public string? Label { get; set; }\n    [Parameter] public string? Color { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string WrapperClass => string.Join(\" \", new[] { \"inline-flex items-center gap-2\", Color, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string RingCssClass => string.Join(\" \", new[] { \"animate-spin\", SizeClasses }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string SizeClasses => Size switch\n    {\n        SpinnerSize.Sm => \"h-4 w-4\",\n        SpinnerSize.Default => \"h-6 w-6\",\n        SpinnerSize.Lg => \"h-8 w-8\",\n        _ => \"h-6 w-6\"\n    };\n\n    private string DotsContainerClass => $\"flex items-center {DotGapClass}\".Trim();\n\n    private string DotGapClass => Size switch\n    {\n        SpinnerSize.Sm => \"gap-0.5\",\n        SpinnerSize.Default => \"gap-1\",\n        SpinnerSize.Lg => \"gap-1.5\",\n        _ => \"gap-1\"\n    };\n\n    private string DotClass\n    {\n        get\n        {\n            var sizeClass = Size switch\n            {\n                SpinnerSize.Sm => \"h-1.5 w-1.5\",\n                SpinnerSize.Default => \"h-2 w-2\",\n                SpinnerSize.Lg => \"h-3 w-3\",\n                _ => \"h-2 w-2\"\n            };\n            return $\"{sizeClass} rounded-full bg-current animate-bounce\";\n        }\n    }\n\n    private string BarsContainerClass\n    {\n        get\n        {\n            var heightClass = Size switch\n            {\n                SpinnerSize.Sm => \"h-3\",\n                SpinnerSize.Default => \"h-4\",\n                SpinnerSize.Lg => \"h-6\",\n                _ => \"h-4\"\n            };\n            return $\"flex items-end gap-0.5 {heightClass}\";\n        }\n    }\n\n    private string BarClass\n    {\n        get\n        {\n            var widthClass = Size switch\n            {\n                SpinnerSize.Sm => \"w-0.5\",\n                SpinnerSize.Default => \"w-1\",\n                SpinnerSize.Lg => \"w-1.5\",\n                _ => \"w-1\"\n            };\n            return $\"{widthClass} bg-current rounded-sm animate-pulse\";\n        }\n    }\n\n    public enum SpinnerSize { Sm, Default, Lg }\n    public enum SpinnerVariant { Ring, Dots, Bars }\n}\n"
    }
  ],
  "slots": [],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Spinner/SpinnerTests.cs"
  ],
  "mdSummary": "# Spinner\n\nIndeterminate loading spinner with size variants.\n\n**Package:** `Lumeo` · **Category:** Feedback\n**Docs:** https://lumeo.nativ.sh/components/spinner\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Spinner | Size | `SpinnerSize` | `SpinnerSize.Default` |  |\n| Spinner | Variant | `SpinnerVariant` | `SpinnerVariant.Ring` |  |\n| Spinner | Label | `string?` | `` |  |\n| Spinner | Color | `string?` | `` |  |\n| Spinner | Class | `string?` | `` |  |\n| Spinner | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- (none)\n\n## Events\n- (none)\n\n## Sub-components\n- (none)\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<Spinner />\n```\n\n## CSS variables\n`--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Spinner/Spinner.razor`\n"
}