kbd

1/**
2 * Slots: kbd, kbd-group
3 */
4 
5import { cva, type VariantProps } from 'class-variance-authority';
6 
7import { cn } from '@/registry/lib/utils';
8 
9const kbdVariants = cva(
10  "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs text-ui-label font-medium select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
11  {
12    variants: {
13      variant: {
14        ghost: 'bg-transparent text-secondary focus-visible:outline-2 focus-visible:outline-focus',
15        soft: 'bg-ui text-secondary focus-visible:outline-2 focus-visible:outline-focus',
16        surface:
17          'bg-ui text-secondary shadow-[0_1px_0_var(--line-subtle)] focus-visible:outline-2 focus-visible:outline-focus',
18      },
19    },
20    defaultVariants: {
21      variant: 'soft',
22    },
23  }
24);
25 
26function Kbd({
27  className,
28  variant,
29  ...props
30}: React.ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>) {
31  return <kbd data-slot="kbd" className={cn(kbdVariants({ variant }), className)} {...props} />;
32}
33 
34function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
35  return (
36    <kbd
37      data-slot="kbd-group"
38      className={cn('inline-flex items-center gap-1 shadow-none', className)}
39      {...props}
40    />
41  );
42}
43 
44export { Kbd, KbdGroup, kbdVariants };