{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "keyboard-hint",
  "title": "KeyboardHint",
  "description": "A shortcut and what it does.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/kbd.json"
  ],
  "files": [
    {
      "path": "keyboard-hint/KeyboardHint.css",
      "content": ".cr-kbd-hint {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--cr-space-2);\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n}\n\n.cr-kbd-hint__keys {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/keyboard-hint/KeyboardHint.css"
    },
    {
      "path": "keyboard-hint/KeyboardHint.tsx",
      "content": "import { Fragment } from 'react';\nimport { Kbd } from '@/components/creance/kbd/Kbd';\nimport { cx } from '@/lib/creance/cx';\nimport './KeyboardHint.css';\n\nexport interface KeyboardHintProps {\n  /** Keys pressed together, e.g. ['Shift', 'A']. */\n  keys: string[];\n  /** What the shortcut does. Omit when the hint sits inside the control it triggers. */\n  label?: string;\n  className?: string;\n}\n\n/**\n * A visual hint. The control itself should expose the shortcut with `aria-keyshortcuts`,\n * so the hint is hidden from screen readers when it has no label.\n */\nexport function KeyboardHint({ keys, label, className }: KeyboardHintProps) {\n  return (\n    <span className={cx('cr-kbd-hint', className)} aria-hidden={label ? undefined : true}>\n      <span className=\"cr-kbd-hint__keys\">\n        {keys.map((key, i) => (\n          <Fragment key={key}>\n            {i > 0 && <span aria-hidden=\"true\">+</span>}\n            <Kbd>{key}</Kbd>\n          </Fragment>\n        ))}\n      </span>\n      {label && <span className=\"cr-kbd-hint__label\">{label}</span>}\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/keyboard-hint/KeyboardHint.tsx"
    }
  ],
  "categories": [
    "molecule",
    "agent"
  ],
  "type": "registry:ui"
}