Kbd

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

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}
    />
  );
}