@lexibase/rdx-ui 2.0.0 → 3.1.0

package/src/components/dialog.tsx

@@ -1,79 +1,166 @@
 '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'
-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={messages.closeSearch}
-        >
-          <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 DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
   )
 }
-function DialogTitle({
+
+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-page-transition.tsx

@@ -0,0 +1,178 @@
+'use client'
+
+import { useEffect, ViewTransition, type ReactNode } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+
+const directions = {
+  'rdx-doc-forward': 'rdx-doc-forward',
+  'rdx-doc-back': 'rdx-doc-back',
+  default: 'none',
+}
+
+const interactive = [
+  'a',
+  'button',
+  'input',
+  'textarea',
+  'select',
+  'label',
+  'summary',
+  'dialog',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[role="button"]',
+  '[role="slider"]',
+  '[role="textbox"]',
+  '[role="combobox"]',
+  '[draggable="true"]',
+  'pre',
+  'table',
+  'img',
+  'video',
+  'audio',
+  'canvas',
+  'iframe',
+  '[data-rdx-code-block]',
+  '[data-slot="table-container"]',
+  '[data-slot="tabs"]',
+  '[data-rdx-mermaid-preview]',
+].join(',')
+
+/** Let the router retain ownership of navigation, focus and history. */
+export function DocsPageTransition({
+  children,
+  previousHref,
+  nextHref,
+}: {
+  children: ReactNode
+  previousHref?: string
+  nextHref?: string
+}) {
+  const router = useRouter()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const scroller = document.querySelector<HTMLElement>(
+      '[data-rdx-docs-scroll]'
+    )
+    if (!scroller) return
+    let gesture: {
+      id: number
+      x: number
+      y: number
+      top: number
+      time: number
+    } | null = null
+    let navigationAt = -Infinity
+    const selected = () => window.getSelection()?.isCollapsed === false
+    const cancel = () => {
+      gesture = null
+    }
+    const start = (event: TouchEvent) => {
+      cancel()
+      if (
+        event.defaultPrevented ||
+        window.innerWidth >= 768 ||
+        event.touches.length !== 1 ||
+        selected()
+      )
+        return
+      const target = event.target
+      if (!(target instanceof Element) || target.closest(interactive)) return
+      // Leave nested horizontal scrollers to their own gestures, including custom MDX.
+      for (
+        let element: Element | null = target;
+        element && element !== scroller;
+        element = element.parentElement
+      ) {
+        if (
+          element.scrollWidth > element.clientWidth + 1 &&
+          /auto|scroll/.test(getComputedStyle(element).overflowX)
+        )
+          return
+      }
+      const touch = event.touches[0]!
+      // Keep browser/system edge gestures available.
+      if (touch.clientX < 32 || touch.clientX > window.innerWidth - 32) return
+      gesture = {
+        id: touch.identifier,
+        x: touch.clientX,
+        y: touch.clientY,
+        top: scroller.scrollTop,
+        time: performance.now(),
+      }
+    }
+    const move = (event: TouchEvent) => {
+      if (event.defaultPrevented) return cancel()
+      if (!gesture) return
+      const touch = event.touches[0]
+      if (
+        event.touches.length !== 1 ||
+        !touch ||
+        touch.identifier !== gesture.id
+      )
+        return cancel()
+      const dx = Math.abs(touch.clientX - gesture.x)
+      const dy = Math.abs(touch.clientY - gesture.y)
+      if (dy > 12 && dy >= dx) cancel()
+    }
+    const end = (event: TouchEvent) => {
+      const current = gesture
+      cancel()
+      if (
+        !current ||
+        event.touches.length ||
+        selected() ||
+        window.innerWidth >= 768
+      )
+        return
+      const touch = Array.from(event.changedTouches).find(
+        (entry) => entry.identifier === current.id
+      )
+      if (!touch) return
+      const dx = touch.clientX - current.x
+      const dy = touch.clientY - current.y
+      const now = performance.now()
+      if (
+        now - current.time > 1000 ||
+        now - navigationAt < 450 ||
+        Math.abs(scroller.scrollTop - current.top) > 8
+      )
+        return
+      if (
+        Math.abs(dx) < Math.min(120, Math.max(64, window.innerWidth * 0.18)) ||
+        Math.abs(dx) < Math.abs(dy) * 1.5
+      )
+        return
+      const href = dx < 0 ? nextHref : previousHref
+      if (!href) return
+      navigationAt = now
+      router.push(href, {
+        transitionTypes: [dx < 0 ? 'rdx-doc-forward' : 'rdx-doc-back'],
+      })
+    }
+    // Passive listeners never take scrolling, zooming or selection away from the browser.
+    scroller.addEventListener('touchstart', start, { passive: true })
+    scroller.addEventListener('touchmove', move, { passive: true })
+    scroller.addEventListener('touchend', end, { passive: true })
+    scroller.addEventListener('touchcancel', cancel, { passive: true })
+    return () => {
+      scroller.removeEventListener('touchstart', start)
+      scroller.removeEventListener('touchmove', move)
+      scroller.removeEventListener('touchend', end)
+      scroller.removeEventListener('touchcancel', cancel)
+    }
+  }, [pathname, previousHref, nextHref, router])
+
+  return (
+    <ViewTransition
+      name="rdx-document"
+      default="none"
+      enter={directions}
+      exit={directions}
+      update={directions}
+      share={directions}
+    >
+      {children}
+    </ViewTransition>
+  )
+}

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

