boltdocs 1.10.2 → 2.0.0

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

@@ -0,0 +1,135 @@
+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 { CodeBlock } from './code-block'
+import { cva } from 'class-variance-authority'
+
+const tabListVariants = cva(
+  'relative flex items-center border-b border-border-subtle gap-1 overflow-x-auto no-scrollbar',
+  {
+    variants: {
+      size: {
+        default: 'px-0',
+        compact: 'px-2',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+)
+
+const tabItemVariants = cva(
+  'flex items-center gap-2 px-4 py-2.5 text-sm font-medium outline-none transition-all duration-200 cursor-pointer bg-transparent border-none select-none whitespace-nowrap',
+  {
+    variants: {
+      isActive: {
+        true: 'text-primary-500',
+        false: 'text-text-muted hover:text-text-main',
+      },
+      isDisabled: {
+        true: 'opacity-40 pointer-events-none',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      isActive: false,
+      isDisabled: false,
+    },
+  },
+)
+
+export interface TabProps {
+  label: string
+  icon?: React.ReactNode
+  disabled?: boolean
+  children: React.ReactNode
+}
+
+export function Tab({ children }: TabProps) {
+  const content =
+    typeof children === 'string' ? (
+      <CodeBlock className="language-bash">
+        <code>{children.trim()}</code>
+      </CodeBlock>
+    ) : (
+      children
+    )
+
+  return <div className="py-4">{content}</div>
+}
+
+export interface TabsProps {
+  defaultIndex?: number
+  children: React.ReactNode
+}
+
+export function Tabs({ defaultIndex = 0, children }: TabsProps) {
+  const tabs = useMemo(() => {
+    return Children.toArray(children).filter(
+      (child) =>
+        isValidElement(child) &&
+        (child as React.ReactElement<TabProps>).props?.label,
+    ) as React.ReactElement<TabProps>[]
+  }, [children])
+
+  const { active, setActive, tabRefs, indicatorStyle } = useTabs({
+    initialIndex: defaultIndex,
+    tabs,
+  })
+
+  return (
+    <div className="my-8 w-full group/tabs">
+      <RAC.Tabs
+        selectedKey={active.toString()}
+        onSelectionChange={(key) => setActive(Number(key))}
+        className="w-full"
+      >
+        <RAC.TabList
+          aria-label="Content Tabs"
+          className={cn(tabListVariants())}
+        >
+          {tabs.map((child, i) => {
+            const { label, icon, disabled } = child.props
+            const key = i.toString()
+
+            return (
+              <RAC.Tab
+                key={key}
+                id={key}
+                isDisabled={disabled}
+                ref={(el: any) => {
+                  tabRefs.current[i] = el
+                }}
+                className={({ isSelected, isDisabled }) =>
+                  cn(tabItemVariants({ isActive: isSelected, isDisabled }))
+                }
+              >
+                {!!icon && (
+                  <span className="shrink-0 [&>svg]:w-4 [&>svg]:h-4">
+                    {icon}
+                  </span>
+                )}
+                <span>{label}</span>
+              </RAC.Tab>
+            )
+          })}
+
+          <div
+            className="absolute bottom-0 h-0.5 bg-primary-500 transition-all duration-300 ease-in-out pointer-events-none"
+            style={indicatorStyle}
+            aria-hidden="true"
+          />
+        </RAC.TabList>
+
+        {tabs.map((_tab, i) => (
+          <RAC.TabPanel key={i} id={i.toString()}>
+            {/* biome-ignore lint/suspicious/noExplicitAny: bypass version-specific ReactNode mismatch */}
+            {tabs[i] as any}
+          </RAC.TabPanel>
+        ))}
+      </RAC.Tabs>
+    </div>
+  )
+}

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

@@ -0,0 +1,68 @@
+import { useRef, useState, useEffect } from 'react'
+
+interface VideoProps {
+  src?: string
+  poster?: string
+  alt?: string
+  controls?: boolean
+  preload?: string
+  children?: React.ReactNode
+  [key: string]: any
+}
+
+export function Video({
+  src,
+  poster,
+  alt,
+  children,
+  controls,
+  preload = 'metadata',
+  ...rest
+}: VideoProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true)
+          observer.disconnect()
+        }
+      },
+      { rootMargin: '200px' },
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  return (
+    <div
+      ref={containerRef}
+      className="my-6 overflow-hidden rounded-lg border border-border-subtle"
+    >
+      {isVisible ? (
+        <video
+          className="block w-full h-auto"
+          src={src}
+          poster={poster}
+          controls={true}
+          preload={preload}
+          playsInline
+          {...rest}
+        >
+          {children}
+          Your browser does not support the video tag.
+        </video>
+      ) : (
+        <div
+          className="aspect-video bg-bg-surface animate-pulse"
+          role="img"
+          aria-label={alt || 'Video'}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,79 @@
+import {
+  Breadcrumb,
+  Breadcrumbs as BreadcrumbsRAC,
+  Link,
+} from 'react-aria-components'
+import type { LinkProps } from 'react-aria-components'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '../../utils/cn'
+import type { ComponentBase } from './types'
+
+export const BreadcrumbsRoot = ({
+  children,
+  className,
+  ...props
+}: ComponentBase) => {
+  return (
+    <BreadcrumbsRAC
+      className={cn(
+        'flex items-center gap-1.5 mb-0 text-sm text-text-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children as any}
+    </BreadcrumbsRAC>
+  )
+}
+
+export const BreadcrumbsItem = ({
+  children,
+  className,
+  ...props
+}: ComponentBase) => {
+  return (
+    <Breadcrumb
+      className={cn('flex items-center mb-0 gap-1.5', className)}
+      {...props}
+    >
+      {children as any}
+    </Breadcrumb>
+  )
+}
+
+export const BreadcrumbsLink = ({
+  children,
+  href,
+  className,
+  ...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}
+    >
+      {children as any}
+    </Link>
+  )
+}
+
+export const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
+  return (
+    <ChevronRight
+      size={14}
+      className={cn('shrink-0 text-text-dim', className)}
+    />
+  )
+}
+
+export default {
+  BreadcrumbsRoot,
+  BreadcrumbsItem,
+  BreadcrumbsLink,
+  BreadcrumbsSeparator,
+}

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

@@ -0,0 +1,54 @@
+import { cn } from '@client/utils/cn'
+import type { ComponentBase } from './types'
+
+export interface ButtonGroupProps extends ComponentBase {
+  vertical?: boolean
+}
+
+export const ButtonGroup = ({
+  children,
+  className,
+  vertical = false,
+}: ButtonGroupProps) => {
+  return (
+    <div
+      className={cn(
+        'inline-flex',
+        vertical ? 'flex-col' : 'flex-row',
+        // Handle nested button borders and radii
+        !vertical && [
+          '[&>*:not(:first-child)]:-ml-px',
+          '[&>*:first-child]:rounded-r-none',
+          '[&>*:last-child]:rounded-l-none',
+          '[&>*:not(:first-child):not(:last-child)]:rounded-none',
+          // Extra polish for outer corners
+          className?.includes('rounded-full') && [
+            '[&>*:first-child]:rounded-l-full',
+            '[&>*:last-child]:rounded-r-full',
+          ],
+          className?.includes('rounded-xl') && [
+            '[&>*:first-child]:rounded-l-xl',
+            '[&>*:last-child]:rounded-r-xl',
+          ],
+          className?.includes('rounded-lg') && [
+            '[&>*:first-child]:rounded-l-lg',
+            '[&>*:last-child]:rounded-r-lg',
+          ],
+        ],
+        vertical && [
+          '[&>*:not(:first-child)]:-mt-px',
+          '[&>*:first-child]:rounded-b-none',
+          '[&>*:last-child]:rounded-t-none',
+          '[&>*:not(:first-child):not(:last-child)]:rounded-none',
+          className?.includes('rounded-full') && [
+            '[&>*:first-child]:rounded-t-full',
+            '[&>*:last-child]:rounded-b-full',
+          ],
+        ],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,145 @@
+import * as RAC from 'react-aria-components'
+import { cn } from '@client/utils/cn'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+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>
+  )
+}

package/src/client/components/primitives/helpers/observer.ts

@@ -0,0 +1,120 @@
+import type { TOCItemInfo, TOCItemType } from '../on-this-page'
+
+export function getItemId(url: string) {
+  if (url.startsWith('#')) return url.slice(1)
+  return null
+}
+
+export class Observer {
+  items: TOCItemInfo[] = []
+  single = false
+  private observer: IntersectionObserver | null = null
+  onChange?: () => void
+
+  private callback(entries: IntersectionObserverEntry[]) {
+    if (entries.length === 0) return
+
+    let hasActive = false
+    this.items = this.items.map((item) => {
+      const entry = entries.find((entry) => entry.target.id === item.id)
+      let active = entry ? entry.isIntersecting : item.active && !item.fallback
+      if (this.single && hasActive) active = false
+
+      if (item.active !== active) {
+        item = {
+          ...item,
+          t: Date.now(),
+          active,
+          fallback: false,
+        }
+      }
+
+      if (active) hasActive = true
+      return item
+    })
+
+    if (!hasActive && entries[0].rootBounds) {
+      const viewTop = entries[0].rootBounds.top
+      let min = Number.MAX_VALUE
+      let fallbackIdx = -1
+
+      for (let i = 0; i < this.items.length; i++) {
+        const element = document.getElementById(this.items[i].id)
+        if (!element) continue
+
+        const d = Math.abs(viewTop - element.getBoundingClientRect().top)
+        if (d < min) {
+          fallbackIdx = i
+          min = d
+        }
+      }
+
+      if (fallbackIdx !== -1) {
+        this.items[fallbackIdx] = {
+          ...this.items[fallbackIdx],
+          active: true,
+          fallback: true,
+          t: Date.now(),
+        }
+      }
+    }
+
+    this.onChange?.()
+  }
+
+  setItems(newItems: TOCItemType[]) {
+    const observer = this.observer
+    if (observer) {
+      for (const item of this.items) {
+        const element = document.getElementById(item.id)
+        if (!element) continue
+        observer.unobserve(element)
+      }
+    }
+
+    this.items = []
+    for (const item of newItems) {
+      const id = getItemId(item.url)
+      if (!id) continue
+
+      this.items.push({
+        id,
+        active: false,
+        fallback: false,
+        t: 0,
+        original: item,
+      })
+    }
+    this.watchItems()
+
+    // In an SPA, the TOC might update before the MDX content is in the DOM.
+    // We perform a few delayed scans to ensure we catch those elements.
+    if (typeof window !== 'undefined') {
+      setTimeout(() => this.watchItems(), 100)
+      setTimeout(() => this.watchItems(), 500)
+      setTimeout(() => this.watchItems(), 1000)
+    }
+
+    this.onChange?.()
+  }
+
+  watch(options?: IntersectionObserverInit) {
+    if (this.observer) return
+    this.observer = new IntersectionObserver(this.callback.bind(this), options)
+    this.watchItems()
+  }
+
+  private watchItems() {
+    if (!this.observer) return
+    for (const item of this.items) {
+      const element = document.getElementById(item.id)
+      if (!element) continue
+      this.observer.observe(element)
+    }
+  }
+
+  unwatch() {
+    this.observer?.disconnect()
+    this.observer = null
+  }
+}

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

@@ -0,0 +1,17 @@
+export * from './navbar'
+export * from './navigation-menu'
+export * from './search-dialog'
+export * from './on-this-page'
+export * from './page-nav'
+export * from './tabs'
+export * from './sidebar'
+export * from './breadcrumbs'
+export * from './button'
+export * from './button-group'
+export * from './menu'
+export * from './popover'
+export * from './tooltip'
+export * from './link'
+export { Separator, ToggleButton } from 'react-aria-components'
+
+export { cn } from '../../utils/cn'