Kbd

1/* eslint-disable react-refresh/only-export-components */
2import * as React from 'react'
3import { cva, type VariantProps } from 'class-variance-authority'
4import { cn } from '@/lib/utils'
5 
6const kbdVariants = cva(
7  'inline-flex items-center justify-center font-mono font-bold uppercase border-3 border-foreground',
8  {
9    variants: {
10      variant: {
11        default: 'bg-muted shadow-[2px_2px_0px_hsl(var(--shadow-color))]',
12        outline: 'bg-background',
13        ghost: 'bg-transparent border-transparent text-muted-foreground',
14      },
15      size: {
16        sm: 'min-w-5 h-5 px-1 text-[10px]',
17        md: 'min-w-6 h-6 px-1.5 text-xs',
18        lg: 'min-w-8 h-8 px-2 text-sm',
19      },
20    },
21    defaultVariants: {
22      variant: 'default',
23      size: 'md',
24    },
25  }
26)
27 
28export interface KbdProps
29  extends React.HTMLAttributes<HTMLElement>,
30    VariantProps<typeof kbdVariants> {}
31 
32const Kbd = React.forwardRef<HTMLElement, KbdProps>(
33  ({ className, variant, size, ...props }, ref) => {
34    return (
35      <kbd
36        ref={ref}
37        className={cn(kbdVariants({ variant, size, className }))}
38        {...props}
39      />
40    )
41  }
42)
43Kbd.displayName = 'Kbd'
44 
45export interface KbdComboProps extends Omit<KbdProps, 'children'> {
46  keys: string[]
47  separator?: React.ReactNode
48}
49 
50const KbdCombo = React.forwardRef<HTMLDivElement, KbdComboProps>(
51  ({ keys, separator = '+', variant, size, className, ...props }, ref) => {
52    return (
53      <div
54        ref={ref}
55        className={cn('inline-flex items-center gap-1', className)}
56        {...props}
57      >
58        {keys.map((key, index) => (
59          <React.Fragment key={`kbd-${index}-${key}`}>
60            {index > 0 && (
61              <span className="text-muted-foreground text-xs font-bold">{separator}</span>
62            )}
63            <Kbd variant={variant} size={size}>
64              {key}
65            </Kbd>
66          </React.Fragment>
67        ))}
68      </div>
69    )
70  }
71)
72KbdCombo.displayName = 'KbdCombo'
73 
74export { Kbd, KbdCombo, kbdVariants }