@lexibase/rdx-ui 3.1.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "type": "module",
   "engines": {
     "node": "^22.18.0 || ^24.11.0"
@@ -37,7 +37,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "@lexibase/rdx-types": "1.1.1"
+    "@lexibase/rdx-types": "2.0.0"
   },
   "peerDependencies": {
     "next": "^16.4.2",

package/src/components/docs-sidebar.tsx

@@ -62,9 +62,9 @@ export function DocsSidebar({
       {categories.map((category, index) => (
         <div
           key={`${index}:${category.title}`}
-          className="flex flex-col gap-0.5 mb-3 first:mt-4"
+          className="flex min-w-0 flex-col gap-0.5 mb-3 first:mt-4"
         >
-          <p className="text-xs text-ring font-semibold uppercase mb-1">
+          <p className="text-xs text-ring font-semibold uppercase mb-1 [overflow-wrap:anywhere]">
             {category.title}
           </p>
           {category.links.map((link) => (
@@ -86,7 +86,7 @@ export function DocsSidebar({
               }
               onClick={() => actions.current?.close()}
               aria-current={pathname === link.href ? 'page' : undefined}
-              className={`justify-start text-sm ${pathname === link.href ? 'text-accent-foreground' : 'text-primary'}`}
+              className={`h-auto min-h-8 w-full min-w-0 justify-start whitespace-normal py-1.5 text-left text-sm [overflow-wrap:anywhere] ${pathname === link.href ? 'text-accent-foreground' : 'text-primary'}`}
             >
               {link.label}
             </Button>

package/src/components/kbd.tsx

@@ -16,10 +16,17 @@ function Kbd({ className, ...props }: ComponentProps<'kbd'>) {
   )
 }
 
-function KbdGroup({ className, ...props }: ComponentProps<'div'>) {
+function KbdGroup({ className, role, ...props }: ComponentProps<'div'>) {
   return (
     <kbd
       data-slot="kbd-group"
+      role={
+        role ??
+        (props['aria-label'] !== undefined ||
+        props['aria-labelledby'] !== undefined
+          ? 'group'
+          : undefined)
+      }
       className={cn('inline-flex items-center gap-1', className)}
       {...props}
     />

package/src/components/mdx-components.tsx

@@ -29,6 +29,7 @@ import {
 } from './code-block'
 import { MdxCodeBlock } from './mdx-code-block'
 import { Kbd, KbdGroup } from './kbd'
+import { MdxKeyboardShortcut } from './mdx-keyboard-shortcut'
 import {
   Table,
   TableBody,
@@ -154,6 +155,7 @@ export const mdxComponents = {
   CodeBlockTitle,
   Kbd,
   KbdGroup,
+  KeyboardShortcut: MdxKeyboardShortcut,
   Table,
   TableHeader,
   TableBody,
@@ -187,6 +189,9 @@ export const mdxComponents = {
 export function getMdxComponents(lang?: string) {
   return {
     ...mdxComponents,
+    KeyboardShortcut: (props: { children?: ReactNode }) => (
+      <MdxKeyboardShortcut {...props} lang={lang} />
+    ),
     pre: (props: ComponentProps<'pre'>) => (
       <MdxCodeBlock {...props} lang={lang} />
     ),

package/src/components/mdx-keyboard-shortcut.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+
+import { getMessages, type InterfaceMessages } from '../lib/i18n'
+import { Kbd, KbdGroup } from './kbd'
+
+const keyNames: Record<string, keyof InterfaceMessages> = {
+  ctrl: 'keyboardControl',
+  control: 'keyboardControl',
+  '⌃': 'keyboardControl',
+  shift: 'keyboardShift',
+  '⇧': 'keyboardShift',
+  alt: 'keyboardAlt',
+  cmd: 'keyboardCommand',
+  command: 'keyboardCommand',
+  '⌘': 'keyboardCommand',
+  option: 'keyboardOption',
+  '⌥': 'keyboardOption',
+  esc: 'keyboardEscape',
+  escape: 'keyboardEscape',
+  '⎋': 'keyboardEscape',
+  enter: 'keyboardEnter',
+  return: 'keyboardEnter',
+  '↵': 'keyboardEnter',
+  '⏎': 'keyboardEnter',
+  space: 'keyboardSpace',
+  spacebar: 'keyboardSpace',
+  '+': 'keyboardPlus',
+  arrowup: 'keyboardArrowUp',
+  '↑': 'keyboardArrowUp',
+  arrowdown: 'keyboardArrowDown',
+  '↓': 'keyboardArrowDown',
+  arrowleft: 'keyboardArrowLeft',
+  '←': 'keyboardArrowLeft',
+  arrowright: 'keyboardArrowRight',
+  '→': 'keyboardArrowRight',
+}
+
+/** Markdown adapter: preserve shadcn visuals, expose one readable text alternative. */
+export function MdxKeyboardShortcut({
+  children,
+  lang,
+}: {
+  children?: ReactNode
+  lang?: string
+}) {
+  if (typeof children !== 'string') return <Kbd>{children}</Kbd>
+  const keys = children
+    .trim()
+    .split(/\s+\+\s+/)
+    .map((key) => key.trim())
+  if (keys.length < 2 || keys.some((key) => !key)) return <Kbd>{children}</Kbd>
+  const messages = getMessages(lang)
+  const description = keys
+    .map((key) => {
+      const name = Object.hasOwn(keyNames, key.toLowerCase())
+        ? keyNames[key.toLowerCase()]
+        : undefined
+      return name ? messages[name] : key
+    })
+    .join(messages.keyboardJoiner)
+  return (
+    <span data-rdx-kbd-value={children} className="inline-flex align-baseline">
+      <span className="sr-only select-none">{description}</span>
+      <KbdGroup aria-hidden="true">
+        {keys.map((key, index) => (
+          <span key={index} className="inline-flex items-center gap-1">
+            {index > 0 && <span>+</span>}
+            <Kbd>{key}</Kbd>
+          </span>
+        ))}
+      </KbdGroup>
+    </span>
+  )
+}

package/src/components/skip-link.tsx

@@ -0,0 +1,10 @@
+import { getMessages } from '../lib/i18n'
+
+/** First keyboard stop, shared by the website and generated documentation. */
+export function SkipLink({ lang }: { lang?: string }) {
+  return (
+    <a className="rdx-skip-link" href="#rdx-main">
+      {getMessages(lang).skipContent}
+    </a>
+  )
+}

package/src/components/tabs.tsx

@@ -25,6 +25,7 @@ function panelText(node: Node): string {
     )
   )
     return ''
+  if (node.dataset.rdxKbdValue !== undefined) return node.dataset.rdxKbdValue
   if (node.matches('[data-rdx-code-block], [data-slot="code-block"]')) {
     const pre = node.querySelector('pre')
     const lines = pre?.querySelectorAll('[data-slot="code-block-line-content"]')

package/src/lib/i18n.ts

@@ -1,5 +1,19 @@
 /** Shared labels only: document content and author-provided names stay untouched. */
 const en = {
+  keyboardJoiner: ' plus ',
+  keyboardControl: 'Control',
+  keyboardShift: 'Shift',
+  keyboardAlt: 'Alt',
+  keyboardCommand: 'Command',
+  keyboardOption: 'Option',
+  keyboardEscape: 'Escape',
+  keyboardEnter: 'Enter',
+  keyboardSpace: 'Space',
+  keyboardPlus: 'Plus',
+  keyboardArrowUp: 'Up arrow',
+  keyboardArrowDown: 'Down arrow',
+  keyboardArrowLeft: 'Left arrow',
+  keyboardArrowRight: 'Right arrow',
   skipContent: 'Skip to content',
   mainNavigation: 'Main navigation',
   docs: 'Docs',
@@ -79,6 +93,20 @@ export type InterfaceMessages = { [Key in keyof typeof en]: string }
 export type InterfaceLocale = 'en' | 'pt-BR'
 
 const ptBR = {
+  keyboardJoiner: ' mais ',
+  keyboardControl: 'Control',
+  keyboardShift: 'Shift',
+  keyboardAlt: 'Alt',
+  keyboardCommand: 'Command',
+  keyboardOption: 'Option',
+  keyboardEscape: 'Escape',
+  keyboardEnter: 'Enter',
+  keyboardSpace: 'Espaço',
+  keyboardPlus: 'Sinal de mais',
+  keyboardArrowUp: 'Seta para cima',
+  keyboardArrowDown: 'Seta para baixo',
+  keyboardArrowLeft: 'Seta para a esquerda',
+  keyboardArrowRight: 'Seta para a direita',
   skipContent: 'Ir para o conteúdo',
   mainNavigation: 'Navegação principal',
   docs: 'Docs',

package/src/styles/globals.css

@@ -6,6 +6,28 @@
 
 @custom-variant dark (&:is(.dark *));
 
+.rdx-skip-link {
+  position: fixed;
+  top: 1rem;
+  inset-inline-start: 1rem;
+  z-index: 100;
+  max-width: calc(100vw - 2rem);
+  transform: translateY(calc(-100% - 2rem));
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  color: var(--foreground);
+  font-size: 0.875rem;
+  font-weight: 500;
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+
+.rdx-skip-link:focus {
+  transform: translateY(0);
+}
+
 :root {
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);