{
  "name": "AppBar",
  "category": "Navigation",
  "subcategory": null,
  "description": "Top application bar with start, center, and end slots; sticky and elevated variants.",
  "thumbnail": "/preview-cards/app-bar.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/AppBar/AppBar.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-card",
    "--color-foreground"
  ],
  "api": {
    "name": "AppBar",
    "category": "Navigation",
    "subcategory": null,
    "description": "Top application bar with start, center, and end slots; sticky and elevated variants.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/AppBar/AppBar.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "StartContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "EndContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Sticky",
        "type": "bool",
        "default": "true",
        "description": "When true (default), pins to the top of the viewport.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Elevated",
        "type": "bool",
        "default": null,
        "description": "When true, adds a subtle shadow beneath the bar.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Bordered",
        "type": "bool",
        "default": "true",
        "description": "When true (default), adds a bottom border.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Height",
        "type": "string",
        "default": "\"h-14\"",
        "description": "Tailwind height class for the bar. Default is \"h-14\".",
        "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-foreground"
    ],
    "examples": [
      {
        "title": "Default AppBar",
        "code": "<AppBar>\n    <StartContent>\n        <Flex Gap=\"2\" Align=\"center\">\n            <img src=\"/logo.svg\" class=\"h-6 w-6\" alt=\"Logo\" />\n            <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Acme Corp</Lumeo.Text>\n        </Flex>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Sign In</Button>\n        <Button Size=\"Button.ButtonSize.Sm\">Get Started</Button>\n    </EndContent>\n</AppBar>"
      },
      {
        "title": "With Search",
        "code": "<AppBar>\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">Dashboard</Lumeo.Text>\n    </StartContent>\n    <ChildContent>\n        <Input Placeholder=\"Search...\" Class=\"max-w-xs h-8 text-sm\" />\n    </ChildContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Bell\" class=\"h-4 w-4\" />\n        </Button>\n        <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n    </EndContent>\n</AppBar>"
      },
      {
        "title": "Appearance toggles — interactive",
        "code": "<Switch @bind-Checked=\"_elevated\" />\n<Switch @bind-Checked=\"_bordered\" />\n<AppBar Elevated=\"@_elevated\" Bordered=\"@_bordered\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">Sign In</Button>\n        <Button Size=\"Button.ButtonSize.Sm\">Get Started</Button>\n    </EndContent>\n</AppBar>\n\n@code {\n    private bool _elevated = false;\n    private bool _bordered = true;\n}"
      },
      {
        "title": "Elevated (no border)",
        "code": "<AppBar Elevated=\"true\" Bordered=\"false\">\n    <StartContent>\n        <Lumeo.Text Size=\"sm\" Weight=\"semibold\">My App</Lumeo.Text>\n    </StartContent>\n    <EndContent>\n        <Button Variant=\"Button.ButtonVariant.Ghost\" Size=\"Button.ButtonSize.Sm\">\n            <Blazicon Svg=\"Lucide.Settings\" class=\"h-4 w-4\" />\n        </Button>\n    </EndContent>\n</AppBar>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "app-bar",
  "docsUrl": "https://lumeo.nativ.sh/components/app-bar",
  "sourceUrl": [
    {
      "file": "UI/AppBar/AppBar.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/AppBar/AppBar.razor"
    }
  ],
  "source": [
    {
      "path": "UI/AppBar/AppBar.razor",
      "content": "@namespace Lumeo\n\n<header class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @if (StartContent is not null)\n    {\n        <div class=\"flex items-center shrink-0\">\n            @StartContent\n        </div>\n    }\n    <div class=\"flex-1 flex items-center min-w-0\">\n        @ChildContent\n    </div>\n    @if (EndContent is not null)\n    {\n        <div class=\"flex items-center shrink-0 gap-2\">\n            @EndContent\n        </div>\n    }\n</header>\n\n@code {\n    [Parameter] public RenderFragment? StartContent { get; set; }\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public RenderFragment? EndContent { get; set; }\n\n    /// <summary>When true (default), pins to the top of the viewport.</summary>\n    [Parameter] public bool Sticky { get; set; } = true;\n\n    /// <summary>When true, adds a subtle shadow beneath the bar.</summary>\n    [Parameter] public bool Elevated { get; set; }\n\n    /// <summary>When true (default), adds a bottom border.</summary>\n    [Parameter] public bool Bordered { get; set; } = true;\n\n    /// <summary>Tailwind height class for the bar. Default is \"h-14\".</summary>\n    [Parameter] public string Height { get; set; } = \"h-14\";\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass\n    {\n        get\n        {\n            var classes = new System.Text.StringBuilder(\"flex items-center px-4 gap-4 bg-card text-foreground\");\n\n            if (!string.IsNullOrWhiteSpace(Height))\n                classes.Append($\" {Height}\");\n\n            if (Sticky)\n                classes.Append(\" sticky top-0 z-30\");\n\n            if (Elevated)\n                classes.Append(\" shadow-sm\");\n\n            if (Bordered)\n                classes.Append(\" border-b border-border/40\");\n\n            if (!string.IsNullOrEmpty(Class))\n                classes.Append($\" {Class}\");\n\n            return classes.ToString().Trim();\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "StartContent",
      "owner": "AppBar",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "AppBar",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "EndContent",
      "owner": "AppBar",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/AppBar/AppBarTests.cs"
  ],
  "mdSummary": "# AppBar\n\nTop application bar with start, center, and end slots; sticky and elevated variants.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/app-bar\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| AppBar | StartContent | `RenderFragment?` | `` |  |\n| AppBar | ChildContent | `RenderFragment?` | `` |  |\n| AppBar | EndContent | `RenderFragment?` | `` |  |\n| AppBar | Sticky | `bool` | `true` | When true (default), pins to the top of the viewport. |\n| AppBar | Elevated | `bool` | `` | When true, adds a subtle shadow beneath the bar. |\n| AppBar | Bordered | `bool` | `true` | When true (default), adds a bottom border. |\n| AppBar | Height | `string` | `\"h-14\"` | Tailwind height class for the bar. Default is \"h-14\". |\n| AppBar | Class | `string?` | `` |  |\n| AppBar | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `StartContent` (AppBar) — RenderFragment slot\n- `ChildContent` (AppBar) — RenderFragment slot\n- `EndContent` (AppBar) — 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<AppBar />\n```\n\n## CSS variables\n`--color-border`, `--color-card`, `--color-foreground`\n\n## Files\n- `UI/AppBar/AppBar.razor`\n"
}