{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shortcut-hint",
  "title": "Shortcut Hint",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A compact accessible keycap sequence paired with the action it performs.",
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/shortcut-hint.tsx",
      "content": "// Ballmac UI: Shortcut Hint. https://ui.ballmac.com/components/shortcut-hint\n\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype ShortcutHintProps = React.ComponentProps<\"span\"> & {\n  /** Keys in order, such as [\"⌘\", \"K\"]. */\n  keys: string[]\n  /** Action explained by the shortcut. */\n  label: string\n  /** Render compact keycaps for dense menus. */\n  compact?: boolean\n}\n\nfunction ShortcutHint({\n  className,\n  keys,\n  label,\n  compact = false,\n  ...props\n}: ShortcutHintProps) {\n  const msg = useMessages()\n  return (\n    <span\n      data-slot=\"shortcut-hint\"\n      role=\"note\"\n      aria-label={msg(\"shortcut-hint.label\", \"{label}: {keys}\", { label, keys: keys.join(msg(\"shortcut-hint.plus\", \" plus \")) })}\n      className={cn(\n        \"inline-flex min-w-0 items-center gap-1 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"text-muted-foreground me-1 truncate\">\n        {label}\n      </span>\n      <span\n        aria-hidden=\"true\"\n        className=\"inline-flex shrink-0 items-center gap-0.5\"\n      >\n        {keys.map((key, index) => (\n          <kbd\n            key={`${key}-${index}`}\n            data-slot=\"shortcut-hint-key\"\n            className={cn(\n              \"bg-muted text-muted-foreground inline-flex items-center justify-center rounded border border-border font-mono shadow-sm\",\n              compact\n                ? \"min-w-5 px-1 py-0.5 text-[10px]\"\n                : \"min-w-6 px-1.5 py-0.5 text-xs\",\n            )}\n          >\n            {key}\n          </kbd>\n        ))}\n      </span>\n    </span>\n  )\n}\n\nexport { ShortcutHint, type ShortcutHintProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/shortcut-hint.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "keyboard",
      "shortcut",
      "kbd"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A compact accessible keycap sequence paired with the action it performs.",
      "whenToUse": [
        "Label a command in a menu",
        "Teach an optional keyboard shortcut"
      ],
      "whenNotToUse": [
        "Use kbd for an isolated key"
      ],
      "composesWith": [
        "kbd",
        "spotlight-search"
      ],
      "a11y": [
        {
          "keys": "None",
          "action": "Full shortcut meaning is in the accessible name"
        }
      ],
      "customization": [
        "Compact keycaps",
        "Action label and key sequence"
      ]
    },
    "examples": [
      "shortcut-hint-demo",
      "shortcut-hint-states"
    ],
    "url": "https://ui.ballmac.com/components/shortcut-hint"
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}