From 34537fd1a32e428514f42c1028b34d4d1220c0f0 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 18 Mar 2026 09:25:25 +0100
Subject: [PATCH] feat: MonoText, KeyboardHint, SectionHeader primitives

---
 .../KeyboardHint/KeyboardHint.module.css       | 10 ++++++++++
 .../primitives/KeyboardHint/KeyboardHint.tsx   | 10 ++++++++++
 .../primitives/MonoText/MonoText.module.css    |  4 ++++
 .../primitives/MonoText/MonoText.tsx           | 12 ++++++++++++
 .../SectionHeader/SectionHeader.module.css     | 18 ++++++++++++++++++
 .../primitives/SectionHeader/SectionHeader.tsx | 17 +++++++++++++++++
 6 files changed, 71 insertions(+)
 create mode 100644 src/design-system/primitives/KeyboardHint/KeyboardHint.module.css
 create mode 100644 src/design-system/primitives/KeyboardHint/KeyboardHint.tsx
 create mode 100644 src/design-system/primitives/MonoText/MonoText.module.css
 create mode 100644 src/design-system/primitives/MonoText/MonoText.tsx
 create mode 100644 src/design-system/primitives/SectionHeader/SectionHeader.module.css
 create mode 100644 src/design-system/primitives/SectionHeader/SectionHeader.tsx

diff --git a/src/design-system/primitives/KeyboardHint/KeyboardHint.module.css b/src/design-system/primitives/KeyboardHint/KeyboardHint.module.css
new file mode 100644
index 0000000..aa449e6
--- /dev/null
+++ b/src/design-system/primitives/KeyboardHint/KeyboardHint.module.css
@@ -0,0 +1,10 @@
+.kbd {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  padding: 0 4px;
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
diff --git a/src/design-system/primitives/KeyboardHint/KeyboardHint.tsx b/src/design-system/primitives/KeyboardHint/KeyboardHint.tsx
new file mode 100644
index 0000000..b8d914c
--- /dev/null
+++ b/src/design-system/primitives/KeyboardHint/KeyboardHint.tsx
@@ -0,0 +1,10 @@
+import styles from './KeyboardHint.module.css'
+
+interface KeyboardHintProps {
+  keys: string
+  className?: string
+}
+
+export function KeyboardHint({ keys, className }: KeyboardHintProps) {
+  return <kbd className={`${styles.kbd} ${className ?? ''}`}>{keys}</kbd>
+}
diff --git a/src/design-system/primitives/MonoText/MonoText.module.css b/src/design-system/primitives/MonoText/MonoText.module.css
new file mode 100644
index 0000000..5ed762f
--- /dev/null
+++ b/src/design-system/primitives/MonoText/MonoText.module.css
@@ -0,0 +1,4 @@
+.mono { font-family: var(--font-mono); }
+.xs { font-size: 10px; }
+.sm { font-size: 11px; }
+.md { font-size: 13px; }
diff --git a/src/design-system/primitives/MonoText/MonoText.tsx b/src/design-system/primitives/MonoText/MonoText.tsx
new file mode 100644
index 0000000..d73422c
--- /dev/null
+++ b/src/design-system/primitives/MonoText/MonoText.tsx
@@ -0,0 +1,12 @@
+import styles from './MonoText.module.css'
+import type { ReactNode } from 'react'
+
+interface MonoTextProps {
+  children: ReactNode
+  size?: 'xs' | 'sm' | 'md'
+  className?: string
+}
+
+export function MonoText({ children, size = 'md', className }: MonoTextProps) {
+  return <span className={`${styles.mono} ${styles[size]} ${className ?? ''}`}>{children}</span>
+}
diff --git a/src/design-system/primitives/SectionHeader/SectionHeader.module.css b/src/design-system/primitives/SectionHeader/SectionHeader.module.css
new file mode 100644
index 0000000..6115627
--- /dev/null
+++ b/src/design-system/primitives/SectionHeader/SectionHeader.module.css
@@ -0,0 +1,18 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  color: var(--text-muted);
+}
+
+.action {
+  font-size: 12px;
+  color: var(--text-muted);
+}
diff --git a/src/design-system/primitives/SectionHeader/SectionHeader.tsx b/src/design-system/primitives/SectionHeader/SectionHeader.tsx
new file mode 100644
index 0000000..647a56f
--- /dev/null
+++ b/src/design-system/primitives/SectionHeader/SectionHeader.tsx
@@ -0,0 +1,17 @@
+import styles from './SectionHeader.module.css'
+import type { ReactNode } from 'react'
+
+interface SectionHeaderProps {
+  children: ReactNode
+  action?: ReactNode
+  className?: string
+}
+
+export function SectionHeader({ children, action, className }: SectionHeaderProps) {
+  return (
+    <div className={`${styles.header} ${className ?? ''}`}>
+      <span className={styles.label}>{children}</span>
+      {action && <span className={styles.action}>{action}</span>}
+    </div>
+  )
+}