boltdocs 1.10.2 → 2.0.0

package/src/client/app/scroll-handler.tsx

@@ -0,0 +1,40 @@
+import { useLayoutEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+/**
+ * Handles scroll restoration and hash scrolling on navigation.
+ * It ensures the page scrolls to top on pathname changes,
+ * or specifically to an anchor element if a hash is present.
+ */
+export function ScrollHandler() {
+  const { pathname, hash } = useLocation()
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pathname is used as a trigger for scroll-to-top on navigation
+  useLayoutEffect(() => {
+    const container = document.querySelector('.boltdocs-content')
+    if (!container) return
+
+    if (hash) {
+      const id = hash.replace('#', '')
+      const element = document.getElementById(id)
+      if (element) {
+        const offset = 80
+        const containerRect = container.getBoundingClientRect().top
+        const elementRect = element.getBoundingClientRect().top
+        const elementPosition = elementRect - containerRect
+        const offsetPosition = elementPosition - offset + container.scrollTop
+
+        container.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth',
+        })
+        return
+      }
+    }
+
+    // Scroll to top on navigation when no hash is specified
+    container.scrollTo(0, 0)
+  }, [pathname, hash])
+
+  return null
+}

package/src/client/app/theme-context.tsx

@@ -0,0 +1,75 @@
+import { createContext, use, useEffect, useState } from 'react'
+
+type Theme = 'light' | 'dark'
+
+interface ThemeContextType {
+  theme: Theme
+  toggleTheme: () => void
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>('dark')
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+    const stored = localStorage.getItem('boltdocs-theme')
+    if (stored === 'light' || stored === 'dark') {
+      setThemeState(stored as Theme)
+    } else {
+      const prefersDark = window.matchMedia(
+        '(prefers-color-scheme: dark)',
+      ).matches
+      setThemeState(prefersDark ? 'dark' : 'light')
+    }
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (!localStorage.getItem('boltdocs-theme')) {
+        setThemeState(e.matches ? 'dark' : 'light')
+      }
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+    const root = document.documentElement
+    if (theme === 'light') {
+      root.classList.add('theme-light')
+      root.dataset.theme = 'light'
+    } else {
+      root.classList.remove('theme-light')
+      root.dataset.theme = 'dark'
+    }
+  }, [theme, mounted])
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setThemeState(newTheme)
+    localStorage.setItem('boltdocs-theme', newTheme)
+  }
+
+  const setTheme = (newTheme: Theme) => {
+    setThemeState(newTheme)
+    localStorage.setItem('boltdocs-theme', newTheme)
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme() {
+  const context = use(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/client/components/default-layout.tsx

@@ -0,0 +1,80 @@
+import { DocsLayout } from '@components/docs-layout'
+import { Navbar } from '@components/ui-base/navbar'
+import { Sidebar } from '@components/ui-base/sidebar'
+import { OnThisPage } from '@components/ui-base/on-this-page'
+import { Head } from '@components/ui-base/head'
+import { Breadcrumbs } from '@components/ui-base/breadcrumbs'
+import { PageNav } from '@components/ui-base/page-nav'
+import { ProgressBar } from '@components/ui-base/progress-bar'
+import { ErrorBoundary } from '@components/ui-base/error-boundary'
+import { CopyMarkdown } from '@components/ui-base/copy-markdown'
+import { useRoutes } from '@client/hooks/use-routes'
+import { useConfig } from '@client/app/config-context'
+import { useMdxComponents } from '@client/app/mdx-components-context'
+
+import { useLocation } from 'react-router-dom'
+
+export interface LayoutProps {
+  children: React.ReactNode
+}
+
+/**
+ * The built-in default layout for Boltdocs.
+ * Users who create their own `layout.tsx` can import the same building blocks
+ * and rearrange, wrap, or replace any section.
+ */
+export function DefaultLayout({ children }: LayoutProps) {
+  const { routes: filteredRoutes, allRoutes, currentRoute } = useRoutes()
+  const { pathname } = useLocation()
+  const config = useConfig()
+  const mdxComponents = useMdxComponents()
+  const CopyMarkdownComp = (mdxComponents.CopyMarkdown as any) || CopyMarkdown
+
+  const isHome = pathname === '/' || pathname === ''
+
+  return (
+    <DocsLayout>
+      <ProgressBar />
+      <Head
+        siteTitle={config.themeConfig?.title || 'Boltdocs'}
+        siteDescription={config.themeConfig?.description || ''}
+        routes={allRoutes}
+      />
+      <Navbar />
+
+      <DocsLayout.Body>
+        {!isHome && <Sidebar routes={filteredRoutes} config={config} />}
+
+        <DocsLayout.Content>
+          {!isHome && (
+            <DocsLayout.ContentHeader>
+              <Breadcrumbs />
+              <CopyMarkdownComp
+                mdxRaw={currentRoute?._rawContent}
+                route={currentRoute}
+                config={config.themeConfig?.copyMarkdown}
+              />
+            </DocsLayout.ContentHeader>
+          )}
+
+          <ErrorBoundary>{children}</ErrorBoundary>
+
+          {!isHome && (
+            <DocsLayout.ContentFooter>
+              <PageNav />
+            </DocsLayout.ContentFooter>
+          )}
+        </DocsLayout.Content>
+
+        {!isHome && (
+          <OnThisPage
+            headings={currentRoute?.headings}
+            editLink={config.themeConfig?.editLink}
+            communityHelp={config.themeConfig?.communityHelp}
+            filePath={currentRoute?.filePath}
+          />
+        )}
+      </DocsLayout.Body>
+    </DocsLayout>
+  )
+}

package/src/client/components/docs-layout.tsx

@@ -0,0 +1,105 @@
+import type React from 'react'
+import { cn } from '@client/utils/cn'
+
+/**
+ * Props shared by all layout slot components.
+ */
+interface SlotProps {
+  children?: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}
+
+/**
+ * Root layout shell. Renders a full-height flex column.
+ *
+ * Usage:
+ * ```tsx
+ * <DocsLayout>
+ *   <Navbar />
+ *   <DocsLayout.Body>...</DocsLayout.Body>
+ * </DocsLayout>
+ * ```
+ */
+function DocsLayoutRoot({ children, className, style }: SlotProps) {
+  return (
+    <div
+      className={cn(
+        'h-screen flex flex-col overflow-hidden bg-bg-main text-text-main',
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Horizontal flex container for sidebar + content + toc.
+ */
+function Body({ children, className, style }: SlotProps) {
+  return (
+    <div
+      className={cn(
+        'mx-auto flex flex-1 w-full max-w-(--breakpoint-3xl) bg-bg-main overflow-hidden',
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Main scrollable content area.
+ */
+function Content({ children, className, style }: SlotProps) {
+  return (
+    <main
+      className={cn(
+        'boltdocs-content flex-1 min-w-0 overflow-y-auto',
+        className,
+      )}
+      style={style}
+    >
+      <div className="boltdocs-page mx-auto max-w-content-max pt-4 pb-20 px-4 sm:px-8">
+        {children}
+      </div>
+    </main>
+  )
+}
+
+/**
+ * Content header row (breadcrumbs + copy markdown).
+ */
+function ContentHeader({ children, className, style }: SlotProps) {
+  return (
+    <div
+      className={cn('flex items-center justify-between mb-10', className)}
+      style={style}
+    >
+      {children}
+    </div>
+  )
+}
+
+/**
+ * Footer area inside the content section (page nav).
+ */
+function ContentFooter({ children, className, style }: SlotProps) {
+  return (
+    <div className={cn('mt-20', className)} style={style}>
+      {children}
+    </div>
+  )
+}
+
+// Attach sub-components to the root
+export const DocsLayout = Object.assign(DocsLayoutRoot, {
+  Body,
+  Content,
+  ContentHeader,
+  ContentFooter,
+})

package/src/client/components/icons-dev.tsx

@@ -0,0 +1,74 @@
+import type { SVGProps } from 'react'
+
+type WrapperProps = SVGProps<SVGSVGElement> & {
+  size?: number
+}
+
+function wrapperProps(props: WrapperProps) {
+  const { size = 20, ...rest } = props
+  return {
+    ...rest,
+    width: size,
+    height: size,
+  }
+}
+
+export const Github = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...wrapperProps(props)}
+  >
+    <title>{'GitHub'}</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+)
+
+export const Discord = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...wrapperProps(props)}
+  >
+    <title>{'Discord'}</title>
+    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z" />
+  </svg>
+)
+
+export const XSocial = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...wrapperProps(props)}
+  >
+    <title>{'X'}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+)
+
+export const CodeSandbox = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...wrapperProps(props)}
+  >
+    <title>{'CodeSandbox'}</title>
+    <path d="M0 24h24V0H0v2.455h21.546v19.09H2.454V0H0Z" />
+  </svg>
+)
+
+export const Bluesky = (props: WrapperProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    {...wrapperProps(props)}
+  >
+    <title>{'Bluesky'}</title>
+    <path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026" />
+  </svg>
+)

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

@@ -0,0 +1,107 @@
+import {
+  Info,
+  Lightbulb,
+  AlertTriangle,
+  ShieldAlert,
+  Bookmark,
+  Zap,
+  Flame,
+} from 'lucide-react'
+import { cn } from '@client/utils/cn'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+const ICON_MAP: Record<string, React.ReactNode> = {
+  note: <Bookmark size={18} />,
+  tip: <Lightbulb size={18} />,
+  info: <Info size={18} />,
+  warning: <AlertTriangle size={18} />,
+  danger: <ShieldAlert size={18} />,
+  important: <Flame size={18} />,
+  caution: <Zap size={18} />,
+}
+
+const LABEL_MAP: Record<string, string> = {
+  note: 'Note',
+  tip: 'Tip',
+  info: 'Info',
+  warning: 'Warning',
+  danger: 'Danger',
+  important: 'Important',
+  caution: 'Caution',
+}
+
+const admonitionVariants = cva('py-4 px-4 rounded-lg', {
+  variants: {
+    type: {
+      note: 'border-primary-400 bg-primary-500/5 text-primary-400',
+      tip: 'border-emerald-500 bg-emerald-500/5 text-emerald-500',
+      info: 'border-sky-500 bg-sky-500/5 text-sky-500',
+      warning: 'border-amber-500 bg-amber-500/5 text-amber-500',
+      danger: 'border-red-500 bg-red-500/5 text-red-500',
+      important: 'border-orange-500 bg-orange-500/5 text-orange-500',
+      caution: 'border-yellow-500 bg-yellow-500/5 text-yellow-500',
+    },
+  },
+  defaultVariants: {
+    type: 'note',
+  },
+})
+type AdmonitionVariants = VariantProps<typeof admonitionVariants>
+
+export interface AdmonitionProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdmonitionVariants {
+  title?: string
+  children: React.ReactNode
+}
+
+export function Admonition({
+  type = 'note',
+  title,
+  children,
+  className = '',
+  ...rest
+}: AdmonitionProps) {
+  return (
+    <div
+      className={cn(admonitionVariants({ type }), className)}
+      role={type === 'warning' || type === 'danger' ? 'alert' : 'note'}
+      {...rest}
+    >
+      <div className="flex items-center flex-row gap-2 mb-2">
+        <span className={cn('shrink-0', admonitionVariants({ type }))}>
+          {ICON_MAP[type as keyof typeof ICON_MAP]}
+        </span>
+        <span className="text-sm font-bold tracking-tight text-text-main">
+          {title || LABEL_MAP[type as keyof typeof LABEL_MAP]}
+        </span>
+      </div>
+      <div className="text-sm text-text-muted leading-relaxed [&>p]:m-0 [&>p]:mb-2 [&>p:last-child]:mb-0">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export const Note = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="note" {...props} />
+)
+export const Tip = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="tip" {...props} />
+)
+export const Warning = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="warning" {...props} />
+)
+export const Danger = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="danger" {...props} />
+)
+export const InfoBox = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="info" {...props} />
+)
+export const Important = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="important" {...props} />
+)
+export const Caution = (props: Omit<AdmonitionProps, 'type'>) => (
+  <Admonition type="caution" {...props} />
+)

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