@@ -99,7 +99,12 @@ export function DocsSearchDialog({
   }
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent finalFocus={triggerRef}>
+      <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>

package/src/components/docs-sidebar.tsx

@@ -4,9 +4,17 @@ import { useMessages } from '../providers/locale-provider'
 
 import { useEffect, useRef, useState } from 'react'
 import { SidebarClose, SidebarOpen } from 'lucide-react'
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 
 import { Button } from './button'
 import { Separator } from './separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from './sheet'
 
 export type SidebarCategory = {
   title: string
@@ -21,13 +29,34 @@ export function DocsSidebar({
   pathname: string
 }) {
   const messages = useMessages()
-  const [openPath, setOpenPath] = useState<string | null>(null)
-  const isOpen = openPath === pathname
-  const dialog = useRef<HTMLDialogElement>(null)
+  const [isOpen, setOpen] = useState(false)
+  const open = useRef(false)
+  const actions = useRef<{ close: () => void; unmount: () => void } | null>(
+    null
+  )
+  const previousPath = useRef(pathname)
+  const reducedMotion = useReducedMotion()
+  const pageOrder = new Map(
+    categories
+      .flatMap((category) => category.links)
+      .map((page, index) => [page.href, index])
+  )
+  const currentIndex = pageOrder.get(pathname) ?? -1
+
+  // Route changes (including browser history) must use the same closing phase
+  // as Escape and the close button, keeping the content mounted until exit ends.
   useEffect(() => {
-    if (isOpen && !dialog.current?.open) dialog.current?.showModal()
-    if (!isOpen && dialog.current?.open) dialog.current?.close()
-  }, [isOpen])
+    if (previousPath.current !== pathname) actions.current?.close()
+    previousPath.current = pathname
+  }, [pathname])
+  useEffect(() => {
+    const desktop = window.matchMedia('(min-width: 768px)')
+    const closeOnDesktop = () => {
+      if (desktop.matches) actions.current?.close()
+    }
+    desktop.addEventListener('change', closeOnDesktop)
+    return () => desktop.removeEventListener('change', closeOnDesktop)
+  }, [])
   const content = (
     <nav aria-label={messages.documentationPages}>
       {categories.map((category, index) => (
@@ -46,9 +75,18 @@ export function DocsSidebar({
               active={pathname === link.href}
               aria-label={link.label}
               href={link.href}
-              onClick={() => setOpenPath(null)}
+              transitionTypes={
+                currentIndex < 0 || link.href === pathname
+                  ? undefined
+                  : [
+                      pageOrder.get(link.href)! < currentIndex
+                        ? 'rdx-doc-back'
+                        : 'rdx-doc-forward',
+                    ]
+              }
+              onClick={() => actions.current?.close()}
               aria-current={pathname === link.href ? 'page' : undefined}
-              className="justify-start text-sm text-primary"
+              className={`justify-start text-sm ${pathname === link.href ? 'text-accent-foreground' : 'text-primary'}`}
             >
               {link.label}
             </Button>
@@ -59,15 +97,22 @@ export function DocsSidebar({
     </nav>
   )
   return (
-    <>
+    <Sheet
+      open={isOpen}
+      actionsRef={actions}
+      onOpenChange={(nextOpen, details) => {
+        if (!nextOpen) details.preventUnmountOnClose()
+        open.current = nextOpen
+        setOpen(nextOpen)
+      }}
+    >
       <div className="md:hidden absolute top-2 left-4 z-30">
-        <Button
-          variant="ghost"
-          onClick={() => setOpenPath(pathname)}
+        <SheetTrigger
+          render={<Button variant="ghost" />}
           aria-label={messages.openSidebar}
         >
           <SidebarOpen className="size-4" />
-        </Button>
+        </SheetTrigger>
       </div>
       <aside
         data-rdx-sidebar
@@ -75,23 +120,51 @@ export function DocsSidebar({
       >
         {content}
       </aside>
-      <dialog
-        ref={dialog}
-        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"
-      >
-        <div className="flex justify-end mb-4">
-          <Button
-            variant="ghost"
-            onClick={() => setOpenPath(null)}
-            aria-label={messages.closeSidebar}
+      <AnimatePresence>
+        {isOpen && (
+          <SheetContent
+            key="mobile-sidebar"
+            side="left"
+            showCloseButton={false}
+            portalProps={{ keepMounted: true }}
+            data-rdx-mobile-sidebar
+            className="md:hidden w-full! max-w-none! h-dvh border-0 bg-background text-foreground gap-0 p-4 overflow-y-auto translate-none! opacity-100! transition-none!"
+            render={
+              <motion.div
+                initial="closed"
+                animate="open"
+                exit="closed"
+                variants={{
+                  closed: { x: reducedMotion ? 0 : '-100%' },
+                  open: { x: 0 },
+                }}
+                transition={
+                  reducedMotion
+                    ? { duration: 0 }
+                    : { type: 'spring', stiffness: 300, damping: 30 }
+                }
+                onAnimationComplete={(phase) => {
+                  if (phase === 'closed' && !open.current)
+                    actions.current?.unmount()
+                }}
+              />
+            }
           >
-            <SidebarClose className="size-4" />
-          </Button>
-        </div>
-        {isOpen && content}
-      </dialog>
-    </>
+            <SheetTitle className="sr-only">
+              {messages.documentationNavigation}
+            </SheetTitle>
+            <div className="flex justify-end mb-4">
+              <SheetClose
+                render={<Button variant="ghost" />}
+                aria-label={messages.closeSidebar}
+              >
+                <SidebarClose className="size-4" />
+              </SheetClose>
+            </div>
+            {content}
+          </SheetContent>
+        )}
+      </AnimatePresence>
+    </Sheet>
   )
 }

package/src/components/docs-toc.tsx

@@ -54,7 +54,7 @@ function HeadingLinks({
             className={cn(
               'block rounded-md py-1.5 pr-2 text-xs leading-5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
               heading.id === activeId &&
-                'bg-accent/60 font-medium text-foreground'
+                'bg-accent/60 font-medium text-rdx-selected'
             )}
           >
             {heading.title}
@@ -98,12 +98,12 @@ function PageToc({ contentId }: { contentId: string }) {
     }
     const scrollTarget = scrollRoot ?? window
     // Keep native fragment links/history; smooth the actual document scroller.
-    // Tailwind's motion-safe variant leaves reduced-motion navigation instant.
+    // Match the TOC's xl visibility and leave reduced-motion navigation instant.
     const scrollElement = scrollRoot ?? document.documentElement
     const alreadySmooth = scrollElement.classList.contains(
-      'motion-safe:scroll-smooth'
+      'xl:motion-safe:scroll-smooth'
     )
-    scrollElement.classList.add('motion-safe:scroll-smooth')
+    scrollElement.classList.add('xl:motion-safe:scroll-smooth')
     function updateActive() {
       frame = 0
       const top = (scrollRoot?.getBoundingClientRect().top ?? 0) + 96
@@ -172,7 +172,7 @@ function PageToc({ contentId }: { contentId: string }) {
       cancelAnimationFrame(frame)
       cancelAnimationFrame(initialFrame)
       if (!alreadySmooth)
-        scrollElement.classList.remove('motion-safe:scroll-smooth')
+        scrollElement.classList.remove('xl:motion-safe:scroll-smooth')
     }
   }, [contentId])
 
@@ -197,7 +197,7 @@ function PageToc({ contentId }: { contentId: string }) {
               className={cn(
                 'h-0.5 shrink-0 rounded-full bg-current transition-colors',
                 heading.depth === baseDepth ? 'w-5' : 'w-3',
-                heading.id === activeId && 'text-foreground'
+                heading.id === activeId && 'text-rdx-selected'
               )}
             />
           ))}