{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "type": "registry:ui",
  "title": "Keycap",
  "description": "A key's glyph on a small raised cap, in the readout role: 20 tall (16 in a footer), on a light surface, a graphite strip, or sunk into a toast's Undo.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/kbd/kbd.tsx",
      "type": "registry:ui",
      "target": "components/metalui/kbd/kbd.tsx",
      "content": "import * as React from 'react';\n\n/* KEYCAP (the reference design's kbd). Static: a key is shown, never pressed. Glyphs only: ⌘ ⌥ ⇧ ⌃ ⎋ ↩ ⌫ ↑ ↓, letters. */\n\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  /** small (16) for a dense footer; default 18. */\n  size?: 'default' | 'small';\n  /** Where the cap sits: on a light surface (default), a graphite strip, sunk, or plain (the host paints it). */\n  surface?: 'default' | 'strip' | 'sunk' | 'plain';\n  /** What assistive tech should say, when the glyph is not a word: \"Command K\". */\n  label?: string;\n}\n\nconst NAMES: Record<string, string> = { '⌘': 'Command', '⌥': 'Option', '⇧': 'Shift', '⌃': 'Control', '⎋': 'Escape', '↩': 'Return', '⌫': 'Delete', '↑': 'Up', '↓': 'Down', '←': 'Left', '→': 'Right' };\n\n/* Styled with the theme's utilities (the kbd recipe). A cap after a cap sits the recipe's gap away. */\nconst FRAME = 'mu-kbd box-border inline-flex items-center justify-center whitespace-nowrap align-middle type-kbd [.mu-kbd+&]:ml-kbd-gap';\nconst SIZES = {\n  default: 'min-w-kbd-min h-kbd-height px-kbd-pad',\n  small: 'min-w-kbd-small-min h-kbd-small-height px-kbd-small-pad',\n};\nconst RADII = {\n  default: 'rounded-kbd-radius',\n  small: 'rounded-kbd-small-radius',\n};\nconst SURFACES = {\n  default: 'text-ink2 recipe-kbd',\n  strip: 'text-kbd-strip-ink recipe-kbd-strip',\n  sunk: 'text-kbd-sunk-ink recipe-kbd-sunk',\n  plain: '',\n};\n\n/** A key, on a small raised cap. */\nexport const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd({ size = 'default', surface = 'default', label, className, children, ...props }, ref) {\n  const text = typeof children === 'string' ? children : '';\n  const spoken = label ?? (text && [...text].some((c) => NAMES[c]) ? [...text].map((c) => NAMES[c] ?? c).join(' ') : undefined);\n  return (\n    <kbd ref={ref} data-size={size} data-surface={surface} aria-label={spoken} className={`${FRAME} ${SIZES[size]} ${surface === 'sunk' ? 'rounded-pill' : RADII[size]} ${SURFACES[surface]}${className ? ` ${className}` : ''}`} {...props}>\n      {children}\n    </kbd>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/kbd.md. SwiftUI: MetalKbd in the MetalUI Swift package."
}