boltdocs 2.6.2 → 2.7.1

package/src/client/components/mdx/callout.tsx

@@ -0,0 +1,97 @@
+import { Info, Lightbulb, AlertTriangle, AlertCircle } from 'lucide-react'
+import { cn } from '../../utils/cn'
+
+export type CalloutVariant = 'note' | 'tip' | 'warning' | 'danger' | 'info'
+
+export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CalloutVariant
+  title?: string
+}
+
+const variantStyles: Record<
+  CalloutVariant,
+  {
+    container: string
+    titleText: string
+    iconColor: string
+    icon: React.ComponentType<any>
+    defaultTitle: string
+  }
+> = {
+  note: {
+    container:
+      'bg-slate-500/5 dark:bg-slate-500/10 border-slate-500/40 text-slate-800 dark:text-slate-200',
+    titleText: 'text-slate-900 dark:text-slate-100',
+    iconColor: 'text-slate-500',
+    icon: Info,
+    defaultTitle: 'Note',
+  },
+  info: {
+    container:
+      'bg-indigo-500/5 dark:bg-indigo-500/10 border-indigo-500/40 text-indigo-800 dark:text-indigo-200',
+    titleText: 'text-indigo-900 dark:text-indigo-100',
+    iconColor: 'text-indigo-500',
+    icon: Info,
+    defaultTitle: 'Info',
+  },
+  tip: {
+    container:
+      'bg-green-500/5 dark:bg-green-500/10 border-green-500/40 text-green-800 dark:text-green-200',
+    titleText: 'text-green-900 dark:text-green-100',
+    iconColor: 'text-green-500',
+    icon: Lightbulb,
+    defaultTitle: 'Tip',
+  },
+  warning: {
+    container:
+      'bg-amber-500/5 dark:bg-amber-500/10 border-amber-500/40 text-amber-800 dark:text-amber-200',
+    titleText: 'text-amber-900 dark:text-amber-100',
+    iconColor: 'text-amber-500',
+    icon: AlertTriangle,
+    defaultTitle: 'Warning',
+  },
+  danger: {
+    container:
+      'bg-rose-500/5 dark:bg-rose-500/10 border-rose-500/40 text-rose-800 dark:text-rose-200',
+    titleText: 'text-rose-900 dark:text-rose-100',
+    iconColor: 'text-rose-500',
+    icon: AlertCircle,
+    defaultTitle: 'Danger',
+  },
+}
+
+export function Callout({
+  children,
+  className = '',
+  variant = 'note',
+  title,
+  ...props
+}: CalloutProps) {
+  const styles = variantStyles[variant] || variantStyles.note
+  const Icon = styles.icon
+
+  return (
+    <div
+      className={cn(
+        'my-6 flex gap-4 p-4 rounded-xl border-2',
+        styles.container,
+        className,
+      )}
+      {...props}
+    >
+      <div className={cn('shrink-0 pt-0.5', styles.iconColor)}>
+        <Icon className="w-5 h-5 stroke-[2]" />
+      </div>
+      <div className="flex-1 text-[0.875rem] leading-[1.6]">
+        <div className={cn('font-bold text-sm mb-1', styles.titleText)}>
+          {title || styles.defaultTitle}
+        </div>
+        <div className="prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Callout

package/src/client/components/mdx/card.tsx

@@ -1,124 +1,99 @@
-import type { MouseEvent as ReactMouseEvent } from 'react'
-import { useCallback, useRef } from 'react'
-import * as RAC from 'react-aria-components'
+import { useState, useRef } from 'react'
 import { cn } from '../../utils/cn'
-import { cva } from 'class-variance-authority'
-import type { VariantProps } from 'class-variance-authority'
-
-const cardsVariants = cva('grid gap-4 my-6', {
-  variants: {
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 sm:grid-cols-2',
-      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
-      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
-    },
-  },
-  defaultVariants: {
-    cols: 3,
-  },
-})
-type CardsVariants = VariantProps<typeof cardsVariants>
-
-export interface CardsProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    CardsVariants {}
-
-export function Cards({
-  cols = 3,
-  children,
-  className = '',
-  ...rest
-}: CardsProps) {
-  return (
-    <div className={cn(cardsVariants({ cols }), className)} {...rest}>
-      {children}
-    </div>
-  )
-}
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string
+  title?: React.ReactNode
   icon?: React.ReactNode
   href?: string
-  children?: React.ReactNode
 }
 
 export function Card({
+  className,
   title,
   icon,
   href,
   children,
-  className = '',
-  ...rest
+  ...props
 }: CardProps) {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+  const [opacity, setOpacity] = useState(0)
   const cardRef = useRef<HTMLDivElement>(null)
-  const linkRef = useRef<HTMLAnchorElement>(null)
 
-  const handleMouseMove = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
-    const el = cardRef.current || linkRef.current
-    if (!el) return
-    const { left, top } = el.getBoundingClientRect()
-    el.style.setProperty('--x', `${e.clientX - left}px`)
-    el.style.setProperty('--y', `${e.clientY - top}px`)
-  }, [])
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+  }
+
+  const handleMouseEnter = () => setOpacity(1)
+  const handleMouseLeave = () => setOpacity(0)
 
