{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/recipes.json",
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/kbd.tsx",
      "content": "\"use client\";\n\nimport type * as React from \"react\";\nimport { useSyncExternalStore } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { coarseTarget, selectionFocus, colorTransition } from \"@/lib/recipes\";\n\nexport interface KbdProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"onClick\"> {\n  /** `sm` for inline body text, `md` for shortcut hints. */\n  size?: \"sm\" | \"md\";\n  /**\n   * When provided, Kbd renders as a `<button>` with hover state.\n   * Use for keys that represent an actual action the user can click.\n   */\n  onClick?: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Command / Meta modifier. Renders `⌘` on Mac, `Ctrl` on Windows/Linux. */\n  meta?: boolean;\n  /** Ctrl modifier. Renders `⌃` on Mac, `Ctrl` elsewhere. */\n  ctrl?: boolean;\n  /** Alt / Option modifier. Renders `⌥` on Mac, `Alt` elsewhere. */\n  alt?: boolean;\n  /** Shift modifier. Always `⇧`. */\n  shift?: boolean;\n}\n\n// SSR and first render assume Mac so the glyph doesn't flicker on Mac clients between SSR and hydrate.\nfunction useIsMac(): boolean {\n  return useSyncExternalStore(\n    () => () => {},\n    () => /Mac|iPhone|iPad|iPod/.test(navigator.platform),\n    () => true,\n  );\n}\n\nfunction modifiers(mac: boolean, m: {\n  meta?: boolean;\n  ctrl?: boolean;\n  alt?: boolean;\n  shift?: boolean;\n}): string[] {\n  const parts: string[] = [];\n  if (m.ctrl) parts.push(mac ? \"⌃\" : \"Ctrl\");\n  if (m.meta) parts.push(mac ? \"⌘\" : \"Ctrl\");\n  if (m.alt) parts.push(mac ? \"⌥\" : \"Alt\");\n  if (m.shift) parts.push(\"⇧\");\n  return parts;\n}\n\nexport function Kbd({\n  size = \"md\",\n  className,\n  children,\n  onClick,\n  meta,\n  ctrl,\n  alt,\n  shift,\n  ...props\n}: KbdProps): React.ReactElement {\n  const mac = useIsMac();\n  const interactive = typeof onClick === \"function\";\n  const mods = modifiers(mac, { meta, ctrl, alt, shift });\n\n  const content = mods.length > 0 ? (\n    <span className=\"inline-flex items-center gap-0.5\">\n      {mods.map((m, i) => (\n        <span key={i}>{m}</span>\n      ))}\n      {children}\n    </span>\n  ) : (\n    children\n  );\n\n  const cls = cn(\n    \"inline-flex items-center justify-center tabular-nums font-mono text-mini font-medium text-ink-muted\",\n    \"rounded-[var(--radius-4)] bg-fill-1 border border-hairline\",\n    size === \"sm\" && \"h-5 min-w-5 px-1\",\n    size === \"md\" && \"h-6 min-w-6 px-2\",\n    mods.length > 0 && \"px-1.5 gap-1\",\n    interactive && [\n      \"hover:bg-fill-2 hover:text-ink\",\n      selectionFocus,\n      colorTransition,\n      coarseTarget,\n    ],\n    className,\n  );\n\n  if (interactive) {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"kbd\"\n        className={cls}\n        onClick={onClick}\n        {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <kbd data-slot=\"kbd\" className={cls} {...props}>\n      {content}\n    </kbd>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/kbd.tsx"
    }
  ],
  "type": "registry:ui"
}