@lexibase/rdx-ui 1.1.0 → 3.0.0

package/README.md

@@ -45,11 +45,10 @@ manual-copy guidance instead of a false success message.
 
 The shared components use `@base-ui/react` and the RDX theme.
 `components.json` selects shadcn/ui's `base-nova` style.
-Use `render` for interactive composition and `ButtonLink` for navigation:
+Use `render` for interactive composition and `Button` with `href` 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,
@@ -57,7 +56,7 @@ import {
 } from '@lexibase/rdx-ui/components/dropdown-menu'
 import Link from 'next/link'
 
-<ButtonLink href="/docs" variant="outline">Documentation</ButtonLink>
+<Button href="/docs" variant="link">Documentation</Button>
 
 <DropdownMenu>
   <DropdownMenuTrigger render={<Button variant="outline" />}>
@@ -75,8 +74,8 @@ import Link from 'next/link'
 </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.
+`Button` with `href` renders a native Next.js link; use `variant="link"` for text links.
+Without `href`, `Button` renders a native button; use `type="submit"` explicitly for form submission.
 Menu actions use `onClick`. Labels must be inside `DropdownMenuGroup`.
 Checkbox values are boolean; checkbox/radio items remain open unless
 `closeOnClick` is enabled.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,34 @@
+# Third-party notices
+
+## shadcn/ui
+
+Table and Kbd 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/code-block and
+https://ui.shadcn.com/docs/components/base/dialog.
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-ui",
-  "version": "1.1.0",
+  "version": "3.0.0",
   "type": "module",
   "engines": {
     "node": "^22.18.0 || ^24.11.0"
@@ -8,6 +8,7 @@
   "description": "The shared RDX documentation theme and UI components.",
   "license": "MIT",
   "files": [
+    "THIRD_PARTY_NOTICES.md",
     "src",
     "postcss.config.mjs",
     "postcss-plugin.cjs",
@@ -22,18 +23,19 @@
     "directory": "packages/rdx-ui"
   },
   "dependencies": {
-    "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",
+    "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
     "postcss": "^8.5.31",
+    "shiki": "^4.5.0",
     "tailwind-merge": "^3.7.0",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "@lexibase/rdx-types": "1.1.0"
+    "@lexibase/rdx-types": "1.1.1"
   },
   "peerDependencies": {
     "next": "^16.4.2",
@@ -52,8 +54,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": {
@@ -64,7 +66,9 @@
     "./postcss-plugin": "./postcss-plugin.cjs",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
-    "./providers/*": "./src/providers/*.tsx"
+    "./providers/*": "./src/providers/*.tsx",
+    "./lib/highlighter": "./src/lib/highlighter.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

package/src/components/button.tsx

@@ -2,6 +2,8 @@
 
 import { Button as ButtonPrimitive } from '@base-ui/react/button'
 import { cva, type VariantProps } from 'class-variance-authority'
+import Link from 'next/link'
+import type { ComponentProps } from 'react'
 
 import { cn } from '@lexibase/rdx-ui/lib/utils'
 
@@ -29,6 +31,8 @@ const buttonVariants = cva(
         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',
+        'icon-sm': 'size-8',
+        'icon-xs': 'size-6 rounded-sm [&_svg:not([class*=size-])]:size-3',
         link: 'inline-block',
       },
       active: {
@@ -43,13 +47,23 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant,
-  size,
-  active,
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+type ButtonProps =
+  | (ButtonPrimitive.Props &
+      VariantProps<typeof buttonVariants> & { href?: never })
+  | (ComponentProps<typeof Link> & VariantProps<typeof buttonVariants>)
+
+function Button(props: ButtonProps) {
+  if (props.href !== undefined) {
+    const { className, variant = 'link', size, active, ...linkProps } = props
+    return (
+      <Link
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, active }), className)}
+        {...linkProps}
+      />
+    )
+  }
+  const { className, variant, size, active, ...buttonProps } = props
   return (
     <ButtonPrimitive
       data-slot="button"
@@ -59,7 +73,7 @@ function Button({
           typeof className === 'function' ? className(state) : className
         )
       }
-      {...props}
+      {...buttonProps}
     />
   )
 }

package/src/components/code-block.tsx

