{
  "name": "SafeArea",
  "category": "Utility",
  "subcategory": null,
  "description": "Safe Area component.",
  "thumbnail": "/preview-cards/safe-area.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/SafeArea/SafeArea.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-foreground"
  ],
  "api": {
    "name": "SafeArea",
    "category": "Utility",
    "subcategory": null,
    "description": "Safe Area component.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/SafeArea/SafeArea.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Top",
        "type": "bool",
        "default": "true",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Bottom",
        "type": "bool",
        "default": "true",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Left",
        "type": "bool",
        "default": "false",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Right",
        "type": "bool",
        "default": "false",
        "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-foreground"
    ],
    "examples": [
      {
        "title": "Top and Bottom Safe Area",
        "code": "<SafeArea Top=\"true\" Bottom=\"true\">\n    <div class=\"p-4\">\n        <p>Content padded away from notch and home indicator.</p>\n    </div>\n</SafeArea>"
      },
      {
        "title": "All Edges",
        "code": "<SafeArea Top=\"true\" Bottom=\"true\" Left=\"true\" Right=\"true\">\n    <div class=\"p-4\">\n        <p>Full safe-area padding on all four edges.</p>\n    </div>\n</SafeArea>"
      },
      {
        "title": "Bottom Only (navigation bar pattern)",
        "code": "<!-- Bottom tab bar pattern: only bottom inset needed -->\n<SafeArea Top=\"false\" Bottom=\"true\">\n    <nav class=\"flex items-center justify-around border-t border-border/40 px-4 py-3\">\n        <span>Home</span>\n        <span>Search</span>\n        <span>Profile</span>\n    </nav>\n</SafeArea>"
      },
      {
        "title": "Sticky bottom tab bar (realistic example)",
        "code": "<div class=\"relative h-64 border border-border/40 rounded-md overflow-hidden bg-background\">\n    <div class=\"p-4 space-y-2 overflow-y-auto h-full pb-16\">\n        <!-- scrollable content -->\n    </div>\n    <SafeArea Bottom=\"true\" Top=\"false\"\n              Class=\"absolute bottom-0 left-0 right-0 bg-card border-t border-border/40\">\n        <Flex Justify=\"around\" Class=\"py-3\">\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.Bell\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.Search\" class=\"h-5 w-5\" />\n            </Button>\n            <Button Variant=\"Button.ButtonVariant.Ghost\">\n                <Blazicon Svg=\"Lucide.User\" class=\"h-5 w-5\" />\n            </Button>\n        </Flex>\n    </SafeArea>\n</div>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "safe-area",
  "docsUrl": "https://lumeo.nativ.sh/components/safe-area",
  "sourceUrl": [
    {
      "file": "UI/SafeArea/SafeArea.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/SafeArea/SafeArea.razor"
    }
  ],
  "source": [
    {
      "path": "UI/SafeArea/SafeArea.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" style=\"@StyleValue\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Top { get; set; } = true;\n    [Parameter] public bool Bottom { get; set; } = true;\n    [Parameter] public bool Left { get; set; } = false;\n    [Parameter] public bool Right { get; set; } = false;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"lumeo-safe-area {Class}\".Trim();\n\n    private string StyleValue\n    {\n        get\n        {\n            var parts = new List<string>();\n            if (Top)    parts.Add(\"padding-top: env(safe-area-inset-top, 0)\");\n            if (Bottom) parts.Add(\"padding-bottom: env(safe-area-inset-bottom, 0)\");\n            if (Left)   parts.Add(\"padding-left: env(safe-area-inset-left, 0)\");\n            if (Right)  parts.Add(\"padding-right: env(safe-area-inset-right, 0)\");\n            return string.Join(\"; \", parts);\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "SafeArea",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [],
  "mdSummary": "# SafeArea\n\nSafe Area component.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/safe-area\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| SafeArea | ChildContent | `RenderFragment?` | `` |  |\n| SafeArea | Top | `bool` | `true` |  |\n| SafeArea | Bottom | `bool` | `true` |  |\n| SafeArea | Left | `bool` | `false` |  |\n| SafeArea | Right | `bool` | `false` |  |\n| SafeArea | Class | `string?` | `` |  |\n| SafeArea | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (SafeArea) — 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<SafeArea />\n```\n\n## CSS variables\n`--color-foreground`\n\n## Files\n- `UI/SafeArea/SafeArea.razor`\n"
}