{
  "name": "ToggleGroup",
  "category": "Forms",
  "subcategory": "Selection",
  "description": "Group of toggles with single or multiple selection.",
  "thumbnail": "/preview-cards/toggle-group.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/ToggleGroup/ToggleGroup.razor",
    "UI/ToggleGroup/ToggleGroupItem.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-input",
    "--color-muted",
    "--color-muted-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "ToggleGroup",
    "category": "Forms",
    "subcategory": "Selection",
    "description": "Group of toggles with single or multiple selection.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/ToggleGroup/ToggleGroup.razor",
      "UI/ToggleGroup/ToggleGroupItem.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Type",
        "type": "ToggleGroupType",
        "default": "ToggleGroupType.Single",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "ToggleGroupVariant",
        "default": "ToggleGroupVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "ToggleGroupSize",
        "default": "ToggleGroupSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Value",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ValueChanged",
        "type": "EventCallback<string?>",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "SelectedValues",
        "type": "IEnumerable<string>?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "SelectedValuesChanged",
        "type": "EventCallback<IEnumerable<string>>",
        "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": [
      {
        "name": "ValueChanged",
        "type": "EventCallback<string?>",
        "description": null
      },
      {
        "name": "SelectedValuesChanged",
        "type": "EventCallback<IEnumerable<string>>",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "ToggleGroupType",
        "values": [
          "Single",
          "Multiple"
        ],
        "description": null
      },
      {
        "name": "ToggleGroupVariant",
        "values": [
          "Default",
          "Outline"
        ],
        "description": null
      },
      {
        "name": "ToggleGroupSize",
        "values": [
          "Default",
          "Sm",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [
      {
        "name": "ToggleGroupContext",
        "signature": "ToggleGroupContext(ToggleGroupType Type, HashSet<string> SelectedItems, ToggleGroupVariant Variant, ToggleGroupSize Size, EventCallback<string> Toggle)",
        "description": null
      }
    ],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-input",
      "--color-muted",
      "--color-muted-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Single Selection",
        "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    <ToggleGroupItem Value=\"bold\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
      },
      {
        "title": "Multiple Selection",
        "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Multiple\">\n    <ToggleGroupItem Value=\"bold\">\n        <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"italic\">\n        <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"underline\">\n        <Blazicon Svg=\"Lucide.Underline\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
      },
      {
        "title": "Outline Variant",
        "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Variant=\"ToggleGroup.ToggleGroupVariant.Outline\">\n    <ToggleGroupItem Value=\"left\">\n        <Blazicon Svg=\"Lucide.AlignLeft\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"center\">\n        <Blazicon Svg=\"Lucide.AlignCenter\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem Value=\"right\">\n        <Blazicon Svg=\"Lucide.AlignRight\" class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n</ToggleGroup>"
      },
      {
        "title": "Sizes",
        "code": "<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Sm\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\">\n    ...\n</ToggleGroup>\n\n<ToggleGroup Type=\"ToggleGroup.ToggleGroupType.Single\" Size=\"ToggleGroup.ToggleGroupSize.Lg\">\n    ...\n</ToggleGroup>"
      }
    ],
    "subComponents": {
      "ToggleGroupItem": {
        "componentName": "ToggleGroupItem",
        "fileName": "ToggleGroupItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Value",
            "type": "string",
            "default": "\"\"",
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "PressEffect",
            "type": "Button.ButtonPressEffect",
            "default": "Button.ButtonPressEffect.None",
            "description": "Visual feedback when the item is pressed. Default is None.",
            "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
          },
          {
            "name": "Context",
            "type": "ToggleGroup.ToggleGroupContext",
            "default": "default!",
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "toggle-group",
  "docsUrl": "https://lumeo.nativ.sh/components/toggle-group",
  "sourceUrl": [
    {
      "file": "UI/ToggleGroup/ToggleGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ToggleGroup/ToggleGroup.razor"
    },
    {
      "file": "UI/ToggleGroup/ToggleGroupItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/ToggleGroup/ToggleGroupItem.razor"
    }
  ],
  "source": [
    {
      "path": "UI/ToggleGroup/ToggleGroup.razor",
      "content": "@namespace Lumeo\n\n@{\n    var context = new ToggleGroupContext(Type, _selectedItems, Variant, Size, EventCallback.Factory.Create<string>(this, ToggleItem));\n}\n\n<div role=\"group\" class=\"@CssClass\" @attributes=\"AdditionalAttributes\">\n    <CascadingValue Value=\"context\" IsFixed=\"false\">\n        @ChildContent\n    </CascadingValue>\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public ToggleGroupType Type { get; set; } = ToggleGroupType.Single;\n    [Parameter] public ToggleGroupVariant Variant { get; set; } = ToggleGroupVariant.Default;\n    [Parameter] public ToggleGroupSize Size { get; set; } = ToggleGroupSize.Default;\n    [Parameter] public string? Value { get; set; }\n    [Parameter] public EventCallback<string?> ValueChanged { get; set; }\n    [Parameter] public IEnumerable<string>? SelectedValues { get; set; }\n    [Parameter] public EventCallback<IEnumerable<string>> SelectedValuesChanged { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private readonly HashSet<string> _selectedItems = new();\n\n    private string CssClass => $\"flex items-center gap-1 {Class}\".Trim();\n\n    protected override void OnParametersSet()\n    {\n        if (Type == ToggleGroupType.Single && Value is not null)\n        {\n            _selectedItems.Clear();\n            _selectedItems.Add(Value);\n        }\n        else if (Type == ToggleGroupType.Multiple && SelectedValues is not null)\n        {\n            _selectedItems.Clear();\n            foreach (var v in SelectedValues) _selectedItems.Add(v);\n        }\n    }\n\n    private async Task ToggleItem(string value)\n    {\n        if (_selectedItems.Contains(value))\n        {\n            _selectedItems.Remove(value);\n        }\n        else\n        {\n            if (Type == ToggleGroupType.Single)\n            {\n                _selectedItems.Clear();\n            }\n            _selectedItems.Add(value);\n        }\n        StateHasChanged();\n\n        if (Type == ToggleGroupType.Single)\n            await ValueChanged.InvokeAsync(_selectedItems.FirstOrDefault());\n        else\n            await SelectedValuesChanged.InvokeAsync(_selectedItems.ToList());\n    }\n\n    public enum ToggleGroupType { Single, Multiple }\n    public enum ToggleGroupVariant { Default, Outline }\n    public enum ToggleGroupSize { Default, Sm, Lg }\n\n    public record ToggleGroupContext(ToggleGroupType Type, HashSet<string> SelectedItems, ToggleGroupVariant Variant, ToggleGroupSize Size, EventCallback<string> Toggle)\n    {\n        public bool IsSelected(string value) => SelectedItems.Contains(value);\n    }\n}\n"
    },
    {
      "path": "UI/ToggleGroup/ToggleGroupItem.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.IComponentInteropService Interop\n\n<button @ref=\"_el\" type=\"button\" aria-pressed=\"@IsPressed.ToString().ToLower()\" class=\"@CssClass\" @onclick=\"Toggle\" disabled=\"@Disabled\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</button>\n\n@code {\n    [Parameter, EditorRequired] public string Value { get; set; } = \"\";\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n\n    /// <summary>\n    /// Visual feedback when the item is pressed. Default is\n    /// <see cref=\"Button.ButtonPressEffect.None\"/>.\n    /// </summary>\n    [Parameter] public Button.ButtonPressEffect PressEffect { get; set; } = Button.ButtonPressEffect.None;\n\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    [CascadingParameter] public ToggleGroup.ToggleGroupContext Context { get; set; } = default!;\n\n    private Microsoft.AspNetCore.Components.ElementReference _el;\n\n    private bool IsPressed => Context.SelectedItems.Contains(Value);\n\n    private string CssClass => string.Join(\" \", new[] { VariantClasses, SizeClasses, BaseClasses, \"cursor-pointer disabled:cursor-not-allowed\", PressEffectClass, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    // gap-1.5 mirrors Button's base gap so icon+label children space cleanly without\n    // requiring consumers to add Class=\"gap-1.5\" manually. Single-child renders are\n    // unaffected (gap only matters when there are multiple flex children).\n    private const string BaseClasses = \"inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\";\n\n    private string? PressEffectClass => PressEffect switch\n    {\n        Button.ButtonPressEffect.Scale => \"lumeo-press-scale\",\n        Button.ButtonPressEffect.Brightness => \"lumeo-press-brightness\",\n        Button.ButtonPressEffect.Ripple => \"lumeo-press-ripple\",\n        _ => null\n    };\n\n    private string VariantClasses => (Context.Variant, IsPressed) switch\n    {\n        (ToggleGroup.ToggleGroupVariant.Default, true) => \"bg-accent text-accent-foreground\",\n        (ToggleGroup.ToggleGroupVariant.Default, false) => \"bg-transparent hover:bg-muted hover:text-muted-foreground\",\n        (ToggleGroup.ToggleGroupVariant.Outline, true) => \"bg-accent text-accent-foreground border border-input\",\n        (ToggleGroup.ToggleGroupVariant.Outline, false) => \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n        _ => \"\"\n    };\n\n    private string SizeClasses => Context.Size switch\n    {\n        ToggleGroup.ToggleGroupSize.Default => \"h-9 px-3\",\n        ToggleGroup.ToggleGroupSize.Sm => \"h-8 px-2\",\n        ToggleGroup.ToggleGroupSize.Lg => \"h-10 px-4\",\n        _ => \"\"\n    };\n\n    private async Task Toggle()\n    {\n        if (!Disabled)\n        {\n            await Context.Toggle.InvokeAsync(Value);\n        }\n    }\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender && PressEffect == Button.ButtonPressEffect.Ripple)\n        {\n            try\n            {\n                await Interop.RippleAttachAsync(_el);\n            }\n            catch (Microsoft.JSInterop.JSDisconnectedException) { }\n        }\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "ToggleGroup",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "ToggleGroupItem",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "IComponentInteropService",
      "namespace": "Lumeo.Services"
    }
  ],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "ToggleGroup.ToggleGroupContext",
      "required": true
    }
  ],
  "relatedComponents": [
    {
      "name": "ToggleGroupItem",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/ToggleGroup/ToggleGroupTests.cs"
  ],
  "mdSummary": "# ToggleGroup\n\nGroup of toggles with single or multiple selection.\n\n**Package:** `Lumeo` · **Category:** Forms/Selection\n**Docs:** https://lumeo.nativ.sh/components/toggle-group\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| ToggleGroup | ChildContent | `RenderFragment?` | `` |  |\n| ToggleGroup | Type | `ToggleGroupType` | `ToggleGroupType.Single` |  |\n| ToggleGroup | Variant | `ToggleGroupVariant` | `ToggleGroupVariant.Default` |  |\n| ToggleGroup | Size | `ToggleGroupSize` | `ToggleGroupSize.Default` |  |\n| ToggleGroup | Value | `string?` | `` |  |\n| ToggleGroup | ValueChanged | `EventCallback<string?>` | `` |  |\n| ToggleGroup | SelectedValues | `IEnumerable<string>?` | `` |  |\n| ToggleGroup | SelectedValuesChanged | `EventCallback<IEnumerable<string>>` | `` |  |\n| ToggleGroup | Class | `string?` | `` |  |\n| ToggleGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| ToggleGroupItem | Value | `string` | `\"\"` |  |\n| ToggleGroupItem | ChildContent | `RenderFragment?` | `` |  |\n| ToggleGroupItem | Disabled | `bool` | `` |  |\n| ToggleGroupItem | PressEffect | `Button.ButtonPressEffect` | `Button.ButtonPressEffect.None` | Visual feedback when the item is pressed. Default is None. |\n| ToggleGroupItem | Class | `string?` | `` |  |\n| ToggleGroupItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| ToggleGroupItem | Context | `ToggleGroup.ToggleGroupContext` | `default!` |  |\n\n## Slots\n- `ChildContent` (ToggleGroup) — RenderFragment slot\n- `ChildContent` (ToggleGroupItem) — RenderFragment slot\n\n## Events\n- `ValueChanged` (`EventCallback<string?>`)\n- `SelectedValuesChanged` (`EventCallback<IEnumerable<string>>`)\n\n## Sub-components\n- `ToggleGroupItem`\n\n## Cascading values it expects\n- `Context` (`ToggleGroup.ToggleGroupContext`)\n\n## Services it injects\n- `IComponentInteropService` (Lumeo.Services)\n\n## Keyboard\n—\n\n## Example\n```razor\n<ToggleGroup />\n```\n\n## CSS variables\n`--color-accent`, `--color-accent-foreground`, `--color-input`, `--color-muted`, `--color-muted-foreground`, `--color-ring`, `--radius`\n\n## Files\n- `UI/ToggleGroup/ToggleGroup.razor`\n- `UI/ToggleGroup/ToggleGroupItem.razor`\n"
}