@@ -0,0 +1,41 @@
+import { cn } from '@client/utils/cn'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold tracking-tight',
+  {
+    variants: {
+      variant: {
+        default: 'bg-bg-surface text-text-muted border-border-subtle',
+        primary: 'bg-primary-500/15 text-primary-400 border-primary-500/20',
+        success: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/20',
+        warning: 'bg-amber-500/15 text-amber-400 border-amber-500/20',
+        danger: 'bg-red-500/15 text-red-400 border-red-500/20',
+        info: 'bg-sky-500/15 text-sky-400 border-sky-500/20',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  children: React.ReactNode
+}
+
+export function Badge({
+  variant = 'default',
+  children,
+  className = '',
+  ...rest
+}: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...rest}>
+      {children}
+    </span>
+  )
+}

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

@@ -0,0 +1,35 @@
+import {
+  Button as ButtonPrimitive,
+  buttonVariants,
+  type ButtonProps,
+} from '@components/primitives/button'
+import { cn } from '@client/utils/cn'
+
+export type { ButtonProps } from '@components/primitives/button'
+
+export const Button = ({
+  className,
+  variant,
+  size,
+  rounded,
+  iconSize,
+  disabled,
+  ...props
+}: ButtonProps) => {
+  return (
+    <ButtonPrimitive
+      className={cn(
+        'group',
+        buttonVariants({
+          variant,
+          size,
+          rounded,
+          iconSize,
+          disabled,
+          className,
+        }),
+      )}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,124 @@
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { useCallback, useRef } from 'react'
+import * as RAC from 'react-aria-components'
+import { cn } from '@client/utils/cn'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+const cardsVariants = cva('grid gap-4 my-6', {
+  variants: {
+    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',
+    },
+  },
+  defaultVariants: {
+    cols: 3,
+  },
+})
+type CardsVariants = VariantProps<typeof cardsVariants>
+
+export interface CardsProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    CardsVariants {}
+
+export function Cards({
+  cols = 3,
+  children,
+  className = '',
+  ...rest
+}: CardsProps) {
+  return (
+    <div className={cn(cardsVariants({ cols }), className)} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  icon?: React.ReactNode
+  href?: string
+  children?: React.ReactNode
+}
+
+export function Card({
+  title,
+  icon,
+  href,
+  children,
+  className = '',
+  ...rest
+}: CardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const linkRef = useRef<HTMLAnchorElement>(null)
+
+  const handleMouseMove = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
+    const el = cardRef.current || linkRef.current
+    if (!el) return
+    const { left, top } = el.getBoundingClientRect()
+    el.style.setProperty('--x', `${e.clientX - left}px`)
+    el.style.setProperty('--y', `${e.clientY - top}px`)
+  }, [])
+
+  const inner = (
+    <>
+      <div
+        className="pointer-events-none absolute -inset-px rounded-xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{
+          background:
+            'radial-gradient(400px circle at var(--x) var(--y), color-mix(in oklch, var(--color-primary-500), transparent 90%), transparent 80%)',
+        }}
+      />
+      {icon && (
+        <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-500/10 text-primary-400 text-lg transition-transform duration-300 group-hover:scale-105 group-hover:-rotate-3">
+          {icon}
+        </div>
+      )}
+      <div className="space-y-1.5">
+        {title && <h3 className="text-sm font-bold text-text-main">{title}</h3>}
+        {children && (
+          <div className="text-sm text-text-muted leading-relaxed">
+            {children}
+          </div>
+        )}
+      </div>
+    </>
+  )
+
+  const cardClasses = cn(
+    'group relative block rounded-xl border border-border-subtle bg-bg-surface p-5 outline-none overflow-hidden',
+    'transition-all duration-200 hover:border-primary-500/40 hover:shadow-lg hover:shadow-primary-500/5',
+    'focus-visible:ring-2 focus-visible:ring-primary-500/30',
+    className,
+  )
+
+  if (href) {
+    return (
+      <RAC.Link
+        ref={linkRef}
+        href={href}
+        className={cn(cardClasses, 'no-underline cursor-pointer')}
+        onMouseMove={handleMouseMove}
+        {...(rest as any)}
+      >
+        {inner}
+      </RAC.Link>
+    )
+  }
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: spotlight effect is decorative
+    <div
+      ref={cardRef}
+      role="presentation"
+      className={cardClasses}
+      onMouseMove={handleMouseMove}
+      {...rest}
+    >
+      {inner}
+    </div>
+  )
+}