Kbd

import { Kbd, KbdGroup } from "@arcadia/ui";

<KbdGroup keys="⌘K" />
<KbdGroup keys="mod+shift+p" />
<Kbd>Esc</Kbd>
<Kbd variant="plain">⇧Tab</Kbd>

import { KeyLegend } from "@arcadia/ui";

<KeyLegend hints={[
  { keys: ["↑", "↓"], label: "Move" },
  { keys: "⏎", label: "Open" },
  { keys: ["⌘[", "⌘]"], label: "Filter" },
  { keys: "Esc", label: "Close" },
]} />

import { KbdGroup, ariaKeyShortcuts, shortcutKeys } from "@arcadia/ui";

function Parsing() {
  const specs = ["⌘⇧K", "mod+shift+k", "⇧Tab", "^Tab", "esc"];
  return (
    <div {...sx("cmp-parse", cmp.parse)}>
      <span {...sx("cmp-parse-head", cmp.parseHead)}>Spec</span>
      <span {...sx("cmp-parse-head", cmp.parseHead)}>Display keys</span>
      <span {...sx("cmp-parse-head", cmp.parseHead)}>ARIA</span>
      {specs.map((spec) => (
        <div key={spec} style={{ display: "contents" }}>
          <code>{JSON.stringify(spec)}</code>
          <KbdGroup keys={shortcutKeys(spec)} size="sm" />
          <code>{ariaKeyShortcuts(spec)}</code>
        </div>
      ))}
    </div>
  );
}