boltdocs 2.7.10 → 2.8.0

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

@@ -1,102 +0,0 @@
-import { useNavigate, useLocation } from 'react-router-dom'
-import { useLocalizedTo } from '../../hooks/use-localized-to'
-import { cn } from '../../utils/cn'
-export interface LinkProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  /** Should prefetch the page on hover? Default 'hover' */
-  prefetch?: 'hover' | 'none'
-}
-
-/**
- * A primitive Link component that wraps a standard anchor tag
- * and adds framework-specific logic for path localization and preloading.
- */
-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<HTMLAnchorElement>) => {
-    onFocus?.(e)
-  }
-
-  return (
-    <a
-      {...rest}
-      href={localizedHref}
-      onClick={handleClick}
-      onMouseEnter={handleMouseEnter}
-      onFocus={handleFocus}
-    />
-  )
-}
-
-/**
- * Props for the NavLink component, extending standard Link props.
- */
-export interface NavLinkProps
-  extends Omit<LinkProps, 'className' | 'children'> {
-  /**
-   * When true, the active state will only be applied if the paths match exactly.
-   * Default is false.
-   */
-  end?: boolean
-  /**
-   * Provides access to the active state for conditional children rendering.
-   */
-  children?:
-    | React.ReactNode
-    | ((props: { isActive: boolean }) => React.ReactNode)
-  /**
-   * Provides access to the active state for conditional styling.
-   */
-  className?: string | ((props: { isActive: boolean }) => string)
-}
-
-/**
- * A primitive NavLink component that provides active state detection.
- */
-export const NavLink = (props: NavLinkProps) => {
-  const { href, end = false, className, children, ...rest } = props
-  const location = useLocation()
-
-  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
-
-  return (
-    <Link {...rest} href={href} className={resolvedClassName}>
-      {resolvedChildren}
-    </Link>
-  )
-}

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

@@ -1,137 +0,0 @@
-import { Check, ChevronRight } from '../ui-base/icons'
-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({ 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={placement} className={className}>
-        {menu as any}
-      </Popover>
-    </RAC.MenuTrigger>
-  )
-}
-
-/**
- * SubmenuTrigger for nested menus.
- */
-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} className={className}>
-        {menu as any}
-      </Popover>
-    </RAC.SubmenuTrigger>
-  )
-}
-
-/**
- * The Menu container.
- */
-export function Menu<T extends object>(props: RAC.MenuProps<T>) {
-  return (
-    <RAC.Menu
-      {...props}
-      className={RAC.composeRenderProps(props.className, (className) =>
-        cn('outline-none overflow-auto', className),
-      )}
-    />
-  )
-}
-
-/**
- * MenuItem with support for selection states and submenus.
- */
-function MenuItem(props: RAC.MenuItemProps) {
-  const textValue =
-    props.textValue ||
-    (typeof props.children === 'string' ? props.children : undefined)
-
-  return (
-    <RAC.MenuItem
-      {...props}
-      textValue={textValue}
-      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 === 'multiple' && (
-              <span className="flex items-center shrink-0 justify-center">
-                {isSelected && <Check className="size-3.5" />}
-              </span>
-            )}
-            <div className="flex flex-row w-full items-center">{children}</div>
-            {hasSubmenu && <ChevronRight className="size-4 ml-auto" />}
-          </>
-        ),
-      )}
-    </RAC.MenuItem>
-  )
-}
-
-/**
- * MenuSection for grouping items with an optional header.
- */
-export interface MenuSectionProps<T> extends RAC.MenuSectionProps<T> {
-  title?: string
-}
-
-function MenuSection<T extends object>({
-  title,
-  ...props
-}: MenuSectionProps<T>) {
-  return (
-    <RAC.MenuSection
-      {...props}
-      className={cn('flex flex-col', props.className)}
-    >
-      {title && <RAC.Header className="select-none">{title}</RAC.Header>}
-      <RAC.Collection items={props.items}>{props.children}</RAC.Collection>
-    </RAC.MenuSection>
-  )
-}
-
-/**
- * MenuSeparator for visual division.
- */
-function MenuSeparator(props: RAC.SeparatorProps) {
-  return (
-    <RAC.Separator {...props} className={cn('border-t', props.className)} />
-  )
-}
-
-Menu.Root = Menu
-Menu.Item = MenuItem
-Menu.Trigger = MenuTrigger
-Menu.SubTrigger = SubmenuTrigger
-Menu.Section = MenuSection
-Menu.Separator = MenuSeparator

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

