{
  "name": "BorderBeam",
  "category": "Motion",
  "subcategory": null,
  "description": "Animated gradient border beam effect for hero elements.",
  "thumbnail": "/preview-cards/border-beam.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo.Motion",
  "files": [
    "UI/BorderBeam/BorderBeam.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--radius"
  ],
  "api": {
    "name": "BorderBeam",
    "category": "Motion",
    "subcategory": null,
    "description": "Animated gradient border beam effect for hero elements.",
    "nugetPackage": "Lumeo.Motion",
    "files": [
      "UI/BorderBeam/BorderBeam.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "BeamSize",
        "default": "BeamSize.Md",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "DurationMs",
        "type": "int",
        "default": "8000",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ColorFrom",
        "type": "string?",
        "default": null,
        "description": "Starting color of the beam. Accepts any CSS color — defaults to var(--color-primary).",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ColorTo",
        "type": "string?",
        "default": null,
        "description": "Ending color of the beam. Accepts any CSS color — defaults to var(--color-primary).",
        "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": [
      {
        "name": "BeamSize",
        "values": [
          "Sm",
          "Md",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--radius"
    ],
    "examples": [],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "border-beam",
  "docsUrl": "https://lumeo.nativ.sh/components/border-beam",
  "sourceUrl": [
    {
      "file": "UI/BorderBeam/BorderBeam.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo.Motion/UI/BorderBeam/BorderBeam.razor"
    }
  ],
  "source": [
    {
      "path": "UI/BorderBeam/BorderBeam.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" style=\"@StyleString\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public BeamSize Size { get; set; } = BeamSize.Md;\n    [Parameter] public int DurationMs { get; set; } = 8000;\n\n    /// <summary>Starting color of the beam. Accepts any CSS color — defaults to <c>var(--color-primary)</c>.</summary>\n    [Parameter] public string? ColorFrom { get; set; }\n\n    /// <summary>Ending color of the beam. Accepts any CSS color — defaults to <c>var(--color-primary)</c>.</summary>\n    [Parameter] public string? ColorTo { get; set; }\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => string.Join(\" \", new[] { \"lumeo-border-beam rounded-lg\", Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string BeamPx => Size switch\n    {\n        BeamSize.Sm => \"1px\",\n        BeamSize.Lg => \"3px\",\n        _ => \"1.5px\"\n    };\n\n    private string StyleString\n    {\n        get\n        {\n            var parts = new List<string>\n            {\n                $\"--lumeo-beam-size: {BeamPx}\",\n                $\"--lumeo-beam-duration: {DurationMs}ms\"\n            };\n            if (!string.IsNullOrWhiteSpace(ColorFrom)) parts.Add($\"--lumeo-beam-from: {ColorFrom}\");\n            if (!string.IsNullOrWhiteSpace(ColorTo)) parts.Add($\"--lumeo-beam-to: {ColorTo}\");\n            return string.Join(\"; \", parts) + \";\";\n        }\n    }\n\n    public enum BeamSize { Sm, Md, Lg }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "BorderBeam",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Docs.Tests/Catalog/CatalogCardTests.cs",
    "tests/Lumeo.Tests/Components/BorderBeam/BorderBeamTests.cs"
  ],
  "mdSummary": "# BorderBeam\n\nAnimated gradient border beam effect for hero elements.\n\n**Package:** `Lumeo.Motion` · **Category:** Motion\n**Docs:** https://lumeo.nativ.sh/components/border-beam\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| BorderBeam | ChildContent | `RenderFragment?` | `` |  |\n| BorderBeam | Size | `BeamSize` | `BeamSize.Md` |  |\n| BorderBeam | DurationMs | `int` | `8000` |  |\n| BorderBeam | ColorFrom | `string?` | `` | Starting color of the beam. Accepts any CSS color — defaults to var(--color-primary). |\n| BorderBeam | ColorTo | `string?` | `` | Ending color of the beam. Accepts any CSS color — defaults to var(--color-primary). |\n| BorderBeam | Class | `string?` | `` |  |\n| BorderBeam | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (BorderBeam) — 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<BorderBeam />\n```\n\n## CSS variables\n`--radius`\n\n## Files\n- `UI/BorderBeam/BorderBeam.razor`\n"
}