{
  "name": "RingProgress",
  "category": "Feedback",
  "subcategory": null,
  "description": "Circular determinate progress ring with optional centre label or custom content.",
  "thumbnail": "/preview-cards/ring-progress.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/RingProgress/RingProgress.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "RingProgress",
    "category": "Feedback",
    "subcategory": null,
    "description": "Circular determinate progress ring with optional centre label or custom content.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/RingProgress/RingProgress.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Value",
        "type": "double",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "int",
        "default": "64",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Thickness",
        "type": "int",
        "default": "6",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Color",
        "type": "string",
        "default": "\"primary\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "TrackColor",
        "type": "string",
        "default": "\"muted\"",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ShowLabel",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "LabelContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "RoundedCaps",
        "type": "bool",
        "default": "true",
        "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": [],
    "cssVars": [
      "--color-foreground"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<RingProgress Value=\"25\" ShowLabel=\"true\" />\n<RingProgress Value=\"50\" ShowLabel=\"true\" />\n<RingProgress Value=\"75\" ShowLabel=\"true\" />"
      },
      {
        "title": "Sizes",
        "code": "<RingProgress Value=\"65\" Size=\"40\" ShowLabel=\"true\" />\n<RingProgress Value=\"65\" Size=\"64\" ShowLabel=\"true\" />\n<RingProgress Value=\"65\" Size=\"96\" ShowLabel=\"true\" />"
      },
      {
        "title": "Colors",
        "code": "<RingProgress Value=\"70\" ShowLabel=\"true\" Color=\"primary\" />\n<RingProgress Value=\"70\" ShowLabel=\"true\" Color=\"success\" />\n<RingProgress Value=\"70\" ShowLabel=\"true\" Color=\"warning\" />\n<RingProgress Value=\"70\" ShowLabel=\"true\" Color=\"destructive\" />"
      },
      {
        "title": "Custom Label",
        "code": "<RingProgress Value=\"82\">\n    <LabelContent>\n        <div class=\"text-center\">\n            <div class=\"text-xs font-semibold text-foreground\">82</div>\n            <div class=\"text-[9px] text-muted-foreground\">score</div>\n        </div>\n    </LabelContent>\n</RingProgress>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "ring-progress",
  "docsUrl": "https://lumeo.nativ.sh/components/ring-progress",
  "sourceUrl": [
    {
      "file": "UI/RingProgress/RingProgress.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/RingProgress/RingProgress.razor"
    }
  ],
  "source": [
    {
      "path": "UI/RingProgress/RingProgress.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@ContainerClass\"\n     role=\"progressbar\"\n     aria-valuenow=\"@Value.ToString(System.Globalization.CultureInfo.InvariantCulture)\"\n     aria-valuemin=\"0\"\n     aria-valuemax=\"100\"\n     @attributes=\"AdditionalAttributes\"\n     style=\"@ContainerStyle\">\n    <svg width=\"@Size\" height=\"@Size\"\n         viewBox=\"0 0 @Size @Size\"\n         xmlns=\"http://www.w3.org/2000/svg\">\n        @* Track circle *@\n        <circle cx=\"@Cx\" cy=\"@Cy\" r=\"@Radius\"\n                fill=\"none\"\n                stroke=\"var(--color-@TrackColor, var(--color-muted))\"\n                stroke-width=\"@Thickness\" />\n        @* Value circle *@\n        <circle cx=\"@Cx\" cy=\"@Cy\" r=\"@Radius\"\n                fill=\"none\"\n                stroke=\"var(--color-@Color, var(--color-primary))\"\n                stroke-width=\"@Thickness\"\n                stroke-linecap=\"@(RoundedCaps ? \"round\" : \"butt\")\"\n                stroke-dasharray=\"@DashArray\"\n                stroke-dashoffset=\"@DashOffset\"\n                transform=\"rotate(-90 @Cx @Cy)\"\n                style=\"transition: stroke-dashoffset 0.3s ease;\" />\n    </svg>\n    @* Centre content *@\n    @if (LabelContent is not null)\n    {\n        <div class=\"absolute inset-0 flex items-center justify-center\">\n            @LabelContent\n        </div>\n    }\n    else if (ShowLabel)\n    {\n        <span class=\"absolute inset-0 flex items-center justify-center text-foreground font-medium\"\n              style=\"font-size: @(Size / 5)px;\">\n            @((int)Math.Round(ClampedValue))%\n        </span>\n    }\n</div>\n\n@code {\n    [Parameter] public double Value { get; set; }\n    [Parameter] public int Size { get; set; } = 64;\n    [Parameter] public int Thickness { get; set; } = 6;\n    [Parameter] public string Color { get; set; } = \"primary\";\n    [Parameter] public string TrackColor { get; set; } = \"muted\";\n    [Parameter] public bool ShowLabel { get; set; }\n    [Parameter] public RenderFragment? LabelContent { get; set; }\n    [Parameter] public bool RoundedCaps { get; set; } = true;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private double ClampedValue => Math.Clamp(Value, 0.0, 100.0);\n\n    private double Cx => Size / 2.0;\n    private double Cy => Size / 2.0;\n    private double Radius => (Size - Thickness) / 2.0;\n    private double Circumference => 2 * Math.PI * Radius;\n\n    private string DashArray\n        => Circumference.ToString(System.Globalization.CultureInfo.InvariantCulture);\n\n    private string DashOffset\n    {\n        get\n        {\n            var offset = Circumference * (1.0 - ClampedValue / 100.0);\n            return offset.ToString(System.Globalization.CultureInfo.InvariantCulture);\n        }\n    }\n\n    private string ContainerClass\n        => $\"relative inline-flex items-center justify-center {Class}\".Trim();\n\n    private string ContainerStyle\n        => $\"width: {Size}px; height: {Size}px;\";\n}\n"
    }
  ],
  "slots": [
    {
      "name": "LabelContent",
      "owner": "RingProgress",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/RingProgress/RingProgressTests.cs"
  ],
  "mdSummary": "# RingProgress\n\nCircular determinate progress ring with optional centre label or custom content.\n\n**Package:** `Lumeo` · **Category:** Feedback\n**Docs:** https://lumeo.nativ.sh/components/ring-progress\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| RingProgress | Value | `double` | `` |  |\n| RingProgress | Size | `int` | `64` |  |\n| RingProgress | Thickness | `int` | `6` |  |\n| RingProgress | Color | `string` | `\"primary\"` |  |\n| RingProgress | TrackColor | `string` | `\"muted\"` |  |\n| RingProgress | ShowLabel | `bool` | `` |  |\n| RingProgress | LabelContent | `RenderFragment?` | `` |  |\n| RingProgress | RoundedCaps | `bool` | `true` |  |\n| RingProgress | Class | `string?` | `` |  |\n| RingProgress | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `LabelContent` (RingProgress) — RenderFragment slot\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<RingProgress />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/RingProgress/RingProgress.razor`\n"
}