{
  "name": "Chip",
  "category": "Data Display",
  "subcategory": "Status & Indicators",
  "description": "Compact removable tag, optionally toggleable.",
  "thumbnail": "/preview-cards/chip.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Chip/Chip.razor",
    "UI/Chip/ChipGroup.razor"
  ],
  "dependencies": [],
  "packageDependencies": [
    "Blazicons.Lucide"
  ],
  "cssVars": [
    "--color-border",
    "--color-destructive",
    "--color-destructive-foreground",
    "--color-foreground",
    "--color-primary",
    "--color-primary-foreground",
    "--color-ring",
    "--color-secondary",
    "--color-secondary-foreground",
    "--radius"
  ],
  "api": {
    "name": "Chip",
    "category": "Data Display",
    "subcategory": "Status & Indicators",
    "description": "Compact removable tag, optionally toggleable.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Chip/Chip.razor",
      "UI/Chip/ChipGroup.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Variant",
        "type": "ChipVariant",
        "default": "ChipVariant.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Color",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "ChipSize",
        "default": "ChipSize.Default",
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Closable",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnClose",
        "type": "EventCallback",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Clickable",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "OnClick",
        "type": "EventCallback",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Disabled",
        "type": "bool",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Icon",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Avatar",
        "type": "string?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "PressEffect",
        "type": "Button.ButtonPressEffect",
        "default": "Button.ButtonPressEffect.None",
        "description": "Visual feedback when the chip is pressed (only applies when Clickable is true). 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
      }
    ],
    "events": [
      {
        "name": "OnClose",
        "type": "EventCallback",
        "description": null
      },
      {
        "name": "OnClick",
        "type": "EventCallback",
        "description": null
      }
    ],
    "enums": [
      {
        "name": "ChipVariant",
        "values": [
          "Default",
          "Outline",
          "Solid"
        ],
        "description": null
      },
      {
        "name": "ChipSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-destructive",
      "--color-destructive-foreground",
      "--color-foreground",
      "--color-primary",
      "--color-primary-foreground",
      "--color-ring",
      "--color-secondary",
      "--color-secondary-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Variants",
        "code": "<ChipGroup>\n    <Chip>Default</Chip>\n    <Chip Variant=\"Chip.ChipVariant.Outline\">Outline</Chip>\n    <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"primary\">Primary</Chip>\n    <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"destructive\">Destructive</Chip>\n    <Chip Variant=\"Chip.ChipVariant.Solid\" Color=\"success\">Success</Chip>\n</ChipGroup>"
      },
      {
        "title": "Sizes",
        "code": "<Flex Class=\"items-center gap-2\">\n    <Chip Size=\"Chip.ChipSize.Sm\">Small</Chip>\n    <Chip>Default</Chip>\n    <Chip Size=\"Chip.ChipSize.Lg\">Large</Chip>\n</Flex>"
      },
      {
        "title": "Closable",
        "code": "<ChipGroup>\n    @foreach (var tag in _tags)\n    {\n        var t = tag;\n        <Chip Closable=\"true\" OnClose=\"@(() => _tags.Remove(t))\">@t</Chip>\n    }\n</ChipGroup>"
      },
      {
        "title": "Clickable",
        "code": "<ChipGroup>\n    @foreach (var filter in _filters)\n    {\n        var f = filter;\n        <Chip Clickable=\"true\"\n              Variant=\"@(_active == f ? Chip.ChipVariant.Solid : Chip.ChipVariant.Outline)\"\n              Color=\"@(_active == f ? \"primary\" : null)\"\n              OnClick=\"@(() => _active = f)\">\n            @f\n        </Chip>\n    }\n</ChipGroup>"
      }
    ],
    "subComponents": {
      "ChipGroup": {
        "componentName": "ChipGroup",
        "fileName": "ChipGroup.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": "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": "chip",
  "docsUrl": "https://lumeo.nativ.sh/components/chip",
  "sourceUrl": [
    {
      "file": "UI/Chip/Chip.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Chip/Chip.razor"
    },
    {
      "file": "UI/Chip/ChipGroup.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Chip/ChipGroup.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Chip/Chip.razor",
      "content": "@namespace Lumeo\n@inject Lumeo.Services.IComponentInteropService Interop\n\n<div @ref=\"_el\" class=\"@CssClass\" @onclick=\"HandleClick\" @attributes=\"AdditionalAttributes\" role=\"@(Clickable ? \"button\" : null)\" tabindex=\"@(Clickable ? \"0\" : null)\">\n    @if (!string.IsNullOrEmpty(Avatar))\n    {\n        <img src=\"@Avatar\" alt=\"\" class=\"@AvatarSizeClass rounded-full object-cover shrink-0\" />\n    }\n    else if (!string.IsNullOrEmpty(Icon))\n    {\n        <span class=\"shrink-0 text-current opacity-70\">@Icon</span>\n    }\n\n    <span>@ChildContent</span>\n\n    @if (Closable)\n    {\n        <button type=\"button\"\n                class=\"relative shrink-0 inline-flex items-center justify-center cursor-pointer rounded-full hover:bg-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ml-0.5 h-5 w-5 before:absolute before:content-[''] before:-inset-2 before:rounded-full\"\n                @onclick=\"HandleClose\"\n                @onclick:stopPropagation=\"true\"\n                aria-label=\"Remove\">\n            <Blazicon Svg=\"Lucide.X\" class=\"@CloseIconSize\" />\n        </button>\n    }\n</div>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public ChipVariant Variant { get; set; } = ChipVariant.Default;\n    [Parameter] public string? Color { get; set; }\n    [Parameter] public ChipSize Size { get; set; } = ChipSize.Default;\n    [Parameter] public bool Closable { get; set; }\n    [Parameter] public EventCallback OnClose { get; set; }\n    [Parameter] public bool Clickable { get; set; }\n    [Parameter] public EventCallback OnClick { get; set; }\n    [Parameter] public bool Disabled { get; set; }\n    [Parameter] public string? Icon { get; set; }\n    [Parameter] public string? Avatar { get; set; }\n\n    /// <summary>\n    /// Visual feedback when the chip is pressed (only applies when\n    /// <see cref=\"Clickable\"/> is <c>true</c>). 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    private Microsoft.AspNetCore.Components.ElementReference _el;\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 CssClass => string.Join(\" \", new[] { \"inline-flex items-center gap-1 font-medium transition-colors\", SizeClass, VariantClass, Clickable && !Disabled ? \"cursor-pointer hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\" : null, Clickable && !Disabled ? PressEffectClass : null, Disabled ? \"opacity-50 pointer-events-none cursor-not-allowed\" : null, Class }.Where(s => !string.IsNullOrWhiteSpace(s)));\n\n    private string SizeClass => Size switch\n    {\n        ChipSize.Sm => \"text-xs px-2 py-0.5 rounded-md\",\n        ChipSize.Lg => \"text-sm px-3 py-1 rounded-lg\",\n        _ => \"text-sm px-2.5 py-0.5 rounded-md\"\n    };\n\n    private string VariantClass => Variant switch\n    {\n        ChipVariant.Outline => \"border border-border bg-transparent text-foreground\",\n        ChipVariant.Solid => GetSolidClass(),\n        _ => \"bg-secondary text-secondary-foreground\"\n    };\n\n    private string GetSolidClass() => Color switch\n    {\n        \"primary\" => \"bg-primary text-primary-foreground\",\n        \"destructive\" => \"bg-destructive text-destructive-foreground\",\n        \"success\" => \"bg-success-light text-success-text\",\n        \"warning\" => \"bg-warning-light text-warning-text\",\n        _ => \"bg-secondary text-secondary-foreground\"\n    };\n\n    private string AvatarSizeClass => Size switch\n    {\n        ChipSize.Sm => \"h-4 w-4\",\n        ChipSize.Lg => \"h-6 w-6\",\n        _ => \"h-5 w-5\"\n    };\n\n    private string CloseIconSize => Size switch\n    {\n        ChipSize.Sm => \"h-3 w-3\",\n        _ => \"h-3.5 w-3.5\"\n    };\n\n    private async Task HandleClick()\n    {\n        if (Disabled) return;\n        if (Clickable) await OnClick.InvokeAsync();\n    }\n\n    private async Task HandleClose()\n    {\n        if (Disabled) return;\n        await OnClose.InvokeAsync();\n    }\n\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender && Clickable && PressEffect == Button.ButtonPressEffect.Ripple)\n        {\n            try\n            {\n                await Interop.RippleAttachAsync(_el);\n            }\n            catch (Microsoft.JSInterop.JSDisconnectedException) { }\n        }\n    }\n\n    public enum ChipVariant { Default, Outline, Solid }\n    public enum ChipSize { Sm, Default, Lg }\n}\n"
    },
    {
      "path": "UI/Chip/ChipGroup.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(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"flex flex-wrap gap-1.5 {Class}\".Trim();\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Chip",
      "type": "RenderFragment?",
      "description": null
    },
    {
      "name": "ChildContent",
      "owner": "ChipGroup",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [
    {
      "service": "IComponentInteropService",
      "namespace": "Lumeo.Services"
    }
  ],
  "cascadingDependencies": [],
  "relatedComponents": [
    {
      "name": "ChipGroup",
      "reason": "sub-component"
    }
  ],
  "keyboardInteractions": [],
  "tests": [],
  "mdSummary": "# Chip\n\nCompact removable tag, optionally toggleable.\n\n**Package:** `Lumeo` · **Category:** Data Display/Status & Indicators\n**Docs:** https://lumeo.nativ.sh/components/chip\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Chip | ChildContent | `RenderFragment?` | `` |  |\n| Chip | Variant | `ChipVariant` | `ChipVariant.Default` |  |\n| Chip | Color | `string?` | `` |  |\n| Chip | Size | `ChipSize` | `ChipSize.Default` |  |\n| Chip | Closable | `bool` | `` |  |\n| Chip | OnClose | `EventCallback` | `` |  |\n| Chip | Clickable | `bool` | `` |  |\n| Chip | OnClick | `EventCallback` | `` |  |\n| Chip | Disabled | `bool` | `` |  |\n| Chip | Icon | `string?` | `` |  |\n| Chip | Avatar | `string?` | `` |  |\n| Chip | PressEffect | `Button.ButtonPressEffect` | `Button.ButtonPressEffect.None` | Visual feedback when the chip is pressed (only applies when Clickable is true). Default is None. |\n| Chip | Class | `string?` | `` |  |\n| Chip | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n| ChipGroup | ChildContent | `RenderFragment?` | `` |  |\n| ChipGroup | Class | `string?` | `` |  |\n| ChipGroup | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Chip) — RenderFragment slot\n- `ChildContent` (ChipGroup) — RenderFragment slot\n\n## Events\n- `OnClose` (`EventCallback`)\n- `OnClick` (`EventCallback`)\n\n## Sub-components\n- `ChipGroup`\n\n## Cascading values it expects\n- (none)\n\n## Services it injects\n- `IComponentInteropService` (Lumeo.Services)\n\n## Keyboard\n—\n\n## Example\n```razor\n<Chip />\n```\n\n## CSS variables\n`--color-border`, `--color-destructive`, `--color-destructive-foreground`, `--color-foreground`, `--color-primary`, `--color-primary-foreground`, `--color-ring`, `--color-secondary`, `--color-secondary-foreground`, `--radius`\n\n## Files\n- `UI/Chip/Chip.razor`\n- `UI/Chip/ChipGroup.razor`\n"
}