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

package/README.md

@@ -1,7 +1,7 @@
 # RDX UI
 
 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,
+sites. The source of truth is `packages/rdx-ui/src`: Base UI dropdowns, buttons,
 logo, theme provider, navbar, sidebar, landing page and MDX components.
 
 Published as `@lexibase/rdx-ui`. React/Next.js source is intentionally shipped
@@ -20,3 +20,93 @@ export default function MyHome() {
 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.
+
+## Documentation components
+
+`Callout` is registered automatically in MDX, with optional `title` and variants
+`note` (default), `tip`, `success`, `warning`, `danger`:
+
+```mdx
+<Callout variant="warning" title="Before updating">
+
+Read **release notes** before deploying.
+
+</Callout>
+```
+
+In React, import it from `@lexibase/rdx-ui/components/callout`. It renders a static
+note, not an automatic live alert. The Markdown map also styles all six heading
+levels, responsive images, GFM tables and keyboard-scrollable code blocks.
+Fenced code blocks include a language label and copy button automatically;
+inline code remains unchanged. Copy failures leave the code selectable and show
+manual-copy guidance instead of a false success message.
+
+## Base UI composition
+
+The shared components use `@base-ui/react`. Existing RDX colors, variants,
+dimensions and layout are preserved; `components.json` selects `base-nova` for
+future shadcn additions, without regenerating the existing theme.
+
+This beta changes the composition API: `asChild` is no longer supported.
+Use `render` for interactive composition and `ButtonLink` for navigation:
+
+```tsx
+import { Button } from '@lexibase/rdx-ui/components/button'
+import { ButtonLink } from '@lexibase/rdx-ui/components/button-link'
+import {
+  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
+  DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem,
+  DropdownMenuLinkItem,
+} from '@lexibase/rdx-ui/components/dropdown-menu'
+import Link from 'next/link'
+
+<ButtonLink href="/docs" variant="outline">Documentation</ButtonLink>
+
+<DropdownMenu>
+  <DropdownMenuTrigger render={<Button variant="outline" />}>
+    Actions
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="start">
+    <DropdownMenuGroup>
+      <DropdownMenuLabel>Project</DropdownMenuLabel>
+      <DropdownMenuItem onClick={() => console.log('Action')}>Run action</DropdownMenuItem>
+      <DropdownMenuLinkItem closeOnClick render={<Link href="/docs" />}>
+        Documentation
+      </DropdownMenuLinkItem>
+    </DropdownMenuGroup>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+`ButtonLink` renders a Next.js link with button styling, not `role="button"`.
+`Button` renders a native button; use `type="submit"` explicitly for form submission.
+Menu actions use `onClick` instead of Radix's `onSelect`. Labels must be inside
+`DropdownMenuGroup`. Checkbox values are boolean, not the Radix `indeterminate`
+string; checkbox/radio items remain open unless `closeOnClick` is enabled.
+Navigation items use `DropdownMenuLinkItem` (with `closeOnClick` when desired).
+Components accept Base UI state-aware `className` callbacks and `render` props.
+For custom CSS, replace Radix state selectors/variables with Base UI's
+`data-open`, `data-closed`, `data-highlighted`, `data-popup-open`,
+`--available-height` and `--transform-origin`. `Separator` remains decorative by
+default; set `decorative={false}` for an accessible separator role.
+
+See [Base UI Menu](https://base-ui.com/react/components/menu) and
+[shadcn Base UI](https://ui.shadcn.com/docs/components/base/button).
+
+## Documentation tabs
+
+`Tabs`, `TabsList`, `TabsTrigger` and `TabsContent` wrap Base UI Tabs and are
+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.
+
+## Documentation accordion
+
+`Accordion`, `AccordionItem`, `AccordionTrigger` and `AccordionContent` wrap
+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.

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "type": "module",
+  "engines": {
+    "node": ">=20.9"
+  },
   "description": "The shared RDX documentation theme and UI components.",
   "license": "MIT",
   "files": [
     "src",
     "postcss.config.mjs",
+    "postcss-plugin.cjs",
     "README.md"
   ],
   "publishConfig": {
@@ -18,42 +22,46 @@
     "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",
+    "cmdk": "^1.1.1",
+    "@base-ui/react": "^1.9.0",
+    "@tailwindcss/postcss": "^4.3.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.542.0",
+    "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
-    "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.3.8"
+    "postcss": "^8.5.31",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "@lexibase/rdx-types": "1.0.0-beta.5"
   },
   "peerDependencies": {
-    "next": "^15.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "next": "^16.4.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.13",
+    "@tailwindcss/postcss": "^4.3.3",
     "@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",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "eslint": "^9.39.5",
+    "next": "^16.4.2",
+    "postcss": "^8.5.31",
+    "react": "19.3.1",
+    "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"
   },
   "exports": {
-    "./globals.css": "./src/styles/globals.css",
+    "./globals.css": {
+      "types": "./src/styles/globals.d.css.ts",
+      "default": "./src/styles/globals.css"
+    },
     "./postcss.config": "./postcss.config.mjs",
+    "./postcss-plugin": "./postcss-plugin.cjs",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
     "./hooks/*": "./src/hooks/*.ts",

package/postcss-plugin.cjs

@@ -0,0 +1,2 @@
+// Keep Tailwind's native dependencies in the PostCSS worker, not the app bundle.
+module.exports = require('@tailwindcss/postcss')

package/postcss.config.mjs

@@ -1,11 +1,7 @@
-import { createRequire } from 'node:module'
-
-const require = createRequire(import.meta.url)
-
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    [require.resolve('@tailwindcss/postcss')]: {},
+    '@lexibase/rdx-ui/postcss-plugin': {},
   },
 }
 

package/src/components/accordion.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+
+import { mergeStateClassName } from '../lib/utils'
+
+function Accordion({
+  className,
+  multiple = false,
+  ...props
+}: AccordionPrimitive.Root.Props<string>) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      multiple={multiple}
+      className={mergeStateClassName(
+        'my-4 flex w-full min-w-0 flex-col',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={mergeStateClassName(
+        'min-w-0 border-b border-border last:border-b-0',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="m-0 flex text-sm font-medium">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={mergeStateClassName(
+          'group/accordion-trigger relative flex flex-1 min-w-0 items-start justify-between gap-3 rounded-lg border border-transparent py-2.5 text-left text-sm font-medium text-foreground transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:pointer-events-none data-disabled:opacity-50 motion-reduce:transition-none',
+          className
+        )}
+        {...props}
+      >
+        <span className="min-w-0 [overflow-wrap:anywhere]">{children}</span>
+        <ChevronDown
+          aria-hidden="true"
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none ml-auto size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUp
+          aria-hidden="true"
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none ml-auto hidden size-4 shrink-0 text-muted-foreground group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className={mergeStateClassName(
+        'min-w-0 overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up motion-reduce:data-open:animate-none motion-reduce:data-closed:animate-none',
+        className
+      )}
+      {...props}
+    >
+      <div className="pt-0 pb-2.5 leading-6 text-foreground/85 [overflow-wrap:anywhere] [&>:first-child]:mt-0 [&>:last-child]:mb-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground">
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/components/blockquote.tsx

@@ -0,0 +1,33 @@
+import type { ComponentProps } from 'react'
+import { Quote } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+
+/** A quotation keeps native semantics, without the heading or tone of a Callout. */
+export function Blockquote({
+  children,
+  className,
+  ...props
+}: ComponentProps<'blockquote'>) {
+  return (
+    <blockquote
+      data-rdx-blockquote
+      className={cn(
+        'my-6 flex min-w-0 gap-3 rounded-lg border border-border border-l-2 border-l-ring/50 bg-muted/25 p-4 text-foreground/85 sm:p-5',
+        className
+      )}
+      {...props}
+    >
+      <Quote
+        aria-hidden="true"
+        className="mt-1 size-4 shrink-0 text-muted-foreground/70"
+      />
+      <div
+        data-slot="blockquote-content"
+        className="min-w-0 flex-1 leading-7 [overflow-wrap:anywhere] [&>:first-child]:mt-0 [&>:last-child]:mb-0"
+      >
+        {children}
+      </div>
+    </blockquote>
+  )
+}

package/src/components/button-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Link from 'next/link'
+import type { ComponentProps } from 'react'
+import type { VariantProps } from 'class-variance-authority'
+
+import { buttonVariants } from './button'
+import { cn } from '../lib/utils'
+
+/** Navigation keeps native anchor semantics, independent of button behavior. */
+function ButtonLink({
+  className,
+  variant,
+  size,
+  active,
+  ...props
+}: ComponentProps<typeof Link> & VariantProps<typeof buttonVariants>) {
+  return (
+    <Link
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, active }), className)}
+      {...props}
+    />
+  )
+}
+
+export { ButtonLink }

package/src/components/button.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import * as React from 'react'
-import { Slot } from '@radix-ui/react-slot'
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@lexibase/rdx-ui/lib/utils'
@@ -49,19 +48,17 @@ function Button({
   variant,
   size,
   active,
-  asChild = false,
   ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-    active?: boolean
-  }) {
-  const Comp = asChild ? Slot : 'button'
-
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (
-    <Comp
+    <ButtonPrimitive
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, active, className }))}
+      className={(state) =>
+        cn(
+          buttonVariants({ variant, size, active }),
+          typeof className === 'function' ? className(state) : className
+        )
+      }
       {...props}
     />
   )

package/src/components/callout.tsx

@@ -0,0 +1,96 @@
+import type { ComponentProps } from 'react'
+import {
+  CircleAlert,
+  CircleCheck,
+  Info,
+  Lightbulb,
+  TriangleAlert,
+} from 'lucide-react'
+
+import { cn } from '../lib/utils'
+
+const variants = {
+  note: {
+    icon: Info,
+    label: 'Note',
+    classes: 'border-border bg-muted/40',
+    iconClass: 'text-muted-foreground',
+  },
+  tip: {
+    icon: Lightbulb,
+    label: 'Tip',
+    classes: 'border-blue-500/30 bg-blue-500/5',
+    iconClass: 'text-blue-700 dark:text-blue-400',
+  },
+  success: {
+    icon: CircleCheck,
+    label: 'Success',
+    classes: 'border-emerald-500/30 bg-emerald-500/5',
+    iconClass: 'text-emerald-700 dark:text-emerald-400',
+  },
+  warning: {
+    icon: TriangleAlert,
+    label: 'Warning',
+    classes: 'border-amber-500/30 bg-amber-500/5',
+    iconClass: 'text-amber-700 dark:text-amber-400',
+  },
+  danger: {
+    icon: CircleAlert,
+    label: 'Danger',
+    classes: 'border-red-500/30 bg-red-500/5',
+    iconClass: 'text-red-700 dark:text-red-400',
+  },
+} as const
+
+export type CalloutVariant = keyof typeof variants
+export type CalloutProps = Omit<ComponentProps<'aside'>, 'title'> & {
+  variant?: CalloutVariant
+  title?: string
+}
+
+/** Static documentation content, deliberately not a live alert region. */
+export function Callout({
+  variant = 'note',
+  title,
+  className,
+  children,
+  ...props
+}: CalloutProps) {
+  if (!Object.hasOwn(variants, variant)) {
+    throw new Error(
+      `[RDX] Invalid Callout variant "${variant}". Use note, tip, success, warning or danger.`
+    )
+  }
+  const { icon: Icon, label, classes, iconClass } = variants[variant]
+  return (
+    <aside
+      role="note"
+      aria-label={title || label}
+      data-rdx-callout={variant}
+      className={cn(
+        'my-6 flex min-w-0 gap-3 rounded-md border p-4 text-sm text-foreground',
+        classes,
+        className
+      )}
+      {...props}
+    >
+      <Icon
+        aria-hidden="true"
+        className={cn('mt-0.5 size-4 shrink-0', iconClass)}
+      />
+      <div className="min-w-0 flex-1">
+        {title && (
+          <p data-slot="callout-title" className="mb-2 font-semibold leading-5">
+            {title}
+          </p>
+        )}
+        <div
+          data-slot="callout-content"
+          className="leading-6 break-words [&>:first-child]:mt-0 [&>:last-child]:mb-0"
+        >
+          {children}
+        </div>
+      </div>
+    </aside>
+  )
+}

package/src/components/code-block.tsx

@@ -0,0 +1,55 @@
+import { Children, isValidElement, type ComponentProps } from 'react'
+import { CodeXml } from 'lucide-react'
+
+import { cn } from '../lib/utils'
+import { CopyCodeButton } from './copy-code-button'
+
+/** Keep the code server-rendered; only clipboard interaction needs JavaScript. */
+export function CodeBlock({
+  children,
+  className,
+  ...props
+}: ComponentProps<'pre'>) {
+  const code = Children.toArray(children).find(
+    (child) =>
+      isValidElement<{ className?: string }>(child) &&
+      child.props.className?.includes('language-')
+  )
+  const language = isValidElement<{ className?: string }>(code)
+    ? code.props.className?.match(/(?:^|\s)language-([^\s]+)/)?.[1]
+    : undefined
+  return (
+    <div
+      data-rdx-code-block
+      className="my-4 min-w-0 max-w-full overflow-hidden rounded-lg border border-border bg-muted/30 text-foreground"
+    >
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-b border-border/70 bg-muted/30 px-3 py-1.5">
+        <div className="flex min-w-0 items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="flex size-6 shrink-0 items-center justify-center rounded-md border border-blue-500/20 bg-blue-500/10 text-blue-700 dark:text-blue-400"
+          >
+            <CodeXml className="size-3.5" />
+          </span>
+          <span
+            className="min-w-0 truncate font-mono text-xs font-medium text-muted-foreground"
+            title={language}
+          >
+            {language ?? 'Code'}
+          </span>
+        </div>
+        <CopyCodeButton />
+      </div>
+      <pre
+        tabIndex={0}
+        className={cn(
+          'm-0 max-w-full overflow-x-auto p-3 font-mono text-[13px] leading-6 text-foreground/90 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&>code]:bg-transparent [&>code]:rounded-none [&>code]:p-0 [&>code]:[font-family:inherit] [&>code]:text-inherit',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </pre>
+    </div>
+  )
+}

package/src/components/command.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+// shadcn/ui Base Nova Command (cmdk), composed with the Base UI Dialog.
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+import { cn } from '../lib/utils'
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        'flex size-full flex-col overflow-hidden rounded-xl bg-popover p-1 text-popover-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex items-center gap-2 border-b px-2 py-2 pr-9"
+    >
+      <Search className="size-4 shrink-0 text-muted-foreground" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          'h-8 min-w-0 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        'max-h-[min(50dvh,24rem)] scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn(
+        'px-4 py-6 text-center text-sm text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'relative flex cursor-default items-center gap-2 rounded-lg px-2 py-2 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+export { Command, CommandInput, CommandList, CommandEmpty, CommandItem }