@adamosuiteservices/ui 1.8.13 → 1.9.14

package/docs/components/ui/kbd.md

@@ -1,434 +1,434 @@
-# Kbd
-
-Representa teclas del teclado con estilo visual. Ideal para documentación, tooltips, atajos de teclado y ayuda contextual.
-
-## Descripción
-
-El componente `Kbd` representa teclas del teclado con estilo visual.
-
-## Importación
-
-```typescript
-import { Kbd, KbdGroup } from "@adamosuiteservices/ui/kbd";
-```
-
-## Anatomía
-
-```tsx
-<p>
-  Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy
-</p>
-
-<KbdGroup>
-  <Kbd>⌘</Kbd>
-  <Kbd>K</Kbd>
-</KbdGroup>
-```
-
-**Componentes**: 2 (Kbd, KbdGroup)
-
-## Props
-
-### Kbd
-
-| Prop        | Tipo     | Descripción                        |
-| ----------- | -------- | ---------------------------------- |
-| `className` | `string` | Clases CSS adicionales             |
-| ...props    | -        | Todas las props nativas de `<kbd>` |
-
-### KbdGroup
-
-| Prop        | Tipo     | Descripción                        |
-| ----------- | -------- | ---------------------------------- |
-| `className` | `string` | Clases CSS adicionales             |
-| ...props    | -        | Todas las props nativas de `<div>` |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-<div className="flex items-center gap-4">
-  <Kbd>Ctrl</Kbd>
-  <Kbd>⌘</Kbd>
-  <Kbd>⇧</Kbd>
-  <Kbd>⌥</Kbd>
-  <Kbd>⌃</Kbd>
-</div>
-```
-
-### Con Modificadores
-
-```tsx
-<KbdGroup>
-  <Kbd>Ctrl</Kbd>
-  <span>+</span>
-  <Kbd>B</Kbd>
-</KbdGroup>
-
-<KbdGroup>
-  <Kbd>Ctrl</Kbd>
-  <span>+</span>
-  <Kbd>Shift</Kbd>
-  <span>+</span>
-  <Kbd>P</Kbd>
-</KbdGroup>
-```
-
-### Inline con Texto
-
-```tsx
-<p className="text-sm text-muted-foreground">
-  Use{" "}
-  <KbdGroup>
-    <Kbd>Ctrl</Kbd>
-    <Kbd>K</Kbd>
-  </KbdGroup>{" "}
-  to open the command palette
-</p>
-
-<p className="text-sm">
-  Press{" "}
-  <KbdGroup>
-    <Kbd>⌘</Kbd>
-    <Kbd>K</Kbd>
-  </KbdGroup>{" "}
-  to search
-</p>
-```
-
-### En Botones
-
-```tsx
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Button variant="outline" size="sm" className="pr-2">
-  Accept <Kbd>⏎</Kbd>
-</Button>
-
-<Button variant="outline" size="sm" className="pr-2">
-  Cancel <Kbd>Esc</Kbd>
-</Button>
-
-<Button variant="outline" size="sm" className="pr-2">
-  Save <Kbd>⌘</Kbd><Kbd>S</Kbd>
-</Button>
-```
-
-### En Tooltips
-
-```tsx
-import { Tooltip, TooltipContent, TooltipTrigger } from "@adamosuiteservices/ui/tooltip";
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button size="sm" variant="outline">
-      Save
-    </Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <div className="flex items-center gap-2">
-      Save Changes <Kbd>S</Kbd>
-    </div>
-  </TooltipContent>
-</Tooltip>
-
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button size="sm" variant="outline">
-      Copy
-    </Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <div className="flex items-center gap-2">
-      Copy Selection{" "}
-      <KbdGroup>
-        <Kbd>⌘</Kbd>
-        <Kbd>C</Kbd>
-      </KbdGroup>
-    </div>
-  </TooltipContent>
-</Tooltip>
-```
-
-### En Input Group
-
-```tsx
-import { InputGroup, InputGroupInput, InputGroupAddon } from "@adamosuiteservices/ui/input-group";
-import { Search } from "lucide-react";
-
-<InputGroup>
-  <InputGroupInput placeholder="Search..." />
-  <InputGroupAddon>
-    <Search />
-  </InputGroupAddon>
-  <InputGroupAddon align="inline-end">
-    <Kbd>⌘</Kbd>
-    <Kbd>K</Kbd>
-  </InputGroupAddon>
-</InputGroup>
-
-<InputGroup>
-  <InputGroupInput placeholder="Quick actions..." />
-  <InputGroupAddon align="inline-end">
-    <KbdGroup>
-      <Kbd>Ctrl</Kbd>
-      <Kbd>Space</Kbd>
-    </KbdGroup>
-  </InputGroupAddon>
-</InputGroup>
-```
-
-### Teclas de Navegación
-
-```tsx
-<div className="flex flex-col gap-2">
-  <h4 className="text-sm font-medium">Arrow Keys</h4>
-  <div className="flex gap-2">
-    <Kbd>↑</Kbd>
-    <Kbd>↓</Kbd>
-    <Kbd>←</Kbd>
-    <Kbd>→</Kbd>
-  </div>
-</div>
-
-<div className="flex flex-col gap-2">
-  <h4 className="text-sm font-medium">Special Keys</h4>
-  <div className="flex gap-2">
-    <Kbd>Tab</Kbd>
-    <Kbd>Space</Kbd>
-    <Kbd>Enter</Kbd>
-  </div>
-</div>
-
-<div className="flex flex-col gap-2">
-  <h4 className="text-sm font-medium">Function Keys</h4>
-  <div className="flex gap-2">
-    <Kbd>F1</Kbd>
-    <Kbd>F2</Kbd>
-    <Kbd>F12</Kbd>
-  </div>
-</div>
-```
-
-### Atajos Complejos con Descripciones
-
-```tsx
-<div className="flex flex-col gap-4">
-  <div className="flex flex-col gap-2">
-    <h4 className="text-sm font-medium">Editor Shortcuts</h4>
-    <div className="flex flex-col gap-2 text-sm">
-      <div className="flex items-center justify-between">
-        <span>Duplicate line</span>
-        <KbdGroup>
-          <Kbd>Shift</Kbd>
-          <Kbd>Alt</Kbd>
-          <Kbd>↓</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span>Multi-cursor</span>
-        <KbdGroup>
-          <Kbd>Ctrl</Kbd>
-          <Kbd>Alt</Kbd>
-          <Kbd>↓</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span>Go to definition</span>
-        <KbdGroup>
-          <Kbd>F12</Kbd>
-        </KbdGroup>
-      </div>
-    </div>
-  </div>
-
-  <div className="flex flex-col gap-2">
-    <h4 className="text-sm font-medium">Browser Shortcuts</h4>
-    <div className="flex flex-col gap-2 text-sm">
-      <div className="flex items-center justify-between">
-        <span>New tab</span>
-        <KbdGroup>
-          <Kbd>Ctrl</Kbd>
-          <Kbd>T</Kbd>
-        </KbdGroup>
-      </div>
-      <div className="flex items-center justify-between">
-        <span>Hard refresh</span>
-        <KbdGroup>
-          <Kbd>Ctrl</Kbd>
-          <Kbd>Shift</Kbd>
-          <Kbd>R</Kbd>
-        </KbdGroup>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-### Con Iconos
-
-```tsx
-import { Save, Copy, Settings } from "lucide-react";
-
-<div className="flex items-center gap-4">
-  <Kbd><Save className="size-3" /></Kbd>
-  <Kbd><Copy className="size-3" /></Kbd>
-  <Kbd><Settings className="size-3" /></Kbd>
-</div>
-
-<div className="flex items-center gap-2">
-  <span className="text-sm">Quick actions:</span>
-  <KbdGroup>
-    <Kbd><Save className="size-3" /></Kbd>
-    <Kbd>S</Kbd>
-  </KbdGroup>
-  <KbdGroup>
-    <Kbd><Copy className="size-3" /></Kbd>
-    <Kbd>C</Kbd>
-  </KbdGroup>
-</div>
-```
-
-### En Contexto (Cards)
-
-```tsx
-<div className="rounded-lg border p-4">
-  <h3 className="text-lg font-semibold mb-2">Command Palette</h3>
-  <p className="text-sm text-muted-foreground mb-4">
-    Quickly access commands and navigate your workspace.
-  </p>
-  <div className="flex items-center gap-2 text-sm">
-    <span>Open with</span>
-    <KbdGroup>
-      <Kbd>⌘</Kbd>
-      <Kbd>K</Kbd>
-    </KbdGroup>
-    <span>or</span>
-    <KbdGroup>
-      <Kbd>Ctrl</Kbd>
-      <Kbd>Shift</Kbd>
-      <Kbd>P</Kbd>
-    </KbdGroup>
-  </div>
-</div>
-```
-
-## Casos de Uso Comunes
-
-**Documentation**: Documentar atajos de teclado en docs  
-**Tooltips**: Mostrar shortcuts en tooltips de botones  
-**Help sections**: Secciones de ayuda con atajos  
-**Command palettes**: Mostrar shortcuts junto a comandos  
-**Onboarding**: Tutoriales con atajos de teclado  
-**Input hints**: Hints en inputs (ej: "Press ⌘K to search")
-
-## Estilos Base
-
-### Estilos Kbd
-
-- **Background**: `bg-muted`
-- **Color**: `text-muted-foreground`
-- **Height**: `h-5` (~20px)
-- **Min Width**: `min-w-5` (square mínimo)
-- **Padding**: `px-1`
-- **Font**: `font-sans text-xs font-medium`
-- **Border**: `rounded-sm`
-- **Select**: `select-none`, `pointer-events-none`
-- **SVG**: Auto-sized to `size-3` si no tiene clase
-
-### Estilos KbdGroup
-
-- **Display**: `inline-flex`
-- **Align**: `items-center`
-- **Gap**: `gap-1`
-
-### Tooltip Context
-
-Cuando está dentro de Tooltip:
-
-- **Background**: `bg-background/20`
-- **Color**: `text-background`
-- **Dark mode**: `dark:bg-background/10`
-
-## Símbolos Comunes
-
-### Modificadores Mac
-
-- `⌘` - Command
-- `⇧` - Shift
-- `⌥` - Option/Alt
-- `⌃` - Control
-- `⏎` - Return
-- `⌫` - Delete
-
-### Flechas
-
-- `↑` - Up
-- `↓` - Down
-- `←` - Left
-- `→` - Right
-
-### Otros
-
-- `⎵` - Space
-- `⇥` - Tab
-- `⎋` - Escape
-
-## Accesibilidad
-
-- ✅ **Semantic HTML**: Usa `<kbd>` nativo (semántico)
-- ✅ **Non-interactive**: `pointer-events-none` por defecto
-- ✅ **Screen readers**: Texto es leído normalmente
-- ✅ **No focus**: No recibe focus (solo visual)
-- ⚠️ **Context**: Siempre acompaña con texto descriptivo
-
-## Notas de Implementación
-
-- **HTML nativo**: Basado en `<kbd>` elemento nativo
-- **KbdGroup**: Es un `<kbd>` contenedor, no `<div>` (semántico)
-- **Auto-sizing**: SVGs se redimensionan automáticamente a `size-3`
-- **Tooltip-aware**: Estilos especiales cuando está dentro de Tooltip
-- **Non-interactive**: No recibe eventos de pointer por defecto
-- **Select-none**: No se puede seleccionar texto
-- **Monospace**: Usa `font-sans` no monospace
-- **Min square**: `min-w-5` asegura que single chars sean cuadrados
-
-## KbdGroup vs Multiple Kbd
-
-```tsx
-{
-  /* Con KbdGroup - semanticamente agrupados */
-}
-<KbdGroup>
-  <Kbd>Ctrl</Kbd>
-  <Kbd>K</Kbd>
-</KbdGroup>;
-
-{
-  /* Sin KbdGroup - separados */
-}
-<span>
-  <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
-</span>;
-```
-
-**Usa KbdGroup cuando**: Las teclas se presionan simultáneamente (shortcut)  
-**No uses KbdGroup cuando**: Las teclas son alternativas o secuenciales
-
-## Troubleshooting
-
-**Kbd no se ve**: Verifica que tenga contenido (texto o icono)  
-**Tamaño inconsistente**: Usa `min-w-5` para asegurar cuadrado en single chars  
-**Icono muy grande**: Los SVGs se redimensionan automáticamente a `size-3`  
-**No se ve en Tooltip**: Los estilos de Tooltip aplican automáticamente  
-**Spacing inconsistente**: KbdGroup tiene `gap-1`, ajusta con className si necesario  
-**Seleccionable**: Verifica que tenga `select-none` aplicado  
-**Background no se ve**: Verifica tema y color `bg-muted`  
-**Muy alto**: Altura fija `h-5`, no cambies sin ajustar padding
-
-## Referencias
-
-- **MDN Kbd**: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd>
-- **Unicode Symbols**: <https://www.unicode.org/charts/>
+# Kbd
+
+Representa teclas del teclado con estilo visual. Ideal para documentación, tooltips, atajos de teclado y ayuda contextual.
+
+## Descripción
+
+El componente `Kbd` representa teclas del teclado con estilo visual.
+
+## Importación
+
+```typescript
+import { Kbd, KbdGroup } from "@adamosuiteservices/ui/kbd";
+```
+
+## Anatomía
+
+```tsx
+<p>
+  Press <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy
+</p>
+
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+
+**Componentes**: 2 (Kbd, KbdGroup)
+
+## Props
+
+### Kbd
+
+| Prop        | Tipo     | Descripción                        |
+| ----------- | -------- | ---------------------------------- |
+| `className` | `string` | Clases CSS adicionales             |
+| ...props    | -        | Todas las props nativas de `<kbd>` |
+
+### KbdGroup
+
+| Prop        | Tipo     | Descripción                        |
+| ----------- | -------- | ---------------------------------- |
+| `className` | `string` | Clases CSS adicionales             |
+| ...props    | -        | Todas las props nativas de `<div>` |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<div className="flex items-center gap-4">
+  <Kbd>Ctrl</Kbd>
+  <Kbd>⌘</Kbd>
+  <Kbd>⇧</Kbd>
+  <Kbd>⌥</Kbd>
+  <Kbd>⌃</Kbd>
+</div>
+```
+
+### Con Modificadores
+
+```tsx
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <span>+</span>
+  <Kbd>B</Kbd>
+</KbdGroup>
+
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <span>+</span>
+  <Kbd>Shift</Kbd>
+  <span>+</span>
+  <Kbd>P</Kbd>
+</KbdGroup>
+```
+
+### Inline con Texto
+
+```tsx
+<p className="text-sm text-muted-foreground">
+  Use{" "}
+  <KbdGroup>
+    <Kbd>Ctrl</Kbd>
+    <Kbd>K</Kbd>
+  </KbdGroup>{" "}
+  to open the command palette
+</p>
+
+<p className="text-sm">
+  Press{" "}
+  <KbdGroup>
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </KbdGroup>{" "}
+  to search
+</p>
+```
+
+### En Botones
+
+```tsx
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Button variant="outline" size="sm" className="pr-2">
+  Accept <Kbd>⏎</Kbd>
+</Button>
+
+<Button variant="outline" size="sm" className="pr-2">
+  Cancel <Kbd>Esc</Kbd>
+</Button>
+
+<Button variant="outline" size="sm" className="pr-2">
+  Save <Kbd>⌘</Kbd><Kbd>S</Kbd>
+</Button>
+```
+
+### En Tooltips
+
+```tsx
+import { Tooltip, TooltipContent, TooltipTrigger } from "@adamosuiteservices/ui/tooltip";
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button size="sm" variant="outline">
+      Save
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <div className="flex items-center gap-2">
+      Save Changes <Kbd>S</Kbd>
+    </div>
+  </TooltipContent>
+</Tooltip>
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button size="sm" variant="outline">
+      Copy
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <div className="flex items-center gap-2">
+      Copy Selection{" "}
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>C</Kbd>
+      </KbdGroup>
+    </div>
+  </TooltipContent>
+</Tooltip>
+```
+
+### En Input Group
+
+```tsx
+import { InputGroup, InputGroupInput, InputGroupAddon } from "@adamosuiteservices/ui/input-group";
+import { Search } from "lucide-react";
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon>
+    <Search />
+  </InputGroupAddon>
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </InputGroupAddon>
+</InputGroup>
+
+<InputGroup>
+  <InputGroupInput placeholder="Quick actions..." />
+  <InputGroupAddon align="inline-end">
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>Space</Kbd>
+    </KbdGroup>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+### Teclas de Navegación
+
+```tsx
+<div className="flex flex-col gap-2">
+  <h4 className="text-sm font-medium">Arrow Keys</h4>
+  <div className="flex gap-2">
+    <Kbd>↑</Kbd>
+    <Kbd>↓</Kbd>
+    <Kbd>←</Kbd>
+    <Kbd>→</Kbd>
+  </div>
+</div>
+
+<div className="flex flex-col gap-2">
+  <h4 className="text-sm font-medium">Special Keys</h4>
+  <div className="flex gap-2">
+    <Kbd>Tab</Kbd>
+    <Kbd>Space</Kbd>
+    <Kbd>Enter</Kbd>
+  </div>
+</div>
+
+<div className="flex flex-col gap-2">
+  <h4 className="text-sm font-medium">Function Keys</h4>
+  <div className="flex gap-2">
+    <Kbd>F1</Kbd>
+    <Kbd>F2</Kbd>
+    <Kbd>F12</Kbd>
+  </div>
+</div>
+```
+
+### Atajos Complejos con Descripciones
+
+```tsx
+<div className="flex flex-col gap-4">
+  <div className="flex flex-col gap-2">
+    <h4 className="text-sm font-medium">Editor Shortcuts</h4>
+    <div className="flex flex-col gap-2 text-sm">
+      <div className="flex items-center justify-between">
+        <span>Duplicate line</span>
+        <KbdGroup>
+          <Kbd>Shift</Kbd>
+          <Kbd>Alt</Kbd>
+          <Kbd>↓</Kbd>
+        </KbdGroup>
+      </div>
+      <div className="flex items-center justify-between">
+        <span>Multi-cursor</span>
+        <KbdGroup>
+          <Kbd>Ctrl</Kbd>
+          <Kbd>Alt</Kbd>
+          <Kbd>↓</Kbd>
+        </KbdGroup>
+      </div>
+      <div className="flex items-center justify-between">
+        <span>Go to definition</span>
+        <KbdGroup>
+          <Kbd>F12</Kbd>
+        </KbdGroup>
+      </div>
+    </div>
+  </div>
+
+  <div className="flex flex-col gap-2">
+    <h4 className="text-sm font-medium">Browser Shortcuts</h4>
+    <div className="flex flex-col gap-2 text-sm">
+      <div className="flex items-center justify-between">
+        <span>New tab</span>
+        <KbdGroup>
+          <Kbd>Ctrl</Kbd>
+          <Kbd>T</Kbd>
+        </KbdGroup>
+      </div>
+      <div className="flex items-center justify-between">
+        <span>Hard refresh</span>
+        <KbdGroup>
+          <Kbd>Ctrl</Kbd>
+          <Kbd>Shift</Kbd>
+          <Kbd>R</Kbd>
+        </KbdGroup>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Con Iconos
+
+```tsx
+import { Save, Copy, Settings } from "lucide-react";
+
+<div className="flex items-center gap-4">
+  <Kbd><Save className="size-3" /></Kbd>
+  <Kbd><Copy className="size-3" /></Kbd>
+  <Kbd><Settings className="size-3" /></Kbd>
+</div>
+
+<div className="flex items-center gap-2">
+  <span className="text-sm">Quick actions:</span>
+  <KbdGroup>
+    <Kbd><Save className="size-3" /></Kbd>
+    <Kbd>S</Kbd>
+  </KbdGroup>
+  <KbdGroup>
+    <Kbd><Copy className="size-3" /></Kbd>
+    <Kbd>C</Kbd>
+  </KbdGroup>
+</div>
+```
+
+### En Contexto (Cards)
+
+```tsx
+<div className="rounded-lg border p-4">
+  <h3 className="text-lg font-semibold mb-2">Command Palette</h3>
+  <p className="text-sm text-muted-foreground mb-4">
+    Quickly access commands and navigate your workspace.
+  </p>
+  <div className="flex items-center gap-2 text-sm">
+    <span>Open with</span>
+    <KbdGroup>
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>
+    <span>or</span>
+    <KbdGroup>
+      <Kbd>Ctrl</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>P</Kbd>
+    </KbdGroup>
+  </div>
+</div>
+```
+
+## Casos de Uso Comunes
+
+**Documentation**: Documentar atajos de teclado en docs  
+**Tooltips**: Mostrar shortcuts en tooltips de botones  
+**Help sections**: Secciones de ayuda con atajos  
+**Command palettes**: Mostrar shortcuts junto a comandos  
+**Onboarding**: Tutoriales con atajos de teclado  
+**Input hints**: Hints en inputs (ej: "Press ⌘K to search")
+
+## Estilos Base
+
+### Estilos Kbd
+
+- **Background**: `bg-muted`
+- **Color**: `text-muted-foreground`
+- **Height**: `h-5` (~20px)
+- **Min Width**: `min-w-5` (square mínimo)
+- **Padding**: `px-1`
+- **Font**: `font-sans text-xs font-medium`
+- **Border**: `rounded-sm`
+- **Select**: `select-none`, `pointer-events-none`
+- **SVG**: Auto-sized to `size-3` si no tiene clase
+
+### Estilos KbdGroup
+
+- **Display**: `inline-flex`
+- **Align**: `items-center`
+- **Gap**: `gap-1`
+
+### Tooltip Context
+
+Cuando está dentro de Tooltip:
+
+- **Background**: `bg-background/20`
+- **Color**: `text-background`
+- **Dark mode**: `dark:bg-background/10`
+
+## Símbolos Comunes
+
+### Modificadores Mac
+
+- `⌘` - Command
+- `⇧` - Shift
+- `⌥` - Option/Alt
+- `⌃` - Control
+- `⏎` - Return
+- `⌫` - Delete
+
+### Flechas
+
+- `↑` - Up
+- `↓` - Down
+- `←` - Left
+- `→` - Right
+
+### Otros
+
+- `⎵` - Space
+- `⇥` - Tab
+- `⎋` - Escape
+
+## Accesibilidad
+
+- ✅ **Semantic HTML**: Usa `<kbd>` nativo (semántico)
+- ✅ **Non-interactive**: `pointer-events-none` por defecto
+- ✅ **Screen readers**: Texto es leído normalmente
+- ✅ **No focus**: No recibe focus (solo visual)
+- ⚠️ **Context**: Siempre acompaña con texto descriptivo
+
+## Notas de Implementación
+
+- **HTML nativo**: Basado en `<kbd>` elemento nativo
+- **KbdGroup**: Es un `<kbd>` contenedor, no `<div>` (semántico)
+- **Auto-sizing**: SVGs se redimensionan automáticamente a `size-3`
+- **Tooltip-aware**: Estilos especiales cuando está dentro de Tooltip
+- **Non-interactive**: No recibe eventos de pointer por defecto
+- **Select-none**: No se puede seleccionar texto
+- **Monospace**: Usa `font-sans` no monospace
+- **Min square**: `min-w-5` asegura que single chars sean cuadrados
+
+## KbdGroup vs Multiple Kbd
+
+```tsx
+{
+  /* Con KbdGroup - semanticamente agrupados */
+}
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>;
+
+{
+  /* Sin KbdGroup - separados */
+}
+<span>
+  <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>
+</span>;
+```
+
+**Usa KbdGroup cuando**: Las teclas se presionan simultáneamente (shortcut)  
+**No uses KbdGroup cuando**: Las teclas son alternativas o secuenciales
+
+## Troubleshooting
+
+**Kbd no se ve**: Verifica que tenga contenido (texto o icono)  
+**Tamaño inconsistente**: Usa `min-w-5` para asegurar cuadrado en single chars  
+**Icono muy grande**: Los SVGs se redimensionan automáticamente a `size-3`  
+**No se ve en Tooltip**: Los estilos de Tooltip aplican automáticamente  
+**Spacing inconsistente**: KbdGroup tiene `gap-1`, ajusta con className si necesario  
+**Seleccionable**: Verifica que tenga `select-none` aplicado  
+**Background no se ve**: Verifica tema y color `bg-muted`  
+**Muy alto**: Altura fija `h-5`, no cambies sin ajustar padding
+
+## Referencias
+
+- **MDN Kbd**: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd>
+- **Unicode Symbols**: <https://www.unicode.org/charts/>