boltdocs 2.6.1 → 2.7.0

package/src/client/components/mdx/index.ts

@@ -1,53 +1,19 @@
-export { Button } from './button'
-export type { ButtonProps } from './button'
-
-export { CodeBlock } from './code-block'
-
-export { Tabs, Tab } from './tabs'
-export type { TabsProps, TabProps } from './tabs'
-
-export { Video } from './video'
-
-export { Badge } from './badge'
-export type { BadgeProps } from './badge'
-
-export { Card, Cards } from './card'
-export type { CardProps, CardsProps } from './card'
-
-export {
-  Admonition,
-  Note,
-  Tip,
-  Warning,
-  Danger,
-  InfoBox,
-  Important,
-  Caution,
-} from './admonition'
-export type { AdmonitionProps } from './admonition'
-
-export { List } from './list'
-export type { ListProps } from './list'
-
-export { FileTree } from './file-tree'
-export type { FileTreeProps } from './file-tree'
-
-export { Table } from './table'
-export type { TableProps } from './table'
-
-export { Field } from './field'
-export type { FieldProps } from './field'
-
-export { Link } from './link'
-export type { LinkProps } from './link'
-
-export { Image } from './image'
-export type { ImageProps } from './image'
-
-export { ComponentProps } from './component-props'
-export type { ComponentPropsProps } from './component-props'
-
-export { ComponentPreview } from './component-preview'
-export type { ComponentPreviewProps } from './component-preview'
-export { CopyMarkdown } from '../ui-base/copy-markdown'
-export type { CopyMarkdownProps } from '../ui-base/copy-markdown'
+import { Field } from './field'
+import { Typographics } from './typographics'
+import { TableComponents } from './table'
+import { Callout } from './callout'
+import { CodeBlock } from './code-block'
+import { ImageComponents } from './image'
+import { Card } from './card'
+import { Cards } from './cards'
+
+export const mdx_components_default = {
+  ...Typographics,
+  ...TableComponents,
+  ...ImageComponents,
+  pre: CodeBlock,
+  Field,
+  Callout,
+  Card,
+  Cards,
+}

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

@@ -1,156 +1,54 @@
-import * as RAC from 'react-aria-components'
-import { useTable } from './hooks/useTable'
-import {
-  ChevronUp,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-} from 'lucide-react'
 import { cn } from '../../utils/cn'
 
-export interface TableProps {
-  headers?: string[]
-  data?: (string | React.ReactNode)[][]
-  children?: React.ReactNode
-  className?: string
-  sortable?: boolean
-  paginated?: boolean
-  pageSize?: number
-}
+const Table = (props: React.HTMLAttributes<HTMLTableElement>) => (
+  <div className="my-6 w-full overflow-x-auto rounded-xl border border-subtle bg-surface/30">
+    <table className="w-full border-collapse text-left text-sm" {...props} />
+  </div>
+)
+
+const TableHead = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <thead
+    className={cn('border-b border-subtle bg-soft/50', props.className)}
+    {...props}
+  />
+)
 
-export function Table({
-  headers,
-  data,
-  children,
-  className = '',
-  sortable = false,
-  paginated = false,
-  pageSize = 10,
-}: TableProps) {
-  const {
-    sortConfig,
-    currentPage,
-    setCurrentPage,
-    totalPages,
-    paginatedData,
-    requestSort,
-  } = useTable({
-    data,
-    sortable,
-    paginated,
-    pageSize,
-  })
+const TableBody = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
+  <tbody {...props} />
+)
 
-  const renderSortIcon = (index: number) => {
-    if (!sortable) return null
-    if (sortConfig?.key !== index)
-      return <ChevronDown size={14} className="ml-1 opacity-30" />
-    return sortConfig.direction === 'asc' ? (
-      <ChevronUp size={14} className="ml-1 text-primary-400" />
-    ) : (
-      <ChevronDown size={14} className="ml-1 text-primary-400" />
-    )
-  }
+const TableRow = (props: React.HTMLAttributes<HTMLTableRowElement>) => (
+  <tr
+    className={cn(
+      'border-b border-subtle last:border-0 even:bg-soft/10 hover:bg-soft/20 transition-colors',
+      props.className,
+    )}
+    {...props}
+  />
+)
 
