{
  "name": "Separator",
  "category": "Layout",
  "subcategory": null,
  "description": "Horizontal or vertical dividing rule.",
  "thumbnail": "/preview-cards/separator.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Separator/Separator.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-muted",
    "--color-muted-foreground"
  ],
  "api": {
    "name": "Separator",
    "category": "Layout",
    "subcategory": null,
    "description": "Horizontal or vertical dividing rule.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Separator/Separator.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "Orientation",
        "type": "SeparatorOrientation",
        "default": "SeparatorOrientation.Horizontal",
        "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": [
      {
        "name": "SeparatorOrientation",
        "values": [
          "Horizontal",
          "Vertical"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-muted",
      "--color-muted-foreground"
    ],
    "examples": [
      {
        "title": "Horizontal",
        "code": "<Stack Gap=\"1\">\n    <Heading Level=\"4\" Size=\"sm\" Weight=\"medium\" Class=\"leading-none\">Lumeo UI</Heading>\n    <Lumeo.Text Size=\"sm\" Color=\"muted\">An open-source component library for Blazor.</Lumeo.Text>\n</Stack>\n<Separator Class=\"my-4\" />\n<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Docs</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Source</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Blog</Lumeo.Text>\n</Flex>"
      },
      {
        "title": "In a Card",
        "code": "<Card>\n    <CardContent Class=\"pt-4\">\n        <Stack Gap=\"3\">\n            <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\n                <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Subtotal</Lumeo.Text>\n                <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$89.00</Lumeo.Text>\n            </Flex>\n            <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm\">\n                <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Shipping</Lumeo.Text>\n                <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"medium\">$4.99</Lumeo.Text>\n            </Flex>\n            <Separator />\n            <Flex Align=\"center\" Justify=\"between\" Class=\"text-sm font-semibold\">\n                <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">Total</Lumeo.Text>\n                <Lumeo.Text As=\"span\" Size=\"sm\" Weight=\"semibold\">$93.99</Lumeo.Text>\n            </Flex>\n        </Stack>\n    </CardContent>\n</Card>"
      },
      {
        "title": "Vertical",
        "code": "<Flex Gap=\"4\" Align=\"center\" Class=\"h-5 text-sm\">\n    <Lumeo.Text As=\"span\" Size=\"sm\">Home</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Components</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">Themes</Lumeo.Text>\n    <Separator Orientation=\"Separator.SeparatorOrientation.Vertical\" />\n    <Lumeo.Text As=\"span\" Size=\"sm\">GitHub</Lumeo.Text>\n</Flex>"
      },
      {
        "title": "With Label",
        "code": "<Separator>or continue with</Separator>\n<Separator>Section Title</Separator>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "separator",
  "docsUrl": "https://lumeo.nativ.sh/components/separator",
  "sourceUrl": [
    {
      "file": "UI/Separator/Separator.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Separator/Separator.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Separator/Separator.razor",
      "content": "@namespace Lumeo\n\n@if (Orientation == SeparatorOrientation.Horizontal && ChildContent != null)\n{\n    <div class=\"@($\"flex items-center gap-3 {Class}\").Trim()\" @attributes=\"AdditionalAttributes\">\n        <div class=\"h-px flex-1 bg-border\"></div>\n        <span class=\"text-xs text-muted-foreground\">@ChildContent</span>\n        <div class=\"h-px flex-1 bg-border\"></div>\n    </div>\n}\nelse if (Orientation == SeparatorOrientation.Horizontal)\n{\n    <div role=\"none\" class=\"@($\"shrink-0 bg-border h-px w-full {Class}\".Trim())\" @attributes=\"AdditionalAttributes\"></div>\n}\nelse\n{\n    <div role=\"none\" class=\"@($\"shrink-0 bg-border h-full w-px {Class}\".Trim())\" @attributes=\"AdditionalAttributes\"></div>\n}\n\n@code {\n    [Parameter] public SeparatorOrientation Orientation { get; set; } = SeparatorOrientation.Horizontal;\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    public enum SeparatorOrientation { Horizontal, Vertical }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Separator",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ContextMenu/ContextMenuTests.cs",
    "tests/Lumeo.Tests/Components/DropdownMenu/DropdownMenuTests.cs",
    "tests/Lumeo.Tests/Components/Separator/SeparatorTests.cs"
  ],
  "mdSummary": "# Separator\n\nHorizontal or vertical dividing rule.\n\n**Package:** `Lumeo` · **Category:** Layout\n**Docs:** https://lumeo.nativ.sh/components/separator\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Separator | Orientation | `SeparatorOrientation` | `SeparatorOrientation.Horizontal` |  |\n| Separator | ChildContent | `RenderFragment?` | `` |  |\n| Separator | Class | `string?` | `` |  |\n| Separator | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Separator) — 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<Separator />\n```\n\n## CSS variables\n`--color-border`, `--color-muted`, `--color-muted-foreground`\n\n## Files\n- `UI/Separator/Separator.razor`\n"
}