@lexibase/rdx-ui 1.1.0 → 2.0.0

package/README.md

@@ -45,11 +45,10 @@ manual-copy guidance instead of a false success message.
 
 The shared components use `@base-ui/react` and the RDX theme.
 `components.json` selects shadcn/ui's `base-nova` style.
-Use `render` for interactive composition and `ButtonLink` for navigation:
+Use `render` for interactive composition and `Button` with `href` for navigation:
 
 ```tsx
 import { Button } from '@lexibase/rdx-ui/components/button'
-import { ButtonLink } from '@lexibase/rdx-ui/components/button-link'
 import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
   DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem,
@@ -57,7 +56,7 @@ import {
 } from '@lexibase/rdx-ui/components/dropdown-menu'
 import Link from 'next/link'
 
-<ButtonLink href="/docs" variant="outline">Documentation</ButtonLink>
+<Button href="/docs" variant="link">Documentation</Button>
 
 <DropdownMenu>
   <DropdownMenuTrigger render={<Button variant="outline" />}>
@@ -75,8 +74,8 @@ import Link from 'next/link'
 </DropdownMenu>
 ```
 
-`ButtonLink` renders a Next.js link with button styling, not `role="button"`.
-`Button` renders a native button; use `type="submit"` explicitly for form submission.
+`Button` with `href` renders a native Next.js link; use `variant="link"` for text links.
+Without `href`, `Button` renders a native button; use `type="submit"` explicitly for form submission.
 Menu actions use `onClick`. Labels must be inside `DropdownMenuGroup`.
 Checkbox values are boolean; checkbox/radio items remain open unless
 `closeOnClick` is enabled.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,29 @@
+# Third-party notices
+
+## shadcn/ui
+
+Table and Kbd are adapted from the official base-nova registry components:
+https://ui.shadcn.com/docs/components/base/table and
+https://ui.shadcn.com/docs/components/base/kbd.
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "type": "module",
   "engines": {
     "node": "^22.18.0 || ^24.11.0"
@@ -8,6 +8,7 @@
   "description": "The shared RDX documentation theme and UI components.",
   "license": "MIT",
   "files": [
+    "THIRD_PARTY_NOTICES.md",
     "src",
     "postcss.config.mjs",
     "postcss-plugin.cjs",
@@ -33,7 +34,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "@lexibase/rdx-types": "1.1.0"
+    "@lexibase/rdx-types": "1.1.1"
   },
   "peerDependencies": {
     "next": "^16.4.2",

package/src/components/button.tsx

@@ -2,6 +2,8 @@
 
 import { Button as ButtonPrimitive } from '@base-ui/react/button'
 import { cva, type VariantProps } from 'class-variance-authority'
+import Link from 'next/link'
+import type { ComponentProps } from 'react'
 
 import { cn } from '@lexibase/rdx-ui/lib/utils'
 
@@ -43,13 +45,23 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant,
-  size,
-  active,
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+type ButtonProps =
+  | (ButtonPrimitive.Props &
+      VariantProps<typeof buttonVariants> & { href?: never })
+  | (ComponentProps<typeof Link> & VariantProps<typeof buttonVariants>)
+
+function Button(props: ButtonProps) {
+  if (props.href !== undefined) {
+    const { className, variant = 'link', size, active, ...linkProps } = props
+    return (
+      <Link
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, active }), className)}
+        {...linkProps}
+      />
+    )
+  }
+  const { className, variant, size, active, ...buttonProps } = props
   return (
     <ButtonPrimitive
       data-slot="button"
@@ -59,7 +71,7 @@ function Button({
           typeof className === 'function' ? className(state) : className
         )
       }
-      {...props}
+      {...buttonProps}
     />
   )
 }

package/src/components/code-block.tsx

@@ -1,3 +1,4 @@
+import { getMessages } from '../lib/i18n'
 import { Children, isValidElement, type ComponentProps } from 'react'
 import { CodeXml } from 'lucide-react'
 
@@ -6,10 +7,12 @@ import { CopyCodeButton } from './copy-code-button'
 
 /** Keep the code server-rendered; only clipboard interaction needs JavaScript. */
 export function CodeBlock({
+  lang,
   children,
   className,
   ...props
 }: ComponentProps<'pre'>) {
+  const messages = getMessages(lang)
   const code = Children.toArray(children).find(
     (child) =>
       isValidElement<{ className?: string }>(child) &&
@@ -35,7 +38,7 @@ export function CodeBlock({
             className="min-w-0 truncate font-mono text-xs font-medium text-muted-foreground"
             title={language}
           >
-            {language ?? 'Code'}
+            {language ?? messages.code}
           </span>
         </div>
         <CopyCodeButton />

package/src/components/copy-code-button.tsx

@@ -1,11 +1,14 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 import { useEffect, useRef, useState } from 'react'
 import { Check, Copy } from 'lucide-react'
 
 import { Button } from './button'
 
 export function CopyCodeButton() {
+  const messages = useMessages()
   const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
   const pending = useRef(false)
   const mounted = useRef(false)
@@ -50,9 +53,9 @@ export function CopyCodeButton() {
         }
       >
         {status === 'copied'
-          ? 'Code copied to clipboard.'
+          ? messages.codeCopied
           : status === 'error'
-            ? 'Could not copy. Select the code and copy it manually.'
+            ? messages.copyCodeError
             : ''}
       </span>
       <Button
@@ -61,13 +64,13 @@ export function CopyCodeButton() {
         size="icon"
         data-status={status}
         className="size-7 shrink-0 border-border/70 bg-background/60 p-0 text-muted-foreground shadow-none hover:text-foreground data-[status=copied]:border-emerald-500/30 data-[status=copied]:bg-emerald-500/10 data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:border-amber-500/30 [&>svg]:size-3.5"
-        aria-label="Copy code"
+        aria-label={messages.copyCode}
         title={
           status === 'copied'
-            ? 'Copied!'
+            ? messages.copied
             : status === 'error'
-              ? 'Could not copy. Try again or copy manually.'
-              : 'Copy code'
+              ? messages.copyRetry
+              : messages.copyCode
         }
         onClick={(event) => copy(event.currentTarget)}
       >

package/src/components/dialog.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { useMessages } from '../providers/locale-provider'
+
 // 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'
@@ -20,6 +22,7 @@ function DialogContent({
   children,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Popup>) {
+  const messages = useMessages()
   return (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Backdrop
@@ -43,7 +46,7 @@ function DialogContent({
               className="absolute top-2 right-2 size-7"
             />
           }
-          aria-label="Close search"
+          aria-label={messages.closeSearch}
         >
           <X className="size-3.5" />
         </DialogPrimitive.Close>

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('')
@@ -95,15 +100,16 @@ export function DocsSearchDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent finalFocus={triggerRef}>
-        <DialogTitle className="sr-only">Search documentation</DialogTitle>
+        <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 +117,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 +143,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 +184,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" />