@lexibase/rdx-ui 0.0.0-stage → 1.0.0-beta.1

package/LICENSE

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2025 Lexibase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# RDX UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The shared theme used by the RDX development website and generated documentation
+sites. The source of truth is `packages/rdx-ui/src`: Radix dropdowns, buttons,
+logo, theme provider, navbar, sidebar, landing page and MDX components.
+
+Published as `@lexibase/rdx-ui`. React/Next.js source is intentionally shipped
+without bundling so Next.js preserves server/client component boundaries. Add
+the package to `transpilePackages` when using it outside the RDX runtime.
+The RDX runtime already configures this, PostCSS and Tailwind source scanning.
+
+```tsx
+import { Home } from '@lexibase/rdx-ui/components/home'
+
+export default function MyHome() {
+  return <Home title="My project" />
+}
+```
+
+Configure project-owned components via `homepage.component` and `navbar.logo`.
+Do not edit generated `.rdx/` files. Installing the versioning plugin does not
+change this theme: it contributes data to the shared version dropdown.

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-beta.1",
+  "type": "module",
+  "description": "The shared RDX documentation theme and UI components.",
+  "license": "MIT",
+  "files": [
+    "src",
+    "postcss.config.mjs",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lexibase/rdx.git",
+    "directory": "packages/rdx-ui"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.13",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.542.0",
+    "next-themes": "^0.4.6",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.3.8"
+  },
+  "peerDependencies": {
+    "next": "^15.5.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.13",
+    "@types/node": "^22.15.3",
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.1",
+    "eslint": "^9.34.0",
+    "postcss": "^8.5.6",
+    "next": "^15.5.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwindcss": "^4.1.13",
+    "typescript": "5.9.2",
+    "@rdx/typescript-config": "1.0.0",
+    "@rdx/eslint-config": "1.0.0"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./contenxts/*": "./src/contexts/*",
+    "./providers/*": "./src/providers/*.tsx"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  }
 }

package/postcss.config.mjs

@@ -0,0 +1,12 @@
+import { createRequire } from 'node:module'
+
+const require = createRequire(import.meta.url)
+
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    [require.resolve('@tailwindcss/postcss')]: {},
+  },
+}
+
+export default config

package/src/components/button.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 dark:hover:bg-destructive/40',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        primary:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/80',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+        link: 'inline-block',
+      },
+      active: {
+        true: 'bg-accent text-accent-foreground dark:bg-accent/50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      active: false,
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  active,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+    active?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, active, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/docs-sidebar.tsx

@@ -0,0 +1,102 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { SidebarClose, SidebarOpen } from 'lucide-react'
+import Link from 'next/link'
+
+import { Button } from './button'
+import { Separator } from './separator'
+
+export type SidebarCategory = {
+  title: string
+  links: { href: string; label: string }[]
+}
+
+export function DocsSidebar({
+  categories,
+  pathname,
+}: {
+  categories: SidebarCategory[]
+  pathname: string
+}) {
+  const [isOpen, setIsOpen] = useState(false)
+  const dialog = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    if (isOpen && !dialog.current?.open) dialog.current?.showModal()
+    if (!isOpen && dialog.current?.open) dialog.current?.close()
+  }, [isOpen])
+  useEffect(() => {
+    setIsOpen(false)
+  }, [pathname])
+  const content = (
+    <nav aria-label="Documentation pages">
+      {categories.map((category, index) => (
+        <div
+          key={`${index}:${category.title}`}
+          className="flex flex-col gap-0.5 mb-3 first:mt-4"
+        >
+          <p className="text-xs text-ring font-semibold uppercase mb-1">
+            {category.title}
+          </p>
+          {category.links.map((link) => (
+            <Button
+              key={link.href}
+              variant="ghost"
+              size="sm"
+              className="justify-start"
+              active={pathname === link.href}
+              asChild
+              aria-label={link.label}
+            >
+              <Link
+                className="text-sm text-primary"
+                href={link.href}
+                onClick={() => setIsOpen(false)}
+                aria-current={pathname === link.href ? 'page' : undefined}
+              >
+                {link.label}
+              </Link>
+            </Button>
+          ))}
+          {index < categories.length - 1 && <Separator className="my-4" />}
+        </div>
+      ))}
+    </nav>
+  )
+  return (
+    <>
+      <div className="md:hidden absolute top-2 left-4 z-30">
+        <Button
+          variant="ghost"
+          onClick={() => setIsOpen(true)}
+          aria-label="Open sidebar"
+        >
+          <SidebarOpen className="size-4" />
+        </Button>
+      </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"
+      >
+        {content}
+      </aside>
+      <dialog
+        ref={dialog}
+        aria-label="Documentation navigation"
+        onClose={() => setIsOpen(false)}
+        className="fixed inset-0 m-0 h-dvh max-h-none w-full max-w-none bg-background text-foreground border-0 p-4 backdrop:bg-black/40"
+      >
+        <div className="flex justify-end mb-4">
+          <Button
+            variant="ghost"
+            onClick={() => setIsOpen(false)}
+            aria-label="Close sidebar"
+          >
+            <SidebarClose className="size-4" />
+          </Button>
+        </div>
+        {isOpen && content}
+      </dialog>
+    </>
+  )
+}

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
+
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/src/components/home.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+import Link from 'next/link'
+
+import { Button } from './button'
+import { Logo } from './logo'
+
+/** The default landing page from apps/web, not a separate marketing theme. */
+export function Home({
+  title = 'RDX',
+  logo,
+  description,
+  buttons = [],
+}: {
+  title?: string
+  logo?: ReactNode
+  description?: string
+  buttons?: { label: string; href: string }[]
+}) {
+  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'}
+              asChild
+            >
+              <Link href={button.href}>{button.label}</Link>
+            </Button>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/loading-button.tsx

@@ -0,0 +1,19 @@
+import { Spline } from 'lucide-react'
+import { Button } from '@lexibase/rdx-ui/components/button'
+
+export function LoadingButton() {
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      className="w-[134px] px-9 overflow-hidden"
+      disabled
+      aria-busy="true"
+      aria-label="Loading versions"
+    >
+      <div className="animate-spin flex items-center justify-center">
+        <Spline className="size-4" />
+      </div>
+    </Button>
+  )
+}

package/src/components/logo.tsx

@@ -0,0 +1,12 @@
+export const Logo = ({ className }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 681 606"
+    className={className}
+  >
+    <path d="m94.3 40.4-2.8 2.4-.3 35.7c-.2 26 0 36.1.9 37.1.7.9 3.2 1.4 7 1.4 4.7 0 6-.4 6.9-1.9.6-1.2 1-12.6 1-30 0-24.8.2-28.1 1.6-28.1 1.4 0 29.9 6.5 67.9 15.5 8.3 1.9 21.8 5.1 30 7 8.3 1.9 21.8 5 30 7 8.3 1.9 24.9 5.8 37 8.6 36.6 8.3 45.5 10.8 55 15.4 14.3 7 24.2 17.2 30.6 31.5l2.4 5.5.3 191.5.2 191.4-4.7-4.6c-10.1-9.7-19.2-15.2-33.5-20.3-5.7-2-7.8-3.2-8.2-4.8-.3-1.2-.6-49.2-.6-106.7l.1-104.5-2.6-2.3c-1.4-1.2-3.5-2.2-4.6-2.2-2.8 0-7.5 2.6-8.3 4.5-.3.9-.6 50.5-.6 110.3-.1 79 .2 109.6 1.1 112 1.3 3.9 1.7 4.1 13.9 8.1 23.7 7.9 39.6 23.5 46 45.1 1.3 4.1 2.7 8.1 3.3 8.7 1.4 1.9 9.1 1.6 11.6-.5 1.2-1 2.7-4.2 3.6-7.7 5-19.7 19.5-35.7 39.4-43.2 3.6-1.4 55.8-14.8 115.9-29.9 60.2-15.1 109.8-27.7 110.4-28 3.9-2.4 3.8 1 3.8-212.9V45.8l-2.9-2.9c-1.8-1.8-4-2.9-5.6-2.9-2.6 0-12.9 2.3-43.5 9.6-8 1.9-23.3 5.5-34 8-10.7 2.4-23.1 5.3-27.5 6.4-13.7 3.3-27.6 6.6-69.5 16.4-22.3 5.3-43.8 10.5-47.8 11.6-15.5 4.3-29.7 13.7-39.5 25.9-3.3 4.2-6.2 7.7-6.6 7.9-.4.1-1.4-1.1-2.4-2.7-6.1-10.3-16.9-20.1-29.9-27-10.2-5.5-19.8-8.3-57.3-16.5-6-1.4-17.7-4.1-26-6.1-8.2-2-25.8-6.1-39-9.1-27.3-6.2-37.3-8.6-96.2-22.4-9.5-2.2-18.6-4-20.2-4-1.7 0-4.2 1-5.8 2.4zm537.5 214.1c-.2 150.9-.6 195.7-1.5 196.3-1.1.7-39 10.2-161.6 40.7-63.3 15.7-69.3 18.1-84.4 32.8l-6.3 6.1v-184c0-202.4-.2-194.9 6-207.8 5.5-11.4 14.6-20.5 26.5-26.4 6.8-3.4 12.5-5 45-12.6 22.7-5.3 82.4-19.4 110.5-26.1 8-1.8 21.5-5 30-7 8.5-1.9 18.9-4.4 23-5.4 4.1-1.1 8.8-2 10.3-2l2.8-.1-.3 195.5z" />
+    <path d="M81.1 126.2c-23.8 3.5-44.2 21.1-52.5 45.5-6.9 20.2-5.5 39.8 4.1 59.2 8.1 16.5 25 31.3 42.3 37.2 8.2 2.8 26.2 3.8 35.3 1.9 8-1.6 19.6-7 26.4-12.1l5.3-4v105.5c0 58-.3 105.7-.7 105.9-.5.3-8.4-1.4-17.8-3.7l-17-4.2v-84.6c0-81.8-.1-84.7-1.9-86.7-2.5-2.7-8.5-2.8-11.7-.2l-2.4 1.9-.3 89.6-.2 89.7 2.4 2.4c1.3 1.3 4.8 3 7.7 3.9C113 476.9 149 485 151.8 485c6.6 0 6.2 9.5 6.2-136.2 0-114 .2-131.9 1.5-133.1 1.2-1.3 12.1-1.4 78.2-1.2 80.5.2 81.1.2 82.7-4 1.3-3.6.6-8.2-1.7-10.3l-2.3-2.2H156l-2.9-6.5c-5.3-11.6-17.6-22.3-30-25.9-7.6-2.2-19.4-2.1-27.3.4-16.1 5-26.8 18.8-26.8 34.9 0 12.8 6 23.2 16.5 28.6 5 2.6 7 3 13.4 3 6.3 0 8.6-.5 13.4-2.8 6.9-3.4 9.2-6.4 8.3-10.9-1.3-6.6-5.6-8.4-11.1-4.8-2.1 1.4-4.7 2-8.8 2-5.3 0-6.1-.3-10-3.9-4.2-3.9-4.2-4-4.2-11 0-6.1.4-7.5 3-11.3 4-5.8 11.9-9.8 19.1-9.8 19 0 35.1 18.8 33.1 38.6-1.2 11.5-10.9 25.5-21.3 30.6-14.5 7.3-32.6 7-47.2-.7-12.7-6.6-24.5-20.6-29.2-34.6-6.3-18.6-1.2-42.8 12.1-57.3 5.8-6.3 16.1-12 24.7-13.6 3.3-.6 49.4-1 120.5-1 113.8 0 115.2 0 117.2-2 2.9-2.9 2.7-9.6-.4-12.1-2.1-1.7-4.1-1.9-19.5-1.9-9.4 0-61-.1-114.7-.3-53.7-.1-99.9.1-102.8.5z" />
+    <path d="M174.3 244.2c-1.1 1.3-2.3 3.1-2.6 4.1-1 2.7 1.8 8.4 4.4 9.2 1.2.4 33.5.8 71.6.8l69.4.1 2.1-2.2c3.2-3.1 2.8-8.9-.7-11.9l-2.6-2.3H176.3l-2 2.2zM195.9 286.3c-3.9 3-3.9 2.3-3.9 111 0 99 .1 105.6 1.8 107.6.9 1.2 3.4 2.4 5.4 2.7 3 .5 4.1.2 6.2-1.9l2.6-2.6.2-95.3c0-52.4.2-100 .3-105.8.1-10.9-.9-15.2-4-16.4-2.6-1-6.9-.6-8.6.7zM248.4 287.4l-2.8 2.3-.1 119.8v119.7l2.5 2c1.9 1.5 3.4 1.9 6.4 1.5 7.7-1.1 7.1 10.1 7.4-123.3l.2-119.5-2.4-2.4c-3.2-3.2-7.6-3.2-11.2-.1z" />
+  </svg>
+)

package/src/components/mdx-components.tsx

@@ -0,0 +1,51 @@
+import type { ComponentProps } from 'react'
+
+import { Separator } from '@lexibase/rdx-ui/components/separator'
+
+export const mdxComponents = {
+  h1: (props: ComponentProps<'h1'>) => (
+    <h1 className="text-4xl font-bold my-6" {...props} />
+  ),
+  h2: (props: ComponentProps<'h2'>) => (
+    <h2 className="text-2xl font-bold my-6" {...props} />
+  ),
+  h3: (props: ComponentProps<'h3'>) => (
+    <h3 className="text-xl font-bold my-6" {...props} />
+  ),
+  p: (props: ComponentProps<'p'>) => <p className="my-4" {...props} />,
+  ul: (props: ComponentProps<'ul'>) => (
+    <ul className="list-disc my-4 ml-6" {...props} />
+  ),
+  ol: (props: ComponentProps<'ol'>) => (
+    <ol className="list-decimal my-4 ml-6" {...props} />
+  ),
+  li: (props: ComponentProps<'li'>) => (
+    <li className="my-2 before:mr-2" {...props} />
+  ),
+  a: (props: ComponentProps<'a'>) => (
+    <a className="underline text-chart-1" {...props} />
+  ),
+  blockquote: (props: ComponentProps<'blockquote'>) => (
+    <blockquote
+      className="bg-secondary text-muted-foreground border-l-2 pl-4 py-px my-2"
+      {...props}
+    />
+  ),
+  pre: (props: ComponentProps<'pre'>) => (
+    <pre
+      className="bg-secondary text-secondary-foreground rounded-md p-4 my-4 overflow-x-auto"
+      {...props}
+    />
+  ),
+  code: (props: ComponentProps<'code'>) => (
+    <code
+      className="bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5"
+      {...props}
+    />
+  ),
+
+  // Custom
+  Separator: (props: ComponentProps<typeof Separator>) => (
+    <Separator className="my-8" {...props} />
+  ),
+}

package/src/components/mode-toggle.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { SunMoon } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { Button } from '@lexibase/rdx-ui/components/button'
+
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    const nextTheme = theme === 'dark' ? 'light' : 'dark'
+    setTheme(nextTheme)
+  }
+
+  return (
+    <Button
+      size="icon"
+      variant="ghost"
+      onClick={toggleTheme}
+      aria-label="Mode Toggle"
+    >
+      <SunMoon className="h-[1.2rem] w-[1.2rem]" />
+      <span className="sr-only">colorTheme</span>
+    </Button>
+  )
+}

