{
  "name": "BackToTop",
  "category": "Navigation",
  "subcategory": null,
  "description": "Floating button that scrolls the page back to the top.",
  "thumbnail": "/preview-cards/back-to-top.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/BackToTop/BackToTop.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-primary",
    "--color-primary-foreground",
    "--radius"
  ],
  "api": {
    "name": "BackToTop",
    "category": "Navigation",
    "subcategory": null,
    "description": "Floating button that scrolls the page back to the top.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/BackToTop/BackToTop.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [
      "IAsyncDisposable"
    ],
    "parameters": [
      {
        "name": "VisibilityThreshold",
        "type": "int",
        "default": "300",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "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-primary",
      "--color-primary-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<BackToTop />"
      },
      {
        "title": "Custom Threshold",
        "code": "<BackToTop VisibilityThreshold=\"500\" />"
      },
      {
        "title": "Interactive: Visibility Threshold",
        "code": "<BackToTop VisibilityThreshold=\"300\" />"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "back-to-top",
  "docsUrl": "https://lumeo.nativ.sh/components/back-to-top",
  "sourceUrl": [
    {
      "file": "UI/BackToTop/BackToTop.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/BackToTop/BackToTop.razor"
    }
  ],
  "source": [
    {
      "path": "UI/BackToTop/BackToTop.razor",
      "content": "@namespace Lumeo\n@implements IAsyncDisposable\n@inject Lumeo.Services.ComponentInteropService Interop\n\n@if (_visible && !Disabled)\n{\n    <button type=\"button\"\n            class=\"@CssClass\"\n            @onclick=\"ScrollToTop\"\n            aria-label=\"Back to top\"\n            @attributes=\"AdditionalAttributes\">\n        @if (ChildContent is not null)\n        {\n            @ChildContent\n        }\n        else\n        {\n            <Blazicon Svg=\"Lucide.ArrowUp\" class=\"h-5 w-5\" />\n        }\n    </button>\n}\n\n@code {\n    [Parameter] public int VisibilityThreshold { get; set; } = 300;\n    [Parameter] public bool Disabled { get; set; }\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 bool _visible;\n    private readonly string _id = $\"backtotop-{Guid.NewGuid():N}\";\n\n    private string CssClass => $\"fixed bottom-6 right-6 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-all hover:bg-primary/90 {Class}\".Trim();\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (!firstRender) return;\n        try\n        {\n            await Interop.RegisterBackToTop(_id, VisibilityThreshold, async (visible) =>\n            {\n                if (_visible != visible)\n                {\n                    _visible = visible;\n                    await InvokeAsync(StateHasChanged);\n                }\n            });\n        }\n        catch (JSDisconnectedException) { }\n        catch (ObjectDisposedException) { }\n    }\n\n    private async Task ScrollToTop()\n    {\n        await Interop.ScrollToTop();\n    }\n\n    public async ValueTask DisposeAsync()\n    {\n        try\n        {\n            await Interop.UnregisterBackToTop(_id);\n        }\n        catch (JSDisconnectedException)\n        {\n            // Circuit disconnected, safe to ignore\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "BackToTop",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "ComponentInteropService",
      "namespace": "Lumeo.Services"
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Helpers/DocsTestContext.cs",
    "tests/Lumeo.Tests/Components/BackToTop/BackToTopTests.cs",
    "tests/Lumeo.Tests/Contract/ComponentContractTests.cs",
    "tests/Lumeo.Tests/Services/ComponentInteropServiceTests.cs",
    "tests/Lumeo.Tests/Services/Interop/InteropAdapterTests.cs",
    "tests/Lumeo.Tests/Services/StrictInteropTests.cs"
  ],
  "mdSummary": "# BackToTop\n\nFloating button that scrolls the page back to the top.\n\n**Package:** `Lumeo` · **Category:** Navigation\n**Docs:** https://lumeo.nativ.sh/components/back-to-top\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| BackToTop | VisibilityThreshold | `int` | `300` |  |\n| BackToTop | Disabled | `bool` | `` |  |\n| BackToTop | ChildContent | `RenderFragment?` | `` |  |\n| BackToTop | Class | `string?` | `` |  |\n| BackToTop | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (BackToTop) — 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- `ComponentInteropService` (Lumeo.Services)\n\n## Keyboard\n—\n\n## Example\n```razor\n<BackToTop />\n```\n\n## CSS variables\n`--color-primary`, `--color-primary-foreground`, `--radius`\n\n## Files\n- `UI/BackToTop/BackToTop.razor`\n"
}