@lexibase/rdx-ui 3.3.0 → 3.5.0

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" />}

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-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,