boltdocs 2.7.10 → 2.7.11

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

@@ -1,99 +0,0 @@
-import { useState, useRef } from 'react'
-import { cn } from '../../utils/cn'
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: React.ReactNode
-  icon?: React.ReactNode
-  href?: string
-}
-
-export function Card({
-  className,
-  title,
-  icon,
-  href,
-  children,
-  ...props
-}: CardProps) {
-  const [position, setPosition] = useState({ x: 0, y: 0 })
-  const [opacity, setOpacity] = useState(0)
-  const cardRef = useRef<HTMLDivElement>(null)
-
-  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 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-0 transition-opacity duration-300"
-        style={{
-          opacity,
-          background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, color-mix(in srgb, ${spotlightColor} 8%, transparent), transparent 40%)`,
-        }}
-      />
-      {/* 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>
-
-      {/* 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

@@ -1,27 +0,0 @@
-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

@@ -1,184 +0,0 @@
-import { Button } from 'react-aria-components'
-import { Copy, Check, File } from '../ui-base/icons'
-import { cn } from '../../utils/cn'
-import { reactToText } from '../../utils/react-to-text'
-import { useCodeBlock } from './use-code-block'
-import * as CodePrimitive from '../primitives/code-block'
-import {
-  TypeScript,
-  JavaScript,
-  React as ReactIcon,
-  Json,
-  Css,
-  BracketsOrange,
-  Markdown,
-  Shell,
-  Yaml,
-  Rust,
-  BracketsRed,
-  Csv,
-} from '../icons-dev'
-import { Tooltip } from '../primitives/tooltip'
-
-const langIconMap: Record<string, React.ComponentType<{ size?: number }>> = {
-  ts: TypeScript,
-  tsx: ReactIcon,
-  js: JavaScript,
-  jsx: ReactIcon,
-  json: Json,
-  css: Css,
-  html: BracketsOrange,
-  md: Markdown,
-  mdx: Markdown,
-  bash: Shell,
-  sh: Shell,
-  yaml: Yaml,
-  yml: Yaml,
-  rs: Rust,
-  rust: Rust,
-  toml: BracketsRed,
-  csv: Csv,
-}
-
-export interface CodeBlockProps {
-  children?: React.ReactNode
-  className?: string
-  hideCopy?: boolean
-  title?: string
-  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 z-10',
-          copied ? 'text-emerald-400' : 'text-muted hover:text-body',
-        )}
-        aria-label="Copy code"
-      >
-        {/* @ts-ignore */}
-        {copied ? <Check size={20} /> : <Copy size={20} />}
-      </Button>
-    </Tooltip>
-  )
-}
-
-export function CodeBlock(props: CodeBlockProps) {
-  const {
-    children,
-    hideCopy = false,
-    highlightedHtml,
-    'data-highlighted-html': dataHighlightedHtml,
-    title,
-    'data-title': dataTitle,
-    'data-lang': dataLang,
-    plain = false,
-    ...rest
-  } = props
-
-  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 || ''
-
-  const {
-    copied,
-    isExpanded,
-    setIsExpanded,
-    isExpandable,
-    preRef,
-    handleCopy,
-    shouldTruncate,
-  } = useCodeBlock(props)
-
-  const LangIcon = langIconMap[lang]
-
-  return (
-    <CodePrimitive.CodeBlock plain={plain} className={props.className}>
-      {(effectiveTitle || !hideCopy) && (
-        <CodePrimitive.CodeBlockHeader
-          className={cn({
-            'absolute top-2 left-0 w-full': !effectiveTitle,
-          })}
-        >
-          <CodePrimitive.CodeBlockGroup>
-            {effectiveTitle && (
-              <>
-                {LangIcon ? (
-                  <LangIcon size={14} />
-                ) : (
-                  <File size={14} className="opacity-60" />
-                )}
-                <span>{effectiveTitle}</span>
-              </>
-            )}
-          </CodePrimitive.CodeBlockGroup>
-          <div className="flex items-center gap-1">
-            {!hideCopy && (
-              <CopyButton copied={copied} handleCopy={handleCopy} />
-            )}
-          </div>
-        </CodePrimitive.CodeBlockHeader>
-      )}
-
-      <CodePrimitive.CodeBlockContent shouldTruncate={shouldTruncate}>
-        {effectiveHighlightedHtml ? (
-          <div
-            // @ts-expect-error
-            ref={preRef}
-            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.875rem] leading-[1.6] overflow-x-auto"
-            {...rest}
-          >
-            {reactToText(children).trimEnd()}
-          </pre>
-        )}
-
-        {/* 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 pb-4 pt-1 -mt-4',
-            )}
-          >
-            {/* @ts-ignore */}
-            <Button
-              onPress={() => setIsExpanded(!isExpanded)}
-              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>
-          </div>
-        )}
-      </CodePrimitive.CodeBlockContent>
-    </CodePrimitive.CodeBlock>
-  )
-}

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

@@ -1,33 +0,0 @@
-export interface FieldProps {
-  children?: React.ReactNode
-  name: string
-  type?: string
-  description?: string
-  required?: boolean
-}
-
-export const Field = ({
-  children,
-  name,
-  type,
-  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>
-      )}
-      {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,44 +0,0 @@
-import { useTheme } from '../../app/theme-context'
-import { cn } from '../../utils/cn'
-import { Image as ImagePrimitive } from '../primitives/image'
-
-export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
-  theme?: 'light' | 'dark'
-}
-
-const Image = ({ src, alt, title, theme, className, ...props }: ImageProps) => {
-  const { theme: themeContext } = useTheme()
-  if (!src) return null
-  if (theme !== themeContext) return null
-
-  const caption = title || alt
-
-  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,
-}

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

@@ -1,19 +0,0 @@
-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,54 +0,0 @@
-import { cn } from '../../utils/cn'
-
-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}
-  />
-)
-
-const TableBody = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
-  <tbody {...props} />
-)
-
-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 TableHeader = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
-  <th
-    className={cn(
-      'px-4 py-3 font-semibold text-body text-xs font-mono',
-      props.className,
-    )}
-    {...props}
-  />
-)
-
-const TableCell = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
-  <td
-    className={cn('px-4 py-3 text-paragraph leading-relaxed', props.className)}
-    {...props}
-  />
-)
-
-export const TableComponents = {
-  table: Table,
-  thead: TableHead,
-  tbody: TableBody,
-  tr: TableRow,
-  th: TableHeader,
-  td: TableCell,
-}

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

@@ -1,120 +0,0 @@
-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/use-code-block.ts

@@ -1,34 +0,0 @@
-import { copyToClipboard } from '../../utils/copy-clipboard'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { CodeBlockProps } from './code-block'
-
-export function useCodeBlock(props: CodeBlockProps) {
-  const [copied, setCopied] = useState(false)
-  const [isExpanded, setIsExpanded] = useState(false)
-  const [isExpandable, setIsExpandable] = useState(false)
-  const preRef = useRef<HTMLPreElement>(null)
-
-  const handleCopy = useCallback(async () => {
-    const code = preRef.current?.textContent ?? ''
-    copyToClipboard(code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }, [])
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: updates when content changes
-  useEffect(() => {
-    const code = preRef.current?.textContent ?? ''
-    const lines = code.trim().split('\n').length
-    setIsExpandable(lines > 6)
-  }, [props.children, props.highlightedHtml])
-
-  return {
-    copied,
-    isExpanded,
-    setIsExpanded,
-    isExpandable,
-    preRef,
-    handleCopy,
-    shouldTruncate: isExpandable && !isExpanded,
-  }
-}

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

@@ -1,54 +0,0 @@
-import {
-  Breadcrumb,
-  Breadcrumbs as BreadcrumbsRAC,
-} from 'react-aria-components'
-import { Link } from './link'
-import type { LinkProps } from 'react-aria-components'
-import { ChevronRight } from '../ui-base/icons'
-import { cn } from '../../utils/cn'
-import type { ComponentBase } from './types'
-
-export const Breadcrumbs = ({
-  children,
-  className,
-  ...props
-}: ComponentBase) => {
-  return (
-    <BreadcrumbsRAC
-      className={cn('flex flex-wrap items-center', className)}
-      {...props}
-    >
-      {children as any}
-    </BreadcrumbsRAC>
-  )
-}
-
-const BreadcrumbsItem = ({ children, className, ...props }: ComponentBase) => {
-  return (
-    <Breadcrumb className={cn('flex items-center', className)} {...props}>
-      {children as any}
-    </Breadcrumb>
-  )
-}
-
-const BreadcrumbsLink = ({
-  children,
-  href,
-  className,
-  ...props
-}: LinkProps & { className?: string }) => {
-  return (
-    <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', className)} />
-}
-
-Breadcrumbs.Root = Breadcrumbs
-Breadcrumbs.Item = BreadcrumbsItem
-Breadcrumbs.Link = BreadcrumbsLink
-Breadcrumbs.Separator = BreadcrumbsSeparator