boltdocs 2.7.9 → 2.7.11

package/src/client/components/primitives/on-this-page.tsx

@@ -1,430 +0,0 @@
-import {
-  createContext,
-  use,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-  type RefObject,
-} from 'react'
-import scrollIntoView from 'scroll-into-view-if-needed'
-import { cn } from '../../utils/cn'
-import type { ComponentBase } from './types'
-import { getItemId, Observer } from './helpers/observer'
-
-export interface TOCItemType {
-  title: ReactNode
-  url: string
-  depth: number
-  _step?: number
-}
-
-export type TableOfContents = TOCItemType[]
-
-export interface TOCItemInfo {
-  id: string
-  active: boolean
-  /** last time the item is updated */
-  t: number
-  /** currently active but not intersecting in viewport */
-  fallback: boolean
-  original?: TOCItemType
-}
-
-export interface AnchorProviderProps {
-  toc: TOCItemType[]
-  /**
-   * Only accept one active item at most
-   * @defaultValue false
-   */
-  single?: boolean
-  /**
-   * Custom IntersectionObserver options
-   */
-  observerOptions?: IntersectionObserverInit
-  children?: ReactNode
-}
-
-export interface ScrollProviderProps {
-  /**
-   * Scroll into the view of container when active
-   */
-  containerRef: RefObject<HTMLElement | null>
-  children?: ReactNode
-}
-
-export interface OnThisPageContentProps extends ComponentBase {
-  ref?: React.Ref<HTMLDivElement>
-  scrollRef?: RefObject<HTMLElement | null>
-}
-
-export interface OnThisPageItemProps extends ComponentBase {
-  level?: number
-}
-
-export interface OnThisPageLinkProps extends ComponentBase {
-  href?: string
-  active?: boolean
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
-}
-
-export interface OnThisPageIndicatorProps extends ComponentBase {
-  style?: React.CSSProperties
-}
-
-const ItemsContext = createContext<TOCItemInfo[] | null>(null)
-const ScrollContext = createContext<RefObject<HTMLElement | null> | null>(null)
-
-export function useItems() {
-  const ctx = use(ItemsContext)
-  if (!ctx)
-    throw new Error(
-      `Component must be used under the <AnchorProvider /> component.`,
-    )
-  return ctx
-}
-
-export function useActiveAnchor(): string | undefined {
-  const items = useItems()
-  return useMemo(() => {
-    let out: TOCItemInfo | undefined
-    for (const item of items) {
-      if (!item.active) continue
-      if (!out || item.t > out.t) {
-        out = item
-      }
-    }
-    return out?.id
-  }, [items])
-}
-
-export function useActiveAnchors(): string[] {
-  const items = useItems()
-  return useMemo(() => {
-    const out: string[] = []
-    for (const item of items) {
-      if (item.active) out.push(item.id)
-    }
-    return out
-  }, [items])
-}
-
-/** Optional: add auto-scroll to TOC items. */
-export function ScrollProvider({
-  containerRef,
-  children,
-}: ScrollProviderProps) {
-  return (
-    <ScrollContext.Provider value={containerRef}>
-      {children}
-    </ScrollContext.Provider>
-  )
-}
-
-export function AnchorProvider({
-  toc,
-  single = false,
-  observerOptions,
-  children,
-}: AnchorProviderProps) {
-  const observer = useMemo(() => new Observer(), [])
-  const [items, setItems] = useState<TOCItemInfo[]>(observer.items)
-
-  observer.single = single
-  useEffect(() => {
-    observer.setItems(toc)
-  }, [observer, toc])
-
-  useEffect(() => {
-    // We use a rootMargin that acts as an activation "line" near the top.
-    // headings are "intersecting" (active=true) when they are BELOW this line.
-    // Default to a more permissive margin for detecting visible headings
-    const defaultOptions = {
-      rootMargin: '-80px 0% -60% 0%',
-      threshold: 0,
-    }
-    const options = observerOptions
-      ? { ...defaultOptions, ...observerOptions }
-      : defaultOptions
-
-    observer.watch(options)
-    observer.onChange = () => setItems([...observer.items])
-
-    return () => {
-      observer.unwatch()
-    }
-  }, [observer])
-
-  return <ItemsContext.Provider value={items}>{children}</ItemsContext.Provider>
-}
-
-export const OnThisPage = ({ children, className }: ComponentBase) => {
-  return (
-    <nav
-      className={cn(
-        'sticky top-navbar hidden xl:flex flex-col shrink-0',
-        'w-toc',
-        'py-4 pl-6 pr-4',
-        className,
-      )}
-    >
-      {children}
-    </nav>
-  )
-}
-
-const OnThisPageHeader = ({ children, className, ...props }: ComponentBase) => {
-  return (
-    <div
-      className={cn('mb-4 text-xs font-bold text-body', className)}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-const OnThisPageContent = ({
-  children,
-  className,
-  ref,
-  ...props
-}: OnThisPageContentProps) => {
-  const internalRef = useRef<HTMLDivElement>(null)
-
-  useImperativeHandle(ref, () => internalRef.current!)
-
-  return (
-    <div
-      ref={internalRef}
-      className={cn(
-        'relative overflow-y-auto boltdocs-otp-content pb-12',
-        'max-h-[70%]',
-        className,
-      )}
-      style={{
-        maskImage: 'linear-gradient(to bottom, black 90%, transparent 100%)',
-        WebkitMaskImage:
-          'linear-gradient(to bottom, black 90%, transparent 100%)',
-      }}
-      {...props}
-    >
-      {children}
-    </div>
-  )
-}
-
-OnThisPageContent.displayName = 'OnThisPageContent'
-
-const OnThisPageList = ({ children, className }: ComponentBase) => {
-  return (
-    <ul
-      className={cn(
-        'relative space-y-0.5 text-sm border-l border-subtle',
-        className,
-      )}
-    >
-      {children}
-    </ul>
-  )
-}
-
-const OnThisPageItem = ({
-  level,
-  children,
-  className,
-}: OnThisPageItemProps) => {
-  return <li className={cn(level === 3 && 'pl-3', className)}>{children}</li>
-}
-
-const OnThisPageLink = ({
-  children,
-  href,
-  active,
-  onClick,
-  className,
-}: OnThisPageLinkProps) => {
-  const items = use(ItemsContext)
-  const containerRef = use(ScrollContext)
-  const id = href ? getItemId(href) : null
-  const anchorRef = useRef<HTMLAnchorElement>(null)
-
-  const computedActive =
-    active !== undefined
-      ? active
-      : id && items
-        ? !!items.find((i) => i.id === id)?.active
-        : false
-
-  useEffect(() => {
-    if (computedActive && anchorRef.current && containerRef?.current) {
-      scrollIntoView(anchorRef.current, {
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center',
-        scrollMode: 'if-needed',
-        boundary: containerRef.current,
-      })
-    }
-  }, [computedActive, containerRef])
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (onClick) {
-      onClick(e)
-    } else if (href && href.startsWith('#')) {
-      e.preventDefault()
-      const elementId = href.slice(1)
-      const el = document.getElementById(elementId)
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth' })
-        window.history.pushState(null, '', href)
-      }
-    }
-  }
-
-  return (
-    <a
-      ref={anchorRef}
-      href={href}
-      onClick={handleClick}
-      data-active={computedActive}
-      className={cn(
-        'block py-0.5 pl-4 text-[13px] outline-none transition-colors',
-        computedActive ? 'text-primary-500' : 'text-muted hover:text-body',
-        className,
-      )}
-    >
-      {children}
-    </a>
-  )
-}
-
-const OnThisPageIndicator = ({
-  style,
-  className,
-}: OnThisPageIndicatorProps) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [internalStyle, setInternalStyle] = useState<React.CSSProperties>({
-    opacity: 0,
-    ...style,
-  })
-
-  const items = useItems()
-
-  useEffect(() => {
-    const parent = containerRef.current?.parentElement
-    if (!parent) return
-
-    const activeLinks = parent.querySelectorAll('a[data-active="true"]')
-
-    if (activeLinks.length > 0) {
-      const firstActiveLink = activeLinks[0] as HTMLElement
-      const lastActiveLink = activeLinks[activeLinks.length - 1] as HTMLElement
-
-      const firstRect = firstActiveLink.getBoundingClientRect()
-      const lastRect = lastActiveLink.getBoundingClientRect()
-      const parentRect = parent.getBoundingClientRect()
-
-      const offsetTop = firstRect.top - parentRect.top
-      const height = lastRect.bottom - firstRect.top
-
-      setInternalStyle({
-        transform: `translateY(${offsetTop}px)`,
-        height: `${height}px`,
-        opacity: 1,
-        ...style,
-      })
-    } else {
-      setInternalStyle({
-        opacity: 0,
-        ...style,
-      })
-    }
-  }, [items, style])
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn(
-        'absolute -left-px w-0.5 rounded-full bg-primary-500',
-        className,
-      )}
-      style={{
-        transition:
-          'transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), height 180ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms',
-        ...internalStyle,
-      }}
-    />
-  )
-}
-
-/**
- * High-level automated list of toc items
- */
-export function OnThisPageItems({
-  headings = [],
-  className,
-}: {
-  headings: { level: number; text: string; id: string }[]
-} & ComponentBase) {
-  const activeIds = useActiveAnchors()
-
-  if (headings.length === 0) return null
-
-  return (
-    <OnThisPageList className={className}>
-      <OnThisPageIndicator />
-      {headings.map((h) => (
-        <OnThisPageItem key={h.id} level={h.level}>
-          <OnThisPageLink href={`#${h.id}`} active={activeIds.includes(h.id)}>
-            {h.text}
-          </OnThisPageLink>
-        </OnThisPageItem>
-      ))}
-    </OnThisPageList>
-  )
-}
-
-/**
- * High-level automated Table of Contents tree
- */
-export function OnThisPageTree({
-  headings = [],
-  className,
-}: {
-  headings: { level: number; text: string; id: string }[]
-} & ComponentBase) {
-  const toc = useMemo(
-    () =>
-      headings.map((h) => ({ title: h.text, url: `#${h.id}`, depth: h.level })),
-    [headings],
-  )
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-
-  if (headings.length === 0) return null
-
-  return (
-    <AnchorProvider toc={toc} single={false}>
-      <ScrollProvider containerRef={scrollContainerRef}>
-        <OnThisPageContent ref={scrollContainerRef}>
-          <OnThisPageItems headings={headings} className={className} />
-        </OnThisPageContent>
-      </ScrollProvider>
-    </AnchorProvider>
-  )
-}
-
-OnThisPage.Root = OnThisPage
-OnThisPage.Header = OnThisPageHeader
-OnThisPage.Content = OnThisPageContent
-OnThisPage.List = OnThisPageList
-OnThisPage.Item = OnThisPageItem
-OnThisPage.Link = OnThisPageLink
-OnThisPage.Indicator = OnThisPageIndicator
-OnThisPage.Items = OnThisPageItems
-OnThisPage.Tree = OnThisPageTree
-
-export default OnThisPage

