Kbd

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Kbd — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// Native element (source of truth):
8//   repos/mdn/files/en-us/web/html/reference/elements/kbd/index.md
9//     - <kbd> denotes textual user input from a keyboard / voice / other
10//       text-entry device. Implicit ARIA role: "no corresponding role"
11//       (it's phrasing content, announced as plain text). No interaction,
12//       so this component ships ZERO JavaScript.
13//     - MDN's "Representing keystrokes within an input" pattern nests a
14//       <kbd> per key inside an outer <kbd> that represents the whole
15//       shortcut. We follow that: <KbdGroup> is the outer <kbd>, each
16//       <Kbd> is an inner key. A lone <Kbd> (no group) is still a valid
17//       single-key <kbd>.
18//
19// Visual styling translated from shadcn/ui's Kbd (kept on-brand with our
20// theme tokens, not copied verbatim):
21//   repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/kbd.tsx
22//
23// We use ONLY existing theme tokens (bg-muted / text-muted-foreground /
24// border). select-none + pointer-events-none keep the key glyphs from being
25// selected or clicked — they are a label, not a control.
26 
27const kbdBase =
28  "pointer-events-none inline-flex h-5 w-fit min-w-5 shrink-0 select-none items-center justify-center gap-1 " +
29  "rounded-sm border bg-muted px-1 font-sans text-xs font-medium text-muted-foreground " +
30  "[&_svg:not([class*='size-'])]:size-3"
31 
32// The outer <kbd> that wraps a sequence of keys. MDN allows nesting <kbd>
33// inside <kbd>; the group carries no background of its own so the inner
34// keys read as discrete caps with separators (the "+" text) between them.
35const kbdGroupBase = "inline-flex w-fit items-center gap-1 align-middle"
36 
37export function kbdClasses(opts?: { class?: ClassValue }): string {
38  return cn(kbdBase, opts?.class)
39}
40 
41export function kbdGroupClasses(opts?: { class?: ClassValue }): string {
42  return cn(kbdGroupBase, opts?.class)
43}
44 
45type KbdProps = PropsWithChildren<{
46  class?: ClassValue
47  id?: string
48  // Accessible name override — useful for symbol-only keys (e.g. content
49  // "⌘" with ariaLabel="Command"). See aria-label on MDN.
50  ariaLabel?: string
51  title?: string
52  // htmx attrs / data-* / aria-* flow through via {...rest}.
53}>
54 
55// A single key cap. Renders one <kbd>. Use inside <KbdGroup> for shortcuts.
56export function Kbd(props: KbdProps) {
57// … truncated