boltdocs 2.5.5 → 2.6.0

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

@@ -7,7 +7,7 @@ import {
   Zap,
   Flame,
 } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva } from 'class-variance-authority'
 import type { VariantProps } from 'class-variance-authority'
 
@@ -21,26 +21,17 @@ const ICON_MAP: Record<string, React.ReactNode> = {
   caution: <Zap size={18} />,
 }
 
-const LABEL_MAP: Record<string, string> = {
-  note: 'Note',
-  tip: 'Tip',
-  info: 'Info',
-  warning: 'Warning',
-  danger: 'Danger',
-  important: 'Important',
-  caution: 'Caution',
-}
 
-const admonitionVariants = cva('py-4 px-4 rounded-lg', {
+const admonitionVariants = cva('py-4 px-4 rounded-lg flex items-center gap-3 border-[1px] flex-row', {
   variants: {
     type: {
-      note: 'border-primary-400 bg-primary-500/5 text-primary-400',
-      tip: 'border-emerald-500 bg-emerald-500/5 text-emerald-500',
-      info: 'border-sky-500 bg-sky-500/5 text-sky-500',
-      warning: 'border-amber-500 bg-amber-500/5 text-amber-500',
-      danger: 'border-red-500 bg-red-500/5 text-red-500',
-      important: 'border-orange-500 bg-orange-500/5 text-orange-500',
-      caution: 'border-yellow-500 bg-yellow-500/5 text-yellow-500',
+      note: 'border-primary-200 dark:border-primary-800 bg-primary-500/5 text-primary-400',
+      tip: 'border-emerald-200 dark:border-emerald-800 bg-emerald-500/5 text-emerald-500',
+      info: 'border-sky-200 dark:border-sky-800 bg-sky-500/5 text-sky-500',
+      warning: 'border-amber-200 dark:border-amber-800 bg-amber-500/5 text-amber-500',
+      danger: 'border-red-200 dark:border-red-800/70 bg-red-500/5 text-red-500',
+      important: 'border-orange-200 dark:border-orange-800/70 bg-orange-500/5 text-orange-500',
+      caution: 'border-yellow-200 dark:border-yellow-800/70 bg-yellow-500/5 text-yellow-500',
     },
   },
   defaultVariants: {
@@ -51,7 +42,7 @@ type AdmonitionVariants = VariantProps<typeof admonitionVariants>
 
 export interface AdmonitionProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdmonitionVariants {
+  AdmonitionVariants {
   title?: string
   children: React.ReactNode
 }
@@ -69,14 +60,7 @@ export function Admonition({
       role={type === 'warning' || type === 'danger' ? 'alert' : 'note'}
       {...rest}
     >
-      <div className="flex items-center flex-row gap-2 mb-2">
-        <span className={cn('shrink-0', admonitionVariants({ type }))}>
-          {ICON_MAP[type as keyof typeof ICON_MAP]}
-        </span>
-        <span className="text-sm font-bold tracking-tight text-text-main">
-          {title || LABEL_MAP[type as keyof typeof LABEL_MAP]}
-        </span>
-      </div>
+      {ICON_MAP[type as keyof typeof ICON_MAP]}
       <div className="text-sm text-text-muted leading-relaxed [&>p]:m-0 [&>p]:mb-2 [&>p:last-child]:mb-0">
         {children}
       </div>

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

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva } from 'class-variance-authority'
 import type { VariantProps } from 'class-variance-authority'
 

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

@@ -2,10 +2,10 @@ import {
   Button as ButtonPrimitive,
   buttonVariants,
   type ButtonProps,
-} from '@components/primitives/button'
-import { cn } from '@client/utils/cn'
+} from '../primitives/button'
+import { cn } from '../../utils/cn'
 
-export type { ButtonProps } from '@components/primitives/button'
+export type { ButtonProps } from '../primitives/button'
 
 export const Button = ({
   className,

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

@@ -1,7 +1,7 @@
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { useCallback, useRef } from 'react'
 import * as RAC from 'react-aria-components'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva } from 'class-variance-authority'
 import type { VariantProps } from 'class-variance-authority'
 

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

@@ -1,8 +1,9 @@
-import * as RAC from 'react-aria-components'
+import { Button } from 'react-aria-components'
 import { Copy, Check, File } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
+import { reactToText } from '../../utils/react-to-text'
 import { useCodeBlock } from './hooks/use-code-block'
-import { useConfig } from '@client/app/config-context'
+import * as CodePrimitive from '../primitives/code-block'
 import {
   TypeScript,
   JavaScript,
@@ -13,8 +14,10 @@ import {
   Markdown,
   Shell,
   Yaml,
-} from '@components/icons-dev'
-import { Tooltip } from '@components/primitives/tooltip'
+  Rust,
+  BracketsRed,
+} from '../icons-dev'
+import { Tooltip } from '../primitives/tooltip'
 
 const langIconMap: Record<string, React.ComponentType<{ size?: number }>> = {
   ts: TypeScript,
@@ -30,6 +33,9 @@ const langIconMap: Record<string, React.ComponentType<{ size?: number }>> = {
   sh: Shell,
   yaml: Yaml,
   yml: Yaml,
+  rs: Rust,
+  rust: Rust,
+  toml: BracketsRed
 }
 
 export interface CodeBlockProps {
@@ -40,10 +46,32 @@ export interface CodeBlockProps {
   lang?: string
   highlightedHtml?: string
   'data-lang'?: string
+  'data-title'?: string
   plain?: boolean
   [key: string]: any
 }
 
+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',
+        )}
+        aria-label="Copy code"
+      >
+        {/* @ts-ignore */}
+        {copied ? <Check size={20} /> : <Copy size={20} />}
+      </Button>
+    </Tooltip>
+  )
+}
+
 export function CodeBlock(props: CodeBlockProps) {
   const {
     children,
@@ -51,13 +79,16 @@ export function CodeBlock(props: CodeBlockProps) {
     highlightedHtml,
     'data-highlighted-html': dataHighlightedHtml,
     title,
+    'data-title': dataTitle,
     'data-lang': dataLang,
     plain = false,
     ...rest
   } = props
+
   const effectiveHighlightedHtml = highlightedHtml || dataHighlightedHtml
-  const config = useConfig()
+  const effectiveTitle = title || dataTitle
   const lang = props.lang || dataLang || ''
+
   const {
     copied,
     isExpanded,
@@ -71,84 +102,63 @@ export function CodeBlock(props: CodeBlockProps) {
   const LangIcon = langIconMap[lang]
 
   return (
-    <div
-      className={cn(
-        'group relative overflow-hidden bg-(--color-code-bg)',
-        'contain-layout contain-paint', // Optimization: isolate code block rendering
-        {
-          'my-6 rounded-lg border border-border-subtle': !plain,
-          '[&>pre]:max-h-62.5 [&>pre]:overflow-hidden': shouldTruncate,
-        },
-        props.className,
-      )}
-    >
-      {/* Title Header */}
-      {title && (
-        <div className="flex items-center gap-2 border-b border-border-subtle bg-bg-surface/50 px-4 py-2 text-[13px] font-medium text-text-muted">
-          {LangIcon ? (
-            <LangIcon size={14} />
-          ) : (
-            <File size={14} className="opacity-60" />
-          )}
-          <span>{title}</span>
-        </div>
+    <CodePrimitive.CodeBlock plain={plain} className={props.className}>
+      {(effectiveTitle || !hideCopy) && (
+        <CodePrimitive.CodeBlockHeader>
+          <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} />}
+        </CodePrimitive.CodeBlockHeader>
       )}
 
-      {/* Toolbar */}
-      <div className="absolute top-3 right-4 z-50 flex items-center gap-2 transition-all duration-300 opacity-0 group-hover:opacity-100">
-        {!hideCopy && (
-          <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
-            <RAC.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',
-              )}
-              aria-label="Copy code"
-            >
-              {copied ? <Check size={20} /> : <Copy size={20} />}
-            </RAC.Button>
-          </Tooltip>
+      <CodePrimitive.CodeBlockContent shouldTruncate={shouldTruncate}>
+        {effectiveHighlightedHtml ? (
+          <div
+            // @ts-ignore
+            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!"
+            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"
+            {...rest}
+          >
+            {reactToText(children)}
+          </pre>
         )}
-      </div>
-
-      {/* Code Content */}
-      {effectiveHighlightedHtml ? (
-        <div
-          // @ts-ignore
-          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!"
-          dangerouslySetInnerHTML={{ __html: effectiveHighlightedHtml }}
-        />
-      ) : (
-        <pre
-          ref={preRef}
-          className="m-0! rounded-none! border-none! bg-inherit! font-mono text-[0.8125rem] leading-[1.7]"
-          {...rest}
-        >
-          {children}
-        </pre>
-      )}
 
-      {/* Expand/Collapse */}
-      {isExpandable && (
-        <div
-          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',
-          )}
-        >
-          <RAC.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"
+        {/* Expand/Collapse Trigger */}
+        {isExpandable && (
+          <div
+            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',
+            )}
           >
-            {isExpanded ? 'Show less' : 'Expand code'}
-          </RAC.Button>
-        </div>
-      )}
-    </div>
+            {/* @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"
+            >
+              {isExpanded ? 'Show less' : 'Expand code'}
+            </Button>
+          </div>
+        )}
+      </CodePrimitive.CodeBlockContent>
+    </CodePrimitive.CodeBlock>
   )
 }

package/src/client/components/mdx/component-preview.tsx

@@ -11,11 +11,7 @@ export interface ComponentPreviewProps {
 }
 
 export function ComponentPreview(props: ComponentPreviewProps) {
-  const {
-    highlightedHtml,
-    hideCode = false,
-    hideCopy = false,
-  } = props
+  const { highlightedHtml, hideCode = false, hideCopy = false } = props
   const { initialCode, previewElement } = useComponentPreview(props)
 
   return (

package/src/client/components/mdx/component-props.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface PropItem {
   name: string

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

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface FieldProps {
   name: string
@@ -23,23 +23,22 @@ export function Field({
     <article
       className={cn(
         'group relative my-6 rounded-xl border border-border-subtle bg-bg-surface p-5 transition-all duration-300',
-        'hover:border-primary-500/30 hover:shadow-lg hover:shadow-primary-500/5',
         className,
       )}
       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 group-hover:bg-primary-500/15">
+          <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 tracking-wider shadow-sm">
+            <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 tracking-wider text-red-400 border border-red-500/20 shadow-sm">
+            <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>

package/src/client/components/mdx/file-tree.tsx

@@ -8,7 +8,7 @@ import {
   FileImage,
   ChevronRight,
 } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 import {
   TypeScript,
@@ -20,14 +20,17 @@ import {
   Markdown,
   Shell,
   Yaml,
-} from '@components/icons-dev'
+} from '../icons-dev'
 
 // --- Constants & Types ---
 
 const ICON_SIZE = 16
 const STROKE_WIDTH = 2
 
-const FILE_EXTENSION_MAP: Record<string, React.ComponentType<{ size?: number }>> = {
+const FILE_EXTENSION_MAP: Record<
+  string,
+  React.ComponentType<{ size?: number }>
+> = {
   ts: TypeScript,
   tsx: ReactIcon,
   js: JavaScript,

package/src/client/components/mdx/hooks/use-code-block.ts

@@ -1,5 +1,5 @@
-import { useConfig } from '@client/app/config-context'
-import { copyToClipboard } from '@client/utils/copy-clipboard'
+import { useConfig } from '../../../app/config-context'
+import { copyToClipboard } from '../../../utils/copy-clipboard'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type { CodeBlockProps } from '../code-block'
 

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

@@ -1,5 +1,5 @@
 import type { ImgHTMLAttributes } from 'react'
-import { useTheme } from '@client/app/theme-context'
+import { useTheme } from '../../app/theme-context'
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   src: string

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

@@ -1,8 +1,8 @@
 import {
   Link as LinkPrimitive,
   type LinkProps as LinkPrimitiveProps,
-} from '@components/primitives/link'
-import { cn } from '@client/utils/cn'
+} from '../primitives/link'
+import { cn } from '../../utils/cn'
 
 export type LinkProps = LinkPrimitiveProps & {
   to: string

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

@@ -6,7 +6,7 @@ import {
   type ComponentPropsWithoutRef,
 } from 'react'
 import { Check, ChevronRight, Circle } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 const listVariants = cva('my-6 transition-all duration-200', {

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

@@ -8,7 +8,7 @@ import {
   ChevronsLeft,
   ChevronsRight,
 } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface TableProps {
   headers?: string[]

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

@@ -1,7 +1,7 @@
 import { Children, isValidElement, useMemo } from 'react'
 import * as RAC from 'react-aria-components'
 import { useTabs } from './hooks/useTabs'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { CodeBlock } from './code-block'
 import { cva } from 'class-variance-authority'
 

package/src/client/components/primitives/breadcrumbs.tsx

@@ -26,11 +26,7 @@ export const Breadcrumbs = ({
   )
 }
 
-const BreadcrumbsItem = ({
-  children,
-  className,
-  ...props
-}: ComponentBase) => {
+const BreadcrumbsItem = ({ children, className, ...props }: ComponentBase) => {
   return (
     <Breadcrumb
       className={cn('flex items-center mb-0 gap-1.5', className)}
@@ -71,8 +67,6 @@ const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
   )
 }
 
-
-
 Breadcrumbs.Root = Breadcrumbs
 Breadcrumbs.Item = BreadcrumbsItem
 Breadcrumbs.Link = BreadcrumbsLink

package/src/client/components/primitives/button-group.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
 
 export interface ButtonGroupProps extends ComponentBase {

package/src/client/components/primitives/button.tsx

@@ -1,5 +1,5 @@
 import * as RAC from 'react-aria-components'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import { cva } from 'class-variance-authority'
 import type { VariantProps } from 'class-variance-authority'
 

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

@@ -0,0 +1,113 @@
+import type { ComponentProps } from "react";
+import { cn } from "../../utils/cn";
+
+interface CodeBlockRootProps extends ComponentProps<"div"> {
+    /**
+     * Whether the code block is in plain mode (no borders/padding)
+     * @default false
+     */
+    plain?: boolean;
+}
+
+const CodeBlock = ({
+    children,
+    className,
+    plain = false,
+    ...props
+}: CodeBlockRootProps) => {
+    return (
+        <div
+            className={cn(
+                "not-prose boltdocs-code-block",
+                'group relative overflow-hidden bg-(--color-code-bg)',
+                'contain-layout contain-paint',
+                {
+                    'my-6 rounded-lg border border-border-subtle': !plain,
+                },
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+type CodeBlockHeaderProps = ComponentProps<"div">;
+
+const CodeBlockHeader = ({
+    children,
+    className,
+    ...props
+}: CodeBlockHeaderProps) => {
+    return (
+        <div
+            className={cn(
+                "flex h-9 items-center justify-between px-4 py-1.5",
+                "border-b border-border-subtle bg-bg-surface/50",
+                "text-[13px] font-medium text-text-muted",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+type CodeBlockGroupProps = ComponentProps<"div">;
+
+const CodeBlockGroup = ({
+    children,
+    className,
+    ...props
+}: CodeBlockGroupProps) => {
+    return (
+        <div
+            className={cn(
+                "flex items-center space-x-2",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+interface CodeBlockContentProps extends ComponentProps<"div"> {
+    /**
+     * Whether the code should be truncated with an expand button
+     * @default false
+     */
+    shouldTruncate?: boolean;
+}
+
+const CodeBlockContent = ({
+    className,
+    children,
+    shouldTruncate = false,
+    ...props
+}: CodeBlockContentProps) => {
+    return (
+        <div
+            className={cn(
+                "relative",
+                {
+                    '[&>pre]:max-h-62.5 [&>pre]:overflow-hidden': shouldTruncate,
+                },
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+};
+
+export {
+    CodeBlock,
+    CodeBlockHeader,
+    CodeBlockGroup,
+    CodeBlockContent,
+};