{
  "name": "Toggle",
  "category": "Forms",
  "subcategory": "Buttons & Actions",
  "description": "Two-state button with pressed/unpressed styling.",
  "thumbnail": "/preview-cards/toggle.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Toggle/Toggle.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-accent",
    "--color-accent-foreground",
    "--color-input",
    "--color-muted",
    "--color-muted-foreground",
    "--color-ring",
    "--radius"
  ],
  "api": {
    "name": "Toggle",
    "category": "Forms",
    "subcategory": "Buttons & Actions",
    "description": "Two-state button with pressed/unpressed styling.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Toggle/Toggle.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Pressed",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "PressedChanged",
        "type": "EventCallback<bool>",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "ToggleVariant",
        "default": "ToggleVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "ToggleSize",
        "default": "ToggleSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "AriaLabel",
        "type": "string?",
        "default": null,
        "description": "Accessible name exposed via aria-label. Required when ChildContent is an icon only (no visible text) — otherwise screen readers announce the toggle as an unnamed button.",
        "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": "PressedChanged",
        "type": "EventCallback<bool>",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "ToggleVariant",
        "values": [
          "Default",
          "Outline"
        ],
        "description": null
      },
      {
        "name": "ToggleSize",
        "values": [
          "Default",
          "Sm",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-accent",
      "--color-accent-foreground",
      "--color-input",
      "--color-muted",
      "--color-muted-foreground",
      "--color-ring",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Toggle @bind-Pressed=\"_bold\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n\n@code {\n    private bool _bold;\n}"
      },
      {
        "title": "Variants",
        "code": "<Toggle @bind-Pressed=\"_pressed1\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Variant=\"Toggle.ToggleVariant.Outline\" @bind-Pressed=\"_pressed2\">\n    <Blazicon Svg=\"Lucide.Italic\" class=\"h-4 w-4\" />\n</Toggle>"
      },
      {
        "title": "Sizes",
        "code": "<Toggle Size=\"Toggle.ToggleSize.Sm\" @bind-Pressed=\"_sm\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-3 w-3\" />\n</Toggle>\n<Toggle @bind-Pressed=\"_md\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n</Toggle>\n<Toggle Size=\"Toggle.ToggleSize.Lg\" @bind-Pressed=\"_lg\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-5 w-5\" />\n</Toggle>"
      },
      {
        "title": "With Text",
        "code": "<Toggle @bind-Pressed=\"_pressed\">\n    <Blazicon Svg=\"Lucide.Bold\" class=\"h-4 w-4\" />\n    Bold\n</Toggle>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "toggle",
  "docsUrl": "https://lumeo.nativ.sh/components/toggle",
  "sourceUrl": [
    {
      "file": "UI/Toggle/Toggle.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Toggle/Toggle.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Toggle/Toggle.razor",
      "content": "@namespace Lumeo\n\n<button type=\"button\" aria-pressed=\"@Pressed.ToString().ToLower()\" aria-label=\"@AriaLabel\" class=\"@CssClass\" @onclick=\"HandleToggle\" disabled=\"@Disabled\" @attributes=\"AdditionalAttributes\">\n    @ChildContent\n</button>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Pressed { get; set; }\n    [Parameter] public EventCallback<bool> PressedChanged { get; set; }\n    [Parameter] public ToggleVariant Variant { get; set; } = ToggleVariant.Default;\n    [Parameter] public ToggleSize Size { get; set; } = ToggleSize.Default;\n    [Parameter] public bool Disabled { get; set; }\n    /// <summary>\n    /// Accessible name exposed via <c>aria-label</c>. Required when\n    /// <see cref=\"ChildContent\"/> is an icon only (no visible text) — otherwise\n    /// screen readers announce the toggle as an unnamed button.\n    /// </summary>\n    [Parameter] public string? AriaLabel { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"{VariantClasses} {SizeClasses} {BaseClasses} {Class}\".Trim();\n\n    private const string BaseClasses = \"inline-flex items-center justify-center rounded-md text-sm font-medium cursor-pointer 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 disabled:cursor-not-allowed\";\n\n    private string VariantClasses => (Variant, Pressed) switch\n    {\n        (ToggleVariant.Default, true) => \"bg-accent text-accent-foreground\",\n        (ToggleVariant.Default, false) => \"bg-transparent hover:bg-muted hover:text-muted-foreground\",\n        (ToggleVariant.Outline, true) => \"bg-accent text-accent-foreground border border-input\",\n        (ToggleVariant.Outline, false) => \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n        _ => \"\"\n    };\n\n    private string SizeClasses => Size switch\n    {\n        ToggleSize.Default => \"h-9 px-3\",\n        ToggleSize.Sm => \"h-8 px-2\",\n        ToggleSize.Lg => \"h-10 px-4\",\n        _ => \"\"\n    };\n\n    private async Task HandleToggle()\n    {\n        if (!Disabled)\n        {\n            Pressed = !Pressed;\n            await PressedChanged.InvokeAsync(Pressed);\n        }\n    }\n\n    public enum ToggleVariant { Default, Outline }\n    public enum ToggleSize { Default, Sm, Lg }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Toggle",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/DataGrid/DataGridColumnRegistrationTests.cs",
    "tests/Lumeo.Tests/Components/Popover/PopoverTests.cs",
    "tests/Lumeo.Tests/Components/Sidebar/SidebarTests.cs",
    "tests/Lumeo.Tests/Components/Switch/SwitchCursorTests.cs",
    "tests/Lumeo.Tests/Components/ThemeToggle/ThemeToggleTests.cs",
    "tests/Lumeo.Tests/Components/Toggle/ToggleTests.cs"
  ],
  "mdSummary": "# Toggle\n\nTwo-state button with pressed/unpressed styling.\n\n**Package:** `Lumeo` · **Category:** Forms/Buttons & Actions\n**Docs:** https://lumeo.nativ.sh/components/toggle\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Toggle | ChildContent | `RenderFragment?` | `` |  |\n| Toggle | Pressed | `bool` | `` |  |\n| Toggle | PressedChanged | `EventCallback<bool>` | `` |  |\n| Toggle | Variant | `ToggleVariant` | `ToggleVariant.Default` |  |\n| Toggle | Size | `ToggleSize` | `ToggleSize.Default` |  |\n| Toggle | Disabled | `bool` | `` |  |\n| Toggle | AriaLabel | `string?` | `` | Accessible name exposed via aria-label. Required when ChildContent is an icon only (no visible text) — otherwise screen readers announce the toggle as an unnamed button. |\n| Toggle | Class | `string?` | `` |  |\n| Toggle | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Toggle) — RenderFragment slot\n\n## Events\n- `PressedChanged` (`EventCallback<bool>`)\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<Toggle />\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/Toggle/Toggle.razor`\n"
}