package/src/components/navbar.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react'
+import { Github } from 'lucide-react'
+import Link from 'next/link'
+
+import { Button } from './button'
+import { Logo } from './logo'
+import { Separator } from './separator'
+import { ModeToggle } from './mode-toggle'
+
+/** Shared composition extracted from apps/web/components/layout/Navbar. */
+export function Navbar({
+  title = '',
+  siteTitle = 'RDX',
+  logo = <Logo className="size-5" />,
+  homeHref = '/',
+  docsHref = '/docs',
+  docsLink,
+  versionMenu,
+  github,
+  showToggleMode = false,
+}: {
+  title?: string
+  siteTitle?: string
+  logo?: ReactNode
+  homeHref?: string
+  docsHref?: string
+  docsLink?: ReactNode
+  versionMenu?: ReactNode
+  github?: { visible: boolean; url: string }
+  showToggleMode?: boolean
+}) {
+  return (
+    <nav
+      data-rdx-navbar
+      aria-label="Main navigation"
+      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
+          variant="ghost"
+          size={title === '' ? 'icon' : 'default'}
+          asChild
+          aria-label={siteTitle}
+        >
+          <Link
+            href={homeHref}
+            className="cursor-default flex items-center gap-2"
+          >
+            {logo}
+            {title !== '' && <span>{title}</span>}
+          </Link>
+        </Button>
+      </div>
+      <div className="flex items-center md:gap-x-2 h-4">
+        {versionMenu}
+        {docsLink ?? (
+          <Button variant="link" size="sm" asChild>
+            <Link href={docsHref}>Docs</Link>
+          </Button>
+        )}
+        {github?.visible && github.url && (
+          <>
+            <Separator orientation="vertical" />
+            <Button
+              variant="ghost"
+              size="icon"
+              title="GitHub"
+              asChild
+              aria-label="GitHub"
+            >
+              <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>
+          </>
+        )}
+        {showToggleMode && (
+          <>
+            <Separator orientation="vertical" />
+            <ModeToggle />
+          </>
+        )}
+      </div>
+    </nav>
+  )
+}

