{
  "name": "Descriptions",
  "category": "Data Display",
  "subcategory": "Cards & Layout",
  "description": "Key-value pair list for read-only entity details.",
  "thumbnail": "/preview-cards/descriptions.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Descriptions/Descriptions.razor",
    "UI/Descriptions/DescriptionsItem.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Descriptions",
    "category": "Data Display",
    "subcategory": "Cards & Layout",
    "description": "Key-value pair list for read-only entity details.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Descriptions/Descriptions.razor",
      "UI/Descriptions/DescriptionsItem.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Title",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Bordered",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Column",
        "type": "int",
        "default": "3",
        "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-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic",
        "code": "<Descriptions Title=\"User Details\" Column=\"2\">\n    <DescriptionsItem Label=\"Name\">John Doe</DescriptionsItem>\n    <DescriptionsItem Label=\"Email\">john@example.com</DescriptionsItem>\n    <DescriptionsItem Label=\"Role\">Administrator</DescriptionsItem>\n    <DescriptionsItem Label=\"Status\">Active</DescriptionsItem>\n</Descriptions>"
      },
      {
        "title": "Bordered",
        "code": "<Descriptions Title=\"Order Details\" Bordered=\"true\" Column=\"3\">\n    <DescriptionsItem Label=\"Order ID\">#2024-0127</DescriptionsItem>\n    <DescriptionsItem Label=\"Date\">Jan 27, 2025</DescriptionsItem>\n    <DescriptionsItem Label=\"Status\">Shipped</DescriptionsItem>\n</Descriptions>"
      },
      {
        "title": "Single Column",
        "code": "<Descriptions Column=\"1\">\n    <DescriptionsItem Label=\"Product\">Lumeo Pro License</DescriptionsItem>\n    <DescriptionsItem Label=\"Price\">$99/year</DescriptionsItem>\n</Descriptions>"
      }
    ],
    "subComponents": {
      "DescriptionsItem": {
        "componentName": "DescriptionsItem",
        "fileName": "DescriptionsItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Label",
            "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": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "descriptions",
  "docsUrl": "https://lumeo.nativ.sh/components/descriptions",
  "sourceUrl": [
    {
      "file": "UI/Descriptions/Descriptions.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Descriptions/Descriptions.razor"
    },
    {
      "file": "UI/Descriptions/DescriptionsItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Descriptions/DescriptionsItem.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Descriptions/Descriptions.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (!string.IsNullOrEmpty(Title))\n    {\n        <h3 class=\"mb-4 text-base font-semibold text-foreground\">@Title</h3>\n    }\n    @if (Bordered)\n    {\n        <div class=\"overflow-hidden rounded-lg border border-border/60\">\n            <div class=\"@GridClasses\">\n                @ChildContent\n            </div>\n        </div>\n    }\n    else\n    {\n        <div class=\"@GridClasses\">\n            @ChildContent\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public bool Bordered { get; set; }\n    [Parameter] public int Column { get; set; } = 3;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"{Class}\".Trim();\n\n    private string GridClasses => Bordered\n        ? $\"grid {ColumnClasses} divide-x divide-y divide-border/60\"\n        : $\"grid {ColumnClasses} gap-4\";\n\n    private string ColumnClasses => Column switch\n    {\n        1 => \"grid-cols-1\",\n        2 => \"grid-cols-2\",\n        4 => \"grid-cols-4\",\n        _ => \"grid-cols-3\"\n    };\n}\n"
    },
    {
      "path": "UI/Descriptions/DescriptionsItem.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (!string.IsNullOrEmpty(Label))\n    {\n        <dt class=\"text-sm text-muted-foreground\">@Label</dt>\n    }\n    <dd class=\"mt-1 text-sm text-foreground\">\n        @ChildContent\n    </dd>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Label { 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 => $\"p-3 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Descriptions",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "DescriptionsItem",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "DescriptionsItem",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Descriptions/DescriptionsTests.cs"
  ],
  "mdSummary": "# Descriptions\n\nKey-value pair list for read-only entity details.\n\n**Package:** `Lumeo` · **Category:** Data Display/Cards & Layout\n**Docs:** https://lumeo.nativ.sh/components/descriptions\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Descriptions | ChildContent | `RenderFragment?` | `` |  |\n| Descriptions | Title | `string?` | `` |  |\n| Descriptions | Bordered | `bool` | `` |  |\n| Descriptions | Column | `int` | `3` |  |\n| Descriptions | Class | `string?` | `` |  |\n| Descriptions | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| DescriptionsItem | ChildContent | `RenderFragment?` | `` |  |\n| DescriptionsItem | Label | `string?` | `` |  |\n| DescriptionsItem | Class | `string?` | `` |  |\n| DescriptionsItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Descriptions) — RenderFragment slot\n- `ChildContent` (DescriptionsItem) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `DescriptionsItem`\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<Descriptions />\n```\n\n## CSS variables\n`--color-border`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Descriptions/Descriptions.razor`\n- `UI/Descriptions/DescriptionsItem.razor`\n"
}