{
  "name": "Bento",
  "category": "Dashboard",
  "subcategory": null,
  "description": "Masonry grid for dashboard tiles and marketing feature layouts.",
  "thumbnail": "/preview-cards/bento.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Bento/Bento.razor",
    "UI/Bento/BentoTile.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-card",
    "--color-card-foreground",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Bento",
    "category": "Dashboard",
    "subcategory": null,
    "description": "Masonry grid for dashboard tiles and marketing feature layouts.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Bento/Bento.razor",
      "UI/Bento/BentoTile.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Columns",
        "type": "int",
        "default": "4",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Gap",
        "type": "BentoGap",
        "default": "BentoGap.Md",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Class",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "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": "BentoGap",
        "values": [
          "Sm",
          "Md",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-card",
      "--color-card-foreground",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic 4-column bento",
        "code": "<Bento Columns=\"4\" Gap=\"Bento.BentoGap.Md\">\n    <BentoTile Span=\"2\" Title=\"Revenue\" Description=\"Last 30 days\">\n        <div class=\"text-3xl font-semibold text-foreground\">$48,290</div>\n    </BentoTile>\n    <BentoTile Title=\"New users\"><div class=\"text-2xl font-semibold\">1,204</div></BentoTile>\n    <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\n    <BentoTile Span=\"2\" Title=\"Latest activity\" Description=\"Feed\">\n        <div class=\"text-sm text-muted-foreground\">No events in the last hour.</div>\n    </BentoTile>\n    <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\n    <BentoTile Title=\"Avg. duration\"><div class=\"text-2xl font-semibold\">4m 12s</div></BentoTile>\n</Bento>"
      },
      {
        "title": "Gap (interactive)",
        "code": "<Segmented @bind-Value=\"_gap\">\n    <SegmentedItem Value=\"@Bento.BentoGap.Sm\">Sm</SegmentedItem>\n    <SegmentedItem Value=\"@Bento.BentoGap.Md\">Md</SegmentedItem>\n    <SegmentedItem Value=\"@Bento.BentoGap.Lg\">Lg</SegmentedItem>\n</Segmented>\n<Bento Columns=\"4\" Gap=\"@_gap\">\n    <BentoTile Title=\"Revenue\"><div class=\"text-2xl font-semibold\">$48,290</div></BentoTile>\n    <BentoTile Title=\"Users\"><div class=\"text-2xl font-semibold\">12,402</div></BentoTile>\n    <BentoTile Title=\"Sessions\"><div class=\"text-2xl font-semibold\">8,492</div></BentoTile>\n    <BentoTile Title=\"Churn\"><div class=\"text-2xl font-semibold\">2.1%</div></BentoTile>\n</Bento>\n\n@code { private Bento.BentoGap _gap = Bento.BentoGap.Md; }"
      },
      {
        "title": "Dashboard — KPI row + spark + wide tile",
        "code": "<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\n    <KpiCard Label=\"Revenue\" Value=\"$48,290\" Delta=\"12.3\" />\n    <KpiCard Label=\"Active users\" Value=\"12,402\" Delta=\"4.8\" />\n    <KpiCard Label=\"MRR\" Value=\"$9,820\" Delta=\"-1.2\" />\n</Bento>\n<Bento Columns=\"3\" Gap=\"Bento.BentoGap.Md\">\n    <SparkCard Label=\"Page views\" Value=\"184k\" Data=\"@sparkA\" />\n    <SparkCard Label=\"Signups\" Value=\"421\" Data=\"@sparkB\" />\n    <BentoTile Title=\"Traffic\" Description=\"Last 7 days\">\n        <Chart ... />\n    </BentoTile>\n</Bento>"
      }
    ],
    "subComponents": {
      "BentoTile": {
        "componentName": "BentoTile",
        "fileName": "BentoTile.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Span",
            "type": "int",
            "default": "1",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "RowSpan",
            "type": "int",
            "default": "1",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "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": "HeaderContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "FooterContent",
            "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": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "bento",
  "docsUrl": "https://lumeo.nativ.sh/components/bento",
  "sourceUrl": [
    {
      "file": "UI/Bento/Bento.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Bento/Bento.razor"
    },
    {
      "file": "UI/Bento/BentoTile.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Bento/BentoTile.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Bento/Bento.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@RootClasses\" style=\"@RootStyle\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public int Columns { get; set; } = 4;\n    [Parameter] public BentoGap Gap { get; set; } = BentoGap.Md;\n    [Parameter] public string? Class { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string GapClass => Gap switch\n    {\n        BentoGap.Sm => \"gap-3\",\n        BentoGap.Lg => \"gap-6\",\n        _ => \"gap-4\"\n    };\n\n    // Pre-approved columns use Tailwind utilities. Any other value falls back to inline style.\n    private string ColumnsClass => Columns switch\n    {\n        2 => \"grid-cols-2\",\n        3 => \"grid-cols-3\",\n        4 => \"grid-cols-4\",\n        6 => \"grid-cols-6\",\n        _ => \"\"\n    };\n\n    private string RootStyle\n    {\n        get\n        {\n            // grid-auto-rows: 1fr keeps every row the same height so short-content tiles don't\n            // shrink and tall-content tiles don't overlap their neighbors when row spans differ.\n            var baseStyle = \"grid-auto-rows: minmax(0, 1fr);\";\n            if (string.IsNullOrEmpty(ColumnsClass))\n            {\n                baseStyle += $\" grid-template-columns: repeat({Columns}, minmax(0, 1fr));\";\n            }\n            return baseStyle;\n        }\n    }\n\n    private string RootClasses => $\"grid {ColumnsClass} {GapClass} {Class}\".Trim();\n\n    public enum BentoGap { Sm, Md, Lg }\n}\n"
    },
    {
      "path": "UI/Bento/BentoTile.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@RootClasses\" style=\"@RootStyle\" @attributes=\"AdditionalAttributes\">\n    @if (HeaderContent is not null || !string.IsNullOrEmpty(Title) || !string.IsNullOrEmpty(Description))\n    {\n        <div class=\"mb-3 flex flex-col gap-1\">\n            @if (HeaderContent is not null)\n            {\n                @HeaderContent\n            }\n            else\n            {\n                @if (!string.IsNullOrEmpty(Title))\n                {\n                    <div class=\"text-sm font-medium text-foreground\">@Title</div>\n                }\n                @if (!string.IsNullOrEmpty(Description))\n                {\n                    <div class=\"text-xs text-muted-foreground\">@Description</div>\n                }\n            }\n        </div>\n    }\n\n    @if (ChildContent is not null)\n    {\n        <div class=\"flex-1 min-h-0\">\n            @ChildContent\n        </div>\n    }\n\n    @if (FooterContent is not null)\n    {\n        <div class=\"mt-3 pt-3 border-t border-border/60\">\n            @FooterContent\n        </div>\n    }\n</div>\n\n@code {\n    [Parameter] public int Span { get; set; } = 1;\n    [Parameter] public int RowSpan { get; set; } = 1;\n    [Parameter] public string? Title { get; set; }\n    [Parameter] public string? Description { get; set; }\n    [Parameter] public RenderFragment? HeaderContent { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public RenderFragment? FooterContent { 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 => $\"flex flex-col min-w-0 min-h-0 rounded-xl border border-border/60 bg-card text-card-foreground p-5 {Class}\".Trim();\n\n    private string RootStyle =>\n        $\"grid-column: span {Span} / span {Span}; grid-row: span {RowSpan} / span {RowSpan};\";\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Bento",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "HeaderContent",
      "owner": "BentoTile",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "BentoTile",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "FooterContent",
      "owner": "BentoTile",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "BentoTile",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Bento/BentoTests.cs",
    "tests/Lumeo.Tests/Components/Bento/BentoTileTests.cs"
  ],
  "mdSummary": "# Bento\n\nMasonry grid for dashboard tiles and marketing feature layouts.\n\n**Package:** `Lumeo` · **Category:** Dashboard\n**Docs:** https://lumeo.nativ.sh/components/bento\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Bento | Columns | `int` | `4` |  |\n| Bento | Gap | `BentoGap` | `BentoGap.Md` |  |\n| Bento | Class | `string?` | `` |  |\n| Bento | ChildContent | `RenderFragment?` | `` |  |\n| Bento | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| BentoTile | Span | `int` | `1` |  |\n| BentoTile | RowSpan | `int` | `1` |  |\n| BentoTile | Title | `string?` | `` |  |\n| BentoTile | Description | `string?` | `` |  |\n| BentoTile | HeaderContent | `RenderFragment?` | `` |  |\n| BentoTile | ChildContent | `RenderFragment?` | `` |  |\n| BentoTile | FooterContent | `RenderFragment?` | `` |  |\n| BentoTile | Class | `string?` | `` |  |\n| BentoTile | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Bento) — RenderFragment slot\n- `HeaderContent` (BentoTile) — RenderFragment slot\n- `ChildContent` (BentoTile) — RenderFragment slot\n- `FooterContent` (BentoTile) — RenderFragment slot\n\n## Events\n- (none)\n\n## Sub-components\n- `BentoTile`\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<Bento />\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/Bento/Bento.razor`\n- `UI/Bento/BentoTile.razor`\n"
}