Pixelact Kbd

1import { cn } from "@/lib/utils";
2 
3import "@/components/ui/pixelact-ui/styles/styles.css";
4 
5function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
6  return (
7    <kbd
8      data-slot="kbd"
9      className={cn(
10        "pixel-font",
11        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 p-2 font-sans text-xs select-none",
12        "[&_svg:not([class*='size-'])]:size-3",
13        "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10",
14        className
15      )}
16      {...props}
17    />
18  );
19}
20 
21function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
22  return (
23    <kbd
24      data-slot="kbd-group"
25      className={cn("inline-flex items-center gap-1", className)}
26      {...props}
27    />
28  );
29}
30 
31export { Kbd, KbdGroup };