boltdocs 1.10.2 → 1.11.0

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

@@ -0,0 +1,183 @@
+import * as RAC from 'react-aria-components'
+import { Search, Hash, FileText, CornerDownLeft } from 'lucide-react'
+import { cn } from '@client/utils/cn'
+import type { ComponentBase } from './types'
+
+export interface SearchDialogProps extends ComponentBase {
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+export interface SearchDialogItemProps
+  extends Omit<RAC.ListBoxItemProps, 'children'> {
+  className?: string
+  children: React.ReactNode
+}
+
+export interface SearchDialogItemIconProps {
+  isHeading?: boolean
+  className?: string
+}
+
+export const SearchDialogRoot = ({
+  children,
+  isOpen,
+  onOpenChange,
+  className,
+}: SearchDialogProps) => {
+  return (
+    <RAC.ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable
+      className={cn(
+        'fixed inset-0 z-100 bg-black/40 backdrop-blur-sm px-4 py-4 sm:py-20',
+        'entering:animate-in entering:fade-in exiting:animate-out exiting:fade-out',
+      )}
+    >
+      <RAC.Modal
+        className={cn(
+          'mx-auto w-full max-w-2xl overflow-hidden rounded-xl border border-border-subtle bg-bg-surface shadow-2xl ring-1 ring-black/5 outline-none',
+          'entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95',
+          className,
+        )}
+      >
+        <RAC.Dialog className="flex flex-col max-h-[70vh] focus:outline-none">
+          {children as any}
+        </RAC.Dialog>
+      </RAC.Modal>
+    </RAC.ModalOverlay>
+  )
+}
+
+export const SearchDialogAutocomplete = ({
+  children,
+  className,
+  ...props
+}: RAC.AutocompleteProps<object> & { className?: string }) => {
+  return (
+    <div className={className}>
+      <RAC.Autocomplete {...props} className="flex flex-col min-h-0">
+        {children}
+      </RAC.Autocomplete>
+    </div>
+  )
+}
+
+export const SearchDialogInput = ({
+  className,
+  ...props
+}: RAC.InputProps & { className?: string }) => {
+  return (
+    <RAC.SearchField
+      className="flex items-center gap-3 border-b border-border-subtle px-4 py-4"
+      autoFocus
+    >
+      <Search className="h-5 w-5 text-text-muted" />
+      <RAC.Input
+        {...props}
+        className={cn(
+          'w-full bg-transparent text-lg text-text-main placeholder-text-muted outline-none',
+          className,
+        )}
+        placeholder="Search documentation..."
+      />
+      <div className="flex items-center gap-1.5 rounded-md border border-border-subtle bg-bg-main px-1.5 py-1 text-[10px] font-medium text-text-muted">
+        <kbd className="font-sans">ESC</kbd>
+      </div>
+    </RAC.SearchField>
+  )
+}
+
+export const SearchDialogList = ({
+  children,
+  className,
+  ...props
+}: RAC.ListBoxProps<object> & { className?: string }) => {
+  return (
+    <RAC.ListBox
+      {...props}
+      className={cn('flex-1 overflow-y-auto p-2 outline-none', className)}
+    >
+      {children as any}
+    </RAC.ListBox>
+  )
+}
+
+export const SearchDialogItemRoot = ({
+  children,
+  className,
+  ...props
+}: SearchDialogItemProps) => {
+  return (
+    <RAC.ListBoxItem
+      {...props}
+      className={cn(
+        'group flex items-center gap-3 rounded-lg p-3 text-left outline-none cursor-pointer transition-colors',
+        'text-text-muted hover:bg-bg-main hover:text-text-main focus:bg-primary-500 focus:text-white selected:bg-primary-500 selected:text-white',
+        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>
+  )
+}
+
+export const SearchDialogItemIcon = ({
+  isHeading,
+  className,
+}: SearchDialogItemIconProps) => {
+  return (
+    <div className={cn('shrink-0', className)}>
+      {isHeading ? <Hash size={18} /> : <FileText size={18} />}
+    </div>
+  )
+}
+
+export const SearchDialogItemTitle = ({
+  children,
+  className,
+}: ComponentBase) => {
+  return (
+    <span
+      className={cn('block font-medium truncate flex-1 text-sm', className)}
+    >
+      {children}
+    </span>
+  )
+}
+
+export const SearchDialogItemBio = ({ children, className }: ComponentBase) => {
+  return (
+    <span
+      className={cn(
+        'ml-2 text-xs opacity-70 truncate hidden sm:inline group-focus:opacity-100',
+        className,
+      )}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default {
+  Root: SearchDialogRoot,
+  Autocomplete: SearchDialogAutocomplete,
+  Input: SearchDialogInput,
+  List: SearchDialogList,
+  Item: Object.assign(SearchDialogItemRoot, {
+    Icon: SearchDialogItemIcon,
+    Title: SearchDialogItemTitle,
+    Bio: SearchDialogItemBio,
+  }),
+}

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

@@ -0,0 +1,154 @@
+import { Link } from './link'
+import * as RAC from 'react-aria-components'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '@client/utils/cn'
+import type { ComponentBase } from './types'
+import type { ComponentRoute } from '@client/types'
+
+export interface SidebarGroupProps extends ComponentBase {
+  title?: string
+  icon?: React.ElementType
+  isOpen?: boolean
+  onToggle?: () => void
+}
+
+export interface SidebarLinkProps extends ComponentBase {
+  label: string
+  href: string
+  active?: boolean
+  icon?: React.ElementType
+  badge?: ComponentRoute['badge']
+}
+
+const Badge = ({ badge }: { badge: ComponentRoute['badge'] }) => {
+  const colors = {
+    new: 'bg-primary-500/20 text-primary-500',
+    updated: 'bg-gray-500/20 text-gray-500',
+    deprecated: 'bg-red-500/20 text-red-500',
+  }
+
+  // Expire Badge
+  if (typeof badge === 'object' && badge?.expires) {
+    const expireDate = new Date(badge.expires)
+    const today = new Date()
+    const diffTime = expireDate.getTime() - today.getTime()
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+    if (diffDays === 0) {
+      return null
+    }
+  }
+
+  const text = typeof badge === 'string' ? badge : badge?.text
+
+  return (
+    <span
+      className={cn(
+        'ml-auto flex h-4.5 items-center rounded-full text-[9px] font-medium px-1.5 py-0.5 text-center whitespace-nowrap',
+        colors[text as keyof typeof colors] || colors.new,
+      )}
+    >
+      {text}
+    </span>
+  )
+}
+
+export const SidebarRoot = ({ children, className }: ComponentBase) => {
+  return (
+    <aside
+      className={cn(
+        'boltdocs-sidebar sticky top-navbar hidden lg:flex flex-col shrink-0',
+        'w-sidebar h-full',
+        'overflow-y-auto border-r border-border-subtle bg-bg-main',
+        'py-6 px-4',
+        className,
+      )}
+    >
+      <nav className="flex-1 space-y-6">{children}</nav>
+    </aside>
+  )
+}
+
+export const SidebarGroup = ({
+  children,
+  title,
+  icon: Icon,
+  isOpen = true,
+  onToggle,
+  className,
+}: SidebarGroupProps) => {
+  return (
+    <div className={cn('space-y-1', className)}>
+      {title && (
+        <RAC.Button
+          onPress={onToggle}
+          className={cn(
+            'flex w-full items-center justify-between px-2 py-1.5 text-xs font-bold uppercase tracking-wider outline-none cursor-pointer',
+            'text-text-muted hover:text-text-main transition-colors',
+            'focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-md',
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {Icon && <Icon size={14} />}
+            {title}
+          </div>
+          <ChevronRight
+            size={14}
+            className={cn(
+              'transition-transform duration-200',
+              isOpen && 'rotate-90',
+            )}
+          />
+        </RAC.Button>
+      )}
+      {isOpen && <div className="space-y-0.5">{children}</div>}
+    </div>
+  )
+}
+
+export const SidebarGroupItem = ({ children, className }: ComponentBase) => {
+  return <div className={cn(className)}>{children}</div>
+}
+
+export const SidebarLink = ({
+  label,
+  href,
+  active,
+  icon: Icon,
+  badge,
+  className,
+}: SidebarLinkProps) => {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none transition-colors',
+        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+        active
+          ? 'bg-primary-500/10 text-primary-500 font-medium'
+          : 'text-text-muted hover:bg-bg-surface hover:text-text-main',
+        className,
+      )}
+    >
+      {Icon && (
+        <Icon
+          size={16}
+          className={cn(
+            active
+              ? 'text-primary-500'
+              : 'text-text-muted group-hover:text-text-main',
+          )}
+        />
+      )}
+      <span className="truncate">{label}</span>
+      {badge && <Badge badge={badge} />}
+    </Link>
+  )
+}
+
+export default {
+  SidebarRoot,
+  SidebarGroup,
+  SidebarGroupItem,
+  SidebarLink,
+}

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

@@ -0,0 +1,90 @@
+import { cn } from '@client/utils/cn'
+import type { ComponentBase } from './types'
+
+export interface TabsItemProps extends ComponentBase {
+  id: string
+  selected?: boolean
+  onClick?: () => void
+  onKeyDown?: (event: React.KeyboardEvent) => void
+  disabled?: boolean
+}
+
+export interface TabsIndicatorProps extends ComponentBase {
+  style?: React.CSSProperties
+}
+
+export const TabsRoot = ({
+  children,
+  className = '',
+  ...props
+}: ComponentBase) => {
+  return (
+    <div className={cn('w-full', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export const TabsList = ({ children, className = '' }: ComponentBase) => {
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        'relative flex flex-row items-center border-b border-border-subtle',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const TabsItem = ({
+  children,
+  id,
+  selected,
+  className = '',
+  ...props
+}: TabsItemProps) => {
+  return (
+    <button
+      role="tab"
+      aria-selected={selected}
+      className={cn(
+        'flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors outline-none cursor-pointer bg-transparent border-none',
+        selected ? 'text-primary-500' : 'text-text-muted hover:text-text-main',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+export const TabsContent = ({ children, className = '' }: ComponentBase) => {
+  return <div className={cn('p-4 outline-none', className)}>{children}</div>
+}
+
+export const TabsIndicator = ({
+  className = '',
+  style,
+}: TabsIndicatorProps) => {
+  return (
+    <div
+      className={cn(
+        'absolute bottom-0 h-0.5 bg-primary-500 transition-all duration-300',
+        className,
+      )}
+      style={style}
+    />
+  )
+}
+
+export default {
+  TabsRoot,
+  TabsList,
+  TabsItem,
+  TabsContent,
+  TabsIndicator,
+}

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

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react'
+import * as RAC from 'react-aria-components'
+import { cn } from '@client/utils/cn'
+
+export interface TooltipProps extends Omit<RAC.TooltipProps, 'children'> {
+  /** The content to show inside the tooltip */
+  content: ReactNode
+  /** The trigger element (usually a button or link) */
+  children: React.ReactElement
+  /** Delay in milliseconds before showing the tooltip */
+  delay?: number
+  /** Delay in milliseconds before hiding the tooltip */
+  closeDelay?: number
+}
+
+// Fixed type for TooltipContentProps to match RAC's internal expectations
+export interface TooltipContentProps extends RAC.TooltipProps {}
+
+/**
+ * Modern, accessible Tooltip component built with React Aria Components.
+ * Featuring glassmorphism, animations, and smart positioning.
+ */
+const TooltipContent = ({
+  className,
+  children,
+  ...props
+}: TooltipContentProps) => {
+  return (
+    <RAC.Tooltip
+      {...props}
+      offset={8}
+      className={(values) =>
+        cn(
+          'group z-50 overflow-visible rounded-md bg-bg-surface/90 px-2.5 py-1.5 text-xs font-medium text-text-main shadow-lg backdrop-blur-md ring-1 ring-border-subtle outline-hidden select-none',
+          'data-entering:animate-in data-entering:fade-in data-entering:zoom-in-95 data-entering:duration-100',
+          'data-exiting:animate-out data-exiting:fade-out data-exiting:zoom-out-95 data-exiting:duration-75',
+          'data-[placement=top]:slide-in-from-bottom-1',
+          'data-[placement=bottom]:slide-in-from-top-1',
+          'data-[placement=left]:slide-in-from-right-1',
+          'data-[placement=right]:slide-in-from-left-1',
+          typeof className === 'function' ? className(values) : className,
+        )
+      }
+    >
+      {(values) => (
+        <>
+          <RAC.OverlayArrow>
+            <svg
+              width={8}
+              height={8}
+              viewBox="0 0 8 8"
+              className="fill-bg-surface/90 stroke-border-subtle group-data-[placement=bottom]:rotate-180 group-data-[placement=left]:-rotate-90 group-data-[placement=right]:rotate-90"
+            >
+              <title>Arrow</title>
+              <path d="M0 0 L4 4 L8 0" />
+            </svg>
+          </RAC.OverlayArrow>
+          {typeof children === 'function' ? children(values) : children}
+        </>
+      )}
+    </RAC.Tooltip>
+  )
+}
+
+export const Tooltip = ({
+  content,
+  children,
+  delay = 500,
+  closeDelay = 0,
+  ...props
+}: TooltipProps) => {
+  return (
+    <RAC.TooltipTrigger delay={delay} closeDelay={closeDelay}>
+      {children}
+      <TooltipContent {...props}>{content}</TooltipContent>
+    </RAC.TooltipTrigger>
+  )
+}
+
+export default {
+  Tooltip,
+  TooltipContent,
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+
+export type ComponentBase = {
+  className?: string
+  children?: ReactNode
+}
+
+/**
+ * Helper to type compound components (e.g. Navbar with Navbar.Link)
+ */
+export type CompoundComponent<P, S> = React.FC<P> & S

package/src/client/components/ui-base/breadcrumbs.tsx

@@ -0,0 +1,42 @@
+import { useBreadcrumbs } from '@hooks/use-breadcrumbs'
+import { Home } from 'lucide-react'
+import {
+  BreadcrumbsItem,
+  BreadcrumbsLink,
+  BreadcrumbsRoot,
+  BreadcrumbsSeparator,
+} from '@components/primitives/breadcrumbs'
+import { cn } from '@client/utils/cn'
+import { useConfig } from '@client/app/config-context'
+
+export function Breadcrumbs() {
+  const { crumbs, activeRoute } = useBreadcrumbs()
+  const config = useConfig()
+
+  if (crumbs.length === 0) return null
+
+  if (!config.themeConfig?.breadcrumbs) return null
+
+  return (
+    <BreadcrumbsRoot>
+      <BreadcrumbsItem>
+        <BreadcrumbsLink href="/">
+          <Home size={14} />
+        </BreadcrumbsLink>
+      </BreadcrumbsItem>
+      {crumbs.map((crumb, i) => (
+        <BreadcrumbsItem key={`crumb-${crumb.href}-${crumb.label}-${i}`}>
+          <BreadcrumbsSeparator />
+          <BreadcrumbsLink
+            href={crumb.href}
+            className={cn({
+              'font-medium text-text-main': crumb.href === activeRoute?.path,
+            })}
+          >
+            {crumb.label}
+          </BreadcrumbsLink>
+        </BreadcrumbsItem>
+      ))}
+    </BreadcrumbsRoot>
+  )
+}

package/src/client/components/ui-base/copy-markdown.tsx

@@ -0,0 +1,112 @@
+import { useState } from 'react'
+import { Copy, Check, ExternalLink, ChevronDown } from 'lucide-react'
+import {
+  Button,
+  ButtonGroup,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  cn,
+} from '@client/components/primitives'
+
+import type { ComponentRoute } from '@client/types'
+
+export interface CopyMarkdownProps {
+  content?: string
+  mdxRaw?: string
+  route?: ComponentRoute
+  config?: boolean | { text?: string; icon?: string }
+}
+
+const useCopyMarkdown = (content: string) => {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(content)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleOpenRaw = () => {
+    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    window.open(url, '_blank')
+  }
+
+  return {
+    copied,
+    handleCopy,
+    handleOpenRaw,
+  }
+}
+
+export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
+  const displayContent = mdxRaw || content || ''
+  const { copied, handleCopy, handleOpenRaw } = useCopyMarkdown(displayContent)
+
+  const isEnabled = config !== false
+  const buttonText =
+    typeof config === 'object'
+      ? config.text || 'Copy Markdown'
+      : 'Copy Markdown'
+
+  if (!isEnabled || !displayContent) return null
+
+  return (
+    <div className="relative inline-flex z-100 flex-shrink-0 w-max translate-y-0 active:translate-y-px transition-transform duration-200">
+      <ButtonGroup className="rounded-xl border border-border-subtle bg-bg-surface/40 backdrop-blur-md transition-all duration-300 hover:border-primary-500/50 hover:shadow-lg hover:shadow-primary-500/5 group overflow-hidden">
+        <Button
+          variant="ghost"
+          onPress={handleCopy}
+          icon={copied ? <Check size={16} /> : <Copy size={16} />}
+          iconPosition="left"
+          className={cn(
+            'px-5 py-2 bg-transparent text-[0.8125rem] font-semibold h-9 border-none shrink-0',
+            'text-text-main transition-all duration-300 hover:bg-primary-500/5',
+            copied && 'text-emerald-500 hover:bg-emerald-500/5',
+          )}
+        >
+          {copied ? 'Copied!' : buttonText}
+        </Button>
+
+        <MenuTrigger placement="bottom end">
+          <Button
+            variant="ghost"
+            isIconOnly
+            icon={<ChevronDown size={14} />}
+            className={cn(
+              'px-3.5 h-9 border-l border-border-subtle/50 text-text-muted rounded-none bg-transparent shrink-0',
+              'transition-all duration-300 hover:bg-primary-500/5 hover:text-primary-500',
+            )}
+          />
+          <Menu className="w-52">
+            <MenuItem
+              onAction={handleCopy}
+              className="flex flex-row items-start gap-2.5 group"
+            >
+              <Copy
+                size={16}
+                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+              />
+              <span className="font-medium text-[0.8125rem]">
+                Copy Markdown
+              </span>
+            </MenuItem>
+            <MenuItem
+              onAction={handleOpenRaw}
+              className="flex flex-row items-start gap-2.5 group"
+            >
+              <ExternalLink
+                size={16}
+                className="w-4 h-4 shrink-0 mt-0.5 transition-transform duration-200 group-hover:-translate-y-0.5 text-text-muted group-hover:text-primary-500"
+              />
+              <span className="font-medium text-[0.8125rem]">
+                View as Markdown
+              </span>
+            </MenuItem>
+          </Menu>
+        </MenuTrigger>
+      </ButtonGroup>
+    </div>
+  )
+}