{
  "name": "Segmented",
  "category": "Forms",
  "subcategory": "Selection",
  "description": "Pill-shaped tab-like single-select control.",
  "thumbnail": "/preview-cards/segmented.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Segmented/Segmented.razor",
    "UI/Segmented/SegmentedItem.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-background",
    "--color-foreground",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Segmented",
    "category": "Forms",
    "subcategory": "Selection",
    "description": "Pill-shaped tab-like single-select control.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Segmented/Segmented.razor",
      "UI/Segmented/SegmentedItem.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "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": "Options",
        "type": "List<SegmentedOption>?",
        "default": null,
        "description": "Data-driven options. When set, takes precedence over ChildContent. Leave null and pass SegmentedItem children for the compound-component flavour.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": "Compound-mode content — one or more SegmentedItem. Ignored when Options is set.",
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Block",
        "type": "bool",
        "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
      }
    ],
    "enums": [],
    "records": [
      {
        "name": "SegmentedContext",
        "signature": "SegmentedContext(\n        string? Value,\n        EventCallback<string> Select,\n        Func<bool, string> GetItemClasses)",
        "description": "Cascading context for compound-mode SegmentedItem children — they read the active value + the parent's item-class function (so style stays consistent with Options-mode) and invoke Select on click."
      }
    ],
    "cssVars": [
      "--color-background",
      "--color-foreground",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Basic",
        "code": "<Segmented @bind-Value=\"_value\" Options=\"_options\" />"
      },
      {
        "title": "Block (Full Width)",
        "code": "<Segmented @bind-Value=\"_value\" Options=\"_options\" Block=\"true\" />"
      },
      {
        "title": "With Disabled Option",
        "code": "new SegmentedOption { Label = \"Weekly\", Value = \"weekly\", Disabled = true }"
      }
    ],
    "subComponents": {
      "SegmentedItem": {
        "componentName": "SegmentedItem",
        "fileName": "SegmentedItem.razor",
        "namespace": "Lumeo",
        "inheritsFrom": null,
        "implements": [],
        "parameters": [
          {
            "name": "Context",
            "type": "Segmented.SegmentedContext?",
            "default": null,
            "description": null,
            "isCascading": true,
            "captureUnmatched": false
          },
          {
            "name": "Value",
            "type": "string",
            "default": "\"\"",
            "description": "The value selected when this item is clicked. Must match one of the parent Segmented's expected values.",
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "ChildContent",
            "type": "RenderFragment?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "IconContent",
            "type": "RenderFragment?",
            "default": null,
            "description": "Optional leading icon slot.",
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "Disabled",
            "type": "bool",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": false
          },
          {
            "name": "AdditionalAttributes",
            "type": "Dictionary<string, object>?",
            "default": null,
            "description": null,
            "isCascading": false,
            "captureUnmatched": true
          }
        ],
        "events": [],
        "enums": [],
        "records": [],
        "parseFailed": false,
        "parseError": null
      }
    },
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "segmented",
  "docsUrl": "https://lumeo.nativ.sh/components/segmented",
  "sourceUrl": [
    {
      "file": "UI/Segmented/Segmented.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Segmented/Segmented.razor"
    },
    {
      "file": "UI/Segmented/SegmentedItem.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Segmented/SegmentedItem.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Segmented/Segmented.razor",
      "content": "@namespace Lumeo\n\n<div class=\"@CssClass\" role=\"radiogroup\" @attributes=\"AdditionalAttributes\">\n    @if (Options is not null)\n    {\n        @* Data-driven mode: a flat List<SegmentedOption> handed in via the\n           Options parameter. Original API; kept verbatim. *@\n        @foreach (var option in Options)\n        {\n            var isActive = option.Value == Value;\n            <button type=\"button\"\n                    role=\"radio\"\n                    aria-checked=\"@isActive.ToString().ToLower()\"\n                    class=\"@GetItemClasses(isActive)\"\n                    disabled=\"@option.Disabled\"\n                    @onclick=\"() => SelectOption(option.Value)\">\n                @if (option.IconContent is not null)\n                {\n                    <span class=\"mr-1.5\">@option.IconContent</span>\n                }\n                @option.Label\n            </button>\n        }\n    }\n    else if (ChildContent is not null)\n    {\n        @* Compound mode: <SegmentedItem Value=\"...\"> children register\n           themselves via the cascading context. Matches the shadcn-style\n           composition the rest of the library uses (TabsTrigger, SelectItem,\n           …) and is what the docs reach for. *@\n        <CascadingValue Value=\"@_context\" IsFixed=\"false\">\n            @ChildContent\n        </CascadingValue>\n    }\n</div>\n\n@code {\n    [Parameter] public string? Value { get; set; }\n    [Parameter] public EventCallback<string> ValueChanged { get; set; }\n    /// <summary>Data-driven options. When set, takes precedence over\n    /// <see cref=\"ChildContent\"/>. Leave null and pass <see cref=\"SegmentedItem\"/>\n    /// children for the compound-component flavour.</summary>\n    [Parameter] public List<SegmentedOption>? Options { get; set; }\n    /// <summary>Compound-mode content — one or more <see cref=\"SegmentedItem\"/>.\n    /// Ignored when <see cref=\"Options\"/> is set.</summary>\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public bool Block { get; set; }\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private SegmentedContext _context = default!;\n\n    protected override void OnParametersSet()\n    {\n        _context = new SegmentedContext(\n            Value,\n            EventCallback.Factory.Create<string>(this, SelectOption),\n            GetItemClasses);\n    }\n\n    private string CssClass => string.Join(\" \", new[] { \"inline-flex items-center rounded-lg bg-muted p-1\", Block ? \"w-full\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string GetItemClasses(bool isActive) => isActive\n        ? string.Join(\" \", new[] { \"inline-flex items-center justify-center rounded-md bg-background px-3 py-1.5 text-sm font-medium text-foreground shadow-sm transition-all\", Block ? \"flex-1\" : null }.Where(s => !string.IsNullOrWhiteSpace(s)))\n        : string.Join(\" \", new[] { \"inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-all hover:text-foreground disabled:pointer-events-none disabled:opacity-50\", Block ? \"flex-1\" : null }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private async Task SelectOption(string value)\n    {\n        Value = value;\n        await ValueChanged.InvokeAsync(value);\n    }\n\n    public class SegmentedOption\n    {\n        public string Label { get; set; } = \"\";\n        public string Value { get; set; } = \"\";\n\n        /// <summary>Icon slot. Named <c>IconContent</c> to avoid shadowing the <c>&lt;Icon&gt;</c> component.</summary>\n        public RenderFragment? IconContent { get; set; }\n\n        public bool Disabled { get; set; }\n    }\n\n    /// <summary>Cascading context for compound-mode <see cref=\"SegmentedItem\"/>\n    /// children — they read the active value + the parent's item-class function\n    /// (so style stays consistent with Options-mode) and invoke\n    /// <see cref=\"Select\"/> on click.</summary>\n    public sealed record SegmentedContext(\n        string? Value,\n        EventCallback<string> Select,\n        Func<bool, string> GetItemClasses);\n}\n"
    },
    {
      "path": "UI/Segmented/SegmentedItem.razor",
      "content": "@namespace Lumeo\n\n@if (Context is not null)\n{\n    var isActive = Value == Context.Value;\n    <button type=\"button\"\n            role=\"radio\"\n            aria-checked=\"@isActive.ToString().ToLower()\"\n            class=\"@Context.GetItemClasses(isActive)\"\n            disabled=\"@Disabled\"\n            @onclick=\"HandleClick\"\n            @attributes=\"AdditionalAttributes\">\n        @if (IconContent is not null)\n        {\n            <span class=\"mr-1.5\">@IconContent</span>\n        }\n        @ChildContent\n    </button>\n}\n\n@code {\n    [CascadingParameter] public Segmented.SegmentedContext? Context { get; set; }\n\n    /// <summary>The value selected when this item is clicked. Must match one of\n    /// the parent <see cref=\"Segmented\"/>'s expected values.</summary>\n    [Parameter, EditorRequired] public string Value { get; set; } = \"\";\n\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n\n    /// <summary>Optional leading icon slot.</summary>\n    [Parameter] public RenderFragment? IconContent { get; set; }\n\n    [Parameter] public bool Disabled { get; set; }\n\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private async Task HandleClick()\n    {\n        if (Context is null || Disabled) return;\n        await Context.Select.InvokeAsync(Value);\n    }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Segmented",
      "type": "RenderFragment?",
      "description": "Compound-mode content — one or more SegmentedItem. Ignored when Options is set."
    },
    {
      "name": "ChildContent",
      "owner": "SegmentedItem",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "IconContent",
      "owner": "SegmentedItem",
      "type": "RenderFragment?",
      "description": "Optional leading icon slot."
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [
    {
      "name": "Context",
      "type": "Segmented.SegmentedContext?",
      "required": false
    }
  ],
  "relatedComponents": [
    {
      "name": "SegmentedItem",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Segmented/SegmentedTests.cs"
  ],
  "mdSummary": "# Segmented\n\nPill-shaped tab-like single-select control.\n\n**Package:** `Lumeo` · **Category:** Forms/Selection\n**Docs:** https://lumeo.nativ.sh/components/segmented\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Segmented | Value | `string?` | `` |  |\n| Segmented | ValueChanged | `EventCallback<string>` | `` |  |\n| Segmented | Options | `List<SegmentedOption>?` | `` | Data-driven options. When set, takes precedence over ChildContent. Leave null and pass SegmentedItem children for the compound-component flavour. |\n| Segmented | ChildContent | `RenderFragment?` | `` | Compound-mode content — one or more SegmentedItem. Ignored when Options is set. |\n| Segmented | Block | `bool` | `` |  |\n| Segmented | Class | `string?` | `` |  |\n| Segmented | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| SegmentedItem | Context | `Segmented.SegmentedContext?` | `` |  |\n| SegmentedItem | Value | `string` | `\"\"` | The value selected when this item is clicked. Must match one of the parent Segmented's expected values. |\n| SegmentedItem | ChildContent | `RenderFragment?` | `` |  |\n| SegmentedItem | IconContent | `RenderFragment?` | `` | Optional leading icon slot. |\n| SegmentedItem | Disabled | `bool` | `` |  |\n| SegmentedItem | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Segmented) — Compound-mode content — one or more SegmentedItem. Ignored when Options is set.\n- `ChildContent` (SegmentedItem) — RenderFragment slot\n- `IconContent` (SegmentedItem) — Optional leading icon slot.\n\n## Events\n- `ValueChanged` (`EventCallback<string>`)\n\n## Sub-components\n- `SegmentedItem`\n\n## Cascading values it expects\n- `Context` (`Segmented.SegmentedContext?`)\n\n## Services it injects\n- (none)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Segmented />\n```\n\n## CSS variables\n`--color-background`, `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Segmented/Segmented.razor`\n- `UI/Segmented/SegmentedItem.razor`\n"
}