{
  "name": "kbd",
  "type": "registry:ui",
  "title": "Kbd",
  "description": "The printed key. Any action used more than twice per session shows its key on the control. Renders ⌘ vs Ctrl by platform.",
  "dependencies": [
    "@candlelight-ds/tokens",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "components/ui/Kbd.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\n/**\n * Kbd — the printed key (grammar G2). Any action a user performs more than\n * twice per session shows its key on the control.\n *\n * Use when: a control has a keyboard binding.\n * Don't use when: explaining a concept (that's Tooltip's job).\n *\n * G2 corollary — honest printed keys: never render a Kbd for a binding\n * that doesn't fire. A control that can't act sits dark rather than lying.\n */\n\nimport { cn } from '@/lib/utils'\n\nconst IS_MAC =\n  typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform ?? '')\n\n/** Renders 'mod' as ⌘ on Apple platforms, Ctrl elsewhere. */\nexport function modKey(): string {\n  return IS_MAC ? '⌘' : 'Ctrl'\n}\n\ninterface KbdProps {\n  children: React.ReactNode\n  /** xs = inline on controls; sm = help map / menus */\n  size?: 'xs' | 'sm'\n  /** Accent treatment for armed/primary contexts */\n  tone?: 'default' | 'brass' | 'onBrass'\n  className?: string\n}\n\nexport function Kbd({ children, size = 'xs', tone = 'default', className }: KbdProps) {\n  const content = children === 'mod' ? modKey() : children\n\n  return (\n    <kbd\n      className={cn(\n        // A stamped keycap: the bottom edge carries a hint of shade so the\n        // printed key reads as a physical cap, not a badge.\n        'inline-flex items-center justify-center rounded-cap border font-sans',\n        'shadow-[inset_0_-1px_0_rgba(0,0,0,0.35)]',\n        size === 'xs' ? 'min-w-[18px] px-1 text-nano leading-4' : 'h-6 min-w-6 px-1.5 text-eyebrow',\n        tone === 'brass'\n          ? 'border-brass-rim text-brass'\n          : tone === 'onBrass'\n            ? 'border-stage/25 text-stage/70 shadow-[inset_0_-1px_0_rgba(0,0,0,0.2)]'\n            : size === 'sm'\n              ? 'border-hairline-strong bg-fill-active text-ink'\n              : 'border-hairline text-ink-faint',\n        className\n      )}\n    >\n      {content}\n    </kbd>\n  )\n}\n",
      "target": "components/ui/Kbd.tsx"
    }
  ],
  "meta": {
    "candlelight": {
      "category": "primitive",
      "gRules": [
        "G2"
      ],
      "useWhen": "A control has a keyboard binding.",
      "dontUseWhen": "Explaining a concept — that's Tooltip's job.",
      "states": [
        "default",
        "brass",
        "onBrass",
        "xs",
        "sm"
      ],
      "keyboard": [],
      "acceptanceTests": [
        "Never render a Kbd for a binding that doesn't fire (honest printed keys).",
        "'mod' renders ⌘ on Apple platforms, Ctrl elsewhere."
      ]
    }
  },
  "registryDependencies": [
    "utils"
  ]
}