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

package/src/components/docs-toc.tsx

@@ -0,0 +1,231 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { usePathname } from 'next/navigation'
+
+import { cn } from '@lexibase/rdx-ui/lib/utils'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger,
+  type PopoverActions,
+} from './popover'
+
+type Heading = { id: string; title: string; depth: number }
+type HeadingNode = Heading & { children: HeadingNode[] }
+
+function headingTree(headings: Heading[]) {
+  const roots: HeadingNode[] = []
+  const parents: HeadingNode[] = []
+  for (const heading of headings) {
+    while (
+      parents.length &&
+      parents[parents.length - 1]!.depth >= heading.depth
+    )
+      parents.pop()
+    const node: HeadingNode = { ...heading, children: [] }
+    const siblings = parents[parents.length - 1]?.children ?? roots
+    siblings.push(node)
+    parents.push(node)
+  }
+  return roots
+}
+
+function HeadingLinks({
+  nodes,
+  baseDepth,
+  activeId,
+}: {
+  nodes: HeadingNode[]
+  baseDepth: number
+  activeId: string
+}) {
+  return (
+    <ol className="space-y-0.5">
+      {nodes.map((heading) => (
+        <li key={heading.id}>
+          <a
+            href={`#${encodeURIComponent(heading.id)}`}
+            aria-current={heading.id === activeId ? 'location' : undefined}
+            style={{ paddingLeft: 8 + (heading.depth - baseDepth) * 12 }}
+            className={cn(
+              'block rounded-md py-1.5 pr-2 text-xs leading-5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              heading.id === activeId &&
+                'bg-accent/60 font-medium text-foreground'
+            )}
+          >
+            {heading.title}
+          </a>
+          {heading.children.length > 0 && (
+            <HeadingLinks
+              nodes={heading.children}
+              baseDepth={baseDepth}
+              activeId={activeId}
+            />
+          )}
+        </li>
+      ))}
+    </ol>
+  )
+}
+
+/** Read the rendered MDX, sharing exactly the IDs used by document links. */
+export function DocsToc({ contentId = 'rdx-main' }: { contentId?: string }) {
+  const pathname = usePathname()
+  return <PageToc key={pathname} contentId={contentId} />
+}
+
+function PageToc({ contentId }: { contentId: string }) {
+  const [headings, setHeadings] = useState<Heading[]>([])
+  const [activeId, setActiveId] = useState('')
+  const actions = useRef<PopoverActions | null>(null)
+
+  useEffect(() => {
+    const content = document.getElementById(contentId)
+    if (!content) return
+    let elements: HTMLHeadingElement[] = []
+    let frame = 0
+    let scrollRoot: HTMLElement | null = content.parentElement
+    while (
+      scrollRoot &&
+      !/(auto|scroll)/.test(getComputedStyle(scrollRoot).overflowY)
+    ) {
+      scrollRoot = scrollRoot.parentElement
+    }
+    const scrollTarget = scrollRoot ?? window
+    // Keep native fragment links/history; smooth the actual document scroller.
+    // Tailwind's motion-safe variant leaves reduced-motion navigation instant.
+    const scrollElement = scrollRoot ?? document.documentElement
+    const alreadySmooth = scrollElement.classList.contains(
+      'motion-safe:scroll-smooth'
+    )
+    scrollElement.classList.add('motion-safe:scroll-smooth')
+    function updateActive() {
+      frame = 0
+      const top = (scrollRoot?.getBoundingClientRect().top ?? 0) + 96
+      let current = elements[0]?.id ?? ''
+      for (const heading of elements) {
+        if (heading.getBoundingClientRect().top > top) break
+        current = heading.id
+      }
+      // A short final section cannot reach the top: there is no content left
+      // to scroll. Reaching the document's bottom must still activate it.
+      if (
+        elements.length &&
+        scrollElement.scrollHeight > scrollElement.clientHeight + 2 &&
+        scrollElement.scrollTop + scrollElement.clientHeight >=
+          scrollElement.scrollHeight - 2
+      )
+        current = elements[elements.length - 1]!.id
+      setActiveId(current)
+    }
+    function schedule() {
+      if (!frame) frame = requestAnimationFrame(updateActive)
+    }
+    function collect() {
+      if (!window.matchMedia('(min-width: 1280px)').matches)
+        actions.current?.close()
+      elements = Array.from(
+        content!.querySelectorAll<HTMLHeadingElement>(
+          'h2[id], h3[id], h4[id], h5[id], h6[id]'
+        )
+      ).filter(
+        (element) =>
+          element.getClientRects().length > 0 &&
+          !!element.id &&
+          !!element.textContent?.trim() &&
+          getComputedStyle(element).visibility !== 'hidden'
+      )
+      setHeadings(
+        elements
+          .map((element) => ({
+            id: element.id,
+            title: element.textContent?.trim() ?? '',
+            depth: Number(element.tagName.slice(1)),
+          }))
+          .filter((heading) => heading.title)
+      )
+      schedule()
+    }
+    const initialFrame = requestAnimationFrame(collect)
+    const observer = new MutationObserver(collect)
+    observer.observe(content, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ['hidden', 'style', 'class', 'id'],
+    })
+    scrollTarget.addEventListener('scroll', schedule, { passive: true })
+    window.addEventListener('resize', collect)
+    const resize = new ResizeObserver(schedule)
+    resize.observe(content)
+    return () => {
+      observer.disconnect()
+      resize.disconnect()
+      scrollTarget.removeEventListener('scroll', schedule)
+      window.removeEventListener('resize', collect)
+      cancelAnimationFrame(frame)
+      cancelAnimationFrame(initialFrame)
+      if (!alreadySmooth)
+        scrollElement.classList.remove('motion-safe:scroll-smooth')
+    }
+  }, [contentId])
+
+  if (headings.length < 2) return null
+  const baseDepth = Math.min(...headings.map((heading) => heading.depth))
+  return (
+    <aside
+      data-rdx-toc
+      className="fixed right-4 top-1/2 z-30 hidden -translate-y-1/2 xl:block"
+    >
+      <Popover actionsRef={actions}>
+        <PopoverTrigger
+          openOnHover
+          delay={120}
+          aria-label="On this page"
+          className="flex max-h-[40vh] w-12 flex-col items-end gap-2 overflow-hidden rounded-md p-3 text-muted-foreground/40 outline-none transition-colors hover:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {headings.map((heading) => (
+            <span
+              key={heading.id}
+              aria-hidden="true"
+              className={cn(
+                'h-0.5 shrink-0 rounded-full bg-current transition-colors',
+                heading.depth === baseDepth ? 'w-5' : 'w-3',
+                heading.id === activeId && 'text-foreground'
+              )}
+            />
+          ))}
+        </PopoverTrigger>
+        <PopoverContent
+          side="left"
+          sideOffset={0}
+          onMouseLeave={(event) => {
+            // Base UI keeps click-opened popovers pinned; the TOC instead
+            // stays open only while the pointer is over its popup or marks.
+            if (
+              event.relatedTarget instanceof Element &&
+              event.relatedTarget.closest('[data-rdx-toc]')
+            )
+              return
+            actions.current?.close()
+          }}
+          className="hidden max-h-[min(60vh,var(--available-height))] w-64 overflow-y-auto xl:flex"
+        >
+          <PopoverTitle className="px-2 pt-1 text-xs text-muted-foreground">
+            On this page
+          </PopoverTitle>
+          <nav aria-label="On this page">
+            <HeadingLinks
+              nodes={headingTree(headings)}
+              baseDepth={baseDepth}
+              activeId={activeId}
+            />
+          </nav>
+        </PopoverContent>
+      </Popover>
+    </aside>
+  )
+}

