boltdocs 2.6.1 → 2.7.0

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

@@ -1,48 +1,56 @@
-import {
-  Link as RACLink,
-  type LinkProps as RACLinkProps,
-} from 'react-aria-components'
-import { useLocation } from 'react-router-dom'
+import { useNavigate, useLocation } from 'react-router-dom'
 import { useLocalizedTo } from '../../hooks/use-localized-to'
 import { cn } from '../../utils/cn'
-import { forwardRef } from 'react'
-
-export interface LinkProps extends RACLinkProps {
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Should prefetch the page on hover? Default 'hover' */
   prefetch?: 'hover' | 'none'
 }
 
 /**
- * A primitive Link component that wraps React Aria Components' Link
+ * A primitive Link component that wraps a standard anchor tag
  * and adds framework-specific logic for path localization and preloading.
- *
- * It uses the global navigation configuration from BoltdocsRouterProvider
- * to handle seamless client-side transitions.
  */
-export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
-  const { href, prefetch = 'hover', onMouseEnter, onFocus, ...rest } = props
+export const Link = (props: LinkProps) => {
+  const { href, onMouseEnter, onFocus, onClick, ...rest } = props
 
+  const navigate = useNavigate()
   const localizedHref = useLocalizedTo(href ?? '')
 
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(e)
+    if (e.defaultPrevented) return
+
+    const isExternal =
+      localizedHref &&
+      (localizedHref.startsWith('http://') ||
+        localizedHref.startsWith('https://') ||
+        localizedHref.startsWith('//'))
+
+    if (!isExternal) {
+      e.preventDefault()
+      navigate(localizedHref)
+    }
+  }
+
   const handleMouseEnter = (e: React.MouseEvent<HTMLAnchorElement>) => {
     onMouseEnter?.(e)
   }
 
-  const handleFocus = (e: React.FocusEvent) => {
-    onFocus?.(e as any)
+  const handleFocus = (e: React.FocusEvent<HTMLAnchorElement>) => {
+    onFocus?.(e)
   }
 
   return (
-    <RACLink
+    <a
       {...rest}
-      ref={ref}
-      href={localizedHref as string}
+      href={localizedHref}
+      onClick={handleClick}
       onMouseEnter={handleMouseEnter}
-      onFocus={handleFocus as any}
+      onFocus={handleFocus}
     />
   )
-})
-Link.displayName = 'Link'
+}
 
 /**
  * Props for the NavLink component, extending standard Link props.
@@ -68,37 +76,27 @@ export interface NavLinkProps
 
 /**
  * A primitive NavLink component that provides active state detection.
- *
- * 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 = forwardRef<HTMLAnchorElement, NavLinkProps>(
-  (props, ref) => {
-    const { href, end = false, className, children, ...rest } = props
-    const location = useLocation()
-    const localizedHref = useLocalizedTo(href ?? '')
+export const NavLink = (props: NavLinkProps) => {
+  const { href, end = false, className, children, ...rest } = props
+  const location = useLocation()
 
-    const isActive = end
-      ? location.pathname === localizedHref
-      : location.pathname.startsWith(localizedHref as string)
+  const localizedHref = useLocalizedTo(href ?? '')
+
+  const isActive = end
+    ? location.pathname === localizedHref
+    : location.pathname.startsWith(localizedHref)
 
-    const resolvedClassName =
-      typeof className === 'function'
-        ? className({ isActive })
-        : cn(className, isActive && 'active')
-    const resolvedChildren =
-      typeof children === 'function' ? children({ isActive }) : children
+  const resolvedClassName =
+    typeof className === 'function'
+      ? className({ isActive })
+      : cn(className, isActive && 'active')
+  const resolvedChildren =
+    typeof children === 'function' ? children({ isActive }) : children
 
-    return (
-      <Link
-        {...rest}
-        ref={ref}
-        href={href}
-        className={resolvedClassName as any}
-      >
-        {resolvedChildren as any}
-      </Link>
-    )
-  },
-)
-NavLink.displayName = 'NavLink'
+  return (
+    <Link {...rest} href={href} className={resolvedClassName}>
+      {resolvedChildren}
+    </Link>
+  )
+}

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

@@ -1,25 +1,25 @@
-'use client'
-
-import { Check, ChevronRight, Dot } from 'lucide-react'
+import { Check, ChevronRight } from 'lucide-react'
 import * as RAC from 'react-aria-components'
 import { Children } from 'react'
 import { Popover, type PopoverProps } from './popover'
 import { cn } from '../../utils/cn'
+
 /**
  * MenuTrigger wraps a trigger (usually a Button) and a Menu.
  */
 export interface MenuTriggerProps extends RAC.MenuTriggerProps {
   placement?: PopoverProps['placement']
+  className?: string
 }
 
