boltdocs 1.10.2 → 1.11.0

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

@@ -0,0 +1,192 @@
+import {
+  Children,
+  isValidElement,
+  type ReactNode,
+  type ReactElement,
+  type ComponentPropsWithoutRef,
+} from 'react'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+import { cn } from '@client/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const listVariants = cva('my-6 transition-all duration-200', {
+  variants: {
+    variant: {
+      default: 'list-disc pl-5 text-text-muted marker:text-primary-500/50',
+      number:
+        'list-decimal pl-5 text-text-muted marker:text-primary-500/50 marker:font-bold',
+      checked: 'list-none p-0',
+      arrow: 'list-none p-0',
+      bubble: 'list-none p-0',
+    },
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 sm:grid-cols-2',
+      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+      4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+    },
+    isGrid: {
+      true: 'grid gap-x-8 gap-y-3',
+      false: 'space-y-2',
+    },
+    dense: {
+      true: 'space-y-1',
+      false: 'space-y-2',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'default',
+      dense: true,
+      className: 'space-y-0.5',
+    },
+  ],
+  defaultVariants: {
+    variant: 'default',
+    cols: 1,
+    isGrid: false,
+    dense: false,
+  },
+})
+
+const itemVariants = cva(
+  'group flex items-start gap-3 text-sm leading-relaxed transition-all duration-200',
+  {
+    variants: {
+      variant: {
+        default: '',
+        number: '',
+        checked: 'hover:translate-x-0.5',
+        arrow: 'hover:translate-x-0.5',
+        bubble: 'hover:translate-x-0.5',
+      },
+      dense: {
+        true: 'py-0',
+        false: 'py-0.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      dense: false,
+    },
+  },
+)
+
+const iconContainerVariants = cva(
+  'mt-1 shrink-0 flex items-center justify-center transition-transform group-hover:scale-110',
+  {
+    variants: {
+      variant: {
+        bubble:
+          'h-5 w-5 rounded-full bg-primary-500/10 text-primary-500 text-[10px] font-bold',
+        default: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type ListVariantProps = VariantProps<typeof listVariants>
+
+export interface ListProps
+  extends ComponentPropsWithoutRef<'ul'>,
+    Omit<ListVariantProps, 'variant'> {
+  variant?: 'checked' | 'arrow' | 'default' | 'bubble' | 'number'
+  children: ReactNode
+}
+
+interface ListItemProps extends VariantProps<typeof itemVariants> {
+  icon?: ReactNode
+  children: ReactNode
+}
+
+function ListItem({ icon, children, variant, dense }: ListItemProps) {
+  return (
+    <li className={cn(itemVariants({ variant, dense }))}>
+      {icon && (
+        <span
+          className={cn(
+            iconContainerVariants({
+              variant: variant === 'bubble' ? 'bubble' : 'default',
+            }),
+          )}
+        >
+          {icon}
+        </span>
+      )}
+      <div className="flex-1 text-text-muted group-hover:text-text-main transition-colors">
+        {children}
+      </div>
+    </li>
+  )
+}
+
+const ICON_MAP: Record<string, (cls?: string) => ReactNode> = {
+  checked: (cls) => (
+    <Check size={14} className={cn('text-emerald-500 shrink-0', cls)} />
+  ),
+  arrow: (cls) => (
+    <ChevronRight size={14} className={cn('text-primary-400 shrink-0', cls)} />
+  ),
+  bubble: (cls) => (
+    <Circle
+      size={6}
+      fill="currentColor"
+      className={cn('text-primary-500 shrink-0', cls)}
+    />
+  ),
+  default: () => null,
+  number: () => null,
+}
+
+export function List({
+  variant = 'default',
+  cols = 1,
+  dense = false,
+  children,
+  className,
+  ...props
+}: ListProps) {
+  const isGrid = cols !== undefined && Number(cols) > 1
+  const renderIcon = ICON_MAP[variant]
+  const containerClasses = listVariants({
+    variant,
+    cols,
+    dense,
+    isGrid,
+    className,
+  })
+
+  const Component = variant === 'number' ? 'ol' : 'ul'
+
+  // Handling raw MDX siblings (nested logic)
+  if (variant === 'default' || variant === 'number') {
+    return (
+      <Component className={containerClasses} {...props}>
+        {children}
+      </Component>
+    )
+  }
+
+  return (
+    <ul className={containerClasses} {...props}>
+      {Children.map(children, (child) => {
+        if (!isValidElement(child)) return child
+
+        const element = child as ReactElement<{ children?: ReactNode }>
+        const content =
+          element.type === 'li'
+            ? element.props.children
+            : element.props.children || child
+
+        return (
+          <ListItem icon={renderIcon()} variant={variant} dense={dense}>
+            {content}
+          </ListItem>
+        )
+      })}
+    </ul>
+  )
+}

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

@@ -0,0 +1,156 @@
+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 '@client/utils/cn'
+
+export interface TableProps {
+  headers?: string[]
+  data?: (string | React.ReactNode)[][]
+  children?: React.ReactNode
+  className?: string
+  sortable?: boolean
+  paginated?: boolean
+  pageSize?: number
+}
+
+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 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 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>
+      )}
+    </>
+  )
+
+  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>
+
+      {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>
+  )
+}

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>
+  )
+}