@@ -1,55 +1,286 @@
-import { Children, isValidElement, type ComponentProps } from 'react'
-import { CodeXml } from 'lucide-react'
+'use client'
 
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 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,
+import { Button } from './button'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { useMessages } from '../providers/locale-provider'
+
+const codeBlockVariants = cva(
+  'group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs',
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30',
+        destructive:
+          'border border-destructive/30 text-destructive dark:border-destructive/40',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function CodeBlock({
   className,
+  variant = 'default',
+  size = 'default',
   ...props
-}: ComponentProps<'pre'>) {
-  const code = Children.toArray(children).find(
-    (child) =>
-      isValidElement<{ className?: string }>(child) &&
-      child.props.className?.includes('language-')
+}: React.ComponentProps<'div'> &
+  VariantProps<typeof codeBlockVariants> & { size?: 'default' | 'sm' }) {
+  return (
+    <div
+      data-slot="code-block"
+      data-variant={variant}
+      data-size={size}
+      className={cn(codeBlockVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="code-block-header"
+      className={cn(
+        'flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0',
+        className
+      )}
+      {...props}
+    />
   )
-  const language = isValidElement<{ className?: string }>(code)
-    ? code.props.className?.match(/(?:^|\s)language-([^\s]+)/)?.[1]
-    : undefined
+}
+
+function CodeBlockTitle({ className, ...props }: React.ComponentProps<'div'>) {
   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
-        )}
+      data-slot="code-block-title"
+      className={cn(
+        "min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CodeBlockActions({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="code-block-actions"
+      className={cn(
+        '-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// Locale and failure feedback are RDX integration; the shadcn composition/API stays intact.
+function CodeBlockCopyButton({
+  value,
+  variant = 'ghost',
+  size = 'icon-xs',
+  className,
+  onClick,
+  ...props
+}: Omit<
+  Extract<React.ComponentProps<typeof Button>, { href?: never }>,
+  'value'
+> & { value?: string }) {
+  const messages = useMessages()
+  const [copied, setCopied] = React.useState(false)
+  const [error, setError] = React.useState(false)
+  const pending = React.useRef(false)
+  const mounted = React.useRef(false)
+  React.useEffect(() => {
+    mounted.current = true
+    return () => {
+      mounted.current = false
+    }
+  }, [])
+  React.useEffect(() => {
+    if (!copied) return
+    const timeout = setTimeout(() => setCopied(false), 2000)
+    return () => clearTimeout(timeout)
+  }, [copied])
+  return (
+    <>
+      <Button
+        data-slot="code-block-copy-button"
+        data-copied={copied || undefined}
+        data-status={error ? 'error' : copied ? 'copied' : 'idle'}
+        variant={variant}
+        size={size}
+        aria-label={messages.copyCode}
+        title={
+          error
+            ? messages.copyRetry
+            : copied
+              ? messages.copied
+              : messages.copyCode
+        }
+        className={className}
+        onClick={async (event) => {
+          onClick?.(event)
+          if (event.defaultPrevented || pending.current) return
+          pending.current = true
+          setError(false)
+          try {
+            // The fallback retains the published standalone CopyCodeButton API.
+            const block = event.currentTarget.closest<HTMLElement>(
+              '[data-rdx-code-block]'
+            )
+            const text =
+              value ??
+              block?.dataset.rdxCodeValue ??
+              block?.querySelector('pre')?.textContent
+            if (text === undefined || !navigator.clipboard?.writeText)
+              throw new Error('Clipboard unavailable')
+            await navigator.clipboard.writeText(text)
+            if (mounted.current) setCopied(true)
+          } catch {
+            if (mounted.current) {
+              setCopied(false)
+              setError(true)
+            }
+          } finally {
+            pending.current = false
+          }
+        }}
         {...props}
       >
-        {children}
-      </pre>
-    </div>
+        {copied ? <CheckIcon /> : <CopyIcon />}
+      </Button>
+      <span
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className={error ? 'max-w-48 text-xs text-muted-foreground' : 'sr-only'}
+      >
+        {error ? messages.copyCodeError : copied ? messages.codeCopied : ''}
+      </span>
+    </>
   )
 }
+
+function CodeBlockContent({
+  className,
+  children,
+  style,
+  wrap = false,
+  lineNumbers = false,
+  startLine = 1,
+  ...props
+}: React.ComponentProps<'pre'> & {
+  wrap?: boolean
+  lineNumbers?: boolean
+  startLine?: number
+}) {
+  return (
+    <pre
+      data-slot="code-block-content"
+      data-wrap={wrap || undefined}
+      data-numbered={lineNumbers || undefined}
+      dir="ltr"
+      tabIndex={0}
+      style={{ counterReset: `line ${startLine - 1}`, ...style }}
+      className={cn(
+        'min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap',
+        className
+      )}
+      {...props}
+    >
+      <code
+        data-slot="code-block-code"
+        className="grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0"
+      >
+        {lineNumbers && typeof children === 'string'
+          ? children
+              .replace(/\n$/, '')
+              .split('\n')
+              .map((line, index) => (
+                <CodeBlockLine key={index}>{line}</CodeBlockLine>
+              ))
+          : children}
+      </code>
+    </pre>
+  )
+}
+
+const codeBlockLineVariants = cva(
+  "relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+  {
+    variants: {
+      variant: {
+        default: '',
+        added: "bg-muted after:content-['+']",
+        removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+        highlighted: 'bg-muted',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+function CodeBlockLine({
+  className,
+  variant = 'default',
+  children,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof codeBlockLineVariants>) {
+  // An empty line holds a newline so copying a selection keeps blank lines.
+  const empty =
+    children === undefined ||
+    children === null ||
+    children === '' ||
+    (Array.isArray(children) && children.length === 0)
+
+  return (
+    <span
+      data-slot="code-block-line"
+      data-variant={variant}
+      className={cn(codeBlockLineVariants({ variant }), className)}
+      {...props}
+    >
+      <span data-slot="code-block-line-content" className="min-w-0">
+        {empty ? '\n' : children}
+      </span>
+    </span>
+  )
+}
+
+function CodeBlockFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="code-block-footer"
+      className={cn(
+        'flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  CodeBlock,
+  CodeBlockHeader,
+  CodeBlockTitle,
+  CodeBlockActions,
+  CodeBlockCopyButton,
+  CodeBlockContent,
+  CodeBlockLine,
+  CodeBlockFooter,
+}

package/src/components/copy-code-button.tsx

@@ -1,78 +1,3 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
-import { Check, Copy } from 'lucide-react'
-
-import { Button } from './button'
-
-export function CopyCodeButton() {
-  const [status, setStatus] = useState<'idle' | 'copied' | 'error'>('idle')
-  const pending = useRef(false)
-  const mounted = useRef(false)
-  const reset = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  useEffect(() => {
-    mounted.current = true
-    return () => {
-      mounted.current = false
-      clearTimeout(reset.current)
-    }
-  }, [])
-
-  async function copy(button: HTMLButtonElement) {
-    if (pending.current) return
-    pending.current = true
-    clearTimeout(reset.current)
-    try {
-      const code = button.closest('[data-rdx-code-block]')?.querySelector('pre')
-      if (!code || !navigator.clipboard?.writeText)
-        throw new Error('Clipboard unavailable')
-      await navigator.clipboard.writeText(code.textContent ?? '')
-      if (mounted.current) {
-        setStatus('copied')
-        reset.current = setTimeout(() => setStatus('idle'), 2000)
-      }
-    } catch {
-      if (mounted.current) setStatus('error')
-    } finally {
-      pending.current = false
-    }
-  }
-
-  const Icon = status === 'copied' ? Check : Copy
-  return (
-    <div className="flex min-w-0 items-center justify-end gap-2">
-      <span
-        role="status"
-        aria-live="polite"
-        aria-atomic="true"
-        className={
-          status === 'error' ? 'text-xs text-muted-foreground' : 'sr-only'
-        }
-      >
-        {status === 'copied'
-          ? 'Code copied to clipboard.'
-          : status === 'error'
-            ? 'Could not copy. Select the code and copy it manually.'
-            : ''}
-      </span>
-      <Button
-        type="button"
-        variant="outline"
-        size="icon"
-        data-status={status}
-        className="size-7 shrink-0 border-border/70 bg-background/60 p-0 text-muted-foreground shadow-none hover:text-foreground data-[status=copied]:border-emerald-500/30 data-[status=copied]:bg-emerald-500/10 data-[status=copied]:text-emerald-700 dark:data-[status=copied]:text-emerald-400 data-[status=error]:border-amber-500/30 [&>svg]:size-3.5"
-        aria-label="Copy code"
-        title={
-          status === 'copied'
-            ? 'Copied!'
-            : status === 'error'
-              ? 'Could not copy. Try again or copy manually.'
-              : 'Copy code'
-        }
-        onClick={(event) => copy(event.currentTarget)}
-      >
-        <Icon aria-hidden="true" className="size-4" />
-      </Button>
-    </div>
-  )
-}
+export { CodeBlockCopyButton as CopyCodeButton } from './code-block'