boltdocs 2.5.5 → 2.6.0

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

@@ -1,12 +1,11 @@
-import React from 'react'
 import {
   Link as RACLink,
   type LinkProps as RACLinkProps,
 } from 'react-aria-components'
 import { useLocation } from 'react-router-dom'
-import { useLocalizedTo } from '@hooks/use-localized-to'
-import { usePreload } from '@client/app/preload'
-import { cn } from '@client/utils/cn'
+import { useLocalizedTo } from '../../hooks/use-localized-to'
+import { cn } from '../../utils/cn'
+import { forwardRef } from 'react'
 
 export interface LinkProps extends RACLinkProps {
   /** Should prefetch the page on hover? Default 'hover' */
@@ -20,46 +19,29 @@ export interface LinkProps extends RACLinkProps {
  * It uses the global navigation configuration from BoltdocsRouterProvider
  * to handle seamless client-side transitions.
  */
-export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
-  (props, ref) => {
-    const { href, prefetch = 'hover', onMouseEnter, onFocus, ...rest } = props
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const { href, prefetch = 'hover', onMouseEnter, onFocus, ...rest } = props
 
-    const localizedHref = useLocalizedTo(href ?? '')
-    const { preload } = usePreload()
+  const localizedHref = useLocalizedTo(href ?? '')
 
-    const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
-      onMouseEnter?.(e)
-      if (
-        prefetch === 'hover' &&
-        typeof localizedHref === 'string' &&
-        localizedHref.startsWith('/')
-      ) {
-        preload(localizedHref)
-      }
-    }
+  const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    onMouseEnter?.(e)
+  }
 
-    const handleFocus = (e: React.FocusEvent) => {
-      onFocus?.(e as any)
-      if (
-        prefetch === 'hover' &&
-        typeof localizedHref === 'string' &&
-        localizedHref.startsWith('/')
-      ) {
-        preload(localizedHref)
-      }
-    }
+  const handleFocus = (e: React.FocusEvent) => {
+    onFocus?.(e as any)
+  }
 
-    return (
-      <RACLink
-        {...rest}
-        ref={ref}
-        href={localizedHref as string}
-        onMouseEnter={handleMouseEnter}
-        onFocus={handleFocus as any}
-      />
-    )
-  },
-)
+  return (
+    <RACLink
+      {...rest}
+      ref={ref}
+      href={localizedHref as string}
+      onMouseEnter={handleMouseEnter}
+      onFocus={handleFocus as any}
+    />
+  )
+})
 Link.displayName = 'Link'
 
 /**
@@ -90,7 +72,7 @@ export interface NavLinkProps
  * It combines the Link primitive with path matching logic to determine
  * if the link is currently active based on the browser's location.
  */
