@lexibase/rdx-ui 3.5.2 → 3.5.4

package/README.md

@@ -102,7 +102,7 @@ automatically registered in MDX. Import them from
 `@lexibase/rdx-ui/components/tabs` in React files. Use an explicit `defaultValue`,
 matching string values and an `aria-label` on each list. Arrow keys move focus;
 Enter or Space activates a tab. The list scrolls on small screens. See
-the repository's `MDX.md` and `docs/examples/tabs.mdx` for complete examples.
+the [Tabs guide](https://github.com/lexibase/rdx/blob/main/apps/web/docs/03-writing-documentation/tabs.mdx) for complete examples.
 
 ## Documentation accordion
 
@@ -111,4 +111,4 @@ Base UI Accordion and are registered in MDX. Import them from
 `@lexibase/rdx-ui/components/accordion` in React files. One item opens at a time
 by default; `multiple` allows independent expansion. Triggers use native buttons
 inside `h3` headings with normal Tab navigation and Enter/Space activation.
-See `MDX.md` and `docs/examples/accordion.mdx` for examples and React options.
+See the [Accordion guide](https://github.com/lexibase/rdx/blob/main/apps/web/docs/03-writing-documentation/accordion.mdx) for examples.

package/THIRD_PARTY_NOTICES.md

@@ -2,12 +2,13 @@
 
 ## shadcn/ui
 
-Table, Kbd and Sheet use the official base-nova registry components. Dialog, Code Block,
+Table, Kbd, Badge and Sheet use the official base-nova registry components. Dialog, Code Block,
 useHighlightedCode, and highlighter are installed in full from that registry,
 with project imports, icons, localization and clipboard failure feedback wired
 to RDX. The official shadcn 4.22.1 tailwind.css is included as styles/shadcn.css.
 https://ui.shadcn.com/docs/components/base/table and
 https://ui.shadcn.com/docs/components/base/kbd and
+https://ui.shadcn.com/docs/components/base/badge and
 https://ui.shadcn.com/docs/components/base/code-block and
 https://ui.shadcn.com/docs/components/base/dialog and
 https://ui.shadcn.com/docs/components/base/sheet.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "3.5.2",
+  "version": "3.5.4",
   "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.4.0"
+    "@lexibase/rdx-types": "2.5.0"
   },
   "peerDependencies": {
     "next": "^16.4.2",
@@ -59,8 +59,8 @@
     "react-dom": "19.3.1",
     "tailwindcss": "^4.3.3",
     "typescript": "6.0.3",
-    "@rdx/typescript-config": "1.0.0",
-    "@rdx/eslint-config": "1.0.0"
+    "@rdx/eslint-config": "1.0.0",
+    "@rdx/typescript-config": "1.0.0"
   },
   "exports": {
     "./globals.css": {

package/src/components/badge.tsx

@@ -0,0 +1,51 @@
+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'
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline:
+          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost:
+          'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/src/components/code-block.tsx

@@ -90,6 +90,7 @@ function CodeBlockCopyButton({
   value,
   variant = 'ghost',
   size = 'icon-xs',
+  children,
   className,
   onClick,
   ...props
@@ -160,6 +161,7 @@ function CodeBlockCopyButton({
         {...props}
       >
         {copied ? <CheckIcon /> : <CopyIcon />}
+        {children}
       </Button>
       <span
         role="status"

package/src/components/docs-sidebar.tsx

@@ -8,6 +8,7 @@ import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
 import type { RdxPageHighlight } from '@lexibase/rdx-types'
 
 import { Button } from './button'
+import { HighlightDot } from './highlight-dot'
 import { Separator } from './separator'
 import {
   Sheet,
@@ -95,13 +96,11 @@ export function DocsSidebar({
             >
               {link.label}
               {link.highlighting && (
-                <span
-                  aria-hidden="true"
+                <HighlightDot
+                  kind={link.highlighting}
                   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>
+                  className="ms-auto"
+                />
               )}
             </Button>
           ))}

package/src/components/highlight-dot.tsx

@@ -0,0 +1,27 @@
+import type { ComponentPropsWithoutRef } from 'react'
+import type { RdxPageHighlight } from '@lexibase/rdx-types'
+
+import { cn } from '../lib/utils'
+
+export function HighlightDot({
+  kind,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'span'> & { kind: RdxPageHighlight }) {
+  return (
+    <span
+      {...props}
+      aria-hidden="true"
+      data-rdx-highlight-dot={kind}
+      className={cn(
+        'relative size-2 shrink-0 rounded-full bg-current',
+        kind === 'important'
+          ? 'text-amber-600 dark:text-amber-400'
+          : 'text-blue-600 dark:text-blue-400',
+        className
+      )}
+    >
+      <span className="absolute inset-0 rounded-full bg-current opacity-0 motion-safe:animate-[rdx-sidebar-highlight_2.8s_ease-out_infinite]" />
+    </span>
+  )
+}

package/src/components/home.tsx

@@ -1,47 +1,186 @@
-import type { ReactNode } from 'react'
+import type { ComponentPropsWithoutRef, ReactNode } from 'react'
+import { ArrowRight } from 'lucide-react'
 
+import { cn } from '../lib/utils'
 import { Button } from './button'
 import { Logo } from './logo'
 
-/** The default landing page from apps/web, not a separate marketing theme. */
+/** Gives each HomeSection the height of the visible homepage area. */
+export function HomeSections({ children }: { children: ReactNode }) {
+  return <div className="relative h-full">{children}</div>
+}
+
+/** A homepage section that fills the viewport and grows with its content. */
+export function HomeSection({
+  children,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'section'>) {
+  return (
+    <section
+      className={cn('grid min-h-full content-center px-6 py-12', className)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+/** The responsive hero layout used by the official site and project homepages. */
+export function HomeHeroLayout({
+  intro,
+  preview,
+  details,
+  previewInert,
+  previewProps,
+  ...props
+}: Omit<ComponentPropsWithoutRef<'section'>, 'children' | 'className'> & {
+  intro: ReactNode
+  preview: ReactNode
+  details?: ReactNode
+  previewInert?: boolean
+  previewProps?: Pick<
+    ComponentPropsWithoutRef<'div'>,
+    'className' | 'onPointerMove' | 'onPointerLeave' | 'onPointerCancel'
+  >
+}) {
+  const { className: previewClassName, ...previewEvents } = previewProps ?? {}
+
+  return (
+    <section
+      className="rdx-home-stage mx-auto grid w-full max-w-[1440px] content-center items-center gap-8 px-6 py-10 md:px-10 md:py-20 lg:min-h-[calc(100svh-3rem)] lg:grid-cols-[0.8fr_1.2fr] lg:gap-x-12 lg:gap-y-5"
+      {...props}
+    >
+      <div className="rdx-home-copy min-w-0">{intro}</div>
+      <div
+        className={cn(
+          'rdx-home-preview-shell min-w-0 lg:col-start-2 lg:row-start-1',
+          details && 'lg:row-span-2',
+          previewClassName
+        )}
+        inert={previewInert}
+        aria-hidden={previewInert || undefined}
+        {...previewEvents}
+      >
+        {preview}
+      </div>
+      {details && (
+        <div className="rdx-home-css min-w-0 lg:col-start-1 lg:row-start-2">
+          {details}
+        </div>
+      )}
+    </section>
+  )
+}
+
+export function HomePreviewFrame({
+  caption,
+  children,
+  className,
+  ...props
+}: ComponentPropsWithoutRef<'div'> & { caption: string }) {
+  return (
+    <div
+      className={cn(
+        'overflow-hidden rounded-xl border border-border bg-background text-foreground shadow-2xl shadow-black/10',
+        className
+      )}
+      {...props}
+    >
+      <div className="flex h-10 items-center gap-1.5 border-b border-border bg-muted/30 px-4">
+        <span className="size-2 rounded-full bg-muted-foreground/30" />
+        <span className="size-2 rounded-full bg-muted-foreground/30" />
+        <span className="size-2 rounded-full bg-muted-foreground/30" />
+        <span className="mx-auto truncate pr-8 text-[10px] text-muted-foreground">
+          {caption}
+        </span>
+      </div>
+      {children}
+    </div>
+  )
+}
+
+/** The built-in homepage with project branding. */
 export function Home({
   title = 'RDX',
   logo,
   description,
   buttons = [],
+  preview,
+  previewTitle = title,
+  previewDescription,
+  children,
 }: {
   title?: string
   logo?: ReactNode
   description?: string
-  buttons?: { label: string; href: string }[]
+  buttons?: { label: string; href: string; className?: string }[]
+  preview?: ReactNode
+  previewTitle?: string
+  previewDescription?: string
+  children?: ReactNode
 }) {
   return (
-    <section
-      data-rdx-home
-      className="w-full h-full flex flex-col items-center justify-center"
-    >
-      {logo ?? (
-        <Logo className="size-52 hover:scale-105 hover:rotate-1 transition-[scale,rotation] duration-1000" />
-      )}
-      <span className="text-3xl font-mono uppercase">{title}</span>
-      {description && (
-        <p className="text-sm text-muted-foreground text-center max-w-xl mt-4 px-6">
-          {description}
-        </p>
-      )}
-      {buttons.length > 0 && (
-        <div className="flex flex-wrap justify-center gap-3 mt-6 px-6">
-          {buttons.map((button, index) => (
-            <Button
-              key={`${index}:${button.href}`}
-              variant={index === 0 ? 'default' : 'outline'}
-              href={button.href}
-            >
-              {button.label}
-            </Button>
-          ))}
-        </div>
-      )}
-    </section>
+    <HomeSections>
+      <HomeSection data-rdx-home className="min-h-full overflow-x-clip p-0">
+        <HomeHeroLayout
+          previewInert
+          intro={
+            <>
+              <h1 className="text-3xl font-semibold leading-tight tracking-tight wrap-break-word sm:text-4xl lg:text-6xl lg:leading-none">
+                {title}
+              </h1>
+              {description && (
+                <p className="mt-3 max-w-md text-sm leading-6 text-muted-foreground lg:mt-6 lg:text-base lg:leading-7">
+                  {description}
+                </p>
+              )}
+              {buttons.length > 0 && (
+                <div className="mt-4 flex flex-wrap gap-3 lg:mt-7">
+                  {buttons.map((button, index) => (
+                    <Button
+                      key={`${index}:${button.href}`}
+                      variant={index === 0 ? 'default' : 'outline'}
+                      href={button.href}
+                      className={button.className}
+                    >
+                      {button.label} {index === 0 && <ArrowRight />}
+                    </Button>
+                  ))}
+                </div>
+              )}
+            </>
+          }
+          preview={
+            preview ?? (
+              <HomePreviewFrame caption={title}>
+                <div className="flex items-center gap-2 border-b border-border px-5 py-3 text-sm font-semibold">
+                  {logo ?? <Logo className="size-5" />}
+                  {title}
+                </div>
+                <div className="flex min-h-72">
+                  <div className="w-36 shrink-0 border-r border-border p-3">
+                    <p className="rounded-md bg-accent px-2 py-1.5 text-xs font-medium text-accent-foreground">
+                      {previewTitle}
+                    </p>
+                  </div>
+                  <div className="min-w-0 flex-1 wrap-break-word p-7">
+                    <p className="text-2xl font-semibold tracking-tight">
+                      {previewTitle}
+                    </p>
+                    {previewDescription && (
+                      <p className="mt-4 text-sm leading-6 text-muted-foreground">
+                        {previewDescription}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </HomePreviewFrame>
+            )
+          }
+        />
+      </HomeSection>
+      {children}
+    </HomeSections>
   )
 }

package/src/components/language-dropdown.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { ExternalLink, Languages } from 'lucide-react'
-import Link from 'next/link'
 import { Button } from './button'
 import {
   DropdownMenu,
@@ -51,7 +50,8 @@ export function LanguageDropdown({
               key={option.code}
               className={option.code === current ? 'bg-accent/30' : undefined}
               closeOnClick
-              render={<Link href={option.href} hrefLang={option.code} />}
+              // A new document lets the locale layout initialize its theme script.
+              render={<a href={option.href} hrefLang={option.code} />}
               aria-current={option.code === current ? 'true' : undefined}
             >
               {option.label}

package/src/components/navbar.tsx

@@ -14,6 +14,7 @@ export function Navbar({
   siteTitle = 'RDX',
   logo = <Logo className="size-5" />,
   homeHref = '/',
+  leadingLinks,
   docsHref = '/docs',
   docsLink,
   versionMenu,
@@ -27,6 +28,7 @@ export function Navbar({
   siteTitle?: string
   logo?: ReactNode
   homeHref?: string
+  leadingLinks?: ReactNode
   docsHref?: string
   docsLink?: ReactNode
   versionMenu?: ReactNode
@@ -42,7 +44,7 @@ export function Navbar({
       aria-label={messages.mainNavigation}
       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">
+      <div className="flex items-center gap-3 sm:gap-5">
         <Button
           variant="ghost"
           size={title === '' ? 'icon' : 'default'}
@@ -53,6 +55,7 @@ export function Navbar({
           {logo}
           {title !== '' && <span>{title}</span>}
         </Button>
+        {leadingLinks}
       </div>
       <div className="flex items-center gap-x-1 md:gap-x-2 h-4">
         {search}

package/src/styles/globals.css

@@ -268,3 +268,67 @@
     transform: translateX(var(--rdx-page-offset));
   }
 }
+
+.rdx-home-stage {
+  position: relative;
+  isolation: isolate;
+}
+
+.rdx-home-copy,
+.rdx-home-css {
+  position: relative;
+  z-index: 1;
+}
+
+.rdx-home-preview-shell {
+  width: calc(100% + 2rem);
+  transform: perspective(1400px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg);
+  transform-origin: center;
+}
+
+@media (max-width: 1023px) {
+  .rdx-home-stage {
+    overflow: clip;
+    row-gap: 1.25rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .rdx-home-copy {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .rdx-home-preview-shell {
+    position: absolute;
+    z-index: 0;
+    top: 1.5rem;
+    left: max(13rem, calc(100% - 8.5rem));
+    width: 40rem;
+    height: 33rem;
+    overflow: hidden;
+    pointer-events: none;
+    opacity: 0.95;
+    transform: perspective(1400px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg)
+      scale(0.56);
+    transform-origin: top left;
+    mask-image: linear-gradient(to bottom, black, black 65%, transparent);
+  }
+
+  .rdx-home-preview-shell > p {
+    display: none;
+  }
+
+  .rdx-home-preview-sidebar {
+    display: block;
+  }
+}
+
+@media (max-width: 374px), (max-width: 1023px) and (max-height: 740px) {
+  .rdx-home-preview-shell {
+    transform: perspective(1400px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg)
+      scale(0.48);
+  }
+}