package/src/components/separator.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      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
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/version-dropdown.tsx

@@ -0,0 +1,127 @@
+'use client'
+
+import { Archive, Bird, PackageOpen } from 'lucide-react'
+import Link from 'next/link'
+import type { ReactNode } from 'react'
+
+import { Button } from './button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from './dropdown-menu'
+
+export type VersionOption = {
+  id: string
+  label: string
+  href: string
+  kind: 'live' | 'version' | 'archived'
+}
+
+function VersionIcon({ kind }: { kind: VersionOption['kind'] }) {
+  const Icon =
+    kind === 'live' ? Bird : kind === 'archived' ? Archive : PackageOpen
+  return <Icon className="size-4" />
+}
+
+/** Uses the same Radix primitives, sizes, icons and states as the showcase. */
+export function VersionDropdown({
+  options,
+  currentId,
+  onSelect,
+  footer,
+}: {
+  options: VersionOption[]
+  currentId: string
+  onSelect?: (id: string) => void
+  footer?: ReactNode
+}) {
+  const current =
+    options.find((option) => option.id === currentId) ?? options[0]
+  if (!current) return null
+  const live = options.filter((option) => option.kind === 'live')
+  const active = options.filter((option) => option.kind === 'version')
+  const archived = options.filter((option) => option.kind === 'archived')
+  const item = (option: VersionOption) => {
+    const className = `capitalize ${option.id === current.id ? 'bg-accent/30 border-1 border-border' : ''} ${option.kind === 'archived' ? 'text-muted-foreground line-through' : ''}`
+    const content = (
+      <>
+        {option.label}
+        <DropdownMenuShortcut>
+          <VersionIcon kind={option.kind} />
+        </DropdownMenuShortcut>
+      </>
+    )
+    return onSelect ? (
+      <DropdownMenuItem
+        key={option.id}
+        className={className}
+        onSelect={() => 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>
+    )
+  }
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <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'
+            }
+          >
+            <VersionIcon kind={current.kind} />
+          </DropdownMenuShortcut>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56" align="start" collisionPadding={8}>
+        {live.length > 0 && (
+          <>
+            <DropdownMenuGroup>{live.map(item)}</DropdownMenuGroup>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        {active.map(item)}
+        {archived.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="text-center py-px cursor-default">
+                Archived
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              {archived.map(item)}
+            </DropdownMenuGroup>
+          </>
+        )}
+        {footer}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/providers/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import * as React from 'react'
+
+export function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/src/styles/globals.css

@@ -0,0 +1,125 @@
+@import 'tailwindcss';
+@source "../**/*.{ts,tsx}";
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --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-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --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);
+  --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);
+  --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);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --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-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}