{
  "name": "kbd",
  "type": "registry:ui",
  "title": "Kbd",
  "description": "Kbd displays individual keys or short keyboard shortcuts without replacing explanatory help.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "src/components/ui/typography.ts",
      "type": "registry:ui",
      "content": "export const codeInlineClassName =\n  \"rounded-(--code-inline-radius) border border-border bg-muted px-1.5 py-0.5 font-mono [font-size:var(--code-inline-font-size)] text-foreground\";\n\nexport const codeBlockBaseClassName =\n  \"relative w-full overflow-x-auto rounded-lg border border-border bg-muted/50 font-mono text-foreground leading-relaxed\";\n\nexport const codeBlockSizeClassNames = {\n  default: \"px-3.5 py-3 text-xs\",\n  sm: \"px-3 py-2 [font-size:var(--code-block-sm-font-size)]\",\n} as const;\n\nexport const kbdClassName =\n  \"pointer-events-none inline-flex h-5 min-w-5 shrink-0 select-none items-center justify-center gap-1 whitespace-nowrap rounded-(--kbd-radius) bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3\";\n\nexport const shortcutClassName =\n  \"ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-normal\";\n"
    },
    {
      "path": "src/components/ui/kbd.tsx",
      "type": "registry:ui",
      "content": "import type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { kbdClassName } from \"@/components/ui/typography\";\n\nexport function Kbd({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(kbdClassName, className)}\n      data-slot=\"kbd\"\n      {...props}\n    />\n  );\n}\n\nexport function KbdGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\"inline-flex shrink-0 items-center gap-1 whitespace-nowrap\", className)}\n      data-slot=\"kbd-group\"\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "categories": [
    "data-display"
  ],
  "docs": "# Kbd\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nKbd displays individual keys or short keyboard shortcuts. It supplements, but\nnever replaces, an accessible action label or help text.\n\n## Import\n\n`import { Kbd, KbdGroup } from \"@/components/ui/kbd\";`\n\n## Public API\n\n- Use `Kbd` for one key and `KbdGroup` for a short combination.\n- Kbd is non-interactive and keeps `pointer-events-none`.\n- Native no-wrap and shrink protection keeps combinations such as “⌘ K”\n  together in compact layouts.\n- Kbd may appear as supporting content inside an Input Group addon.\n\n## Public Motion\n\n- Kbd is static and has no reduced-motion exception.\n- Keep radius, size, and typography on the native primitive.\n\n## Public Accessibility\n\n- A shortcut hint does not replace the accessible name of its action.\n- Keep combinations short and explain unfamiliar shortcuts in surrounding text.\n- An Input with a Kbd addon still needs a visible or accessible label.\n- Do not build dense shortcut reference walls inside compact product surfaces.\n\n## Public Agent Guidance\n\n- Use KbdGroup instead of custom separators and spacing for combinations.\n- Preserve native slots, no-wrap, shrink, and pointer behavior.\n- Keep complete shortcut documentation in help content rather than the control.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/data-display/kbd)\n\n- [Registry source](https://ui.siteplane.io/r/kbd.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/data-display/kbd",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}
