Kbd

1// Base UI base kbd — plain host `<kbd>` elements. Base UI ships no Keyboard primitive (the
2// React Aria base renders both parts through RAC's `Keyboard`), so this matches the Radix
3// base's plain-host shape.
4//
5// UNVERIFIED PROVENANCE: class strings taken from this package's React Aria base rather than
6// transcribed from upstream's Base UI source.
7import { cn } from '@/lib/utils';
8import type { HostProps } from '@/lib/types';
9 
10export function Kbd({ className, ...props }: HostProps<'kbd'>) @{
11	<kbd
12		data-slot="kbd"
13		className={cn(
14			'pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground 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',
15			className,
16		)}
17		{...props}
18	/>
19}
20 
21export function KbdGroup({ className, ...props }: HostProps<'kbd'>) @{
22	<kbd
23		data-slot="kbd-group"
24		className={cn('inline-flex items-center gap-1', className)}
25		{...props}
26	/>
27}