{
  "name": "ButtonGroup",
  "category": "Utility",
  "subcategory": null,
  "description": "Button Group component.",
  "thumbnail": "/preview-cards/button-group.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/ButtonGroup/ButtonGroup.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--radius"
  ],
  "api": {
    "name": "ButtonGroup",
    "category": "Utility",
    "subcategory": null,
    "description": "Button Group component.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/ButtonGroup/ButtonGroup.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "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": "Orientation",
        "type": "ButtonGroupOrientation",
        "default": "ButtonGroupOrientation.Horizontal",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AdditionalAttributes",
        "type": "Dictionary<string, object>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": true
      }
    ],
    "events": [],
    "enums": [
      {
        "name": "ButtonGroupOrientation",
        "values": [
          "Horizontal",
          "Vertical"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--radius"
    ],
    "examples": [
      {
        "title": "Horizontal (default)",
        "code": "<ButtonGroup>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </Button>\n</ButtonGroup>"
      },
      {
        "title": "Vertical",
        "code": "<ButtonGroup Orientation=\"ButtonGroup.ButtonGroupOrientation.Vertical\">\n    <Button Variant=\"Button.ButtonVariant.Outline\">Top</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Middle</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Bottom</Button>\n</ButtonGroup>"
      },
      {
        "title": "Mixed Variants",
        "code": "<ButtonGroup>\n    <Button>Save</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Preview</Button>\n    <Button Variant=\"Button.ButtonVariant.Ghost\">Discard</Button>\n</ButtonGroup>"
      },
      {
        "title": "With Labels",
        "code": "<ButtonGroup>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Previous</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">1</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">2</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">3</Button>\n    <Button Variant=\"Button.ButtonVariant.Outline\">Next</Button>\n</ButtonGroup>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "button-group",
  "docsUrl": "https://lumeo.nativ.sh/components/button-group",
  "sourceUrl": [
    {
      "file": "UI/ButtonGroup/ButtonGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ButtonGroup/ButtonGroup.razor"
    }
  ],
  "source": [
    {
      "path": "UI/ButtonGroup/ButtonGroup.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter] public ButtonGroupOrientation Orientation { get; set; } = ButtonGroupOrientation.Horizontal;\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => string.Join(\" \", new[]\n    {\n        Orientation == ButtonGroupOrientation.Horizontal ? HorizontalClasses : VerticalClasses,\n        Class\n    }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    // Horizontal: first button gets left-rounded, last gets right-rounded, middle ones square.\n    // -ml-px collapses the shared border between adjacent buttons.\n    private const string HorizontalClasses =\n        \"inline-flex flex-row \" +\n        \"[&>button:not(:first-child)]:rounded-l-none \" +\n        \"[&>button:not(:last-child)]:rounded-r-none \" +\n        \"[&>button:not(:first-child)]:-ml-px \" +\n        \"[&>button:not(:first-child)]:border-l-border/40\";\n\n    // Vertical: first button gets top-rounded, last gets bottom-rounded, middle ones square.\n    // -mt-px collapses the shared border between adjacent buttons.\n    private const string VerticalClasses =\n        \"inline-flex flex-col \" +\n        \"[&>button:not(:first-child)]:rounded-t-none \" +\n        \"[&>button:not(:last-child)]:rounded-b-none \" +\n        \"[&>button:not(:first-child)]:-mt-px \" +\n        \"[&>button:not(:first-child)]:border-t-border/40\";\n\n    public enum ButtonGroupOrientation { Horizontal, Vertical }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "ButtonGroup",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ButtonGroup/ButtonGroupTests.cs"
  ],
  "mdSummary": "# ButtonGroup\n\nButton Group component.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/button-group\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| ButtonGroup | ChildContent | `RenderFragment?` | `` |  |\n| ButtonGroup | Class | `string?` | `` |  |\n| ButtonGroup | Orientation | `ButtonGroupOrientation` | `ButtonGroupOrientation.Horizontal` |  |\n| ButtonGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (ButtonGroup) — 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<ButtonGroup />\n```\n\n## CSS variables\n`--radius`\n\n## Files\n- `UI/ButtonGroup/ButtonGroup.razor`\n"
}