@lexibase/rdx-ui 3.4.0 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "3.4.0",
+  "version": "3.5.1",
   "type": "module",
   "engines": {
     "node": "^22.18.0 || ^24.11.0"
@@ -39,7 +39,7 @@
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "@lexibase/rdx-types": "2.2.0"
+    "@lexibase/rdx-types": "2.3.0"
   },
   "peerDependencies": {
     "next": "^16.4.2",

package/src/components/button-group.tsx

@@ -0,0 +1,87 @@
+import { mergeProps } from '@base-ui/react/merge-props'
+import { useRender } from '@base-ui/react/use-render'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+
+import { Separator } from './separator'
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+        vertical:
+          'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'>) {
+  return useRender({
+    defaultTagName: 'div',
+    props: mergeProps<'div'>(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'button-group-text',
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        'relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/components/card.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+
+function Card({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        'cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-(--card-spacing)', className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/components/copy-page.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { Check, ChevronDown, CircleAlert, Copy, FileText } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import { ButtonGroup } from './button-group'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLinkItem,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+
+export function CopyPage({ href }: { href: string }) {
+  const messages = useMessages()
+  const [status, setStatus] = useState<'idle' | 'copying' | 'copied' | 'error'>(
+    'idle'
+  )
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const request = useRef<AbortController | undefined>(undefined)
+
+  useEffect(
+    () => () => {
+      request.current?.abort()
+      clearTimeout(timer.current)
+    },
+    []
+  )
+
+  async function copyPage() {
+    if (request.current) return
+    const controller = new AbortController()
+    request.current = controller
+    clearTimeout(timer.current)
+    setStatus('copying')
+
+    try {
+      if (!navigator.clipboard) throw new Error('Clipboard unavailable')
+      const markdown = fetch(href, { signal: controller.signal }).then(
+        (response) => {
+          if (
+            !response.ok ||
+            !response.headers.get('content-type')?.startsWith('text/markdown')
+          )
+            throw new Error('Markdown unavailable')
+          return response.text()
+        }
+      )
+      if (navigator.clipboard.write && typeof ClipboardItem !== 'undefined') {
+        // Initiate the write inside the click's activation, even while fetching.
+        const blob = markdown.then(
+          (text) => new Blob([text], { type: 'text/plain' })
+        )
+        // ClipboardItem construction can fail before the browser consumes the blob.
+        void blob.catch(() => {})
+        await Promise.all([
+          blob,
+          navigator.clipboard.write([
+            new ClipboardItem({ 'text/plain': blob }),
+          ]),
+        ])
+      } else {
+        await navigator.clipboard.writeText(await markdown)
+      }
+      if (controller.signal.aborted) return
+      setStatus('copied')
+      timer.current = setTimeout(() => setStatus('idle'), 1800)
+    } catch {
+      if (!controller.signal.aborted) setStatus('error')
+      controller.abort()
+    } finally {
+      request.current = undefined
+    }
+  }
+
+  const Icon =
+    status === 'copied' ? Check : status === 'error' ? CircleAlert : Copy
+
+  return (
+    <ButtonGroup
+      aria-label={messages.copyPageOptions}
+      className="ms-auto shrink-0"
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={copyPage}
+        aria-busy={status === 'copying'}
+        title={status === 'error' ? messages.copyPageError : undefined}
+      >
+        <Icon aria-hidden="true" />
+        {messages.copyThisPage}
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          aria-label={messages.copyPageOptions}
+          render={<Button type="button" variant="outline" size="icon-sm" />}
+        >
+          <ChevronDown aria-hidden="true" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLinkItem
+            render={<a href={href} target="_blank" rel="noopener noreferrer" />}
+            closeOnClick
+          >
+            <FileText aria-hidden="true" />
+            {messages.viewMarkdown}
+            <span className="sr-only"> ({messages.opensInNewTab})</span>
+          </DropdownMenuLinkItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <span role="status" className="sr-only">
+        {status === 'copied'
+          ? messages.pageCopied
+          : status === 'error'
+            ? messages.copyPageError
+            : ''}
+      </span>
+    </ButtonGroup>
+  )
+}

package/src/components/docs-sidebar.tsx

@@ -5,6 +5,7 @@ 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 type { RdxPageHighlight } from '@lexibase/rdx-types'
 
 import { Button } from './button'
 import { Separator } from './separator'
@@ -18,7 +19,7 @@ import {
 
 export type SidebarCategory = {
   title: string
-  links: { href: string; label: string }[]
+  links: { href: string; label: string; highlighting?: RdxPageHighlight }[]
 }
 
 export function DocsSidebar({
@@ -73,7 +74,11 @@ export function DocsSidebar({
               variant="ghost"
               size="sm"
               active={pathname === link.href}
-              aria-label={link.label}
+              aria-label={
+                link.highlighting
+                  ? `${link.label} (${link.highlighting === 'important' ? messages.sidebarImportant : messages.sidebarNew})`
+                  : link.label
+              }
               href={link.href}
               transitionTypes={
                 currentIndex < 0 || link.href === pathname
@@ -89,6 +94,15 @@ export function DocsSidebar({
               className={`h-auto min-h-8 w-full min-w-0 justify-start whitespace-normal py-1.5 text-left text-sm [overflow-wrap:anywhere] ${pathname === link.href ? 'text-accent-foreground' : 'text-primary'}`}
             >
               {link.label}
+              {link.highlighting && (
+                <span
+                  aria-hidden="true"
+                  data-rdx-sidebar-highlight={link.highlighting}
+                  className={`relative ms-auto size-2 shrink-0 rounded-full bg-current ${link.highlighting === 'important' ? 'text-amber-600 dark:text-amber-400' : 'text-blue-600 dark:text-blue-400'}`}
+                >
+                  <span className="absolute inset-0 rounded-full bg-current opacity-0 motion-safe:animate-[rdx-sidebar-highlight_2.8s_ease-out_infinite]" />
+                </span>
+              )}
             </Button>
           ))}
           {index < categories.length - 1 && <Separator className="my-4" />}
@@ -116,7 +130,7 @@ export function DocsSidebar({
       </div>
       <aside
         data-rdx-sidebar
-        className="hidden md:block h-full w-40 lg:w-56 shrink-0 border-r border-border overflow-y-auto p-4"
+        className="hidden md:block h-full w-40 lg:w-56 shrink-0 border-r border-border overflow-y-auto scrollbar-none p-4"
       >
         {content}
       </aside>
@@ -128,7 +142,7 @@ export function DocsSidebar({
             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!"
+            className="md:hidden w-full! max-w-none! h-dvh border-0 bg-background text-foreground gap-0 p-4 overflow-y-auto scrollbar-none translate-none! opacity-100! transition-none!"
             render={
               <motion.div
                 initial="closed"

package/src/components/docs-toc.tsx

@@ -138,13 +138,17 @@ function PageToc({ contentId }: { contentId: string }) {
           element.getClientRects().length > 0 &&
           !!element.id &&
           !!element.textContent?.trim() &&
+          !element.closest('[data-slot="step-panel"][inert]') &&
           getComputedStyle(element).visibility !== 'hidden'
       )
       setHeadings(
         elements
           .map((element) => ({
             id: element.id,
-            title: element.textContent?.trim() ?? '',
+            title:
+              (
+                element.querySelector('[data-rdx-heading-text]') ?? element
+              ).textContent?.trim() ?? '',
             depth: Number(element.tagName.slice(1)),
           }))
           .filter((heading) => heading.title)
@@ -158,7 +162,7 @@ function PageToc({ contentId }: { contentId: string }) {
       subtree: true,
       characterData: true,
       attributes: true,
-      attributeFilter: ['hidden', 'style', 'class', 'id'],
+      attributeFilter: ['hidden', 'style', 'class', 'id', 'inert'],
     })
     scrollTarget.addEventListener('scroll', schedule, { passive: true })
     window.addEventListener('resize', collect)

package/src/components/edit-page-link.tsx

@@ -0,0 +1,22 @@
+import { Pencil } from 'lucide-react'
+
+import { getMessages } from '../lib/i18n'
+import { Button } from './button'
+
+export function EditPageLink({ href, lang }: { href: string; lang?: string }) {
+  const messages = getMessages(lang)
+  return (
+    <Button
+      variant="link"
+      size="link"
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="mb-4 self-start text-sm text-muted-foreground hover:text-foreground"
+    >
+      <Pencil aria-hidden="true" className="me-1.5 inline size-3.5" />
+      {messages.editThisPage}
+      <span className="sr-only"> ({messages.opensInNewTab})</span>
+    </Button>
+  )
+}

package/src/components/heading-permalink.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import { Check, Hash } from 'lucide-react'
+import {
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+
+import { useMessages } from '../providers/locale-provider'
+
+export function HeadingPermalink({
+  id,
+  children,
+}: {
+  id: string
+  children: ReactNode
+}) {
+  const messages = useMessages()
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  const href = `#${encodeURIComponent(id)}`
+
+  async function copy(event: MouseEvent<HTMLAnchorElement>) {
+    if (
+      event.defaultPrevented ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.altKey ||
+      event.shiftKey ||
+      !navigator.clipboard?.writeText
+    )
+      return
+
+    try {
+      await navigator.clipboard.writeText(event.currentTarget.href)
+    } catch {
+      // The native link still takes the reader to the section.
+      return
+    }
+
+    setCopied(true)
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setCopied(false), 1800)
+  }
+
+  const Icon = copied ? Check : Hash
+
+  return (
+    <>
+      <a
+        href={href}
+        onClick={copy}
+        title={messages.sectionPermalink}
+        className="rounded-sm text-inherit no-underline underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-2 focus-visible:outline-ring"
+      >
+        {children}
+      </a>
+      <span
+        aria-hidden="true"
+        className="pointer-events-none ms-1 inline-flex size-6 items-center justify-center align-middle text-muted-foreground pointer-fine:opacity-0 pointer-fine:group-hover/mdx-heading:opacity-100 pointer-fine:group-focus-within/mdx-heading:opacity-100"
+      >
+        <Icon className="size-4" />
+      </span>
+      <span role="status" className="sr-only">
+        {copied ? messages.sectionLinkCopied : ''}
+      </span>
+    </>
+  )
+}

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

@@ -106,6 +106,7 @@ export function MdxCodeBlock({
         if (lineNumbers && node === '\n') return null
         if (!isValidElement<LineProps>(node)) return node
         const variant = node.props['data-rdx-line-variant']
+        const hasDiffMarker = variant === 'added' || variant === 'removed'
         if (
           !variant &&
           !(lineNumbers && node.props.className?.split(/\s+/).includes('line'))
@@ -124,15 +125,20 @@ export function MdxCodeBlock({
         return (
           <CodeBlockLine
             key={node.key}
+            className={
+              hasDiffMarker
+                ? '[&>[data-slot=code-block-line-content]]:ps-[1ch]'
+                : undefined
+            }
             variant={
-              variant === 'added' || variant === 'removed'
+              hasDiffMarker
                 ? variant
                 : variant === 'hunk'
                   ? 'highlighted'
                   : 'default'
             }
           >
-            {variant === 'added' || variant === 'removed'
+            {hasDiffMarker
               ? withoutMarker(node.props.children)
               : node.props.children}
           </CodeBlockLine>

package/src/components/mdx-components.tsx

@@ -29,6 +29,7 @@ import {
 } from './code-block'
 import { MdxCodeBlock } from './mdx-code-block'
 import { Kbd, KbdGroup } from './kbd'
+import { HeadingPermalink } from './heading-permalink'
 import { MdxKeyboardShortcut } from './mdx-keyboard-shortcut'
 import {
   Table,
@@ -41,6 +42,7 @@ import {
   TableRow,
 } from './table'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
+import { Steps, Step, StepTitle } from './steps'
 import { Separator } from '@lexibase/rdx-ui/components/separator'
 
 function linkedImages(children: ReactNode): ReactNode {
@@ -71,16 +73,46 @@ function MdxTable({ lang, className, ...props }: ComponentProps<'table'>) {
   )
 }
 
+function containsLink(children: ReactNode): boolean {
+  return Children.toArray(children).some(
+    (child) =>
+      isValidElement<{ href?: string; children?: ReactNode }>(child) &&
+      (child.type === 'a' ||
+        child.props.href !== undefined ||
+        containsLink(child.props.children))
+  )
+}
+
+function heading(Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', styles: string) {
+  return function MdxHeading({
+    className,
+    children,
+    id,
+    ...props
+  }: ComponentProps<'h2'>) {
+    const title = <span data-rdx-heading-text>{children}</span>
+    return (
+      <Tag
+        id={id}
+        className={cn('group/mdx-heading', styles, className)}
+        {...props}
+      >
+        {id && !containsLink(children) ? (
+          <HeadingPermalink key={id} id={id}>
+            {title}
+          </HeadingPermalink>
+        ) : (
+          title
+        )}
+      </Tag>
+    )
+  }
+}
+
 export const mdxComponents = {
-  h1: ({ className, ...props }: ComponentProps<'h1'>) => (
-    <h1 className={cn('text-4xl font-bold my-6', className)} {...props} />
-  ),
-  h2: ({ className, ...props }: ComponentProps<'h2'>) => (
-    <h2 className={cn('text-2xl font-bold my-6', className)} {...props} />
-  ),
-  h3: ({ className, ...props }: ComponentProps<'h3'>) => (
-    <h3 className={cn('text-xl font-bold my-6', className)} {...props} />
-  ),
+  h1: heading('h1', 'text-4xl font-bold my-6'),
+  h2: heading('h2', 'text-2xl font-bold my-6'),
+  h3: heading('h3', 'text-xl font-bold my-6'),
   p: ({ className, ...props }: ComponentProps<'p'>) => (
     <p className={cn('my-4', className)} {...props} />
   ),
@@ -122,15 +154,9 @@ export const mdxComponents = {
     />
   ),
 
-  h4: ({ className, ...props }: ComponentProps<'h4'>) => (
-    <h4 className={cn('text-lg font-semibold my-4', className)} {...props} />
-  ),
-  h5: ({ className, ...props }: ComponentProps<'h5'>) => (
-    <h5 className={cn('text-base font-semibold my-4', className)} {...props} />
-  ),
-  h6: ({ className, ...props }: ComponentProps<'h6'>) => (
-    <h6 className={cn('text-sm font-semibold my-4', className)} {...props} />
-  ),
+  h4: heading('h4', 'text-lg font-semibold my-4'),
+  h5: heading('h5', 'text-base font-semibold my-4'),
+  h6: heading('h6', 'text-sm font-semibold my-4'),
   hr: ({ className, ...props }: ComponentProps<'hr'>) => (
     <hr className={cn('my-8 border-border', className)} {...props} />
   ),
@@ -169,6 +195,9 @@ export const mdxComponents = {
   AccordionItem,
   AccordionTrigger,
   AccordionContent,
+  Steps,
+  Step,
+  StepTitle,
   Tabs,
   TabsList,
   TabsTrigger,

package/src/components/steps.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import { motion, useReducedMotion } from 'motion/react'
+import { Children, useEffect, useRef, useState, type ReactNode } from 'react'
+
+import { cn } from '../lib/utils'
+import { formatMessage } from '../lib/i18n'
+import { useMessages } from '../providers/locale-provider'
+import { Button } from './button'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './card'
+
+function StepPanel({
+  children,
+  active,
+}: {
+  children: ReactNode
+  active: boolean
+}) {
+  const panel = useRef<HTMLDivElement>(null)
+  const wasActive = useRef(active)
+
+  useEffect(() => {
+    if (active && !wasActive.current)
+      panel.current?.focus({ preventScroll: true })
+    wasActive.current = active
+  }, [active])
+
+  return (
+    <div
+      ref={panel}
+      data-slot="step-panel"
+      tabIndex={-1}
+      inert={!active}
+      aria-hidden={!active || undefined}
+      className="min-w-0 shrink-0 basis-full focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
+    >
+      {children}
+    </div>
+  )
+}
+
+export function Steps({ children }: { children: ReactNode }) {
+  const messages = useMessages()
+  const reduceMotion = useReducedMotion()
+  const steps = Children.toArray(children)
+  const [page, setPage] = useState(0)
+  const index = Math.min(page, steps.length - 1)
+  if (index < 0) return null
+
+  function navigate(direction: number) {
+    setPage((current) =>
+      Math.max(
+        0,
+        Math.min(
+          Math.min(current, steps.length - 1) + direction,
+          steps.length - 1
+        )
+      )
+    )
+  }
+
+  return (
+    <Card
+      className="mx-auto my-6 w-full min-w-0 max-w-xl text-base"
+      data-slot="steps"
+    >
+      <CardHeader>
+        <div aria-hidden="true" className="flex gap-1.5">
+          {steps.map((_, position) => (
+            <span
+              key={position}
+              className={cn(
+                'h-1.5 min-w-0 rounded-full motion-safe:transition-[flex-basis,background-color] motion-safe:duration-200',
+                position === index
+                  ? 'basis-10 bg-rdx-selected'
+                  : 'basis-2.5 bg-muted-foreground/25'
+              )}
+            />
+          ))}
+        </div>
+        <p
+          role="status"
+          className="m-0 mt-2 text-sm font-medium text-muted-foreground"
+        >
+          {formatMessage(messages.stepProgress, {
+            current: String(index + 1),
+            total: String(steps.length),
+          })}
+        </p>
+      </CardHeader>
+      <CardContent className="min-w-0">
+        <div className="min-h-32 overflow-clip">
+          <motion.div
+            className="flex items-start"
+            initial={false}
+            animate={{ x: `${-index * 100}%` }}
+            transition={{
+              duration: reduceMotion ? 0 : 0.24,
+              ease: 'easeInOut',
+            }}
+          >
+            {steps.map((step, position) => (
+              <StepPanel key={position} active={position === index}>
+                {step}
+              </StepPanel>
+            ))}
+          </motion.div>
+        </div>
+      </CardContent>
+      {steps.length > 1 && (
+        <CardFooter className="justify-between gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={index === 0}
+            onClick={() => navigate(-1)}
+          >
+            {messages.previous}
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={index === steps.length - 1}
+            onClick={() => navigate(1)}
+          >
+            {messages.next}
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}
+
+export function Step({ children }: { children: ReactNode }) {
+  return <div className="min-w-0 [&>:last-child]:mb-0">{children}</div>
+}
+
+export function StepTitle({ children }: { children: ReactNode }) {
+  return <CardTitle className="text-lg font-semibold">{children}</CardTitle>
+}

package/src/lib/i18n.ts

@@ -31,8 +31,12 @@ const en = {
   closeSidebar: 'Close sidebar',
   previous: 'Previous',
   next: 'Next',
+  stepProgress: 'Step {current} of {total}',
   previousPage: 'Previous page',
   nextPage: 'Next page',
+  sidebarImportant: 'Important',
+  sidebarNew: 'New',
+  editThisPage: 'Edit this page',
   onThisPage: 'On this page',
   search: 'Search…',
   searchDocumentation: 'Search documentation',
@@ -60,6 +64,14 @@ const en = {
   copyCodeError: 'Could not copy. Select the code and copy it manually.',
   copyRetry: 'Could not copy. Try again or copy manually.',
   copied: 'Copied!',
+  copyThisPage: 'Copy this page',
+  copyPageOptions: 'Page copy options',
+  viewMarkdown: 'View Markdown',
+  pageCopied: 'Page Markdown copied to clipboard.',
+  copyPageError:
+    'Could not copy the page. Open View Markdown to copy it manually.',
+  sectionPermalink: 'Copy link to this section',
+  sectionLinkCopied: 'Section link copied to clipboard.',
   copyTab: 'Copy active tab',
   documentationTabs: 'Documentation tabs',
   tabCopied: 'Tab content copied to clipboard.',
@@ -132,8 +144,12 @@ const ptBR = {
   closeSidebar: 'Fechar menu lateral',
   previous: 'Anterior',
   next: 'Próxima',
+  stepProgress: 'Etapa {current} de {total}',
   previousPage: 'Página anterior',
   nextPage: 'Próxima página',
+  sidebarImportant: 'Importante',
+  sidebarNew: 'Novo',
+  editThisPage: 'Editar esta página',
   onThisPage: 'Nesta página',
   search: 'Buscar…',
   searchDocumentation: 'Buscar na documentação',
@@ -162,6 +178,14 @@ const ptBR = {
     '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!',
+  copyThisPage: 'Copiar esta página',
+  copyPageOptions: 'Opções de cópia da página',
+  viewMarkdown: 'Ver Markdown',
+  pageCopied: 'Markdown da página copiado para a área de transferência.',
+  copyPageError:
+    'Não foi possível copiar a página. Abra Ver Markdown para copiar manualmente.',
+  sectionPermalink: 'Copiar link para esta seção',
+  sectionLinkCopied: 'Link da seção copiado para a área de transferência.',
   copyTab: 'Copiar aba ativa',
   documentationTabs: 'Abas da documentação',
   tabCopied: 'Conteúdo da aba copiado para a área de transferência.',

package/src/styles/globals.css

@@ -236,6 +236,18 @@
   }
 }
 
+@keyframes rdx-sidebar-highlight {
+  0% {
+    opacity: 0.35;
+    transform: scale(1);
+  }
+  65%,
+  100% {
+    opacity: 0;
+    transform: scale(2.5);
+  }
+}
+
 @keyframes rdx-page-enter {
   from {
     opacity: 0;