-function MenuTrigger(props: MenuTriggerProps) {
+function MenuTrigger({ placement, className, ...props }: MenuTriggerProps) {
   const [trigger, menu] = (
     Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
   return (
     <RAC.MenuTrigger {...props}>
       {trigger as any}
-      <Popover placement={props.placement} className="min-w-35">
+      <Popover placement={placement} className={className}>
         {menu as any}
       </Popover>
     </RAC.MenuTrigger>
@@ -29,14 +29,18 @@ function MenuTrigger(props: MenuTriggerProps) {
 /**
  * SubmenuTrigger for nested menus.
  */
-function SubmenuTrigger(props: RAC.SubmenuTriggerProps) {
+export interface SubmenuTriggerProps extends RAC.SubmenuTriggerProps {
+  className?: string
+}
+
+function SubmenuTrigger({ className, ...props }: SubmenuTriggerProps) {
   const [trigger, menu] = (
     Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
   return (
     <RAC.SubmenuTrigger {...props}>
       {trigger as any}
-      <Popover offset={-4} crossOffset={-4}>
+      <Popover offset={-4} crossOffset={-4} className={className}>
         {menu as any}
       </Popover>
     </RAC.SubmenuTrigger>
@@ -51,10 +55,7 @@ export function Menu<T extends object>(props: RAC.MenuProps<T>) {
     <RAC.Menu
       {...props}
       className={RAC.composeRenderProps(props.className, (className) =>
-        cn(
-          'p-1.5 outline-none max-h-[inherit] overflow-auto max-w-75',
-          className,
-        ),
+        cn('outline-none overflow-auto', className),
       )}
     />
   )
@@ -72,42 +73,24 @@ function MenuItem(props: RAC.MenuItemProps) {
     <RAC.MenuItem
       {...props}
       textValue={textValue}
-      className={RAC.composeRenderProps(
-        props.className,
-        (className, { isFocused, isPressed, isDisabled }) =>
-          cn(
-            'group relative flex flex-row items-center gap-2 px-2 py-1 rounded-lg outline-none cursor-default hover:cursor-pointer transition-none',
-            'text-text-main text-[12px]',
-            {
-              'bg-bg-surface-elevated text-primary-600 ring-1 ring-border-strong/5':
-                isFocused,
-              'bg-bg-surface-elevanted': isPressed,
-              'opacity-40 grayscale pointer-events-none': isDisabled,
-            },
-            className,
-          ),
+      className={RAC.composeRenderProps(props.className, (className) =>
+        cn(
+          'group relative flex flex-row items-center cursor-default outline-none',
+          className,
+        ),
       )}
     >
       {RAC.composeRenderProps(
         props.children,
         (children, { selectionMode, isSelected, hasSubmenu }) => (
           <>
-            {selectionMode !== 'none' && (
-              <span className="flex items-center size-4 shrink-0 justify-center">
-                {isSelected && selectionMode === 'multiple' && (
-                  <Check className="size-3.5 stroke-[2.5px] text-primary-500 animate-in zoom-in-50 duration-200" />
-                )}
-                {isSelected && selectionMode === 'single' && (
-                  <Dot className="size-5 text-primary-500 animate-in zoom-in-50 duration-200" />
-                )}
+            {selectionMode === 'multiple' && (
+              <span className="flex items-center shrink-0 justify-center">
+                {isSelected && <Check className="size-3.5" />}
               </span>
             )}
-            <div className="flex flex-row w-full transition-colors items-center gap-2 py-1 px-1">
-              {children}
-            </div>
-            {hasSubmenu && (
-              <ChevronRight className="size-4 ml-auto text-text-muted group-focused:text-primary-500/70 transition-colors" />
-            )}
+            <div className="flex flex-row w-full items-center">{children}</div>
+            {hasSubmenu && <ChevronRight className="size-4 ml-auto" />}
           </>
         ),
       )}
@@ -129,13 +112,9 @@ function MenuSection<T extends object>({
   return (
     <RAC.MenuSection
       {...props}
-      className={cn('flex flex-col gap-0.5', props.className)}
+      className={cn('flex flex-col', props.className)}
     >
-      {title && (
-        <RAC.Header className="px-3 py-2 text-[10px] font-bold uppercase tracking-[0.075em] text-text-muted/50 select-none">
-          {title}
-        </RAC.Header>
-      )}
+      {title && <RAC.Header className="select-none">{title}</RAC.Header>}
       <RAC.Collection items={props.items}>{props.children}</RAC.Collection>
     </RAC.MenuSection>
   )
@@ -146,10 +125,7 @@ function MenuSection<T extends object>({
  */
 function MenuSeparator(props: RAC.SeparatorProps) {
   return (
-    <RAC.Separator
-      {...props}
-      className="mx-2 my-1.5 border-t border-border-subtle/50"
-    />
+    <RAC.Separator {...props} className={cn('border-t', props.className)} />
   )
 }
 

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

@@ -1,7 +1,17 @@
 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 {
+  Button as ButtonRAC,
+  ModalOverlay,
+  Modal,
+  Dialog,
+  Separator,
+  ToggleButton,
+} from 'react-aria-components'
+import { Link } from './link'
+import { Menu } from './menu'
+import { Popover } from './popover'
+import { cn } from '../../utils/cn'
+import { Sun, Moon, ExternalLink, MoreVertical, X } from 'lucide-react'
 import * as IconsSocials from '../icons-dev'
 import type { ComponentBase } from './types'
 import type { BoltdocsSocialLink } from '../../../shared/types'
@@ -9,7 +19,6 @@ import type { BoltdocsSocialLink } from '../../../shared/types'
 export interface NavbarLinkProps extends Omit<ComponentBase, 'children'> {
   label: ReactNode
   href: string
-  active?: boolean
   to?: 'internal' | 'external'
 }
 
@@ -18,6 +27,7 @@ export interface NavbarLogoProps extends Omit<ComponentBase, 'children'> {
   alt: string
   width?: number
   height?: number
+  href?: string
 }
 
 export interface NavbarSearchTriggerProps extends ComponentBase {
@@ -38,10 +48,7 @@ export interface NavbarSocialsProps extends ComponentBase {
 export const Navbar = ({ children, className, ...props }: ComponentBase) => {
   return (
     <header
-      className={cn(
-        'boltdocs-navbar sticky top-0 z-50 w-full border-b border-border-subtle bg-bg-main/80 backdrop-blur-md',
-        className,
-      )}
+      className={cn('boltdocs-navbar sticky top-0 z-50 w-full', className)}
       {...props}
     >
       {children}
@@ -107,10 +114,11 @@ const NavbarLogo = ({
   width = 24,
   height = 24,
   className,
+  href = '/',
 }: NavbarLogoProps) => {
   return (
     <Link
-      href="/"
+      href={href}
       className={cn('flex items-center gap-2 shrink-0 outline-none', className)}
     >
       {src ? (
@@ -126,9 +134,13 @@ const NavbarLogo = ({
   )
 }
 
-const NavbarTitle = ({ children, className }: ComponentBase) => {
+const NavbarTitle = ({
+  children,
+  className,
+  href = '/',
+}: { href?: string } & ComponentBase) => {
   return (
-    <Link href="/">
+    <Link href={href}>
       <span
         className={cn(
           'text-lg font-bold tracking-tight hidden sm:inline-block',
@@ -154,25 +166,12 @@ const NavbarLinks = ({ children, className }: ComponentBase) => {
   )
 }
 
-const NavbarLink = ({
-  label,
-  href,
-  active,
-  to,
-  className,
-}: NavbarLinkProps) => {
+const NavbarLink = ({ label, href, to, className }: NavbarLinkProps) => {
   return (
     <Link
       href={href}
       target={to === 'external' ? '_blank' : undefined}
-      className={cn(
-        'transition-colors outline-none font-medium focus-visible:ring-2 focus-visible:ring-primary-500/30 rounded-sm',
-        {
-          'text-primary-500': active,
-          'text-text-muted hover:text-text-main': !active,
-        },
-        className,
-      )}
+      className={cn('transition-all outline-none', className)}
     >
       {label as any}
       {to === 'external' && (
@@ -184,10 +183,115 @@ const NavbarLink = ({
   )
 }
 
-const NavbarSearchTrigger = ({
+const NavbarDropdown = ({
+  label,
+  className,
+  children,
+}: {
+  label: React.ReactNode
+  className?: string
+  children: React.ReactNode
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div
+      className={cn('relative', className)}
+      onMouseEnter={() => {
+        setIsOpen(true)
+      }}
+      onMouseLeave={() => {
+        setIsOpen(false)
+      }}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-1 outline-none cursor-pointer select-none font-medium text-muted hover:text-body transition-colors',
+        )}
+      >
+        {label}
+        <svg
+          className={cn('w-4 h-4 transition-transform', isOpen && 'rotate-180')}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </div>
+      {isOpen && (
+        <div className="absolute top-full left-0 pt-1 z-[9999]">
+          <div className="min-w-[180px] p-1 bg-surface border border-subtle rounded-md shadow-lg">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const NavbarDropdownItem = ({
+  href,
+  label,
+  className,
+}: {
+  href: string
+  label: string
+  className?: string
+}) => {
+  return (
+    <Link
+      href={href}
+      className={cn('block px-2 py-1.5 rounded hover:bg-surface', className)}
+    >
+      {label}
+    </Link>
+  )
+}
+
+const NavbarSearchTriggerDesktop = ({
+  className,
+  onPress,
+  children,
+}: NavbarSearchTriggerProps) => {
+  return (
+    <ButtonRAC
+      onPress={onPress}
+      className={cn(
+        'hidden lg:flex items-center justify-between gap-2 px-3 py-2 text-sm outline-none cursor-pointer w-full max-w-[720px]',
+        className,
+      )}
+    >
+      {children}
+    </ButtonRAC>
+  )
+}
+
+const NavbarSearchTriggerMobile = ({
   className,
   onPress,
+  children,
 }: NavbarSearchTriggerProps) => {
+  return (
+    <ButtonRAC
+      onPress={onPress}
+      className={cn(
+        'lg:hidden flex h-10 w-10 items-center justify-center outline-none cursor-pointer',
+        className,
+      )}
+      aria-label="Search"
+    >
+      {children}
+    </ButtonRAC>
+  )
+}
+
+const NavbarSearchTriggerKbd = ({ className }: ComponentBase) => {
   const [mounted, setMounted] = useState(false)
   const isMac = mounted && /Mac|iPod|iPhone|iPad/.test(navigator.platform)
 
@@ -196,43 +300,34 @@ const NavbarSearchTrigger = ({
   }, [])
 
   return (
-    <ButtonRAC
-      onPress={onPress}
+    <div
       className={cn(
-        'flex items-center gap-2 rounded-full border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-muted outline-none cursor-pointer',
-        'transition-all duration-200 hover:border-border-strong hover:text-text-main hover:bg-bg-muted hover:shadow-sm active:scale-[0.98]',
-        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-        'w-full max-w-[720px] justify-between',
+        'hidden sm:flex items-center gap-1 pointer-events-none select-none',
         className,
       )}
     >
-      <div className="flex items-center gap-2">
-        <Search size={16} />
-        <span className="hidden sm:inline-block">Search docs...</span>
-      </div>
-      <div className="hidden sm:flex items-center gap-1 pointer-events-none select-none">
-        <kbd className="flex h-5 items-center justify-center rounded border border-border-subtle bg-bg-main px-1.5 font-mono text-[10px] font-medium">
-          {isMac ? '⌘' : 'Ctrl'}
-        </kbd>
-        <kbd className="flex h-5 w-5 items-center justify-center rounded border border-border-subtle bg-bg-main font-mono text-[10px] font-medium">
-          K
-        </kbd>
-      </div>
-    </ButtonRAC>
+      <kbd className="flex items-center justify-center font-mono text-[10px]">
+        {isMac ? '⌘' : 'Ctrl'}
+      </kbd>
+      <kbd className="flex items-center justify-center font-mono text-[10px]">
+        K
+      </kbd>
+    </div>
   )
 }
 
+const NavbarSearchTrigger = {
+  Desktop: NavbarSearchTriggerDesktop,
+  Mobile: NavbarSearchTriggerMobile,
+  Kbd: NavbarSearchTriggerKbd,
+}
+
 const NavbarTheme = ({ className, theme, onThemeChange }: NavbarThemeProps) => {
   return (
     <ToggleButton
       isSelected={theme === 'dark'}
       onChange={onThemeChange}
-      className={cn(
-        'rounded-md p-2 text-text-muted outline-none cursor-pointer',
-        'transition-all duration-300 hover:bg-bg-surface hover:text-text-main hover:rotate-12 active:scale-90',
-        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-        className,
-      )}
+      className={cn('outline-none cursor-pointer', className)}
       aria-label="Toggle theme"
     >
       {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
@@ -253,12 +348,7 @@ const NavbarSocials = ({ icon, link, className }: NavbarSocialsProps) => {
       href={link}
       target="_blank"
       rel="noopener noreferrer"
-      className={cn(
-        'rounded-md p-2 text-text-muted outline-none transition-colors',
-        'hover:bg-bg-surface hover:text-text-main',
-        'focus-visible:ring-2 focus-visible:ring-primary-500/30',
-        className,
-      )}
+      className={cn('outline-none', className)}
     >
       <Icon name={icon} />
     </Link>
@@ -269,11 +359,91 @@ const NavbarSplit = ({ className }: ComponentBase) => {
   return (
     <Separator
       orientation="vertical"
-      className={cn('h-6 w-px bg-border-subtle mx-1', className)}
+      className={cn('h-full w-px', className)}
     />
   )
 }
 
+export interface NavbarMoreProps extends ComponentBase {
+  onPress?: () => void
+}
+
+const NavbarMore = ({ onPress, className }: NavbarMoreProps) => {
+  return (
+    <ButtonRAC
+      onPress={onPress}
+      className={cn(
+        'md:hidden flex items-center justify-center outline-none cursor-pointer',
+        className,
+      )}
+      aria-label="More navigation"
+    >
+      <MoreVertical size={20} />
+    </ButtonRAC>
+  )
+}
+
+export interface NavbarMobileMenuProps extends ComponentBase {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const NavbarMobileMenu = ({
+  isOpen,
+  onClose,
+  children,
+  className,
+}: NavbarMobileMenuProps) => {
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      isDismissable={true}
+      className={cn(
+        'fixed inset-0 z-60 md:hidden transition-all duration-100',
+        className,
+      )}
+    >
+      <Modal className="fixed inset-0 outline-none">
+        <Dialog className="relative h-full outline-none flex flex-col p-6 pt-[calc(1.5rem+env(safe-area-inset-top,0px))] pb-[calc(1.5rem+env(safe-area-inset-bottom,0px))] px-[calc(1.5rem+env(safe-area-inset-left,0px))]">
+          <div className="flex items-center justify-between mb-6">
+            <span></span>
+            <ButtonRAC
+              onPress={onClose}
+              className="flex items-center justify-center outline-none cursor-pointer text-muted hover:text-body transition-colors"
+              aria-label="Close menu"
+            >
+              <X size={24} />
+            </ButtonRAC>
+          </div>
+          <nav className="flex-1 overflow-y-auto flex flex-col gap-4">
+            {children}
+          </nav>
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+const NavbarMobileLink = ({
+  label,
+  href,
+  to,
+  onPress,
+  className,
+}: NavbarLinkProps & { onPress?: () => void }) => {
+  return (
+    <Link
+      href={href}
+      target={to === 'external' ? '_blank' : undefined}
+      onClick={onPress}
+      className={cn('group flex items-center outline-none', className)}
+    >
+      {label as any}
+    </Link>
+  )
+}
+
 Navbar.Root = Navbar
 Navbar.Left = NavbarLeft
 Navbar.Right = NavbarRight
@@ -282,10 +452,15 @@ Navbar.Logo = NavbarLogo
 Navbar.Title = NavbarTitle
 Navbar.Links = NavbarLinks
 Navbar.Link = NavbarLink
+Navbar.Dropdown = NavbarDropdown
+Navbar.DropdownItem = NavbarDropdownItem
 Navbar.SearchTrigger = NavbarSearchTrigger
 Navbar.Theme = NavbarTheme
 Navbar.Socials = NavbarSocials
 Navbar.Split = NavbarSplit
 Navbar.Content = NavbarContent
+Navbar.More = NavbarMore
+Navbar.MobileMenu = NavbarMobileMenu
+Navbar.MobileLink = NavbarMobileLink
 
 export default Navbar