package/src/client/components/primitives/page-nav.tsx

@@ -1,51 +0,0 @@
-import { Link } from './link'
-import { ChevronLeft, ChevronRight } from '../ui-base/icons'
-import { cn } from '../../utils/cn'
-import type { ComponentBase } from './types'
-
-export interface PageNavProps extends ComponentBase {
-  to: string
-  direction: 'prev' | 'next'
-}
-
-export const PageNav = ({ children, className }: ComponentBase) => {
-  return (
-    <nav className={cn('grid sm:grid-cols-2 gap-4', className)}>{children}</nav>
-  )
-}
-
-const PageNavLink = ({ children, to, direction, className }: PageNavProps) => {
-  const isNext = direction === 'next'
-  return (
-    <Link
-      href={to}
-      className={cn(
-        'flex items-center outline-none no-underline',
-        isNext ? 'justify-end' : 'justify-start',
-        className,
-      )}
-    >
-      {!isNext && <ChevronLeft className="shrink-0" />}
-      <div className="flex flex-col flex-1">{children}</div>
-      {isNext && <ChevronRight className="shrink-0" />}
-    </Link>
-  )
-}
-
-const PageNavTitle = ({ children, className }: ComponentBase) => {
-  return <span className={cn(className)}>{children}</span>
-}
-
-const PageNavDescription = ({ children, className }: ComponentBase) => {
-  return <span className={cn('truncate', className)}>{children}</span>
-}
-
-const PageNavIcon = ({ children }: ComponentBase) => {
-  return <>{children}</>
-}
-
-PageNav.Root = PageNav
-PageNav.Link = PageNavLink
-PageNav.Title = PageNavTitle
-PageNav.Description = PageNavDescription
-PageNav.Icon = PageNavIcon

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

