Kbd

1import {
2  ArrowCornerDownLeftIcon,
3  ArrowDownIcon,
4  ArrowLeftXIcon,
5  ArrowUpIcon,
6  ArrowWall2RightIcon,
7  CmdIcon,
8  ControlIcon,
9  OptIcon,
10  ShiftIcon,
11} from "blode-icons-react";
12import { cva } from "class-variance-authority";
13import type { VariantProps } from "class-variance-authority";
14import type * as React from "react";
15 
16import { cn } from "@/lib/utils";
17 
18type KbdIcon =
19  | "mod"
20  | "shift"
21  | "enter"
22  | "command"
23  | "ctrl"
24  | "alt"
25  | "tab"
26  | "backspace"
27  | "up"
28  | "down";
29 
30const kbdVariants = cva(
31  "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1.5 font-medium font-sans text-xs ring-1 ring-inset [&_svg:not([class*='size-'])]:size-3",
32  {
33    defaultVariants: {
34      variant: "default",
35    },
36    variants: {
37      variant: {
38        default:
39          "bg-muted text-muted-foreground ring-border [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background [[data-slot=tooltip-content]_&]:ring-background/20 dark:[[data-slot=tooltip-content]_&]:bg-background/10 dark:[[data-slot=tooltip-content]_&]:ring-background/10",
40        tooltip:
41          "bg-background/20 text-background ring-background/20 dark:bg-background/10 dark:ring-background/10",
42      },
43    },
44  },
45);
46 
47interface KbdProps extends React.ComponentProps<"kbd">, VariantProps<typeof kbdVariants> {
48  icon?: KbdIcon;
49}
50 
51const iconMap: Record<KbdIcon, React.ReactNode> = {
52  alt: <OptIcon className="size-3" />,
53  backspace: <ArrowLeftXIcon className="size-3" />,
54  command: <CmdIcon className="size-3" />,
55  ctrl: <ControlIcon className="size-3" />,
56  down: <ArrowDownIcon className="size-3" />,
57  enter: <ArrowCornerDownLeftIcon className="size-3" />,
58  mod: <CmdIcon className="size-3" />,
59  shift: <ShiftIcon className="size-3" />,
60  tab: <ArrowWall2RightIcon className="size-3" />,
61  up: <ArrowUpIcon className="size-3" />,
62};
63 
64const Kbd = ({ className, variant, children, icon, ...props }: KbdProps) => {
65  const content = icon ? iconMap[icon] : children;
66 
67  return (
68    <kbd className={cn(kbdVariants({ variant }), className)} data-slot="kbd" {...props}>
69      {content}
70    </kbd>
71  );
72};
73 
74const KbdGroup = ({ className, ...props }: React.ComponentProps<"kbd">) => (
75  <kbd
76    className={cn("inline-flex items-center gap-1", className)}
77    data-slot="kbd-group"
78    {...props}
79  />
80);
81 
82export { Kbd, KbdGroup };