{
  "name": "Kanban",
  "category": "Drag & Drop",
  "subcategory": null,
  "description": "Drag-and-drop board with swimlanes.",
  "thumbnail": "/preview-cards/kanban.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Kanban/Kanban.razor",
    "UI/Kanban/KanbanCard.razor",
    "UI/Kanban/KanbanColumn.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-border",
    "--color-card",
    "--color-destructive",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--color-primary",
    "--color-secondary",
    "--color-secondary-foreground",
    "--radius"
  ],
  "api": {
    "name": "Kanban",
    "category": "Drag & Drop",
    "subcategory": null,
    "description": "Drag-and-drop board with swimlanes.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Kanban/Kanban.razor",
      "UI/Kanban/KanbanCard.razor",
      "UI/Kanban/KanbanColumn.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": [],
    "cssVars": [
      "--color-border",
      "--color-card",
      "--color-destructive",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--color-primary",
      "--color-secondary",
      "--color-secondary-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Drag &amp; Drop Board",
        "code": "<Kanban>\n    <KanbanColumn Title=\"To Do\" Badge=\"3\">\n        <KanbanCard Title=\"Design landing page\"\n                    Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Design\", Color = \"primary\" } })\" />\n        <KanbanCard Title=\"Write API docs\"\n                    Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Docs\", Color = \"secondary\" } })\" />\n    </KanbanColumn>\n    <KanbanColumn Title=\"In Progress\" Badge=\"1\">\n        <KanbanCard Title=\"Build auth flow\"\n                    Description=\"Login and register flow.\"\n                    Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"High\", Color = \"destructive\" } })\" />\n    </KanbanColumn>\n    <KanbanColumn Title=\"Done\" Badge=\"1\">\n        <KanbanCard Title=\"Project setup\" Labels=\"@(new List<KanbanCard.KanbanLabel> { new() { Text = \"Done\", Color = \"success\" } })\" />\n    </KanbanColumn>\n</Kanban>"
      },
      {
        "title": "With Add Card Button",
        "code": "<KanbanColumn Title=\"Backlog\" AllowAdd=\"true\" OnAdd=\"@AddCard\" />"
      },
      {
        "title": "Custom Header",
        "code": "<KanbanColumn>\n    <HeaderContent>\n        <Flex Class=\"items-center gap-2\">\n            <Lumeo.Text Class=\"text-sm font-medium\">Sprint 4</Lumeo.Text>\n            <Badge Variant=\"Badge.BadgeVariant.Secondary\">5</Badge>\n        </Flex>\n    </HeaderContent>\n    <KanbanCard Title=\"Task A\" />\n</KanbanColumn>"
      }
    ],
    "subComponents": {
      "KanbanCard": {
        "componentName": "KanbanCard",
        "fileName": "KanbanCard.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Title",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Description",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Labels",
            "type": "List<KanbanLabel>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Avatar",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnClick",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Draggable",
            "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": [
          {
            "name": "OnClick",
            "type": "EventCallback",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      },
      "KanbanColumn": {
        "componentName": "KanbanColumn",
        "fileName": "KanbanColumn.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Title",
            "type": "string?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Badge",
            "type": "int?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "HeaderContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AllowAdd",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnAdd",
            "type": "EventCallback",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "OnDrop",
            "type": "EventCallback<DragEventArgs>",
            "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": [
          {
            "name": "OnAdd",
            "type": "EventCallback",
            "description": null
          },
          {
            "name": "OnDrop",
            "type": "EventCallback<DragEventArgs>",
            "description": null
          }
        ],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "kanban",
  "docsUrl": "https://lumeo.nativ.sh/components/kanban",
  "sourceUrl": [
    {
      "file": "UI/Kanban/Kanban.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Kanban/Kanban.razor"
    },
    {
      "file": "UI/Kanban/KanbanCard.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Kanban/KanbanCard.razor"
    },
    {
      "file": "UI/Kanban/KanbanColumn.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Kanban/KanbanColumn.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Kanban/Kanban.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 gap-4 overflow-x-auto p-4 {Class}\".Trim();\n}\n"
    },
    {
      "path": "UI/Kanban/KanbanCard.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\"\n     draggable=\"@(Draggable ? \"true\" : \"false\")\"\n     @onclick=\"OnClick\"\n     @attributes=\"AdditionalAttributes\">\n\n    @if (Labels is not null && Labels.Count > 0)\n    {\n        <div class=\"flex flex-wrap gap-1 mb-2\">\n            @foreach (var label in Labels)\n            {\n                <span class=\"@GetLabelClass(label.Color) inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium\">\n                    @label.Text\n                </span>\n            }\n        </div>\n    }\n\n    @if (ChildContent is not null)\n    {\n        @ChildContent\n    }\n    else\n    {\n        <p class=\"text-sm font-medium leading-snug\">@Title</p>\n        @if (!string.IsNullOrEmpty(Description))\n        {\n            <p class=\"mt-1 text-xs text-muted-foreground line-clamp-2\">@Description</p>\n        }\n    }\n\n    @if (!string.IsNullOrEmpty(Avatar))\n    {\n        <div class=\"mt-2 flex justify-end\">\n            <img src=\"@Avatar\" alt=\"Assignee\" class=\"w-6 h-6 rounded-full object-cover border border-border/40\" />\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public string? Description { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public List<KanbanLabel>? Labels { get; set; }\n    [Parameter] public string? Avatar { get; set; }\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public bool Draggable { get; set; } = true;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"bg-card rounded-lg border border-border/40 p-3 shadow-sm cursor-pointer hover:shadow-md transition-shadow {Class}\".Trim();\n\n    private static string GetLabelClass(string color) => color switch\n    {\n        \"primary\" => \"bg-primary/10 text-primary\",\n        \"destructive\" => \"bg-destructive/10 text-destructive\",\n        \"warning\" => \"bg-warning-light text-warning-text\",\n        \"success\" => \"bg-success-light text-success-text\",\n        \"secondary\" => \"bg-secondary text-secondary-foreground\",\n        _ => \"bg-muted text-muted-foreground\"\n    };\n\n    public class KanbanLabel\n    {\n        public string Text { get; set; } = \"\";\n        public string Color { get; set; } = \"primary\";\n    }\n}\n"
    },
    {
      "path": "UI/Kanban/KanbanColumn.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.Localization.ILumeoLocalizer L\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <div class=\"flex items-center justify-between px-3 py-2 border-b border-border/40\">\n        @if (HeaderContent is not null)\n        {\n            @HeaderContent\n        }\n        else\n        {\n            <div class=\"flex items-center gap-2\">\n                <span class=\"font-medium text-sm\">@Title</span>\n                @if (Badge.HasValue)\n                {\n                    <span class=\"inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-muted text-muted-foreground text-xs font-medium\">\n                        @Badge.Value\n                    </span>\n                }\n            </div>\n        }\n    </div>\n\n    <div class=\"flex-1 overflow-y-auto p-2 flex flex-col gap-2 min-h-16\"\n         @ondragover:preventDefault\n         @ondrop=\"HandleDrop\">\n        @ChildContent\n    </div>\n\n    @if (AllowAdd)\n    {\n        <div class=\"p-2 border-t border-border/40\">\n            <button type=\"button\"\n                    class=\"w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm text-muted-foreground hover:bg-muted/50 hover:text-foreground transition-colors\"\n                    @onclick=\"OnAdd\">\n                <Blazicon Svg=\"Lucide.Plus\" class=\"h-3.5 w-3.5\" />\n                @L[\"Kanban.AddCard\"]\n            </button>\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public int? Badge { get; set; }\n    [Parameter] public RenderFragment? HeaderContent { get; set; }\n    [Parameter] public bool AllowAdd { get; set; }\n    [Parameter] public EventCallback OnAdd { get; set; }\n    [Parameter] public EventCallback<DragEventArgs> OnDrop { get; set; }\n\n    private async Task HandleDrop(DragEventArgs e) => await OnDrop.InvokeAsync(e);\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-col w-72 shrink-0 rounded-lg bg-muted/30 border border-border/40 max-h-full {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Kanban",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "KanbanCard",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "KanbanColumn",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "HeaderContent",
      "owner": "KanbanColumn",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ILumeoLocalizer",
      "namespace": "Lumeo.Services.Localization"
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "KanbanCard",
      "reason": "sub-component"
    },
    {
      "name": "KanbanColumn",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Kanban/KanbanTests.cs"
  ],
  "mdSummary": "# Kanban\n\nDrag-and-drop board with swimlanes.\n\n**Package:** `Lumeo` · **Category:** Drag & Drop\n**Docs:** https://lumeo.nativ.sh/components/kanban\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Kanban | ChildContent | `RenderFragment?` | `` |  |\n| Kanban | Class | `string?` | `` |  |\n| Kanban | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| KanbanCard | Title | `string?` | `` |  |\n| KanbanCard | Description | `string?` | `` |  |\n| KanbanCard | ChildContent | `RenderFragment?` | `` |  |\n| KanbanCard | Labels | `List<KanbanLabel>?` | `` |  |\n| KanbanCard | Avatar | `string?` | `` |  |\n| KanbanCard | OnClick | `EventCallback` | `` |  |\n| KanbanCard | Draggable | `bool` | `true` |  |\n| KanbanCard | Class | `string?` | `` |  |\n| KanbanCard | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| KanbanColumn | Title | `string?` | `` |  |\n| KanbanColumn | ChildContent | `RenderFragment?` | `` |  |\n| KanbanColumn | Badge | `int?` | `` |  |\n| KanbanColumn | HeaderContent | `RenderFragment?` | `` |  |\n| KanbanColumn | AllowAdd | `bool` | `` |  |\n| KanbanColumn | OnAdd | `EventCallback` | `` |  |\n| KanbanColumn | OnDrop | `EventCallback<DragEventArgs>` | `` |  |\n| KanbanColumn | Class | `string?` | `` |  |\n| KanbanColumn | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Kanban) — RenderFragment slot\n- `ChildContent` (KanbanCard) — RenderFragment slot\n- `ChildContent` (KanbanColumn) — RenderFragment slot\n- `HeaderContent` (KanbanColumn) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `KanbanCard`, `KanbanColumn`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- `ILumeoLocalizer` (Lumeo.Services.Localization)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Kanban />\n```\n\n## CSS variables\n`--color-border`, `--color-card`, `--color-destructive`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-primary`, `--color-secondary`, `--color-secondary-foreground`, `--radius`\n\n## Files\n- `UI/Kanban/Kanban.razor`\n- `UI/Kanban/KanbanCard.razor`\n- `UI/Kanban/KanbanColumn.razor`\n"
}