-export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+export const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
   (props, ref) => {
     const { href, end = false, className, children, ...rest } = props
     const location = useLocation()

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

@@ -1,11 +1,10 @@
 'use client'
 
 import { Check, ChevronRight, Dot } from 'lucide-react'
-import React from 'react'
 import * as RAC from 'react-aria-components'
+import { Children } from 'react'
 import { Popover, type PopoverProps } from './popover'
-import { cn } from '@client/utils/cn'
-
+import { cn } from '../../utils/cn'
 /**
  * MenuTrigger wraps a trigger (usually a Button) and a Menu.
  */
@@ -15,7 +14,7 @@ export interface MenuTriggerProps extends RAC.MenuTriggerProps {
 
 function MenuTrigger(props: MenuTriggerProps) {
   const [trigger, menu] = (
-    React.Children.toArray(props.children) as React.ReactElement[]
+    Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
   return (
     <RAC.MenuTrigger {...props}>
@@ -32,7 +31,7 @@ function MenuTrigger(props: MenuTriggerProps) {
  */
 function SubmenuTrigger(props: RAC.SubmenuTriggerProps) {
   const [trigger, menu] = (
-    React.Children.toArray(props.children) as React.ReactElement[]
+    Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
   return (
     <RAC.SubmenuTrigger {...props}>
@@ -159,4 +158,4 @@ Menu.Item = MenuItem
 Menu.Trigger = MenuTrigger
 Menu.SubTrigger = SubmenuTrigger
 Menu.Section = MenuSection
-Menu.Separator = MenuSeparator
+Menu.Separator = MenuSeparator

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

@@ -2,9 +2,9 @@ import { type ReactNode, useState, useEffect } from 'react'
 import { Separator, ToggleButton, Link, cn } from './index'
 import { Button as ButtonRAC } from 'react-aria-components'
 import { Search, Sun, Moon, ExternalLink } from 'lucide-react'
-import * as IconsSocials from '@components/icons-dev'
+import * as IconsSocials from '../icons-dev'
 import type { ComponentBase } from './types'
-import type { BoltdocsSocialLink } from '@node/config'
+import type { BoltdocsSocialLink } from '../../../shared/types'
 
 export interface NavbarLinkProps extends Omit<ComponentBase, 'children'> {
   label: ReactNode
@@ -35,11 +35,7 @@ export interface NavbarSocialsProps extends ComponentBase {
   link: string
 }
 
-export const Navbar = ({
-  children,
-  className,
-  ...props
-}: ComponentBase) => {
+export const Navbar = ({ children, className, ...props }: ComponentBase) => {
   return (
     <header
       className={cn(
@@ -226,11 +222,7 @@ const NavbarSearchTrigger = ({
   )
 }
 
-const NavbarTheme = ({
-  className,
-  theme,
-  onThemeChange,
-}: NavbarThemeProps) => {
+const NavbarTheme = ({ className, theme, onThemeChange }: NavbarThemeProps) => {
   return (
     <ToggleButton
       isSelected={theme === 'dark'}
@@ -255,11 +247,7 @@ const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
   if (name === 'bluesky') return <IconsSocials.Bluesky />
 }
 
-const NavbarSocials = ({
-  icon,
-  link,
-  className,
-}: NavbarSocialsProps) => {
+const NavbarSocials = ({ icon, link, className }: NavbarSocialsProps) => {
   return (
     <Link
       href={link}
@@ -300,4 +288,4 @@ Navbar.Socials = NavbarSocials
 Navbar.Split = NavbarSplit
 Navbar.Content = NavbarContent
 
-export default Navbar
+export default Navbar

package/src/client/components/primitives/navigation-menu.tsx

@@ -1,6 +1,6 @@
 import * as RAC from 'react-aria-components'
 import { ChevronDown } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase, CompoundComponent } from './types'
 
 export interface NavigationMenuItemProps extends ComponentBase {
@@ -13,8 +13,8 @@ export interface NavigationMenuLinkProps
   label: string
   description?: string
   children?:
-  | React.ReactNode
-  | ((opts: RAC.MenuItemRenderProps) => React.ReactNode)
+    | React.ReactNode
+    | ((opts: RAC.MenuItemRenderProps) => React.ReactNode)
 }
 
 export type NavigationMenuComponent = CompoundComponent<
@@ -111,4 +111,4 @@ const NavigationMenuLink = ({
 NavigationMenu.Root = NavigationMenu
 NavigationMenu.List = NavigationMenuList
 NavigationMenu.Item = NavigationMenuItem
-NavigationMenu.Link = NavigationMenuLink
+NavigationMenu.Link = NavigationMenuLink

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

@@ -1,4 +1,4 @@
-import React, {
+import {
   createContext,
   use,
   useEffect,
@@ -10,8 +10,8 @@ import React, {
   type RefObject,
 } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
-import { cn } from '@client/utils/cn'
-import { useOnChange } from '@client/utils/use-on-change'
+import { cn } from '../../utils/cn'
+import { useOnChange } from '../../utils/use-on-change'
 import type { ComponentBase } from './types'
 import { getItemId, Observer } from './helpers/observer'
 
@@ -165,15 +165,11 @@ export const OnThisPage = ({ children, className }: ComponentBase) => {
   )
 }
 
-const OnThisPageHeader = ({
-  children,
-  className,
-  ...props
-}: ComponentBase) => {
+const OnThisPageHeader = ({ children, className, ...props }: ComponentBase) => {
   return (
     <div
       className={cn(
-        'mb-4 text-xs font-bold uppercase tracking-wider text-text-main',
+        'mb-4 text-xs font-bold text-text-main',
         className,
       )}
       {...props}
@@ -302,4 +298,4 @@ OnThisPage.Content = OnThisPageContent
 OnThisPage.List = OnThisPageList
 OnThisPage.Item = OnThisPageItem
 OnThisPage.Link = OnThisPageLink
-OnThisPage.Indicator = OnThisPageIndicator
+OnThisPage.Indicator = OnThisPageIndicator

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

@@ -1,6 +1,6 @@
 import * as RAC from 'react-aria-components'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
 
 export interface PageNavProps extends ComponentBase {
@@ -21,12 +21,7 @@ export const PageNav = ({ children, className }: ComponentBase) => {
   )
 }
 
-const PageNavLink = ({
-  children,
-  to,
-  direction,
-  className,
-}: PageNavProps) => {
+const PageNavLink = ({ children, to, direction, className }: PageNavProps) => {
   const isNext = direction === 'next'
   return (
     <RAC.Link
@@ -54,7 +49,7 @@ const PageNavTitle = ({ children, className }: ComponentBase) => {
   return (
     <span
       className={cn(
-        'text-xs font-medium uppercase tracking-wider text-text-muted',
+        'text-xs font-medium uppercase text-text-muted',
         className,
       )}
     >
@@ -81,4 +76,4 @@ PageNav.Root = PageNav
 PageNav.Link = PageNavLink
 PageNav.Title = PageNavTitle
 PageNav.Description = PageNavDescription
-PageNav.Icon = PageNavIcon
+PageNav.Icon = PageNavIcon

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

@@ -1,7 +1,7 @@
 'use client'
 
 import * as RAC from 'react-aria-components'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface PopoverProps extends Omit<RAC.PopoverProps, 'children'> {
   children: React.ReactNode

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

@@ -1,6 +1,6 @@
 import * as RAC from 'react-aria-components'
 import { Search, Hash, FileText, CornerDownLeft } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
 
 export interface SearchDialogProps extends ComponentBase {
@@ -153,10 +153,7 @@ const SearchDialogItemIcon = ({
   )
 }
 
-const SearchDialogItemTitle = ({
-  children,
-  className,
-}: ComponentBase) => {
+const SearchDialogItemTitle = ({ children, className }: ComponentBase) => {
   return (
     <span
       className={cn('block font-medium truncate flex-1 text-sm', className)}
@@ -187,4 +184,4 @@ SearchDialog.Item = Object.assign(SearchDialogItemRoot, {
   Icon: SearchDialogItemIcon,
   Title: SearchDialogItemTitle,
   Bio: SearchDialogItemBio,
-})
+})

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

@@ -1,15 +1,19 @@
 import { Link } from './link'
 import * as RAC from 'react-aria-components'
 import { ChevronRight } from 'lucide-react'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
-import type { ComponentRoute } from '@client/types'
+import type { ComponentRoute } from '../../types'
 
 export interface SidebarGroupProps extends ComponentBase {
   title?: string
   icon?: React.ElementType
+}
+
+export interface SidebarSubGroupProps extends SidebarLinkProps {
   isOpen?: boolean
   onToggle?: () => void
+  children?: React.ReactNode
 }
 
 export interface SidebarLinkProps extends ComponentBase {
@@ -73,35 +77,24 @@ const SidebarGroup = ({
   children,
   title,
   icon: Icon,
-  isOpen = true,
-  onToggle,
   className,
 }: SidebarGroupProps) => {
   return (
     <div className={cn('space-y-1', className)}>
       {title && (
-        <RAC.Button
-          onPress={onToggle}
+        <div
           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',
+            'flex w-full items-center justify-between px-2 py-1.5 text-sm font-semibold',
+            'text-text-main',
           )}
         >
           <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>
+        </div>
       )}
-      {isOpen && <div className="space-y-0.5">{children}</div>}
+      {children && <div className="space-y-0.5">{children}</div>}
     </div>
   )
 }
@@ -125,9 +118,10 @@ const SidebarLink = ({
         'group flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none',
         'transition-all duration-200 ease-in-out',
         '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 hover:translate-x-1',
+        {
+          'bg-primary-500/10 text-primary-500 font-medium': active,
+          'text-text-muted hover:bg-bg-muted hover:text-text-main': !active,
+        },
         className,
       )}
     >
@@ -147,7 +141,71 @@ const SidebarLink = ({
   )
 }
 
+const SidebarSubGroup = ({
+  label,
+  href,
+  active,
+  icon: Icon,
+  badge,
+  className,
+  isOpen = false,
+  onToggle,
+  children,
+}: SidebarSubGroupProps) => {
+  return (
+    <div className="space-y-0.5">
+      <div className="flex items-center w-full">
+        <Link
+          href={href}
+          className={cn(
+            'group flex flex-1 items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm outline-none',
+            'transition-all duration-200 ease-in-out',
+            '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 hover:translate-x-1',
+            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>
+        {children && (
+          <RAC.Button
+            onPress={onToggle}
+            className="flex items-center justify-center p-1.5 ml-1 rounded-md text-text-muted hover:bg-bg-surface hover:text-text-main transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary-500/30 cursor-pointer"
+          >
+            <ChevronRight
+              size={16}
+              className={cn(
+                'transition-transform duration-200',
+                isOpen && 'rotate-90',
+              )}
+            />
+          </RAC.Button>
+        )}
+      </div>
+      {isOpen && children && (
+        <div className="pl-4 ml-[7px] border-l border-border-subtle/50 space-y-0.5 mt-0.5">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
 Sidebar.Root = Sidebar
 Sidebar.Group = SidebarGroup
+Sidebar.SubGroup = SidebarSubGroup
 Sidebar.GroupItem = SidebarGroupItem
-Sidebar.Link = SidebarLink
+Sidebar.Link = SidebarLink

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

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: 'rect' | 'circle'

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

@@ -1,4 +1,4 @@
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
 
 export interface TabsItemProps extends ComponentBase {
@@ -13,11 +13,7 @@ export interface TabsIndicatorProps extends ComponentBase {
   style?: React.CSSProperties
 }
 
-export const Tabs = ({
-  children,
-  className = '',
-  ...props
-}: ComponentBase) => {
+export const Tabs = ({ children, className = '', ...props }: ComponentBase) => {
   return (
     <div className={cn('w-full', className)} {...props}>
       {children}
@@ -66,10 +62,7 @@ const TabsContent = ({ children, className = '' }: ComponentBase) => {
   return <div className={cn('p-4 outline-none', className)}>{children}</div>
 }
 
-const TabsIndicator = ({
-  className = '',
-  style,
-}: TabsIndicatorProps) => {
+const TabsIndicator = ({ className = '', style }: TabsIndicatorProps) => {
   return (
     <div
       className={cn(
@@ -85,4 +78,4 @@ Tabs.Root = Tabs
 Tabs.List = TabsList
 Tabs.Item = TabsItem
 Tabs.Content = TabsContent
-Tabs.Indicator = TabsIndicator
+Tabs.Indicator = TabsIndicator

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import * as RAC from 'react-aria-components'
-import { cn } from '@client/utils/cn'
+import { cn } from '../../utils/cn'
 
 export interface TooltipProps extends Omit<RAC.TooltipProps, 'children'> {
   /** The content to show inside the tooltip */
@@ -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.
@@ -78,4 +78,4 @@ export const Tooltip = ({
 }
 
 Tooltip.Root = Tooltip
-Tooltip.Content = TooltipContent
+Tooltip.Content = TooltipContent

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

@@ -1,10 +1,8 @@
-import { useBreadcrumbs } from '@hooks/use-breadcrumbs'
+import { useBreadcrumbs } from '../../hooks/use-breadcrumbs'
 import { Home } from 'lucide-react'
-import {
-  Breadcrumbs as BreadcrumbsRoot,
-} from '@components/primitives/breadcrumbs'
-import { cn } from '@client/utils/cn'
-import { useConfig } from '@client/app/config-context'
+import { Breadcrumbs as BreadcrumbsRoot } from '../primitives/breadcrumbs'
+import { cn } from '../../utils/cn'
+import { useConfig } from '../../app/config-context'
 
 export function Breadcrumbs() {
   const { crumbs, activeRoute } = useBreadcrumbs()

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

@@ -1,13 +1,8 @@
 import { useState } from 'react'
 import { Copy, Check, ExternalLink, ChevronDown } from 'lucide-react'
-import {
-  Button,
-  ButtonGroup,
-  Menu,
-  cn,
-} from '@client/components/primitives'
+import { Button, ButtonGroup, Menu, cn } from '../../components/primitives'
 
-import type { ComponentRoute } from '@client/types'
+import type { ComponentRoute } from '../../types'
 
 export interface CopyMarkdownProps {
   content?: string

package/src/client/components/ui-base/github-stars.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { getStarsRepo } from '@client/utils/github'
-import { Github } from '@components/icons-dev'
+import { getStarsRepo } from '../../utils/github'
+import { Github } from '../icons-dev'
 
 export function GithubStars({ repo }: { repo: string }) {
   const [stars, setStars] = useState<string | null>(null)