{
  "name": "Kbd",
  "category": "Utility",
  "subcategory": null,
  "description": "Keyboard shortcut glyph — renders <kbd> with styling.",
  "thumbnail": "/preview-cards/kbd.png",
  "hasDocsPage": true,
  "nugetPackage": "Lumeo",
  "files": [
    "UI/Kbd/Kbd.razor"
  ],
  "dependencies": [],
  "packageDependencies": [],
  "cssVars": [
    "--color-border",
    "--color-muted",
    "--color-muted-foreground",
    "--radius"
  ],
  "api": {
    "name": "Kbd",
    "category": "Utility",
    "subcategory": null,
    "description": "Keyboard shortcut glyph — renders <kbd> with styling.",
    "nugetPackage": "Lumeo",
    "files": [
      "UI/Kbd/Kbd.razor"
    ],
    "namespace": "Lumeo",
    "inheritsFrom": null,
    "implements": [],
    "parameters": [
      {
        "name": "ChildContent",
        "type": "RenderFragment?",
        "default": null,
        "description": null,
        "isCascading": false,
        "captureUnmatched": false
      },
      {
        "name": "Size",
        "type": "KbdSize",
        "default": "KbdSize.Default",
        "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": [
      {
        "name": "KbdSize",
        "values": [
          "Sm",
          "Default",
          "Lg"
        ],
        "description": null
      }
    ],
    "records": [],
    "cssVars": [
      "--color-border",
      "--color-muted",
      "--color-muted-foreground",
      "--radius"
    ],
    "examples": [
      {
        "title": "Default",
        "code": "<Flex Align=\"center\" Gap=\"1\">\n    <Kbd>Ctrl</Kbd>\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">+</Lumeo.Text>\n    <Kbd>K</Kbd>\n</Flex>"
      },
      {
        "title": "Sizes",
        "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
      },
      {
        "title": "In Context",
        "code": "<Flex Align=\"center\" Justify=\"between\" Class=\"rounded-md border px-3 py-2\">\n    <Lumeo.Text As=\"span\" Size=\"sm\" Color=\"muted\">Open command palette</Lumeo.Text>\n    <Flex Align=\"center\" Gap=\"1\">\n        <Kbd>Ctrl</Kbd>\n        <Lumeo.Text As=\"span\" Size=\"xs\" Color=\"muted\">+</Lumeo.Text>\n        <Kbd>K</Kbd>\n    </Flex>\n</Flex>"
      },
      {
        "title": "Size — interactive",
        "code": "<Kbd Size=\"Kbd.KbdSize.Sm\">Ctrl</Kbd>\n<Kbd>Ctrl</Kbd>          @* Default *@\n<Kbd Size=\"Kbd.KbdSize.Lg\">Ctrl</Kbd>"
      }
    ],
    "subComponents": {},
    "parseFailed": false,
    "parseError": null
  },
  "$schema": "https://lumeo.nativ.sh/registry-component-schema.json",
  "key": "kbd",
  "docsUrl": "https://lumeo.nativ.sh/components/kbd",
  "sourceUrl": [
    {
      "file": "UI/Kbd/Kbd.razor",
      "url": "https://github.com/Brain2k-0005/Lumeo/tree/master/src/Lumeo/UI/Kbd/Kbd.razor"
    }
  ],
  "source": [
    {
      "path": "UI/Kbd/Kbd.razor",
      "content": "@namespace Lumeo\n\n<kbd class=\"@CssClass\" @attributes=\"AdditionalAttributes\">@ChildContent</kbd>\n\n@code {\n    [Parameter] public RenderFragment? ChildContent { get; set; }\n    [Parameter] public KbdSize Size { get; set; } = KbdSize.Default;\n    [Parameter] public string? Class { get; set; }\n    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }\n\n    private string CssClass => $\"pointer-events-none inline-flex select-none items-center gap-1 rounded border border-border/50 bg-muted font-mono font-medium text-muted-foreground {SizeClasses} {Class}\".Trim();\n\n    private string SizeClasses => Size switch\n    {\n        KbdSize.Sm => \"h-5 px-1 text-[10px]\",\n        KbdSize.Default => \"h-5 px-1.5 text-[11px]\",\n        KbdSize.Lg => \"h-6 px-2 text-xs\",\n        _ => \"h-5 px-1.5 text-[11px]\"\n    };\n\n    public enum KbdSize { Sm, Default, Lg }\n}\n"
    }
  ],
  "slots": [
    {
      "name": "ChildContent",
      "owner": "Kbd",
      "type": "RenderFragment?",
      "description": null
    }
  ],
  "serviceDependencies": [],
  "cascadingDependencies": [],
  "relatedComponents": [],
  "keyboardInteractions": [],
  "tests": [
    "tests/Lumeo.Tests/Components/Kbd/KbdTests.cs"
  ],
  "mdSummary": "# Kbd\n\nKeyboard shortcut glyph — renders <kbd> with styling.\n\n**Package:** `Lumeo` · **Category:** Utility\n**Docs:** https://lumeo.nativ.sh/components/kbd\n\n## Parameters\n| Owner | Name | Type | Default | Description |\n|---|---|---|---|---|\n| Kbd | ChildContent | `RenderFragment?` | `` |  |\n| Kbd | Size | `KbdSize` | `KbdSize.Default` |  |\n| Kbd | Class | `string?` | `` |  |\n| Kbd | AdditionalAttributes | `Dictionary<string, object>?` | `` |  |\n\n## Slots\n- `ChildContent` (Kbd) — 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<Kbd />\n```\n\n## CSS variables\n`--color-border`, `--color-muted`, `--color-muted-foreground`, `--radius`\n\n## Files\n- `UI/Kbd/Kbd.razor`\n"
}