Kbd

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

import { cn } from '@/lib/utils';/** * A keyboard key. * Renders a `<kbd>` element. * * Documentation: [Caprice UI Kbd](https://caprice-ui.com/docs/components/kbd) */export namespace Kbd {  export type Props = React.ComponentProps<'kbd'>;}export function Kbd({ className, ...props }: Kbd.Props) {  return (    <kbd      className={cn(        'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-medium font-sans text-muted-foreground text-xs',        "[&_svg:not([class*='size-'])]:size-3",        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',        className      )}      data-slot="kbd"      {...props}    />  );}/** * A group of keyboard keys. * Renders a `<kbd>` element. * * Documentation: [Caprice UI Kbd](https://caprice-ui.com/docs/components/kbd) */export namespace KbdGroup {  export type Props = React.ComponentProps<'kbd'>;}export function KbdGroup({ className, ...props }: KbdGroup.Props) {  return (    <kbd      className={cn('inline-flex items-center gap-1', className)}      data-slot="kbd-group"      {...props}    />  );}