@lexibase/rdx-ui 1.1.0 → 3.0.0

package/src/components/dialog.tsx

@@ -1,76 +1,166 @@
 'use client'
 
-// shadcn/ui Base Nova Dialog, using the shared RDX theme and buttons.
 import * as React from 'react'
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
-import { X } from 'lucide-react'
-import { mergeStateClassName } from '../lib/utils'
+import { cn, mergeStateClassName } from '../lib/utils'
+
 import { Button } from './button'
+import { XIcon } from 'lucide-react'
+import { useMessages } from '../providers/locale-provider'
 
-function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root {...props} />
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
-function DialogTrigger(
-  props: React.ComponentProps<typeof DialogPrimitive.Trigger>
-) {
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={mergeStateClassName(
+        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
 function DialogContent({
   className,
   children,
+  showCloseButton = true,
+  closeLabel,
+  overlayClassName,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Popup>) {
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+  closeLabel?: string
+  overlayClassName?: DialogPrimitive.Backdrop.Props['className']
+}) {
+  const messages = useMessages()
   return (
-    <DialogPrimitive.Portal>
-      <DialogPrimitive.Backdrop
-        data-slot="dialog-overlay"
-        className="fixed inset-0 isolate z-50 bg-black/30 backdrop-blur-xs duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none"
-      />
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={mergeStateClassName(
-          'fixed top-[20%] left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 gap-4 rounded-xl bg-popover p-1 text-sm text-popover-foreground ring-1 ring-foreground/10 shadow-lg outline-none duration-100 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
+          'fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close
-          render={
-            <Button
-              variant="ghost"
-              size="icon"
-              className="absolute top-2 right-2 size-7"
-            />
-          }
-          aria-label="Close search"
-        >
-          <X className="size-3.5" />
-        </DialogPrimitive.Close>
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">{closeLabel ?? messages.close}</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Popup>
-    </DialogPrimitive.Portal>
+    </DialogPortal>
   )
 }
-function DialogTitle({
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
   className,
+  showCloseButton = false,
+  children,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean
+}) {
+  const messages = useMessages()
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          {messages.close}
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
-      className={mergeStateClassName('font-medium', className)}
+      data-slot="dialog-title"
+      className={mergeStateClassName(
+        'cn-font-heading text-base leading-none font-medium',
+        className
+      )}
       {...props}
     />
   )
 }
+
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
-      className={mergeStateClassName('text-muted-foreground', className)}
+      data-slot="dialog-description"
+      className={mergeStateClassName(
+        'text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className
+      )}
       {...props}
     />
   )
 }
-export { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogDescription }
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/docs-search-dialog.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import {
   useDeferredValue,
   useEffect,
@@ -23,6 +25,8 @@ import {
   CommandItem,
   CommandList,
 } from './command'
+import { formatMessage } from '../lib/i18n'
+
 import { Button } from './button'
 
 const cache = new Map<string, PreparedSearch>()
@@ -40,6 +44,7 @@ export function DocsSearchDialog({
   onOpenChange: (value: boolean) => void
   triggerRef: RefObject<HTMLButtonElement | null>
 }) {
+  const messages = useMessages()
   const router = useRouter()
   const pathname = usePathname()
   const [query, setQuery] = useState('')
@@ -94,16 +99,22 @@ export function DocsSearchDialog({
   }
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent finalFocus={triggerRef}>
-        <DialogTitle className="sr-only">Search documentation</DialogTitle>
+      <DialogContent
+        finalFocus={triggerRef}
+        closeLabel={messages.closeSearch}
+        overlayClassName="bg-black/30"
+        className="top-[20%] w-[calc(100%-2rem)] max-w-lg translate-y-0 p-1 shadow-lg sm:max-w-lg"
+      >
+        <DialogTitle className="sr-only">
+          {messages.searchDocumentation}
+        </DialogTitle>
         <DialogDescription className="sr-only">
-          Search pages and sections in {version}. Use arrow keys to choose a
-          result and Enter to open it.
+          {formatMessage(messages.searchDescription, { version })}
         </DialogDescription>
-        <Command shouldFilter={false} label="Search documentation">
+        <Command shouldFilter={false} label={messages.searchDocumentation}>
           <CommandInput
-            aria-label="Search documentation"
-            placeholder="Search documentation…"
+            aria-label={messages.searchDocumentation}
+            placeholder={messages.searchPlaceholder}
             value={query}
             onValueChange={setQuery}
             maxLength={120}
@@ -111,21 +122,24 @@ export function DocsSearchDialog({
           <div className="px-2 pt-2 pb-1 text-[11px] text-muted-foreground">
             {version}
           </div>
-          <CommandList aria-busy={loading}>
+          <CommandList
+            aria-busy={loading}
+            aria-label={messages.searchDocumentation}
+          >
             {loading ? (
               <div
                 role="status"
                 className="flex justify-center gap-2 p-6 text-sm text-muted-foreground"
               >
                 <LoaderCircle className="size-4 animate-spin motion-reduce:animate-none" />
-                Loading search…
+                {messages.loadingSearch}
               </div>
             ) : state.error ? (
               <div
                 role="status"
                 className="p-4 text-center text-sm text-muted-foreground"
               >
-                Search is unavailable.{' '}
+                {messages.searchUnavailable}{' '}
                 <Button
                   variant="link"
                   size="sm"
@@ -134,16 +148,16 @@ export function DocsSearchDialog({
                     setRetry((value) => value + 1)
                   }}
                 >
-                  Try again
+                  {messages.tryAgain}
                 </Button>
               </div>
             ) : !query.trim() ? (
               <div className="px-4 py-6 text-center text-sm text-muted-foreground">
-                Type to search this documentation.
+                {messages.typeToSearch}
               </div>
             ) : (
               <>
-                <CommandEmpty>No results found.</CommandEmpty>
+                <CommandEmpty>{messages.noResults}</CommandEmpty>
                 {results.map((entry) => (
                   <CommandItem
                     key={entry.href}
@@ -175,7 +189,8 @@ export function DocsSearchDialog({
             )}
           </CommandList>
           <div className="border-t px-2 py-2 text-[10px] text-muted-foreground">
-            ↑ ↓ Navigate <span className="mx-2">↵ Open</span> Esc Close
+            ↑ ↓ {messages.navigate}{' '}
+            <span className="mx-2">↵ {messages.open}</span> Esc {messages.close}
           </div>
         </Command>
       </DialogContent>

package/src/components/docs-search.tsx

@@ -1,9 +1,12 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { useEffect, useRef, useState } from 'react'
 import dynamic from 'next/dynamic'
 import { Search } from 'lucide-react'
 import { Button } from './button'
+import { Kbd } from './kbd'
 
 const SearchDialog = dynamic(
   () =>
@@ -19,6 +22,7 @@ export function DocsSearch({
   indexUrl: string
   version: string
 }) {
+  const messages = useMessages()
   const [open, setOpen] = useState(false)
   const [activated, setActivated] = useState(false)
   const trigger = useRef<HTMLButtonElement | null>(null)
@@ -50,20 +54,20 @@ export function DocsSearch({
         data-rdx-search-trigger
         variant="outline"
         size="sm"
-        aria-label="Search documentation"
+        aria-label={messages.searchDocumentation}
         aria-haspopup="dialog"
         aria-expanded={open}
         onClick={show}
         className="h-8 gap-2 px-2 text-muted-foreground sm:min-w-40 sm:justify-start"
       >
         <Search className="size-3.5" />
-        <span className="hidden sm:inline">Search…</span>
-        <kbd
-          className="ml-auto hidden rounded border px-1 text-[10px] text-muted-foreground sm:inline"
+        <span className="hidden sm:inline">{messages.search}</span>
+        <Kbd
+          className="ml-auto hidden h-auto rounded border bg-transparent px-1 text-[10px] text-muted-foreground sm:inline"
           aria-hidden="true"
         >
           ⌘ / Ctrl K
-        </kbd>
+        </Kbd>
       </Button>
       {activated && (
         <SearchDialog

package/src/components/docs-sidebar.tsx

@@ -1,10 +1,11 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { useEffect, useRef, useState } from 'react'
 import { SidebarClose, SidebarOpen } from 'lucide-react'
 
 import { Button } from './button'
-import { ButtonLink } from './button-link'
 import { Separator } from './separator'
 
 export type SidebarCategory = {
@@ -19,6 +20,7 @@ export function DocsSidebar({
   categories: SidebarCategory[]
   pathname: string
 }) {
+  const messages = useMessages()
   const [openPath, setOpenPath] = useState<string | null>(null)
   const isOpen = openPath === pathname
   const dialog = useRef<HTMLDialogElement>(null)
@@ -27,7 +29,7 @@ export function DocsSidebar({
     if (!isOpen && dialog.current?.open) dialog.current?.close()
   }, [isOpen])
   const content = (
-    <nav aria-label="Documentation pages">
+    <nav aria-label={messages.documentationPages}>
       {categories.map((category, index) => (
         <div
           key={`${index}:${category.title}`}
@@ -37,7 +39,7 @@ export function DocsSidebar({
             {category.title}
           </p>
           {category.links.map((link) => (
-            <ButtonLink
+            <Button
               key={link.href}
               variant="ghost"
               size="sm"
@@ -49,7 +51,7 @@ export function DocsSidebar({
               className="justify-start text-sm text-primary"
             >
               {link.label}
-            </ButtonLink>
+            </Button>
           ))}
           {index < categories.length - 1 && <Separator className="my-4" />}
         </div>
@@ -62,7 +64,7 @@ export function DocsSidebar({
         <Button
           variant="ghost"
           onClick={() => setOpenPath(pathname)}
-          aria-label="Open sidebar"
+          aria-label={messages.openSidebar}
         >
           <SidebarOpen className="size-4" />
         </Button>
@@ -75,7 +77,7 @@ export function DocsSidebar({
       </aside>
       <dialog
         ref={dialog}
-        aria-label="Documentation navigation"
+        aria-label={messages.documentationNavigation}
         onClose={() => setOpenPath(null)}
         className="fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none bg-background text-foreground border-0 p-4 backdrop:bg-black/40"
       >
@@ -83,7 +85,7 @@ export function DocsSidebar({
           <Button
             variant="ghost"
             onClick={() => setOpenPath(null)}
-            aria-label="Close sidebar"
+            aria-label={messages.closeSidebar}
           >
             <SidebarClose className="size-4" />
           </Button>

package/src/components/docs-toc.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { useEffect, useRef, useState } from 'react'
 import { usePathname } from 'next/navigation'
 
@@ -77,6 +79,7 @@ export function DocsToc({ contentId = 'rdx-main' }: { contentId?: string }) {
 }
 
 function PageToc({ contentId }: { contentId: string }) {
+  const messages = useMessages()
   const [headings, setHeadings] = useState<Heading[]>([])
   const [activeId, setActiveId] = useState('')
   const actions = useRef<PopoverActions | null>(null)
@@ -184,7 +187,7 @@ function PageToc({ contentId }: { contentId: string }) {
         <PopoverTrigger
           openOnHover
           delay={120}
-          aria-label="On this page"
+          aria-label={messages.onThisPage}
           className="flex max-h-[40vh] w-12 flex-col items-end gap-2 overflow-hidden rounded-md p-3 text-muted-foreground/40 outline-none transition-colors hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
         >
           {headings.map((heading) => (
@@ -215,9 +218,9 @@ function PageToc({ contentId }: { contentId: string }) {
           className="hidden max-h-[min(60vh,var(--available-height))] w-64 overflow-y-auto xl:flex"
         >
           <PopoverTitle className="px-2 pt-1 text-xs text-muted-foreground">
-            On this page
+            {messages.onThisPage}
           </PopoverTitle>
-          <nav aria-label="On this page">
+          <nav aria-label={messages.onThisPage}>
             <HeadingLinks
               nodes={headingTree(headings)}
               baseDepth={baseDepth}

package/src/components/footer-credit.tsx

@@ -1,17 +1,21 @@
+import { getMessages } from '../lib/i18n'
 import type { ReactNode } from 'react'
 
-import { ButtonLink } from './button-link'
+import { Button } from './button'
 
 /** Shared site identity and framework credit for documentation footers. */
 export function FooterCredit({
+  lang,
   name,
   since,
   children,
 }: {
+  lang?: string
   name: string
   since?: number
   children?: ReactNode
 }) {
+  const messages = getMessages(lang)
   const currentYear = new Date().getFullYear()
   const years =
     since !== undefined && since !== currentYear
@@ -24,8 +28,8 @@ export function FooterCredit({
         &copy; {years} <strong>{name}</strong>
         {children}
         <span className="inline-block">
-          {' · Powered by '}
-          <ButtonLink
+          {` · ${messages.poweredBy} `}
+          <Button
             variant="link"
             size="link"
             href="https://github.com/lexibase/rdx"
@@ -33,7 +37,7 @@ export function FooterCredit({
             rel="noopener noreferrer"
           >
             RDX
-          </ButtonLink>
+          </Button>
         </span>
       </p>
     </section>

package/src/components/home.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { ButtonLink } from './button-link'
+import { Button } from './button'
 import { Logo } from './logo'
 
 /** The default landing page from apps/web, not a separate marketing theme. */
@@ -32,13 +32,13 @@ export function Home({
       {buttons.length > 0 && (
         <div className="flex flex-wrap justify-center gap-3 mt-6 px-6">
           {buttons.map((button, index) => (
-            <ButtonLink
+            <Button
               key={`${index}:${button.href}`}
               variant={index === 0 ? 'default' : 'outline'}
               href={button.href}
             >
               {button.label}
-            </ButtonLink>
+            </Button>
           ))}
         </div>
       )}

package/src/components/kbd.tsx

@@ -0,0 +1,29 @@
+import type { ComponentProps } from 'react'
+
+import { cn } from '../lib/utils'
+
+// shadcn/ui base-nova Kbd; see THIRD_PARTY_NOTICES.md for the upstream MIT license.
+function Kbd({ className, ...props }: ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/components/loading-button.tsx

@@ -1,7 +1,11 @@
+'use client'
+
+import { useMessages } from '../providers/locale-provider'
 import { Spline } from 'lucide-react'
 import { Button } from '@lexibase/rdx-ui/components/button'
 
 export function LoadingButton() {
+  const messages = useMessages()
   return (
     <Button
       variant="outline"
@@ -9,7 +13,7 @@ export function LoadingButton() {
       className="w-[134px] px-9 overflow-hidden"
       disabled
       aria-busy="true"
-      aria-label="Loading versions"
+      aria-label={messages.loadingVersions}
     >
       <div className="animate-spin flex items-center justify-center">
         <Spline className="size-4" />

package/src/components/mdx-code-block-view.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import { CodeXml, FolderTree, GitCompareArrows, WrapText } from 'lucide-react'
+
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from './code-block'
+
+/** The wrap action follows shadcn's stateful Code Block composition. */
+export function MdxCodeBlockView({
+  label,
+  mode,
+  value,
+  preProps,
+  children,
+}: {
+  label: string
+  mode?: 'folder' | 'diff'
+  value: string
+  preProps: ComponentProps<'pre'>
+  children: ReactNode
+}) {
+  const [wrap, setWrap] = useState(false)
+  const messages = useMessages()
+  const Icon =
+    mode === 'folder'
+      ? FolderTree
+      : mode === 'diff'
+        ? GitCompareArrows
+        : CodeXml
+  return (
+    <CodeBlock
+      size="sm"
+      data-rdx-code-block
+      data-rdx-code-mode={mode}
+      data-rdx-code-value={value}
+      className="my-4 max-w-full"
+    >
+      <CodeBlockHeader>
+        <CodeBlockTitle>
+          <Icon aria-hidden="true" /> {label}
+        </CodeBlockTitle>
+        <CodeBlockActions>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="md:hidden"
+            aria-label={messages.wrapCode}
+            title={messages.wrapCode}
+            aria-pressed={wrap}
+            onClick={() => setWrap(!wrap)}
+          >
+            <WrapText aria-hidden="true" />
+          </Button>
+          <CodeBlockCopyButton value={value} />
+        </CodeBlockActions>
+      </CodeBlockHeader>
+      <CodeBlockContent
+        {...preProps}
+        wrap={wrap}
+        className={[preProps.className, 'data-wrap:wrap-anywhere']
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {children}
+      </CodeBlockContent>
+    </CodeBlock>
+  )
+}