kbd

1import { cn } from "~/lib/utils.ts";
2 
3import { type Component, type ComponentProps, splitProps } from "solid-js";
4 
5const Kbd: Component<ComponentProps<"kbd">> = (props) => {
6  const [local, others] = splitProps(props, ["class"]);
7  return (
8    <kbd
9      data-slot="kbd"
10      class={cn(
11        "h-5 w-fit min-w-5 gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground 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 pointer-events-none inline-flex select-none items-center justify-center",
12        local.class,
13      )}
14      {...others}
15    />
16  );
17};
18 
19const KbdGroup: Component<ComponentProps<"kbd">> = (props) => {
20  const [local, others] = splitProps(props, ["class"]);
21  return (
22    <kbd
23      data-slot="kbd-group"
24      class={cn("gap-1 inline-flex items-center", local.class)}
25      {...others}
26    />
27  );
28};
29 
30export { Kbd, KbdGroup };