boltdocs 2.4.1 → 2.5.0

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

@@ -14,7 +14,7 @@ export interface TooltipProps extends Omit<RAC.TooltipProps, 'children'> {
 }
 
 // Fixed type for TooltipContentProps to match RAC's internal expectations
-export interface TooltipContentProps extends RAC.TooltipProps {}
+export interface TooltipContentProps extends RAC.TooltipProps { }
 
 /**
  * Modern, accessible Tooltip component built with React Aria Components.
@@ -77,7 +77,5 @@ export const Tooltip = ({
   )
 }
 
-export default {
-  Tooltip,
-  TooltipContent,
-}
+Tooltip.Root = Tooltip
+Tooltip.Content = TooltipContent

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

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

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

@@ -4,8 +4,6 @@ import {
   Button,
   ButtonGroup,
   Menu,
-  MenuItem,
-  MenuTrigger,
   cn,
 } from '@client/components/primitives'
 
@@ -69,7 +67,7 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
           {copied ? 'Copied!' : buttonText}
         </Button>
 
-        <MenuTrigger placement="bottom end">
+        <Menu.Trigger placement="bottom end">
           <Button
             variant="ghost"
             isIconOnly
@@ -79,8 +77,8 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
               'transition-all duration-300 hover:bg-primary-500/5 hover:text-primary-500',
             )}
           />
-          <Menu className="w-52">
-            <MenuItem onAction={handleCopy}>
+          <Menu.Root className="w-52">
+            <Menu.Item onAction={handleCopy}>
               <Copy
                 size={16}
                 className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
@@ -88,8 +86,8 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
               <span className="font-medium text-[0.8125rem]">
                 Copy Markdown
               </span>
-            </MenuItem>
-            <MenuItem onAction={handleOpenRaw}>
+            </Menu.Item>
+            <Menu.Item onAction={handleOpenRaw}>
               <ExternalLink
                 size={16}
                 className="size-4 mt-0.5 text-text-muted group-hover:text-primary-500"
@@ -97,9 +95,9 @@ export function CopyMarkdown({ content, mdxRaw, config }: CopyMarkdownProps) {
               <span className="font-medium text-[0.8125rem]">
                 View as Markdown
               </span>
-            </MenuItem>
-          </Menu>
-        </MenuTrigger>
+            </Menu.Item>
+          </Menu.Root>
+        </Menu.Trigger>
       </ButtonGroup>
     </div>
   )

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

@@ -9,7 +9,7 @@ import { GithubStars } from './github-stars'
 import { Tabs } from './tabs'
 import { useLocation } from 'react-router-dom'
 import type { BoltdocsSocialLink } from '@node/config'
-import Menu from '@components/primitives/menu'
+import { Menu } from '@components/primitives/menu'
 import { Button } from '@components/primitives/button'
 import { ChevronDown, Languages } from 'lucide-react'
 import { useLocalizedTo } from '@hooks/use-localized-to'
@@ -30,11 +30,11 @@ export function Navbar() {
   const hasTabs = themeConfig?.tabs && themeConfig.tabs.length > 0
 
   return (
-    <NavbarPrimitive.NavbarRoot className={hasTabs ? 'border-b-0' : ''}>
+    <NavbarPrimitive.Root className={hasTabs ? 'border-b-0' : ''}>
       <NavbarPrimitive.Content>
-        <NavbarPrimitive.NavbarLeft>
+        <NavbarPrimitive.Left>
           {logo && (
-            <NavbarPrimitive.NavbarLogo
+            <NavbarPrimitive.Logo
               src={logo}
               alt={logoProps?.alt || title}
               width={logoProps?.width ?? 24}
@@ -44,8 +44,8 @@ export function Navbar() {
           <NavbarPrimitive.Title>{title}</NavbarPrimitive.Title>
 
           {config.versions && currentVersion && <NavbarVersion />}
-        </NavbarPrimitive.NavbarLeft>
-        <NavbarPrimitive.NavbarCenter>
+        </NavbarPrimitive.Left>
+        <NavbarPrimitive.Center>
           <Suspense
             fallback={
               <div className="h-9 w-32 animate-pulse rounded-md bg-bg-surface" />
@@ -53,8 +53,8 @@ export function Navbar() {
           >
             <SearchDialog routes={routes || []} />
           </Suspense>
-        </NavbarPrimitive.NavbarCenter>
-        <NavbarPrimitive.NavbarRight>
+        </NavbarPrimitive.Center>
+        <NavbarPrimitive.Right>
           <NavbarPrimitive.Links>
             {links.map((link) => (
               <>
@@ -77,7 +77,7 @@ export function Navbar() {
               />
             ))}
           </div>
-        </NavbarPrimitive.NavbarRight>
+        </NavbarPrimitive.Right>
       </NavbarPrimitive.Content>
 
       {isDocs && hasTabs && themeConfig?.tabs && (
@@ -85,7 +85,7 @@ export function Navbar() {
           <Tabs tabs={themeConfig.tabs} routes={allRoutes || routes || []} />
         </div>
       )}
-    </NavbarPrimitive.NavbarRoot>
+    </NavbarPrimitive.Root>
   )
 }
 

package/src/client/components/ui-base/on-this-page.tsx

@@ -1,4 +1,5 @@
-import OTP, {
+import {
+  OnThisPage as OTP,
   AnchorProvider,
   ScrollProvider,
   useActiveAnchor,
@@ -81,35 +82,35 @@ function OnThisPageInner({
   )
 
   return (
-    <OTP.OnThisPageRoot>
-      <OTP.OnThisPageHeader className="flex flex-row gap-x-2">
+    <OTP.Root>
+      <OTP.Header className="flex flex-row gap-x-2">
         <TextAlignStart size={16} />
         On this page
-      </OTP.OnThisPageHeader>
+      </OTP.Header>
       <ScrollProvider containerRef={scrollContainerRef}>
-        <OTP.OnThisPageContent
+        <OTP.Content
           className="max-h-[450px] boltdocs-otp-scroll-area"
           ref={scrollContainerRef}
         >
-          <OTP.OnThisPageIndicator style={indicatorStyle} />
+          <OTP.Indicator style={indicatorStyle} />
           <ul
             className="relative space-y-2 border-l border-border-subtle"
             ref={listRef}
           >
             {headings.map((h) => (
-              <OTP.OnThisPageItem key={h.id} level={h.level}>
-                <OTP.OnThisPageLink
+              <OTP.Item key={h.id} level={h.level}>
+                <OTP.Link
                   href={`#${h.id}`}
                   active={activeId === h.id}
                   onClick={(e) => handleClick(e, h.id)}
                   className="pl-4"
                 >
                   {h.text}
-                </OTP.OnThisPageLink>
-              </OTP.OnThisPageItem>
+                </OTP.Link>
+              </OTP.Item>
             ))}
           </ul>
-        </OTP.OnThisPageContent>
+        </OTP.Content>
       </ScrollProvider>
 
       {(editLink || communityHelp) && (
@@ -147,6 +148,6 @@ function OnThisPageInner({
           </ul>
         </div>
       )}
-    </OTP.OnThisPageRoot>
+    </OTP.Root>
   )
 }

package/src/client/components/ui-base/page-nav.tsx

@@ -1,5 +1,5 @@
 import { usePageNav } from '@hooks/use-page-nav'
-import PageNavPrimitive from '@components/primitives/page-nav'
+import { PageNav as PageNavPrimitive } from '@components/primitives/page-nav'
 
 /**
  * Component to display the previous and next page navigation buttons.
@@ -11,30 +11,30 @@ export function PageNav() {
   if (!prevPage && !nextPage) return null
 
   return (
-    <PageNavPrimitive.PageNavRoot className="animate-in fade-in slide-in-from-bottom-4 duration-700">
+    <PageNavPrimitive.Root className="animate-in fade-in slide-in-from-bottom-4 duration-700">
       {prevPage ? (
-        <PageNavPrimitive.PageNavLink to={prevPage.path} direction="prev">
-          <PageNavPrimitive.PageNavLink.Title>
+        <PageNavPrimitive.Link to={prevPage.path} direction="prev">
+          <PageNavPrimitive.Title>
             Previous
-          </PageNavPrimitive.PageNavLink.Title>
-          <PageNavPrimitive.PageNavLink.Description>
+          </PageNavPrimitive.Title>
+          <PageNavPrimitive.Description>
             {prevPage.title}
-          </PageNavPrimitive.PageNavLink.Description>
-        </PageNavPrimitive.PageNavLink>
+          </PageNavPrimitive.Description>
+        </PageNavPrimitive.Link>
       ) : (
         <div />
       )}
 
       {nextPage && (
-        <PageNavPrimitive.PageNavLink to={nextPage.path} direction="next">
-          <PageNavPrimitive.PageNavLink.Title>
+        <PageNavPrimitive.Link to={nextPage.path} direction="next">
+          <PageNavPrimitive.Title>
             Next
-          </PageNavPrimitive.PageNavLink.Title>
-          <PageNavPrimitive.PageNavLink.Description>
+          </PageNavPrimitive.Title>
+          <PageNavPrimitive.Description>
             {nextPage.title}
-          </PageNavPrimitive.PageNavLink.Description>
-        </PageNavPrimitive.PageNavLink>
+          </PageNavPrimitive.Description>
+        </PageNavPrimitive.Link>
       )}
-    </PageNavPrimitive.PageNavRoot>
+    </PageNavPrimitive.Root>
   )
 }

package/src/client/components/ui-base/search-dialog.tsx

@@ -1,14 +1,7 @@
 import { useEffect, useCallback } from 'react'
 import { useSearch } from '@hooks/use-search'
 import {
-  SearchDialogAutocomplete,
-  SearchDialogInput,
-  SearchDialogItemBio,
-  SearchDialogItemIcon,
-  SearchDialogItemRoot,
-  SearchDialogItemTitle,
-  SearchDialogList,
-  SearchDialogRoot,
+  SearchDialog as SearchDialogPrimitive,
 } from '@components/primitives/search-dialog'
 import Navbar from '@components/primitives/navbar'
 import { useNavigate } from 'react-router-dom'
@@ -63,31 +56,31 @@ export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
     <>
       <Navbar.SearchTrigger onPress={() => setIsOpen(true)} />
 
-      <SearchDialogRoot isOpen={isOpen} onOpenChange={setIsOpen}>
-        <SearchDialogAutocomplete onSelectionChange={handleSelect}>
-          <SearchDialogInput
+      <SearchDialogPrimitive.Root isOpen={isOpen} onOpenChange={setIsOpen}>
+        <SearchDialogPrimitive.Autocomplete onSelectionChange={handleSelect}>
+          <SearchDialogPrimitive.Input
             value={query}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setQuery(e.target.value)
             }
           />
-          <SearchDialogList items={list as SearchResult[]}>
+          <SearchDialogPrimitive.List items={list as SearchResult[]}>
             {(item: SearchResult) => (
-              <SearchDialogItemRoot
+              <SearchDialogPrimitive.Item
                 key={item.id}
                 onPress={() => handleSelect(item.id)}
                 textValue={item.title}
               >
-                <SearchDialogItemIcon isHeading={item.isHeading} />
+                <SearchDialogPrimitive.Item.Icon isHeading={item.isHeading} />
                 <div className="flex flex-col justify-center gap-0.5">
-                  <SearchDialogItemTitle>{item.title}</SearchDialogItemTitle>
-                  <SearchDialogItemBio>{item.bio}</SearchDialogItemBio>
+                  <SearchDialogPrimitive.Item.Title>{item.title}</SearchDialogPrimitive.Item.Title>
+                  <SearchDialogPrimitive.Item.Bio>{item.bio}</SearchDialogPrimitive.Item.Bio>
                 </div>
-              </SearchDialogItemRoot>
+              </SearchDialogPrimitive.Item>
             )}
-          </SearchDialogList>
-        </SearchDialogAutocomplete>
-      </SearchDialogRoot>
+          </SearchDialogPrimitive.List>
+        </SearchDialogPrimitive.Autocomplete>
+      </SearchDialogPrimitive.Root>
     </>
   )
 }

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useSidebar } from '@hooks/use-sidebar'
-import SidebarPrimitive from '@components/primitives/sidebar'
+import { Sidebar as SidebarPrimitive } from '@components/primitives/sidebar'
 import { PoweredBy } from './powered-by'
 import * as LucideIcons from 'lucide-react'
 import type { ComponentRoute } from '@client/types'
@@ -41,7 +41,7 @@ function CollapsibleSidebarGroup({
   }, [hasActiveRoute])
 
   return (
-    <SidebarPrimitive.SidebarGroup
+    <SidebarPrimitive.Group
       title={group.title}
       isOpen={isOpen}
       onToggle={() => setIsOpen(!isOpen)}
@@ -51,7 +51,7 @@ function CollapsibleSidebarGroup({
           activePath ===
           (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
         return (
-          <SidebarPrimitive.SidebarLink
+          <SidebarPrimitive.Link
             key={route.path}
             label={route.title}
             href={route.path}
@@ -61,7 +61,7 @@ function CollapsibleSidebarGroup({
           />
         )
       })}
-    </SidebarPrimitive.SidebarGroup>
+    </SidebarPrimitive.Group>
   )
 }
 
@@ -76,15 +76,15 @@ export function Sidebar({
   const themeConfig = config.theme || {}
 
   return (
-    <SidebarPrimitive.SidebarRoot>
+    <SidebarPrimitive.Root>
       {ungrouped.length > 0 && (
-        <SidebarPrimitive.SidebarGroup className="mb-6">
+        <SidebarPrimitive.Group className="mb-6">
           {ungrouped.map((route) => {
             const isCurrent =
               activePath ===
               (route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
             return (
-              <SidebarPrimitive.SidebarLink
+              <SidebarPrimitive.Link
                 key={route.path}
                 label={route.title}
                 href={route.path}
@@ -94,7 +94,7 @@ export function Sidebar({
               />
             )
           })}
-        </SidebarPrimitive.SidebarGroup>
+        </SidebarPrimitive.Group>
       )}
 
       {groups.map((group) => (
@@ -111,6 +111,6 @@ export function Sidebar({
           <PoweredBy />
         </div>
       )}
-    </SidebarPrimitive.SidebarRoot>
+    </SidebarPrimitive.Root>
   )
 }

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

@@ -1,5 +1,5 @@
 import { useTabs as useTabsHook } from '@hooks/use-tabs'
-import T from '@components/primitives/tabs'
+import { Tabs as T } from '@components/primitives/tabs'
 import { Link } from '@components/primitives/link'
 import type { BoltdocsTab, ComponentRoute } from '@client/types'
 import * as Icons from 'lucide-react'
@@ -35,7 +35,7 @@ export function Tabs({
 
   return (
     <div className="mx-auto max-w-(--breakpoint-3xl) px-4 md:px-6">
-      <T.TabsList className="border-none py-0">
+      <T.List className="border-none py-0">
         {tabs.map((tab, index) => {
           const isActive = index === activeIndex
           const firstRoute = routes.find(
@@ -50,19 +50,18 @@ export function Tabs({
               ref={(el: HTMLAnchorElement | null) => {
                 tabRefs.current[index] = el
               }}
-              className={`relative flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors outline-none ${
-                isActive
+              className={`relative flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors outline-none ${isActive
                   ? 'text-primary-500'
                   : 'text-text-muted hover:text-text-main'
-              }`}
+                }`}
             >
               {renderTabIcon(tab.icon)}
               <span>{getTranslated(tab.text, currentLocale)}</span>
             </Link>
           )
         })}
-        <T.TabsIndicator style={indicatorStyle} />
-      </T.TabsList>
+        <T.Indicator style={indicatorStyle} />
+      </T.List>
     </div>
   )
 }

package/src/client/components/ui-base/theme-toggle.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { Sun, Moon, Monitor } from 'lucide-react'
 import { useTheme } from '@client/app/theme-context'
 import { Button } from 'react-aria-components'
-import { Menu, MenuItem, MenuTrigger } from '@components/primitives/menu'
+import { Menu } from '@components/primitives/menu'
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme()
@@ -19,14 +19,14 @@ export function ThemeToggle() {
   const Icon = theme === 'system' ? Monitor : theme === 'dark' ? Moon : Sun
 
   return (
-    <MenuTrigger placement="bottom right">
+    <Menu.Trigger placement="bottom right">
       <Button
         className="flex h-9 w-9 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-bg-surface hover:text-text-main outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
         aria-label="Selection theme"
       >
         <Icon size={20} className="animate-in fade-in zoom-in duration-300" />
       </Button>
-      <Menu
+      <Menu.Root
         selectionMode="single"
         selectedKeys={[theme]}
         onSelectionChange={(keys) => {
@@ -34,19 +34,19 @@ export function ThemeToggle() {
           setTheme(newTheme)
         }}
       >
-        <MenuItem id="light">
+        <Menu.Item id="light">
           <Sun size={16} />
           <span>Light</span>
-        </MenuItem>
-        <MenuItem id="dark">
+        </Menu.Item>
+        <Menu.Item id="dark">
           <Moon size={16} />
           <span>Dark</span>
-        </MenuItem>
-        <MenuItem id="system">
+        </Menu.Item>
+        <Menu.Item id="system">
           <Monitor size={16} />
           <span>System</span>
-        </MenuItem>
-      </Menu>
-    </MenuTrigger>
+        </Menu.Item>
+      </Menu.Root>
+    </Menu.Trigger>
   )
 }

package/src/client/hooks/index.ts

@@ -1,12 +1,12 @@
-export * from './use-navbar'
-export * from './use-sidebar'
-export * from './use-search'
-export * from './use-onthispage'
-export * from './use-tabs'
-export * from './use-version'
-export * from './use-i18n'
-export * from './use-page-nav'
-export * from './use-breadcrumbs'
-export * from './use-routes'
-export * from './use-localized-to'
-export * from './use-location'
+export { useNavbar } from './use-navbar'
+export { useSidebar } from './use-sidebar'
+export { useSearch } from './use-search'
+export { useOnThisPage } from './use-onthispage'
+export { useTabs } from './use-tabs'
+export { useVersion } from './use-version'
+export { useI18n } from './use-i18n'
+export { usePageNav } from './use-page-nav'
+export { useBreadcrumbs } from './use-breadcrumbs'
+export { useRoutes } from './use-routes'
+export { useLocalizedTo } from './use-localized-to'
+export { useLocation } from './use-location'

package/src/client/index.ts

@@ -10,6 +10,8 @@ export { useTheme } from '@client/app/theme-context'
 export { useRoutes } from '@client/hooks/use-routes'
 export { useMdxComponents } from '@client/app/mdx-components-context'
 
+// Hooks
+export * from '@hooks/index'
 // Composable layout building blocks
 export { DocsLayout } from '@components/docs-layout'
 export { DefaultLayout } from '@components/default-layout'
@@ -28,18 +30,8 @@ export { NotFound } from '@components/ui-base/not-found'
 export { Loading } from '@components/ui-base/loading'
 export { CodeBlock } from '@components/mdx/code-block'
 export { Video } from '@components/mdx/video'
-export {
-  defineSandbox,
-  openSandbox,
-  embedSandbox,
-} from '@integrations/codesandbox'
 
-export type {
-  SandboxOptions,
-  SandboxFile,
-  SandboxFiles,
-  SandboxEmbedOptions,
-} from './types'
+// MDX Components
 export {
   Button,
   Badge,
@@ -64,6 +56,7 @@ export {
   Link,
   Image,
 } from './components/mdx'
+
 export type {
   ButtonProps,
   BadgeProps,
@@ -81,3 +74,33 @@ export type {
   LinkProps,
   ImageProps,
 } from './components/mdx'
+
+// Primitives
+export { Navbar as PrimitiveNavbar } from './components/primitives/navbar'
+export { NavigationMenu as PrimitiveNavigationMenu } from './components/primitives/navigation-menu'
+export { SearchDialog as SearchDialogPrimitive } from './components/primitives/search-dialog'
+export {
+  OnThisPage as PrimitiveOnThisPage,
+  AnchorProvider,
+  ScrollProvider,
+  useActiveAnchor,
+  useActiveAnchors,
+  useItems,
+} from './components/primitives/on-this-page'
+export { PageNav as PrimitivePageNav } from './components/primitives/page-nav'
+export { Tabs as PrimitiveTabs } from './components/primitives/tabs'
+export { Sidebar as PrimitiveSidebar } from './components/primitives/sidebar'
+export { Breadcrumbs as PrimitiveBreadcrumbs } from './components/primitives/breadcrumbs'
+export { Button as PrimitiveButton } from './components/primitives/button'
+export { ButtonGroup } from './components/primitives/button-group'
+export { Menu as PrimitiveMenu } from './components/primitives/menu'
+export { Popover as PrimitivePopover } from './components/primitives/popover'
+export { Tooltip as PrimitiveTooltip } from './components/primitives/tooltip'
+export {
+  Link as PrimitiveLink,
+  NavLink as PrimitiveNavLink,
+} from './components/primitives/link'
+export { Skeleton as PrimitiveSkeleton } from './components/primitives/skeleton'
+
+// Utilities
+export { cn } from './utils/cn'