@lexibase/rdx-ui 1.0.0 → 2.0.0

package/src/components/mdx-components.tsx

@@ -1,3 +1,4 @@
+import { getMessages } from '../lib/i18n'
 import type { ComponentProps } from 'react'
 
 import { cn } from '../lib/utils'
@@ -10,9 +11,37 @@ import {
 import { Blockquote } from './blockquote'
 import { Callout } from './callout'
 import { CodeBlock } from './code-block'
+import { Kbd, KbdGroup } from './kbd'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import { Separator } from '@lexibase/rdx-ui/components/separator'
 
+function MdxTable({ lang, className, ...props }: ComponentProps<'table'>) {
+  return (
+    <Table
+      containerProps={{
+        'data-slot': 'mdx-table-scroll',
+        role: 'region',
+        'aria-label': getMessages(lang).table,
+        tabIndex: 0,
+        className:
+          'my-6 min-w-0 max-w-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+      }}
+      className={className}
+      {...props}
+    />
+  )
+}
+
 export const mdxComponents = {
   h1: ({ className, ...props }: ComponentProps<'h1'>) => (
     <h1 className={cn('text-4xl font-bold my-6', className)} {...props} />
@@ -84,42 +113,26 @@ export const mdxComponents = {
       {...props}
     />
   ),
-  table: ({ className, ...props }: ComponentProps<'table'>) => (
-    <div
-      data-slot="mdx-table-scroll"
-      role="region"
-      aria-label="Table"
-      tabIndex={0}
-      className="my-6 min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-    >
-      <table
-        className={cn(
-          'w-full border-separate border-spacing-0 text-sm [&_tbody>tr]:transition-colors motion-reduce:[&_tbody>tr]:transition-none [&_tbody>tr:nth-child(even)]:bg-muted/20 [&_tbody>tr:hover]:bg-muted/40 [&_tbody>tr:last-child>td]:border-b-0',
-          className
-        )}
-        {...props}
-      />
-    </div>
-  ),
+  table: MdxTable,
+  thead: TableHeader,
+  tbody: TableBody,
+  tfoot: TableFooter,
+  tr: TableRow,
+  caption: TableCaption,
   th: ({ className, scope = 'col', ...props }: ComponentProps<'th'>) => (
-    <th
-      scope={scope}
-      className={cn(
-        'border-b border-r border-border bg-muted/40 px-4 py-3 text-left text-xs font-semibold tracking-wide text-foreground/90 last:border-r-0',
-        className
-      )}
-      {...props}
-    />
-  ),
-  td: ({ className, ...props }: ComponentProps<'td'>) => (
-    <td
-      className={cn(
-        'min-w-40 border-b border-r border-border/70 px-4 py-3 align-top leading-6 last:border-r-0',
-        className
-      )}
-      {...props}
-    />
-  ),
+    <TableHead scope={scope} className={className} {...props} />
+  ),
+  td: TableCell,
+  Kbd,
+  KbdGroup,
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
   Callout,
   Accordion,
   AccordionItem,
@@ -140,3 +153,14 @@ export const mdxComponents = {
     />
   ),
 }
+
+/** Bind server-rendered MDX labels to the same locale as interactive components. */
+export function getMdxComponents(lang?: string) {
+  return {
+    ...mdxComponents,
+    pre: (props: ComponentProps<'pre'>) => <CodeBlock {...props} lang={lang} />,
+    table: (props: ComponentProps<'table'>) => (
+      <MdxTable {...props} lang={lang} />
+    ),
+  }
+}

package/src/components/mode-toggle.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { SunMoon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { Button } from '@lexibase/rdx-ui/components/button'
 
 export function ModeToggle() {
+  const messages = useMessages()
   const { theme, setTheme } = useTheme()
 
   const toggleTheme = () => {
@@ -17,10 +20,10 @@ export function ModeToggle() {
       size="icon"
       variant="ghost"
       onClick={toggleTheme}
-      aria-label="Mode Toggle"
+      aria-label={messages.modeToggle}
     >
       <SunMoon className="h-[1.2rem] w-[1.2rem]" />
-      <span className="sr-only">colorTheme</span>
+      <span className="sr-only">{messages.modeToggle}</span>
     </Button>
   )
 }

package/src/components/navbar.tsx

@@ -1,13 +1,15 @@
+import { getMessages } from '../lib/i18n'
 import type { ReactNode } from 'react'
 import { Github } from 'lucide-react'
 
-import { ButtonLink } from './button-link'
+import { Button } from './button'
 import { Logo } from './logo'
 import { Separator } from './separator'
 import { ModeToggle } from './mode-toggle'
 
 /** Shared composition extracted from apps/web/components/layout/Navbar. */
 export function Navbar({
+  lang,
   title = '',
   siteTitle = 'RDX',
   logo = <Logo className="size-5" />,
@@ -19,6 +21,7 @@ export function Navbar({
   github,
   showToggleMode = false,
 }: {
+  lang?: string
   title?: string
   siteTitle?: string
   logo?: ReactNode
@@ -30,14 +33,15 @@ export function Navbar({
   github?: { visible: boolean; url: string }
   showToggleMode?: boolean
 }) {
+  const messages = getMessages(lang)
   return (
     <nav
       data-rdx-navbar
-      aria-label="Main navigation"
+      aria-label={messages.mainNavigation}
       className="w-full flex flex-wrap shrink-0 items-center justify-between px-6 py-2 border-b border-border gap-y-2"
     >
       <div className="flex items-center gap-1">
-        <ButtonLink
+        <Button
           variant="ghost"
           size={title === '' ? 'icon' : 'default'}
           aria-label={siteTitle}
@@ -46,20 +50,20 @@ export function Navbar({
         >
           {logo}
           {title !== '' && <span>{title}</span>}
-        </ButtonLink>
+        </Button>
       </div>
       <div className="flex items-center gap-x-1 md:gap-x-2 h-4">
         {search}
         {versionMenu}
         {docsLink ?? (
-          <ButtonLink variant="link" size="sm" href={docsHref}>
-            Docs
-          </ButtonLink>
+          <Button variant="link" size="sm" href={docsHref}>
+            {messages.docs}
+          </Button>
         )}
         {github?.visible && github.url && (
           <>
             <Separator orientation="vertical" />
-            <ButtonLink
+            <Button
               variant="ghost"
               size="icon"
               title="GitHub"
@@ -71,7 +75,7 @@ export function Navbar({
             >
               <Github className="h-[1.2rem] w-[1.2rem]" />
               <span className="sr-only">GitHub</span>
-            </ButtonLink>
+            </Button>
           </>
         )}
         {showToggleMode && (

package/src/components/not-found.tsx

@@ -0,0 +1,36 @@
+import { getMessages } from '../lib/i18n'
+import { Button } from './button'
+
+/** The development website's 404 layout, shared with generated projects. */
+export function NotFound({
+  href = '/docs',
+  lang,
+}: {
+  href?: string
+  lang?: string
+}) {
+  const messages = getMessages(lang)
+
+  return (
+    <main
+      id="rdx-main"
+      data-rdx-not-found
+      tabIndex={-1}
+      className="bg-transparent text-primary h-full min-h-0 w-full flex flex-1 items-center justify-center cursor-default p-7 outline-none"
+    >
+      <div className="w-full md:w-1/2">
+        <h1 className="text-9xl font-bold font-mono text-center">404</h1>
+        <article className="flex flex-col gap-y-5">
+          <p className="text-3xl font-bold font-mono text-center">
+            {messages.notFound}
+          </p>
+          <p className="text-sm">{messages.notFoundDescription}</p>
+          <p className="text-sm">{messages.brokenLink}</p>
+          <Button variant="primary" href={href}>
+            {messages.backToDocs}
+          </Button>
+        </article>
+      </div>
+    </main>
+  )
+}

package/src/components/table.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import type { ComponentProps } from 'react'
+
+import { cn } from '../lib/utils'
+
+// shadcn/ui base-nova Table; see THIRD_PARTY_NOTICES.md for the upstream MIT license.
+type TableProps = ComponentProps<'table'> & {
+  /** Configure the scroll container for documentation layout and keyboard access. */
+  containerProps?: ComponentProps<'div'> & { 'data-slot'?: string }
+}
+
+function Table({ className, containerProps, ...props }: TableProps) {
+  const { className: containerClassName, ...containerAttributes } =
+    containerProps ?? {}
+  return (
+    <div
+      data-slot="table-container"
+      {...containerAttributes}
+      className={cn('relative w-full overflow-x-auto', containerClassName)}
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({ className, ...props }: ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/tabs.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
 import { Check, Copy } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
@@ -43,6 +45,7 @@ function panelText(node: Node): string {
 }
 
 function CopyTabButton() {
+  const messages = useMessages()
   const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
   const pending = useRef(false)
   const mounted = useRef(false)
@@ -92,13 +95,13 @@ function CopyTabButton() {
         type="button"
         variant="ghost"
         size="icon"
-        aria-label="Copy active tab"
+        aria-label={messages.copyTab}
         title={
           status === 'error'
-            ? 'Could not copy. Select the tab content and copy it manually.'
+            ? messages.copyTabError
             : status === 'copied'
-              ? 'Copied!'
-              : 'Copy active tab'
+              ? messages.copied
+              : messages.copyTab
         }
         data-status={status}
         className="mr-1.5 size-7 shrink-0 text-muted-foreground hover:text-foreground data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:text-amber-600 [&>svg]:size-3.5"
@@ -113,9 +116,9 @@ function CopyTabButton() {
         className="sr-only"
       >
         {status === 'copied'
-          ? 'Tab content copied to clipboard.'
+          ? messages.tabCopied
           : status === 'error'
-            ? 'Could not copy. Select the tab content and copy it manually.'
+            ? messages.copyTabError
             : ''}
       </span>
     </>
@@ -172,7 +175,7 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
     <TabsPrimitive.Panel
       data-slot="tabs-content"
       className={mergeStateClassName(
-        'min-w-0 rounded-b-lg p-3 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&>[data-rdx-code-block]]:my-3 [&_[data-rdx-code-block]>pre]:p-3',
+        'min-w-0 rounded-b-lg p-3 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&>[data-rdx-code-block]]:my-3 [&_[data-rdx-code-block]>pre]:p-3 font-mono',
         className
       )}
       {...props}

package/src/components/version-dropdown.tsx

@@ -1,9 +1,13 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { Archive, Bird, PackageOpen } from 'lucide-react'
 import Link from 'next/link'
 import type { ReactNode } from 'react'
 
+import { formatMessage } from '../lib/i18n'
+
 import { Button } from './button'
 import {
   DropdownMenu,
@@ -42,6 +46,7 @@ export function VersionDropdown({
   onSelect?: (id: string) => void
   footer?: ReactNode
 }) {
+  const messages = useMessages()
   const current =
     options.find((option) => option.id === currentId) ?? options[0]
   if (!current) return null
@@ -87,7 +92,9 @@ export function VersionDropdown({
             variant="outline"
             size="sm"
             className="min-w-0 capitalize sm:min-w-[134px]"
-            aria-label={`Documentation version: ${current.label}`}
+            aria-label={formatMessage(messages.documentationVersion, {
+              version: current.label,
+            })}
           />
         }
       >
@@ -119,7 +126,7 @@ export function VersionDropdown({
             {active.length > 0 && <DropdownMenuSeparator />}
             <DropdownMenuGroup>
               <DropdownMenuLabel className="text-center py-px cursor-default">
-                Archived
+                {messages.archived}
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
               {archived.map(item)}

package/src/components/version-notice.tsx

@@ -1,3 +1,4 @@
+import { getMessages } from '../lib/i18n'
 import Link from 'next/link'
 import { ArrowRight } from 'lucide-react'
 
@@ -5,29 +6,30 @@ import { Callout } from './callout'
 
 /** Presentation only: version selection remains the responsibility of the caller. */
 export function VersionNotice({
+  lang,
   kind,
   currentHref,
 }: {
+  lang?: string
   kind: 'canary' | 'outdated'
   currentHref: string
 }) {
+  const messages = getMessages(lang)
   const isCanary = kind === 'canary'
   return (
     <Callout
       data-rdx-version-notice={kind}
       variant={isCanary ? 'tip' : 'warning'}
-      title={isCanary ? 'Pre-release documentation' : 'Outdated documentation'}
+      title={isCanary ? messages.preReleaseTitle : messages.outdatedTitle}
       className="mt-0 mb-5"
     >
       <p>
-        {isCanary
-          ? 'This is a pre-release version of the documentation.'
-          : 'This is an outdated version of the documentation.'}{' '}
+        {isCanary ? messages.preReleaseMessage : messages.outdatedMessage}{' '}
         <Link
           href={currentHref}
           className="font-medium text-foreground underline decoration-current/40 underline-offset-4 transition-colors hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
         >
-          Go back to the current version
+          {messages.backToCurrent}
           <ArrowRight
             aria-hidden="true"
             className="ml-1 inline size-3.5 align-text-bottom"

package/src/lib/i18n.ts

@@ -0,0 +1,144 @@
+/** Shared labels only: document content and author-provided names stay untouched. */
+const en = {
+  skipContent: 'Skip to content',
+  mainNavigation: 'Main navigation',
+  docs: 'Docs',
+  documentationPages: 'Documentation pages',
+  documentationNavigation: 'Documentation navigation',
+  openSidebar: 'Open sidebar',
+  closeSidebar: 'Close sidebar',
+  previous: 'Previous',
+  next: 'Next',
+  previousPage: 'Previous page',
+  nextPage: 'Next page',
+  onThisPage: 'On this page',
+  search: 'Search…',
+  searchDocumentation: 'Search documentation',
+  searchPlaceholder: 'Search documentation…',
+  searchDescription:
+    'Search pages and sections in {version}. Use arrow keys to choose a result and Enter to open it.',
+  loadingSearch: 'Loading search…',
+  searchUnavailable: 'Search is unavailable.',
+  tryAgain: 'Try again',
+  typeToSearch: 'Type to search this documentation.',
+  noResults: 'No results found.',
+  navigate: 'Navigate',
+  open: 'Open',
+  close: 'Close',
+  closeSearch: 'Close search',
+  copyCode: 'Copy code',
+  codeCopied: 'Code copied to clipboard.',
+  copyCodeError: 'Could not copy. Select the code and copy it manually.',
+  copyRetry: 'Could not copy. Try again or copy manually.',
+  copied: 'Copied!',
+  copyTab: 'Copy active tab',
+  tabCopied: 'Tab content copied to clipboard.',
+  copyTabError: 'Could not copy. Select the tab content and copy it manually.',
+  code: 'Code',
+  table: 'Table',
+  current: 'Current',
+  version: 'Version {version}',
+  documentationVersion: 'Documentation version: {version}',
+  archived: 'Archived',
+  archivedVersion: 'Archived',
+  loadingVersions: 'Loading versions',
+  preReleaseTitle: 'Pre-release documentation',
+  outdatedTitle: 'Outdated documentation',
+  preReleaseMessage: 'This is a pre-release version of the documentation.',
+  outdatedMessage: 'This is an outdated version of the documentation.',
+  backToCurrent: 'Go back to the current version',
+  poweredBy: 'Powered by',
+  developedBy: 'Developed by',
+  modeToggle: 'Mode Toggle',
+  documentationReady: 'Your documentation is ready.',
+  addDocument: 'Add an .mdx file inside docs/.',
+  notFound: 'Page not found',
+  notFoundDescription: "We couldn't find what you were looking for.",
+  brokenLink:
+    'Please contact the owner of the site that led you to this link and let them know the link is broken.',
+  backToDocs: 'Go back to documentation',
+} satisfies Record<string, string>
+
+export type InterfaceMessages = { [Key in keyof typeof en]: string }
+export type InterfaceLocale = 'en' | 'pt-BR'
+
+const ptBR = {
+  skipContent: 'Ir para o conteúdo',
+  mainNavigation: 'Navegação principal',
+  docs: 'Docs',
+  documentationPages: 'Páginas da documentação',
+  documentationNavigation: 'Navegação da documentação',
+  openSidebar: 'Abrir menu lateral',
+  closeSidebar: 'Fechar menu lateral',
+  previous: 'Anterior',
+  next: 'Próxima',
+  previousPage: 'Página anterior',
+  nextPage: 'Próxima página',
+  onThisPage: 'Nesta página',
+  search: 'Buscar…',
+  searchDocumentation: 'Buscar na documentação',
+  searchPlaceholder: 'Buscar na documentação…',
+  searchDescription:
+    'Busque páginas e seções em {version}. Use as setas para escolher um resultado e Enter para abri-lo.',
+  loadingSearch: 'Carregando busca…',
+  searchUnavailable: 'A busca está indisponível.',
+  tryAgain: 'Tentar novamente',
+  typeToSearch: 'Digite para buscar nesta documentação.',
+  noResults: 'Nenhum resultado encontrado.',
+  navigate: 'Navegar',
+  open: 'Abrir',
+  close: 'Fechar',
+  closeSearch: 'Fechar busca',
+  copyCode: 'Copiar código',
+  codeCopied: 'Código copiado para a área de transferência.',
+  copyCodeError:
+    'Não foi possível copiar. Selecione o código e copie manualmente.',
+  copyRetry: 'Não foi possível copiar. Tente novamente ou copie manualmente.',
+  copied: 'Copiado!',
+  copyTab: 'Copiar aba ativa',
+  tabCopied: 'Conteúdo da aba copiado para a área de transferência.',
+  copyTabError:
+    'Não foi possível copiar. Selecione o conteúdo da aba e copie manualmente.',
+  code: 'Código',
+  table: 'Tabela',
+  current: 'Atual',
+  version: 'Versão {version}',
+  documentationVersion: 'Versão da documentação: {version}',
+  archived: 'Arquivadas',
+  archivedVersion: 'Arquivada',
+  loadingVersions: 'Carregando versões',
+  preReleaseTitle: 'Documentação de pré-lançamento',
+  outdatedTitle: 'Documentação desatualizada',
+  preReleaseMessage: 'Esta é uma versão de pré-lançamento da documentação.',
+  outdatedMessage: 'Esta é uma versão desatualizada da documentação.',
+  backToCurrent: 'Voltar para a versão atual',
+  poweredBy: 'Feito com',
+  developedBy: 'Desenvolvido por',
+  modeToggle: 'Alternar tema',
+  documentationReady: 'Sua documentação está pronta.',
+  addDocument: 'Adicione um arquivo .mdx dentro de docs/.',
+  notFound: 'Página não encontrada',
+  notFoundDescription: 'Não encontramos o que você estava procurando.',
+  brokenLink:
+    'Entre em contato com o responsável pelo site que indicou este link e informe que ele não está funcionando.',
+  backToDocs: 'Voltar para a documentação',
+} satisfies InterfaceMessages
+
+/** Match the locale, then its base language; unsupported languages use English. */
+export function resolveInterfaceLocale(lang = 'en'): InterfaceLocale {
+  const normalized = lang.trim().replaceAll('_', '-').toLowerCase()
+  if (normalized === 'pt-br' || normalized.split('-')[0] === 'pt')
+    return 'pt-BR'
+  return 'en'
+}
+
+export function getMessages(lang?: string): InterfaceMessages {
+  return resolveInterfaceLocale(lang) === 'pt-BR' ? ptBR : en
+}
+
+export function formatMessage(message: string, values: Record<string, string>) {
+  return message.replace(
+    /\{(\w+)\}/g,
+    (placeholder, key: string) => values[key] ?? placeholder
+  )
+}