@lexibase/rdx-ui 3.0.0 → 3.2.0

package/src/components/sheet.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import * as React from 'react'
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'
+import { cn, mergeStateClassName } from '../lib/utils'
+import { useMessages } from '../providers/locale-provider'
+
+import { Button } from './button'
+import { XIcon } from 'lucide-react'
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={mergeStateClassName(
+        'fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs motion-reduce:transition-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  closeLabel,
+  portalProps,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+  closeLabel?: string
+  portalProps?: SheetPrimitive.Portal.Props
+}) {
+  const messages = useMessages()
+  return (
+    <SheetPortal {...portalProps}>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={mergeStateClassName(
+          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm motion-reduce:transition-none',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon aria-hidden="true" />
+            <span className="sr-only">{closeLabel ?? messages.close}</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-0.5 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={mergeStateClassName(
+        'cn-font-heading text-base font-medium text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={mergeStateClassName(
+        'text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

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"]')
@@ -144,6 +145,7 @@ function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
 }
 
 function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  const messages = useMessages()
   return (
     <div
       data-slot="tabs-header"
@@ -151,6 +153,9 @@ function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
     >
       <TabsPrimitive.List
         data-slot="tabs-list"
+        aria-label={
+          props['aria-labelledby'] ? undefined : messages.documentationTabs
+        }
         className={mergeStateClassName(
           'flex min-w-0 flex-1 gap-0.5 overflow-x-auto p-1.5 data-[orientation=vertical]:flex-col',
           className
@@ -167,7 +172,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={mergeStateClassName(
-        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-foreground data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
+        'relative shrink-0 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-active:border-border data-active:bg-background data-active:text-rdx-selected data-active:shadow-xs data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:bg-transparent data-disabled:hover:text-muted-foreground motion-reduce:transition-none',
         className
       )}
       {...props}

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',
@@ -32,15 +46,25 @@ const en = {
     'Press Escape or use the close button to return to the document.',
   copyCode: 'Copy code',
   wrapCode: 'Wrap lines',
+  showMore: 'Show more',
+  showLess: 'Show less',
   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',
+  documentationTabs: 'Documentation tabs',
   tabCopied: 'Tab content copied to clipboard.',
   copyTabError: 'Could not copy. Select the tab content and copy it manually.',
   code: 'Code',
   folderTree: 'Folder',
+  diagram: 'Diagram',
+  showDiagram: 'Show diagram',
+  showDiagramSource: 'Show diagram source',
+  enlargeDiagram: 'Enlarge diagram',
+  diagramLoading: 'Rendering diagram…',
+  diagramError:
+    'Could not render this diagram. Check the Mermaid source below.',
   table: 'Table',
   current: 'Current',
   version: 'Version {version}',
@@ -69,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',
@@ -101,17 +139,27 @@ const ptBR = {
     'Pressione Escape ou use o botão de fechar para voltar ao documento.',
   copyCode: 'Copiar código',
   wrapCode: 'Quebrar linhas',
+  showMore: 'Mostrar mais',
+  showLess: 'Mostrar menos',
   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',
+  documentationTabs: 'Abas da documentação',
   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',
   folderTree: 'Pastas',
+  diagram: 'Diagrama',
+  showDiagram: 'Mostrar diagrama',
+  showDiagramSource: 'Mostrar código do diagrama',
+  enlargeDiagram: 'Ampliar diagrama',
+  diagramLoading: 'Renderizando diagrama…',
+  diagramError:
+    'Não foi possível renderizar o diagrama. Confira o código Mermaid abaixo.',
   table: 'Tabela',
   current: 'Atual',
   version: 'Versão {version}',

package/src/lib/mermaid.ts

@@ -0,0 +1,114 @@
+type Mermaid = (typeof import('mermaid'))['default']
+
+let engine: Promise<Mermaid> | undefined
+let queue: Promise<unknown> = Promise.resolve()
+let serial = 0
+
+function loadMermaid() {
+  engine ??= import('mermaid')
+    .then((module) => module.default)
+    .catch((error: unknown) => {
+      engine = undefined
+      throw error
+    })
+  return engine
+}
+
+/** Mermaid owns global configuration: serialize theme setup and rendering. */
+export function renderMermaid(
+  source: string,
+  dark: boolean,
+  active: () => boolean
+): Promise<string | undefined> {
+  const task = queue.then(async () => {
+    if (!active()) return
+    if (source.length > 50_000)
+      throw new Error('Mermaid definition exceeds 50,000 characters.')
+    const mermaid = await loadMermaid()
+    if (!active()) return
+    const fontFamily = 'ui-sans-serif, system-ui, sans-serif'
+    mermaid.initialize({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      suppressErrorRendering: true,
+      htmlLabels: false,
+      maxTextSize: 50_000,
+      maxEdges: 500,
+      theme: 'base',
+      fontFamily,
+      themeVariables: {
+        fontSize: '14px',
+        darkMode: dark,
+        background: 'transparent',
+        primaryColor: dark ? '#18181b' : '#f4f4f5',
+        primaryTextColor: dark ? '#fafafa' : '#18181b',
+        primaryBorderColor: dark ? '#52525b' : '#a1a1aa',
+        lineColor: dark ? '#a1a1aa' : '#52525b',
+        secondaryColor: dark ? '#27272a' : '#e4e4e7',
+        tertiaryColor: dark ? '#18181b' : '#fafafa',
+        fontFamily,
+      },
+      // Diagram directives cannot change the site's safety, theme or limits.
+      secure: [
+        ...new Set([
+          'secure',
+          'securityLevel',
+          'startOnLoad',
+          'maxTextSize',
+          'maxEdges',
+          'suppressErrorRendering',
+          'theme',
+          'flowchart',
+          'htmlLabels',
+          'dompurifyConfig',
+          'themeCSS',
+          'themeVariables',
+          'fontFamily',
+        ]),
+      ],
+    })
+    const container = document.createElement('div')
+    container.setAttribute('aria-hidden', 'true')
+    container.inert = true
+    Object.assign(container.style, {
+      position: 'fixed',
+      left: '-100000px',
+      visibility: 'hidden',
+    })
+    document.body.append(container)
+    try {
+      const { svg } = await mermaid.render(
+        `rdx-mermaid-${++serial}`,
+        source,
+        container
+      )
+      if (!active()) return
+      // Mermaid's responsive width is intended for inline SVG. Give the image
+      // intrinsic dimensions so preview scaling and the expanded view stay crisp.
+      const document = new DOMParser().parseFromString(svg, 'image/svg+xml')
+      const element = document.documentElement
+      if (element.localName !== 'svg')
+        throw new Error('Mermaid returned invalid SVG.')
+      const viewBox = element
+        .getAttribute('viewBox')
+        ?.split(/[\s,]+/)
+        .map(Number)
+      if (
+        viewBox?.length === 4 &&
+        viewBox.every(Number.isFinite) &&
+        viewBox[2]! > 0 &&
+        viewBox[3]! > 0
+      ) {
+        element.setAttribute('width', String(viewBox[2]))
+        element.setAttribute('height', String(viewBox[3]))
+        element.style.removeProperty('max-width')
+      }
+      return new XMLSerializer().serializeToString(element)
+    } finally {
+      container.remove()
+    }
+  })
+  // A failed diagram must not block other diagrams on this or the next page.
+  queue = task.catch(() => undefined)
+  return task
+}

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);
@@ -19,13 +41,13 @@
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent: var(--rdx-highlighting-soft, oklch(0.97 0 0));
+  --accent-foreground: var(--rdx-highlighting, oklch(0.205 0 0));
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --ring: var(--rdx-highlighting, oklch(0.708 0 0));
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -34,12 +56,12 @@
   --radius: 0.625rem;
   --sidebar: oklch(0.985 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary: var(--rdx-highlighting, oklch(0.205 0 0));
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-accent: var(--rdx-highlighting-soft, oklch(0.97 0 0));
+  --sidebar-accent-foreground: var(--rdx-highlighting, oklch(0.205 0 0));
   --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-ring: var(--rdx-highlighting, oklch(0.708 0 0));
 }
 
 .dark {
@@ -55,13 +77,13 @@
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --accent: var(--rdx-highlighting-soft, oklch(0.269 0 0));
+  --accent-foreground: var(--rdx-highlighting, oklch(0.985 0 0));
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
   --border: oklch(0.269 0 0);
   --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
+  --ring: var(--rdx-highlighting, oklch(0.556 0 0));
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -69,15 +91,27 @@
   --chart-5: oklch(0.645 0.246 16.439);
   --sidebar: oklch(0.205 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary: var(--rdx-highlighting, oklch(0.488 0.243 264.376));
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-accent: var(--rdx-highlighting-soft, oklch(0.269 0 0));
+  --sidebar-accent-foreground: var(--rdx-highlighting, oklch(0.985 0 0));
   --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --sidebar-ring: var(--rdx-highlighting, oklch(0.439 0 0));
+}
+
+:root,
+.dark {
+  /* Invalid without an override, allowing each existing token to keep its default. */
+  --rdx-highlighting-soft: color-mix(
+    in oklab,
+    var(--rdx-highlighting) 14%,
+    var(--background)
+  );
 }
 
 @theme inline {
+  --color-rdx-highlighting: var(--rdx-highlighting, var(--color-blue-500));
+  --color-rdx-selected: var(--rdx-highlighting, var(--foreground));
   /* shadcn accordion animation, using the height measured by Base UI. */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;
@@ -141,6 +175,7 @@
 @layer base {
   * {
     @apply border-border outline-ring/50;
+    scrollbar-width: thin;
   }
   body {
     @apply bg-background text-foreground;
@@ -158,3 +193,66 @@
 .dark [data-rdx-code-block] pre.shiki span {
   color: var(--shiki-dark, inherit);
 }
+
+/* Only document navigation participates; desktop and reduced motion stay still. */
+:root:active-view-transition-type(
+    rdx-doc-forward,
+    rdx-doc-back
+  )::view-transition {
+  pointer-events: none;
+}
+:root:active-view-transition-type(
+    rdx-doc-forward,
+    rdx-doc-back
+  )::view-transition-group(root) {
+  display: none;
+}
+
+::view-transition-group(.rdx-doc-forward),
+::view-transition-group(.rdx-doc-back),
+::view-transition-old(.rdx-doc-forward),
+::view-transition-new(.rdx-doc-forward),
+::view-transition-old(.rdx-doc-back),
+::view-transition-new(.rdx-doc-back) {
+  animation: none;
+}
+
+@media (width < 768px) and (prefers-reduced-motion: no-preference) {
+  ::view-transition-old(.rdx-doc-forward) {
+    --rdx-page-offset: -48px;
+    animation: rdx-page-exit 220ms ease-out both;
+  }
+  ::view-transition-new(.rdx-doc-forward) {
+    --rdx-page-offset: 48px;
+    animation: rdx-page-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+  ::view-transition-old(.rdx-doc-back) {
+    --rdx-page-offset: 48px;
+    animation: rdx-page-exit 220ms ease-out both;
+  }
+  ::view-transition-new(.rdx-doc-back) {
+    --rdx-page-offset: -48px;
+    animation: rdx-page-enter 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+}
+
+@keyframes rdx-page-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(--rdx-page-offset));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes rdx-page-exit {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--rdx-page-offset));
+  }
+}