package/src/components/dropdown-menu.tsx

@@ -1,15 +1,15 @@
 'use client'
 
 import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Menu as DropdownMenuPrimitive } from '@base-ui/react/menu'
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
 
-import { cn } from '@lexibase/rdx-ui/lib/utils'
+import { cn, mergeStateClassName } from '@lexibase/rdx-ui/lib/utils'
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root {...props} />
 }
 
 function DropdownMenuPortal({
@@ -31,22 +31,42 @@ function DropdownMenuTrigger({
   )
 }
 
+type DropdownMenuContentProps = React.ComponentProps<
+  typeof DropdownMenuPrimitive.Popup
+> &
+  Pick<
+    React.ComponentProps<typeof DropdownMenuPrimitive.Positioner>,
+    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'collisionPadding'
+  >
+
 function DropdownMenuContent({
   className,
+  align = 'start',
+  alignOffset = 0,
+  side = 'bottom',
   sideOffset = 4,
+  collisionPadding = 8,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: DropdownMenuContentProps) {
   return (
     <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
+      <DropdownMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         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}
-      />
+        collisionPadding={collisionPadding}
+      >
+        <DropdownMenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={mergeStateClassName(
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none',
+            className
+          )}
+          {...props}
+        />
+      </DropdownMenuPrimitive.Positioner>
     </DropdownMenuPrimitive.Portal>
   )
 }
@@ -73,8 +93,31 @@ function DropdownMenuItem({
       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={mergeStateClassName(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted: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 DropdownMenuLinkItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.LinkItem> & {
+  inset?: boolean
+  variant?: 'default' | 'destructive'
+}) {
+  return (
+    <DropdownMenuPrimitive.LinkItem
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={mergeStateClassName(
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted: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}
@@ -91,17 +134,17 @@ function DropdownMenuCheckboxItem({
   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={mergeStateClassName(
+        "data-highlighted:bg-accent data-highlighted: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>
+        <DropdownMenuPrimitive.CheckboxItemIndicator>
           <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
+        </DropdownMenuPrimitive.CheckboxItemIndicator>
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
@@ -127,16 +170,16 @@ function DropdownMenuRadioItem({
   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={mergeStateClassName(
+        "data-highlighted:bg-accent data-highlighted: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>
+        <DropdownMenuPrimitive.RadioItemIndicator>
           <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
+        </DropdownMenuPrimitive.RadioItemIndicator>
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
@@ -147,14 +190,14 @@ function DropdownMenuLabel({
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & {
   inset?: boolean
 }) {
   return (
-    <DropdownMenuPrimitive.Label
+    <DropdownMenuPrimitive.GroupLabel
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
+      className={mergeStateClassName(
         'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
         className
       )}
@@ -170,7 +213,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={mergeStateClassName('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
   )
@@ -194,8 +237,8 @@ function DropdownMenuShortcut({
 
 function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuRoot>) {
+  return <DropdownMenuPrimitive.SubmenuRoot {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -203,36 +246,41 @@ function DropdownMenuSubTrigger({
   inset,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & {
   inset?: boolean
 }) {
   return (
-    <DropdownMenuPrimitive.SubTrigger
+    <DropdownMenuPrimitive.SubmenuTrigger
       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={mergeStateClassName(
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-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>
+    </DropdownMenuPrimitive.SubmenuTrigger>
   )
 }
 
 function DropdownMenuSubContent({
   className,
+  align = 'start',
+  alignOffset = -3,
+  side = 'right',
+  sideOffset = 0,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+}: DropdownMenuContentProps) {
   return (
-    <DropdownMenuPrimitive.SubContent
+    <DropdownMenuContent
       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
-      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      className={mergeStateClassName('shadow-lg', className)}
       {...props}
     />
   )
@@ -246,6 +294,7 @@ export {
   DropdownMenuGroup,
   DropdownMenuLabel,
   DropdownMenuItem,
+  DropdownMenuLinkItem,
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,

package/src/components/home.tsx

@@ -1,7 +1,6 @@
 import type { ReactNode } from 'react'
-import Link from 'next/link'
 
-import { Button } from './button'
+import { ButtonLink } from './button-link'
 import { Logo } from './logo'
 
 /** The default landing page from apps/web, not a separate marketing theme. */
@@ -33,13 +32,13 @@ export function Home({
       {buttons.length > 0 && (
         <div className="flex flex-wrap justify-center gap-3 mt-6 px-6">
           {buttons.map((button, index) => (
-            <Button
+            <ButtonLink
               key={`${index}:${button.href}`}
               variant={index === 0 ? 'default' : 'outline'}
-              asChild
+              href={button.href}
             >
-              <Link href={button.href}>{button.label}</Link>
-            </Button>
+              {button.label}
+            </ButtonLink>
           ))}
         </div>
       )}

package/src/components/mdx-components.tsx

@@ -1,51 +1,142 @@
 import type { ComponentProps } from 'react'
 
+import { cn } from '../lib/utils'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from './accordion'
+import { Blockquote } from './blockquote'
+import { Callout } from './callout'
+import { CodeBlock } from './code-block'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
 import { Separator } from '@lexibase/rdx-ui/components/separator'
 
 export const mdxComponents = {
-  h1: (props: ComponentProps<'h1'>) => (
-    <h1 className="text-4xl font-bold my-6" {...props} />
+  h1: ({ className, ...props }: ComponentProps<'h1'>) => (
+    <h1 className={cn('text-4xl font-bold my-6', className)} {...props} />
   ),
-  h2: (props: ComponentProps<'h2'>) => (
-    <h2 className="text-2xl font-bold my-6" {...props} />
+  h2: ({ className, ...props }: ComponentProps<'h2'>) => (
+    <h2 className={cn('text-2xl font-bold my-6', className)} {...props} />
   ),
-  h3: (props: ComponentProps<'h3'>) => (
-    <h3 className="text-xl font-bold my-6" {...props} />
+  h3: ({ className, ...props }: ComponentProps<'h3'>) => (
+    <h3 className={cn('text-xl font-bold my-6', className)} {...props} />
   ),
-  p: (props: ComponentProps<'p'>) => <p className="my-4" {...props} />,
-  ul: (props: ComponentProps<'ul'>) => (
-    <ul className="list-disc my-4 ml-6" {...props} />
+  p: ({ className, ...props }: ComponentProps<'p'>) => (
+    <p className={cn('my-4', className)} {...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} />
+  ul: ({ className, ...props }: ComponentProps<'ul'>) => (
+    <ul
+      className={cn(
+        'list-disc my-4 ml-6 [&.contains-task-list]:list-none [&.contains-task-list]:ml-0',
+        className
+      )}
+      {...props}
+    />
   ),
-  a: (props: ComponentProps<'a'>) => (
-    <a className="underline text-chart-1" {...props} />
+  ol: ({ className, ...props }: ComponentProps<'ol'>) => (
+    <ol className={cn('list-decimal my-4 ml-6', className)} {...props} />
   ),
-  blockquote: (props: ComponentProps<'blockquote'>) => (
-    <blockquote
-      className="bg-secondary text-muted-foreground border-l-2 pl-4 py-px my-2"
+  li: ({ className, ...props }: ComponentProps<'li'>) => (
+    <li
+      className={cn(
+        'my-2 before:mr-2 [&>input[type=checkbox]]:mr-2',
+        className
+      )}
       {...props}
     />
   ),
-  pre: (props: ComponentProps<'pre'>) => (
-    <pre
-      className="bg-secondary text-secondary-foreground rounded-md p-4 my-4 overflow-x-auto"
+  a: ({ className, ...props }: ComponentProps<'a'>) => (
+    <a
+      className={cn('underline text-chart-1 text-blue-500', className)}
       {...props}
     />
   ),
-  code: (props: ComponentProps<'code'>) => (
+  blockquote: Blockquote,
+  pre: CodeBlock,
+  code: ({ className, ...props }: ComponentProps<'code'>) => (
     <code
-      className="bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5"
+      className={cn(
+        'bg-secondary text-secondary-foreground rounded-sm px-1 py-0.5',
+        className
+      )}
       {...props}
     />
   ),
 
-  // Custom
-  Separator: (props: ComponentProps<typeof Separator>) => (
-    <Separator className="my-8" {...props} />
+  h4: ({ className, ...props }: ComponentProps<'h4'>) => (
+    <h4 className={cn('text-lg font-semibold my-4', className)} {...props} />
+  ),
+  h5: ({ className, ...props }: ComponentProps<'h5'>) => (
+    <h5 className={cn('text-base font-semibold my-4', className)} {...props} />
+  ),
+  h6: ({ className, ...props }: ComponentProps<'h6'>) => (
+    <h6 className={cn('text-sm font-semibold my-4', className)} {...props} />
+  ),
+  hr: ({ className, ...props }: ComponentProps<'hr'>) => (
+    <hr className={cn('my-8 border-border', className)} {...props} />
+  ),
+  img: ({ className, alt = '', ...props }: ComponentProps<'img'>) => (
+    <img
+      alt={alt}
+      className={cn('max-w-full h-auto rounded-md my-4', className)}
+      {...props}
+    />
+  ),
+  table: ({ className, ...props }: ComponentProps<'table'>) => (
+    <div
+      data-slot="mdx-table-scroll"
+      role="region"
+      aria-label="Table"
+      tabIndex={0}
+      className="my-6 min-w-0 max-w-full overflow-x-auto rounded-lg border border-border bg-background focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+    >
+      <table
+        className={cn(
+          'w-full border-separate border-spacing-0 text-sm [&_tbody>tr]:transition-colors motion-reduce:[&_tbody>tr]:transition-none [&_tbody>tr:nth-child(even)]:bg-muted/20 [&_tbody>tr:hover]:bg-muted/40 [&_tbody>tr:last-child>td]:border-b-0',
+          className
+        )}
+        {...props}
+      />
+    </div>
+  ),
+  th: ({ className, scope = 'col', ...props }: ComponentProps<'th'>) => (
+    <th
+      scope={scope}
+      className={cn(
+        'border-b border-r border-border bg-muted/40 px-4 py-3 text-left text-xs font-semibold tracking-wide text-foreground/90 last:border-r-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  td: ({ className, ...props }: ComponentProps<'td'>) => (
+    <td
+      className={cn(
+        'min-w-40 border-b border-r border-border/70 px-4 py-3 align-top leading-6 last:border-r-0',
+        className
+      )}
+      {...props}
+    />
+  ),
+  Callout,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Separator: ({ className, ...props }: ComponentProps<typeof Separator>) => (
+    <Separator
+      className={
+        typeof className === 'function'
+          ? (state) => cn('my-8', className(state))
+          : cn('my-8', className)
+      }
+      {...props}
+    />
   ),
 }