@lexibase/rdx-ui 1.0.0-beta.1 → 1.0.0-beta.2

package/src/components/navbar.tsx

@@ -1,8 +1,7 @@
 import type { ReactNode } from 'react'
 import { Github } from 'lucide-react'
-import Link from 'next/link'
 
-import { Button } from './button'
+import { ButtonLink } from './button-link'
 import { Logo } from './logo'
 import { Separator } from './separator'
 import { ModeToggle } from './mode-toggle'
@@ -16,6 +15,7 @@ export function Navbar({
   docsHref = '/docs',
   docsLink,
   versionMenu,
+  search,
   github,
   showToggleMode = false,
 }: {
@@ -26,6 +26,7 @@ export function Navbar({
   docsHref?: string
   docsLink?: ReactNode
   versionMenu?: ReactNode
+  search?: ReactNode
   github?: { visible: boolean; url: string }
   showToggleMode?: boolean
 }) {
@@ -36,48 +37,41 @@ export function Navbar({
       className="w-full flex flex-wrap shrink-0 items-center justify-between px-6 py-2 border-b border-border gap-y-2"
     >
       <div className="flex items-center gap-1">
-        <Button
+        <ButtonLink
           variant="ghost"
           size={title === '' ? 'icon' : 'default'}
-          asChild
           aria-label={siteTitle}
+          href={homeHref}
+          className="cursor-default flex items-center gap-2"
         >
-          <Link
-            href={homeHref}
-            className="cursor-default flex items-center gap-2"
-          >
-            {logo}
-            {title !== '' && <span>{title}</span>}
-          </Link>
-        </Button>
+          {logo}
+          {title !== '' && <span>{title}</span>}
+        </ButtonLink>
       </div>
       <div className="flex items-center md:gap-x-2 h-4">
+        {search}
         {versionMenu}
         {docsLink ?? (
-          <Button variant="link" size="sm" asChild>
-            <Link href={docsHref}>Docs</Link>
-          </Button>
+          <ButtonLink variant="link" size="sm" href={docsHref}>
+            Docs
+          </ButtonLink>
         )}
         {github?.visible && github.url && (
           <>
             <Separator orientation="vertical" />
-            <Button
+            <ButtonLink
               variant="ghost"
               size="icon"
               title="GitHub"
-              asChild
               aria-label="GitHub"
+              href={github.url}
+              target={github.url === '#' ? undefined : '_blank'}
+              rel={github.url === '#' ? undefined : 'noopener noreferrer'}
+              className="cursor-default"
             >
-              <Link
-                className="cursor-default"
-                href={github.url}
-                target={github.url === '#' ? undefined : '_blank'}
-                rel={github.url === '#' ? undefined : 'noopener noreferrer'}
-              >
-                <Github className="h-[1.2rem] w-[1.2rem]" />
-                <span className="sr-only">GitHub</span>
-              </Link>
-            </Button>
+              <Github className="h-[1.2rem] w-[1.2rem]" />
+              <span className="sr-only">GitHub</span>
+            </ButtonLink>
           </>
         )}
         {showToggleMode && (

package/src/components/popover.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+// Adapted from shadcn/ui's Base Nova Popover.
+import * as React from 'react'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+
+import { cn, mergeStateClassName } from '@lexibase/rdx-ui/lib/utils'
+
+export type PopoverActions = PopoverPrimitive.Root.Actions
+
+function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger(
+  props: React.ComponentProps<typeof PopoverPrimitive.Trigger>
+) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  alignOffset = 0,
+  side = 'bottom',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Popup> &
+  Pick<
+    React.ComponentProps<typeof PopoverPrimitive.Positioner>,
+    'align' | 'alignOffset' | 'side' | 'sideOffset'
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={mergeStateClassName(
+            'z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden 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 data-closed:zoom-out-95 motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Title>) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn('font-medium', className)}
+      {...props}
+    />
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverTitle }

package/src/components/separator.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
 
 import { cn } from '@lexibase/rdx-ui/lib/utils'
 
@@ -10,16 +9,19 @@ function Separator({
   orientation = 'horizontal',
   decorative = true,
   ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorPrimitive.Props & { decorative?: boolean }) {
   return (
-    <SeparatorPrimitive.Root
+    <SeparatorPrimitive
       data-slot="separator"
-      decorative={decorative}
+      role={decorative ? 'none' : 'separator'}
+      aria-hidden={decorative || undefined}
       orientation={orientation}
-      className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className
-      )}
+      className={(state) =>
+        cn(
+          'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+          typeof className === 'function' ? className(state) : className
+        )
+      }
       {...props}
     />
   )

package/src/components/tabs.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+
+import { mergeStateClassName } from '../lib/utils'
+import { Button } from './button'
+
+// Keep document structure and code whitespace, excluding interactive UI chrome.
+function panelText(node: Node): string {
+  if (node.nodeType === 3) {
+    const text = node.textContent ?? ''
+    return text.includes('\n') && !text.trim() ? '' : text
+  }
+  if (!(node instanceof HTMLElement)) return ''
+  if (
+    node.hidden ||
+    node.inert ||
+    node.getAttribute('aria-hidden') === 'true' ||
+    node.matches(
+      'button, [role="status"], [data-slot="tabs-header"], script, style'
+    )
+  )
+    return ''
+  if (node.matches('[data-rdx-code-block]')) {
+    return `${node.querySelector('pre')?.textContent ?? ''}\n`
+  }
+  if (node.tagName === 'PRE') return `${node.textContent ?? ''}\n`
+  if (node.tagName === 'BR') return '\n'
+  const text = Array.from(node.childNodes, panelText).join('')
+  if (!text) return ''
+  if (
+    node.matches('p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, div, aside')
+  ) {
+    return text.endsWith('\n\n')
+      ? text
+      : text + (text.endsWith('\n') ? '\n' : '\n\n')
+  }
+  if (node.matches('li, tr')) return `${text}\n`
+  if (node.matches('th, td')) return `${text}\t`
+  return text
+}
+
+function CopyTabButton() {
+  const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
+  const pending = useRef(false)
+  const mounted = useRef(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  useEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+      clearTimeout(timer.current)
+    }
+  }, [])
+
+  async function copy(button: HTMLButtonElement) {
+    if (pending.current) return
+    pending.current = true
+    clearTimeout(timer.current)
+    try {
+      const root = button.closest('[data-slot="tabs"]')
+      const panel = Array.from(
+        root?.querySelectorAll<HTMLElement>('[role="tabpanel"]') ?? []
+      ).find(
+        (element) =>
+          element.closest('[data-slot="tabs"]') === root &&
+          !element.hidden &&
+          !element.inert
+      )
+      if (!panel || !navigator.clipboard?.writeText)
+        throw new Error('Clipboard unavailable')
+      await navigator.clipboard.writeText(
+        panelText(panel).replace(/^\n+|\n+$/g, '')
+      )
+      if (mounted.current) {
+        setStatus('copied')
+        timer.current = setTimeout(() => setStatus('idle'), 2000)
+      }
+    } catch {
+      if (mounted.current) setStatus('error')
+    } finally {
+      pending.current = false
+    }
+  }
+
+  const Icon = status === 'copied' ? Check : Copy
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        aria-label="Copy active tab"
+        title={
+          status === 'error'
+            ? 'Could not copy. Select the tab content and copy it manually.'
+            : status === 'copied'
+              ? 'Copied!'
+              : 'Copy active tab'
+        }
+        data-status={status}
+        className="mr-1.5 size-7 shrink-0 text-muted-foreground hover:text-foreground data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:text-amber-600 [&>svg]:size-3.5"
+        onClick={(event) => copy(event.currentTarget)}
+      >
+        <Icon aria-hidden="true" />
+      </Button>
+      <span
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+      >
+        {status === 'copied'
+          ? 'Tab content copied to clipboard.'
+          : status === 'error'
+            ? 'Could not copy. Select the tab content and copy it manually.'
+            : ''}
+      </span>
+    </>
+  )
+}
+
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={mergeStateClassName(
+        'my-6 min-w-0 max-w-full rounded-lg border border-border bg-muted/20 text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsList({ className, ...props }: TabsPrimitive.List.Props) {
+  return (
+    <div
+      data-slot="tabs-header"
+      className="flex min-w-0 items-center rounded-t-lg border-b border-border bg-muted/30"
+    >
+      <TabsPrimitive.List
+        data-slot="tabs-list"
+        className={mergeStateClassName(
+          'flex min-w-0 flex-1 gap-0.5 overflow-x-auto p-1.5 data-[orientation=vertical]:flex-col',
+          className
+        )}
+        {...props}
+      />
+      <CopyTabButton />
+    </div>
+  )
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <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',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={mergeStateClassName(
+        'min-w-0 rounded-b-lg p-3 outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&>[data-rdx-code-block]]:my-3 [&_[data-rdx-code-block]>pre]:p-3',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/components/version-dropdown.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLinkItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
@@ -29,7 +30,7 @@ function VersionIcon({ kind }: { kind: VersionOption['kind'] }) {
   return <Icon className="size-4" />
 }
 
-/** Uses the same Radix primitives, sizes, icons and states as the showcase. */
+/** Shared version menu for the runtime and development showcase. */
 export function VersionDropdown({
   options,
   currentId,
@@ -61,44 +62,47 @@ export function VersionDropdown({
       <DropdownMenuItem
         key={option.id}
         className={className}
-        onSelect={() => onSelect(option.id)}
+        onClick={() => onSelect(option.id)}
       >
         {content}
       </DropdownMenuItem>
     ) : (
-      <DropdownMenuItem key={option.id} className={className} asChild>
-        <Link
-          href={option.href}
-          aria-current={option.id === current.id ? 'true' : undefined}
-        >
-          {content}
-        </Link>
-      </DropdownMenuItem>
+      <DropdownMenuLinkItem
+        key={option.id}
+        className={className}
+        closeOnClick
+        render={<Link href={option.href} />}
+        aria-current={option.id === current.id ? 'true' : undefined}
+      >
+        {content}
+      </DropdownMenuLinkItem>
     )
   }
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          data-rdx-version-trigger
-          variant="outline"
-          size="sm"
-          className="min-w-[134px] capitalize"
-          aria-label={`Documentation version: ${current.label}`}
+      <DropdownMenuTrigger
+        render={
+          <Button
+            data-rdx-version-trigger
+            variant="outline"
+            size="sm"
+            className="min-w-[134px] capitalize"
+            aria-label={`Documentation version: ${current.label}`}
+          />
+        }
+      >
+        {current.label}
+        <DropdownMenuShortcut
+          className={
+            current.kind === 'live'
+              ? 'text-blue-500'
+              : current.kind === 'archived'
+                ? 'text-red-500'
+                : 'text-primary'
+          }
         >
-          {current.label}
-          <DropdownMenuShortcut
-            className={
-              current.kind === 'live'
-                ? 'text-blue-500'
-                : current.kind === 'archived'
-                  ? 'text-red-500'
-                  : 'text-primary'
-            }
-          >
-            <VersionIcon kind={current.kind} />
-          </DropdownMenuShortcut>
-        </Button>
+          <VersionIcon kind={current.kind} />
+        </DropdownMenuShortcut>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align="start" collisionPadding={8}>
         {live.length > 0 && (

package/src/components/version-notice.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import { ArrowRight } from 'lucide-react'
+
+import { Callout } from './callout'
+
+/** Presentation only: version selection remains the responsibility of the caller. */
+export function VersionNotice({
+  kind,
+  currentHref,
+}: {
+  kind: 'canary' | 'outdated'
+  currentHref: string
+}) {
+  const isCanary = kind === 'canary'
+  return (
+    <Callout
+      data-rdx-version-notice={kind}
+      variant={isCanary ? 'tip' : 'warning'}
+      title={isCanary ? 'Pre-release documentation' : 'Outdated documentation'}
+      className="mt-0 mb-5"
+    >
+      <p>
+        {isCanary
+          ? 'This is a pre-release version of the documentation.'
+          : 'This is an outdated version of the documentation.'}{' '}
+        <Link
+          href={currentHref}
+          className="font-medium text-foreground underline decoration-current/40 underline-offset-4 transition-colors hover:decoration-current focus-visible:rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          Go back to the current version
+          <ArrowRight
+            aria-hidden="true"
+            className="ml-1 inline size-3.5 align-text-bottom"
+          />
+        </Link>
+      </p>
+    </Callout>
+  )
+}

package/src/lib/docs-search.ts

@@ -0,0 +1,68 @@
+import type { RdxSearchEntry, RdxSearchIndex } from '@lexibase/rdx-types'
+
+export function normalizeSearch(value: string) {
+  return value.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase()
+}
+
+export function prepareSearch(index: RdxSearchIndex) {
+  if (index.schemaVersion !== 1 || !Array.isArray(index.entries))
+    throw new Error('Invalid search index')
+  return index.entries.map((entry) => {
+    if (
+      !['href', 'title', 'category', 'section', 'text'].every(
+        (field) => typeof entry[field as keyof RdxSearchEntry] === 'string'
+      ) ||
+      !/^\/docs(?:\/|$)/.test(entry.href)
+    )
+      throw new Error('Invalid search entry')
+    return {
+      entry,
+      title: normalizeSearch(entry.title),
+      section: normalizeSearch(entry.section),
+      category: normalizeSearch(entry.category),
+      text: normalizeSearch(entry.text),
+    }
+  })
+}
+
+export type PreparedSearch = ReturnType<typeof prepareSearch>
+
+/** Require every query term, favor page/section titles, and bound result count. */
+export function searchDocumentation(index: PreparedSearch, query: string) {
+  const normalized = normalizeSearch(query.trim().slice(0, 120))
+  const terms = [...new Set(normalized.split(/\s+/).filter(Boolean))].slice(
+    0,
+    8
+  )
+  if (!terms.length) return []
+  return index
+    .map((item) => {
+      let score = 0
+      for (const term of terms) {
+        const weight =
+          (item.title.includes(term) ? 12 : 0) +
+          (item.section.includes(term) ? 10 : 0) +
+          (item.category.includes(term) ? 2 : 0) +
+          (item.text.includes(term) ? 1 : 0)
+        if (!weight) return { item, score: 0 }
+        score += weight
+      }
+      if (item.title === normalized) score += 30
+      if (item.section === normalized) score += 25
+      return { item, score }
+    })
+    .filter((item) => item.score > 0)
+    .sort(
+      (a, b) =>
+        b.score - a.score || a.item.entry.href.localeCompare(b.item.entry.href)
+    )
+    .slice(0, 12)
+    .map(({ item }) => {
+      const term = terms.find((term) => item.text.includes(term))
+      const offset = term ? Math.max(0, item.text.indexOf(term) - 50) : 0
+      return {
+        ...item.entry,
+        excerpt: `${offset ? '…' : ''}${item.entry.text.slice(offset, offset + 170)}${item.entry.text.length > offset + 170 ? '…' : ''}`,
+      }
+    })
+}

package/src/lib/utils.ts

@@ -4,3 +4,13 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+/** Preserve Base UI state callbacks while merging the shared theme classes. */
+export function mergeStateClassName<State>(
+  base: string,
+  className?: string | ((state: State) => string | undefined)
+) {
+  return typeof className === 'function'
+    ? (state: State) => cn(base, className(state))
+    : cn(base, className)
+}

package/src/styles/globals.css

@@ -77,6 +77,28 @@
 }
 
 @theme inline {
+  /* 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;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--accordion-panel-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--accordion-panel-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -123,3 +145,15 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Shiki uses the same GitHub light/dark palette as shadcn's highlighter.
+   Keep the approved RDX surface and apply only token foreground colors. */
+[data-rdx-code-block] pre.shiki,
+[data-rdx-code-block] pre.shiki span {
+  color: var(--shiki-light, inherit);
+}
+
+.dark [data-rdx-code-block] pre.shiki,
+.dark [data-rdx-code-block] pre.shiki span {
+  color: var(--shiki-dark, inherit);
+}

package/src/styles/globals.d.css.ts

@@ -0,0 +1,2 @@
+// Global styles are loaded for their side effects; they export no JS values.
+export {}