{
  "name": "KpiCard",
  "category": "Dashboard",
  "subcategory": null,
  "description": "Dashboard KPI tile showing value, label, and trend.",
  "thumbnail": "/preview-cards/kpi-card.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/KpiCard/KpiCard.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-card",
    "--color-card-foreground",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "KpiCard",
    "category": "Dashboard",
    "subcategory": null,
    "description": "Dashboard KPI tile showing value, label, and trend.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/KpiCard/KpiCard.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Label",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Value",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Delta",
        "type": "double?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DeltaFormat",
        "type": "KpiDeltaFormat",
        "default": "KpiDeltaFormat.Percent",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DeltaPositive",
        "type": "KpiDeltaDirection",
        "default": "KpiDeltaDirection.Good",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "IconContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "SparkContent",
        "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": [
      {
        "name": "KpiDeltaFormat",
        "values": [
          "Percent",
          "Absolute"
        ],
        "description": null
      },
      {
        "name": "KpiDeltaDirection",
        "values": [
          "Good",
          "Bad"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-card",
      "--color-card-foreground",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic",
        "code": "<Grid Columns=\"3\" Gap=\"4\">\n    <KpiCard Label=\"Total Revenue\" Value=\"$48,295\" />\n    <KpiCard Label=\"Active Users\" Value=\"12,843\" />\n    <KpiCard Label=\"Conversion Rate\" Value=\"3.6%\" />\n</Grid>"
      },
      {
        "title": "With Delta",
        "code": "<Grid Columns=\"3\" Gap=\"4\">\n    <KpiCard Label=\"Monthly Revenue\" Value=\"$18,450\" Delta=\"8.3\" />\n    <KpiCard Label=\"Churn Rate\" Value=\"2.1%\" Delta=\"-0.4\" DeltaPositive=\"KpiCard.KpiDeltaDirection.Bad\" />\n    <KpiCard Label=\"Support Tickets\" Value=\"247\" Delta=\"-12\"\n             DeltaFormat=\"KpiCard.KpiDeltaFormat.Absolute\"\n             DeltaPositive=\"KpiCard.KpiDeltaDirection.Bad\" />\n</Grid>"
      },
      {
        "title": "With Icon and Sparkline",
        "code": "<KpiCard Label=\"Page Views\" Value=\"94,210\" Delta=\"5.7\">\n    <IconContent>\n        <Blazicon Svg=\"Lucide.TrendingUp\" class=\"h-4 w-4\" />\n    </IconContent>\n    <SparkContent>\n        <Sparkline Data=\"@_viewData\" Class=\"h-10 w-full\" />\n    </SparkContent>\n</KpiCard>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "kpi-card",
  "docsUrl": "https://lumeo.nativ.sh/components/kpi-card",
  "sourceUrl": [
    {
      "file": "UI/KpiCard/KpiCard.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/KpiCard/KpiCard.razor"
    }
  ],
  "source": [
    {
      "path": "UI/KpiCard/KpiCard.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@RootClasses\" @attributes=\"AdditionalAttributes\">\n    <div class=\"flex items-center gap-2\">\n        @if (IconContent is not null)\n        {\n            <div class=\"flex h-8 w-8 items-center justify-center rounded-md bg-muted/60 text-muted-foreground\">\n                @IconContent\n            </div>\n        }\n        @if (!string.IsNullOrEmpty(Label))\n        {\n            <div class=\"text-sm text-muted-foreground\">@Label</div>\n        }\n    </div>\n\n    <div class=\"mt-3 text-3xl font-semibold tracking-tight text-foreground\">@Value</div>\n\n    @if (Delta.HasValue || SparkContent is not null)\n    {\n        <div class=\"mt-3 flex items-center justify-between gap-2\">\n            @if (Delta.HasValue)\n            {\n                <Lumeo.Delta Value=\"Delta.Value\"\n                             Format=\"DeltaFormatValue\"\n                             Positive=\"DeltaPositiveValue\" />\n            }\n            else\n            {\n                <span></span>\n            }\n            @if (SparkContent is not null)\n            {\n                <div class=\"flex-1 min-w-0\" style=\"max-width: 140px\">\n                    @SparkContent\n                </div>\n            }\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public string? Label { get; set; }\n    [Parameter] public string? Value { get; set; }\n    [Parameter] public double? Delta { get; set; }\n    [Parameter] public KpiDeltaFormat DeltaFormat { get; set; } = KpiDeltaFormat.Percent;\n    [Parameter] public KpiDeltaDirection DeltaPositive { get; set; } = KpiDeltaDirection.Good;\n    [Parameter] public RenderFragment? IconContent { get; set; }\n    [Parameter] public RenderFragment? SparkContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string RootClasses =>\n        $\"rounded-xl border border-border bg-card text-card-foreground p-5 {Class}\".Trim();\n\n    private Lumeo.Delta.DeltaFormat DeltaFormatValue =>\n        DeltaFormat == KpiDeltaFormat.Absolute\n            ? Lumeo.Delta.DeltaFormat.Absolute\n            : Lumeo.Delta.DeltaFormat.Percent;\n\n    private Lumeo.Delta.DeltaDirection DeltaPositiveValue =>\n        DeltaPositive == KpiDeltaDirection.Bad\n            ? Lumeo.Delta.DeltaDirection.Bad\n            : Lumeo.Delta.DeltaDirection.Good;\n\n    public enum KpiDeltaFormat { Percent, Absolute }\n    public enum KpiDeltaDirection { Good, Bad }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "IconContent",
      "owner": "KpiCard",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "SparkContent",
      "owner": "KpiCard",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/KpiCard/KpiCardTests.cs"
  ],
  "mdSummary": "# KpiCard\n\nDashboard KPI tile showing value, label, and trend.\n\n**Package:** `Lumeo` · **Category:** Dashboard\n**Docs:** https://lumeo.nativ.sh/components/kpi-card\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| KpiCard | Label | `string?` | `` |  |\n| KpiCard | Value | `string?` | `` |  |\n| KpiCard | Delta | `double?` | `` |  |\n| KpiCard | DeltaFormat | `KpiDeltaFormat` | `KpiDeltaFormat.Percent` |  |\n| KpiCard | DeltaPositive | `KpiDeltaDirection` | `KpiDeltaDirection.Good` |  |\n| KpiCard | IconContent | `RenderFragment?` | `` |  |\n| KpiCard | SparkContent | `RenderFragment?` | `` |  |\n| KpiCard | Class | `string?` | `` |  |\n| KpiCard | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `IconContent` (KpiCard) — RenderFragment slot\n- `SparkContent` (KpiCard) — 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<KpiCard />\n```\n\n## CSS variables\n`--color-border`, `--color-card`, `--color-card-foreground`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/KpiCard/KpiCard.razor`\n"
}