@@ -1,466 +0,0 @@
-import { type ReactNode, useState, useEffect } from '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 '../ui-base/icons'
-import * as IconsSocials from '../icons-dev'
-import type { ComponentBase } from './types'
-import type { BoltdocsSocialLink } from '../../../shared/types'
-
-export interface NavbarLinkProps extends Omit<ComponentBase, 'children'> {
-  label: ReactNode
-  href: string
-  to?: 'internal' | 'external'
-}
-
-export interface NavbarLogoProps extends Omit<ComponentBase, 'children'> {
-  src: string
-  alt: string
-  width?: number
-  height?: number
-  href?: string
-}
-
-export interface NavbarSearchTriggerProps extends ComponentBase {
-  onPress: () => void
-}
-
-export interface NavbarThemeProps {
-  className?: string
-  theme: 'dark' | 'light'
-  onThemeChange: (isSelected: boolean) => void
-}
-
-export interface NavbarSocialsProps extends ComponentBase {
-  icon: string
-  link: string
-}
-
-export const Navbar = ({ children, className, ...props }: ComponentBase) => {
-  return (
-    <header
-      className={cn('boltdocs-navbar sticky top-0 z-50 w-full', className)}
-      {...props}
-    >
-      {children}
-    </header>
-  )
-}
-
-const NavbarContent = ({ children, className }: ComponentBase) => {
-  return (
-    <div
-      className={cn(
-        'mx-auto flex lg:h-navbar max-w-(--breakpoint-3xl) items-center justify-between px-4 md:px-6',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-const NavbarLeft = ({ children, className }: ComponentBase) => {
-  return (
-    <div
-      className={cn(
-        'flex flex-1 items-center justify-start gap-4 min-w-0',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-const NavbarRight = ({ children, className }: ComponentBase) => {
-  return (
-    <div
-      className={cn(
-        'flex flex-1 items-center justify-end gap-2 md:gap-4 min-w-0',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-const NavbarCenter = ({ children, className }: ComponentBase) => {
-  return (
-    <div
-      className={cn(
-        'hidden lg:flex flex-1 justify-center items-center gap-4 px-4 min-w-0 w-full',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}
-
-const NavbarLogo = ({
-  src,
-  alt,
-  width = 24,
-  height = 24,
-  className,
-  href = '/',
-}: NavbarLogoProps) => {
-  return (
-    <Link
-      href={href}
-      className={cn('flex items-center gap-2 shrink-0 outline-none', className)}
-    >
-      {src ? (
-        <img
-          src={src}
-          alt={alt}
-          width={width}
-          height={height}
-          className="h-6 w-6 object-contain"
-        />
-      ) : null}
-    </Link>
-  )
-}
-
-const NavbarTitle = ({
-  children,
-  className,
-  href = '/',
-}: { href?: string } & ComponentBase) => {
-  return (
-    <Link href={href}>
-      <span
-        className={cn(
-          'text-lg font-bold tracking-tight hidden sm:inline-block',
-          className,
-        )}
-      >
-        {children}
-      </span>
-    </Link>
-  )
-}
-
-const NavbarLinks = ({ children, className }: ComponentBase) => {
-  return (
-    <nav
-      className={cn(
-        'hidden md:flex items-center gap-6 text-sm font-medium',
-        className,
-      )}
-    >
-      {children}
-    </nav>
-  )
-}
-
-const NavbarLink = ({ label, href, to, className }: NavbarLinkProps) => {
-  return (
-    <Link
-      href={href}
-      target={to === 'external' ? '_blank' : undefined}
-      className={cn('transition-all outline-none', className)}
-    >
-      {label as any}
-      {to === 'external' && (
-        <span className="ml-1 inline-block">
-          <ExternalLink size={12} />
-        </span>
-      )}
-    </Link>
-  )
-}
-
-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)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <div
-      className={cn(
-        'hidden sm:flex items-center gap-1 pointer-events-none select-none',
-        className,
-      )}
-    >
-      <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('outline-none cursor-pointer', className)}
-      aria-label="Toggle theme"
-    >
-      {theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
-    </ToggleButton>
-  )
-}
-
-const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
-  if (name === 'github') return <IconsSocials.Github />
-  if (name === 'discord') return <IconsSocials.Discord />
-  if (name === 'x') return <IconsSocials.XSocial />
-  if (name === 'bluesky') return <IconsSocials.Bluesky />
-}
-
-const NavbarSocials = ({ icon, link, className }: NavbarSocialsProps) => {
-  return (
-    <Link
-      href={link}
-      target="_blank"
-      rel="noopener noreferrer"
-      className={cn('outline-none', className)}
-    >
-      <Icon name={icon} />
-    </Link>
-  )
-}
-
-const NavbarSplit = ({ className }: ComponentBase) => {
-  return (
-    <Separator
-      orientation="vertical"
-      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
-Navbar.Center = NavbarCenter
-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