Aurora Kbd

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4export type KbdVariant = "raised" | "solid" | "outline" | "ghost" | "accent"
5 
6export interface KbdProps extends React.ComponentProps<"kbd"> {
7  /**
8   * Visual treatment of the keycap chip.
9   * - `raised`  — recessed control surface with a top highlight + bottom inset (default).
10   * - `solid`   — flat filled panel surface, brighter label.
11   * - `outline` — transparent fill, border only.
12   * - `ghost`   — borderless translucent fill, softest.
13   * - `accent`  — cyan-tinted surface, cyan border + label.
14   * @default "raised"
15   */
16  variant?: KbdVariant
17  /**
18   * Escape hatch. When true, renders a bare `<kbd>` with only `className` and the
19   * forwarded props/ref — no inline style skin — so the consumer's CSS owns the
20   * appearance. The styled path (default) is unaffected.
21   * @default false
22   */
23  unstyled?: boolean
24}
25 
26const variantStyle: Record<KbdVariant, React.CSSProperties> = {
27  raised: {
28    background: "var(--aurora-control-surface)",
29    border: "1px solid var(--aurora-border-strong)",
30    boxShadow: "inset 0 -1px 0 rgba(0,0,0,0.35), var(--aurora-highlight-medium)",
31    color: "var(--aurora-text-muted)",
32  },
33  solid: {
34    background: "var(--aurora-panel-strong)",
35    border: "1px solid var(--aurora-border-strong)",
36    boxShadow: "var(--aurora-highlight-medium)",
37    color: "var(--aurora-text-primary)",
38  },
39  outline: {
40    background: "transparent",
41    border: "1px solid var(--aurora-border-strong)",
42    boxShadow: "none",
43    color: "var(--aurora-text-muted)",
44  },
45  ghost: {
46    background: "color-mix(in srgb, var(--aurora-control-surface) 70%, transparent)",
47    border: "1px solid transparent",
48    boxShadow: "none",
49    color: "var(--aurora-text-muted)",
50  },
51  accent: {
52    background: "color-mix(in srgb, var(--aurora-accent-primary) 14%, var(--aurora-panel-medium))",
53    border: "1px solid color-mix(in srgb, var(--aurora-accent-primary) 38%, transparent)",
54    boxShadow: "var(--aurora-highlight-medium)",
55    color: "var(--aurora-accent-strong)",
56  },
57}
58 
59function Kbd({ className, style, variant = "raised", unstyled = false, ref, ...props }: KbdProps & { ref?: React.Ref<HTMLElement> }) {
60  if (unstyled) {
61    return <kbd ref={ref} className={className} {...props} />
62  }
63 
64  return (
65    <kbd
66      ref={ref}
67      className={cn("inline-flex min-w-5 items-center justify-center rounded-[5px] px-1.5", className)}
68      style={{
69// … truncated