@@ -1,28 +0,0 @@
-import {
-  Popover as RACPopover,
-  type PopoverProps as RACPopoverProps,
-} from 'react-aria-components'
-import { cn } from '../../utils/cn'
-
-export interface PopoverProps extends Omit<RACPopoverProps, 'children'> {
-  children: React.ReactNode
-  className?: string
-}
-
-/**
- * A reusable Popover primitive with premium glassmorphism styling and smooth animations.
- */
-export const Popover = ({ children, className, ...props }: PopoverProps) => {
-  return (
-    <RACPopover
-      offset={8}
-      className={cn(
-        'z-50 overflow-auto outline-none transition-none',
-        className,
-      )}
-      {...props}
-    >
-      {children as any}
-    </RACPopover>
-  )
-}

package/src/client/components/primitives/search-dialog.tsx

@@ -1,193 +0,0 @@
-'use client'
-
-import * as RAC from 'react-aria-components'
-import { Hash, FileText, CornerDownLeft } from '../ui-base/icons'
-import { cn } from '../../utils/cn'
-import type { ComponentBase } from './types'
-
-export interface SearchDialogItemProps
-  extends Omit<RAC.ListBoxItemProps, 'children'> {
-  className?: string
-  children: React.ReactNode
-}
-
-export interface SearchDialogItemIconProps {
-  isHeading?: boolean
-  className?: string
-}
-
-/**
- * Pure, unstyled SearchDialog Overlay (maps to RAC.ModalOverlay)
- */
-export const SearchDialog = ({
-  className,
-  ...props
-}: RAC.ModalOverlayProps) => {
-  return (
-    <RAC.ModalOverlay
-      className={cn('fixed inset-0 z-100', className)}
-      {...props}
-    />
-  )
-}
-
-/**
- * Pure, unstyled SearchDialog Content (maps to RAC.Modal)
- */
-const SearchDialogContent = ({
-  className,
-  ...props
-}: RAC.ModalOverlayProps) => <RAC.Modal className={cn(className)} {...props} />
-
-/**
- * Pure, unstyled SearchDialog Dialog (maps to RAC.Dialog)
- */
-const SearchDialogDialog = ({ className, ...props }: RAC.DialogProps) => (
-  <RAC.Dialog
-    className={cn('flex flex-col focus:outline-none', className)}
-    {...props}
-  />
-)
-
-/**
- * Pure, unstyled SearchDialog Input Field (maps to RAC.SearchField)
- */
-const SearchDialogField = ({ className, ...props }: RAC.SearchFieldProps) => (
-  <RAC.SearchField className={cn('flex items-center', className)} {...props} />
-)
-
-/**
- * Pure, unstyled SearchInput (maps to RAC.Input)
- */
-const SearchDialogSearchInput = ({ className, ...props }: RAC.InputProps) => (
-  <RAC.Input
-    className={cn('w-full bg-transparent outline-none border-none', className)}
-    {...props}
-  />
-)
-
-/**
- * Pure, unstyled Clear Button (maps to RAC.Button with slot="clear")
- */
-const SearchDialogClearButton = ({ className, ...props }: RAC.ButtonProps) => (
-  <RAC.Button slot="clear" className={cn(className)} {...props} />
-)
-
-/**
- * Pure, unstyled Autocomplete container (maps to RAC.Autocomplete)
- */
-const SearchDialogAutocomplete = <T extends object>({
-  children,
-  className,
-  onSelectionChange,
-  ...props
-}: RAC.AutocompleteProps<T> & {
-  className?: string
-  onSelectionChange?: (key: RAC.Key) => void
-}) => {
-  const Autocomplete = RAC.Autocomplete as any
-  return (
-    <div className={cn('flex-1 min-h-0', className)}>
-      <Autocomplete
-        {...props}
-        onSelectionChange={onSelectionChange}
-        className="flex flex-col min-h-0"
-      >
-        {children}
-      </Autocomplete>
-    </div>
-  )
-}
-
-/**
- * Pure, unstyled List Box (maps to RAC.ListBox)
- */
-const SearchDialogList = <T extends object>({
-  children,
-  className,
-  ...props
-}: RAC.ListBoxProps<T> & { className?: string }) => {
-  return (
-    <RAC.ListBox
-      {...props}
-      className={cn('flex-1 overflow-y-auto outline-none min-h-0', className)}
-    >
-      {children as any}
-    </RAC.ListBox>
-  )
-}
-
-/**
- * Pure, unstyled List Box Item (maps to RAC.ListBoxItem)
- */
-const SearchDialogItemRoot = ({
-  children,
-  className,
-  ...props
-}: SearchDialogItemProps) => {
-  return (
-    <RAC.ListBoxItem
-      {...props}
-      className={cn(
-        'group flex items-center outline-none cursor-pointer',
-        className,
-      )}
-    >
-      {(itemProps) => (
-        <>
-          {children}
-          {(itemProps.isFocused || itemProps.isSelected) && (
-            <div className="ml-auto opacity-50 flex items-center gap-1">
-              <span className="text-[10px]">Select</span>
-              <CornerDownLeft size={10} />
-            </div>
-          )}
-        </>
-      )}
-    </RAC.ListBoxItem>
-  )
-}
-
-const SearchDialogItemIcon = ({
-  isHeading,
-  className,
-}: SearchDialogItemIconProps) => {
-  return (
-    <div className={cn('shrink-0', className)}>
-      {isHeading ? <Hash size={18} /> : <FileText size={18} />}
-    </div>
-  )
-}
-
-const SearchDialogItemTitle = ({ children, className }: ComponentBase) => {
-  return (
-    <span className={cn('block truncate flex-1', className)}>{children}</span>
-  )
-}
-
-const SearchDialogItemBio = ({ children, className }: ComponentBase) => {
-  return (
-    <span className={cn('ml-2 truncate hidden sm:inline', className)}>
-      {children}
-    </span>
-  )
-}
-
-// Compound API wiring
-SearchDialog.Root = SearchDialog
-SearchDialog.Overlay = SearchDialog
-SearchDialog.Content = SearchDialogContent
-SearchDialog.Dialog = SearchDialogDialog
-SearchDialog.Autocomplete = SearchDialogAutocomplete
-SearchDialog.List = SearchDialogList
-
-SearchDialog.Input = Object.assign(SearchDialogField, {
-  SearchInput: SearchDialogSearchInput,
-  Button: SearchDialogClearButton,
-})
-
-SearchDialog.Item = Object.assign(SearchDialogItemRoot, {
-  Icon: SearchDialogItemIcon,
-  Title: SearchDialogItemTitle,
-  Bio: SearchDialogItemBio,
-})