Kbd

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3
4import { cn } from "@/lib/utils";
5
6const kbdVariants = cva(
7  // `bg-clip-padding` on `default` only: the translucent border needs the bg
8  // clipped to the padding box to composite correctly. Colored variants use
9  // opaque borders; ghost has no bg, so it would leave a 1px substrate halo.
10  "inline-flex items-center justify-center rounded-sm border text-center font-medium tracking-tight shadow-[0_1px_2px_0_oklch(0_0_0/0.06)] transition-colors duration-150 font-mono",
11  {
12    variants: {
13      size: {
14        sm: "h-5 min-w-5 px-1.5 text-xs",
15        md: "h-6 min-w-6 px-2 text-xs",
16        lg: "h-7 min-w-7 px-2.5 text-sm",
17      },
18      variant: {
19        default: "bg-card bg-clip-padding text-foreground",
20        primary: "bg-primary text-primary-foreground border-primary",
21        secondary: "bg-secondary text-secondary-foreground border-secondary",
22        outline: "bg-transparent text-foreground shadow-none",
23        ghost: "border-transparent bg-muted text-muted-foreground shadow-none",
24        danger: "bg-destructive text-destructive-foreground border-destructive",
25      },
26      pressed: {
27        true: "translate-y-px bg-muted shadow-none",
28        false: "",
29      },
30    },
31    defaultVariants: {
32      size: "md",
33      variant: "default",
34      pressed: false,
35    },
36  },
37);
38
39const platformKeys = {
40  mac: {
41    cmd: "⌘",
42    option: "⌥",
43    alt: "⌥",
44    ctrl: "⌃",
45    shift: "⇧",
46    enter: "↵",
47    delete: "⌫",
48    backspace: "⌫",
49    escape: "⎋",
50    tab: "⇥",
51    space: "⎵",
52    up: "↑",
53    down: "↓",
54    left: "←",
55    right: "→",
56  },
57  windows: {
58    cmd: "Ctrl",
59    option: "Alt",
60    alt: "Alt",
61    ctrl: "Ctrl",
62    shift: "Shift",
63    enter: "Enter",
64    delete: "Del",
65    backspace: "Backspace",
66    escape: "Esc",
67    tab: "Tab",
68    space: "Space",
69    up: "↑",
70    down: "↓",
71    left: "←",
72    right: "→",
73  },
74};
75
76function useClientPlatform(): "mac" | "windows" {
77  const [platform, setPlatform] = React.useState<"mac" | "windows">("mac");
78
79  React.useEffect(() => {
80    if (typeof navigator === "undefined") return;
81    // `navigator.platform` is deprecated; prefer userAgentData.platform
82    // (Chromium) with userAgent string as the universal fallback.
83    const uaData = (
84// … truncated