Kbd

1"use client"
2
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { cn } from "@/lib/utils"
6
7const kbdVariants = cva(
8    "inline-flex items-center justify-center gap-1 font-mono font-medium select-none transition-all duration-150",
9    {
10        variants: {
11            variant: {
12                default: "bg-muted border border-border text-muted-foreground shadow-sm",
13                outline: "bg-transparent border-2 border-border text-foreground hover:border-primary/50",
14                solid: "bg-foreground text-background border border-foreground shadow-md",
15                ghost: "bg-transparent text-muted-foreground",
16                glass: "bg-background/20 backdrop-blur-sm border border-border/50 text-foreground shadow-lg",
17                mac: "bg-gradient-to-b from-muted to-muted/80 border border-border text-foreground shadow-md hover:shadow-lg",
18                modern: "bg-gradient-to-br from-primary/10 to-secondary/10 border border-primary/20 text-primary shadow backdrop-blur-sm",
19            },
20            size: {
21                xs: "h-4 px-1 text-[9px] rounded-[2px] gap-0.5",
22                sm: "h-5 px-1.5 text-[10px] rounded-sm gap-0.5",
23                md: "h-6 px-2 text-xs rounded-md gap-1",
24                lg: "h-8 px-3 text-sm rounded-lg gap-1.5",
25                xl: "h-10 px-4 text-base rounded-xl gap-2",
26            },
27            state: {
28                idle: "",
29                active: "ring-2 ring-primary ring-offset-2 ring-offset-background scale-105",
30                disabled: "opacity-50 cursor-not-allowed",
31            },
32        },
33        defaultVariants: {
34            variant: "default",
35            size: "md",
36            state: "idle",
37        },
38    }
39)
40
41// Platform detection helper
42const getPlatform = (): "mac" | "windows" | "linux" => {
43    if (typeof window === "undefined") return "windows"
44    const userAgent = window.navigator.userAgent.toLowerCase()
45    if (userAgent.includes("mac")) return "mac"
46    if (userAgent.includes("linux")) return "linux"
47    return "windows"
48}
49
50// Special key symbols mapping
51const keySymbols: Record<string, { mac: string; windows: string; icon?: string }> = {
52    mod: { mac: "⌘", windows: "Ctrl" },
53    cmd: { mac: "⌘", windows: "Ctrl" },
54    command: { mac: "⌘", windows: "Ctrl" },
55    ctrl: { mac: "⌃", windows: "Ctrl" },
56    control: { mac: "⌃", windows: "Ctrl" },
57// … truncated