-  const tableContent = children ? (
-    children
-  ) : (
-    <>
-      {headers && (
-        <thead>
-          <tr>
-            {headers.map((header, i) => (
-              <th
-                key={i}
-                onClick={() => requestSort(i)}
-                className={cn(
-                  'text-left px-3 py-2.5 border-b-2 border-border-subtle text-text-main font-semibold text-sm',
-                  sortable &&
-                    'cursor-pointer select-none hover:text-primary-400 transition-colors',
-                )}
-              >
-                <div className="flex items-center">
-                  {header}
-                  {renderSortIcon(i)}
-                </div>
-              </th>
-            ))}
-          </tr>
-        </thead>
-      )}
-      {paginatedData && (
-        <tbody>
-          {paginatedData.map((row, i) => (
-            <tr key={i} className="transition-colors hover:bg-bg-surface">
-              {row.map((cell, j) => (
-                <td
-                  key={j}
-                  className="px-3 py-2 border-b border-border-subtle text-sm text-text-muted"
-                >
-                  {cell}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      )}
-    </>
-  )
+const TableHeader = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
+  <th
+    className={cn(
+      'px-4 py-3 font-semibold text-body text-xs font-mono',
+      props.className,
+    )}
+    {...props}
+  />
+)
 
-  return (
-    <div
-      className={cn(
-        'my-6 rounded-lg border border-border-subtle overflow-hidden',
-        className,
-      )}
-    >
-      <div className="overflow-x-auto">
-        <table className="w-full border-collapse text-sm">{tableContent}</table>
-      </div>
+const TableCell = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
+  <td
+    className={cn('px-4 py-3 text-paragraph leading-relaxed', props.className)}
+    {...props}
+  />
+)
 
-      {paginated && totalPages > 1 && (
-        <div className="flex items-center justify-between border-t border-border-subtle px-4 py-3">
-          <span className="text-xs text-text-muted">
-            Page {currentPage} of {totalPages}
-          </span>
-          <div className="flex items-center gap-1">
-            <RAC.Button
-              onPress={() => setCurrentPage(1)}
-              isDisabled={currentPage === 1}
-              className="grid place-items-center h-7 w-7 rounded-md text-text-muted outline-none transition-colors hover:bg-bg-surface disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
-            >
-              <ChevronsLeft size={16} />
-            </RAC.Button>
-            <RAC.Button
-              onPress={() =>
-                setCurrentPage((prev: number) => Math.max(prev - 1, 1))
-              }
-              isDisabled={currentPage === 1}
-              className="grid place-items-center h-7 w-7 rounded-md text-text-muted outline-none transition-colors hover:bg-bg-surface disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
-            >
-              <ChevronLeft size={16} />
-            </RAC.Button>
-            <RAC.Button
-              onPress={() =>
-                setCurrentPage((prev: number) => Math.min(prev + 1, totalPages))
-              }
-              isDisabled={currentPage === totalPages}
-              className="grid place-items-center h-7 w-7 rounded-md text-text-muted outline-none transition-colors hover:bg-bg-surface disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
-            >
-              <ChevronRight size={16} />
-            </RAC.Button>
-            <RAC.Button
-              onPress={() => setCurrentPage(totalPages)}
-              isDisabled={currentPage === totalPages}
-              className="grid place-items-center h-7 w-7 rounded-md text-text-muted outline-none transition-colors hover:bg-bg-surface disabled:opacity-30 disabled:pointer-events-none cursor-pointer"
-            >
-              <ChevronsRight size={16} />
-            </RAC.Button>
-          </div>
-        </div>
-      )}
-    </div>
-  )
+export const TableComponents = {
+  table: Table,
+  thead: TableHead,
+  tbody: TableBody,
+  tr: TableRow,
+  th: TableHeader,
+  td: TableCell,
 }

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

@@ -0,0 +1,120 @@
+import { Link } from '../primitives/link'
+import { cn } from '../../utils/cn'
+import { Heading as HeadingPrimitive } from '../primitives/heading'
+
+const Anchor = ({
+  href,
+  children,
+  className,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  return (
+    <Link
+      href={href || ''}
+      className={cn(
+        'text-primary-500 hover:text-primary-400 dark:text-primary-500 hover:underline font-medium transition-colors duration-200',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Link>
+  )
+}
+
+const HEADING_CLASSES: Record<number, string> = {
+  1: 'text-3xl sm:text-[2.5rem] font-extrabold tracking-tight text-body mb-4 leading-tight',
+  2: 'text-2xl sm:text-[1.75rem] font-bold tracking-tight text-body mt-14 mb-5 pb-2 border-b border-subtle scroll-mt-24',
+  3: 'text-lg sm:text-[1.4rem] font-semibold tracking-tight text-body mt-10 mb-4 scroll-mt-24',
+  4: 'text-base sm:text-[1.1rem] font-semibold tracking-tight text-body mt-8 mb-3 scroll-mt-24',
+  5: 'text-sm sm:text-[0.9rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24',
+  6: 'text-xs sm:text-[0.75rem] font-semibold tracking-tight text-body mt-6 mb-2 scroll-mt-24',
+}
+
+const Heading = ({
+  level,
+  className,
+  ...props
+}: React.ComponentProps<typeof HeadingPrimitive>) => {
+  const headingClass = HEADING_CLASSES[level] || ''
+  return (
+    <HeadingPrimitive
+      level={level}
+      className={cn(headingClass, className)}
+      {...props}
+    />
+  )
+}
+
+export const Typographics = {
+  a: Anchor,
+  h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={1} {...props} />
+  ),
+  h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={2} {...props} />
+  ),
+  h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={3} {...props} />
+  ),
+  h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={4} {...props} />
+  ),
+  h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={5} {...props} />
+  ),
+  h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => (
+    <Heading level={6} {...props} />
+  ),
+  p: ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+    <p
+      className={cn('text-paragraph leading-relaxed my-5', className)}
+      {...props}
+    />
+  ),
+  strong: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <strong className={cn('font-semibold text-body', className)} {...props} />
+  ),
+  mark: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <mark
+      className={cn(
+        'bg-primary-500/10 text-primary-500 font-semibold px-1.5 py-0.5 rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  blockquote: ({
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLQuoteElement>) => (
+    <blockquote
+      className={cn(
+        'border-l-4 border-primary-500 bg-soft/30 pl-4 py-2 my-6 italic text-muted rounded-r-lg',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  hr: ({ className, ...props }: React.HTMLAttributes<HTMLHRElement>) => (
+    <hr className={cn('my-8 border-t border-subtle', className)} {...props} />
+  ),
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul
+      className={cn('list-disc pl-6 my-5 space-y-2 text-paragraph', className)}
+      {...props}
+    />
+  ),
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol
+      className={cn(
+        'list-decimal pl-6 my-5 space-y-2 text-paragraph',
+        className,
+      )}
+      {...props}
+    />
+  ),
+  li: ({ className, ...props }: React.HTMLAttributes<HTMLLIElement>) => (
+    <li className={cn('pl-1', className)} {...props} />
+  ),
+}

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

@@ -1,15 +1,12 @@
-import { useConfig } from '../../../app/config-context'
-import { copyToClipboard } from '../../../utils/copy-clipboard'
+import { copyToClipboard } from '../../utils/copy-clipboard'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { CodeBlockProps } from '../code-block'
+import type { CodeBlockProps } from './code-block'
 
 export function useCodeBlock(props: CodeBlockProps) {
-  const { title } = props
   const [copied, setCopied] = useState(false)
   const [isExpanded, setIsExpanded] = useState(false)
   const [isExpandable, setIsExpandable] = useState(false)
   const preRef = useRef<HTMLPreElement>(null)
-  const config = useConfig()
 
   const handleCopy = useCallback(async () => {
     const code = preRef.current?.textContent ?? ''
@@ -20,8 +17,9 @@ export function useCodeBlock(props: CodeBlockProps) {
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: updates when content changes
   useEffect(() => {
-    const codeLength = preRef.current?.textContent?.length ?? 0
-    setIsExpandable(codeLength > 120)
+    const code = preRef.current?.textContent ?? ''
+    const lines = code.trim().split('\n').length
+    setIsExpandable(lines > 6)
   }, [props.children, props.highlightedHtml])
 
   return {

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

@@ -1,8 +1,8 @@
 import {
   Breadcrumb,
   Breadcrumbs as BreadcrumbsRAC,
-  Link,
 } from 'react-aria-components'
+import { Link } from './link'
 import type { LinkProps } from 'react-aria-components'
 import { ChevronRight } from 'lucide-react'
 import { cn } from '../../utils/cn'
@@ -15,10 +15,7 @@ export const Breadcrumbs = ({
 }: ComponentBase) => {
   return (
     <BreadcrumbsRAC
-      className={cn(
-        'flex items-center gap-1.5 pl-0! mb-0 text-sm text-text-muted',
-        className,
-      )}
+      className={cn('flex flex-wrap items-center', className)}
       {...props}
     >
       {children as any}
@@ -28,10 +25,7 @@ export const Breadcrumbs = ({
 
 const BreadcrumbsItem = ({ children, className, ...props }: ComponentBase) => {
   return (
-    <Breadcrumb
-      className={cn('flex items-center mb-0 gap-1.5', className)}
-      {...props}
-    >
+    <Breadcrumb className={cn('flex items-center', className)} {...props}>
       {children as any}
     </Breadcrumb>
   )
@@ -44,27 +38,14 @@ const BreadcrumbsLink = ({
   ...props
 }: LinkProps & { className?: string }) => {
   return (
-    <Link
-      href={href}
-      className={cn(
-        'transition-colors outline-none hover:text-text-main focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
-        'current:font-medium current:text-text-main current:pointer-events-none cursor-pointer',
-        className,
-      )}
-      {...props}
-    >
+    <Link href={href} className={cn('cursor-pointer', className)} {...props}>
       {children as any}
     </Link>
   )
 }
 
 const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
-  return (
-    <ChevronRight
-      size={14}
-      className={cn('shrink-0 text-text-dim', className)}
-    />
-  )
+  return <ChevronRight size={14} className={cn('shrink-0', className)} />
 }
 
 Breadcrumbs.Root = Breadcrumbs

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

@@ -1,145 +1,6 @@
 import * as RAC from 'react-aria-components'
-import { cn } from '../../utils/cn'
-import { cva } from 'class-variance-authority'
-import type { VariantProps } from 'class-variance-authority'
+export interface ButtonProps extends RAC.ButtonProps {}
 
-export const buttonVariants = cva(
-  'flex flex-row items-center justify-center w-auto font-semibold tracking-tight no-underline whitespace-nowrap select-none outline-none transition-all duration-200 cursor-pointer pressed:scale-[0.97] hover:-translate-y-px leading-none',
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-primary-500 text-white shadow-md hover:brightness-110 hover:shadow-lg',
-        secondary:
-          'bg-bg-surface text-text-main border border-border-subtle hover:bg-bg-muted hover:border-border-strong',
-        outline:
-          'bg-transparent text-text-main border border-border-strong hover:bg-bg-surface hover:border-primary-500',
-        ghost:
-          'bg-transparent text-text-muted hover:bg-bg-surface hover:text-text-main',
-        danger:
-          'bg-[var(--color-danger-500)]/10 text-[var(--color-danger-500)] border border-[var(--color-danger-500)]/20 hover:bg-[var(--color-danger-500)]/15',
-        success:
-          'bg-[var(--color-success-500)]/10 text-[var(--color-success-500)] border border-[var(--color-success-500)]/20 hover:bg-[var(--color-success-500)]/15',
-        warning:
-          'bg-[var(--color-warning-500)]/10 text-[var(--color-warning-500)] border border-[var(--color-warning-500)]/20 hover:bg-[var(--color-warning-500)]/15',
-        info: 'bg-[var(--color-info-500)]/10 text-[var(--color-info-500)] border border-[var(--color-info-500)]/20 hover:bg-[var(--color-info-500)]/15',
-        subtle: 'bg-primary-500/10 text-primary-500 hover:bg-primary-500/20',
-        link: 'bg-transparent text-primary-500 !p-0 !min-h-0 hover:underline',
-      },
-      size: {
-        sm: 'min-h-8 px-3.5 text-[0.8125rem] gap-1.5',
-        md: 'min-h-10 px-5 text-[0.9375rem] gap-2',
-        lg: 'min-h-12 px-7 text-[1.05rem] gap-2.5',
-      },
-      rounded: {
-        none: 'rounded-none',
-        sm: 'rounded-sm',
-        md: 'rounded-md',
-        lg: 'rounded-lg',
-        full: 'rounded-full',
-      },
-      iconSize: {
-        sm: 'w-8 h-8 p-0',
-        md: 'w-10 h-10 p-0',
-        lg: 'w-12 h-12 p-0',
-      },
-      disabled: {
-        true: 'opacity-50 cursor-not-allowed pointer-events-none',
-        false: null,
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-      rounded: 'md',
-    },
-  },
-)
-type ButtonVariantType = VariantProps<typeof buttonVariants>
-
-export interface ButtonProps
-  extends Omit<RAC.ButtonProps, 'children' | 'className'>,
-    ButtonVariantType {
-  icon?: React.ReactNode
-  iconPosition?: 'left' | 'right'
-  href?: string
-  children?: React.ReactNode
-  className?: string
-  isIconOnly?: boolean
-}
-
-export const Button = ({
-  href,
-  icon,
-  iconPosition = 'left',
-  isIconOnly,
-  children,
-  className,
-  variant,
-  size,
-  rounded,
-  iconSize,
-  disabled,
-  ...props
-}: ButtonProps) => {
-  const isOnlyIcon = isIconOnly || (!children && !!icon)
-
-  const content = isOnlyIcon ? (
-    <span className="inline-flex items-center justify-center [&>svg]:w-[1.2rem] [&>svg]:h-[1.2rem]">
-      {icon}
-    </span>
-  ) : (
-    <>
-      {icon && iconPosition === 'left' && (
-        <span className="inline-flex items-center shrink-0 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]">
-          {icon}
-        </span>
-      )}
-      <span className="flex items-center">{children}</span>
-      {icon && iconPosition === 'right' && (
-        <span className="inline-flex items-center shrink-0 [&>svg]:w-[1.1rem] [&>svg]:h-[1.1rem]">
-          {icon}
-        </span>
-      )}
-    </>
-  )
-
-  if (href) {
-    return (
-      <RAC.Link
-        href={href}
-        className={cn(
-          buttonVariants({
-            variant,
-            size,
-            rounded,
-            iconSize: isOnlyIcon ? iconSize : undefined,
-            disabled,
-          }),
-          className,
-        )}
-        {...(props as RAC.LinkProps)}
-      >
-        {content}
-      </RAC.Link>
-    )
-  }
-
-  return (
-    <RAC.Button
-      className={cn(
-        buttonVariants({
-          variant,
-          size,
-          rounded,
-          iconSize: isOnlyIcon ? iconSize : undefined,
-          disabled,
-        }),
-        className,
-      )}
-      {...(props as RAC.ButtonProps)}
-    >
-      {content}
-    </RAC.Button>
-  )
+export const Button = ({ ...props }: ButtonProps) => {
+  return <RAC.Button {...props} />
 }