-  const inner = (
-    <>
+  const Wrapper = href ? 'a' : 'div'
+  const spotlightColor = 'var(--color-primary-500, #eb5828)'
+
+  return (
+    <Wrapper
+      ref={cardRef}
+      href={href}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      className={cn(
+        'group relative flex flex-col gap-3 rounded-2xl border p-6 overflow-hidden transition-all duration-300',
+        'hover:shadow-lg dark:hover:shadow-none hover:-translate-y-0.5',
+        'bg-surface border-subtle text-paragraph',
+        href && 'cursor-pointer',
+        className,
+      )}
+      {...(props as any)}
+    >
+      {/* Background Spotlight */}
       <div
-        className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        className="pointer-events-none absolute inset-0 transition-opacity duration-300"
         style={{
-          background:
-            'radial-gradient(400px circle at var(--x) var(--y), color-mix(in oklch, var(--color-primary-500), transparent 90%), transparent 80%)',
+          opacity,
+          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 8%, transparent), transparent 40%)`,
         }}
       />
-      {icon && (
-        <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 text-lg transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3">
-          {icon}
-        </div>
-      )}
-      <div className="space-y-1.5">
-        {title && <h3 className="text-sm font-bold text-text-main">{title}</h3>}
-        {children && (
-          <div className="text-sm text-text-muted leading-relaxed">
-            {children}
+      {/* Border Spotlight Glow */}
+      <div
+        className="pointer-events-none absolute inset-0 rounded-2xl transition-opacity duration-300"
+        style={{
+          opacity,
+          padding: '1px',
+          background: `radial-gradient(400px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 50%, transparent), transparent 40%)`,
+          WebkitMask:
+            'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
+          WebkitMaskComposite: 'xor',
+          maskComposite: 'exclude',
+        }}
+      />
+
+      {/* Header Content */}
+      <div className="relative z-10 flex items-center gap-3">
+        {icon && (
+          <div
+            className={cn(
+              'shrink-0 transition-transform duration-500 group-hover:rotate-[15deg] group-hover:scale-110 flex items-center justify-center text-muted group-hover:text-primary-500',
+              '[&>svg]:w-6 [&>svg]:h-6 [&>svg]:stroke-[1.5]',
+            )}
+          >
+            {icon}
           </div>
         )}
+        {title && (
+          <h3 className="font-semibold text-base m-0 leading-none text-body">
+            {title}
+          </h3>
+        )}
       </div>
-    </>
-  )
-
-  const cardClasses = cn(
-    'group relative block rounded-xl border border-border-subtle bg-bg-surface p-5 outline-none overflow-hidden',
-    'transition-all duration-200 hover:border-primary-500/40 hover:shadow-lg hover:shadow-primary-500/5',
-    'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-    className,
-  )
 
-  if (href) {
-    return (
-      <RAC.Link
-        ref={linkRef}
-        href={href}
-        className={cn(cardClasses, 'no-underline cursor-pointer')}
-        onMouseMove={handleMouseMove}
-        {...(rest as any)}
-      >
-        {inner}
-      </RAC.Link>
-    )
-  }
-
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: spotlight effect is decorative
-    <div
-      ref={cardRef}
-      role="presentation"
-      className={cardClasses}
-      onMouseMove={handleMouseMove}
-      {...rest}
-    >
-      {inner}
-    </div>
+      {/* Body Content */}
+      <div className="relative z-10 text-[0.875rem] leading-[1.6] opacity-90 prose prose-neutral dark:prose-invert max-w-none [&>p]:m-0 [&>p+p]:mt-2">
+        {children}
+      </div>
+    </Wrapper>
   )
 }
+
+export default Card

package/src/client/components/mdx/cards.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../../utils/cn'
+
+export interface CardsProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 1 | 2 | 3 | 4
+}
+
+export function Cards({ children, className, cols = 2, ...props }: CardsProps) {
+  return (
+    <div
+      className={cn(
+        'grid gap-4 my-6',
+        {
+          'grid-cols-1': cols === 1,
+          'grid-cols-1 sm:grid-cols-2': cols === 2,
+          'grid-cols-1 sm:grid-cols-2 md:grid-cols-3': cols === 3,
+          'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4': cols === 4,
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default Cards

package/src/client/components/mdx/code-block.tsx

@@ -2,7 +2,7 @@ import { Button } from 'react-aria-components'
 import { Copy, Check, File } from 'lucide-react'
 import { cn } from '../../utils/cn'
 import { reactToText } from '../../utils/react-to-text'
-import { useCodeBlock } from './hooks/use-code-block'
+import { useCodeBlock } from './use-code-block'
 import * as CodePrimitive from '../primitives/code-block'
 import {
   TypeScript,
@@ -16,6 +16,7 @@ import {
   Yaml,
   Rust,
   BracketsRed,
+  Csv,
 } from '../icons-dev'
 import { Tooltip } from '../primitives/tooltip'
 
@@ -35,7 +36,8 @@ const langIconMap: Record<string, React.ComponentType<{ size?: number }>> = {
   yml: Yaml,
   rs: Rust,
   rust: Rust,
-  toml: BracketsRed
+  toml: BracketsRed,
+  csv: Csv,
 }
 
 export interface CodeBlockProps {
@@ -51,17 +53,21 @@ export interface CodeBlockProps {
   [key: string]: any
 }
 
-const CopyButton = ({ copied, handleCopy }: { copied: boolean; handleCopy: () => void }) => {
+const CopyButton = ({
+  copied,
+  handleCopy,
+}: {
+  copied: boolean
+  handleCopy: () => void
+}) => {
   return (
     <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
       {/* @ts-ignore */}
       <Button
         onPress={handleCopy}
         className={cn(
-          'grid place-items-center size-8 bg-transparent outline-none cursor-pointer transition-all duration-200 hover:scale-110 active:scale-95 [&>svg]:size-4 [&>svg]:stroke-2',
-          copied
-            ? 'text-emerald-400'
-            : 'text-text-muted hover:text-text-main',
+          'grid place-items-center size-8 bg-transparent outline-none cursor-pointer transition-all duration-200 hover:scale-110 active:scale-95 [&>svg]:size-4 [&>svg]:stroke-2 z-10',
+          copied ? 'text-emerald-400' : 'text-muted hover:text-body',
         )}
         aria-label="Copy code"
       >
@@ -85,7 +91,14 @@ export function CodeBlock(props: CodeBlockProps) {
     ...rest
   } = props
 
-  const effectiveHighlightedHtml = highlightedHtml || dataHighlightedHtml
+  const rawHighlightedHtml = highlightedHtml || dataHighlightedHtml
+  const effectiveHighlightedHtml =
+    typeof rawHighlightedHtml === 'string'
+      ? rawHighlightedHtml.replace(
+          /<span class="line">\s*(?:<span[^>]*>\s*<\/span>)?\s*<\/span>\s*(<\/code>\s*<\/pre>)/g,
+          '$1',
+        )
+      : rawHighlightedHtml
   const effectiveTitle = title || dataTitle
   const lang = props.lang || dataLang || ''
 
@@ -104,39 +117,46 @@ export function CodeBlock(props: CodeBlockProps) {
   return (
     <CodePrimitive.CodeBlock plain={plain} className={props.className}>
       {(effectiveTitle || !hideCopy) && (
-        <CodePrimitive.CodeBlockHeader>
+        <CodePrimitive.CodeBlockHeader
+          className={cn({
+            'absolute top-2 left-0 w-full': !effectiveTitle,
+          })}
+        >
           <CodePrimitive.CodeBlockGroup>
             {effectiveTitle && (
               <>
                 {LangIcon ? (
                   <LangIcon size={14} />
                 ) : (
-                  // @ts-ignore
                   <File size={14} className="opacity-60" />
                 )}
                 <span>{effectiveTitle}</span>
               </>
             )}
           </CodePrimitive.CodeBlockGroup>
-          {!hideCopy && <CopyButton copied={copied} handleCopy={handleCopy} />}
+          <div className="flex items-center gap-1">
+            {!hideCopy && (
+              <CopyButton copied={copied} handleCopy={handleCopy} />
+            )}
+          </div>
         </CodePrimitive.CodeBlockHeader>
       )}
 
       <CodePrimitive.CodeBlockContent shouldTruncate={shouldTruncate}>
         {effectiveHighlightedHtml ? (
           <div
-            // @ts-ignore
+            // @ts-expect-error
             ref={preRef}
-            className="shiki-wrapper [&>pre]:m-0! [&>pre]:rounded-none! [&>pre]:border-none! [&>pre]:bg-inherit! [&>pre>code]:grid! [&>pre>code]:p-5! [&>.shiki.shiki-themes]:bg-transparent!"
+            className="shiki-wrapper overflow-x-auto [&>pre]:m-0! [&>pre]:rounded-none! [&>pre]:border-none! [&>pre]:bg-inherit! [&>pre>code]:grid! [&>pre>code]:p-5! [&>pre>code]:text-[0.875rem]! [&>pre>code]:leading-[1.6]! [&>.shiki.shiki-themes]:bg-transparent!"
             dangerouslySetInnerHTML={{ __html: effectiveHighlightedHtml }}
           />
         ) : (
           <pre
             ref={preRef}
-            className="m-0! p-5! rounded-none! border-none! bg-inherit! font-mono text-[0.8125rem] leading-[1.7] overflow-x-auto"
+            className="m-0! p-5! rounded-none! border-none! bg-inherit! font-mono text-[0.875rem] leading-[1.6] overflow-x-auto"
             {...rest}
           >
-            {reactToText(children)}
+            {reactToText(children).trimEnd()}
           </pre>
         )}
 
@@ -146,13 +166,13 @@ export function CodeBlock(props: CodeBlockProps) {
             className={cn(
               shouldTruncate
                 ? 'absolute bottom-0 inset-x-0 h-24 bg-linear-to-t from-(--color-code-bg) to-transparent flex items-end justify-center pb-4 z-10'
-                : 'relative flex justify-center py-4',
+                : 'relative flex justify-center pb-4 pt-1 -mt-4',
             )}
           >
             {/* @ts-ignore */}
             <Button
               onPress={() => setIsExpanded(!isExpanded)}
-              className="rounded-full bg-bg-surface border border-border-subtle px-5 py-2 text-[0.8125rem] font-medium text-text-main outline-none cursor-pointer transition-all hover:bg-border-subtle hover:-translate-y-px backdrop-blur-md"
+              className="rounded-full bg-surface border border-subtle px-5 py-2 text-[0.8125rem] font-medium text-body outline-none cursor-pointer transition-all hover:bg-soft hover:-translate-y-px backdrop-blur-md"
             >
               {isExpanded ? 'Show less' : 'Expand code'}
             </Button>

package/src/client/components/mdx/field.tsx

@@ -1,65 +1,33 @@
-import { cn } from '../../utils/cn'
-
 export interface FieldProps {
+  children?: React.ReactNode
   name: string
   type?: string
-  defaultValue?: string
+  description?: string
   required?: boolean
-  children: React.ReactNode
-  id?: string
-  className?: string
 }
 
-export function Field({
+export const Field = ({
+  children,
   name,
   type,
-  defaultValue,
-  required = false,
-  children,
-  id,
-  className = '',
-}: FieldProps) {
-  return (
-    <article
-      className={cn(
-        'group relative my-6 rounded-xl border border-border-subtle bg-bg-surface p-5 transition-all duration-300',
-        className,
+  description,
+  required,
+}: FieldProps) => (
+  <div className="my-4 border border-subtle bg-surface/50 p-4 rounded-xl flex flex-col gap-1 text-sm select-none">
+    <div className="flex items-center gap-2">
+      <span className="font-mono font-bold text-primary-500">{name}</span>
+      {type && (
+        <span className="text-xs text-muted font-mono bg-soft px-1.5 py-0.5 rounded-md">
+          {type}
+        </span>
       )}
-      id={id}
-    >
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-4">
-        <div className="flex flex-wrap items-center gap-2.5">
-          <code className="inline-flex items-center rounded-md bg-primary-500/10 px-2.5 py-1 font-mono text-sm font-bold text-primary-400 border border-primary-500/20 shadow-sm transition-colors">
-            {name}
-          </code>
-          {type && (
-            <span className="rounded-md bg-bg-muted/80 border border-border-subtle px-2 py-0.5 text-[11px] font-semibold text-text-muted uppercase shadow-sm">
-              {type}
-            </span>
-          )}
-          {required && (
-            <div className="flex items-center gap-1.5 rounded-full bg-red-500/10 px-2.5 py-0.5 text-[10px] font-bold uppercase text-red-400 border border-red-500/20 shadow-sm">
-              <span className="h-1 w-1 rounded-full bg-red-400 animate-pulse" />
-              Required
-            </div>
-          )}
-        </div>
-
-        {defaultValue && (
-          <div className="flex items-center gap-2 text-[11px] text-text-muted bg-bg-muted/30 px-2.5 py-1 rounded-md border border-border-subtle/50">
-            <span className="font-semibold opacity-60 uppercase tracking-tighter">
-              Default
-            </span>
-            <code className="font-mono text-text-main font-medium">
-              {defaultValue}
-            </code>
-          </div>
-        )}
-      </div>
-
-      <div className="text-sm text-text-muted leading-relaxed [&>p]:m-0 selection:bg-primary-500/30">
-        {children}
-      </div>
-    </article>
-  )
-}
+      {required && (
+        <span className="text-xs text-rose-500 font-semibold">required</span>
+      )}
+    </div>
+    {description && (
+      <div className="text-muted text-xs mt-1">{description}</div>
+    )}
+    {children && <div className="mt-2">{children}</div>}
+  </div>
+)

package/src/client/components/mdx/image.tsx

@@ -1,23 +1,44 @@
-import type { ImgHTMLAttributes } from 'react'
 import { useTheme } from '../../app/theme-context'
+import { cn } from '../../utils/cn'
+import { Image as ImagePrimitive } from '../primitives/image'
 
-export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
-  src: string
-  darkSrc?: string
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   theme?: 'light' | 'dark'
 }
 
-/**
- * A themed Image component for Boltdocs.
- * It supports rendering based on the current active theme.
- */
-export function Image({ src, alt, theme: imageTheme, ...props }: ImageProps) {
-  const { theme: currentTheme } = useTheme()
+const Image = ({ src, alt, title, theme, className, ...props }: ImageProps) => {
+  const { theme: themeContext } = useTheme()
+  if (!src) return null
+  if (theme !== themeContext) return null
 
-  // If a specific theme is required for this image, only render if it matches
-  if (imageTheme && imageTheme !== currentTheme) {
-    return null
-  }
+  const caption = title || alt
 
-  return <img src={src} alt={alt || ''} {...props} />
+  return (
+    <figure className="my-6 sm:my-8 flex flex-col items-center justify-center group not-prose">
+      <div className="relative w-full overflow-hidden rounded-lg sm:rounded-2xl border border-subtle bg-soft/30 transition-all duration-300 sm:max-w-[85%] lg:max-w-full">
+        <ImagePrimitive
+          src={src}
+          alt={alt || ''}
+          theme={theme}
+          loading="lazy"
+          decoding="async"
+          className={cn(
+            'w-full h-auto object-contain transition-transform duration-500 group-hover:scale-[1.01] my-0 rounded-md sm:rounded-xl block',
+            className,
+          )}
+          {...props}
+        />
+      </div>
+      {caption && (
+        <figcaption className="mt-2 sm:mt-3 text-center text-xs sm:text-sm text-muted font-medium select-none tracking-wide opacity-90 sm:opacity-80 group-hover:opacity-100 transition-opacity duration-300 px-2">
+          {caption}
+        </figcaption>
+      )}
+    </figure>
+  )
+}
+
+export const ImageComponents = {
+  img: Image,
+  Image,
 }