Kbd

1"use client";
2 
3import type * as React from "react";
4import { useSyncExternalStore } from "react";
5import { cn } from "@/lib/utils";
6import { coarseTarget, selectionFocus, colorTransition } from "@/lib/recipes";
7 
8export interface KbdProps
9  extends Omit<React.HTMLAttributes<HTMLElement>, "onClick"> {
10  /** `sm` for inline body text, `md` for shortcut hints. */
11  size?: "sm" | "md";
12  /**
13   * When provided, Kbd renders as a `<button>` with hover state.
14   * Use for keys that represent an actual action the user can click.
15   */
16  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
17  /** Command / Meta modifier. Renders `⌘` on Mac, `Ctrl` on Windows/Linux. */
18  meta?: boolean;
19  /** Ctrl modifier. Renders `⌃` on Mac, `Ctrl` elsewhere. */
20  ctrl?: boolean;
21  /** Alt / Option modifier. Renders `⌥` on Mac, `Alt` elsewhere. */
22  alt?: boolean;
23  /** Shift modifier. Always `⇧`. */
24  shift?: boolean;
25}
26 
27// SSR and first render assume Mac so the glyph doesn't flicker on Mac clients between SSR and hydrate.
28function useIsMac(): boolean {
29  return useSyncExternalStore(
30    () => () => {},
31    () => /Mac|iPhone|iPad|iPod/.test(navigator.platform),
32    () => true,
33  );
34}
35 
36function modifiers(mac: boolean, m: {
37  meta?: boolean;
38  ctrl?: boolean;
39  alt?: boolean;
40  shift?: boolean;
41}): string[] {
42  const parts: string[] = [];
43  if (m.ctrl) parts.push(mac ? "⌃" : "Ctrl");
44  if (m.meta) parts.push(mac ? "⌘" : "Ctrl");
45  if (m.alt) parts.push(mac ? "⌥" : "Alt");
46  if (m.shift) parts.push("⇧");
47  return parts;
48}
49 
50export function Kbd({
51  size = "md",
52  className,
53  children,
54  onClick,
55  meta,
56  ctrl,
57  alt,
58  shift,
59  ...props
60}: KbdProps): React.ReactElement {
61  const mac = useIsMac();
62  const interactive = typeof onClick === "function";
63  const mods = modifiers(mac, { meta, ctrl, alt, shift });
64 
65  const content = mods.length > 0 ? (
66    <span className="inline-flex items-center gap-1">
67      {mods.map((m, i) => (
68        <span key={i}>{m}</span>
69      ))}
70      {children}
71    </span>
72  ) : (
73    children
74  );
75 
76  const cls = cn(
77    "inline-flex items-center justify-center tabular-nums font-sans text-mini font-medium text-ink-muted",
78    "rounded-[var(--radius-4)] bg-fill-1 border border-hairline",
79    size === "sm" && "h-[18px] min-w-[18px] px-1",
80    size === "md" && "h-5 min-w-5 px-1.5",
81    mods.length > 0 && "px-1.5 gap-1",
82    interactive && [
83      "hover:bg-fill-2 hover:text-ink",
84      selectionFocus,
85      colorTransition,
86      coarseTarget,
87// … truncated