{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "key-hint",
  "title": "Key hint",
  "description": "A keybind hint — the bordered key chip Destiny shows in nav bars and footers (`[A] Clan`, `[Esc] Dismiss`).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/key-hint.tsx",
      "content": "import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface KeyHintProps extends HTMLAttributes<HTMLSpanElement> {\n  /** The key glyph (e.g. \"A\", \"Esc\", \"F1\"). */\n  children: ReactNode;\n  /** Optional action label shown after the key (e.g. \"Dismiss\"). */\n  label?: ReactNode;\n}\n\n/**\n * A keybind hint — the bordered key chip Destiny shows in nav bars and footers\n * (`[A] Clan`, `[Esc] Dismiss`). Pass the key as children and an optional\n * `label` for the action beside it.\n */\nexport function KeyHint({\n  children,\n  label,\n  className,\n  ...props\n}: KeyHintProps) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center gap-1.5 font-engram-display text-engram-muted text-xs\",\n        className,\n      )}\n      {...props}\n    >\n      <kbd className=\"inline-flex min-w-[18px] items-center justify-center rounded-[3px] border border-engram-border-strong bg-engram-raised px-1 py-px font-engram-display font-semibold text-[11px] text-engram-fg leading-none\">\n        {children}\n      </kbd>\n      {label != null ? (\n        <span className=\"uppercase tracking-[0.08em]\">{label}</span>\n      ) : null}\n    </span>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/key-hint.tsx"
    }
  ],
  "meta": {
    "level": "atom"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "primitive"
  ],
  "type": "registry:component"
}